@lumal/core 0.0.1-beta

package/dist/LumalThemeSettingsPanel-BFkZzwEW.js

@@ -0,0 +1,685 @@
+import { t as e } from "./_plugin-vue_export-helper-B3ysoDQm.js";
+import { Fragment as t, computed as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createStaticVNode as ee, createTextVNode as te, createVNode as o, defineComponent as s, mergeModels as c, normalizeClass as l, normalizeStyle as u, openBlock as d, ref as ne, renderList as f, toDisplayString as p, unref as m, useModel as re, vShow as h, withCtx as ie, withDirectives as g } from "vue";
+import { LumalIcon as _ } from "@lumal/icons-vue";
+import { ElButton as ae, ElInputNumber as v, ElSlider as y, ElSwitch as b } from "element-plus";
+//#region src/theme/preferences.ts
+var x = "(prefers-color-scheme: dark)";
+function S(e = {}) {
+	let t = {
+		app: {
+			dynamicTitle: !0,
+			layout: "mixed-nav"
+		},
+		breadcrumb: {
+			enable: !0,
+			hideOnlyOne: !1,
+			showHome: !0,
+			showIcon: !0
+		},
+		header: {
+			globalSearch: !0,
+			menuAlign: "center",
+			menuMaxWidth: 1120
+		},
+		sidebar: {
+			autoActivateChild: !1,
+			collapsed: !1,
+			enable: !0,
+			width: 280
+		},
+		tabbar: {
+			cache: !0,
+			draggable: !0,
+			enable: !0,
+			maxCount: 0,
+			middleClickToClose: !0,
+			persist: !0,
+			showIcon: !0,
+			showMaximize: !0,
+			showMore: !0,
+			showRefresh: !0,
+			styleType: "chrome",
+			visitHistory: !0,
+			wheelable: !0
+		},
+		theme: {
+			colorPrimary: "#1677ff",
+			fontSize: 14,
+			mode: "system",
+			radiusScale: .75
+		},
+		shortcutKeys: { globalSearch: !0 },
+		transition: {
+			enable: !0,
+			loading: !0,
+			name: "fade-side",
+			progress: !0
+		}
+	};
+	return {
+		app: T(t.app, e.app),
+		breadcrumb: T(t.breadcrumb, e.breadcrumb),
+		header: T(t.header, e.header),
+		sidebar: T(t.sidebar, e.sidebar),
+		tabbar: T(t.tabbar, e.tabbar),
+		theme: C(T(t.theme, e.theme)),
+		shortcutKeys: T(t.shortcutKeys, e.shortcutKeys),
+		transition: T(t.transition, e.transition)
+	};
+}
+function C(e) {
+	let t = Number.isFinite(e.fontSize) ? e.fontSize : 14;
+	return {
+		...e,
+		fontSize: Math.min(20, Math.max(12, Math.round(t)))
+	};
+}
+function w(e) {
+	return typeof e == "object" && !!e && !Array.isArray(e);
+}
+function T(e, t) {
+	return t ? Object.entries(t).reduce((e, [t, n]) => (n !== void 0 && (e[t] = n), e), { ...e }) : { ...e };
+}
+function E(e, t = {}) {
+	let n = w(e) ? e : {}, r = S(t);
+	return {
+		app: T(r.app, w(n.app) ? n.app : void 0),
+		breadcrumb: T(r.breadcrumb, w(n.breadcrumb) ? n.breadcrumb : void 0),
+		header: T(r.header, w(n.header) ? n.header : void 0),
+		sidebar: T(r.sidebar, w(n.sidebar) ? n.sidebar : void 0),
+		tabbar: T(r.tabbar, w(n.tabbar) ? n.tabbar : void 0),
+		theme: C(T(r.theme, w(n.theme) ? n.theme : void 0)),
+		shortcutKeys: T(r.shortcutKeys, w(n.shortcutKeys) ? n.shortcutKeys : void 0),
+		transition: T(r.transition, w(n.transition) ? n.transition : void 0)
+	};
+}
+function D(e, t = {}, n = {}) {
+	let r = E(e, n);
+	return {
+		app: T(r.app, t.app),
+		breadcrumb: T(r.breadcrumb, t.breadcrumb),
+		header: T(r.header, t.header),
+		sidebar: T(r.sidebar, t.sidebar),
+		tabbar: T(r.tabbar, t.tabbar),
+		theme: C(T(r.theme, t.theme)),
+		shortcutKeys: T(r.shortcutKeys, t.shortcutKeys),
+		transition: T(r.transition, t.transition)
+	};
+}
+function O(e) {
+	let t = e.app.layout !== "sidebar-nav", n = e.app.layout !== "top-nav" && e.sidebar.enable;
+	return {
+		headerMenuAlign: t,
+		headerMenuMaxWidth: t,
+		sidebarAutoActivateChild: e.app.layout === "mixed-nav" && n,
+		sidebarCollapsed: n,
+		sidebarWidth: n,
+		tabbarCache: e.tabbar.enable
+	};
+}
+function k(e, t = {}) {
+	return e === "dark" || e === "light" ? e : t.matchMedia?.(x).matches ? "dark" : "light";
+}
+//#endregion
+//#region src/theme/theme-color-presets.ts
+var A = [
+	{
+		label: "默认蓝",
+		value: "#1677ff"
+	},
+	{
+		label: "紫罗兰",
+		value: "#6f59f6"
+	},
+	{
+		label: "樱花粉",
+		value: "#ef6b9a"
+	},
+	{
+		label: "柠檬黄",
+		value: "#d8b400"
+	},
+	{
+		label: "天蓝色",
+		value: "#2aa7ff"
+	},
+	{
+		label: "浅绿色",
+		value: "#4dbb74"
+	},
+	{
+		label: "锌色灰",
+		value: "#8a94a6"
+	},
+	{
+		label: "深绿色",
+		value: "#0f766e"
+	},
+	{
+		label: "深蓝色",
+		value: "#1d4ed8"
+	},
+	{
+		label: "橙黄色",
+		value: "#f08c00"
+	},
+	{
+		label: "玫瑰红",
+		value: "#e11d48"
+	},
+	{
+		label: "中性色",
+		value: "#5b6472"
+	},
+	{
+		label: "石板灰",
+		value: "#475569"
+	},
+	{
+		label: "中灰色",
+		value: "#6b7280"
+	},
+	{
+		label: "自定义",
+		value: "__custom__",
+		custom: !0
+	}
+], oe = { class: "lumal-theme-settings" }, se = ["aria-selected", "onClick"], j = { class: "lumal-theme-settings__scroll" }, M = {
+	class: "lumal-theme-settings__pane",
+	role: "tabpanel"
+}, N = { class: "lumal-theme-settings__section" }, P = { class: "lumal-theme-settings__row" }, F = { class: "lumal-theme-settings__row" }, I = { class: "lumal-theme-settings__section" }, L = { class: "lumal-theme-settings__row" }, R = { class: "lumal-theme-settings__section" }, z = { class: "lumal-theme-settings__row" }, B = { class: "lumal-theme-settings__row" }, V = { class: "lumal-theme-settings__row" }, H = { class: "lumal-theme-settings__transition-grid" }, U = [
+	"disabled",
+	"aria-pressed",
+	"onClick"
+], W = {
+	class: "lumal-theme-settings__pane",
+	role: "tabpanel"
+}, G = { class: "lumal-theme-settings__section" }, K = { class: "lumal-theme-settings__card-grid is-three" }, ce = ["aria-pressed", "onClick"], le = { class: "lumal-theme-settings__section" }, ue = { class: "lumal-theme-settings__color-grid" }, de = ["aria-label", "onClick"], fe = ["value"], pe = { class: "lumal-theme-settings__section" }, me = { class: "lumal-theme-settings__radius-grid" }, he = ["onClick"], ge = { class: "lumal-theme-settings__section" }, _e = { class: "lumal-theme-settings__row is-stacked" }, ve = {
+	class: "lumal-theme-settings__pane",
+	role: "tabpanel"
+}, ye = {
+	key: 0,
+	class: "lumal-theme-settings__section"
+}, be = { class: "lumal-theme-settings__layout-grid" }, xe = ["aria-pressed", "onClick"], Se = {
+	class: "lumal-theme-settings__layout-preview",
+	viewBox: "0 0 160 92",
+	"aria-hidden": "true",
+	focusable: "false"
+}, Ce = { class: "lumal-theme-settings__section" }, we = { class: "lumal-theme-settings__segments" }, Te = [
+	"disabled",
+	"aria-pressed",
+	"onClick"
+], Ee = { class: "lumal-theme-settings__section" }, De = { class: "lumal-theme-settings__row" }, Oe = { class: "lumal-theme-settings__row" }, ke = { class: "lumal-theme-settings__row" }, Ae = { class: "lumal-theme-settings__section" }, je = { class: "lumal-theme-settings__row" }, Me = { class: "lumal-theme-settings__row" }, Ne = { class: "lumal-theme-settings__row" }, Pe = { class: "lumal-theme-settings__row" }, Fe = { class: "lumal-theme-settings__row" }, Ie = { class: "lumal-theme-settings__row" }, Le = { class: "lumal-theme-settings__row" }, Re = { class: "lumal-theme-settings__row" }, ze = { class: "lumal-theme-settings__row" }, Be = { class: "lumal-theme-settings__row" }, q = { class: "lumal-theme-settings__row is-stacked" }, Ve = { class: "lumal-theme-settings__segments lumal-theme-settings__tab-style" }, He = [
+	"disabled",
+	"aria-pressed",
+	"onClick"
+], Ue = { class: "lumal-theme-settings__row" }, We = { class: "lumal-theme-settings__actions" }, J = /*#__PURE__*/ e(/* @__PURE__ */ s({
+	__name: "LumalThemeSettingsPanel",
+	props: /*@__PURE__*/ c({
+		colorPresets: { default: () => A },
+		defaults: {},
+		showLayout: {
+			type: Boolean,
+			default: !0
+		}
+	}, {
+		preferences: { required: !0 },
+		preferencesModifiers: {}
+	}),
+	emits: /*@__PURE__*/ c(["change", "reset"], ["update:preferences"]),
+	setup(e, { emit: s }) {
+		let c = e, x = s, C = re(e, "preferences"), w = ne("theme"), T = [
+			{
+				icon: "lumal:sun",
+				label: "浅色",
+				value: "light"
+			},
+			{
+				icon: "lumal:moon",
+				label: "深色",
+				value: "dark"
+			},
+			{
+				icon: "lumal:monitor",
+				label: "跟随系统",
+				value: "system"
+			}
+		], E = [
+			{
+				label: "侧边导航",
+				value: "sidebar-nav"
+			},
+			{
+				label: "顶部导航",
+				value: "top-nav"
+			},
+			{
+				label: "混合导航",
+				value: "mixed-nav"
+			}
+		], k = [
+			{
+				label: "侧滑",
+				value: "fade-side"
+			},
+			{
+				label: "淡入",
+				value: "fade"
+			},
+			{
+				label: "底部",
+				value: "fade-bottom"
+			},
+			{
+				label: "缩放",
+				value: "zoom-fade"
+			}
+		], A = [
+			{
+				label: "Chrome",
+				value: "chrome"
+			},
+			{
+				label: "朴素",
+				value: "plain"
+			},
+			{
+				label: "卡片",
+				value: "card"
+			},
+			{
+				label: "动效",
+				value: "brisk"
+			}
+		], J = [
+			0,
+			.25,
+			.5,
+			.75,
+			1
+		], Ge = [
+			{
+				label: "左侧",
+				value: "left"
+			},
+			{
+				label: "居中",
+				value: "center"
+			},
+			{
+				label: "右侧",
+				value: "right"
+			}
+		], Y = n(() => c.colorPresets.filter((e) => !e.custom)), Ke = n(() => !Y.value.some((e) => e.value === C.value.theme.colorPrimary)), X = n(() => [
+			{
+				label: "外观",
+				value: "theme"
+			},
+			...c.showLayout ? [{
+				label: "布局",
+				value: "layout"
+			}] : [],
+			{
+				label: "通用",
+				value: "common"
+			}
+		]), Z = n(() => O(C.value));
+		function Q(e) {
+			let t = D(C.value, e, c.defaults);
+			C.value = t, x("change", t);
+		}
+		function qe() {
+			let e = S(c.defaults);
+			C.value = e, w.value = "theme", x("change", e), x("reset", e);
+		}
+		function $(e) {
+			Q({ theme: { colorPrimary: e } });
+		}
+		return (n, s) => (d(), i("div", oe, [
+			a("div", {
+				class: "lumal-theme-settings__tabs",
+				role: "tablist",
+				"aria-label": "偏好设置分类",
+				style: u({ gridTemplateColumns: `repeat(${X.value.length}, minmax(0, 1fr))` })
+			}, [(d(!0), i(t, null, f(X.value, (e) => (d(), i("button", {
+				key: e.value,
+				type: "button",
+				role: "tab",
+				class: l(["lumal-theme-settings__tab", { "is-active": w.value === e.value }]),
+				"aria-selected": w.value === e.value,
+				onClick: (t) => w.value = e.value
+			}, p(e.label), 11, se))), 128))], 4),
+			a("div", j, [
+				g(a("div", M, [
+					a("section", N, [
+						s[34] ||= a("h4", null, "界面功能", -1),
+						a("div", P, [s[31] ||= a("span", null, "动态页面标题", -1), o(m(b), {
+							"model-value": C.value.app.dynamicTitle,
+							"onUpdate:modelValue": s[0] ||= (e) => Q({ app: { dynamicTitle: !!e } })
+						}, null, 8, ["model-value"])]),
+						a("div", F, [s[32] ||= a("span", null, "全局搜索", -1), o(m(b), {
+							"model-value": C.value.header.globalSearch,
+							"onUpdate:modelValue": s[1] ||= (e) => Q({ header: { globalSearch: !!e } })
+						}, null, 8, ["model-value"])]),
+						a("div", { class: l(["lumal-theme-settings__row", { "is-disabled": !C.value.header.globalSearch }]) }, [s[33] ||= a("span", null, "搜索快捷键", -1), o(m(b), {
+							"model-value": C.value.shortcutKeys.globalSearch,
+							disabled: !C.value.header.globalSearch,
+							"onUpdate:modelValue": s[2] ||= (e) => Q({ shortcutKeys: { globalSearch: !!e } })
+						}, null, 8, ["model-value", "disabled"])], 2)
+					]),
+					a("section", I, [
+						s[39] ||= a("h4", null, "面包屑", -1),
+						a("div", L, [s[35] ||= a("span", null, "显示面包屑", -1), o(m(b), {
+							"model-value": C.value.breadcrumb.enable,
+							"onUpdate:modelValue": s[3] ||= (e) => Q({ breadcrumb: { enable: !!e } })
+						}, null, 8, ["model-value"])]),
+						a("div", { class: l(["lumal-theme-settings__row", { "is-disabled": !C.value.breadcrumb.enable }]) }, [s[36] ||= a("span", null, "仅一项时隐藏", -1), o(m(b), {
+							"model-value": C.value.breadcrumb.hideOnlyOne,
+							disabled: !C.value.breadcrumb.enable,
+							"onUpdate:modelValue": s[4] ||= (e) => Q({ breadcrumb: { hideOnlyOne: !!e } })
+						}, null, 8, ["model-value", "disabled"])], 2),
+						a("div", { class: l(["lumal-theme-settings__row", { "is-disabled": !C.value.breadcrumb.enable }]) }, [s[37] ||= a("span", null, "显示首页", -1), o(m(b), {
+							"model-value": C.value.breadcrumb.showHome,
+							disabled: !C.value.breadcrumb.enable,
+							"onUpdate:modelValue": s[5] ||= (e) => Q({ breadcrumb: { showHome: !!e } })
+						}, null, 8, ["model-value", "disabled"])], 2),
+						a("div", { class: l(["lumal-theme-settings__row", { "is-disabled": !C.value.breadcrumb.enable }]) }, [s[38] ||= a("span", null, "显示图标", -1), o(m(b), {
+							"model-value": C.value.breadcrumb.showIcon,
+							disabled: !C.value.breadcrumb.enable,
+							"onUpdate:modelValue": s[6] ||= (e) => Q({ breadcrumb: { showIcon: !!e } })
+						}, null, 8, ["model-value", "disabled"])], 2)
+					]),
+					a("section", R, [
+						s[44] ||= a("h4", null, "页面反馈", -1),
+						a("div", z, [s[40] ||= a("span", null, "页面切换进度条", -1), o(m(b), {
+							"model-value": C.value.transition.progress,
+							"onUpdate:modelValue": s[7] ||= (e) => Q({ transition: { progress: !!e } })
+						}, null, 8, ["model-value"])]),
+						a("div", B, [s[41] ||= a("span", null, "页面切换 Loading", -1), o(m(b), {
+							"model-value": C.value.transition.loading,
+							"onUpdate:modelValue": s[8] ||= (e) => Q({ transition: { loading: !!e } })
+						}, null, 8, ["model-value"])]),
+						a("div", V, [s[42] ||= a("span", null, "页面切换动画", -1), o(m(b), {
+							"model-value": C.value.transition.enable,
+							"onUpdate:modelValue": s[9] ||= (e) => Q({ transition: { enable: !!e } })
+						}, null, 8, ["model-value"])]),
+						a("div", H, [(d(), i(t, null, f(k, (e) => a("button", {
+							key: e.value,
+							type: "button",
+							class: l(["lumal-theme-settings__transition-card", [{ "is-active": C.value.transition.name === e.value }, `is-${e.value}`]]),
+							disabled: !C.value.transition.enable,
+							"aria-pressed": C.value.transition.name === e.value,
+							onClick: (t) => Q({ transition: { name: e.value } })
+						}, [s[43] ||= a("span", { class: "lumal-theme-settings__transition-preview" }, [a("i"), a("i")], -1), a("span", null, p(e.label), 1)], 10, U)), 64))])
+					])
+				], 512), [[h, w.value === "common"]]),
+				g(a("div", W, [
+					a("section", G, [s[45] ||= a("h4", null, "主题模式", -1), a("div", K, [(d(), i(t, null, f(T, (e) => a("button", {
+						key: e.value,
+						type: "button",
+						class: l(["lumal-theme-settings__mode-card", { "is-active": C.value.theme.mode === e.value }]),
+						"aria-pressed": C.value.theme.mode === e.value,
+						onClick: (t) => Q({ theme: { mode: e.value } })
+					}, [o(m(_), {
+						class: "lumal-theme-settings__mode-icon",
+						name: e.icon,
+						size: 24
+					}, null, 8, ["name"]), a("span", null, p(e.label), 1)], 10, ce)), 64))])]),
+					a("section", le, [s[48] ||= a("h4", null, "内置主题", -1), a("div", ue, [(d(!0), i(t, null, f(Y.value, (e) => (d(), i("button", {
+						key: e.value,
+						type: "button",
+						class: l(["lumal-theme-settings__color-card", { "is-active": C.value.theme.colorPrimary === e.value }]),
+						"aria-label": e.label,
+						onClick: (t) => $(e.value)
+					}, [a("i", { style: u({ backgroundColor: e.value }) }, null, 4), a("span", null, p(e.label), 1)], 10, de))), 128)), a("label", { class: l(["lumal-theme-settings__color-card", { "is-active": Ke.value }]) }, [
+						s[46] ||= a("i", { class: "is-custom" }, null, -1),
+						s[47] ||= a("span", null, "自定义", -1),
+						a("input", {
+							type: "color",
+							value: C.value.theme.colorPrimary,
+							"aria-label": "自定义主题色",
+							onInput: s[10] ||= (e) => $(e.target.value)
+						}, null, 40, fe)
+					], 2)])]),
+					a("section", pe, [s[49] ||= a("h4", null, "圆角", -1), a("div", me, [(d(), i(t, null, f(J, (e) => a("button", {
+						key: e,
+						type: "button",
+						class: l({ "is-active": C.value.theme.radiusScale === e }),
+						onClick: (t) => Q({ theme: { radiusScale: e } })
+					}, p(e), 11, he)), 64))])]),
+					a("section", ge, [s[51] ||= a("h4", null, "字体", -1), a("div", _e, [
+						s[50] ||= a("span", null, "全局字号", -1),
+						o(m(y), {
+							"model-value": C.value.theme.fontSize,
+							min: 12,
+							max: 20,
+							step: 1,
+							"onUpdate:modelValue": s[11] ||= (e) => Q({ theme: { fontSize: Number(e) } })
+						}, null, 8, ["model-value"]),
+						o(m(v), {
+							"model-value": C.value.theme.fontSize,
+							min: 12,
+							max: 20,
+							step: 1,
+							"onUpdate:modelValue": s[12] ||= (e) => Q({ theme: { fontSize: Number(e ?? 14) } })
+						}, null, 8, ["model-value"])
+					])])
+				], 512), [[h, w.value === "theme"]]),
+				g(a("div", ve, [
+					e.showLayout ? (d(), i("section", ye, [s[62] ||= a("h4", null, "布局模式", -1), a("div", be, [(d(), i(t, null, f(E, (e) => a("button", {
+						key: e.value,
+						type: "button",
+						class: l(["lumal-theme-settings__layout-card", [{ "is-active": C.value.app.layout === e.value }, `is-${e.value}`]]),
+						"aria-pressed": C.value.app.layout === e.value,
+						onClick: (t) => Q({ app: { layout: e.value } })
+					}, [(d(), i("svg", Se, [s[61] ||= a("rect", {
+						class: "is-background",
+						x: "1",
+						y: "1",
+						width: "158",
+						height: "90",
+						rx: "10"
+					}, null, -1), e.value === "sidebar-nav" ? (d(), i(t, { key: 0 }, [
+						s[52] ||= a("rect", {
+							class: "is-strong",
+							x: "8",
+							y: "8",
+							width: "30",
+							height: "76",
+							rx: "6"
+						}, null, -1),
+						s[53] ||= a("rect", {
+							x: "46",
+							y: "12",
+							width: "106",
+							height: "14",
+							rx: "5"
+						}, null, -1),
+						s[54] ||= a("rect", {
+							x: "46",
+							y: "36",
+							width: "49",
+							height: "40",
+							rx: "6"
+						}, null, -1),
+						s[55] ||= a("rect", {
+							x: "103",
+							y: "36",
+							width: "49",
+							height: "40",
+							rx: "6"
+						}, null, -1)
+					], 64)) : e.value === "top-nav" ? (d(), i(t, { key: 1 }, [
+						s[56] ||= a("rect", {
+							class: "is-strong",
+							x: "8",
+							y: "8",
+							width: "144",
+							height: "14",
+							rx: "6"
+						}, null, -1),
+						s[57] ||= a("rect", {
+							x: "8",
+							y: "32",
+							width: "144",
+							height: "14",
+							rx: "5"
+						}, null, -1),
+						s[58] ||= a("rect", {
+							x: "8",
+							y: "56",
+							width: "68",
+							height: "24",
+							rx: "6"
+						}, null, -1),
+						s[59] ||= a("rect", {
+							x: "84",
+							y: "56",
+							width: "68",
+							height: "24",
+							rx: "6"
+						}, null, -1)
+					], 64)) : (d(), i(t, { key: 2 }, [s[60] ||= ee("<rect class=\"is-strong\" x=\"8\" y=\"8\" width=\"144\" height=\"14\" rx=\"6\" data-v-e1228cb0></rect><rect class=\"is-medium\" x=\"8\" y=\"28\" width=\"26\" height=\"56\" rx=\"6\" data-v-e1228cb0></rect><rect x=\"44\" y=\"32\" width=\"108\" height=\"14\" rx=\"5\" data-v-e1228cb0></rect><rect x=\"44\" y=\"56\" width=\"50\" height=\"24\" rx=\"6\" data-v-e1228cb0></rect><rect x=\"102\" y=\"56\" width=\"50\" height=\"24\" rx=\"6\" data-v-e1228cb0></rect>", 5)], 64))])), a("span", null, p(e.label), 1)], 10, xe)), 64))])])) : r("", !0),
+					a("section", Ce, [
+						s[65] ||= a("h4", null, "顶栏", -1),
+						a("div", { class: l(["lumal-theme-settings__row is-stacked", { "is-disabled": !Z.value.headerMenuAlign }]) }, [s[63] ||= a("span", null, "菜单位置", -1), a("div", we, [(d(), i(t, null, f(Ge, (e) => a("button", {
+							key: e.value,
+							type: "button",
+							disabled: !Z.value.headerMenuAlign,
+							"aria-pressed": C.value.header.menuAlign === e.value,
+							class: l({ "is-active": C.value.header.menuAlign === e.value }),
+							onClick: (t) => Q({ header: { menuAlign: e.value } })
+						}, p(e.label), 11, Te)), 64))])], 2),
+						a("div", { class: l(["lumal-theme-settings__row is-stacked", { "is-disabled": !Z.value.headerMenuMaxWidth }]) }, [
+							s[64] ||= a("span", null, "菜单最大宽度", -1),
+							o(m(y), {
+								"model-value": C.value.header.menuMaxWidth,
+								disabled: !Z.value.headerMenuMaxWidth,
+								min: 480,
+								max: 1440,
+								step: 40,
+								"onUpdate:modelValue": s[13] ||= (e) => Q({ header: { menuMaxWidth: Number(e) } })
+							}, null, 8, ["model-value", "disabled"]),
+							o(m(v), {
+								"model-value": C.value.header.menuMaxWidth,
+								disabled: !Z.value.headerMenuMaxWidth,
+								min: 480,
+								max: 1440,
+								step: 40,
+								"onUpdate:modelValue": s[14] ||= (e) => Q({ header: { menuMaxWidth: Number(e) } })
+							}, null, 8, ["model-value", "disabled"])
+						], 2)
+					]),
+					a("section", Ee, [
+						s[70] ||= a("h4", null, "侧边栏", -1),
+						a("div", De, [s[66] ||= a("span", null, "显示侧边栏", -1), o(m(b), {
+							"model-value": C.value.sidebar.enable,
+							"onUpdate:modelValue": s[15] ||= (e) => Q({ sidebar: { enable: !!e } })
+						}, null, 8, ["model-value"])]),
+						a("div", Oe, [s[67] ||= a("span", null, "自动进入首个子菜单", -1), o(m(b), {
+							"model-value": C.value.sidebar.autoActivateChild,
+							disabled: !Z.value.sidebarAutoActivateChild,
+							"onUpdate:modelValue": s[16] ||= (e) => Q({ sidebar: { autoActivateChild: !!e } })
+						}, null, 8, ["model-value", "disabled"])]),
+						a("div", ke, [s[68] ||= a("span", null, "折叠菜单", -1), o(m(b), {
+							"model-value": C.value.sidebar.collapsed,
+							disabled: !Z.value.sidebarCollapsed,
+							"onUpdate:modelValue": s[17] ||= (e) => Q({ sidebar: { collapsed: !!e } })
+						}, null, 8, ["model-value", "disabled"])]),
+						a("div", { class: l(["lumal-theme-settings__row is-stacked", { "is-disabled": !Z.value.sidebarWidth }]) }, [
+							s[69] ||= a("span", null, "宽度", -1),
+							o(m(y), {
+								"model-value": C.value.sidebar.width,
+								disabled: !Z.value.sidebarWidth,
+								min: 200,
+								max: 320,
+								step: 8,
+								"onUpdate:modelValue": s[18] ||= (e) => Q({ sidebar: { width: Number(e) } })
+							}, null, 8, ["model-value", "disabled"]),
+							o(m(v), {
+								"model-value": C.value.sidebar.width,
+								disabled: !Z.value.sidebarWidth,
+								min: 200,
+								max: 320,
+								step: 8,
+								"onUpdate:modelValue": s[19] ||= (e) => Q({ sidebar: { width: Number(e) } })
+							}, null, 8, ["model-value", "disabled"])
+						], 2)
+					]),
+					a("section", Ae, [
+						s[83] ||= a("h4", null, "标签栏", -1),
+						a("div", je, [s[71] ||= a("span", null, "启用标签栏", -1), o(m(b), {
+							"model-value": C.value.tabbar.enable,
+							"onUpdate:modelValue": s[20] ||= (e) => Q({ tabbar: { enable: !!e } })
+						}, null, 8, ["model-value"])]),
+						a("div", Me, [s[72] ||= a("span", null, "页面缓存", -1), o(m(b), {
+							"model-value": C.value.tabbar.cache,
+							disabled: !Z.value.tabbarCache,
+							"onUpdate:modelValue": s[21] ||= (e) => Q({ tabbar: { cache: !!e } })
+						}, null, 8, ["model-value", "disabled"])]),
+						a("div", Ne, [s[73] ||= a("span", null, "持久化标签", -1), o(m(b), {
+							"model-value": C.value.tabbar.persist,
+							disabled: !Z.value.tabbarCache,
+							"onUpdate:modelValue": s[22] ||= (e) => Q({ tabbar: { persist: !!e } })
+						}, null, 8, ["model-value", "disabled"])]),
+						a("div", Pe, [s[74] ||= a("span", null, "记录访问历史", -1), o(m(b), {
+							"model-value": C.value.tabbar.visitHistory,
+							"onUpdate:modelValue": s[23] ||= (e) => Q({ tabbar: { visitHistory: !!e } })
+						}, null, 8, ["model-value"])]),
+						a("div", Fe, [s[75] ||= a("span", null, "允许拖拽排序", -1), o(m(b), {
+							"model-value": C.value.tabbar.draggable,
+							"onUpdate:modelValue": s[24] ||= (e) => Q({ tabbar: { draggable: !!e } })
+						}, null, 8, ["model-value"])]),
+						a("div", Ie, [s[76] ||= a("span", null, "滚轮切换", -1), o(m(b), {
+							"model-value": C.value.tabbar.wheelable,
+							"onUpdate:modelValue": s[25] ||= (e) => Q({ tabbar: { wheelable: !!e } })
+						}, null, 8, ["model-value"])]),
+						a("div", Le, [s[77] ||= a("span", null, "中键关闭", -1), o(m(b), {
+							"model-value": C.value.tabbar.middleClickToClose,
+							"onUpdate:modelValue": s[26] ||= (e) => Q({ tabbar: { middleClickToClose: !!e } })
+						}, null, 8, ["model-value"])]),
+						a("div", Re, [s[78] ||= a("span", null, "显示标签图标", -1), o(m(b), {
+							"model-value": C.value.tabbar.showIcon,
+							"onUpdate:modelValue": s[27] ||= (e) => Q({ tabbar: { showIcon: !!e } })
+						}, null, 8, ["model-value"])]),
+						a("div", ze, [s[79] ||= a("span", null, "显示更多按钮", -1), o(m(b), {
+							"model-value": C.value.tabbar.showMore,
+							"onUpdate:modelValue": s[28] ||= (e) => Q({ tabbar: { showMore: !!e } })
+						}, null, 8, ["model-value"])]),
+						a("div", Be, [s[80] ||= a("span", null, "显示最大化按钮", -1), o(m(b), {
+							"model-value": C.value.tabbar.showMaximize,
+							"onUpdate:modelValue": s[29] ||= (e) => Q({ tabbar: { showMaximize: !!e } })
+						}, null, 8, ["model-value"])]),
+						a("div", q, [s[81] ||= a("span", null, "标签风格", -1), a("div", Ve, [(d(), i(t, null, f(A, (e) => a("button", {
+							key: e.value,
+							type: "button",
+							disabled: !Z.value.tabbarCache,
+							"aria-pressed": C.value.tabbar.styleType === e.value,
+							class: l({ "is-active": C.value.tabbar.styleType === e.value }),
+							onClick: (t) => Q({ tabbar: { styleType: e.value } })
+						}, p(e.label), 11, He)), 64))])]),
+						a("div", Ue, [s[82] ||= a("span", null, "最大标签数（0 为不限制）", -1), o(m(v), {
+							"model-value": C.value.tabbar.maxCount,
+							min: 0,
+							max: 30,
+							"onUpdate:modelValue": s[30] ||= (e) => Q({ tabbar: { maxCount: Number(e ?? 0) } })
+						}, null, 8, ["model-value"])])
+					])
+				], 512), [[h, w.value === "layout"]])
+			]),
+			a("div", We, [o(m(ae), {
+				class: "lumal-theme-settings__reset",
+				plain: "",
+				onClick: qe
+			}, {
+				default: ie(() => [o(m(_), {
+					name: "lumal:reset",
+					size: 16
+				}), s[84] ||= te("恢复默认 ", -1)]),
+				_: 1
+			})])
+		]));
+	}
+}), [["__scopeId", "data-v-e1228cb0"]]);
+//#endregion
+export { E as a, D as i, A as n, O as o, S as r, k as s, J as t };