🎉 我们正在招聘远程 全栈开发工程师测试工程师技术培训与文档专家,欢迎加入

NocoBase 0.10:第二季度的新特性

NocoBase 0.10 版本进行了关系字段组件改进,支持多种组件切换,同时增加快捷创建关系数据,支持两种快捷创建模式等多项更新。

NocoBase team|

第二季度的新特性

  • 关系字段组件改进,支持多种组件切换
    • 下拉选择器
    • 数据选择器
    • 子表单/子详情
    • 子表格
    • 文件管理器
    • 标题(仅阅读模式)
  • 快捷创建关系数据,支持两种快捷创建模式
    • 下拉菜单里添加,基于标题字段快速创建一条新纪录
    • 弹窗里添加,可以配置复杂的添加表单
  • 复制操作,支持两种复制模式
    • 直接复制
    • 复制到表单里并继续填写
  • 表单数据模板
  • 筛选数据范围支持变量
  • 列表区块
  • 网格卡片区块
  • 移动端插件
  • 用户认证插件,支持不同的登录方式
    • Email/Password
    • SMS
    • OIDC
    • SAML
  • 工作流新增节点
    • 人工节点升级,支持从现有数据表里新增和编辑
    • 循环节点
    • 聚合查询节点
  • 文件管理器
    • 提供文件表模板
    • 提供文件管理器组件

应用升级

Docker 安装的升级

无变化,升级参考 Docker 镜像升级指南

源码安装的升级

v0.10 进行了依赖的重大升级,源码升级时,以防出错,需要删掉以下目录之后再升级

# 删除 .umi 相关缓存
yarn rimraf -rf "./**/{.umi,.umi-production}"
# 删除编译文件
yarn rimraf -rf "packages/*/*/{lib,esm,es,dist,node_modules}"
# 删除依赖
yarn rimraf -rf node_modules

更多详情参考 Git 源码升级指南

create-nocobase-app 安装的升级

建议 yarn create 重新下载新版本,再更新 .env 配置,更多详情参考 大版本升级指南

即将遗弃和可能不兼容的变化

子表格字段组件

不兼容新版,区块字段需要删除重配(只需要 UI 重配)

附件上传接口的变更

除了内置的 attachments 表以外,用户也可以自定义文件表,附件的上传接口由 /api/attachments:upload 变更为 /api/<file-collection>:create,upload 已废弃,依旧兼容 v0.10,但会在下个大版本里移除。

登录、注册接口的变更

nocobase 内核提供了更强大的 auth 模块,用户登录、注册、校验、注销接口变更如下:

/api/users:signin -> /api/auth:signIn
/api/users:signup -> /api/auth:signUp
/api/users:signout -> /api/auth:signOut
/api/users:check -> /api/auth:check

注:以上 users 接口,已废弃,依旧兼容 v0.10,但会在下个大版本里移除。

日期字段筛选的调整

如果之前数据范围里配置了日期相关筛选,需要删掉重新配置。

第三方插件升级指南

依赖升级

v0.10 依赖升级,主要包括

  • react 升级到 v18
  • react-dom 升级到 v18
  • react-router 升级到 v6.11
  • umi 升级到 v4
  • dumi 升级到 v2

插件的 package.json 相关依赖要更改为最新版,如:

{
  "devDependencies": {
+   "react": "^18".
+   "react-dom": "^18".
+   "react-router-dom": "^6.11.2".
-   "react": "^17".
-   "react-dom": "^17".
-   "react-router-dom": "^5".
  }
}

代码修改

由于 react-router 的升级,代码层面也需要改动,主要变更包括

Layout 布局组件

Layout 布局组件需要使用 <Outlet /> 代替 props.children

import React from 'react';
+ import { Outlet } from 'react-router-dom';

export default function Layout(props) {
  return (
    <div>
-      { props.children }
+      <Outlet />
    </div>
  );
}

使用了 React.cloneElement 方式渲染的路由组件改造,示例:

import React from 'react';
+ import { Outlet } from 'react-router-dom';

export default function RouteComponent(props) {
  return (
    <div>
-      { React.cloneElement(props.children, { someProp: 'p1' }) }
+      <Outlet context={{ someProp: 'p1' }} />
    </div>
  );
}

组件改成从 useOutletContext 取值

import React from 'react';
+ import { useOutletContext } from 'react-router-dom';

- export function Comp(props){
+ export function Comp() {
+   const props = useOutletContext();
  return props.someProp;
}

Redirect

<Redirect> 转为 <Navigate replace />

- <Redirect to="about" />
+ <Navigate to="about" replace />

useHistory

useNavigate 代替 useHistory

- import { useHistory } from 'react-router-dom';
+ import { useNavigate} from 'react-router-dom';

- const history = useHistory();
+ const navigate = useNavigate();

- history.push('/about')
+ navigate('/about')

- history.replace('/about')
+ navigate('/about', { replace: true })

useLocation

useLocation<type>() 改为 useLocation

- const location= useLocation<type>();
+ const location= useLocation();

const { query } = useLocation() 改为 useSearchParams()

- const location = useLocation();
- const query = location.query;
- const name = query.name;
+ const [searchParams, setSearchParams] = useSearchParams();
+ searchParams.get('name');

path

支持下面的 path 方式

/groups
/groups/admin
/users/:id
/users/:id/messages
/files/*
/files/:id/*

不再支持如下方式

/tweets/:id(\d+)
/files/*/cat.jpg
/files-*

更多改动和 api 变更,请查阅 react-router@6