@veltra/desktop 1.2.5 → 1.2.7

package/dist/components/action/action-group.vue.d.ts

@@ -7,9 +7,9 @@ type __VLS_Slots = {
 };
 declare const __VLS_base: import("vue").DefineComponent<ActionGroupProps, _ActionGroupExposed, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ActionGroupProps> & Readonly<{}>, {
   type: import("@veltra/utils").ColorType;
+  text: boolean;
   size: "small" | "default" | "large";
   circle: boolean;
-  text: boolean;
   max: number;
   loading: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/components/action/action.vue.d.ts

@@ -13,9 +13,9 @@ declare const __VLS_base: import("vue").DefineComponent<ActionProps, {}, {}, {},
   onRun?: (() => any) | undefined;
 }>, {
   type: ButtonType;
+  text: boolean;
   size: import("@veltra/utils").ComponentSize;
   circle: boolean;
-  text: boolean;
   loading: boolean;
   inDropdown: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/components/dual-nav/dual-nav-app.js

@@ -1,7 +1,8 @@
 import _sfc_main$1 from "../tip/tip.js";
 import _sfc_main$2 from "../nav/nav-icon.js";
-import { createBlock, createElementBlock, createElementVNode, createTextVNode, defineComponent, normalizeClass, openBlock, toDisplayString, unref, withCtx } from "vue";
+import { createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, openBlock, shallowRef, toDisplayString, unref, withCtx, withDirectives } from "vue";
 import { bem } from "@veltra/utils";
+import { vRipple } from "@veltra/directives";
 //#region src/components/dual-nav/dual-nav-app.vue
 const _hoisted_1 = ["disabled"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
@@ -9,27 +10,47 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 	__name: "dual-nav-app",
 	props: {
 		app: {},
-		active: { type: Boolean }
+		active: { type: Boolean },
+		selected: { type: Boolean }
 	},
 	emits: ["click"],
 	setup(__props, { emit: __emit }) {
 		const cls = bem("dual-nav");
 		const emit = __emit;
+		const tipVisible = shallowRef(false);
+		/** 点击后暂时禁用 hover 弹出，移出触发区后恢复 */
+		const tipSuppressed = shallowRef(false);
+		function handleClick() {
+			tipSuppressed.value = true;
+			tipVisible.value = false;
+			emit("click");
+		}
+		function handleMouseleave() {
+			tipSuppressed.value = false;
+		}
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(_sfc_main$1), {
+				visible: tipVisible.value,
+				"onUpdate:visible": _cache[0] || (_cache[0] = ($event) => tipVisible.value = $event),
 				direction: "right",
-				"hide-arrow": ""
+				"hide-arrow": "",
+				disabled: tipSuppressed.value
 			}, {
-				content: withCtx(() => [createTextVNode(toDisplayString(__props.app.title), 1)]),
-				default: withCtx(() => [createElementVNode("button", {
+				content: withCtx(() => [createElementVNode("div", { class: normalizeClass(unref(cls).e("app-tip")) }, [createElementVNode("div", { class: normalizeClass(unref(cls).e("app-tip-title")) }, toDisplayString(__props.app.title), 3), __props.app.description ? (openBlock(), createElementBlock("p", {
+					key: 0,
+					class: normalizeClass(unref(cls).e("app-tip-description"))
+				}, toDisplayString(__props.app.description), 3)) : createCommentVNode("v-if", true)], 2)]),
+				default: withCtx(() => [withDirectives((openBlock(), createElementBlock("button", {
 					type: "button",
 					class: normalizeClass([
 						unref(cls).e("app"),
 						unref(bem).is("active", __props.active),
+						unref(bem).is("selected", __props.selected),
 						unref(bem).is("disabled", __props.app.disabled ?? false)
 					]),
 					disabled: __props.app.disabled,
-					onClick: _cache[0] || (_cache[0] = ($event) => emit("click"))
+					onClick: handleClick,
+					onMouseleave: handleMouseleave
 				}, [__props.app.icon ? (openBlock(), createBlock(_sfc_main$2, {
 					key: 0,
 					icon: __props.app.icon,
@@ -37,9 +58,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 				}, null, 8, ["icon", "class"])) : (openBlock(), createElementBlock("span", {
 					key: 1,
 					class: normalizeClass(unref(cls).e("app-fallback"))
-				}, toDisplayString(__props.app.title[0]), 3))], 10, _hoisted_1)]),
+				}, toDisplayString(__props.app.title[0]), 3))], 42, _hoisted_1)), [[unref(vRipple), !__props.app.disabled]])]),
 				_: 1
-			});
+			}, 8, ["visible", "disabled"]);
 		};
 	}
 });

package/dist/components/dual-nav/dual-nav-app.js.map

