@gx-design-vue/pro-layout-components 0.1.0-alpha.0

package/dist/AppsLogoComponents/style/simple.js

@@ -0,0 +1,83 @@
+//#region src/AppsLogoComponents/style/simple.ts
+const genAppsLogoComponentsSimpleListStyle = (token) => {
+	return { "&-content": {
+		maxHeight: "calc(100vh - 48px)",
+		overflow: "auto",
+		"&-list": {
+			boxSizing: "border-box",
+			maxWidth: 376,
+			marginBlock: 0,
+			marginInline: 0,
+			paddingBlock: 0,
+			paddingInline: 0,
+			listStyle: "none",
+			"&-item": {
+				position: "relative",
+				display: "inline-block",
+				width: 104,
+				height: 104,
+				marginBlock: 8,
+				marginInline: 8,
+				paddingInline: 24,
+				paddingBlock: 24,
+				verticalAlign: "top",
+				listStyleType: "none",
+				transition: "transform 0.2s cubic-bezier(0.333, 0, 0, 1)",
+				borderRadius: token.borderRadius,
+				"&-group": {
+					marginBottom: 16,
+					"&-title": {
+						margin: "16px 0 8px 12px",
+						fontWeight: 600,
+						color: "rgba(0, 0, 0, 0.88)",
+						fontSize: 16,
+						opacity: .85,
+						lineHeight: 1.5,
+						"&:first-child": { marginTop: 12 }
+					}
+				},
+				"&:hover": { backgroundColor: token.colorBgTextHover },
+				a: {
+					display: "flex",
+					flexDirection: "column",
+					alignItems: "center",
+					height: "100%",
+					fontSize: 12,
+					textDecoration: "none",
+					"& > #avatarLogo": {
+						width: 40,
+						height: 40,
+						margin: "0 auto",
+						color: token.colorPrimary,
+						fontSize: 22,
+						lineHeight: "40px",
+						textAlign: "center",
+						backgroundImage: "linear-gradient(180deg, #E8F0FB 0%, #F6F8FC 100%)",
+						borderRadius: token.borderRadius
+					},
+					"& > img": {
+						width: 40,
+						height: 40
+					},
+					"& > div": {
+						marginBlockStart: 5,
+						marginInlineStart: 0,
+						color: token.colorTextHeading,
+						fontSize: 14,
+						lineHeight: "22px",
+						whiteSpace: "nowrap",
+						textOverflow: "ellipsis"
+					},
+					"& > div > span": {
+						color: token.colorTextSecondary,
+						fontSize: 12,
+						lineHeight: "20px"
+					}
+				}
+			}
+		}
+	} };
+};
+
+//#endregion
+export { genAppsLogoComponentsSimpleListStyle };

package/dist/Icon/components/Paintbrush.d.ts

@@ -0,0 +1,6 @@
+import { FunctionalComponent } from "vue";
+
+//#region src/Icon/components/Paintbrush.d.ts
+declare const PaintbrushIcon: FunctionalComponent<any>;
+//#endregion
+export { PaintbrushIcon as default };

package/dist/Icon/components/Paintbrush.js

