@oiij/naive-ui 0.0.74 → 0.0.76

package/dist/composables/use-naive-menu.d.ts

@@ -0,0 +1,103 @@
+import * as vue5 from "vue";
+import { MaybeRefOrGetter, VNodeChild } from "vue";
+import { MenuOption } from "naive-ui";
+import { RouteRecordRaw } from "vue-router";
+
+//#region src/composables/use-naive-menu.d.ts
+/**
+ * 配置选项接口
+ * 用于定义 useNaiveMenu 组合函数的配置参数
+ */
+type UseNaiveMenuOptions = {
+  /**
+   * 隐藏条件，可以是函数或字符串
+   * - 如果是函数，返回 true 时路由将不显示在菜单中
+   * - 如果是字符串，则从 route.meta 中获取对应属性的值
+   * @default 'hidden'
+   */
+  hidden?: ((route: RouteRecordRaw) => boolean | string) | string;
+  /**
+   * 根路由判断，可以是函数或字符串
+   * - 如果是函数，返回 true 时路由将作为顶级菜单
+   * - 如果是字符串，则从 route.meta 中获取对应属性的值
+   * @default 'root'
+   */
+  root?: ((route: RouteRecordRaw) => boolean | string) | string;
+  /**
+   * 标签字段名，从 route.meta 中获取对应属性的值作为菜单标签
+   * @default 'title'
+   */
+  labelField?: string;
+  /**
+   * 键字段名，从 route 中获取对应属性的值作为菜单键
+   * @default 'name'
+   */
+  keyField?: string;
+  /**
+   * 图标字段名，从 route.meta 中获取对应属性的值作为菜单图标
+   * @default 'icon'
+   */
+  iconField?: string;
+  /**
+   * 图标渲染函数，用于自定义图标渲染
+   */
+  renderIcon?: (icon: string) => VNodeChild;
+  /**
+   * 父路由元信息字段名
+   * @default 'parent'
+   */
+  parentField?: string;
+  /**
+   * 父路由文件路径
+   * @default ''
+   */
+  parentFilePath?: string;
+  /**
+   * 父路由元信息生成函数
+   */
+  parent?: (route: RouteRecordRaw) => Record<string, unknown>;
+  /**
+   * 自定义菜单选项创建函数
+   */
+  createMenuOption?: (route: RouteRecordRaw) => MenuOption;
+};
+/**
+ * 自动菜单组合函数
+ * 将路由配置转换为菜单配置，并提供扁平化的菜单选项
+ * @param routes 路由配置数组，可以是响应式或普通数组
+ * @param options 配置选项
+ * @returns 包含菜单选项和扁平化菜单选项的对象
+ *
+ * @example
+ * // 基本使用
+ * const { menuOptions, flattenedMenuOptions } = useNaiveMenu(routes)
+ *
+ * // 带配置选项（使用函数）
+ * const { menuOptions, flattenedMenuOptions } = useNaiveMenu(routes, {
+ *   hidden: (route) => route.meta?.hidden,
+ *   root: (route) => route.meta?.root,
+ *   labelField: 'title',
+ *   keyField: 'name',
+ *   iconField: 'icon',
+ *   renderIcon: (icon) => h('i', { class: icon })
+ * })
+ *
+ * // 带配置选项（使用字符串）
+ * const { menuOptions, flattenedMenuOptions } = useNaiveMenu(routes, {
+ *   hidden: 'hidden',
+ *   root: 'root',
+ *   labelField: 'title',
+ *   keyField: 'name',
+ *   iconField: 'icon'
+ * })
+ */
+declare function useNaiveMenu(routes: MaybeRefOrGetter<RouteRecordRaw[]>, options?: UseNaiveMenuOptions): {
+  menuOptions: vue5.ComputedRef<MenuOption[]>;
+  flattenedMenuOptions: vue5.ComputedRef<MenuOption[]>;
+};
+/**
+ * useNaiveMenu 返回类型
+ */
+type UseNaiveMenuReturn = ReturnType<typeof useNaiveMenu>;
+//#endregion
+export { UseNaiveMenuOptions, UseNaiveMenuReturn, useNaiveMenu };