@@ -1 +1 @@
-{"version":3,"file":"dual-nav-app.js","names":[],"sources":["../../../src/components/dual-nav/dual-nav-app.vue"],"sourcesContent":["<template>\n  <u-tip direction=\"right\" hide-arrow>\n    <button\n      type=\"button\"\n      :class=\"[cls.e('app'), bem.is('active', active), bem.is('disabled', app.disabled ?? false)]\"\n      :disabled=\"app.disabled\"\n      @click=\"emit('click')\"\n    >\n      <UNavIcon v-if=\"app.icon\" :icon=\"app.icon\" :class=\"cls.e('app-icon')\" />\n      <span v-else :class=\"cls.e('app-fallback')\">{{ app.title[0] }}</span>\n    </button>\n\n    <template #content>\n      {{ app.title }}\n    </template>\n  </u-tip>\n</template>\n\n<script setup lang=\"ts\">\nimport { bem } from '@veltra/utils'\n\nimport type { NavItem } from '../../types'\nimport UNavIcon from '../nav/nav-icon.vue'\nimport { UTip } from '../tip'\n\ndefineOptions({ name: 'DualNavApp' })\n\nconst cls = bem('dual-nav')\n\ndefineProps<{ app: NavItem; active: boolean }>()\n\nconst emit = defineEmits<{ click: [] }>()\n</script>\n"],"mappings":";;;;;;;;;;;;;;;EA2BA,MAAM,MAAM,IAAI,UAAU;EAI1B,MAAM,OAAO;;uBA9BX,YAcQ,MAAA,WAAA,GAAA;IAdD,WAAU;IAAQ,cAAA;;IAWZ,SAAO,cACD,CAAA,gBAAA,gBAAZ,QAAA,IAAI,KAAK,GAAA,CAAA,CAAA,CAAA;2BAHL,CART,mBAQS,UAAA;KAPP,MAAK;KACJ,OAAK,eAAA;MAAG,MAAA,GAAA,EAAI,EAAC,KAAA;MAAS,MAAA,GAAA,EAAI,GAAE,UAAW,QAAA,MAAM;MAAG,MAAA,GAAA,EAAI,GAAE,YAAa,QAAA,IAAI,YAAQ,KAAA;KAAA,CAAA;KAC/E,UAAU,QAAA,IAAI;KACd,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,OAAA;QAEI,QAAA,IAAI,QAAA,UAAA,GAApB,YAAwE,aAAA;;KAA7C,MAAM,QAAA,IAAI;KAAO,OAAK,eAAE,MAAA,GAAA,EAAI,EAAC,UAAA,CAAA;oDACxD,mBAAqE,QAAA;;KAAvD,OAAK,eAAE,MAAA,GAAA,EAAI,EAAC,cAAA,CAAA;uBAAqB,QAAA,IAAI,MAAK,EAAA,GAAA,CAAA,EAAA,GAAA,IAAA,UAAA,CAAA,CAAA"}
+{"version":3,"file":"dual-nav-app.js","names":[],"sources":["../../../src/components/dual-nav/dual-nav-app.vue"],"sourcesContent":["<template>\n  <u-tip v-model:visible=\"tipVisible\" direction=\"right\" hide-arrow :disabled=\"tipSuppressed\">\n    <button\n      type=\"button\"\n      v-ripple=\"!app.disabled\"\n      :class=\"[\n        cls.e('app'),\n        bem.is('active', active),\n        bem.is('selected', selected),\n        bem.is('disabled', app.disabled ?? false)\n      ]\"\n      :disabled=\"app.disabled\"\n      @click=\"handleClick\"\n      @mouseleave=\"handleMouseleave\"\n    >\n      <UNavIcon v-if=\"app.icon\" :icon=\"app.icon\" :class=\"cls.e('app-icon')\" />\n      <span v-else :class=\"cls.e('app-fallback')\">{{ app.title[0] }}</span>\n    </button>\n\n    <template #content>\n      <div :class=\"cls.e('app-tip')\">\n        <div :class=\"cls.e('app-tip-title')\">{{ app.title }}</div>\n        <p v-if=\"app.description\" :class=\"cls.e('app-tip-description')\">\n          {{ app.description }}\n        </p>\n      </div>\n    </template>\n  </u-tip>\n</template>\n\n<script setup lang=\"ts\">\nimport { vRipple } from '@veltra/directives'\nimport { bem } from '@veltra/utils'\nimport { shallowRef } from 'vue'\n\nimport type { DualNavRootItem } from '../../types'\nimport UNavIcon from '../nav/nav-icon.vue'\nimport { UTip } from '../tip'\n\ndefineOptions({ name: 'DualNavApp' })\n\nconst cls = bem('dual-nav')\n\ndefineProps<{ app: DualNavRootItem; active: boolean; selected: boolean }>()\n\nconst emit = defineEmits<{ click: [] }>()\n\nconst tipVisible = shallowRef(false)\n/** 点击后暂时禁用 hover 弹出，移出触发区后恢复 */\nconst tipSuppressed = shallowRef(false)\n\nfunction handleClick() {\n  tipSuppressed.value = true\n  tipVisible.value = false\n  emit('click')\n}\n\nfunction handleMouseleave() {\n  tipSuppressed.value = false\n}\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;EAyCA,MAAM,MAAM,IAAI,UAAU;EAI1B,MAAM,OAAO;EAEb,MAAM,aAAa,WAAW,KAAK;;EAEnC,MAAM,gBAAgB,WAAW,KAAK;EAEtC,SAAS,cAAc;GACrB,cAAc,QAAQ;GACtB,WAAW,QAAQ;GACnB,KAAK,OAAO;EACd;EAEA,SAAS,mBAAmB;GAC1B,cAAc,QAAQ;EACxB;;uBA1DE,YA0BQ,MAAA,WAAA,GAAA;IA1BO,SAAS,WAAA;8DAAA,WAAU,QAAA;IAAE,WAAU;IAAQ,cAAA;IAAY,UAAU,cAAA;;IAkB/D,SAAO,cAMV,CALN,mBAKM,OAAA,EALA,OAAK,eAAE,MAAA,GAAA,EAAI,EAAC,SAAA,CAAA,EAAA,GAAA,CAChB,mBAA0D,OAAA,EAApD,OAAK,eAAE,MAAA,GAAA,EAAI,EAAC,eAAA,CAAA,EAAA,GAAA,gBAAsB,QAAA,IAAI,KAAK,GAAA,CAAA,GACxC,QAAA,IAAI,eAAA,UAAA,GAAb,mBAEI,KAAA;;KAFuB,OAAK,eAAE,MAAA,GAAA,EAAI,EAAC,qBAAA,CAAA;uBAClC,QAAA,IAAI,WAAW,GAAA,CAAA,KAAA,mBAAA,QAAA,IAAA,CAAA,GAAA,CAAA,CAAA,CAAA;2BANf,CAAA,gBAAA,UAAA,GAfT,mBAeS,UAAA;KAdP,MAAK;KAEJ,OAAK,eAAA;MAAY,MAAA,GAAA,EAAI,EAAC,KAAA;MAAiB,MAAA,GAAA,EAAI,GAAE,UAAW,QAAA,MAAM;MAAW,MAAA,GAAA,EAAI,GAAE,YAAa,QAAA,QAAQ;MAAW,MAAA,GAAA,EAAI,GAAE,YAAa,QAAA,IAAI,YAAQ,KAAA;;KAM9I,UAAU,QAAA,IAAI;KACd,SAAO;KACP,cAAY;QAEG,QAAA,IAAI,QAAA,UAAA,GAApB,YAAwE,aAAA;;KAA7C,MAAM,QAAA,IAAI;KAAO,OAAK,eAAE,MAAA,GAAA,EAAI,EAAC,UAAA,CAAA;oDACxD,mBAAqE,QAAA;;KAAvD,OAAK,eAAE,MAAA,GAAA,EAAI,EAAC,cAAA,CAAA;uBAAqB,QAAA,IAAI,MAAK,EAAA,GAAA,CAAA,EAAA,GAAA,IAAA,UAAA,IAAA,CAAA,CAAA,MAAA,OAAA,GAAA,CAZ7C,QAAA,IAAI,QAAQ,CAAA,CAAA,CAAA,CAAA"}

package/dist/components/dual-nav/dual-nav.js

@@ -3,7 +3,7 @@ import _sfc_main$2 from "../tip/tip.js";
 import { collectNavBranchPaths } from "../nav/helper.js";
 import _sfc_main$3 from "../nav/nav.js";
 import _sfc_main$4 from "./dual-nav-app.js";
-import { findRootApp } from "./helper.js";
+import { findFirstLeaf, findRootApp } from "./helper.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, openBlock, ref, renderList, toDisplayString, unref, useTemplateRef, watch, withCtx } from "vue";
 import { bem } from "@veltra/utils";
 import { Folder, FolderOpened } from "@veltra/icons/normal";
@@ -53,14 +53,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 		watch(panelAppPath, () => {
 			allExpanded.value = false;
 		});
-		/** 左轨高亮：仅当 currentPath 落在该应用下时激活 */
+		/** 左轨高亮：currentPath 落在该应用下时为激活态 */
 		function isAppActive(app) {
 			return findRootApp(props.menus, props.currentPath)?.path === app.path;
 		}
+		/** 左轨选中：已切换右栏但尚未导航到该应用下任一菜单时，使用 hover 风格 */
+		function isAppSelected(app) {
+			return panelAppPath.value === app.path && !isAppActive(app);
+		}
 		function handleAppClick(app) {
 			if (app.disabled) return;
 			panelAppPath.value = app.path;
-			if (!app.children?.length) emit("item-click", app);
+			emit("item-click", findFirstLeaf(app));
 		}
 		function handleToggleExpandAll() {
 			if (allExpanded.value) {
@@ -78,17 +82,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 						key: app.path,
 						app,
 						active: isAppActive(app),
+						selected: isAppSelected(app),
 						onClick: ($event) => handleAppClick(app)
 					}, null, 8, [
 						"app",
 						"active",
+						"selected",
 						"onClick"
 					]);
 				}), 128))], 2),