@@ -0,0 +1,21 @@
+import { createVNode, mergeProps } from "vue";
+
+//#region src/Icon/components/Paintbrush.tsx
+const PaintbrushIcon = (props = {}) => {
+	return createVNode("svg", mergeProps({
+		"xmlns": "http://www.w3.org/2000/svg",
+		"width": "1em",
+		"height": "1em",
+		"viewBox": "0 0 24 24"
+	}, props), [createVNode("g", {
+		"fill": "none",
+		"fill-rule": "evenodd"
+	}, [createVNode("path", { "d": "m12.594 23.258l-.012.002l-.071.035l-.02.004l-.014-.004l-.071-.036q-.016-.004-.024.006l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.016-.018m.264-.113l-.014.002l-.184.093l-.01.01l-.003.011l.018.43l.005.012l.008.008l.201.092q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.003-.011l.018-.43l-.003-.012l-.01-.01z" }, null), createVNode("path", {
+		"fill": "currentColor",
+		"d": "m8.464 4.222l12.021 12.02a1.01 1.01 0 0 1 0 1.415l-2.828 2.828a1 1 0 0 1-1.414 0L4.222 8.465a2 2 0 0 1 0-2.829l1.414-1.414a2 2 0 0 1 2.828 0M5 11.5c.444 0 .758.269.95.632l.053.112a3.87 3.87 0 0 0 1.385 1.672l.21.128c.358.202.62.525.62.955c0 .38-.203.68-.5.882l-.115.072a3.8 3.8 0 0 0-1.49 1.573l-.105.22c-.187.422-.512.754-1.008.754c-.452 0-.761-.274-.954-.641l-.054-.113a3.83 3.83 0 0 0-1.384-1.664l-.206-.126c-.359-.202-.621-.526-.621-.957c0-.383.208-.68.505-.883l.116-.072a3.76 3.76 0 0 0 1.482-1.565l.113-.236C4.18 11.826 4.51 11.5 5 11.5m5.586-2.328l-1.414 1.414l7.778 7.778l1.414-1.414zm6.845-1.77c.238-.481.8-.513 1.082-.097l.056.096c.216.435.574.804 1.043 1.04c.494.246.501.87.004 1.116a2.35 2.35 0 0 0-.954.872l-.09.164c-.24.486-.804.518-1.085.102l-.056-.096a2.3 2.3 0 0 0-.872-.945l-.17-.094c-.466-.232-.497-.79-.097-1.063l.092-.054a2.33 2.33 0 0 0 .957-.878l.09-.164ZM7.051 5.635L5.635 7.05l2.121 2.122l1.415-1.415L7.05 5.636ZM13.5 2c.294 0 .51.167.654.399l.06.11c.238.477.618.894 1.11 1.187l.196.107c.275.137.48.373.48.697c0 .283-.157.5-.38.64l-.105.06c-.52.26-.932.654-1.205 1.115l-.1.183c-.14.284-.374.502-.71.502c-.294 0-.51-.167-.654-.399l-.06-.11a2.9 2.9 0 0 0-1.11-1.187l-.196-.107c-.275-.137-.48-.374-.48-.698c0-.282.157-.499.38-.64l.105-.058c.52-.262.932-.654 1.205-1.116l.1-.183c.14-.284.374-.502.71-.502"
+	}, null)])]);
+};
+var Paintbrush_default = PaintbrushIcon;
+
+//#endregion
+export { Paintbrush_default as default };

package/dist/Icon/components/Palette.d.ts

@@ -0,0 +1,6 @@
+import { FunctionalComponent } from "vue";
+
+//#region src/Icon/components/Palette.d.ts
+declare const PaletteIcon: FunctionalComponent<any>;
+//#endregion
+export { PaletteIcon as default };

package/dist/Icon/components/Palette.js

@@ -0,0 +1,20 @@
+import { createVNode, mergeProps } from "vue";
+
+//#region src/Icon/components/Palette.tsx
+const PaletteIcon = (props = {}) => {
+	return createVNode("svg", mergeProps({
+		"xmlns": "http://www.w3.org/2000/svg",
+		"width": "1em",
+		"height": "1em",
+		"viewBox": "0 0 16 16"
+	}, props), [createVNode("path", {
+		"fill": "currentColor",
+		"fill-rule": "evenodd",
+		"d": "m14.489 8.388l-.001.006a.1.1 0 0 1-.027.028a.43.43 0 0 1-.264.082h-3.186c-3.118 0-4.68 3.77-2.476 5.974a6.5 6.5 0 1 1 5.953-6.09Zm-.292 1.616c.913 0 1.736-.618 1.79-1.529a8 8 0 1 0-7.032 7.468c1.243-.147 1.527-1.639.641-2.525c-1.26-1.26-.367-3.414 1.415-3.414zM10 5a1 1 0 1 1-2 0a1 1 0 0 1 2 0M6 7a1 1 0 1 0 0-2a1 1 0 0 0 0 2m0 2a1 1 0 1 1-2 0a1 1 0 0 1 2 0",
+		"clip-rule": "evenodd"
+	}, null)]);
+};
+var Palette_default = PaletteIcon;
+
+//#endregion
+export { Palette_default as default };