package/dist/composables/use-naive-menu.js

@@ -0,0 +1,181 @@
+import { computed, toValue } from "vue";
+
+//#region src/composables/use-naive-menu.ts
+/**
+* 获取配置值
+* @param route 路由配置
+* @param config 配置项，可以是函数或字符串
+* @param returnType 返回类型，'meta' 从 meta 中获取，'route' 从路由本身获取
+* @param defaultValue 默认值
+* @returns 配置值或默认值
+*/
+function getConfigValue(route, config, returnType, defaultValue) {
+	if (!config) return defaultValue;
+	if (typeof config === "function") return config(route);
+	if (returnType === "meta") return route.meta?.[config] ?? defaultValue;
+	return route?.[config] ?? defaultValue;
+}
+/**
+* 创建单个菜单选项
+* @param route 路由配置
+* @param options 配置选项
+* @returns 菜单选项
+*/
+function createConfigMenuOption(route, options) {
+	const { labelField, keyField, iconField, renderIcon } = options ?? {};
+	const labelValue = getConfigValue(route, labelField, "meta");
+	const keyValue = getConfigValue(route, keyField, "route");
+	const iconValue = getConfigValue(route, iconField, "meta");
+	return {
+		label: labelValue ?? route.meta?.title ?? route.name ?? route.path,
+		key: keyValue ?? route.name?.toString() ?? route.path?.toString(),
+		icon: iconValue ? () => renderIcon?.(iconValue) : void 0,
+		meta: route.meta
+	};
+}
+/**
+* 判断路由是否应该隐藏
+* @param route 路由配置
+* @param hidden 隐藏条件
+* @returns 是否隐藏
+*/
+function shouldHide(route, hidden) {
+	if (!hidden) return false;
+	const result = getConfigValue(route, hidden, "meta");
+	return typeof result === "boolean" ? result : !!result;
+}
+/**
+* 判断路由是否为根路由
+* @param route 路由配置
+* @param root 根路由判断
+* @returns 是否为根路由
+*/
+function isRoot(route, root) {
+	if (!root) return false;
+	const result = getConfigValue(route, root, "meta");
+	return typeof result === "boolean" ? result : !!result;
+}
+/**
+* 将路由配置转换为菜单配置的递归函数
+* @param routes 路由配置数组
+* @param options 配置选项
+* @returns 菜单配置数组
+*/
+function routes2menu(routes, options) {
+	const { hidden, root, createMenuOption } = options ?? {};
+	const menuOptions = [];
+	for (const route of routes ?? []) {
+		if (shouldHide(route, hidden)) continue;
+		const menu = typeof createMenuOption === "function" ? createMenuOption(route) : createConfigMenuOption(route, options);
+		if (route.children?.length) {
+			const rootChildren = route.children.filter((child) => isRoot(child, root));
+			const normalChildren = route.children.filter((child) => !isRoot(child, root));
+			if (normalChildren.length) menu.children = routes2menu(normalChildren, options);
+			if (rootChildren.length) {
+				const rootMenuOptions = rootChildren.filter((child) => !shouldHide(child, hidden)).map((child) => typeof createMenuOption === "function" ? createMenuOption(child) : createConfigMenuOption(child, options));
+				menuOptions.push(...rootMenuOptions);
+			}
+		}
+		menuOptions.push(menu);
+	}
+	return menuOptions;
+}
+/**
+* 深度扁平化菜单选项
+* @param menuOptions 菜单选项数组
+* @returns 扁平化的菜单选项数组
+*/
+function flattenDeepMenuOptions(menuOptions) {
+	return menuOptions.reduce((flattened, menu) => {
+		flattened.push(menu);
+		if (menu.children?.length) flattened.push(...flattenDeepMenuOptions(menu.children));
+		return flattened;
+	}, []);
+}
+/**
+* 深度向上合并父路由元信息
+* @param routes 路由配置数组
+* @param parentField 父路由元信息字段名
+* @param parentFilePath 父路由文件路径
+* @param parent 父路由元信息生成函数
+* @returns 处理后的路由配置数组
+*/
+function deepUpRouteParentMeta(routes, parentField, parentFilePath, parent) {
+	return routes.map((route) => {
+		const emptyPathChild = route.children?.find((f) => f.path === parentFilePath);
+		if (emptyPathChild) {
+			if (typeof parent === "function") {
+				const parentMeta = parent(route);
+				route.meta = {
+					...route.meta,
+					...parentMeta
+				};
+			} else if (parentField) {
+				const parentMeta = emptyPathChild.meta?.[parentField];
+				route.meta = {
+					...route.meta,
+					...parentMeta
+				};
+			}
+		}
+		if (route.children?.length) route.children = deepUpRouteParentMeta(route.children, parentField, parentFilePath, parent);
+		return route;
+	});
+}
+/**
+* 自动菜单组合函数
+* 将路由配置转换为菜单配置，并提供扁平化的菜单选项
+* @param routes 路由配置数组，可以是响应式或普通数组
+* @param options 配置选项
+* @returns 包含菜单选项和扁平化菜单选项的对象
+*
+* @example
+* // 基本使用
+* const { menuOptions, flattenedMenuOptions } = useNaiveMenu(routes)
+*
+* // 带配置选项（使用函数）
+* const { menuOptions, flattenedMenuOptions } = useNaiveMenu(routes, {
+*   hidden: (route) => route.meta?.hidden,
+*   root: (route) => route.meta?.root,
+*   labelField: 'title',
+*   keyField: 'name',
+*   iconField: 'icon',
+*   renderIcon: (icon) => h('i', { class: icon })
+* })
+*
+* // 带配置选项（使用字符串）
+* const { menuOptions, flattenedMenuOptions } = useNaiveMenu(routes, {
+*   hidden: 'hidden',
+*   root: 'root',
+*   labelField: 'title',
+*   keyField: 'name',
+*   iconField: 'icon'
+* })
+*/
+function useNaiveMenu(routes, options) {
+	const { hidden = "hidden", root = "root", labelField = "title", keyField = "name", iconField = "icon", renderIcon, createMenuOption, parentField = "parent", parentFilePath = "", parent } = options ?? {};
+	/**
+	* 菜单选项
+	* 响应式计算属性，当路由或配置变化时自动更新
+	*/
+	const menuOptions = computed(() => {
+		return routes2menu(deepUpRouteParentMeta(toValue(routes), parentField, parentFilePath, parent), {
+			hidden,
+			root,
+			labelField,
+			keyField,
+			iconField,
+			renderIcon,
+			createMenuOption
+		});
+	});
+	return {
+		menuOptions,
+		flattenedMenuOptions: computed(() => {
+			return flattenDeepMenuOptions(menuOptions.value);
+		})
+	};
+}
+
+//#endregion
+export { useNaiveMenu };

