跳到主要内容

<Tushan />

<Tushan /> 组件

<Tushan /> 组件是后台管理中一切的入口,一个一个最简单的 <Tushan /> 组件大概是长成下面这样的:

<Tushan
basename="/"
dataProvider={dataProvider}
>
{/* ... */}
</Tushan>
  • basename 定义路由的基础路径,默认是 /, 你也可以将其改为 /admin 或者其他的子路径以方便和其他的项目做集成

  • dataProvider 定义与后端接口交互的方式,一般来说常规的json数据格式可以直接用 tushan 预设好的方案:

    import { jsonServerProvider } from 'tushan';

    const dataProvider = jsonServerProvider('https://jsonplaceholder.typicode.com');

    其中 https://jsonplaceholder.typicode.com 替换成自己的服务端接口地址

    当然你可以自己实现自己的dataProvider, 具体类型声明可以参考如下结构:

    import { DataProvider, fetchJSON, HTTPClient } from 'tushan';

    export function customDataProvider(
    apiUrl: string,
    httpClient: HTTPClient = fetchJSON
    ): DataProvider {
    // ...
    }

自定义布局

Tushan 中的布局是完全可以被自定义的,包括整体布局以及细节的header/footer等。

一个修改布局的示例如下:

<Tushan
header={'My Admin'}
footer={'Build with MsgByte'}
dashboard={<Dashboard />}
>
</Tushan>

在这个示例中自定义了标题栏与底部的footer

关于如何定义仪表盘可以见 自定义仪表盘

或者你也可以整体替换掉整个布局, 如下:

<Tushan
layout={<MyLayout />}
>
</Tushan>

你可以在源码中查看默认布局实现用于参考:

https://github.com/msgbyte/tushan/blob/master/packages/tushan/client/components/layout/index.tsx

自定义登录界面

类似的,你可以直接在Tushan组件中进行自定义登录界面

<Tushan
loginPage={<MyLogin />}
>
</Tushan>

登录界面的实现可以参考默认的登录页面实现:

https://github.com/msgbyte/tushan/blob/master/packages/tushan/client/components/defaults/LoginPage.tsx