package/dist/Icon/components/index.d.ts

@@ -0,0 +1,10 @@
+import * as vue269 from "vue";
+
+//#region src/Icon/components/index.d.ts
+declare const components: {
+  paintbrush: vue269.FunctionalComponent<any, {}, any, {}>;
+  palette: vue269.FunctionalComponent<any, {}, any, {}>;
+};
+type IconType = keyof typeof components;
+//#endregion
+export { IconType, components as default };

package/dist/Icon/components/index.js

@@ -0,0 +1,11 @@
+import { defineAsyncComponent } from "vue";
+
+//#region src/Icon/components/index.ts
+const components = {
+	paintbrush: defineAsyncComponent(() => import("./Paintbrush.js")),
+	palette: defineAsyncComponent(() => import("./Palette.js"))
+};
+var components_default = components;
+
+//#endregion
+export { components_default as default };

package/dist/Icon/index.d.ts

@@ -0,0 +1,37 @@
+import { IconType } from "./components/index.js";
+import * as vue55 from "vue";
+import { PropType } from "vue";
+import { IconBaseType } from "@gx-design-vue/icon";
+import * as vue_jsx_runtime3 from "vue/jsx-runtime";
+
+//#region src/Icon/index.d.ts
+declare const _default: vue55.DefineComponent<vue55.ExtractPropTypes<{
+  type: {
+    type: PropType<IconType | IconBaseType>;
+    required: true;
+  };
+  class: PropType<string | string[]>;
+  onClick: PropType<any>;
+  spin: BooleanConstructor;
+  style: {
+    type: PropType<vue55.CSSProperties>;
+    default: () => {};
+  };
+}>, () => vue_jsx_runtime3.JSX.Element, {}, {}, {}, vue55.ComponentOptionsMixin, vue55.ComponentOptionsMixin, {}, string, vue55.PublicProps, Readonly<vue55.ExtractPropTypes<{
+  type: {
+    type: PropType<IconType | IconBaseType>;
+    required: true;
+  };
+  class: PropType<string | string[]>;
+  onClick: PropType<any>;
+  spin: BooleanConstructor;
+  style: {
+    type: PropType<vue55.CSSProperties>;
+    default: () => {};
+  };
+}>> & Readonly<{}>, {
+  spin: boolean;
+  style: vue55.CSSProperties;
+}, {}, {}, {}, string, vue55.ComponentProvideOptions, true, {}, any>;
+//#endregion
+export { _default as default };

package/dist/Icon/index.js

@@ -0,0 +1,24 @@
+import components_default from "./components/index.js";
+import { createVNode, defineComponent, mergeProps } from "vue";
+import { GIcon, defaultIconProps } from "@gx-design-vue/icon";
+
+//#region src/Icon/index.tsx
+var Icon_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	props: {
+		...defaultIconProps,
+		type: {
+			type: String,
+			required: true
+		}
+	},
+	setup(props) {
+		return () => createVNode(GIcon, mergeProps(props, {
+			"type": props.type,
+			"components": components_default
+		}), null);
+	}
+});
+
+//#endregion
+export { Icon_default as default };

package/dist/PageLock/Popup.d.ts

