niuma-ui 1.1.12 → 1.2.0

package/dist/components/RsConfirmDialog.impl.js

@@ -0,0 +1,207 @@
+import { useRsI18n } from "../composables/useRsI18n.js";
+import RsButton_default from "./RsButton.js";
+import { AlertDialogContent, AlertDialogDescription, AlertDialogOverlay, AlertDialogPortal, AlertDialogRoot, AlertDialogTitle } from "./reka.js";
+import { isRsDialogWidthPreset, resolveDialogOverlayStyle, resolveRsDialogCssWidth, runRsConfirmBeforeClose } from "./dialog-utils.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, normalizeClass, normalizeStyle, openBlock, renderSlot, resolveDynamicComponent, toDisplayString, unref, useModel, withCtx } from "vue";
+//#region src/components/RsConfirmDialog.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "rs-confirm-dialog__main" };
+var _hoisted_2 = {
+	key: 0,
+	class: "rs-confirm-dialog__subtitle"
+};
+var _hoisted_3 = {
+	key: 4,
+	class: "rs-confirm-dialog__extra"
+};
+var _hoisted_4 = { class: "rs-confirm-dialog__footer" };
+var RsConfirmDialog_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "RsConfirmDialog",
+	props: /*@__PURE__*/ mergeModels({
+		title: {},
+		subtitle: {},
+		description: {},
+		tone: { default: "danger" },
+		icon: {},
+		width: {},
+		confirmText: {},
+		cancelText: {},
+		confirmVariant: { default: "danger" },
+		showCancel: {
+			type: Boolean,
+			default: true
+		},
+		confirmLoading: {
+			type: Boolean,
+			default: false
+		},
+		autoCloseOnConfirm: {
+			type: Boolean,
+			default: true
+		},
+		beforeClose: {},
+		showOverlay: {
+			type: Boolean,
+			default: false
+		},
+		overlayOpacity: {},
+		overlayBlur: {},
+		teleportTo: { type: [String, Boolean] }
+	}, {
+		"open": {
+			type: Boolean,
+			default: false
+		},
+		"openModifiers": {}
+	}),
+	emits: /*@__PURE__*/ mergeModels(["confirm", "cancel"], ["update:open"]),
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const open = useModel(__props, "open");
+		const props = __props;
+		const emit = __emit;
+		const { t } = useRsI18n();
+		const contentClass = computed(() => {
+			if (props.width && isRsDialogWidthPreset(props.width)) return `rs-confirm-dialog__content--${props.width}`;
+		});
+		const overlayStyle = computed(() => resolveDialogOverlayStyle({
+			overlayOpacity: props.overlayOpacity,
+			overlayBlur: props.overlayBlur
+		}));
+		const contentStyle = computed(() => {
+			if (props.width == null || isRsDialogWidthPreset(props.width)) return void 0;
+			const css = resolveRsDialogCssWidth(props.width);
+			if (!css) return void 0;
+			return { maxWidth: css };
+		});
+		const descriptionText = computed(() => {
+			if (props.description != null && props.description !== "") return props.description;
+		});
+		const showDefaultDescription = computed(() => descriptionText.value == null && !props.subtitle);
+		let closing = false;
+		let pendingCloseReason = "programmatic";
+		async function requestClose(reason) {
+			if (!open.value || closing) return false;
+			closing = true;
+			try {
+				if (!await runRsConfirmBeforeClose(props.beforeClose, reason)) return false;
+				open.value = false;
+				return true;
+			} finally {
+				closing = false;
+			}
+		}
+		async function onConfirmClick() {
+			emit("confirm");
+			if (props.autoCloseOnConfirm !== false) await requestClose("confirm");
+		}
+		async function onCancelClick() {
+			if (await requestClose("cancel")) emit("cancel");
+		}
+		function onEscapeKeyDown(event) {
+			if (props.confirmLoading) {
+				event.preventDefault();
+				return;
+			}
+			pendingCloseReason = "escape";
+		}
+		async function onUpdateOpen(next) {
+			if (next) {
+				open.value = true;
+				return;
+			}
+			if (closing) {
+				open.value = false;
+				return;
+			}
+			const reason = pendingCloseReason;
+			pendingCloseReason = "programmatic";
+			if (!await runRsConfirmBeforeClose(props.beforeClose, reason)) {
+				open.value = true;
+				return;
+			}
+			open.value = false;
+			if (reason === "escape" || reason === "programmatic") emit("cancel");
+		}
+		__expose({ 
+		/** 请求关闭（走 beforeClose） */
+close: (reason = "programmatic") => requestClose(reason) });
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(AlertDialogRoot), {
+				open: open.value,
+				"onUpdate:open": onUpdateOpen
+			}, {
+				default: withCtx(() => [createVNode(unref(AlertDialogPortal), {
+					disabled: __props.teleportTo === false,
+					to: __props.teleportTo === false ? void 0 : __props.teleportTo
+				}, {
+					default: withCtx(() => [__props.showOverlay ? (openBlock(), createBlock(unref(AlertDialogOverlay), {
+						key: 0,
+						class: "rs-confirm-dialog__overlay",
+						style: normalizeStyle(overlayStyle.value)
+					}, null, 8, ["style"])) : createCommentVNode("", true), createVNode(unref(AlertDialogContent), {
+						class: normalizeClass(["rs-confirm-dialog__content", contentClass.value]),
+						style: normalizeStyle(contentStyle.value),
+						"disable-outside-pointer-events": true,
+						onEscapeKeyDown
+					}, {
+						default: withCtx(() => [createElementVNode("div", { class: normalizeClass(["rs-confirm-dialog__icon", `rs-confirm-dialog__icon--${__props.tone}`]) }, [renderSlot(_ctx.$slots, "icon", {}, () => [__props.icon ? (openBlock(), createBlock(resolveDynamicComponent(__props.icon), {
+							key: 0,
+							class: "rs-confirm-dialog__icon-glyph"
+						})) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode("!")], 64))])], 2), createElementVNode("div", _hoisted_1, [
+							createVNode(unref(AlertDialogTitle), { class: "rs-confirm-dialog__title" }, {
+								default: withCtx(() => [createTextVNode(toDisplayString(__props.title ?? unref(t)("confirm.title")), 1)]),
+								_: 1
+							}),
+							__props.subtitle && descriptionText.value != null ? (openBlock(), createElementBlock("p", _hoisted_2, toDisplayString(__props.subtitle), 1)) : createCommentVNode("", true),
+							descriptionText.value != null ? (openBlock(), createBlock(unref(AlertDialogDescription), {
+								key: 1,
+								class: "rs-confirm-dialog__description"
+							}, {
+								default: withCtx(() => [createTextVNode(toDisplayString(descriptionText.value), 1)]),
+								_: 1
+							})) : __props.subtitle ? (openBlock(), createBlock(unref(AlertDialogDescription), {
+								key: 2,
+								class: "rs-confirm-dialog__subtitle"
+							}, {
+								default: withCtx(() => [createTextVNode(toDisplayString(__props.subtitle), 1)]),
+								_: 1
+							})) : showDefaultDescription.value ? (openBlock(), createBlock(unref(AlertDialogDescription), {
+								key: 3,
+								class: "rs-confirm-dialog__description"
+							}, {
+								default: withCtx(() => [createTextVNode(toDisplayString(unref(t)("confirm.description")), 1)]),
+								_: 1
+							})) : createCommentVNode("", true),
+							_ctx.$slots.extra ? (openBlock(), createElementBlock("div", _hoisted_3, [renderSlot(_ctx.$slots, "extra")])) : createCommentVNode("", true),
+							createElementVNode("footer", _hoisted_4, [__props.showCancel ? (openBlock(), createBlock(RsButton_default, {
+								key: 0,
+								variant: "default",
+								disabled: __props.confirmLoading,
+								onClick: onCancelClick
+							}, {
+								default: withCtx(() => [createTextVNode(toDisplayString(__props.cancelText ?? unref(t)("common.cancel")), 1)]),
+								_: 1
+							}, 8, ["disabled"])) : createCommentVNode("", true), createVNode(RsButton_default, {
+								variant: __props.confirmVariant,
+								loading: __props.confirmLoading,
+								disabled: __props.confirmLoading,
+								onClick: onConfirmClick
+							}, {
+								default: withCtx(() => [createTextVNode(toDisplayString(__props.confirmText ?? unref(t)("common.confirm")), 1)]),
+								_: 1
+							}, 8, [
+								"variant",
+								"loading",
+								"disabled"
+							])])
+						])]),
+						_: 3
+					}, 8, ["class", "style"])]),
+					_: 3
+				}, 8, ["disabled", "to"])]),
+				_: 3
+			}, 8, ["open"]);
+		};
+	}
+});
+//#endregion
+export { RsConfirmDialog_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/RsConfirmDialog.js

@@ -0,0 +1,7 @@
+import './RsConfirmDialog.css'
+import RsConfirmDialog_vue_vue_type_script_setup_true_lang_default from "./RsConfirmDialog.impl.js";
+
+//#region src/components/RsConfirmDialog.vue
+var RsConfirmDialog_default = RsConfirmDialog_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { RsConfirmDialog_default as default };

package/dist/components/RsContainer.css

@@ -0,0 +1,94 @@
+
+.rs-container[data-v-6eaab51c] {
+  width: 100%;
+  box-sizing: border-box;
+  max-width: var(--rs-container-max-current, var(--rs-container-max-lg));
+  padding-inline: var(--rs-container-padding-current, var(--rs-space-md));
+}
+.rs-container--centered[data-v-6eaab51c] {
+  margin-inline: auto;
+}
+.rs-container--grid[data-v-6eaab51c] {
+  display: grid;
+  grid-template-columns: repeat(var(--rs-container-columns-current, 12), minmax(0, 1fr));
+  gap: var(--rs-container-gap-current, var(--rs-space-md));
+}
+@media (width >= 40rem) {
+.rs-container[data-v-6eaab51c] {
+    max-width: var(--rs-container-max-sm, var(--rs-container-max-current, var(--rs-container-max-lg)));
+    padding-inline: var(--rs-container-padding-sm, var(--rs-container-padding-current, var(--rs-space-md)));
+}
+.rs-container--grid[data-v-6eaab51c] {
+    grid-template-columns: repeat(
+      var(--rs-container-columns-sm, var(--rs-container-columns-current, 12)),
+      minmax(0, 1fr)
+    );
+    gap: var(--rs-container-gap-sm, var(--rs-container-gap-current, var(--rs-space-md)));
+}
+}
+@media (width >= 48rem) {
+.rs-container[data-v-6eaab51c] {
+    max-width: var(--rs-container-max-md, var(--rs-container-max-sm, var(--rs-container-max-current)));
+    padding-inline: var(
+      --rs-container-padding-md,
+      var(--rs-container-padding-sm, var(--rs-container-padding-current))
+    );
+}
+.rs-container--grid[data-v-6eaab51c] {
+    grid-template-columns: repeat(
+      var(--rs-container-columns-md, var(--rs-container-columns-sm, var(--rs-container-columns-current, 12))),
+      minmax(0, 1fr)
+    );
+    gap: var(--rs-container-gap-md, var(--rs-container-gap-sm, var(--rs-container-gap-current)));
+}
+}
+@media (width >= 64rem) {
+.rs-container[data-v-6eaab51c] {
+    max-width: var(
+      --rs-container-max-lg,
+      var(--rs-container-max-md, var(--rs-container-max-sm, var(--rs-container-max-current)))
+    );
+    padding-inline: var(
+      --rs-container-padding-lg,
+      var(--rs-container-padding-md, var(--rs-container-padding-sm, var(--rs-container-padding-current)))
+    );
+}
+.rs-container--grid[data-v-6eaab51c] {
+    grid-template-columns: repeat(
+      var(
+        --rs-container-columns-lg,
+        var(--rs-container-columns-md, var(--rs-container-columns-sm, var(--rs-container-columns-current, 12)))
+      ),
+      minmax(0, 1fr)
+    );
+    gap: var(--rs-container-gap-lg, var(--rs-container-gap-md, var(--rs-container-gap-sm, var(--rs-container-gap-current))));
+}
+}
+@media (width >= 80rem) {
+.rs-container[data-v-6eaab51c] {
+    max-width: var(
+      --rs-container-max-xl,
+      var(--rs-container-max-lg, var(--rs-container-max-md, var(--rs-container-max-sm, var(--rs-container-max-current))))
+    );
+    padding-inline: var(
+      --rs-container-padding-xl,
+      var(--rs-container-padding-lg, var(--rs-container-padding-md, var(--rs-container-padding-sm, var(--rs-container-padding-current))))
+    );
+}
+.rs-container--grid[data-v-6eaab51c] {
+    grid-template-columns: repeat(
+      var(
+        --rs-container-columns-xl,
+        var(
+          --rs-container-columns-lg,
+          var(--rs-container-columns-md, var(--rs-container-columns-sm, var(--rs-container-columns-current, 12)))
+        )
+      ),
+      minmax(0, 1fr)
+    );
+    gap: var(
+      --rs-container-gap-xl,
+      var(--rs-container-gap-lg, var(--rs-container-gap-md, var(--rs-container-gap-sm, var(--rs-container-gap-current))))
+    );
+}
+}

package/dist/components/RsContainer.d.ts

@@ -0,0 +1,52 @@
+/** 支持的响应式断点，语义与常见 SaaS 前端一致。 */
+export type RsContainerBreakpoint = 'sm' | 'md' | 'lg' | 'xl';
+/** 内容区最大宽度档位，对应 `--rs-container-max-*` token。 */
+export type RsContainerMaxWidth = 'sm' | 'md' | 'lg' | 'xl' | 'full';
+/** 水平内边距档位，对应 `--rs-space-*` token。 */
+export type RsContainerPadding = 'none' | 'sm' | 'md' | 'lg';
+/** 栅格间距档位，对应 `--rs-space-*` token。 */
+export type RsContainerGap = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+/** 断点映射配置，用于 maxWidth、padding、columns、gap。 */
+export type RsContainerResponsive<T> = Partial<Record<RsContainerBreakpoint, T>>;
+/** 支持固定值或断点映射。 */
+export type RsContainerMaybeResponsive<T> = T | RsContainerResponsive<T>;
+type __VLS_Props = {
+    /** 最大内容宽度；`fluid` 为 true 时忽略。 */
+    maxWidth?: RsContainerMaybeResponsive<RsContainerMaxWidth>;
+    /** 水平内边距。 */
+    padding?: RsContainerMaybeResponsive<RsContainerPadding>;
+    /** 是否在父级内水平居中。 */
+    centered?: boolean;
+    /** 占满父级宽度，忽略 `maxWidth`。 */
+    fluid?: boolean;
+    /** 根元素标签名。 */
+    tag?: string;
+    /** 启用栅格布局；未传 `columns` 时默认为 12 栅格。 */
+    grid?: boolean;
+    /** 栅格列数，支持响应式。 */
+    columns?: RsContainerMaybeResponsive<number>;
+    /** 栅格间距，支持响应式。 */
+    gap?: RsContainerMaybeResponsive<RsContainerGap>;
+};
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    maxWidth: RsContainerMaybeResponsive<RsContainerMaxWidth>;
+    padding: RsContainerMaybeResponsive<RsContainerPadding>;
+    centered: boolean;
+    fluid: boolean;
+    tag: string;
+    grid: boolean;
+    columns: RsContainerMaybeResponsive<number>;
+    gap: RsContainerMaybeResponsive<RsContainerGap>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/RsContainer.impl.js

@@ -0,0 +1,99 @@
+import { computed, createBlock, defineComponent, normalizeClass, normalizeStyle, openBlock, renderSlot, resolveDynamicComponent, withCtx } from "vue";
+//#region src/components/RsContainer.vue?vue&type=script&setup=true&lang.ts
+var RsContainer_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "RsContainer",
+	props: {
+		maxWidth: { default: "lg" },
+		padding: { default: "md" },
+		centered: {
+			type: Boolean,
+			default: true
+		},
+		fluid: {
+			type: Boolean,
+			default: false
+		},
+		tag: { default: "div" },
+		grid: {
+			type: Boolean,
+			default: false
+		},
+		columns: { default: 12 },
+		gap: { default: "md" }
+	},
+	setup(__props) {
+		const props = __props;
+		const BREAKPOINTS = [
+			"sm",
+			"md",
+			"lg",
+			"xl"
+		];
+		const isResponsiveObject = (value) => typeof value === "object" && value !== null;
+		const tokenToSpaceVar = {
+			none: "0",
+			xs: "var(--rs-space-xs)",
+			sm: "var(--rs-space-sm)",
+			md: "var(--rs-space-md)",
+			lg: "var(--rs-space-lg)",
+			xl: "var(--rs-space-xl)"
+		};
+		const tokenToContainerVar = {
+			sm: "var(--rs-container-max-sm)",
+			md: "var(--rs-container-max-md)",
+			lg: "var(--rs-container-max-lg)",
+			xl: "var(--rs-container-max-xl)",
+			full: "var(--rs-container-max-full)"
+		};
+		const rootClass = computed(() => ["rs-container", {
+			"rs-container--centered": props.centered,
+			"rs-container--grid": props.grid
+		}]);
+		const rootStyle = computed(() => {
+			const style = {};
+			if (props.fluid) style["--rs-container-max-current"] = "none";
+			else if (isResponsiveObject(props.maxWidth)) {
+				const responsiveMaxWidth = props.maxWidth;
+				BREAKPOINTS.forEach((bp) => {
+					const value = responsiveMaxWidth[bp];
+					if (value) style[`--rs-container-max-${bp}`] = tokenToContainerVar[value];
+				});
+			} else style["--rs-container-max-current"] = tokenToContainerVar[props.maxWidth];
+			if (isResponsiveObject(props.padding)) {
+				const responsivePadding = props.padding;
+				BREAKPOINTS.forEach((bp) => {
+					const value = responsivePadding[bp];
+					if (value) style[`--rs-container-padding-${bp}`] = tokenToSpaceVar[value];
+				});
+			} else style["--rs-container-padding-current"] = tokenToSpaceVar[props.padding];
+			if (props.grid) {
+				if (isResponsiveObject(props.columns)) {
+					const responsiveColumns = props.columns;
+					BREAKPOINTS.forEach((bp) => {
+						const value = responsiveColumns[bp];
+						if (typeof value === "number") style[`--rs-container-columns-${bp}`] = value;
+					});
+				} else style["--rs-container-columns-current"] = props.columns;
+				if (isResponsiveObject(props.gap)) {
+					const responsiveGap = props.gap;
+					BREAKPOINTS.forEach((bp) => {
+						const value = responsiveGap[bp];
+						if (value) style[`--rs-container-gap-${bp}`] = tokenToSpaceVar[value];
+					});
+				} else style["--rs-container-gap-current"] = tokenToSpaceVar[props.gap];
+			}
+			return style;
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(resolveDynamicComponent(__props.tag), {
+				class: normalizeClass(rootClass.value),
+				style: normalizeStyle(rootStyle.value)
+			}, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", {}, void 0, true)]),
+				_: 3
+			}, 8, ["class", "style"]);
+		};
+	}
+});
+//#endregion
+export { RsContainer_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/RsContainer.js

@@ -0,0 +1,8 @@
+import './RsContainer.css'
+import _plugin_vue_export_helper_default from "../_virtual/_plugin-vue_export-helper.js";
+import RsContainer_vue_vue_type_script_setup_true_lang_default from "./RsContainer.impl.js";
+
+//#region src/components/RsContainer.vue
+var RsContainer_default = /*#__PURE__*/ _plugin_vue_export_helper_default(RsContainer_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-6eaab51c"]]);
+//#endregion
+export { RsContainer_default as default };

package/dist/components/RsContextMenu.css

@@ -0,0 +1,178 @@
+
+/* ── 菜单容器：macOS 毛玻璃浮层 ── */
+.rs-context-menu__content,
+.rs-context-menu__sub-content {
+  /* 与 Select/DatePicker 一致：Portal 挂到 body 时须高于 modal，否则 Dialog 内右键会被挡住 */
+  z-index: calc(var(--rs-z-modal) + 2);
+  box-sizing: border-box;
+  min-width: 11rem;
+  max-width: min(22rem, calc(100vw - 1rem));
+  /* 多项 / 多级时贴边：用 popper 可用高度限制，避免溢出视口无法点选 */
+  max-height: var(--reka-context-menu-content-available-height, calc(100vh - 1rem));
+  padding: 5px;
+  border-radius: 10px;
+  border: 0.5px solid var(--rs-ctx-border);
+  /* 实底。半透明 + backdrop-filter 在 CEF GPU 崩溃后会被丢掉，菜单会透出下层。 */
+  background: var(--rs-ctx-bg);
+  box-shadow: var(--rs-ctx-shadow);
+  outline: none;
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+/* 主菜单入场动画（从鼠标位置展开） */
+.rs-context-menu__content {
+  transform-origin: var(--reka-context-menu-content-transform-origin, top left);
+  animation: rs-ctx-in 0.13s cubic-bezier(0.36, 0.07, 0.19, 0.97);
+}
+
+/* 子菜单：仅淡入，避免多层快速切换时 scale 造成抖动感 */
+.rs-context-menu__sub-content {
+  transform-origin: var(--reka-popper-transform-origin, left center);
+  animation: rs-ctx-sub-in 0.1s ease-out;
+}
+@keyframes rs-ctx-in {
+from {
+    opacity: 0;
+    transform: scale(0.95);
+}
+to {
+    opacity: 1;
+    transform: scale(1);
+}
+}
+@keyframes rs-ctx-sub-in {
+from {
+    opacity: 0;
+}
+to {
+    opacity: 1;
+}
+}
+
+/* ── 菜单项 ── */
+.rs-context-menu__item {
+  display: flex;
+  align-items: center;
+  gap: 0;
+  padding: 0 8px 0 0;
+  height: 24px;
+  border-radius: 6px;
+  font-size: var(--rs-font-size-xs);
+  font-weight: var(--rs-font-weight-regular);
+  line-height: 1;
+  color: var(--rs-text);
+  cursor: default;
+  outline: none;
+  user-select: none;
+  transition:
+    background 0.08s,
+    color 0.08s;
+}
+
+/* 图标占位列（固定 28px，居中对齐） */
+.rs-context-menu__icon-cell {
+  flex-shrink: 0;
+  width: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--rs-ctx-icon);
+}
+
+/* 文本 */
+.rs-context-menu__label {
+  flex: 1;
+  min-width: 0;
+}
+
+/* 键盘快捷键 */
+.rs-context-menu__shortcut {
+  flex-shrink: 0;
+  margin-left: 16px;
+  font-size: var(--rs-font-size-xs);
+  font-weight: var(--rs-font-weight-regular);
+  color: var(--rs-ctx-shortcut);
+  letter-spacing: 0.02em;
+  font-family: var(--rs-font-sans);
+}
+
+/* 子菜单展开箭头 */
+.rs-context-menu__arrow {
+  flex-shrink: 0;
+  margin-left: 6px;
+  color: var(--rs-ctx-icon);
+}
+
+/* 悬停 / 子菜单已展开：蓝色高亮条（macOS 主色调） */
+.rs-context-menu__item[data-highlighted],
+.rs-context-menu__item[data-state='open'] {
+  background: var(--rs-primary);
+  color: #ffffff;
+}
+.rs-context-menu__item[data-highlighted] .rs-context-menu__icon-cell,
+.rs-context-menu__item[data-highlighted] .rs-context-menu__shortcut,
+.rs-context-menu__item[data-highlighted] .rs-context-menu__arrow,
+.rs-context-menu__item[data-state='open'] .rs-context-menu__icon-cell,
+.rs-context-menu__item[data-state='open'] .rs-context-menu__shortcut,
+.rs-context-menu__item[data-state='open'] .rs-context-menu__arrow {
+  color: rgba(255 255 255 / 0.75);
+}
+
+/* 危险项 */
+.rs-context-menu__item--danger {
+  color: var(--rs-danger);
+}
+.rs-context-menu__item--danger .rs-context-menu__icon-cell {
+  color: var(--rs-danger);
+}
+.rs-context-menu__item--danger[data-highlighted],
+.rs-context-menu__item--danger[data-state='open'] {
+  background: var(--rs-danger);
+  color: #ffffff;
+}
+.rs-context-menu__item--danger[data-highlighted] .rs-context-menu__icon-cell,
+.rs-context-menu__item--danger[data-state='open'] .rs-context-menu__icon-cell {
+  color: rgba(255 255 255 / 0.75);
+}
+
+/* 禁用态 */
+.rs-context-menu__item[data-disabled] {
+  opacity: 0.38;
+  cursor: not-allowed;
+}
+
+/* 分隔线：更细腻 */
+.rs-context-menu__separator {
+  height: 1px;
+  margin: 5px 0;
+  background: var(--rs-ctx-separator);
+}
+
+/* ── 主题变量：深色 ── */
+:root,
+[data-rs-theme='dark'] {
+  --rs-ctx-bg: #2c2c2e;
+  --rs-ctx-border: rgba(255, 255, 255, 0.13);
+  --rs-ctx-shadow:
+    0 0 0 0.5px rgba(255, 255, 255, 0.08),
+    0 2px 8px rgba(0, 0, 0, 0.4),
+    0 8px 32px rgba(0, 0, 0, 0.55);
+  --rs-ctx-icon: rgba(235, 235, 245, 0.5);
+  --rs-ctx-shortcut: rgba(235, 235, 245, 0.4);
+  --rs-ctx-separator: rgba(255, 255, 255, 0.1);
+}
+
+/* ── 主题变量：亮色 ── */
+[data-rs-theme='light'] {
+  --rs-ctx-bg: #f5f5f7;
+  --rs-ctx-border: rgba(0, 0, 0, 0.1);
+  --rs-ctx-shadow:
+    0 0 0 0.5px rgba(0, 0, 0, 0.06),
+    0 2px 6px rgba(0, 0, 0, 0.12),
+    0 8px 28px rgba(0, 0, 0, 0.18);
+  --rs-ctx-icon: rgba(60, 60, 67, 0.5);
+  --rs-ctx-shortcut: rgba(60, 60, 67, 0.4);
+  --rs-ctx-separator: rgba(60, 60, 67, 0.1);
+}

package/dist/components/RsContextMenu.d.ts

@@ -0,0 +1,35 @@
+import { type RsContextMenuItem } from './context-menu-utils';
+type __VLS_Props = {
+    items: RsContextMenuItem[];
+    /** 禁用时不拦截右键事件，直接透传 slot，浏览器原生菜单正常显示 */
+    disabled?: boolean;
+};
+type __VLS_ModelProps = {
+    /**
+     * 展开状态。不绑定时组件自行维护（与原行为一致）。
+     * 绑定后可由外部主动关闭——例如菜单所依赖的数据已失效时。
+     */
+    'open'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_18: {}, __VLS_39: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_18) => any;
+} & {
+    default?: (props: typeof __VLS_39) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (key: string) => any;
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onSelect?: ((key: string) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};