README

该项目为 qs-cmf 后台 ant-design-pro 模式的组件库

安装

composer require quansitech/antd-admin
npm install
npm run build:backend

使用

通用组件

该项目采用container模式，组件通过container增加，并已增加默认组件的快捷操作，不需要手动new 组件

自定义页面

新增页面组件

// resources/js/backend/Pages/Index.tsx
import {usePage, Head} from "@inertiajs/react";

export default function (){
    const props = usePage<{
        fooUrl: string,
        barUrl: string
    }>().props

    return <>
        <Head title="Index"></Head>
        <h1>TP inertia</h1>
    </>
}

编译静态资源

# 编译
npm run build:backend
# 或 开发模式
npm run dev:backend

controller中返回inertia响应

use Qscmf\Lib\Inertia\Inertia;

$this->inertia('Index', [
    // 页面的props
    'foo' => 'bar'
])

// 或使用全局 Inertia 类
Inertia::render('Index', [
    // 页面的props
    'foo' => 'bar'
]);

注册扩展组件

在包的composer.json中添加如下配置

{
  // 省略其它配置
  "extra": {
    "qscmf": {
      "antd-admin": {
        "component": {
          "【container注册位置】": "【目标组件路径】",
          "Column.Extra": "resourses/js/Component/Extra.tsx"
        }
      }
    }
  }
}

其中container注册位置可参考前端库文档=自定义组件

quansitech / antd-admin

Maintainers

Details

README

安装

使用

通用组件

自定义页面

注册扩展组件