@@ -0,0 +1,43 @@
+import * as vue30 from "vue";
+import { PropType } from "vue";
+import * as vue_jsx_runtime1 from "vue/jsx-runtime";
+
+//#region src/PageLock/Popup.d.ts
+declare const _default: vue30.DefineComponent<vue30.ExtractPropTypes<{
+  password: PropType<string>;
+  name: {
+    type: PropType<string>;
+    default: any;
+  };
+  avatar: PropType<string>;
+  open: {
+    type: PropType<boolean>;
+    default: any;
+  };
+  onOpenChange: PropType<(open: boolean) => void>;
+  'onUpdate:open': PropType<(open: boolean) => void>;
+  cryptoFn: PropType<(password: string) => string>;
+  hashId: PropType<string>;
+  className: PropType<string>;
+}>, () => vue_jsx_runtime1.JSX.Element, {}, {}, {}, vue30.ComponentOptionsMixin, vue30.ComponentOptionsMixin, {}, string, vue30.PublicProps, Readonly<vue30.ExtractPropTypes<{
+  password: PropType<string>;
+  name: {
+    type: PropType<string>;
+    default: any;
+  };
+  avatar: PropType<string>;
+  open: {
+    type: PropType<boolean>;
+    default: any;
+  };
+  onOpenChange: PropType<(open: boolean) => void>;
+  'onUpdate:open': PropType<(open: boolean) => void>;
+  cryptoFn: PropType<(password: string) => string>;
+  hashId: PropType<string>;
+  className: PropType<string>;
+}>> & Readonly<{}>, {
+  name: string;
+  open: boolean;
+}, {}, {}, {}, string, vue30.ComponentProvideOptions, true, {}, any>;
+//#endregion
+export { _default as default };

package/dist/PageLock/Popup.js

@@ -0,0 +1,68 @@
+import useClockTime_default from "../hooks/useClockTime/index.js";
+import { basicProps, publicPageLockProps } from "./props.js";
+import UserForm_default from "./UserForm.js";
+import { Fragment, Teleport, computed, createTextVNode, createVNode, defineComponent } from "vue";
+import { useMergedState, useState } from "@gx-design-vue/pro-hooks";
+import { classNames, isBoolean } from "@gx-design-vue/pro-utils";
+import { Button } from "ant-design-vue";
+import { LockOutlined } from "@ant-design/icons-vue";
+
+//#region src/PageLock/Popup.tsx
+var Popup_default = /* @__PURE__ */ defineComponent({
+	name: "PageLockPopup",
+	props: {
+		...basicProps,
+		...publicPageLockProps,
+		password: String
+	},
+	setup(props) {
+		const [open, setOpen] = useMergedState(false, {
+			value: computed(() => isBoolean(props.open) ? props.open : false),
+			onChange: props.onOpenChange
+		});
+		const [lock, changeLock] = useState(false);
+		const clockTime = useClockTime_default();
+		const getClassName = (prefix = "", className) => {
+			return classNames(prefix ? `${props.className}-popup-${prefix}` : `${props.className}-popup`, props.hashId, className || "");
+		};
+		return () => {
+			if (open.value) return createVNode(Teleport, { "to": "body" }, { default: () => [createVNode("div", { "class": getClassName() }, [lock.value ? createVNode("div", { "class": getClassName("form") }, [createVNode(UserForm_default, {
+				"avatarSize": 70,
+				"submitText": "进入系统",
+				"avatar": props.avatar,
+				"hashId": props.hashId,
+				"className": props.className,
+				"validator": (value) => props.cryptoFn?.(value) === props.password,
+				"onSubmit": () => setOpen(false)
+			}, { default: () => [createVNode(Button, {
+				"style": { marginBlockStart: "16px" },
+				"type": "text",
+				"block": true,
+				"onClick": () => changeLock(false)
+			}, { default: () => [createTextVNode("返回")] })] }), createVNode("div", { "class": getClassName("form-time") }, [createVNode("span", { "style": { fontSize: "26px" } }, [
+				`${clockTime.hh}:${clockTime.mm}`,
+				createTextVNode("\xA0\xA0"),
+				clockTime.a
+			]), createVNode("span", { "style": { fontSize: "30px" } }, [
+				clockTime.day,
+				createTextVNode("\xA0\xA0"),
+				clockTime.dddd
+			])])]) : createVNode(Fragment, null, [createVNode("div", { "class": getClassName("head") }, [createVNode("span", null, [
+				clockTime.day,
+				createTextVNode("\xA0\xA0"),
+				clockTime.dddd
+			]), createVNode("span", {
+				"class": getClassName("lock-icon"),
+				"onClick": () => changeLock(true)
+			}, [createVNode(LockOutlined, { "style": {
+				position: "relative",
+				top: "1px",
+				marginInlineEnd: "4px"
+			} }, null), createTextVNode("点击解锁")])]), createVNode("div", { "class": getClassName("time", getClassName("enter", "fadeIn")) }, [createVNode("div", { "class": getClassName("time-card") }, [clockTime.hh, createVNode("span", { "class": getClassName("time-range") }, [clockTime.a])]), createVNode("div", { "class": getClassName("time-card") }, [clockTime.mm])])])])] });
+			return null;
+		};
+	}
+});
+
+//#endregion
+export { Popup_default as default };