package/dist/composables/use-naive-theme.d.ts

@@ -4,23 +4,37 @@ import { GlobalThemeOverrides, NDateLocale, zhCN } from "naive-ui";
 import * as naive_ui_es_themes_interface0 from "naive-ui/es/themes/interface";
 
 //#region src/composables/use-naive-theme.d.ts
+/**
+ * 语言包类型
+ * @template T 语言代码类型
+ */
 type Locales<T extends string = string> = Record<T, {
-  name: string;
-  dateLocale: NDateLocale;
+  /** 语言名称 */name: string; /** 日期本地化配置 */
+  dateLocale: NDateLocale; /** 语言包配置 */
   locale: typeof zhCN;
 }>;
+/**
+ * 主题配置选项
+ * @template T 语言代码类型
+ */
 type UseNaiveThemeOptions<T extends string> = {
-  language?: MaybeRefOrGetter<T>;
-  darkMode?: MaybeRefOrGetter<boolean>;
-  colors?: Colors;
-  globalThemeOverrides?: GlobalThemeOverrides;
-  locales?: Partial<Locales<T>>;
+  /** 语言代码，支持响应式引用或普通值 */language?: MaybeRefOrGetter<T>; /** 暗黑模式开关，支持响应式引用或普通值 */
+  darkMode?: MaybeRefOrGetter<boolean>; /** 主题颜色配置 */
+  colors?: Colors; /** 全局主题覆盖 */
+  globalThemeOverrides?: GlobalThemeOverrides; /** 自定义语言包 */
+  locales?: Partial<Locales<T>>; /** 暗黑模式颜色配置，支持对象或函数 */
   darkColors?: Colors | ((colors: Colors) => Colors);
 };
