@quiteer/naive-extra 0.0.1

package/dist/share/compact.d.ts

@@ -0,0 +1,16 @@
+/**
+ * 格式化像素值
+ *
+ * 将数字转换为带 px 单位的字符串，如果输入已带单位则保持不变。
+ *
+ * @param val - 数值或字符串
+ * @returns 格式化后的字符串或 undefined
+ */
+export declare function formatPx(val?: number | string): string | undefined;
+/**
+ * 移除对象中值为 undefined 或 null 的属性 (浅压缩)
+ *
+ * @param obj - 目标对象
+ * @returns 清理后的新对象
+ */
+export declare function compact<T extends object>(obj: T): Partial<T>;

package/dist/share/index.d.ts

@@ -0,0 +1,2 @@
+export * from './compact';
+export * from './slot';

package/dist/share/slot.d.ts

@@ -0,0 +1,6 @@
+import { Slot } from 'vue';
+/**
+ * 判断插槽是否有内容（忽略注释和空文本）
+ * @param slot - 插槽函数
+ */
+export declare function hasSlotContent(slot: Slot | undefined | null): boolean;

package/dist/utils/transformRoutes.d.ts

@@ -0,0 +1,67 @@
+import { ComputedRef } from 'vue';
+import { RouteRecordRaw } from 'vue-router';
+import { RouteMeta } from '../components/layout/types';
+export interface RouteNode {
+    path: string;
+    name?: string;
+    meta?: RouteMeta;
+    children?: RouteNode[];
+}
+/**
+ * 标准化路由并自动生成重定向
+ *
+ * 递归处理路由树，拼接父子路径，并为包含子路由但未定义重定向的父路由自动生成指向第一个子路由的重定向。
+ *
+ * @param raw - 原始路由配置数组
+ * @param parent - 父级路径，用于递归拼接完整路径
+ * @returns 标准化后的路由数组，包含完整路径和自动生成的 redirect
+ *
+ * @remarks
+ * - 会自动拼接父级路径，确保 path 为绝对路径
+ * - 如果父路由没有 redirect 且有子路由，会自动将 redirect 设置为第一个子路由（优先 index 或空路径）
+ */
+export declare function normalizeAndRedirect(raw: RouteRecordRaw[], parent?: string): RouteRecordRaw[];
+/**
+ * 将路由配置转换为简化的路由树结构
+ *
+ * 过滤掉 hideMenu 的路由，并提取用于菜单或导航展示的关键信息。
+ *
+ * @param raw - 原始路由配置数组
+ * @param parent - 父级路径
+ * @returns 简化后的路由节点树
+ */
+export declare function toRouteTree(raw: RouteRecordRaw[], parent?: string): RouteNode[];
+/**
+ * 对路由树进行排序
+ *
+ * 根据 meta.order (数字) 升序排序，若 order 相同则按 title 或路径名进行字母顺序排序。
+ *
+ * @param tree - 路由节点树
+ * @returns 排序后的新路由树
+ */
+export declare function sortRouteTree(tree: RouteNode[]): RouteNode[];
+/**
+ * 过滤路由树
+ *
+ * 移除在 excludePaths 列表中的路径及其子路径。
+ *
+ * @param tree - 路由节点树
+ * @param excludePaths - 需要排除的路径列表（支持 glob 风格匹配逻辑的简化版，即前缀匹配）
+ * @returns 过滤后的新路由树
+ */
+export declare function filterRouteTree(tree: RouteNode[], excludePaths?: string[]): RouteNode[];
+/**
+ * 从原始路由配置生成可用的路由树（Composition API 钩子）
+ *
+ * 组合了标准化、转换树形结构、排序和过滤等步骤，返回一个计算属性。
+ *
+ * @param raw - 原始路由配置数组
+ * @param option - 配置选项
+ * @param option.excludePaths - 需要排除的路径列表
+ * @returns 包含响应式路由树的对象
+ */
+export declare function useRoutesTreeFromRaw(raw: RouteRecordRaw[], option?: {
+    excludePaths?: string[];
+}): {
+    routesTree: ComputedRef<RouteNode[]>;
+};

package/dist/utils/tree.d.ts