package/dist/PageLock/UserForm.d.ts

@@ -0,0 +1,42 @@
+import { FromState } from "./useFormState.js";
+import * as vue213 from "vue";
+import { PropType } from "vue";
+import * as vue_jsx_runtime7 from "vue/jsx-runtime";
+
+//#region src/PageLock/UserForm.d.ts
+declare const _default: vue213.DefineComponent<vue213.ExtractPropTypes<{
+  name: {
+    type: PropType<string>;
+    default: any;
+  };
+  avatar: PropType<string>;
+  avatarSize: {
+    type: PropType<number>;
+    default: number;
+  };
+  submitText: PropType<string>;
+  validator: PropType<(value: string) => boolean>;
+  onSubmit: PropType<(fields: FromState) => void>;
+  hashId: PropType<string>;
+  className: PropType<string>;
+}>, () => vue_jsx_runtime7.JSX.Element, {}, {}, {}, vue213.ComponentOptionsMixin, vue213.ComponentOptionsMixin, {}, string, vue213.PublicProps, Readonly<vue213.ExtractPropTypes<{
+  name: {
+    type: PropType<string>;
+    default: any;
+  };
+  avatar: PropType<string>;
+  avatarSize: {
+    type: PropType<number>;
+    default: number;
+  };
+  submitText: PropType<string>;
+  validator: PropType<(value: string) => boolean>;
+  onSubmit: PropType<(fields: FromState) => void>;
+  hashId: PropType<string>;
+  className: PropType<string>;
+}>> & Readonly<{}>, {
+  name: string;
+  avatarSize: number;
+}, {}, {}, {}, string, vue213.ComponentProvideOptions, true, {}, any>;
+//#endregion
+export { _default as default };

package/dist/PageLock/UserForm.js

@@ -0,0 +1,68 @@
+import { basicProps } from "./props.js";
+import useFormState_default from "./useFormState.js";
+import { createVNode, defineComponent } from "vue";
+import { classNames } from "@gx-design-vue/pro-utils";
+import { Avatar, Button, Form, Input } from "ant-design-vue";
+import { UserOutlined } from "@ant-design/icons-vue";
+
+//#region src/PageLock/UserForm.tsx
+var UserForm_default = /* @__PURE__ */ defineComponent({
+	props: {
+		...basicProps,
+		name: {
+			type: [String],
+			default: void 0
+		},
+		avatar: String,
+		avatarSize: {
+			type: Number,
+			default: 60
+		},
+		submitText: String,
+		validator: Function,
+		onSubmit: Function
+	},
+	setup(props, { expose, slots }) {
+		const { formState, validate, validateInfos, resetFields } = useFormState_default(props.validator);
+		const merageFormState = (params) => {
+			Object.assign(formState, params);
+		};
+		const getClassName = (prefix = "", className) => {
+			return classNames(prefix ? `${props.className}-${prefix}` : props.className, props.hashId, className || "");
+		};
+		const submit = () => {
+			validate().then(() => {
+				props.onSubmit?.(formState);
+			}).catch(() => {});
+		};
+		expose({
+			formState,
+			resetFields,
+			merageFormState
+		});
+		return () => {
+			return createVNode("div", { "class": getClassName("user-form") }, [
+				createVNode("div", { "class": getClassName("user-info") }, [createVNode(Avatar, {
+					"size": props.avatarSize,
+					"icon": createVNode(UserOutlined, null, null),
+					"src": props.avatar
+				}, null), props.name && createVNode("div", { "class": getClassName("user-name") }, [props.name])]),
+				createVNode(Form, null, { default: () => [createVNode(Form.Item, validateInfos.password, { default: () => [createVNode(Input.Password, {
+					"value": formState.password,
+					"placeholder": "请输入锁屏密码",
+					"onChange": (e) => formState.password = e.target.value
+				}, null)] })] }),
+				createVNode(Button, {
+					"block": true,
+					"type": "primary",
+					"onClick": () => submit(),
+					"style": { marginBlockStart: "24px" }
+				}, { default: () => [props.submitText] }),
+				slots.default?.()
+			]);
+		};
+	}
+});
+
+//#endregion
+export { UserForm_default as default };

