jekip/naive-ui-admin

Naive Ui Admin 是一款基于 Vue3、Vite2 和 TypeScript 的先进中后台解决方案，集成了前沿的前端技术栈和典型业务模型。它拥有二次封装组件、动态菜单、权限校验、粒子化权限控制等核心功能，旨在帮助企业快速构建高质量的中后台项目。无论在新技术运用或业务实践层面，都能为您提供有力支持，并将持续更新，以满足您不断变化的需求

naive-ui-admin's Issues

permission.ts 自定义指令在dom实例化完成后再视情况remove的逻辑有点问题

dom已经挂载,此时即便remove了,也会导致created生命周期被触发,建议还是通过v-if实现,或者实现一个Access组件实现更加细致的控制

导航栏颜色切换问题

暗色主题下, 选择 '白色侧边栏' 或者 '暗色侧边栏' 会导致面包屑部分字体看不见

V2 封装的axios无法进行FormData格式提交

let data = new FromData()
data.append('name','张三')
data.append('age','20')

export function uploadIpsFile( data:FormData, ): Promise<uploadIpsFileResponseType> {
  return http.request(
    {
      headers: {
        'Content-Type': ContentTypeEnum.FORM_DATA,
      },
      data: data,

    },
    {
      apiUrl: 后端提交地址,
      isShowErrorMessage: false,
      // post请求的时候添加参数到url
      joinParamsToUrl: false,
      // 格式化提交参数时间
      formatDate: false,
      // 消息提示类型
      errorMessageMode: 'none',
    }
  );
}

问题：使用自带的axios提交时会将FormData参数过滤为{}或传入的params.

问题分析

经过debugger后发现为beforeRequestHook函数161行在对参数data,params过滤时，因为FormData拿出后长度为0，错误进入了else语句，将data设置为了传入的params,在没有传入时使用到了147行默认的{}

关联文件

axios/index.ts

你好，里面有编辑表格吗？

里面有编辑表格吗？这个在业务中，经常用到！

关闭当前页面BUG

打开多个页面点击关闭当前页，当前页面并没有关闭，面包屑上面的显示也没有发生变化

v2 - 面包屑下拉菜单未过滤

面包屑下拉菜单未过滤，导致和导航菜单不一致

v2 - table组件导出获取和修改数据源的方法

Table组件的getDataSource和setTableData方示未导出

Axios的封装有点问题,不传params的话 data 就为空对象

// 请求之前处理config
beforeRequestHook: (config, options) => {
const { apiUrl, joinPrefix, joinParamsToUrl, formatDate, joinTime = true } = options;

    if (joinPrefix) {
        config.url = `${urlPrefix}${config.url}`;
    }

    if (apiUrl && isString(apiUrl)) {
        config.url = `${apiUrl}${config.url}`;
    }
    const params = config.params || {};
    if (config.method?.toUpperCase() === RequestEnum.GET) {
        if (!isString(params)) {
            // 给 get 请求加上时间戳参数，避免从缓存中拿数据。
            config.params = Object.assign(params || {}, joinTimestamp(joinTime, false));
        } else {
            // 兼容restful风格
            config.url = config.url + params + `${joinTimestamp(joinTime, true)}`;
            config.params = undefined;
        }
    } else {
        if (!isString(params)) {
            formatDate && formatRequestDate(params);
            config.data = params;  ////!!!!!! 这行存在的话,params为undefined时 data就成空对象了 
            config.params = undefined;
            if (joinParamsToUrl) {
                config.url = setObjToUrlParams(config.url as string, config.data);
            }
        } else {
            // 兼容restful风格
            config.url = config.url + params;
            config.params = undefined;
        }
    }
    return config;
},

导航模式切换问题

导航在 vertical 模式并且折叠状态下, 切换成 horizontal 模式时导航文字不显示

退出登录重新登录进入系统出现登录的标签

在scoped中使用deep()自定义样式的时候无效的问题

代码如下，想要自定义Menu组件下的.n-menu .n-menu-item::before样式，但是没有效果，试过去定义.n-menu之类的也没有生效

<template>
  <NMenu
    class="custom-menu"
    :options="menus"
    :inverted="inverted"
    :mode="mode"
    :collapsed="collapsed"
    :collapsed-width="64"
    :collapsed-icon-size="14"
    :expanded-keys="openKeys"
    :value="getSelectedKeys"
    @update:value="clickMenuItem"
    @update:expanded-keys="menuExpanded"
  />
</template>

<style lang="less" scoped>
  :deep(.n-menu .n-menu-item::before) {
    left: 12px !important;
    right: 12px !important;
  }
</style>

基础表格组件缩放后样式异常

Browser and its version (浏览器及其版本)
92.0.4515.107（正式版本） (arm64)

System and its version (系统及其版本)
MacOs(11.4)

Node version (Node 版本)
v14.17.3

Reappearance link (重现链接)
https://naive-ui-admin.vercel.app/#/comp/table/basic

