基于 Naive-UI-Admin 开发后台管理系统的相关问题总结

适用版本：naive-ui-admin 1.8.0

1. route 切换 / tab 切换后页面空白

route 切换 / tab 切换后页面空白的问题，目前我遇到两种情况，都会导致这个问题发生：

view 页面无元素

在<template></template>内部至少要有一个元素（如图 1-1），若页面 A 无内容，则其跳转到其他路由，都会是空白页面：

图 1-1 至少一个元素

view 页面有多个根元素

第二次遇到页面空白的问题后，我去网上查找资料，包括 github 上的 issue，给的答案基本都是因为动画控件的原因， view 页面不能有多个根元素。这个答案听得我一头雾水，其实是我没有理解什么是根元素：在 naive-ui-admin 中，根元素是指 view 页面内的<template></template>内部最顶级的元素。而我最初以为<template>就是指根元素。

我当时的代码如图 1-2：

图 1-2 反例

现在我们知道，我的根元素有 3 个：<n-card>、<n-modal>、<basicModal>。

2. 跳过 naive-ui-admin 自带的登录界面

有时候我们的项目可能使用的是外部的登录验证模块，这个时候需要跳过 naive-ui-admin 自带的登录界面，找到src/route/route-guards.ts。

router.beforeEach(asycn(to, from, next) => {})是一个全局前置守卫，其中to参数为即将进入的路由，from参数为即将离开的路由，next是放行函数。

对于next()函数，可以直接调用next()向to的路由放行，也可以next('route')向route参数所指的页面放行，也可以next(false)拒绝放行，于是在route.beforeEach()中，就可以做到登录验证等一系列工作。

我们首先如图 2-1 删除掉 naive-ui-admin 中与登录页面相关的代码：

图 2-1 跳过登录验证

换成我们自己的代码：

const token = storage.get(ACCESS_TOKEN);
if (!token) {
  let result = await userStore.login({});
  if (result.code === ResultEnum.SUCCESS) {
    next(PageEnum.BASE_HOME);
    return;
  } else {
    next(PageEnum.FORBIDDEN_PAGE);
  }
}

其中，userStore.login()函数仍然为src/store/modules/user.ts 中的方法，只不过/api/system/user.ts中已经改为向外部的登录验证后台请求登录信息。

我的代码逻辑是，如果没有token，则执行login请求登录信息，若请求成功，则进入首页，否则403；若存在token，则直接放行。

若修改了此处的代码进入路由后发现页面空白，可能是放行逻辑有误而进入了死循环，建议打log分析一下。

除了登录相关的代码外，与asyncRouteStore以及redirect相关的代码，若无把握，最好不要改动。

3. 数据表格

数据表格缺少自适应列宽、拖拽调整列宽等功能

naive-ui-admin 的数据表格BasicTable没有自适应列宽、拖拽调整列宽等功能，建议直接换成vxe-table(gitee)。

4. 表单（BasicForm）问题

4.1 表单栅格最后一列元素过窄

当表单元素（input等）比较多时，这个问题就显现出来了，如图 4-1 所示，表单最后一列元素过窄，不美观，这个问题和 4.2、4.3 可以同时解决，我放在下面一起说。

图 4-1 表单栅格问题

4.2 小屏下表单 UI 问题

当屏幕过窄（比如说移动端）时，表单的第一列会被挤到一边，如图 4-2，根本无法使用：

图 4-2 小屏下表单UI问题

这个问题和 4.1 一样，放在 4.3 一起解决。

4.3 表单按钮组多占用了表单栅格一列

其实 4.1，4.2 问题发送的原因都在于，表单按钮组多占用了表单栅格的最后一列，根本原因是BasicForm的源码（\src\components\Form\src\BasicForm.vue）中的:span="isInline ? '' : 24"有问题（图 4-3），此处代码导致当BasicForm的layout为inline时，n-gi的span为空，这一点也在图 4-4 有所验证：