package/dist/PageLock/index.d.ts

@@ -0,0 +1,52 @@
+import { ShortcutKeyProps } from "./props.js";
+import * as vue192 from "vue";
+import * as ant_design_vue_es__util_type21 from "ant-design-vue/es/_util/type";
+
+//#region src/PageLock/index.d.ts
+declare const _default: vue192.DefineComponent<vue192.ExtractPropTypes<{
+  shortsKey: {
+    type: vue192.PropType<ShortcutKeyProps["lock"]>;
+    default: () => ShortcutKeyProps["lock"];
+  };
+  name: {
+    type: vue192.PropType<string>;
+    default: any;
+  };
+  avatar: vue192.PropType<string>;
+  open: {
+    type: vue192.PropType<boolean>;
+    default: any;
+  };
+  onOpenChange: vue192.PropType<(open: boolean) => void>;
+  'onUpdate:open': vue192.PropType<(open: boolean) => void>;
+  cryptoFn: vue192.PropType<(password: string) => string>;
+}>, () => ant_design_vue_es__util_type21.VueNode, {}, {}, {}, vue192.ComponentOptionsMixin, vue192.ComponentOptionsMixin, ("update:open" | "openChange")[], "update:open" | "openChange", vue192.PublicProps, Readonly<vue192.ExtractPropTypes<{
+  shortsKey: {
+    type: vue192.PropType<ShortcutKeyProps["lock"]>;
+    default: () => ShortcutKeyProps["lock"];
+  };
+  name: {
+    type: vue192.PropType<string>;
+    default: any;
+  };
+  avatar: vue192.PropType<string>;
+  open: {
+    type: vue192.PropType<boolean>;
+    default: any;
+  };
+  onOpenChange: vue192.PropType<(open: boolean) => void>;
+  'onUpdate:open': vue192.PropType<(open: boolean) => void>;
+  cryptoFn: vue192.PropType<(password: string) => string>;
+}>> & Readonly<{
+  onOpenChange?: (...args: any[]) => any;
+  "onUpdate:open"?: (...args: any[]) => any;
+}>, {
+  name: string;
+  open: boolean;
+  shortsKey: {
+    keys?: string;
+    disabled?: boolean;
+  };
+}, {}, {}, {}, string, vue192.ComponentProvideOptions, true, {}, any>;
+//#endregion
+export { _default as default };

package/dist/PageLock/index.js

