Tushan
是一個自由度極高的,基於React的,開箱即用的後台管理應用前端框架。
作為開發者, 你可以像是調用庫一樣快速創建一個可用的後台管理框架
一個簡單的Tushan
應用大概會長成以下樣子:
import {
createTextField,
createEmailField,
createUrlField,
jsonServerProvider,
ListTable,
Resource,
Tushan,
} from 'tushan';
const dataProvider = jsonServerProvider('https://jsonplaceholder.typicode.com');
function App() {
return (
<Tushan
basename="/admin"
dataProvider={dataProvider}
>
<Resource
name="users"
label="User"
list={
<ListTable
fields={[
createTextField('id', {
label: 'ID',
}),
createTextField('name', {
label: 'Name',
list: {
sort: true,
},
}),
createEmailField('email', {
label: 'Email',
}),
createUrlField('website', {
label: 'Website',
}),
]}
action={{ create: true, detail: true, edit: true, delete: true }}
/>
}
/>
</Tushan>
);
}
export default App;
我們可以通過指定字段的類型來決定數據表格的表現形式,並且內置實現了常規的增刪改查等操作。幫助開發者快速產出一個後端應用的MVP。
預覽效果如下:
Tushan 的api 設計受到 react-admin 很大的啟發,兩者的接口協議是完全兼容的,這意味著react-admin現成的後端接口生態方案可以完全無縫被Tushan 使用。如果對material-ui 設計的後台方案感興趣的話可以選擇react-admin 作為替代
另外,Tushan
還包括一些常用的前端依賴項,如 styled-components
和 arco-design
等,可以幫助您更快地搭建前端界面。
在CodeSandbox 中快速示例
訪問 CodeSandbox 快速獲得無後台版本的示例程序。
UI框架
Tushan
的UI組件庫是基於字節跳動的 arco-design
。你可以在這裡訪問arco-design
的官方文檔
所有的組件都已經被導出且可以通過tushan
直接引入
#Tushan首頁文檔和下載 #後台管理應用前端框架 #程式开发