Reappearance steps (重现步骤)
点击组件示例 -> 表格 -> 基础表格 -> 缩放网页

Expected results (期望的结果)
当缩放页面到一定宽度后 表格不再响应式缩放，有一个最小宽度。

Actual results (实际的结果)
当缩放页面到比小的宽度后，样式溢出。

[Vue Router warn]: No match found for location with path "/dashboard"

vue-router.esm-bundler.js:72 [Vue Router warn]: No match found for location with path "/dashboard", 首次登陆 ，或者刷新 会出现这个路由警告，

v2 - 关闭当前tab会把固定tab也关闭了

gopage方法加上是否能关闭，解决右边标签菜单关闭当前问题

关闭其他页BUG

点击关闭其他，卡标签全部消失

Next New Version

naive-ui-admin v1.x 版本已经停更一段时间了，近期一直在筹备v2.0大版本，主要大纲内容如下

• 功能增强
• 组件完善
• 优化代码
• 页面全新设计（部分）
• 文档升级
• 原计划大部分功能和组件，已开发完成，在做最后准备工作，预计9月底之前，正式上线，敬请期待（如需随时了解动态，可来qq群328347666）

多页签切换页面能维持各页面状态吗？

多页签切换时能维持各页面的状态吗？
外部页面切换时能否不重新加载？

感谢您~

antd版的Table里面的TableAction是否可以支持antd的原颜色

1.antd版的Table里面的TableAction是否可以支持antd的原颜色
2.使用danger的时候，按钮颜色可以不变淡色吗

打包之后报错

Uncaught (in promise) TypeError: Cannot read property 'refs' of null

菜单打开到足够多的时候，没有自动滚动到当前打开的菜单tab

打开很多菜单后，隐藏部分没有自动往前移动，一直被隐藏，只能手动点击向右滑动按钮

文档中权限部分关于动态添加路由的api写错了

在vue-router-next中 router.addRoutes 已经废弃了，正确的应该是router.addRoute

针对生成菜单的建议修改

生成菜单时，如果只有单一子菜单项，只显示子菜单项。目前会使得菜单中出现没有图标的子菜单
建议加入如下的行：

export function generatorMenu(routerMap: Array<any>) {
  return filterRouter(routerMap).map((item) => {
    const isRoot = isRootRouter(item);
    const info = isRoot ? item.children[0] : item;
    const currentMenu = {
      ...info,
      ...info.meta,
      label: info.meta?.title,
      key: info.name,
+      icon: isRoot ? item.meta?.icon : info.meta?.icon,
    };
    // 是否有子菜单，并递归处理
    if (info.children && info.children.length > 0) {
      // Recursion
      currentMenu.children = generatorMenu(info.children);
    }
    return currentMenu;
  });
}

能否提供非TS版本分支？

设置中，顶部菜单混合模式无效（图1）,顶部菜单模式下， 界面显示无效，且样式有问题（图2）

图1

图2

有计划支持分栏布局吗

类似这种的菜单布局

国际化

项目有提供国际化吗

Message的先后顺序

在axios中，作者使用了
const { $dialog: Modal, $message: Message } = window;
但是window的Message赋值，是在Application组件中使用，Application组件又是在App.vue中才调用，导致Message对象，在没有进入到App.vue时候（也就比如在登录界面中就触发调用）就不生效。

v2 - 面包屑前的刷新按钮在启用keepalive后无效

面包屑前的刷新按钮在启用keepalive后无效，对比代码少了delKeepAliveCompName

此项目是基于Vite的如何用VTU（vue test utils）进行单元测试

最近要对项目加入VTU和jest进行单元测试，发现babel不支持import.meta.env，想请教下作者这个项目怎么用VTU做单元测试的

Table组件的Tree模式中是否有提供展开事件

因为业务需要，要做一个Table+Tree异步加载的功能，但看官方NaiveUI官方组件没有找到类似的事件，或者官方有现成的Demo吗

useForm通过getFieldsValue获取值问题

场景：官方示例弹窗扩展页面中。
复现步骤：填写姓名， 点击弹窗确定按钮，通过useForm暴露的getFieldsValue方法只能获取到用户手动录入的值，无法获取到已经设置的默认值， 例如弹窗扩展里面的预约时间不主动触发的话是无法通过getFieldsValue获取到该值得

期望：通过defaultValue设置默认值，不触发一样可以拿到值

基础表单中重置功能无法使用

我看了下代码，重置调用了restoreValidation方法，这个方法不管用

项目报错，起不来

install 后， 运行报错，无法启动

首次运行报错：TypeError: Cannot read property 'endsWith' of undefined