@@ -0,0 +1,6 @@
+/**
+ * 递归遍历树结构，将节点的 children 字段为空数组时改为 null。
+ * @param arr 树节点数组
+ * @returns 处理后的新数组（不修改入参引用）
+ */
+export declare function convertEmptyChildrenToNull<T extends Record<string, any>>(arr: T[]): T[];

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@quiteer/naive-extra",
+  "type": "module",
+  "version": "0.0.1",
+  "description": "",
+  "author": "",
+  "license": "MIT",
+  "homepage": "https://quiteerjs.github.io/web/plugins/naive-extra/",
+  "keywords": [],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./index.css": "./dist/index.css"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "style": "dist/index.css",
+  "files": [
+    "dist/**/*",
+    "src/**/*"
+  ],
+  "dependencies": {
+    "@vueuse/core": "^14.1.0",
+    "defu": "^6.1.4",
+    "vue-draggable-plus": "^0.6.0",
+    "vue-router": "^4.6.3",
+    "@quiteer/is": "0.0.2",
+    "@quiteer/unocss": "0.0.6"
+  },
+  "devDependencies": {
+    "csstype": "^3.2.3",
+    "lodash-es": "^4.17.21",
+    "naive-ui": "2.43.1",
+    "sass": "^1.94.0",
+    "vite": "npm:rolldown-vite@7.2.2",
+    "vite-plugin-dts": "^4.5.4",
+    "vue": "^3.5.24",
+    "@quiteer/vite-plugins": "^0.1.4",
+    "@quiteer/unocss": "0.0.6"
+  },
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite build -w",
+    "release": "qui r --tag-prefix naive-extra && tsdown && pnpm publish --access public"
+  }
+}

package/src/auto-imports.d.ts