+/**
+ * 用于处理 Naive UI 主题的组合式 API
+ * @template T 语言代码类型
+ * @param options 配置选项
+ * @returns 主题管理对象
+ */
 declare function useNaiveTheme<T extends string>(options?: UseNaiveThemeOptions<T>): {
-  language: Ref<T | undefined, T | undefined>;
-  darkMode: Ref<boolean | undefined, boolean | undefined>;
-  theme: ComputedRef<naive_ui_es_themes_interface0.BuiltInGlobalTheme | undefined>;
+  /** 语言代码引用 */language: Ref<T | undefined, T | undefined>; /** 暗黑模式引用 */
+  darkMode: Ref<boolean | undefined, boolean | undefined>; /** 当前主题 */
+  theme: ComputedRef<naive_ui_es_themes_interface0.BuiltInGlobalTheme | undefined>; /** 颜色配置引用 */
   colors: Ref<{
     primary?: string | undefined;
     info?: string | undefined;
@@ -33,19 +47,22 @@ declare function useNaiveTheme<T extends string>(options?: UseNaiveThemeOptions<
     success?: string | undefined;
     warning?: string | undefined;
     error?: string | undefined;
-  }>;
+  }>; /** 计算后的主题颜色 */
   themeColors: ComputedRef<{
     primary?: string | undefined;
     info?: string | undefined;
     success?: string | undefined;
     warning?: string | undefined;
     error?: string | undefined;
-  }>;
-  themeOverrides: ComputedRef<GlobalThemeOverrides>;
-  locales: Locales<T>;
-  locale: ComputedRef<Locales<T>[T]>;
+  }>; /** 主题覆盖配置 */
+  themeOverrides: ComputedRef<GlobalThemeOverrides>; /** 合并后的语言包 */
+  locales: Locales<T>; /** 当前语言包 */
+  locale: ComputedRef<Locales<T>[T]>; /** 设置主题颜色 */
   setColor: (v: Partial<Colors>) => void;
 };
+/**
+ * useNaiveTheme 返回类型
+ */
 type UseNaiveThemeReturns = ReturnType<typeof useNaiveTheme>;
 //#endregion
 export { UseNaiveThemeOptions, UseNaiveThemeReturns, useNaiveTheme };

package/dist/composables/use-naive-theme.js

@@ -3,6 +3,9 @@ import { computed, ref, toValue, watchEffect } from "vue";
 import { darkTheme, dateEnUS, dateZhCN, enUS, zhCN } from "naive-ui";
 
 //#region src/composables/use-naive-theme.ts