Node v16.6.1
报这个错误，有可能是什么问题？
sdeMacBook-Pro:admin s$ yarn dev yarn run v1.22.11 $ vite failed to load config from /Users/s/Documents/test/mjxiu/cms/admin/vite.config.ts error when starting dev server: TypeError: Cannot read property 'endsWith' of undefined at configHtmlPlugin (/Users/s/Documents/test/mjxiu/cms/admin/vite.config.ts:215:34) at createVitePlugins (/Users/s/Documents/test/mjxiu/cms/admin/vite.config.ts:282:20) at vite_config_default (/Users/s/Documents/test/mjxiu/cms/admin/vite.config.ts:340:14) at loadConfigFromFile (/Users/s/Documents/test/mjxiu/cms/admin/node_modules/vite/dist/node/chunks/dep-c1a9de64.js:75511:15) at processTicksAndRejections (node:internal/process/task_queues:96:5) at async resolveConfig (/Users/s/Documents/test/mjxiu/cms/admin/node_modules/vite/dist/node/chunks/dep-c1a9de64.js:75096:28) at async createServer (/Users/s/Documents/test/mjxiu/cms/admin/node_modules/vite/dist/node/chunks/dep-c1a9de64.js:73625:20) at async CAC.<anonymous> (/Users/s/Documents/test/mjxiu/cms/admin/node_modules/vite/dist/node/cli.js:13963:24) error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

点击关闭当前tab页，tab页关了，右键的弹窗没关

目前点击右键弹窗关闭页，点击关闭后指定的tab页关闭了，但是菜单未关

建议：全局Message和Dialog的实现方式

我注意到一个辅助的appProvider用于在程序初始化时将$message和$dialog注意到window对象中，便于供Axios使用。
但其实有更为方便的实现方式：使用mitt（实际已经引入未用到）。
mitt引入的对象同样是全局对象，并且listener可以延迟定义，定义在任何位置。

方法如下：首先定义一个全局bus对象（eventbus.ts）

import mitt from 'mitt';
export const bus = mitt();

在http中引入并使用该对象

import { bus } from '@/utils/eventbus';
...
bus.emit('error', 'error message');
bus.emit('modal', { 
    msg: 'anything to show',
    ...
});

在引入NMessageProvider和NDialogProvider后的任何地方（例如MessageContent.vue中）监听事件：

import { bus } from '@/utils/eventbus';
...
const Message = useMessage();
bus.on('error', (msg: string) => Message.error(msg));
bus.on('modal', (e: any) => ...);

这样就可以去掉window注入、appProvider等附加机制，逻辑上更为清晰。
以上思路供参考。

TabsView相关想法

TabsView能否换成官方的tabs标签页？

types.ts 中isTransformResponse重复定义

types.ts 中isTransformResponse重复定义

将来是否会有基于VueCli的版本？

建议: 基础表格上新增搜索

V2 数据表格 :row-props 传入自定义事件穿透问题

<BasicTable
      :columns="columns"
      :dataSource="data"
      ref="actionRef"
      :pagination="false"
      :loading="loading"
      :actionColumn="actionColumn"
      :row-key="(row) => row.id"
      @edit-end="editEnd"
      @update:checked-row-keys="onCheckedRow"
      :row-props="rowProps"
    >
      <template #toolbar>
        <n-space justify="end">
          <n-button type="primary" @click="reloadTable">上传</n-button>
        </n-space>
      </template>
</BasicTable>

// 自定义行点击
const rowProps = (rows) => {
    return {
      style: 'cursor: pointer;',
      onclick: function (e) {
        // e.preventDefault();
        // e.stopPropagation();
      },
    };
  };

// 按钮绑定事件
const onCheckedRow=()=>{
}

在传入自定义属性时绑定单元行事件后，点击当前行中按钮/可编辑单元格均会触发绑定事件。
在renderActon中渲染的按钮可手动阻止事件传播，但可编辑单元格事件无法手动阻止。

完善ts类型检测

版本号的问题

现在版本号为x.x这种，但npm默认的是x.x.x（即三位版本号），每次使用npm启动的时候，需要到package.json中补填一个.0结尾的版本，建议默认把版本号补全。

表格列设置优化

表格列设置，在数据量50条及以上的时候会有2秒左右的卡顿

图片上传

上传图片这个功能是有问题的吧， n-upload 的 onFinish 回调参数， {file, event} , event.target.response 项目build之后， 这个值是null, 导致上传图片拿不到上传结果，但是本地localhost运行可以拿到结果

当表格single-line为false时,表格可否增加可伸缩列

当列设置固定宽度时，用户可自定义修改列的宽度

建议：菜单权限

菜单配置建议全部在前端设置，比如路径，component等，这个东西基本后端不会有改动的，后端系统只是负责菜单的分配，菜单使用编号来标识，前后端统一，后端只是返回改用户的菜单id就可以知道该客户的菜单列表，我的意思是权限只是控制到菜单。
望采纳

v2 Need Discuss

v1/v2 Need 功能，在此 Discuss

请问V1版本是开源免费的吗？可以用于商用吗？

antd版使用useModal的时候，里面的配置有些是无效的

比如：maskClosable，写了true，点背景还是无法关闭弹窗