tntweb-admin 来了,一款特性丰富的react admin框架

·  阅读 2919
tntweb-admin 来了,一款特性丰富的react admin框架

TNTWeb - 全称腾讯新闻前端团队,组内小伙伴在Web前端、NodeJS开发、UI设计、移动APP等大前端领域都有所实践和积累。

目前团队主要支持腾讯新闻各业务的前端开发,业务开发之余也积累沉淀了一些前端基础设施,赋能业务提效和产品创新。

团队倡导开源共建,拥有各种技术大牛,团队Github地址:github.com/tnfe

本文作者fantasticsoul

tntweb-admin

本文给大家介绍一个开源的react手脚架项目tntweb-admin,它基于concent、react、react-router、Ant Design、typescript、jest等多项技术搭建,包含有以下特性

webpack,vite双引擎驱动

同时支持 webpack,vite 两种构建工具进行开发与调试,满足喜欢vite快速调试体验的朋友。

生产环境建议使用webpack打包

// webpack 启动
npm run start
// vite 启动
npm run vite-start
复制代码

约定式路由,统一错误处理

约定项目根目录下的configs/menus.ts文件配置菜单,项目启动时自动根据菜单配置生成导航和路由组件,并统一对路由组件包裹componentDidCatch钩子函数做路由页面错误捕捉,防止整个站点崩溃。

内部路由组件生成过程包裹了React.Suspense组件,支持用户配置异步路由页面组件。

const menus: Array<IMenuItem | IMenuGroup> = [
  {
    label: 'template',
    path: '/template',
    Component: lazy(() => import('pages/_Demos/Template')),
  };
];
复制代码

内置concent最佳实践

concent是一款较新式的数据流方案,它有着高性能、渐进式,自带依赖收集等特点,同时支持中性化model配置和分散式model配置,并提供类vue3composition api编程体验。

项目深度整合了concent的常用api,并提供了各种场景编码的最佳实践,如全局式共享model配置,页面级model配置,setup的使用等示例。

image.png

添加页面

  • 添加菜单与路由
    src/configs/menus里添加路由对应的菜单信息,路由path统一维护在src/configs/constant/routerPath.ts文件
  • 添加路由页面
    src/pages目录下添加页面组件

可参考 src/pages/_DemoTempalte查看示例代码,启动项目后 访问 localhost:3000/template可以访问该组件页面

添加模块

模块可在src/models目录下添加,也可以在pages/XxxComp里就近添加业务模块,需注意都要在src/models/index.ts文件里暴露出去, 模块名统一维护在src/configs/c2Mods.ts文件

  • 添加模块名
// src/configs/c2Mods.ts文件
export const HELLO = modName('Hello');
export type T_HELLO = typeof HELLO;
复制代码
  • 添加多文件模块 在src/models下添加目录hello,将模块的state,reducer,computed拆开写
|____models              
| |____hello             
| | |____state.ts
| | |____reducer.ts
| | |____computed.ts
| | |____index.ts
复制代码

state文件里定义状态【必需】

function getInitialState() {
  return {
    str: '',
    loading: false,
  };
}
export type St = ReturnType<typeof getInitialState>;
export default getInitialState;
复制代码

reducer文件里定义方法【可选】

import { St } from './state';
import { VoidPayload, AC } from 'types/store';
import { T_HELLO } from 'configs/c2Mods';
import { delay } from 'utils/timer';

type IAC = AC<T_HELLO>;

export function simpleChange(payload:string, moduleState:St, ac:IAC){
    return {str:payload};
}

export async function complexChange(payload:string, moduleState:St, ac:IAC){
    await ac.setState({loading:true});
    await delay(2000);
    // 下面两句可合写为:return {str:payload, loading: false};
    ac.dispatch(simpleChange, payload); // 当前文件内复用其他reducer逻辑
    return { loading: false };
}
复制代码

computed文件里定义计算【可选】

import { St } from './state';

// only value change will triiger this function to execute again
export function reversedStr({ str }: St) {
  return str.split('').reverse().join('');
}
复制代码

src/models/hello/index.ts文件暴露模块

import { HELLO } from 'configs/c2Mods';
import state from './state';
import * as computed from './computed';
import * as reducer from './reducer';

export default {
  [HELLO]: {
    state,
    computed,
    reducer,
  }
};
 
复制代码

src/models/index.ts文件引入模块合并到根模块

import global from './global'; // 覆写concent内置的$$global模块
import Hello from './hello';

const toExport = {
  ...Hello,
  ...global,
};

export default toExport;
复制代码

任务组件使用useC2Mod消费模块数据,使用模块方法

import { useC2Mod } from 'services/concent';
import { HELLO } from 'configs/c2Mods';

export function SomeComp(){
    // state:数据,mr:方法
    const { state, mr } = useC2Mod(HELLO);
}
复制代码

100% ts

内置类型文件最佳组织实践,全方位的自动帮你注入类型,轻松驾驭ts,你只需要传入指定的模块名,useC2Mod钩子函数即可自动帮你推导出模块的项目模块数据、计算数据、相关方法。

image.png

image.png

丰富的主题设置

  • 基于css变量,实现在线主题换肤,实时的主题预览功能(站点主题色、字体透明度等)

  • 多种布局排版,27中布局排版组合(3种边栏布局 * 3种顶栏 * 3种快捷导航栏)

  • 多色调模式,支持正常、黑白、暗黑3种色调模式

image.png

多登录主题

多个登录主题,10+登录主题任意切换

image.png

页签

支持页签功能,并关联了浏览器的前进后退行为

image.png

国际化

对接了lingui国际化方案,支持编译期文案替换

lingui 在 vite模式会报错,目前仅支持webpack模式运行

image.png

完备的单测

组件下创建__tests__目录,即可使用jest对齐书写单测文件

团队

TNTWeb - 腾讯新闻前端团队,TNTWeb致力于行业前沿技术探索和团队成员个人能力提升。为前端开发人员整理出了小程序以及web前端技术领域的最新优质内容,每周更新✨,欢迎star,github地址:github.com/tnfe/TNT-We…

image.png

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改