-				createElementVNode("div", {
-					class: normalizeClass(unref(cls).e("divider")),
-					"aria-hidden": "true"
-				}, null, 2),
+				createCommentVNode(" <div :class=\"cls.e('divider')\" aria-hidden=\"true\" /> "),
 				createElementVNode("div", { class: normalizeClass(unref(cls).e("panel")) }, [panelApp.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createElementVNode("div", { class: normalizeClass(unref(cls).e("panel-header")) }, [createElementVNode("div", { class: normalizeClass(unref(cls).e("panel-header-main")) }, [createElementVNode("h3", { class: normalizeClass(unref(cls).e("panel-title")) }, toDisplayString(panelApp.value.title), 3), panelApp.value.description ? (openBlock(), createElementBlock("p", {
 					key: 0,
 					class: normalizeClass(unref(cls).e("description"))

package/dist/components/dual-nav/dual-nav.js.map

@@ -1 +1 @@
-{"version":3,"file":"dual-nav.js","names":[],"sources":["../../../src/components/dual-nav/dual-nav.vue"],"sourcesContent":["<template>\n  <div :class=\"cls.b\">\n    <div :class=\"cls.e('rail')\">\n      <DualNavApp\n        v-for=\"app in menus\"\n        :key=\"app.path\"\n        :app=\"app\"\n        :active=\"isAppActive(app)\"\n        @click=\"handleAppClick(app)\"\n      />\n    </div>\n\n    <div :class=\"cls.e('divider')\" aria-hidden=\"true\" />\n\n    <div :class=\"cls.e('panel')\">\n      <template v-if=\"panelApp\">\n        <div :class=\"cls.e('panel-header')\">\n          <div :class=\"cls.e('panel-header-main')\">\n            <h3 :class=\"cls.e('panel-title')\">{{ panelApp.title }}</h3>\n            <p v-if=\"panelApp.description\" :class=\"cls.e('description')\">\n              {{ panelApp.description }}\n            </p>\n          </div>\n\n          <u-tip\n            v-if=\"hasExpandableMenus\"\n            :content=\"allExpanded ? '折叠全部' : '展开全部'\"\n            hide-arrow\n          >\n            <button\n              type=\"button\"\n              :class=\"cls.e('toggle-expand')\"\n              :aria-label=\"allExpanded ? '折叠全部' : '展开全部'\"\n              @click=\"handleToggleExpandAll\"\n            >\n              <u-icon>\n                <FolderOpened v-if=\"!allExpanded\" />\n                <Folder v-else />\n              </u-icon>\n            </button>\n          </u-tip>\n        </div>\n\n        <div :class=\"cls.e('panel-body')\">\n          <UNav\n            ref=\"navRef\"\n            :menus=\"panelMenus\"\n            :current-path=\"currentPath\"\n            :collapsed=\"false\"\n            @item-click=\"emit('item-click', $event)\"\n          />\n        </div>\n      </template>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { Folder, FolderOpened } from '@veltra/icons/normal'\nimport { bem } from '@veltra/utils'\nimport { computed, ref, useTemplateRef, watch } from 'vue'\n\nimport type { DualNavEmits, DualNavProps, DualNavRootItem } from '../../types/dual-nav'\nimport type { NavExposed, NavItem } from '../../types/nav'\nimport { UIcon } from '../icon'\nimport { UNav } from '../nav'\nimport { collectNavBranchPaths } from '../nav/helper'\nimport { UTip } from '../tip'\nimport DualNavApp from './dual-nav-app.vue'\nimport { findRootApp } from './helper'\n\ndefineOptions({ name: 'DualNav' })\n\nconst props = defineProps<DualNavProps>()\nconst emit = defineEmits<DualNavEmits>()\n\nconst cls = bem('dual-nav')\nconst navRef = useTemplateRef<NavExposed>('navRef')\n\n/** 右栏当前展示的应用（点击左轨或 currentPath 同步） */\nconst panelAppPath = ref<string>()\nconst allExpanded = ref(false)\n\nfunction syncPanelAppFromCurrentPath(currentPath?: string) {\n  const rootApp = findRootApp(props.menus, currentPath)\n  if (rootApp) {\n    panelAppPath.value = rootApp.path\n    return\n  }\n\n  if (!panelAppPath.value && props.menus?.length) {\n    panelAppPath.value = props.menus[0]!.path\n  }\n}\n\nwatch(\n  () => [props.currentPath, props.menus] as const,\n  ([currentPath]) => {\n    syncPanelAppFromCurrentPath(currentPath)\n  },\n  { immediate: true }\n)\n\nconst panelApp = computed<DualNavRootItem | undefined>(() => {\n  if (!panelAppPath.value || !props.menus?.length) return undefined\n  return props.menus.find((app) => app.path === panelAppPath.value)\n})\n\n/** 右栏菜单：有子级时展示子级，单层时展示根项自身 */\nconst panelMenus = computed<NavItem[] | undefined>(() => {\n  const app = panelApp.value\n  if (!app) return undefined\n  if (app.children?.length) return app.children\n  return [app]\n})\n\nconst hasExpandableMenus = computed(() => {\n  return collectNavBranchPaths(panelMenus.value).length > 0\n})\n\nwatch(panelAppPath, () => {\n  allExpanded.value = false\n})\n\n/** 左轨高亮：仅当 currentPath 落在该应用下时激活 */\nfunction isAppActive(app: NavItem): boolean {\n  return findRootApp(props.menus, props.currentPath)?.path === app.path\n}\n\nfunction handleAppClick(app: NavItem) {\n  if (app.disabled) return\n\n  panelAppPath.value = app.path\n\n  if (!app.children?.length) {\n    emit('item-click', app)\n  }\n}\n\nfunction handleToggleExpandAll() {\n  if (allExpanded.value) {\n    navRef.value?.collapseAll()\n    allExpanded.value = false\n    return\n  }\n\n  navRef.value?.expandAll()\n  allExpanded.value = true\n}\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"dual-nav.js","names":[],"sources":["../../../src/components/dual-nav/dual-nav.vue"],"sourcesContent":["<template>\n  <div :class=\"cls.b\">\n    <div :class=\"cls.e('rail')\">\n      <DualNavApp\n        v-for=\"app in menus\"\n        :key=\"app.path\"\n        :app=\"app\"\n        :active=\"isAppActive(app)\"\n        :selected=\"isAppSelected(app)\"\n        @click=\"handleAppClick(app)\"\n      />\n    </div>\n\n    <!-- <div :class=\"cls.e('divider')\" aria-hidden=\"true\" /> -->\n\n    <div :class=\"cls.e('panel')\">\n      <template v-if=\"panelApp\">\n        <div :class=\"cls.e('panel-header')\">\n          <div :class=\"cls.e('panel-header-main')\">\n            <h3 :class=\"cls.e('panel-title')\">{{ panelApp.title }}</h3>\n            <p v-if=\"panelApp.description\" :class=\"cls.e('description')\">\n              {{ panelApp.description }}\n            </p>\n          </div>\n\n          <u-tip\n            v-if=\"hasExpandableMenus\"\n            :content=\"allExpanded ? '折叠全部' : '展开全部'\"\n            hide-arrow\n          >\n            <button\n              type=\"button\"\n              :class=\"cls.e('toggle-expand')\"\n              :aria-label=\"allExpanded ? '折叠全部' : '展开全部'\"\n              @click=\"handleToggleExpandAll\"\n            >\n              <u-icon>\n                <FolderOpened v-if=\"!allExpanded\" />\n                <Folder v-else />\n              </u-icon>\n            </button>\n          </u-tip>\n        </div>\n\n        <div :class=\"cls.e('panel-body')\">\n          <UNav\n            ref=\"navRef\"\n            :menus=\"panelMenus\"\n            :current-path=\"currentPath\"\n            :collapsed=\"false\"\n            @item-click=\"emit('item-click', $event)\"\n          />\n        </div>\n      </template>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { Folder, FolderOpened } from '@veltra/icons/normal'\nimport { bem } from '@veltra/utils'\nimport { computed, ref, useTemplateRef, watch } from 'vue'\n\nimport type { DualNavEmits, DualNavProps, DualNavRootItem } from '../../types/dual-nav'\nimport type { NavExposed, NavItem } from '../../types/nav'\nimport { UIcon } from '../icon'\nimport { UNav } from '../nav'\nimport { collectNavBranchPaths } from '../nav/helper'\nimport { UTip } from '../tip'\nimport DualNavApp from './dual-nav-app.vue'\nimport { findFirstLeaf, findRootApp } from './helper'\n\ndefineOptions({ name: 'DualNav' })\n\nconst props = defineProps<DualNavProps>()\nconst emit = defineEmits<DualNavEmits>()\n\nconst cls = bem('dual-nav')\nconst navRef = useTemplateRef<NavExposed>('navRef')\n\n/** 右栏当前展示的应用（点击左轨或 currentPath 同步） */\nconst panelAppPath = ref<string>()\nconst allExpanded = ref(false)\n\nfunction syncPanelAppFromCurrentPath(currentPath?: string) {\n  const rootApp = findRootApp(props.menus, currentPath)\n  if (rootApp) {\n    panelAppPath.value = rootApp.path\n    return\n  }\n\n  if (!panelAppPath.value && props.menus?.length) {\n    panelAppPath.value = props.menus[0]!.path\n  }\n}\n\nwatch(\n  () => [props.currentPath, props.menus] as const,\n  ([currentPath]) => {\n    syncPanelAppFromCurrentPath(currentPath)\n  },\n  { immediate: true }\n)\n\nconst panelApp = computed<DualNavRootItem | undefined>(() => {\n  if (!panelAppPath.value || !props.menus?.length) return undefined\n  return props.menus.find((app) => app.path === panelAppPath.value)\n})\n\n/** 右栏菜单：有子级时展示子级，单层时展示根项自身 */\nconst panelMenus = computed<NavItem[] | undefined>(() => {\n  const app = panelApp.value\n  if (!app) return undefined\n  if (app.children?.length) return app.children\n  return [app]\n})\n\nconst hasExpandableMenus = computed(() => {\n  return collectNavBranchPaths(panelMenus.value).length > 0\n})\n\nwatch(panelAppPath, () => {\n  allExpanded.value = false\n})\n\n/** 左轨高亮：currentPath 落在该应用下时为激活态 */\nfunction isAppActive(app: NavItem): boolean {\n  return findRootApp(props.menus, props.currentPath)?.path === app.path\n}\n\n/** 左轨选中：已切换右栏但尚未导航到该应用下任一菜单时，使用 hover 风格 */\nfunction isAppSelected(app: NavItem): boolean {\n  return panelAppPath.value === app.path && !isAppActive(app)\n}\n\nfunction handleAppClick(app: NavItem) {\n  if (app.disabled) return\n\n  panelAppPath.value = app.path\n\n  emit('item-click', findFirstLeaf(app))\n}\n\nfunction handleToggleExpandAll() {\n  if (allExpanded.value) {\n    navRef.value?.collapseAll()\n    allExpanded.value = false\n    return\n  }\n\n  navRef.value?.expandAll()\n  allExpanded.value = true\n}\n</script>\n"],"mappings":"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"}

package/dist/components/dual-nav/helper.js

@@ -15,7 +15,12 @@ function findRootApp(menus, currentPath) {
 		if (matched) return app;
 	}
 }
+/** 深度优先查找首个叶子节点（无子级或子级为空） */
+function findFirstLeaf(node) {
+	if (!node.children?.length) return node;
+	return findFirstLeaf(node.children[0]);
+}
 //#endregion
-export { findRootApp };
+export { findFirstLeaf, findRootApp };
 
 //# sourceMappingURL=helper.js.map

package/dist/components/dual-nav/helper.js.map

@@ -1 +1 @@
-{"version":3,"file":"helper.js","names":[],"sources":["../../../src/components/dual-nav/helper.ts"],"sourcesContent":["import type { DualNavRootItem } from '../../types'\nimport { walkNavWithPath } from '../nav/walk-nav-path'\n\n/** 根据当前路径反查所属顶层应用 */\nexport function findRootApp(\n  menus: DualNavRootItem[] | undefined,\n  currentPath?: string\n): DualNavRootItem | undefined {\n  if (!currentPath || !menus?.length) return undefined\n\n  for (const app of menus) {\n    if (app.path === currentPath) return app\n\n    let matched = false\n    walkNavWithPath(app, (node) => {\n      if (node.path === currentPath) {\n        matched = true\n        return false\n      }\n    })\n    if (matched) return app\n  }\n\n  return undefined\n}\n"],"mappings":";;;AAIA,SAAgB,YACd,OACA,aAC6B;CAC7B,IAAI,CAAC,eAAe,CAAC,OAAO,QAAQ,OAAO,KAAA;CAE3C,KAAK,MAAM,OAAO,OAAO;EACvB,IAAI,IAAI,SAAS,aAAa,OAAO;EAErC,IAAI,UAAU;EACd,gBAAgB,MAAM,SAAS;GAC7B,IAAI,KAAK,SAAS,aAAa;IAC7B,UAAU;IACV,OAAO;GACT;EACF,CAAC;EACD,IAAI,SAAS,OAAO;CACtB;AAGF"}
+{"version":3,"file":"helper.js","names":[],"sources":["../../../src/components/dual-nav/helper.ts"],"sourcesContent":["import type { DualNavRootItem, NavItem } from '../../types'\nimport { walkNavWithPath } from '../nav/walk-nav-path'\n\n/** 根据当前路径反查所属顶层应用 */\nexport function findRootApp(\n  menus: DualNavRootItem[] | undefined,\n  currentPath?: string\n): DualNavRootItem | undefined {\n  if (!currentPath || !menus?.length) return undefined\n\n  for (const app of menus) {\n    if (app.path === currentPath) return app\n\n    let matched = false\n    walkNavWithPath(app, (node) => {\n      if (node.path === currentPath) {\n        matched = true\n        return false\n      }\n    })\n    if (matched) return app\n  }\n\n  return undefined\n}\n\n/** 深度优先查找首个叶子节点（无子级或子级为空） */\nexport function findFirstLeaf(node: NavItem): NavItem {\n  if (!node.children?.length) return node\n  return findFirstLeaf(node.children[0]!)\n}\n"],"mappings":";;;AAIA,SAAgB,YACd,OACA,aAC6B;CAC7B,IAAI,CAAC,eAAe,CAAC,OAAO,QAAQ,OAAO,KAAA;CAE3C,KAAK,MAAM,OAAO,OAAO;EACvB,IAAI,IAAI,SAAS,aAAa,OAAO;EAErC,IAAI,UAAU;EACd,gBAAgB,MAAM,SAAS;GAC7B,IAAI,KAAK,SAAS,aAAa;IAC7B,UAAU;IACV,OAAO;GACT;EACF,CAAC;EACD,IAAI,SAAS,OAAO;CACtB;AAGF;;AAGA,SAAgB,cAAc,MAAwB;CACpD,IAAI,CAAC,KAAK,UAAU,QAAQ,OAAO;CACnC,OAAO,cAAc,KAAK,SAAS,EAAG;AACxC"}

package/dist/components/dual-nav/style.js

@@ -2,3 +2,4 @@ import "../icon/style.js";
 import "../tip/style.js";
 import "../nav/style.js";
 import "./style2.css";
+import "@veltra/directives/ripple/style.js";

package/dist/components/dual-nav/style2.css

@@ -20,7 +20,6 @@
   height: 100%;
   min-height: 0;
   background-color: var(--u-nav-bg-color);
-  border: 1px solid var(--u-border-color);
   border-radius: calc(var(--u-radius-large) + 6px);
   overflow: hidden;
 }
@@ -53,7 +52,6 @@
   justify-content: space-between;
   gap: 8px;
   padding: 12px 12px 10px;
-  border-bottom: 1px solid var(--u-border-color);
 }
 .u-dual-nav__panel-header-main {
   flex: 1;
@@ -124,10 +122,22 @@
   background-color: var(--u-nav-hover-bg);
   color: var(--u-nav-hover-color);
 }
+.u-dual-nav__app.is-selected {
+  background-color: var(--u-nav-hover-bg);
+  color: var(--u-nav-hover-color);
+}
+.u-dual-nav__app.is-selected:hover:not(:disabled) {
+  background-color: var(--u-nav-hover-bg);
+  color: var(--u-nav-hover-color);
+}
 .u-dual-nav__app.is-active {
   background-color: var(--u-nav-active-bg);
   color: var(--u-nav-active-color);
 }
+.u-dual-nav__app.is-active:hover:not(:disabled) {
+  background-color: var(--u-nav-active-bg);
+  color: var(--u-nav-active-color);
+}
 .u-dual-nav__app.is-disabled {
   opacity: 0.55;
   cursor: not-allowed;
@@ -143,3 +153,20 @@
   font-weight: 600;
   line-height: 1;
 }
+.u-dual-nav__app-tip {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  max-width: 200px;
+}
+.u-dual-nav__app-tip-title {
+  font-weight: 600;
+  line-height: 1.4;
+  color: var(--u-text-color-title);
+}
+.u-dual-nav__app-tip-description {
+  margin: 0;
+  font-size: var(--u-font-size-assist-default);
+  line-height: 1.5;
+  color: var(--u-text-color-second);
+}

package/dist/components/empty/empty.vue.d.ts

@@ -1,8 +1,8 @@
 import { EmptyProps } from "../../types/empty.js";
 //#region src/components/empty/empty.vue.d.ts
 declare const __VLS_export: import("vue").DefineComponent<EmptyProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<EmptyProps> & Readonly<{}>, {
-  size: number;
   text: string;
+  size: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 //#endregion

package/dist/components/input/input.vue.d.ts

@@ -17,19 +17,19 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, _Inpu
   "update:modelValue": (value: string) => any;
   clear: () => any;
   change: (value: string) => any;
-  "suffix:click": (value?: string | undefined) => any;
-  "prefix:click": (value?: string | undefined) => any;
   focus: (value?: string | undefined) => any;
   blur: (value?: string | undefined) => any;
+  "suffix:click": (value?: string | undefined) => any;
+  "prefix:click": (value?: string | undefined) => any;
   "native:input": (ev: Event) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
   "onUpdate:modelValue"?: ((value: string) => any) | undefined;
   onClear?: (() => any) | undefined;
   onChange?: ((value: string) => any) | undefined;
-  "onSuffix:click"?: ((value?: string | undefined) => any) | undefined;
-  "onPrefix:click"?: ((value?: string | undefined) => any) | undefined;
   onFocus?: ((value?: string | undefined) => any) | undefined;
   onBlur?: ((value?: string | undefined) => any) | undefined;
+  "onSuffix:click"?: ((value?: string | undefined) => any) | undefined;
+  "onPrefix:click"?: ((value?: string | undefined) => any) | undefined;
   "onNative:input"?: ((ev: Event) => any) | undefined;
 }>, {
   placeholder: string;

package/dist/components/loading/loading.js

@@ -5,7 +5,7 @@ import { bem, zIndex } from "@veltra/utils";
 const _sfc_main = /* @__PURE__ */ defineComponent({
 	name: "Loading",
 	__name: "loading",
-	props: { type: { default: "spinner" } },
+	props: { type: { default: "dual-ring" } },
 	setup(__props) {
 		const props = __props;
 		const { size } = useFallbackProps([props], { size: "default" });

package/dist/components/loading/loading.js.map

@@ -1 +1 @@
-{"version":3,"file":"loading.js","names":[],"sources":["../../../src/components/loading/loading.vue"],"sourcesContent":["<template>\n  <transition name=\"fade\" appear>\n    <div :class=\"className\" :style=\"{ zIndex: zIndex() }\">\n      <div :class=\"cls.e('loader')\"></div>\n    </div>\n  </transition>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useFallbackProps } from '@veltra/compositions'\nimport { bem, zIndex } from '@veltra/utils'\nimport { computed } from 'vue'\n\nimport type { LoadingProps, ComponentSize } from '../../types'\n\ndefineOptions({ name: 'Loading' })\n\nconst props = withDefaults(defineProps<LoadingProps>(), { type: 'spinner' })\n\nconst { size } = useFallbackProps([props], { size: 'default' as ComponentSize })\n\nconst cls = bem('loading')\n\nconst className = computed(() => {\n  return [cls.b, cls.m(size.value), cls.e(props.type)]\n})\n</script>\n"],"mappings":";;;;;;;;;EAiBA,MAAM,QAAQ;EAEd,MAAM,EAAE,SAAS,iBAAiB,CAAC,KAAK,GAAG,EAAE,MAAM,UAA2B,CAAC;EAE/E,MAAM,MAAM,IAAI,SAAS;EAEzB,MAAM,YAAY,eAAe;GAC/B,OAAO;IAAC,IAAI;IAAG,IAAI,EAAE,KAAK,KAAK;IAAG,IAAI,EAAE,MAAM,IAAI;GAAC;EACrD,CAAC;;uBAxBC,YAIa,YAAA;IAJD,MAAK;IAAO,QAAA;;2BAGhB,CAFN,mBAEM,OAAA;KAFA,OAAK,eAAE,UAAA,KAAS;KAAG,OAAK,eAAA,EAAA,QAAY,MAAA,MAAA,EAAM,EAAA,CAAA;QAC9C,mBAAoC,OAAA,EAA9B,OAAK,eAAE,MAAA,GAAA,EAAI,EAAC,QAAA,CAAA,EAAA,GAAA,MAAA,CAAA,CAAA,GAAA,CAAA,CAAA,CAAA"}
+{"version":3,"file":"loading.js","names":[],"sources":["../../../src/components/loading/loading.vue"],"sourcesContent":["<template>\n  <transition name=\"fade\" appear>\n    <div :class=\"className\" :style=\"{ zIndex: zIndex() }\">\n      <div :class=\"cls.e('loader')\"></div>\n    </div>\n  </transition>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useFallbackProps } from '@veltra/compositions'\nimport { bem, zIndex } from '@veltra/utils'\nimport { computed } from 'vue'\n\nimport type { LoadingProps, ComponentSize } from '../../types'\n\ndefineOptions({ name: 'Loading' })\n\nconst props = withDefaults(defineProps<LoadingProps>(), { type: 'dual-ring' })\n\nconst { size } = useFallbackProps([props], { size: 'default' as ComponentSize })\n\nconst cls = bem('loading')\n\nconst className = computed(() => {\n  return [cls.b, cls.m(size.value), cls.e(props.type)]\n})\n</script>\n"],"mappings":";;;;;;;;;EAiBA,MAAM,QAAQ;EAEd,MAAM,EAAE,SAAS,iBAAiB,CAAC,KAAK,GAAG,EAAE,MAAM,UAA2B,CAAC;EAE/E,MAAM,MAAM,IAAI,SAAS;EAEzB,MAAM,YAAY,eAAe;GAC/B,OAAO;IAAC,IAAI;IAAG,IAAI,EAAE,KAAK,KAAK;IAAG,IAAI,EAAE,MAAM,IAAI;GAAC;EACrD,CAAC;;uBAxBC,YAIa,YAAA;IAJD,MAAK;IAAO,QAAA;;2BAGhB,CAFN,mBAEM,OAAA;KAFA,OAAK,eAAE,UAAA,KAAS;KAAG,OAAK,eAAA,EAAA,QAAY,MAAA,MAAA,EAAM,EAAA,CAAA;QAC9C,mBAAoC,OAAA,EAA9B,OAAK,eAAE,MAAA,GAAA,EAAI,EAAC,QAAA,CAAA,EAAA,GAAA,MAAA,CAAA,CAAA,GAAA,CAAA,CAAA,CAAA"}

package/dist/components/loading/style2.css

@@ -20,7 +20,7 @@
   width: 100%;
   height: 100%;
   background-color: var(--u-bg-color-top-alpha);
-  color: var(--u-text-color-main);
+  color: var(--u-color-primary);
   display: flex;
   justify-content: center;
   align-items: center;
@@ -29,77 +29,85 @@
 .u-loading__container {
   position: relative;
 }
-.u-loading__spinner .u-loading__loader {
-  width: 42px;
+.u-loading__dual-ring .u-loading__loader {
+  width: 36px;
   aspect-ratio: 1;
   border-radius: 50%;
-  background: conic-gradient(from 0deg, transparent 25%, currentColor 70%, transparent 100%);
-  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 0);
-  animation: loading-spin 0.85s linear infinite;
+  border: 3px solid color-mix(in srgb, currentColor 22%, transparent);
+  border-top-color: currentColor;
+  position: relative;
+  animation: loading-spin 0.8s linear infinite;
+}
+.u-loading__dual-ring .u-loading__loader::after {
+  content: "";
+  position: absolute;
+  inset: 5px;
+  border-radius: 50%;
+  border: 2px solid color-mix(in srgb, currentColor 22%, transparent);
+  border-bottom-color: currentColor;
+  animation: loading-spin 1.2s linear infinite reverse;
 }
 .u-loading__dot .u-loading__loader {
-  width: 10px;
-  height: 10px;
+  width: 9px;
+  height: 9px;
   border-radius: 50%;
   background: currentColor;
   position: relative;
-  animation: loading-dot 1.4s ease-in-out infinite;
+  animation: loading-dot 1.2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
 }
 .u-loading__dot .u-loading__loader::before, .u-loading__dot .u-loading__loader::after {
   content: "";
   position: absolute;
   top: 0;
-  width: 10px;
-  height: 10px;
+  width: 9px;
+  height: 9px;
   border-radius: 50%;
   background: currentColor;
 }
 .u-loading__dot .u-loading__loader::before {
-  left: -20px;
-  animation: loading-dot 1.4s ease-in-out infinite;
-  animation-delay: 0.2s;
+  left: -16px;
+  animation: loading-dot 1.2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
+  animation-delay: 0.18s;
 }
 .u-loading__dot .u-loading__loader::after {
-  right: -20px;
-  animation: loading-dot 1.4s ease-in-out infinite;
-  animation-delay: 0.4s;
-}
-.u-loading__line .u-loading__loader {
-  width: 160px;
-  height: 3px;
-  border-radius: 1.5px;
-  background: var(--u-bg-color-hover);
-  overflow: hidden;
-  position: relative;
-}
-.u-loading__line .u-loading__loader::after {
-  content: "";
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(90deg, transparent 0%, currentColor 40%, currentColor 60%, transparent 100%);
-  animation: loading-shimmer 1.4s ease-in-out infinite;
+  right: -16px;
+  animation: loading-dot 1.2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
+  animation-delay: 0.36s;
 }
-.u-loading__classic .u-loading__loader {
-  width: 44px;
+.u-loading__ring .u-loading__loader {
+  width: 36px;
   aspect-ratio: 1;
+  border-radius: 50%;
+  border: 3px solid color-mix(in srgb, currentColor 22%, transparent);
+  border-top-color: currentColor;
+  animation: loading-spin 0.9s linear infinite;
+}
+.u-loading__bars .u-loading__loader {
+  width: 6px;
+  height: 26px;
+  background: currentColor;
+  border-radius: 3px;
   position: relative;
+  animation: loading-bars 1s ease-in-out infinite;
+  animation-delay: 0.15s;
 }
-.u-loading__classic .u-loading__loader::before, .u-loading__classic .u-loading__loader::after {
+.u-loading__bars .u-loading__loader::before, .u-loading__bars .u-loading__loader::after {
   content: "";
   position: absolute;
-  inset: 0;
-  border-radius: 50%;
-  border: 3px solid currentColor;
-  animation: loading-pulse 1.6s ease-out infinite;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 6px;
+  height: 26px;
+  background: currentColor;
+  border-radius: 3px;
+  animation: loading-bars 1s ease-in-out infinite;
 }
-.u-loading__classic .u-loading__loader::after {
-  animation-delay: 0.8s;
+.u-loading__bars .u-loading__loader::before {
+  left: -12px;
 }
-.u-loading__morph .u-loading__loader {
-  width: 34px;
-  aspect-ratio: 1;
-  background: currentColor;
-  animation: loading-morph 2.4s ease-in-out infinite;
+.u-loading__bars .u-loading__loader::after {
+  right: -12px;
+  animation-delay: 0.3s;
 }
 
 @keyframes loading-spin {
@@ -108,48 +116,20 @@
   }
 }
 @keyframes loading-dot {
-  0%, 80%, 100% {
-    transform: scale(0.4);
-    opacity: 0.25;
+  0%, 100% {
+    transform: scale(0.5);
+    opacity: 0.3;
   }
-  40% {
+  50% {
     transform: scale(1);
     opacity: 1;
   }
 }
-@keyframes loading-shimmer {
-  0% {
-    transform: translateX(-100%);
-  }
-  100% {
-    transform: translateX(100%);
-  }
-}
-@keyframes loading-pulse {
-  0% {
-    transform: scale(0.2);
-    opacity: 1;
-  }
-  100% {
-    transform: scale(1.35);
-    opacity: 0;
-  }
-}
-@keyframes loading-morph {
+@keyframes loading-bars {
   0%, 100% {
-    border-radius: 50%;
-    transform: rotate(0deg) scale(1);
-  }
-  25% {
-    border-radius: 8px;
-    transform: rotate(45deg) scale(0.7);
+    height: 10px;
   }
   50% {
-    border-radius: 2px;
-    transform: rotate(90deg) scale(1);
-  }
-  75% {
-    border-radius: 8px;
-    transform: rotate(135deg) scale(0.7);
+    height: 26px;
   }
 }

package/dist/components/multi-tree-select/multi-tree-select.vue.d.ts

@@ -21,9 +21,9 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
   onClear?: (() => any) | undefined;
   onChange?: ((checked: Record<string, any>[]) => any) | undefined;
 }>, {
-  expandAll: boolean;
   labelKey: string;
   valueKey: string;
+  expandAll: boolean;
   placeholder: string;
   clearable: boolean;
   filterable: boolean;

package/dist/components/number/number.vue.d.ts

@@ -1,8 +1,8 @@
 import { NumberProps } from "../../types/number.js";
 //#region src/components/number/number.vue.d.ts
 declare const __VLS_export: import("vue").DefineComponent<NumberProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NumberProps> & Readonly<{}>, {
-  duration: number;
   format: "currency" | "percent" | "decimal";
+  duration: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 //#endregion

package/dist/components/progress-nodes/progress-nodes.vue.d.ts

@@ -19,9 +19,9 @@ declare const __VLS_base: import("vue").DefineComponent<ProgressNodesProps, {},
   "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
   onClick?: ((node: Record<string, any>, index: number) => any) | undefined;
 }>, {
+  colorType: import("@veltra/utils").ColorType;
   labelKey: string;
   valueKey: string;
-  colorType: import("@veltra/utils").ColorType;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/scroll/scroll.vue.d.ts

@@ -5,11 +5,11 @@ type __VLS_Slots = {
   content(): any;
 };
 declare const __VLS_base: import("vue").DefineComponent<ScrollProps, _ScrollExposed, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-  scroll: (position: Required<ScrollPosition>) => any;
   resize: (targets: HTMLElement[]) => any;
+  scroll: (position: Required<ScrollPosition>) => any;
 }, string, import("vue").PublicProps, Readonly<ScrollProps> & Readonly<{
-  onScroll?: ((position: Required<ScrollPosition>) => any) | undefined;
   onResize?: ((targets: HTMLElement[]) => any) | undefined;
+  onScroll?: ((position: Required<ScrollPosition>) => any) | undefined;
 }>, {
   tag: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/components/tabs/tabs-horizontal.vue.d.ts

@@ -15,12 +15,12 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
   "update:modelValue": (value: string | undefined) => any;
 } & {
   "update:modelValue": (value: string) => any;
-  close: (item: TabItem, index: number) => any;
   click: (item: TabItem, index: number) => any;
+  close: (item: TabItem, index: number) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
   "onUpdate:modelValue"?: ((value: string) => any) | undefined;
-  onClose?: ((item: TabItem, index: number) => any) | undefined;
   onClick?: ((item: TabItem, index: number) => any) | undefined;
+  onClose?: ((item: TabItem, index: number) => any) | undefined;
 }>, {
   closable: boolean;
   position: "top" | "bottom";

package/dist/components/tabs/tabs-vertical.vue.d.ts

@@ -15,12 +15,12 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
   "update:modelValue": (value: string | undefined) => any;
 } & {
   "update:modelValue": (value: string) => any;
-  close: (item: TabItem, index: number) => any;
   click: (item: TabItem, index: number) => any;
+  close: (item: TabItem, index: number) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
   "onUpdate:modelValue"?: ((value: string) => any) | undefined;
-  onClose?: ((item: TabItem, index: number) => any) | undefined;
   onClick?: ((item: TabItem, index: number) => any) | undefined;
+  onClose?: ((item: TabItem, index: number) => any) | undefined;
 }>, {
   closable: boolean;
   position: "left" | "right";

package/dist/components/tabs/tabs.vue.d.ts

@@ -10,12 +10,12 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
   "update:modelValue": (value: string | undefined) => any;
 } & {
   "update:modelValue": (value: string) => any;
-  close: (item: TabItem, index: number) => any;
   click: (item: TabItem, index: number) => any;
+  close: (item: TabItem, index: number) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
   "onUpdate:modelValue"?: ((value: string) => any) | undefined;
-  onClose?: ((item: TabItem, index: number) => any) | undefined;
   onClick?: ((item: TabItem, index: number) => any) | undefined;
+  onClose?: ((item: TabItem, index: number) => any) | undefined;
 }>, {
   closable: boolean;
   position: "left" | "right" | "top" | "bottom";

package/dist/components/tree/tree.vue.d.ts

@@ -19,9 +19,9 @@ declare const __VLS_base: import("vue").DefineComponent<TreeProps, _TreeExposed,
   "onNode-contextmenu"?: ((event: MouseEvent, node: TreeNode<Record<string, any>>) => any) | undefined;
   "onSelected-synced"?: ((selected?: Record<string, any> | undefined) => any) | undefined;
 }>, {
-  expandOnClickNode: boolean;
   labelKey: string;
   valueKey: string;
+  expandOnClickNode: boolean;
   childrenKey: string;
   data: Record<string, any>[];
   checkStrictly: boolean;

package/dist/components/tree-select/tree-select.vue.d.ts

@@ -23,9 +23,9 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
   onChange?: ((value?: string | number | undefined, selectedData?: Record<string, any> | undefined) => any) | undefined;
   "onUpdate:text"?: ((text?: string | undefined) => any) | undefined;
 }>, {
-  expandAll: boolean;
   labelKey: string;
   valueKey: string;
+  expandAll: boolean;
   placeholder: string;
   clearable: boolean;
   filterable: boolean;

package/dist/types/dual-nav.d.ts

@@ -2,7 +2,7 @@ import { NavItem } from "./nav.js";
 import { DeconstructValue } from "@veltra/utils";
 
 //#region src/types/dual-nav.d.ts
-/** 双栏导航根级应用项；`description` 仅在此层级生效，且仅在双栏导航右栏展示 */
+/** 双栏导航根级应用项；`description` 在左轨 tooltip 与右栏顶部展示 */
 interface DualNavRootItem extends NavItem {
   /** 子导航 */
   children?: NavItem[];

package/dist/types/loading.d.ts

@@ -1,7 +1,7 @@
 import { DeconstructValue } from "@veltra/utils";
 
 //#region src/types/loading.d.ts
-type LoadingType = 'classic' | 'line' | 'dot' | 'spinner' | 'morph';
+type LoadingType = 'dual-ring' | 'dot' | 'ring' | 'bars';
 /** loading组件属性 */
 interface LoadingProps {
   /** 加载类型 */

package/dist/types/nav.d.ts

@@ -11,7 +11,7 @@ interface NavItem {
   /** 导航路径 */
   path: string;
   /**
-   * 应用描述；仅根级导航项有效，且仅 UDualNav 右栏顶部展示
+   * 应用描述；仅根级导航项有效，在 UDualNav 左轨 tooltip 与右栏顶部展示
    * @see DualNavRootItem
    */
   description?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veltra/desktop",
-  "version": "1.2.5",
+  "version": "1.2.7",
   "files": [
     "dist",
     "src"
@@ -68,11 +68,11 @@
     "@cat-kit/core": ">=1.1.6",
     "@cat-kit/excel": ">=1.0.0",
     "@cat-kit/fe": "^1.1.6",
-    "@veltra/compositions": "1.2.5",
-    "@veltra/directives": "1.2.5",
-    "@veltra/icons": "1.2.5",
-    "@veltra/styles": "1.2.5",
-    "@veltra/utils": "1.2.5",
+    "@veltra/compositions": "1.2.7",
+    "@veltra/directives": "1.2.7",
+    "@veltra/icons": "1.2.7",
+    "@veltra/styles": "1.2.7",
+    "@veltra/utils": "1.2.7",
     "vue": ">=3.5.0"
   }
 }

package/src/components/dual-nav/dual-nav-app.vue

@@ -1,25 +1,39 @@
 <template>
-  <u-tip direction="right" hide-arrow>
+  <u-tip v-model:visible="tipVisible" direction="right" hide-arrow :disabled="tipSuppressed">
     <button
       type="button"
-      :class="[cls.e('app'), bem.is('active', active), bem.is('disabled', app.disabled ?? false)]"
+      v-ripple="!app.disabled"
+      :class="[
+        cls.e('app'),
+        bem.is('active', active),
+        bem.is('selected', selected),
+        bem.is('disabled', app.disabled ?? false)
+      ]"
       :disabled="app.disabled"
-      @click="emit('click')"
+      @click="handleClick"
+      @mouseleave="handleMouseleave"
     >
       <UNavIcon v-if="app.icon" :icon="app.icon" :class="cls.e('app-icon')" />
       <span v-else :class="cls.e('app-fallback')">{{ app.title[0] }}</span>
     </button>
 
     <template #content>
-      {{ app.title }}
+      <div :class="cls.e('app-tip')">
+        <div :class="cls.e('app-tip-title')">{{ app.title }}</div>
+        <p v-if="app.description" :class="cls.e('app-tip-description')">
+          {{ app.description }}
+        </p>
+      </div>
     </template>
   </u-tip>
 </template>
 
 <script setup lang="ts">
+import { vRipple } from '@veltra/directives'
 import { bem } from '@veltra/utils'
+import { shallowRef } from 'vue'
 
-import type { NavItem } from '../../types'
+import type { DualNavRootItem } from '../../types'
 import UNavIcon from '../nav/nav-icon.vue'
 import { UTip } from '../tip'
 
@@ -27,7 +41,21 @@ defineOptions({ name: 'DualNavApp' })
 
 const cls = bem('dual-nav')
 
-defineProps<{ app: NavItem; active: boolean }>()
+defineProps<{ app: DualNavRootItem; active: boolean; selected: boolean }>()
 
 const emit = defineEmits<{ click: [] }>()
+
+const tipVisible = shallowRef(false)
+/** 点击后暂时禁用 hover 弹出，移出触发区后恢复 */
+const tipSuppressed = shallowRef(false)
+
+function handleClick() {
+  tipSuppressed.value = true
+  tipVisible.value = false
+  emit('click')
+}
+
+function handleMouseleave() {
+  tipSuppressed.value = false
+}
 </script>

package/src/components/dual-nav/dual-nav.vue

@@ -6,11 +6,12 @@
         :key="app.path"
         :app="app"
         :active="isAppActive(app)"
+        :selected="isAppSelected(app)"
         @click="handleAppClick(app)"
       />
     </div>
 
-    <div :class="cls.e('divider')" aria-hidden="true" />
+    <!-- <div :class="cls.e('divider')" aria-hidden="true" /> -->
 
     <div :class="cls.e('panel')">
       <template v-if="panelApp">
@@ -67,7 +68,7 @@ import { UNav } from '../nav'
 import { collectNavBranchPaths } from '../nav/helper'
 import { UTip } from '../tip'
 import DualNavApp from './dual-nav-app.vue'
-import { findRootApp } from './helper'
+import { findFirstLeaf, findRootApp } from './helper'
 
 defineOptions({ name: 'DualNav' })
 
@@ -122,19 +123,22 @@ watch(panelAppPath, () => {
   allExpanded.value = false
 })
 
-/** 左轨高亮：仅当 currentPath 落在该应用下时激活 */
+/** 左轨高亮：currentPath 落在该应用下时为激活态 */
 function isAppActive(app: NavItem): boolean {
   return findRootApp(props.menus, props.currentPath)?.path === app.path
 }
 
+/** 左轨选中：已切换右栏但尚未导航到该应用下任一菜单时，使用 hover 风格 */
+function isAppSelected(app: NavItem): boolean {
+  return panelAppPath.value === app.path && !isAppActive(app)
+}
+
 function handleAppClick(app: NavItem) {
   if (app.disabled) return
 
   panelAppPath.value = app.path
 
-  if (!app.children?.length) {
-    emit('item-click', app)
-  }
+  emit('item-click', findFirstLeaf(app))
 }
 
 function handleToggleExpandAll() {

package/src/components/dual-nav/helper.ts

@@ -1,4 +1,4 @@
-import type { DualNavRootItem } from '../../types'
+import type { DualNavRootItem, NavItem } from '../../types'
 import { walkNavWithPath } from '../nav/walk-nav-path'
 
 /** 根据当前路径反查所属顶层应用 */
@@ -23,3 +23,9 @@ export function findRootApp(
 
   return undefined
 }
+
+/** 深度优先查找首个叶子节点（无子级或子级为空） */
+export function findFirstLeaf(node: NavItem): NavItem {
+  if (!node.children?.length) return node
+  return findFirstLeaf(node.children[0]!)
+}

package/src/components/dual-nav/style.scss

@@ -7,7 +7,6 @@
   height: 100%;
   min-height: 0;
   background-color: var(--u-nav-bg-color);
-  border: 1px solid fn.use-var(border, color);
   border-radius: calc(fn.use-var(radius, large) + 6px);
   overflow: hidden;
 
@@ -43,7 +42,6 @@
     justify-content: space-between;
     gap: 8px;
     padding: 12px 12px 10px;
-    border-bottom: 1px solid fn.use-var(border, color);
   }
 
   @include m.e(panel-header-main) {
@@ -127,9 +125,24 @@
       color: var(--u-nav-hover-color);
     }
 
+    @include m.is(selected) {
+      background-color: var(--u-nav-hover-bg);
+      color: var(--u-nav-hover-color);
+
+      &:hover:not(:disabled) {
+        background-color: var(--u-nav-hover-bg);
+        color: var(--u-nav-hover-color);
+      }
+    }
+
     @include m.is(active) {
       background-color: var(--u-nav-active-bg);
       color: var(--u-nav-active-color);
+
+      &:hover:not(:disabled) {
+        background-color: var(--u-nav-active-bg);
+        color: var(--u-nav-active-color);
+      }
     }
 
     @include m.is(disabled) {
@@ -150,4 +163,24 @@
     font-weight: 600;
     line-height: 1;
   }
+
+  @include m.e(app-tip) {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    max-width: 200px;
+  }
+
+  @include m.e(app-tip-title) {
+    font-weight: 600;
+    line-height: 1.4;
+    color: fn.use-var(text-color, title);
+  }
+
+  @include m.e(app-tip-description) {
+    margin: 0;
+    font-size: fn.use-var(font-size-assist, default);
+    line-height: 1.5;
+    color: fn.use-var(text-color, second);
+  }
 }

package/src/components/dual-nav/style.ts

@@ -1,3 +1,4 @@
+import '@veltra/directives/ripple/style.js'
 import '../icon/style'
 import '../nav/style'
 import '../tip/style'

package/src/components/loading/loading.vue

@@ -15,7 +15,7 @@ import type { LoadingProps, ComponentSize } from '../../types'
 
 defineOptions({ name: 'Loading' })
 
-const props = withDefaults(defineProps<LoadingProps>(), { type: 'spinner' })
+const props = withDefaults(defineProps<LoadingProps>(), { type: 'dual-ring' })
 
 const { size } = useFallbackProps([props], { size: 'default' as ComponentSize })
 

package/src/components/loading/style.scss

@@ -9,7 +9,7 @@ $root-name: loading;
   width: 100%;
   height: 100%;
   background-color: fn.use-var(bg-color, top, alpha);
-  color: fn.use-var(text-color, main);
+  color: fn.use-var(color, primary);
   @include m.flex($justify: center, $align: center);
 
   @include m.e(container) {
@@ -17,123 +17,118 @@ $root-name: loading;
   }
 
   // ============================================================
-  // spinner — 渐变圆弧旋转
-  // 使用 conic-gradient + mask 实现缺口圆环旋转
+  // dual-ring — 双环反向旋转（经典 loader）
+  // 外环顺时针，内嵌小环逆时针，border + linear 旋转无缝循环
   // ============================================================
-  @include m.e(spinner) {
+  @include m.e(dual-ring) {
     @include m.bem($root-name, loader) {
-      width: 42px;
+      width: 36px;
       aspect-ratio: 1;
       border-radius: 50%;
-      background: conic-gradient(from 0deg, transparent 25%, currentColor 70%, transparent 100%);
-      mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 0);
-      animation: loading-spin 0.85s linear infinite;
+      border: 3px solid color-mix(in srgb, currentColor 22%, transparent);
+      border-top-color: currentColor;
+      position: relative;
+      animation: loading-spin 0.8s linear infinite;
+
+      &::after {
+        content: '';
+        position: absolute;
+        inset: 5px;
+        border-radius: 50%;
+        border: 2px solid color-mix(in srgb, currentColor 22%, transparent);
+        border-bottom-color: currentColor;
+        animation: loading-spin 1.2s linear infinite reverse;
+      }
     }
   }
 
   // ============================================================
-  // dot — 三点波浪弹跳
-  // 元素自身 + 两个伪元素，交错弹跳
+  // dot — 三点呼吸弹跳
+  // 元素自身 + 两个伪元素，交错起伏
   // ============================================================
   @include m.e(dot) {
     @include m.bem($root-name, loader) {
-      width: 10px;
-      height: 10px;
+      width: 9px;
+      height: 9px;
       border-radius: 50%;
       background: currentColor;
       position: relative;
-      animation: loading-dot 1.4s ease-in-out infinite;
+      animation: loading-dot 1.2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
 
       &::before,
       &::after {
         content: '';
         position: absolute;
         top: 0;
-        width: 10px;
-        height: 10px;
+        width: 9px;
+        height: 9px;
         border-radius: 50%;
         background: currentColor;
       }
 
       &::before {
-        left: -20px;
-        animation: loading-dot 1.4s ease-in-out infinite;
-        animation-delay: 0.2s;
+        left: -16px;
+        animation: loading-dot 1.2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
+        animation-delay: 0.18s;
       }
 
       &::after {
-        right: -20px;
-        animation: loading-dot 1.4s ease-in-out infinite;
-        animation-delay: 0.4s;
+        right: -16px;
+        animation: loading-dot 1.2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
+        animation-delay: 0.36s;
       }
     }
   }
 
   // ============================================================
-  // line — 流光扫过
-  // 半透明底轨 + 渐变光条水平扫过
+  // ring — 单环旋转
   // ============================================================
-  @include m.e(line) {
+  @include m.e(ring) {
     @include m.bem($root-name, loader) {
-      width: 160px;
-      height: 3px;
-      border-radius: 1.5px;
-      background: fn.use-var(bg-color, hover);
-      overflow: hidden;
-      position: relative;
-
-      &::after {
-        content: '';
-        position: absolute;
-        inset: 0;
-        background: linear-gradient(
-          90deg,
-          transparent 0%,
-          currentColor 40%,
-          currentColor 60%,
-          transparent 100%
-        );
-        animation: loading-shimmer 1.4s ease-in-out infinite;
-      }
+      width: 36px;
+      aspect-ratio: 1;
+      border-radius: 50%;
+      border: 3px solid color-mix(in srgb, currentColor 22%, transparent);
+      border-top-color: currentColor;
+      animation: loading-spin 0.9s linear infinite;
     }
   }
 
   // ============================================================
-  // classic — 雷达波纹扩散
-  // 两个同心圆环交替向外扩散并淡出
+  // bars — 三条音频跳动
+  // 三根竖条以容器中心为基准上下对称伸缩
   // ============================================================
-  @include m.e(classic) {
+  @include m.e(bars) {
     @include m.bem($root-name, loader) {
-      width: 44px;
-      aspect-ratio: 1;
+      width: 6px;
+      height: 26px;
+      background: currentColor;
+      border-radius: 3px;
       position: relative;
+      animation: loading-bars 1s ease-in-out infinite;
+      animation-delay: 0.15s;
 
       &::before,
       &::after {
         content: '';
         position: absolute;
-        inset: 0;
-        border-radius: 50%;
-        border: 3px solid currentColor;
-        animation: loading-pulse 1.6s ease-out infinite;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 6px;
+        height: 26px;
+        background: currentColor;
+        border-radius: 3px;
+        animation: loading-bars 1s ease-in-out infinite;
       }
 
-      &::after {
-        animation-delay: 0.8s;
+      &::before {
+        left: -12px;
       }
-    }
-  }
 
-  // ============================================================
-  // morph — 形态变换
-  // 方块 ⟷ 圆形 来回变换，配合旋转
-  // ============================================================
-  @include m.e(morph) {
-    @include m.bem($root-name, loader) {
-      width: 34px;
-      aspect-ratio: 1;
-      background: currentColor;
-      animation: loading-morph 2.4s ease-in-out infinite;
+      &::after {
+        right: -12px;
+        animation-delay: 0.3s;
+      }
     }
   }
 }
@@ -150,53 +145,22 @@ $root-name: loading;
 
 @keyframes loading-dot {
   0%,
-  80%,
   100% {
-    transform: scale(0.4);
-    opacity: 0.25;
+    transform: scale(0.5);
+    opacity: 0.3;
   }
-  40% {
+  50% {
     transform: scale(1);
     opacity: 1;
   }
 }
 
-@keyframes loading-shimmer {
-  0% {
-    transform: translateX(-100%);
-  }
-  100% {
-    transform: translateX(100%);
-  }
-}
-
-@keyframes loading-pulse {
-  0% {
-    transform: scale(0.2);
-    opacity: 1;
-  }
-  100% {
-    transform: scale(1.35);
-    opacity: 0;
-  }
-}
-
-@keyframes loading-morph {
+@keyframes loading-bars {
   0%,
   100% {
-    border-radius: 50%;
-    transform: rotate(0deg) scale(1);
-  }
-  25% {
-    border-radius: 8px;
-    transform: rotate(45deg) scale(0.7);
+    height: 10px;
   }
   50% {
-    border-radius: 2px;
-    transform: rotate(90deg) scale(1);
-  }
-  75% {
-    border-radius: 8px;
-    transform: rotate(135deg) scale(0.7);
+    height: 26px;
   }
 }

package/src/types/dual-nav.ts

@@ -2,7 +2,7 @@ import type { DeconstructValue } from '@veltra/utils'
 
 import type { NavItem } from './nav'
 
-/** 双栏导航根级应用项；`description` 仅在此层级生效，且仅在双栏导航右栏展示 */
+/** 双栏导航根级应用项；`description` 在左轨 tooltip 与右栏顶部展示 */
 export interface DualNavRootItem extends NavItem {
   /** 子导航 */
   children?: NavItem[]

package/src/types/loading.ts

@@ -1,6 +1,6 @@
 import type { DeconstructValue } from '@veltra/utils'
 
-export type LoadingType = 'classic' | 'line' | 'dot' | 'spinner' | 'morph'
+export type LoadingType = 'dual-ring' | 'dot' | 'ring' | 'bars'
 
 /** loading组件属性 */
 export interface LoadingProps {

package/src/types/nav.ts

@@ -10,7 +10,7 @@ export interface NavItem {
   /** 导航路径 */
   path: string
   /**
-   * 应用描述；仅根级导航项有效，且仅 UDualNav 右栏顶部展示
+   * 应用描述；仅根级导航项有效，在 UDualNav 左轨 tooltip 与右栏顶部展示
    * @see DualNavRootItem
    */
   description?: string