savor-ui 0.17.0 → 0.18.0

package/CHANGELOG.md

@@ -2,6 +2,15 @@
 
 
 
+# [0.18.0](https://gitee.com/mach552/savor-ui/compare/v0.17.0...v0.18.0) (2026-08-08)
+
+
+### Features
+
+* **menu:** 新增样式颜色属性 ([a2dd967](https://gitee.com/mach552/savor-ui/commits/a2dd9678707ac3c9eb3631ecf0ac92c42f5d8a3f))
+* **modal:** 新增类型和图标 ([7973598](https://gitee.com/mach552/savor-ui/commits/797359852caed0d019a3f86ed24379104030ccd3))
+* **tree:** 新增节点图标和额外内容插槽 ([b3f7953](https://gitee.com/mach552/savor-ui/commits/b3f79533fbeb4c589c74dbc4e240b1bb336489cb))
+
 # [0.17.0](https://gitee.com/mach552/savor-ui/compare/v0.16.0...v0.17.0) (2026-08-07)
 
 

package/dist/es/components/src/menu/index.d.ts

@@ -55,6 +55,11 @@ export declare const SMenu: ((__VLS_props: NonNullable<Awaited<typeof __VLS_setu
         selectedKey?: string | undefined;
         accordion?: boolean | undefined;
         scrollbarProps?: ScrollbarProps | undefined;
+        bgColor?: string | undefined;
+        textColor?: string | undefined;
+        activeTextColor?: string | undefined;
+        activeBgColor?: string | undefined;
+        hoverBgColor?: string | undefined;
         activeKey?: string | number | undefined;
         onItemClick?: ((name: string | number, item: any) => any) | undefined;
         onOpenChange?: ((keys: string[]) => any) | undefined;

package/dist/es/components/src/menu/menu.vue_vue_type_script_setup_true_vapor_true_lang.mjs

@@ -17,7 +17,12 @@ var S = _("<div>"), C = _("<div>", 1), w = /*@__PURE__*/ c({
 		openKeys: {},
 		selectedKey: {},
 		accordion: { type: Boolean },
-		scrollbarProps: {}
+		scrollbarProps: {},
+		bgColor: { default: "transparent" },
+		textColor: { default: "var(--s-color-text-1)" },
+		activeTextColor: { default: "var(--s-color-primary-6)" },
+		activeBgColor: { default: "var(--s-color-primary-1)" },
+		hoverBgColor: { default: "var(--s-color-fill-2)" }
 	}, {
 		activeKey: {},
 		activeKeyModifiers: {},
@@ -26,7 +31,14 @@ var S = _("<div>"), C = _("<div>", 1), w = /*@__PURE__*/ c({
 	}),
 	emits: /*@__PURE__*/ l(["itemClick", "openChange"], ["update:activeKey", "update:openKeys"]),
 	setup(c, { emit: l }) {
-		let _ = c, w = l, T = t("menu"), E = a(() => ({ width: _.collapsed ? e(_.collapsedWidth) : e(_.width) })), D = b(c, "activeKey"), O = b(c, "openKeys"), k = (e, t) => {
+		let _ = c, w = l, T = t("menu"), E = a(() => ({
+			"--s-menu-bg-color": _.bgColor,
+			"--s-menu-text-color": _.textColor,
+			"--s-menu-active-text-color": _.activeTextColor,
+			"--s-menu-active-bg-color": _.activeBgColor,
+			"--s-menu-hover-bg-color": _.hoverBgColor,
+			width: _.collapsed ? e(_.collapsedWidth) : e(_.width)
+		})), D = b(c, "activeKey"), O = b(c, "openKeys"), k = (e, t) => {
 			D.value = e, w("itemClick", e, t);
 		}, A = (e) => {
 			if (_.accordion) {

package/dist/es/components/src/menu/types.d.ts

@@ -15,6 +15,16 @@ export interface MenuProps {
     accordion?: boolean;
     /** 滚动条属性 */
     scrollbarProps?: ScrollbarProps;
+    /** 背景颜色 */
+    bgColor?: string;
+    /** 文本颜色 */
+    textColor?: string;
+    /** 选中文本颜色 */
+    activeTextColor?: string;
+    /** 选中背景颜色 */
+    activeBgColor?: string;
+    /** 鼠标悬停背景颜色 */
+    hoverBgColor?: string;
 }
 export interface MenuSlots {
     /** 默认 */

package/dist/es/components/src/modal/index.d.ts

@@ -27,6 +27,7 @@ export declare const SModal: ((__VLS_props: NonNullable<Awaited<typeof __VLS_set
         mask?: boolean | undefined;
         to?: (string | HTMLElement) | undefined;
         draggable?: boolean | undefined;
+        type?: "default" | "warning" | "primary" | "info" | "success" | "danger" | undefined;
         className?: string | undefined;
         modalStyle?: Record<string, string> | undefined;
         maskStyle?: Record<string, string> | undefined;

package/dist/es/components/src/modal/modal.vue_vue_type_script_setup_true_vapor_true_lang.mjs

@@ -6,21 +6,25 @@ import { useResizeObserver as r } from "../../../hooks/src/use-resize-observer.m
 import { useScrollHidden as ee } from "../../../hooks/src/use-scroll-hidden.mjs";
 import { useZIndex as te } from "../../../hooks/src/use-zIndex.mjs";
 import "../../../hooks/index.mjs";
-import ne from "../../../icons/src/close.vue.mjs";
-import re from "../../../icons/src/fullscreen-exit.vue.mjs";
-import ie from "../../../icons/src/fullscreen.vue.mjs";
+import ne from "../../../icons/src/check-circle-fill.vue.mjs";
+import re from "../../../icons/src/close-circle-fill.vue.mjs";
+import ie from "../../../icons/src/close.vue.mjs";
+import ae from "../../../icons/src/fullscreen-exit.vue.mjs";
+import oe from "../../../icons/src/fullscreen.vue.mjs";
+import i from "../../../icons/src/info-circle-fill.vue.mjs";
+import se from "../../../icons/src/warning-circle-fill.vue.mjs";
 import "../../../icons/index.mjs";
-import { SScrollbar as ae } from "../scrollbar/index.mjs";
-import { SButton as i } from "../button/index.mjs";
-import { STransition as a } from "../transition/index.mjs";
-import { VaporTeleport as oe, applyVShow as o, child as s, computed as c, createComponent as l, createIf as u, createInvoker as se, createSlot as d, createTemplateRefSetter as ce, defineVaporComponent as f, delegateEvents as p, mergeModels as m, next as h, nextTick as g, onUnmounted as le, ref as _, renderEffect as v, setClass as y, setInsertionState as b, setStyle as x, setText as S, template as C, toDisplayString as w, unref as T, useModel as E, useTemplateRef as D, watch as O, watchEffect as ue } from "vue";
+import { SScrollbar as ce } from "../scrollbar/index.mjs";
+import { SButton as a } from "../button/index.mjs";
+import { STransition as o } from "../transition/index.mjs";
+import { VaporTeleport as le, applyVShow as s, child as c, computed as l, createComponent as u, createIf as d, createInvoker as ue, createSlot as f, createTemplateRefSetter as de, defineVaporComponent as p, delegateEvents as m, mergeModels as h, next as fe, nextTick as g, onUnmounted as pe, ref as _, renderEffect as v, setClass as y, setInsertionState as b, setStyle as x, setText as S, template as C, toDisplayString as w, unref as T, useModel as me, useTemplateRef as E, watch as D, watchEffect as he } from "vue";
 //#region ../components/src/modal/modal.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var k = C("<div>"), A = C(" "), de = C("<div><div></div><div></div>"), j = C("<div style=\"flex: 1; overflow: hidden; display: flex; flex-direction: column\">"), fe = C("<div><div>");
-p("click");
-var M = /*@__PURE__*/ f({
+var O = C("<div>"), k = C(" "), ge = C("<div><div></div><div></div>"), A = C("<div style=\"flex: 1; overflow: hidden; display: flex; flex-direction: column\">"), _e = C("<div><div>");
+m("click");
+var j = /*@__PURE__*/ p({
 	name: "SModal",
 	__name: "modal",
-	props: /*@__PURE__*/ m({
+	props: /*@__PURE__*/ h({
 		modalValue: { type: Boolean },
 		width: { default: "0px" },
 		height: {},
@@ -60,6 +64,7 @@ var M = /*@__PURE__*/ f({
 		},
 		to: { default: "body" },
 		draggable: { type: Boolean },
+		type: { default: "default" },
 		className: {},
 		modalStyle: {},
 		maskStyle: {},
@@ -92,45 +97,45 @@ var M = /*@__PURE__*/ f({
 		},
 		modelModifiers: {}
 	}),
-	emits: /*@__PURE__*/ m([
+	emits: /*@__PURE__*/ h([
 		"close",
 		"closed",
 		"opened",
 		"confirm"
 	], ["update:modelValue"]),
-	setup(f, { expose: p, emit: m }) {
-		let C = f, M = m, N = n("modal"), { lockScroll: pe, unlockScroll: P } = ee(), { nextZIndex: me } = te(), F = _(0), I = D("modalRef"), L = D("headerRef"), R = E(f, "modelValue"), z = _(!1), B = _(!1), V = _(!1), H = _(!1), U = _(0), W = _(0), G = _(!1), K = _(0), q = _(0), J = c(() => typeof C.to == "string" ? document.querySelector(C.to) || document.body : C.to);
+	setup(p, { expose: m, emit: h }) {
+		let C = p, j = h, M = n("modal"), { lockScroll: ve, unlockScroll: N } = ee(), { nextZIndex: P } = te(), F = _(0), I = E("modalRef"), L = E("headerRef"), R = me(p, "modelValue"), z = _(!1), B = _(!1), V = _(!1), H = _(!1), U = _(0), W = _(0), G = _(!1), K = _(0), q = _(0), J = l(() => typeof C.to == "string" ? document.querySelector(C.to) || document.body : C.to);
 		r(J, () => {
 			let e = J.value;
 			K.value = e.clientHeight, q.value = e.clientWidth, Q();
 		}), r(I, () => {
 			z.value && Q();
 		});
-		let he = c(() => ({
+		let ye = l(() => ({
 			zIndex: F.value,
 			position: C.to === "body" ? "fixed" : "absolute"
-		})), ge = c(() => V.value ? {} : {
+		})), be = l(() => V.value ? {} : {
 			width: e(C.width),
 			height: e(C.height),
 			top: `${U.value}px`,
 			left: `${W.value}px`,
 			...C.modalStyle
-		}), _e = () => {
-			M("opened");
-		}, ve = () => {
-			B.value = !1, H.value = !1, G.value = !1, M("closed"), g(P);
-		}, ye = () => {
+		}), xe = () => {
+			j("opened");
+		}, Se = () => {
+			B.value = !1, H.value = !1, G.value = !1, j("closed"), g(N);
+		}, Ce = () => {
 			C.closeOnOverlayClick && X();
-		}, be = (e) => {
+		}, we = (e) => {
 			e ? R.value = !1 : H.value = !1;
 		}, Y = () => {
-			H.value = !0, M("confirm", be);
+			H.value = !0, j("confirm", we);
 		}, X = () => {
-			R.value = !1, M("close");
-		}, xe = () => {
+			R.value = !1, j("close");
+		}, Te = () => {
 			V.value = !V.value;
 		};
-		O(() => C.fullscreen, (e) => V.value = e, { immediate: !0 });
+		D(() => C.fullscreen, (e) => V.value = e, { immediate: !0 });
 		let Z = (e) => {
 			e.key === "Escape" && C.closeOnEsc && z.value && X();
 		}, Q = async () => {
@@ -138,111 +143,112 @@ var M = /*@__PURE__*/ f({
 			let e = I.value;
 			C.center ? U.value = Math.max(0, (K.value - e.offsetHeight) / 2) : U.value = C.offset, W.value = Math.max(0, (q.value - e.offsetWidth) / 2);
 		};
-		O(() => R.value, async (e) => {
-			e ? (F.value = me(), pe(), B.value = !0, await g(), z.value = !0, Q()) : z.value = !1;
-		}, { immediate: !0 }), ue((e) => {
+		D(() => R.value, async (e) => {
+			e ? (F.value = P(), ve(), B.value = !0, await g(), z.value = !0, Q()) : z.value = !1;
+		}, { immediate: !0 }), he((e) => {
 			z.value && (document.addEventListener("keydown", Z), e(() => document.removeEventListener("keydown", Z)));
 		}), t({
 			container: I,
 			target: L,
 			parent: J,
-			enable: c(() => C.draggable && !V.value),
+			enable: l(() => C.draggable && !V.value),
 			divLeft: W,
 			divTop: U,
 			hasDragged: G
-		}), le(() => {
-			P();
-		}), p({ handleClose: X });
-		let $ = ce();
-		return l(oe, {
-			to: () => f.to,
+		}), pe(() => {
+			N();
+		}), m({ handleClose: X });
+		let $ = de();
+		return u(le, {
+			to: () => p.to,
 			defer: ""
 		}, () => {
-			let e = fe(), t = s(e, 1);
+			let e = _e(), t = c(e, 1);
 			return v(() => {
-				y(e, [T(N).e("container")]), x(e, he.value);
-			}), b(e, 0, 0), l(T(a), { type: "opacity" }, () => u(() => f.mask, () => {
-				let e = k();
-				return o(e, () => z.value), e.$evtclick = se(ye), v(() => {
-					x(e, f.maskStyle), y(e, [T(N).e("mask")]);
+				y(e, [T(M).e("container")]), x(e, ye.value);
+			}), b(e, 0, 0), u(T(o), { type: "opacity" }, () => d(() => p.mask, () => {
+				let e = O();
+				return s(e, () => z.value), e.$evtclick = ue(Ce), v(() => {
+					x(e, p.maskStyle), y(e, [T(M).e("mask")]);
 				}), e;
-			}, null, 129)), v(() => y(t, [T(N).e("wrapper")])), b(t, null, 0), l(T(a), {
+			}, null, 129)), v(() => y(t, [T(M).e("wrapper")])), b(t, null, 0), u(T(o), {
 				type: "scale",
-				onAfterLeave: () => ve,
-				onAfterEnter: () => _e
+				onAfterLeave: () => Se,
+				onAfterEnter: () => xe
 			}, () => {
-				let e = k();
+				let e = O();
 				return v(() => {
-					let t = T(N);
+					let t = T(M);
 					y(e, [
 						t.b(),
-						t.is("drag", f.draggable),
+						t.is("drag", p.draggable),
 						t.is("fullscreen", V.value),
-						f.className
-					]), x(e, ge.value);
-				}), b(e, null, 0), u(() => f.header, () => {
-					let e = de(), t = s(e), n = h(t, 1);
-					return v(() => {
-						let n = T(N);
-						y(e, [n.e("header")]), y(t, [n.e("title")]);
-					}), b(t, null, 0), d("header", null, () => {
-						let e = A();
-						return v(() => S(e, w(f.title))), e;
-					}), v(() => y(n, [T(N).e("header-icon")])), b(n, null, 0), u(() => f.fullable, () => l(T(i), {
+						t.m(p.type),
+						p.className
+					]), x(e, be.value);
+				}), b(e, null, 0), d(() => p.header, () => {
+					let e = ge(), t = c(e, 1), n = fe(t, 2);
+					return v(() => y(e, [T(M).e("header")])), b(e, 0, 0), d(() => p.type !== "default", () => {
+						let e = O();
+						return v(() => y(e, [T(M).e("icon")])), b(e, null, 0), d(() => p.type === "warning", () => u(T(se)), () => d(() => p.type === "primary", () => u(T(i)), () => d(() => p.type === "info", () => u(T(i)), () => d(() => p.type === "success", () => u(T(ne)), () => d(() => p.type === "danger", () => u(T(re))), 1285), 1029), 773), 517), e;
+					}), v(() => y(t, [T(M).e("title")])), b(t, null, 0), f("header", null, () => {
+						let e = k();
+						return v(() => S(e, w(p.title))), e;
+					}), v(() => y(n, [T(M).e("header-icon")])), b(n, null, 0), d(() => p.fullable, () => u(T(a), {
 						text: "",
 						size: "small",
-						onClick: () => xe
-					}, { icon: () => u(() => V.value, () => l(T(re)), () => l(T(ie)), 645) })), b(n, null, 1), u(() => f.closable, () => l(T(i), {
+						onClick: () => Te
+					}, { icon: () => d(() => V.value, () => u(T(ae)), () => u(T(oe)), 2181) })), b(n, null, 1), d(() => p.closable, () => u(T(a), {
 						text: "",
 						size: "small",
 						circle: "",
 						onClick: () => X
-					}, { icon: () => l(T(ne)) })), $(e, L, null, "headerRef"), e;
-				}), b(e, null, 1), u(() => !f.scrollContent, () => {
-					let e = k();
+					}, { icon: () => u(T(ie)) })), $(e, L, null, "headerRef"), e;
+				}), b(e, null, 1), d(() => !p.scrollContent, () => {
+					let e = O();
 					return v(() => {
-						y(e, [T(N).e("body")]), x(e, {
+						y(e, [T(M).e("body")]), x(e, {
 							padding: "16px",
-							...f.bodyStyle
+							...p.bodyStyle
 						});
-					}), b(e, null, 0), d("default", null, () => {
-						let e = A();
-						return v(() => S(e, w(f.content))), e;
+					}), b(e, null, 0), f("default", null, () => {
+						let e = k();
+						return v(() => S(e, w(p.content))), e;
 					}), e;
 				}, () => {
-					let e = j();
-					return b(e, null, 0), l(T(ae), { $: [() => ({
+					let e = A();
+					return b(e, null, 0), u(T(ce), { $: [() => ({
 						padding: "16px",
-						...f.scrollbarProps
-					})] }, () => d("default", null, () => {
-						let e = A();
-						return v(() => S(e, w(f.content))), e;
+						...p.scrollbarProps
+					})] }, () => f("default", null, () => {
+						let e = k();
+						return v(() => S(e, w(p.content))), e;
 					}, 4)), e;
-				}, 1541), b(e, null, 2), u(() => f.footer, () => {
-					let e = k();
-					return v(() => y(e, [T(N).e("footer")])), b(e, null, 0), d("footer", null, () => u(() => f.btnReverse, () => [u(() => f.confirmBtn, () => l(T(i), { $: [() => ({
+				}, 3077), b(e, null, 2), d(() => p.footer, () => {
+					let e = O();
+					return v(() => y(e, [T(M).e("footer")])), b(e, null, 0), f("footer", null, () => d(() => p.btnReverse, () => [d(() => p.confirmBtn, () => u(T(a), { $: [() => ({
 						label: "确定",
 						loading: H.value,
 						type: "primary",
-						...f.confirmProps
-					}), { onClick: () => Y }] }), null, 129), u(() => f.cancelBtn, () => l(T(i), { $: [() => ({
+						...p.confirmProps
+					}), { onClick: () => Y }] }), null, 129), d(() => p.cancelBtn, () => u(T(a), { $: [() => ({
 						label: "取消",
 						secondary: !0,
-						...f.cancelProps
-					}), { onClick: () => X }] }), null, 129)], () => [u(() => f.cancelBtn, () => l(T(i), { $: [() => ({
+						...p.cancelProps
+					}), { onClick: () => X }] }), null, 129)], () => [d(() => p.cancelBtn, () => u(T(a), { $: [() => ({
 						label: "取消",
 						secondary: !0,
-						...f.cancelProps
-					}), { onClick: () => X }] }), null, 129), u(() => f.confirmBtn, () => l(T(i), { $: [() => ({
+						...p.cancelProps
+					}), { onClick: () => X }] }), null, 129), d(() => p.confirmBtn, () => u(T(a), { $: [() => ({
 						label: "确定",
 						loading: H.value,
 						type: "primary",
-						...f.confirmProps
-					}), { onClick: () => Y }] }), null, 129)], 2442)), e;
-				}), o(e, () => z.value), $(e, I, null, "modalRef"), e;
-			}), o(e, () => B.value), e;
+						...p.confirmProps
+					}), { onClick: () => Y }] }), null, 129)], 3978)), e;
+				}), s(e, () => z.value), $(e, I, null, "modalRef"), e;
+			}), s(e, () => B.value), e;
 		}, !0);
 	}
 });
 //#endregion
-export { M as default };
+export { j as default };

package/dist/es/components/src/modal/types.d.ts

@@ -38,6 +38,10 @@ export interface ModalProps {
     to?: string | HTMLElement;
     /** 是否开启拖动弹窗 */
     draggable?: boolean;
+    /** 弹窗图标类型（default不显示）
+     * @default default
+     */
+    type?: "default" | "warning" | "primary" | "info" | "success" | "danger";
     /** 弹窗自定义类名 */
     className?: string;
     /** 弹窗自定义样式 */

package/dist/es/components/src/tree/index.d.ts

@@ -1,8 +1,8 @@
-import { TreeNode } from './types';
+import { TreeSlots, TreeNode } from './types';
 import { PublicProps, VNode, Plugin } from 'vue';
 export declare const STree: ((__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: {
     attrs: any;
-    slots: {};
+    slots: TreeSlots;
     emit: (((evt: "nodeSelect", node: TreeNode) => void) & ((evt: "nodeClick", node: TreeNode) => void) & ((evt: "nodeCheck", node: TreeNode, checked: boolean) => void) & ((evt: "nodeExpand", node: TreeNode, expanded: boolean) => void)) & (((event: "update:expandedKeys", value: (string | number)[]) => void) & ((event: "update:checkedKeys", value: (string | number)[]) => void) & ((event: "update:selectKeys", value: (string | number)[]) => void) & ((event: "update:indeterminateKeys", value: (string | number)[]) => void));
 }, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: PublicProps & {
@@ -12,6 +12,7 @@ export declare const STree: ((__VLS_props: NonNullable<Awaited<typeof __VLS_setu
             key?: string;
             children?: string;
         } | undefined;
+        size?: "mini" | "small" | "medium" | "large" | undefined;
         selectable?: boolean | undefined;
         selectKeys?: (string | number)[] | undefined;
         checkable?: boolean | undefined;
@@ -36,7 +37,7 @@ export declare const STree: ((__VLS_props: NonNullable<Awaited<typeof __VLS_setu
     } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
-    slots: {};
+    slots: TreeSlots;
     emit: (((evt: "nodeSelect", node: TreeNode) => void) & ((evt: "nodeClick", node: TreeNode) => void) & ((evt: "nodeCheck", node: TreeNode, checked: boolean) => void) & ((evt: "nodeExpand", node: TreeNode, expanded: boolean) => void)) & (((event: "update:expandedKeys", value: (string | number)[]) => void) & ((event: "update:checkedKeys", value: (string | number)[]) => void) & ((event: "update:selectKeys", value: (string | number)[]) => void) & ((event: "update:indeterminateKeys", value: (string | number)[]) => void));
 }>) => VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;

package/dist/es/components/src/tree/node.d.ts

@@ -19,7 +19,15 @@ declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup
     } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
-    slots: {};
+    slots: {
+        icon?: (props: {
+            node: TreeNode;
+        }) => any;
+    } & {
+        extra?: (props: {
+            node: TreeNode;
+        }) => any;
+    };
     emit: ((evt: "select", node: TreeNode) => void) & ((evt: "click", node: TreeNode) => void) & ((evt: "toggle", node: TreeNode) => void) & ((evt: "check", checked: boolean, node: TreeNode) => void);
 }>) => VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;

package/dist/es/components/src/tree/node.vue_vue_type_script_setup_true_vapor_true_lang.mjs

@@ -5,11 +5,12 @@ import n from "../../../icons/src/right.vue.mjs";
 import "../../../icons/index.mjs";
 import { SCheckbox as r } from "../checkbox/index.mjs";
 import { SIcon as i } from "../icon/index.mjs";
-import { child as a, createComponent as o, createIf as s, createInvoker as c, defineVaporComponent as l, delegateEvents as u, next as d, on as f, renderEffect as p, setAttr as m, setClass as h, setInsertionState as g, setStyle as _, setText as v, template as y, toDisplayString as b, txt as x, unref as S, withModifiers as C } from "vue";
+import { treeContextKey as a } from "./types.mjs";
+import { child as o, createComponent as s, createIf as c, createInvoker as l, createSlot as u, defineVaporComponent as d, delegateEvents as f, inject as p, next as m, on as h, renderEffect as g, setAttr as _, setClass as v, setInsertionState as y, setStyle as b, setText as x, template as S, toDisplayString as C, txt as w, unref as T, withModifiers as E } from "vue";
 //#region ../components/src/tree/node.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var w = y("<div><div><span></span><!><span> ", 1);
-u("click");
-var T = /*@__PURE__*/ l({
+var D = S("<div>"), O = S("<div><div><div><span></span><!><span> </span>", 1);
+f("click");
+var k = /*@__PURE__*/ d({
 	__name: "node",
 	props: {
 		node: {},
@@ -26,34 +27,46 @@ var T = /*@__PURE__*/ l({
 		"click",
 		"check"
 	],
-	setup(l, { emit: u }) {
-		let y = l, T = e("tree"), E = u, D = (e) => {
-			e.disabled || E("toggle", e);
-		}, O = (e) => {
-			e.disabled || (E("select", e), E("click", e));
-		}, k = (e) => {
-			E("check", e, y.node);
-		}, A = w(), j = a(A), M = a(j), N = d(M, 1), P = d(N, 2);
-		p(() => {
-			let e = S(T), t = l.node;
-			h(A, [
-				e.e("node"),
-				e.is("selected", l.selected),
-				e.is("disabled", t.disabled)
-			]), m(A, "data-key", t.key), h(j, [e.e("content")]), _(j, { paddingLeft: `${t.level * 16}px` }), h(M, [
+	setup(d, { emit: f, slots: S }) {
+		let k = d, A = e("tree"), j = f, M = p(a, void 0), N = (e) => {
+			e.disabled || j("toggle", e);
+		}, P = (e) => {
+			e.disabled || (j("select", e), j("click", e));
+		}, F = (e) => {
+			j("check", e, k.node);
+		}, I = O(), L = o(I), R = o(L), z = o(R), B = m(z, 1), V = m(B, 3);
+		g(() => {
+			let e = T(A), t = d.node, n = T(M).size;
+			v(I, [e.e("node")]), _(I, "data-key", t.key), v(L, [
+				e.e("wrapper"),
+				e.is("selected", d.selected),
+				e.is("disabled", t.disabled),
+				e.is(n?.value, n?.value !== void 0)
+			]), v(R, [e.e("content")]), b(R, { paddingLeft: `${t.level * 16}px` }), v(z, [
 				e.e("expand-icon"),
-				e.is("expanded", l.expanded && !t.isLeaf),
+				e.is("expanded", d.expanded && !t.isLeaf),
 				e.is("leaf", t.isLeaf)
 			]);
-		}), g(M, null, 0), o(S(i), null, () => s(() => l.loading, () => o(S(t)), () => o(S(n)), 389)), f(M, "click", C(() => D(l.node), ["stop"])), g(j, N, 1), s(() => l.checkable, () => o(S(r), {
-			disabled: () => l.node.disabled,
-			indeterminate: () => l.indeterminate,
-			"model-value": () => l.checked,
-			onChange: () => k
-		}));
-		let F = x(P);
-		return A.$evtclick = c(() => O(l.node)), p(() => v(F, b(l.node.label))), A;
+		}), y(z, null, 0), s(T(i), null, () => c(() => d.loading, () => s(T(t)), () => s(T(n)), 389)), h(z, "click", E(() => N(d.node), ["stop"])), y(R, B, 1), c(() => d.checkable, () => {
+			let e = D();
+			return g(() => v(e, [T(A).e("checkbox")])), y(e, null, 0), s(T(r), {
+				disabled: () => d.node.disabled,
+				indeterminate: () => d.indeterminate,
+				"model-value": () => d.checked,
+				onChange: () => F
+			}), e;
+		}), y(R, B, 2), c(() => S.icon, () => {
+			let e = D();
+			return g(() => v(e, [T(A).e("node-icon")])), y(e, null, 0), u("icon", { node: () => d.node }), e;
+		});
+		let H = w(V);
+		return g(() => {
+			v(V, [T(A).e("label")]), x(H, C(d.node.label));
+		}), y(R, null, 4), c(() => S.extra, () => {
+			let e = D();
+			return g(() => v(e, [T(A).e("extra")])), y(e, null, 0), u("extra", { node: () => d.node }), e;
+		}), I.$evtclick = l(() => P(d.node)), I;
 	}
 });
 //#endregion
-export { T as default };
+export { k as default };

package/dist/es/components/src/tree/tree.d.ts

@@ -1,4 +1,4 @@
-import { TreeNode, TreeProps } from './types';
+import { TreeSlots, TreeNode, TreeProps } from './types';
 import { PublicProps, VNode } from 'vue';
 declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: PublicProps & __VLS_PrettifyLocal<(TreeProps & {
@@ -20,7 +20,7 @@ declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup
     } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
-    slots: {};
+    slots: TreeSlots;
     emit: (((evt: "nodeSelect", node: TreeNode) => void) & ((evt: "nodeClick", node: TreeNode) => void) & ((evt: "nodeCheck", node: TreeNode, checked: boolean) => void) & ((evt: "nodeExpand", node: TreeNode, expanded: boolean) => void)) & (((event: "update:expandedKeys", value: (string | number)[]) => void) & ((event: "update:checkedKeys", value: (string | number)[]) => void) & ((event: "update:selectKeys", value: (string | number)[]) => void) & ((event: "update:indeterminateKeys", value: (string | number)[]) => void));
 }>) => VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;

package/dist/es/components/src/tree/tree.vue_vue_type_script_setup_true_vapor_true_lang.mjs

@@ -1,19 +1,20 @@
 import { useNamespace as e } from "../../../hooks/src/use-namespace.mjs";
 import "../../../hooks/index.mjs";
-import t from "./node.vue.mjs";
-import { treeContextKey as n } from "./types.mjs";
-import { VaporTransitionGroup as r, computed as i, createComponent as a, createFor as o, defineVaporComponent as s, mergeModels as c, onBeforeUnmount as l, onMounted as u, provide as d, ref as f, renderEffect as p, setClass as m, setInsertionState as h, setStaticTemplateRef as g, setStyle as _, template as v, unref as y, useModel as b, useSlots as x, watch as S } from "vue";
+import { treeContextKey as t } from "./types.mjs";
+import n from "./node.vue.mjs";
+import { VaporTransitionGroup as r, computed as i, createComponent as a, createFor as o, createSlot as s, defineVaporComponent as c, mergeModels as l, onBeforeUnmount as u, onMounted as d, provide as f, ref as p, renderEffect as m, setClass as h, setInsertionState as g, setStaticTemplateRef as _, setStyle as v, template as y, toRefs as ee, unref as b, useModel as x, watch as S } from "vue";
 //#region ../components/src/tree/tree.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var C = v("<div>", 1), w = /*@__PURE__*/ s({
+var C = y("<div>", 1), w = /*@__PURE__*/ c({
 	name: "STree",
 	__name: "tree",
-	props: /*@__PURE__*/ c({
+	props: /*@__PURE__*/ l({
 		data: { default: () => [] },
 		fieldNames: { default: () => ({
 			label: "label",
 			key: "key",
 			children: "children"
 		}) },
+		size: { default: "medium" },
 		selectable: {
 			type: Boolean,
 			default: !1
@@ -43,7 +44,7 @@ var C = v("<div>", 1), w = /*@__PURE__*/ s({
 		expandedKeys: { default: () => [] },
 		expandedKeysModifiers: {}
 	}),
-	emits: /*@__PURE__*/ c([
+	emits: /*@__PURE__*/ l([
 		"nodeSelect",
 		"nodeClick",
 		"nodeCheck",
@@ -54,27 +55,27 @@ var C = v("<div>", 1), w = /*@__PURE__*/ s({
 		"update:indeterminateKeys",
 		"update:expandedKeys"
 	]),
-	setup(s, { emit: c }) {
-		let v = s, w = c, T = e("tree"), E = b(s, "selectKeys"), D = b(s, "checkedKeys"), O = b(s, "indeterminateKeys"), k = b(s, "expandedKeys"), A = f(), j = f(0), M = null, N = () => {
-			let e = A.value?.firstElementChild;
-			e && (j.value = e.offsetHeight);
+	setup(c, { emit: l, slots: y }) {
+		let w = c, T = l, E = e("tree"), D = x(c, "selectKeys"), O = x(c, "checkedKeys"), k = x(c, "indeterminateKeys"), A = x(c, "expandedKeys"), j = p(), M = p(0), N = null, P = () => {
+			let e = j.value?.firstElementChild;
+			e && (M.value = e.offsetHeight);
 		};
-		u(() => {
-			N();
-			let e = A.value?.firstElementChild;
-			e && (M = new ResizeObserver(N), M.observe(e));
-		}), l(() => {
-			M?.disconnect(), M = null;
+		d(() => {
+			P();
+			let e = j.value?.firstElementChild;
+			e && (N = new ResizeObserver(P), N.observe(e));
+		}), u(() => {
+			N?.disconnect(), N = null;
 		});
-		let P = f([]), F = (e, t) => {
-			let { label: n, key: r, children: i } = v.fieldNames, a = (e, t) => e?.length ? e.map((e) => {
+		let F = p([]), I = (e, t) => {
+			let { label: n, key: r, children: i } = w.fieldNames, a = (e, t) => e?.length ? e.map((e) => {
 				let o = e[i] || [], s = {
 					label: e[n],
 					key: e[r],
 					children: [],
 					rawNode: { ...e },
 					level: t ? t.level + 1 : 0,
-					isLeaf: e.isLeaf ? e.isLeaf : v.loadMore ? !1 : !o?.length,
+					isLeaf: e.isLeaf ? e.isLeaf : w.loadMore ? !1 : !o?.length,
 					disabled: !!e.disabled,
 					parentKey: t?.key
 				};
@@ -82,88 +83,94 @@ var C = v("<div>", 1), w = /*@__PURE__*/ s({
 			}) : [];
 			return Array.isArray(e) ? a(e, t) : [];
 		};
-		S(() => v.data, (e) => {
-			P.value = F(e);
+		S(() => w.data, (e) => {
+			F.value = I(e);
 		}, { immediate: !0 });
-		let I = i(() => {
-			let e = P.value || [];
+		let L = i(() => {
+			let e = F.value || [];
 			if (e.length === 0) return [];
 			let t = [], n = [...e].reverse();
 			for (; n.length;) {
 				let e = n.pop();
-				t.push(e), k.value.includes(e.key) && e?.children?.length && n.push(...[...e.children].reverse());
+				t.push(e), A.value.includes(e.key) && e?.children?.length && n.push(...[...e.children].reverse());
 			}
 			return t;
-		}), L = (e) => k.value.includes(e.key), R = (e) => {
-			k.value = k.value.filter((t) => t !== e.key);
-		}, z = f(/* @__PURE__ */ new Set()), B = async (e) => {
-			if (!e.children.length && !e.isLeaf && !z.value.has(e.key)) {
-				z.value.add(e.key);
-				let t = await v.loadMore?.(e);
-				t?.length && (e.rawNode.children = t, e.children = F(t, e)), z.value.delete(e.key);
+		}), R = (e) => A.value.includes(e.key), z = (e) => {
+			A.value = A.value.filter((t) => t !== e.key);
+		}, B = p(/* @__PURE__ */ new Set()), V = async (e) => {
+			if (!e.children.length && !e.isLeaf && !B.value.has(e.key)) {
+				B.value.add(e.key);
+				let t = await w.loadMore?.(e);
+				t?.length && (e.rawNode.children = t, e.children = I(t, e)), B.value.delete(e.key);
 			}
-		}, V = async (e) => {
-			k.value = [...k.value, e.key], await B(e);
 		}, H = async (e) => {
-			k.value.includes(e.key) ? (R(e), w("nodeExpand", e, !0)) : (await V(e), w("nodeExpand", e, !1));
-		}, U = (e) => {
-			!v.selectable || e.disabled || (v.multiple ? E.value.includes(e.key) ? E.value = E.value.filter((t) => t !== e.key) : E.value = [...E.value, e.key] : E.value = [e.key], w("nodeSelect", e));
-		}, W = (e, t) => {
-			t.disabled || (e ? (D.value.includes(t.key) || (D.value = [...D.value, t.key]), O.value = O.value.filter((e) => e !== t.key)) : D.value = D.value.filter((e) => e !== t.key), !v.checkStrictly && t.children?.length && t.children.forEach((t) => {
-				t.disabled || W(e, t);
+			A.value = [...A.value, e.key], await V(e);
+		}, U = async (e) => {
+			A.value.includes(e.key) ? (z(e), T("nodeExpand", e, !0)) : (await H(e), T("nodeExpand", e, !1));
+		}, W = (e) => {
+			!w.selectable || e.disabled || (w.multiple ? D.value.includes(e.key) ? D.value = D.value.filter((t) => t !== e.key) : D.value = [...D.value, e.key] : D.value = [e.key], T("nodeSelect", e));
+		}, G = (e, t) => {
+			t.disabled || (e ? (O.value.includes(t.key) || (O.value = [...O.value, t.key]), k.value = k.value.filter((e) => e !== t.key)) : O.value = O.value.filter((e) => e !== t.key), !w.checkStrictly && t.children?.length && t.children.forEach((t) => {
+				t.disabled || G(e, t);
 			}));
-		}, G = (e) => I.value.find((t) => t.key === e), K = (e) => {
+		}, K = (e) => L.value.find((t) => t.key === e), q = (e) => {
 			if (!e.disabled && e.parentKey) {
-				let t = G(e.parentKey);
+				let t = K(e.parentKey);
 				if (t) {
 					let e = !0, n = !1;
-					for (let r of t.children) D.value.includes(r.key) ? n = !0 : O.value.includes(r.key) ? (e = !1, n = !0) : e = !1;
-					e ? (D.value = [...D.value, t.key], O.value = O.value.filter((e) => e !== t.key)) : n ? (D.value = D.value.filter((e) => e !== t.key), O.value = [...O.value, t.key]) : (D.value = D.value.filter((e) => e !== t.key), O.value = O.value.filter((e) => e !== t.key)), K(t);
+					for (let r of t.children) O.value.includes(r.key) ? n = !0 : k.value.includes(r.key) ? (e = !1, n = !0) : e = !1;
+					e ? (O.value = [...O.value, t.key], k.value = k.value.filter((e) => e !== t.key)) : n ? (O.value = O.value.filter((e) => e !== t.key), k.value = [...k.value, t.key]) : (O.value = O.value.filter((e) => e !== t.key), k.value = k.value.filter((e) => e !== t.key)), q(t);
 				}
 			}
-		}, q = !1, J = () => {
-			if (v.checkStrictly) {
-				O.value.length > 0 && (q = !0, O.value = [], q = !1);
+		}, J = !1, Y = () => {
+			if (w.checkStrictly) {
+				k.value.length > 0 && (J = !0, k.value = [], J = !1);
 				return;
 			}
-			let e = new Set(D.value), t = [], n = (r) => {
+			let e = new Set(O.value), t = [], n = (r) => {
 				if (!r.children?.length) return e.has(r.key) ? "checked" : "unchecked";
 				let i = r.children.map((e) => n(e)), a = i.every((e) => e === "checked"), o = i.some((e) => e === "checked" || e === "indeterminate"), s = e.has(r.key);
 				return a ? (s || e.add(r.key), "checked") : o ? (s && e.delete(r.key), t.push(r.key), "indeterminate") : (s && e.delete(r.key), "unchecked");
 			};
-			P.value.forEach(n), q = !0;
+			F.value.forEach(n), J = !0;
 			let r = Array.from(e);
-			(r.length !== D.value.length || r.some((e) => !D.value.includes(e))) && (D.value = r), O.value = t, q = !1;
+			(r.length !== O.value.length || r.some((e) => !O.value.includes(e))) && (O.value = r), k.value = t, J = !1;
 		};
-		S(() => D.value, () => {
-			q || J();
+		S(() => O.value, () => {
+			J || Y();
 		}, { flush: "sync" });
-		let Y = (e, t) => {
-			q = !0, W(e, t), v.checkStrictly || K(t), q = !1, w("nodeCheck", t, e);
-		}, X = (e) => {
-			w("nodeClick", e);
-		};
-		d(n, { slots: x() });
-		let Z = C();
-		return p(() => {
-			m(Z, [y(T).b()]), _(Z, { height: j.value + "px" });
-		}), h(Z, null, 0), a(r, {
+		let X = (e, t) => {
+			J = !0, G(e, t), w.checkStrictly || q(t), J = !1, T("nodeCheck", t, e);
+		}, Z = (e) => {
+			T("nodeClick", e);
+		}, { size: Q } = ee(w);
+		f(t, { size: Q });
+		let $ = C();
+		return m(() => {
+			h($, [b(E).b()]), v($, { height: M.value + "px" });
+		}), g($, null, 0), a(r, {
 			name: "tree-list",
 			tag: "div",
-			onAfterLeave: () => N
-		}, () => o(() => I.value, (e) => a(t, {
+			onAfterLeave: () => P
+		}, () => o(() => L.value, (e) => a(n, {
 			node: () => e.value,
-			expanded: () => L(e.value),
-			onToggle: () => H,
-			loading: () => z.value.has(e.value.key),
-			onSelect: () => U,
-			selected: () => E.value.includes(e.value.key),
-			checkable: () => !!s.checkable,
-			checked: () => D.value.includes(e.value.key),
-			indeterminate: () => O.value.includes(e.value.key),
-			onCheck: () => Y,
-			onClick: () => X
-		}), (e) => e.key, 34)), g(Z, A, null, "containerRef"), Z;
+			expanded: () => R(e.value),
+			onToggle: () => U,
+			loading: () => B.value.has(e.value.key),
+			onSelect: () => W,
+			selected: () => D.value.includes(e.value.key),
+			checkable: () => !!c.checkable,
+			checked: () => O.value.includes(e.value.key),
+			indeterminate: () => k.value.includes(e.value.key),
+			onCheck: () => X,
+			onClick: () => Z
+		}, { $: [() => y.icon ? {
+			name: "icon",
+			fn: (e) => s("icon", { node: () => e.node }, null, 4)
+		} : void 0, () => y.extra ? {
+			name: "extra",
+			fn: (e) => s("extra", { node: () => e.node }, null, 4)
+		} : void 0] }), (e) => e.key, 34)), _($, j, null, "containerRef"), $;
 	}
 });
 //#endregion

package/dist/es/components/src/tree/types.d.ts

@@ -1,4 +1,4 @@
-import { InjectionKey, SetupContext } from 'vue';
+import { InjectionKey, Ref } from 'vue';
 export interface TreeProps {
     /** 树节点数据 */
     data: any[];
@@ -8,6 +8,8 @@ export interface TreeProps {
         key?: string;
         children?: string;
     };
+    /** 树节点大小 */
+    size?: "mini" | "small" | "medium" | "large";
     /** 是否可选择节点 */
     selectable?: boolean;
     /** 选中的节点键值数组 （v-model:selectKeys）*/
@@ -31,6 +33,16 @@ export interface TreeProps {
     /** 加载更多节点的回调函数 */
     loadMore?: (node: TreeNode) => Promise<TreeNode[]>;
 }
+export interface TreeSlots {
+    /** 自定义节点图标槽位 */
+    icon: (props: {
+        node: TreeNode;
+    }) => any;
+    /** 自定义节点额外槽位 */
+    extra: (props: {
+        node: TreeNode;
+    }) => any;
+}
 export interface TreeEmits {
     /** 选择节点变化事件 */
     nodeSelect: [node: TreeNode];
@@ -62,6 +74,6 @@ export interface TreeNode {
     [key: string]: any;
 }
 export interface TreeContext {
-    slots: SetupContext["slots"];
+    size?: Ref<TreeProps["size"]>;
 }
 export declare const treeContextKey: InjectionKey<TreeContext>;

package/dist/es/theme/components/menu.scss

@@ -5,6 +5,8 @@
   height: 100%;
   overflow: hidden;
   font-size: getCssVar("font-size", "medium");
+  color: var(--s-menu-text-color);
+  background-color: var(--s-menu-bg-color);
   transition:
     background-color 0.3s getCssVar("bezier", "1"),
     opacity 0.3s getCssVar("bezier", "1"),
@@ -29,8 +31,8 @@
         padding: 0;
         @include when(active) {
           border-radius: getCssVar("radius", "medium");
-          background-color: getCssVar("color", "primary-3");
-          color: getCssVar("color", "primary-6");
+          background-color: var(--s-menu-active-bg-color);
+          color: var(--s-menu-active-text-color);
         }
       }
       @include be(menu, item-title) {
@@ -56,11 +58,11 @@
       color 0.3s getCssVar("bezier", "1"),
       border-radius 0.3s getCssVar("bezier", "1");
     &:hover {
-      background-color: getCssVar("color", "fill-2");
+      background-color: var(--s-menu-hover-bg-color);
       border-radius: getCssVar("radius", "medium");
     }
     @include when(active) {
-      color: getCssVar("color", "primary-6");
+      color: var(--s-menu-active-text-color);
     }
   }
   @include e(sub-icon) {
@@ -119,12 +121,12 @@
       color 0.3s getCssVar("bezier", "1"),
       border-radius 0.3s getCssVar("bezier", "1");
     &:hover {
-      background-color: getCssVar("color", "fill-2");
+      background-color: var(--s-menu-hover-bg-color);
       border-radius: getCssVar("radius", "medium");
     }
     @include when(active) {
-      color: getCssVar("color", "primary-6");
-      background-color: getCssVar("color", "primary-2");
+      color: var(--s-menu-active-text-color);
+      background-color: var(--s-menu-active-bg-color);
       border-radius: getCssVar("radius", "medium");
     }
   }
@@ -142,7 +144,8 @@
   }
   @include e(pop-content) {
     border-radius: getCssVar("radius", "medium");
-    background-color: getCssVar("color", "bg-3");
+    background-color: var(--s-menu-bg-color);
+    color: var(--s-menu-text-color);
     box-shadow: getCssVar("shadow", "1");
     border: 1px solid getCssVar("color", "fill-3");
     display: flex;
@@ -171,8 +174,8 @@
       padding: 0 20px !important;
 
       @include when(active) {
-        background-color: getCssVar("color", "fill-2");
-        color: getCssVar("color", "primary-6");
+        background-color: var(--s-menu-active-bg-color);
+        color: var(--s-menu-active-text-color);
         &::before {
           content: "";
           display: none;
@@ -195,7 +198,7 @@
     align-items: center;
     gap: 8px;
     font-size: getCssVar("font-size", "medium");
-    color: getCssVar("color", "text-2");
+    color: var(--s-menu-text-color);
     padding-left: calc(var(--s-menu-level) * 20px);
     padding-right: 20px;
   }

package/dist/es/theme/components/modal.scss

@@ -1,5 +1,6 @@
 @use "../mixins/function.scss" as *;
 @use "../mixins/mixins.scss" as *;
+@use "../common/var.scss" as *;
 
 @include b(modal) {
   position: absolute;
@@ -53,9 +54,15 @@
   @include e(header) {
     display: flex;
     align-items: center;
-    gap: 8px;
+    gap: 4px;
     padding: 16px 16px 0 16px;
   }
+  @include e(icon) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 24px;
+  }
   @include e(header-icon) {
     display: flex;
     align-items: center;
@@ -142,4 +149,14 @@
     height: calc(100% - 16px);
     cursor: ew-resize;
   }
+  @include m(default) {
+    color: getCssVar("color", "text-1");
+  }
+  @each $type in $type-list {
+    @include m(#{$type}) {
+      @include be(modal, icon) {
+        color: getCssVar("color", #{$type}-6);
+      }
+    }
+  }
 }

package/dist/es/theme/components/tree.scss

@@ -1,5 +1,6 @@
 @use "../mixins/function.scss" as *;
 @use "../mixins/mixins.scss" as *;
+@use "../common/var.scss" as *;
 
 @include b(tree) {
   box-sizing: border-box;
@@ -7,19 +8,25 @@
   overflow: hidden;
 
   @include e(node) {
+    padding: 2px 0;
+    display: flex;
+    align-items: center;
+  }
+
+  @include e(wrapper) {
+    width: 100%;
+    height: 100%;
     border-radius: getCssVar("radius", "medium");
-    padding: 4px;
-    margin-bottom: 4px;
+    padding: 0 4px;
     color: getCssVar("color", "text-1");
     cursor: pointer;
     overflow: hidden;
+    display: flex;
+    align-items: center;
 
     &:hover {
       background-color: getCssVar("color", "fill-2");
     }
-    &:last-child {
-      margin-bottom: 0;
-    }
     @include when(selected) {
       background-color: getCssVar("color", "fill-2");
       color: getCssVar("color", "primary-6");
@@ -35,19 +42,30 @@
         }
       }
     }
+
+    @each $size in $size-list {
+      @include when(#{$size}) {
+        height: getCssVar("size", $size);
+        @include be(tree, extra) {
+          height: getCssVar("size", $size);
+          width: getCssVar("size", $size);
+        }
+      }
+    }
   }
 
   @include e(content) {
     display: flex;
     align-items: center;
     font-size: 14px;
-    gap: 8px;
+    gap: 4px;
+    width: 100%;
+    height: 100%;
   }
 
   @include e(expand-icon) {
     height: 18px;
     width: 18px;
-    font-size: 14px;
     border-radius: getCssVar("radius", "circle");
     display: flex;
     align-items: center;
@@ -65,6 +83,34 @@
     }
   }
 
+  @include e(checkbox) {
+    padding: 0 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  @include e(node-icon) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 24px;
+    width: 24px;
+  }
+
+  @include e(label) {
+    height: 100%;
+    flex: 1;
+    display: flex;
+    align-items: center;
+  }
+
+  @include e(extra) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
   .tree-list-move,
   .tree-list-enter-active,
   .tree-list-leave-active {

package/dist/json/vetur-attributes.json

@@ -1362,6 +1362,26 @@
   "s-menu/scrollbarProps": {
     "description": "滚动条属性"
   },
+  "s-menu/bgColor": {
+    "description": "背景颜色",
+    "type": "string"
+  },
+  "s-menu/textColor": {
+    "description": "文本颜色",
+    "type": "string"
+  },
+  "s-menu/activeTextColor": {
+    "description": "选中文本颜色",
+    "type": "string"
+  },
+  "s-menu/activeBgColor": {
+    "description": "选中背景颜色",
+    "type": "string"
+  },
+  "s-menu/hoverBgColor": {
+    "description": "鼠标悬停背景颜色",
+    "type": "string"
+  },
   "s-menu-item/name": {
     "description": "菜单键值",
     "type": "string | number"
@@ -1564,6 +1584,9 @@
     "description": "是否开启拖动弹窗",
     "type": "boolean"
   },
+  "s-modal/type": {
+    "description": "弹窗图标类型（default不显示）"
+  },
   "s-modal/className": {
     "description": "弹窗自定义类名",
     "type": "string"
@@ -2615,6 +2638,9 @@
     "description": "—",
     "type": "string"
   },
+  "s-tree/size": {
+    "description": "树节点大小"
+  },
   "s-tree/selectable": {
     "description": "是否可选择节点",
     "type": "boolean"

package/dist/json/vetur-tags.json

@@ -587,7 +587,12 @@
       "openKeys",
       "selectedKey",
       "accordion",
-      "scrollbarProps"
+      "scrollbarProps",
+      "bgColor",
+      "textColor",
+      "activeTextColor",
+      "activeBgColor",
+      "hoverBgColor"
     ]
   },
   "s-menu-item": {
@@ -669,6 +674,7 @@
       "mask",
       "to",
       "draggable",
+      "type",
       "className",
       "modalStyle",
       "maskStyle",
@@ -1088,6 +1094,7 @@
       "label",
       "key",
       "children",
+      "size",
       "selectable",
       "selectKeys",
       "checkable",

package/dist/json/web-types.json

@@ -2,7 +2,7 @@
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "framework": "vue",
   "name": "savor-ui",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "contributions": {
     "html": {
       "types-syntax": "typescript",
@@ -3571,6 +3571,46 @@
                 "type": "ScrollbarProps",
                 "kind": "expression"
               }
+            },
+            {
+              "name": "bgColor",
+              "description": "背景颜色",
+              "value": {
+                "type": "string",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "textColor",
+              "description": "文本颜色",
+              "value": {
+                "type": "string",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "activeTextColor",
+              "description": "选中文本颜色",
+              "value": {
+                "type": "string",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "activeBgColor",
+              "description": "选中背景颜色",
+              "value": {
+                "type": "string",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "hoverBgColor",
+              "description": "鼠标悬停背景颜色",
+              "value": {
+                "type": "string",
+                "kind": "expression"
+              }
             }
           ],
           "events": [
@@ -4095,6 +4135,14 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": "type",
+              "description": "弹窗图标类型（default不显示）",
+              "value": {
+                "type": "default | warning | primary | info | success | danger",
+                "kind": "expression"
+              }
+            },
             {
               "name": "className",
               "description": "弹窗自定义类名",
@@ -6686,6 +6734,14 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": "size",
+              "description": "树节点大小",
+              "value": {
+                "type": "mini | small | medium | large",
+                "kind": "expression"
+              }
+            },
             {
               "name": "selectable",
               "description": "是否可选择节点",
@@ -6785,7 +6841,16 @@
               "description": "节点展开变化事件"
             }
           ],
-          "slots": []
+          "slots": [
+            {
+              "name": "icon",
+              "description": "自定义节点图标槽位"
+            },
+            {
+              "name": "extra",
+              "description": "自定义节点额外槽位"
+            }
+          ]
         },
         {
           "name": "s-tree-select",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "savor-ui",
-  "version": "0.17.0",
+  "version": "0.18.0",
   "description": "A Vue3 Components Library",
   "keywords": [
     "component library",