@@ -0,0 +1,73 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// Generated by unplugin-auto-import
+// biome-ignore lint: disable
+export {}
+declare global {
+  const EffectScope: typeof import('vue').EffectScope
+  const computed: typeof import('vue').computed
+  const createApp: typeof import('vue').createApp
+  const customRef: typeof import('vue').customRef
+  const defineAsyncComponent: typeof import('vue').defineAsyncComponent
+  const defineComponent: typeof import('vue').defineComponent
+  const effectScope: typeof import('vue').effectScope
+  const getCurrentInstance: typeof import('vue').getCurrentInstance
+  const getCurrentScope: typeof import('vue').getCurrentScope
+  const getCurrentWatcher: typeof import('vue').getCurrentWatcher
+  const h: typeof import('vue').h
+  const inject: typeof import('vue').inject
+  const isProxy: typeof import('vue').isProxy
+  const isReactive: typeof import('vue').isReactive
+  const isReadonly: typeof import('vue').isReadonly
+  const isRef: typeof import('vue').isRef
+  const isShallow: typeof import('vue').isShallow
+  const markRaw: typeof import('vue').markRaw
+  const nextTick: typeof import('vue').nextTick
+  const onActivated: typeof import('vue').onActivated
+  const onBeforeMount: typeof import('vue').onBeforeMount
+  const onBeforeUnmount: typeof import('vue').onBeforeUnmount
+  const onBeforeUpdate: typeof import('vue').onBeforeUpdate
+  const onDeactivated: typeof import('vue').onDeactivated
+  const onErrorCaptured: typeof import('vue').onErrorCaptured
+  const onMounted: typeof import('vue').onMounted
+  const onRenderTracked: typeof import('vue').onRenderTracked
+  const onRenderTriggered: typeof import('vue').onRenderTriggered
+  const onScopeDispose: typeof import('vue').onScopeDispose
+  const onServerPrefetch: typeof import('vue').onServerPrefetch
+  const onUnmounted: typeof import('vue').onUnmounted
+  const onUpdated: typeof import('vue').onUpdated
+  const onWatcherCleanup: typeof import('vue').onWatcherCleanup
+  const provide: typeof import('vue').provide
+  const reactive: typeof import('vue').reactive
+  const readonly: typeof import('vue').readonly
+  const ref: typeof import('vue').ref
+  const resolveComponent: typeof import('vue').resolveComponent
+  const shallowReactive: typeof import('vue').shallowReactive
+  const shallowReadonly: typeof import('vue').shallowReadonly
+  const shallowRef: typeof import('vue').shallowRef
+  const toRaw: typeof import('vue').toRaw
+  const toRef: typeof import('vue').toRef
+  const toRefs: typeof import('vue').toRefs
+  const toValue: typeof import('vue').toValue
+  const triggerRef: typeof import('vue').triggerRef
+  const unref: typeof import('vue').unref
+  const useAttrs: typeof import('vue').useAttrs
+  const useCssModule: typeof import('vue').useCssModule
+  const useCssVars: typeof import('vue').useCssVars
+  const useId: typeof import('vue').useId
+  const useModel: typeof import('vue').useModel
+  const useSlots: typeof import('vue').useSlots
+  const useTemplateRef: typeof import('vue').useTemplateRef
+  const watch: typeof import('vue').watch
+  const watchEffect: typeof import('vue').watchEffect
+  const watchPostEffect: typeof import('vue').watchPostEffect
+  const watchSyncEffect: typeof import('vue').watchSyncEffect
+}
+// for type re-export
+declare global {
+  // @ts-ignore
+  export type { Component, Slot, Slots, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, ShallowRef, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
+  import('vue')
+}

package/src/components/button/action/index.ts

@@ -0,0 +1,4 @@
+import QuiActionButton from './index.vue'
+
+export * from './props'
+export { QuiActionButton }

package/src/components/button/action/index.vue

@@ -0,0 +1,313 @@
+<script setup lang="ts">
+import type { DropdownOption } from 'naive-ui'
+import type { StyleValue } from 'vue'
+import type { ActionButtonProps, ActionItem } from './props'
+import { useElementSize, useResizeObserver } from '@vueuse/core'
+import { QuiIcon } from '../../icon'
+import QuiBaseButton from '../base/index.vue'
+import {
+  resolveButtonProps as _resolveButtonProps,
+  resolveMoreButtonProps as _resolveMoreButtonProps,
+  getIcon,
+  isDisabled
+} from './utils'
+
+const props = withDefaults(defineProps<ActionButtonProps>(), {
+  actions: () => [],
+  mode: 'button',
+  max: 3,
+  // buttonProps 默认值留空，由内部逻辑根据 mode 计算
+  buttonProps: undefined,
+  size: undefined,
+  showDivider: false
+})
+
+const resolveButtonProps = (item: ActionItem) => _resolveButtonProps(item, props.mode, { ...props.buttonProps, size: props.size })
+const resolveMoreButtonProps = () => _resolveMoreButtonProps(props.mode, { ...props.buttonProps, size: props.size })
+
+// 判断是否显示
+function isShow(item: ActionItem) {
+  if (item.show === undefined)
+    return true
+  if (typeof item.show === 'function')
+    return item.show()
+  return unref(item.show)
+}
+
+// 过滤出可见的操作
+const visibleActions = computed(() => {
+  return props.actions.filter(isShow)
+})
+
+// 响应式显示逻辑
+const containerRef = ref<any>()
+const shadowRef = ref<any>()
+const autoMax = ref(props.max)
+
+const containerEl = computed(() => containerRef.value?.$el || containerRef.value)
+const { width: containerWidth } = useElementSize(containerEl)
+
+const limit = computed(() => props.responsive ? autoMax.value : props.max)
+
+// 分割显示和折叠的操作
+const displayActions = computed(() => {
+  return visibleActions.value.slice(0, limit.value)
+})
+
+const collapsedActions = computed(() => {
+  return visibleActions.value.slice(limit.value)
+})
+
+// 计算自动折叠数量
+function updateAutoMax() {
+  const el = containerEl.value
+  if (!el)
+    return
+
+  const width = containerWidth.value
+  if (!width)
+    return
+
+  // 获取间距 (NFlex size="small" 默认为 8px gap)
+  const style = getComputedStyle(el)
+  // 优先使用 column-gap，回退到 gap
+  const gap = Number.parseFloat(style.columnGap || style.gap) || 8
+  const paddingLeft = Number.parseFloat(style.paddingLeft) || 0
+  const paddingRight = Number.parseFloat(style.paddingRight) || 0
+
+  // 可用宽度需要减去内边距
+  const availableWidth = width - paddingLeft - paddingRight
+
+  // 获取所有按钮和元素的宽度
+  if (!shadowRef.value)
+    return
+  const children = Array.from(shadowRef.value.children) as HTMLElement[]
+  // shadowRef 结构: [Btn1, Btn2, ..., MoreBtn, Divider]
+  // 最后一个是 Divider, 倒数第二个是 MoreBtn
+  const dividerEl = children[children.length - 1]
+  const moreBtnEl = children[children.length - 2]
+  const actionBtns = children.slice(0, -2)
+
+  const getWidth = (el: HTMLElement | undefined) => el?.getBoundingClientRect().width || 0
+
+  const dividerWidth = getWidth(dividerEl)
+  const moreBtnWidth = getWidth(moreBtnEl)
+
+  // 1. 尝试放入所有按钮
+  // 宽度计算:
+  // 无分割线: Btn + Gap + Btn + Gap ...
+  // 有分割线: Btn + Gap + Divider + Gap + Btn ...
+
+  const calculateWidth = (btnCount: number, hasMore: boolean) => {
+    if (btnCount === 0)
+      return hasMore ? moreBtnWidth : 0
+
+    let width = 0
+    // 累加按钮宽度
+    for (let i = 0; i < btnCount; i++) {
+      width += getWidth(actionBtns[i])
+    }
+
+    // 累加按钮之间的间距和分割线
+    const intervalCount = btnCount - 1
+    if (intervalCount > 0) {
+      if (props.showDivider) {
+        width += intervalCount * (gap * 2 + dividerWidth)
+      }
+      else {
+        width += intervalCount * gap
+      }
+    }
+
+    // 如果有 More 按钮
+    if (hasMore) {
+      // 连接处
+      // Btn (Gap [Divider Gap]) More
+      if (props.showDivider) {
+        width += gap * 2 + dividerWidth
+      }
+      else {
+        width += gap
+      }
+      width += moreBtnWidth
+    }
+
+    return width
+  }
+
+  // 检查是否所有都能放下 (无 More)
+  const allWidth = calculateWidth(actionBtns.length, false)
+  // 留出 1px 缓冲，避免子像素精度问题
+  if (allWidth <= availableWidth - 1) {
+    autoMax.value = actionBtns.length
+    return
+  }
+
+  // 尝试找到最大能放下的数量 (带 More)
+  // 从 actionBtns.length - 1 开始递减
+  for (let i = actionBtns.length - 1; i >= 0; i--) {
+    const w = calculateWidth(i, true)
+    if (w <= availableWidth - 1) {
+      autoMax.value = i
+      return
+    }
+  }
+
+  // 最坏情况显示 0 个 (只显示 More)
+  autoMax.value = 0
+}
+
+useResizeObserver(shadowRef, () => {
+  if (props.responsive) {
+    updateAutoMax()
+  }
+})
+
+watch([containerWidth, () => props.actions, () => props.showDivider, () => props.responsive], () => {
+  if (props.responsive) {
+    // 使用 requestAnimationFrame 避免在一次渲染周期内多次计算
+    requestAnimationFrame(() => updateAutoMax())
+  }
+})
+
+const shadowStyle: StyleValue = {
+  display: 'flex',
+  gap: '8px',
+  position: 'absolute',
+  visibility: 'hidden',
+  pointerEvents: 'none',
+  top: 0,
+  left: 0,
+  zIndex: -1,
+  width: 'max-content'
+}
+
+onMounted(() => {
+  if (props.responsive) {
+    updateAutoMax()
+    // 初始延迟再次计算，确保字体加载等
+    setTimeout(updateAutoMax, 100)
+  }
+})
+
+function handleClick(item: ActionItem) {
+  item.onClick?.(item.key, item)
+}
+
+function handlePopconfirmPositiveClick(item: ActionItem) {
+  if (item.onPositiveClick) {
+    item.onPositiveClick(item.key, item)
+    return
+  }
+
+  // 兼容 popconfirm 对象中的 onPositiveClick
+  if (typeof item.popconfirm === 'object' && item.popconfirm !== null && 'onPositiveClick' in item.popconfirm) {
+    (item.popconfirm as any).onPositiveClick(item.key, item)
+    return
+  }
+
+  item.onClick?.(item.key, item)
+}
+
+// 下拉菜单选项
+const dropdownOptions = computed<DropdownOption[]>(() => {
+  return collapsedActions.value.map(item => ({
+    key: item.key,
+    label: item.label,
+    icon: () => {
+      const icon = getIcon(item)
+      return icon ? h(QuiIcon, { icon }) : undefined
+    },
+    disabled: isDisabled(item),
+    props: {
+      onClick: () => {
+        if (!item.popconfirm) {
+          handleClick(item)
+        }
+      }
+    }
+  }))
+})
+
+function handleDropdownSelect(key: string | number) {
+  const item = collapsedActions.value.find(a => a.key === key)
+  if (item && !item.popconfirm) {
+    handleClick(item)
+  }
+}
+</script>
+
+<template>
+  <NFlex
+    ref="containerRef"
+    align="center"
+    size="small"
+    v-bind="$attrs"
+    style="width: 100%"
+    :wrap="false"
+  >
+    <template v-for="(item, index) in displayActions" :key="`action-${item.key}`">
+      <QuiBaseButton
+        v-bind="resolveButtonProps(item)"
+        @click="handleClick(item)"
+        @positive-click="handlePopconfirmPositiveClick(item)"
+      >
+        <template v-if="props.mode !== 'icon'">
+          {{ item.label }}
+        </template>
+      </QuiBaseButton>
+      <NDivider v-if="showDivider && index < displayActions.length - 1" :key="`div-${item.key}`" vertical />
+    </template>
+
+    <!-- More Button -->
+    <NDropdown
+      v-if="collapsedActions.length > 0"
+      :options="dropdownOptions"
+      @select="handleDropdownSelect"
+    >
+      <div style="display: inline-flex; align-items: center;">
+        <NDivider v-if="showDivider && displayActions.length > 0" vertical />
+        <QuiBaseButton
+          v-bind="resolveMoreButtonProps()"
+        >
+          <template v-if="props.mode !== 'icon'">
+            更多
+          </template>
+        </QuiBaseButton>
+      </div>
+    </NDropdown>
+  </NFlex>
+
+  <!-- Shadow Container for Calculation -->
+  <div
+    v-if="responsive"
+    ref="shadowRef"
+    class="action-button-shadow"
+    :style="shadowStyle"
+    aria-hidden="true"
+  >
+    <QuiBaseButton
+      v-for="item in visibleActions"
+      :key="`shadow-${item.key}`"
+      v-bind="resolveButtonProps(item)"
+      style="flex-shrink: 0;"
+    >
+      <template v-if="props.mode !== 'icon'">
+        {{ item.label }}
+      </template>
+    </QuiBaseButton>
+
+    <!-- Shadow More Button -->
+    <QuiBaseButton
+      v-bind="resolveMoreButtonProps()"
+      style="flex-shrink: 0;"
+    >
+      <template v-if="props.mode !== 'icon'">
+        更多
+      </template>
+    </QuiBaseButton>
+
+    <!-- Shadow Divider -->
+    <NDivider vertical />
+  </div>
+</template>

package/src/components/button/action/props.ts

@@ -0,0 +1,78 @@
+import type { ButtonProps, PopconfirmProps } from 'naive-ui'
+import type { Ref } from 'vue'
+import type { ButtonPermission } from '../base/props'
+
+export type ActionButtonMode = 'icon' | 'text' | 'icon-text' | 'button' | 'secondary'
+
+export enum ActionEnum {
+  EDIT = 'edit',
+  DELETE = 'delete',
+  VIEW = 'view',
+  ADD = 'add',
+  SEARCH = 'search',
+  DOWNLOAD = 'download',
+  UPLOAD = 'upload',
+  SETTING = 'setting'
+}
+
+export interface ActionItem {
+  /** 唯一标识，也是默认的图标映射键值 */
+  key: ActionEnum | string
+  /** 按钮显示文本 */
+  label: string
+  /** 按钮尺寸 */
+  size?: ButtonProps['size']
+  /** 图标名称，如果不传则显示 defaultIcon */
+  icon?: string
+  /** 按钮属性 */
+  props?: ButtonProps
+  /** 点击事件 */
+  onClick?: (key: ActionEnum | string, item: ActionItem) => void
+  /** 是否显示 */
+  show?: boolean | (() => boolean) | Ref<boolean>
+  /** 是否禁用 */
+  disabled?: boolean | (() => boolean) | Ref<boolean>
+  /** 提示文本，默认使用 label */
+  tooltip?: string
+  /** 二次确认框配置，存在则开启二次确认 */
+  popconfirm?: PopconfirmProps
+  /** 确认框内容 */
+  popText?: string
+  /** 确认按钮文字 */
+  positiveText?: string
+  /** 取消按钮文字 */
+  negativeText?: string
+  /** 确认回调 */
+  onPositiveClick?: (key: ActionEnum | string, item: ActionItem) => void
+  /** 权限控制 */
+  permission?: ButtonPermission
+}
+
+export const DEFAULT_ACTION_ICONS: Record<string, string> = {
+  [ActionEnum.EDIT]: 'carbon:edit',
+  [ActionEnum.DELETE]: 'carbon:trash-can',
+  [ActionEnum.VIEW]: 'carbon:view',
+  [ActionEnum.ADD]: 'carbon:add',
+  [ActionEnum.SEARCH]: 'carbon:search',
+  [ActionEnum.DOWNLOAD]: 'carbon:download',
+  [ActionEnum.UPLOAD]: 'carbon:upload',
+  [ActionEnum.SETTING]: 'carbon:settings',
+  more: 'carbon:overflow-menu-horizontal'
+}
+
+export interface ActionButtonProps {
+  /** 操作按钮列表 */
+  actions?: ActionItem[]
+  /** 显示模式：纯图标 | 纯文字 | 图标+文字 */
+  mode?: ActionButtonMode
+  /** 最大显示数量，超过折叠 */
+  max?: number
+  /** 统一的按钮属性 */
+  buttonProps?: ButtonProps
+  /** 按钮尺寸 */
+  size?: ButtonProps['size']
+  /** 是否显示分割线 */
+  showDivider?: boolean
+  /** 是否开启响应式折叠，开启后 max 属性失效，根据宽度自动计算显示数量 */
+  responsive?: boolean
+}