+/**
+* 默认语言包映射
+*/
 const naiveLocaleMap = {
 	"zh-CN": {
 		name: "简体中文",
@@ -15,6 +18,12 @@ const naiveLocaleMap = {
 		locale: enUS
 	}
 };
+/**
+* 用于处理 Naive UI 主题的组合式 API
+* @template T 语言代码类型
+* @param options 配置选项
+* @returns 主题管理对象
+*/
 function useNaiveTheme(options) {
 	const { language, darkMode, colors, globalThemeOverrides, locales, darkColors } = options ?? {};
 	const languageRef = ref(toValue(language));
@@ -40,6 +49,10 @@ function useNaiveTheme(options) {
 		}
 		return colorsRef.value;
 	});
+	/**
+	* 设置主题颜色
+	* @param v 颜色配置
+	*/
 	function setColor(v) {
 		colorsRef.value = {
 			...colorsRef.value,

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 import { DataObject, DataRequestFields, UseDataRequestOptions, UseDataRequestPagination, UseDataRequestReturns, useDataRequest } from "./composables/use-data-request.js";
 import { useLoading } from "./composables/use-loading.js";
 import { UseNaiveFormClearRules, UseNaiveFormOptions, UseNaiveFormReturns, UseNaiveFormRules, useNaiveForm } from "./composables/use-naive-form.js";
+import { UseNaiveMenuOptions, UseNaiveMenuReturn, useNaiveMenu } from "./composables/use-naive-menu.js";
 import { UseNaiveThemeOptions, UseNaiveThemeReturns, useNaiveTheme } from "./composables/use-naive-theme.js";
 import "./composables/index.js";
-export { DataObject, DataRequestFields, UseDataRequestOptions, UseDataRequestPagination, UseDataRequestReturns, UseNaiveFormClearRules, UseNaiveFormOptions, UseNaiveFormReturns, UseNaiveFormRules, UseNaiveThemeOptions, UseNaiveThemeReturns, useDataRequest, useLoading, useNaiveForm, useNaiveTheme };
+export { DataObject, DataRequestFields, UseDataRequestOptions, UseDataRequestPagination, UseDataRequestReturns, UseNaiveFormClearRules, UseNaiveFormOptions, UseNaiveFormReturns, UseNaiveFormRules, UseNaiveMenuOptions, UseNaiveMenuReturn, UseNaiveThemeOptions, UseNaiveThemeReturns, useDataRequest, useLoading, useNaiveForm, useNaiveMenu, useNaiveTheme };

package/dist/index.js

@@ -1,6 +1,7 @@
 import { useDataRequest } from "./composables/use-data-request.js";
 import { useLoading } from "./composables/use-loading.js";
 import { useNaiveForm } from "./composables/use-naive-form.js";
+import { useNaiveMenu } from "./composables/use-naive-menu.js";
 import { useNaiveTheme } from "./composables/use-naive-theme.js";
 
-export { useDataRequest, useLoading, useNaiveForm, useNaiveTheme };
+export { useDataRequest, useLoading, useNaiveForm, useNaiveMenu, useNaiveTheme };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@oiij/naive-ui",
   "type": "module",
-  "version": "0.0.74",
+  "version": "0.0.76",
   "description": "Some Composable Functions And Components for Vue 3",
   "author": "oiij",
   "license": "MIT",
@@ -45,9 +45,10 @@
     "vue": "^3.5.27",
     "vue-component-type-helpers": "^3.2.4",
     "vue-hooks-plus": "^2.4.1",
+    "vue-router": "^5.0.2",
     "@oiij/css-render": "0.0.10",
     "@oiij/markdown-it": "0.0.12",
-    "@oiij/use": "0.0.43"
+    "@oiij/use": "0.0.44"
   },
   "devDependencies": {
     "@types/prismjs": "^1.26.5",
@@ -60,8 +61,9 @@
     "vue": "^3.5.27",
     "vue-component-type-helpers": "^3.2.4",
     "vue-hooks-plus": "^2.4.1",
+    "vue-router": "^5.0.2",
     "@oiij/css-render": "0.0.10",
-    "@oiij/use": "0.0.43",
+    "@oiij/use": "0.0.44",
     "@oiij/markdown-it": "0.0.12"
   },
   "publishConfig": {