@@ -0,0 +1,92 @@
+import { pageLockProps } from "./props.js";
+import UserForm_default from "./UserForm.js";
+import Popup_default from "./Popup.js";
+import { PageLockStyle } from "./style.js";
+import { Fragment, computed, createVNode, defineComponent, mergeProps, onMounted, ref, watch } from "vue";
+import { useMergedState, useState } from "@gx-design-vue/pro-hooks";
+import { useProStyle } from "@gx-design-vue/pro-provider";
+import { getPrefixCls } from "@gx-design-vue/pro-utils";
+import { useLocalStorage, useMagicKeys, whenever } from "@vueuse/core";
+import { GProModal } from "@gx-design-vue/pro-modal";
+import { pick } from "es-toolkit";
+
+//#region src/PageLock/index.tsx
+var PageLock_default = /* @__PURE__ */ defineComponent({
+	name: "PageLock",
+	props: pageLockProps,
+	emits: ["update:open", "openChange"],
+	setup(props) {
+		const baseClassName = getPrefixCls({
+			suffixCls: "page-lock",
+			isPor: true
+		});
+		const { wrapSSR, hashId } = useProStyle("ProPageLock", [PageLockStyle], baseClassName);
+		const localLockState = useLocalStorage(baseClassName, {
+			open: false,
+			password: ""
+		});
+		const [open, setOpen] = useMergedState(false, {
+			value: computed(() => props.open),
+			onChange: (val) => {
+				props.onOpenChange?.(val);
+				props["onUpdate:open"]?.(val);
+			}
+		});
+		const [popupOpen, setPopupOpen] = useState(false);
+		const formRef = ref();
+		function signPassword(str) {
+			return props.cryptoFn ? props.cryptoFn(str) : str;
+		}
+		function syncLocalState(password) {
+			localLockState.value.open = popupOpen.value;
+			localLockState.value.password = signPassword(password);
+		}
+		const shortKeys = computed(() => props.shortsKey);
+		const lockHasOpen = computed(() => localLockState.value.open && !!localLockState.value.password);
+		whenever(useMagicKeys()["Alt+KeyL"], () => {
+			if (shortKeys.value?.disabled || open.value) return;
+			setOpen(true);
+		});
+		watch(popupOpen, (val) => {
+			syncLocalState(val ? formRef.value?.formState?.password || localLockState.value.password || "" : "");
+		});
+		onMounted(() => {
+			if (lockHasOpen.value) setPopupOpen(true);
+			else syncLocalState("");
+		});
+		const handleOk = () => {
+			setOpen(false);
+			setPopupOpen(true);
+		};
+		const handleCancel = () => {
+			setOpen(false);
+			syncLocalState("");
+			formRef.value?.resetFields();
+		};
+		return () => {
+			return wrapSSR(createVNode(Fragment, null, [popupOpen.value && createVNode(Popup_default, mergeProps(pick(props, ["name", "avatar"]), {
+				"open": popupOpen.value,
+				"hashId": hashId.value,
+				"className": baseClassName,
+				"password": localLockState.value.password,
+				"cryptoFn": signPassword,
+				"onOpenChange": setPopupOpen
+			}), null), createVNode(GProModal, {
+				"width": 400,
+				"type": "normal",
+				"title": "锁定屏幕",
+				"open": open.value,
+				"footer": false,
+				"onCancel": handleCancel
+			}, { default: () => [createVNode(UserForm_default, mergeProps({ "ref": formRef }, pick(props, ["name", "avatar"]), {
+				"submitText": "锁定",
+				"hashId": hashId.value,
+				"className": baseClassName,
+				"onSubmit": handleOk
+			}), null)] })]));
+		};
+	}
+});
+
+//#endregion
+export { PageLock_default as default };

package/dist/PageLock/props.d.ts

@@ -0,0 +1,51 @@
+import { PropType } from "vue";
+
+//#region src/PageLock/props.d.ts
+interface ShortcutKeyProps {
+  search?: {
+    keys?: string;
+    disabled?: boolean;
+  };
+  lock?: {
+    keys?: string;
+    disabled?: boolean;
+  };
+}
+declare const basicProps: {
+  hashId: PropType<string>;
+  className: PropType<string>;
+};
+declare const publicPageLockProps: {
+  name: {
+    type: PropType<string>;
+    default: any;
+  };
+  avatar: PropType<string>;
+  open: {
+    type: PropType<boolean>;
+    default: any;
+  };
+  onOpenChange: PropType<(open: boolean) => void>;
+  'onUpdate:open': PropType<(open: boolean) => void>;
+  cryptoFn: PropType<(password: string) => string>;
+};
+declare const pageLockProps: {
+  shortsKey: {
+    type: PropType<ShortcutKeyProps["lock"]>;
+    default: () => ShortcutKeyProps["lock"];
+  };
+  name: {
+    type: PropType<string>;
+    default: any;
+  };
+  avatar: PropType<string>;
+  open: {
+    type: PropType<boolean>;
+    default: any;
+  };
+  onOpenChange: PropType<(open: boolean) => void>;
+  'onUpdate:open': PropType<(open: boolean) => void>;
+  cryptoFn: PropType<(password: string) => string>;
+};
+//#endregion
+export { ShortcutKeyProps, basicProps, pageLockProps, publicPageLockProps };