AdminJS 不会使用自定义 React 组件覆盖默认仪表板

Question

所以，我刚刚开始使用 adminjs，并一直尝试用我自己的自定义组件覆盖默认仪表板。我阅读了文档，我不认为我做错了什么？但它仍然无法加载该组件。我从一个基本组件开始，看看它是否有效。 它正在初始化，但不会覆盖默认仪表板。

AdminJS initialized with dashboard: { component: 'Dashboard' }

下面提供了代码 仪表板.jsx：

import React from 'react';
import { Box } from '@adminjs/design-system';
import { useTranslation } from 'adminjs';

const Dashboard = () => {
    const { translateMessage } = useTranslation();
    console.log('dashboard component loading...')
    return (
        <Box>
            <h1>{translateMessage('helloMessage', 'Hello')}</h1>
        </Box>
    );
};

export default Dashboard;

admin.js：

import AdminJS from 'adminjs';
import { Database, Resource } from '@adminjs/sequelize';
import Customers from './src/models/Customers.js';
import Product from './src/models/Product.js';
import People from './src/models/People.js';
import Companies from './src/models/Companies.js';
import Leads from './src/models/Leads.js';
import Offers from './src/models/Offers.js';
import { ComponentLoader } from 'adminjs';

const componentLoader = new ComponentLoader();

const Components = {
    Dashboard: componentLoader.add('Dashboard', './src/components/Dashboard.jsx')
};

AdminJS.registerAdapter({ Database, Resource });

const adminOptions = {
    dashboard: {
        component: Components.Dashboard
    },
    componentLoader,
    resources: [{
        resource: Customers,
        options: {
            parent: null,
            properties: {
                id: {
                    isVisible: { list: false, edit: false, show: false },
                },
                type: {
                    position: 1,
                    availableValues: [
                        { value: 'company', label: 'Company' },
                        { value: 'person', label: 'Person' },
                    ],
                },
                name: {
                    position: 2,
                },
                email: {
                    position: 3,
                },
                phone: {
                    position: 4,
                },
                country: {
                    position: 5,
                },
            },
        },
    },
    {
        resource: People,
        options: {
            parent: null,
        },
    },
    {
        resource: Companies,
        options: {
            parent: null,
        },
    },
    {
        resource: Leads,
        options: {
            parent: null,
            properties: {
                type: {
                    availableValues: [
                        { value: 'company', label: 'Company' },
                        { value: 'person', label: 'Person' },
                    ],
                },
            },
        },
    },
    {
        resource: Offers,
        options: {
            parent: null,
        },
    },
    {
        resource: Product,
        options: {
            parent: null,
        },
    },
    ],
    rootPath: '/admin',
};

export default adminOptions;

服务器.js：

import AdminJS from 'adminjs'
import AdminJSExpress from '@adminjs/express'
import express from 'express'
import dotenv from 'dotenv'
import sequelize from './src/config/db.js';
import { Database, Resource } from '@adminjs/sequelize';
import adminOptions from './admin.js';

dotenv.config();

const PORT = 3000;

const start = async () => {
    const app = express()
    AdminJS.registerAdapter({ Database, Resource });
    const admin = new AdminJS(adminOptions);
    console.log('AdminJS initialized with dashboard:', admin.options.dashboard);


    const adminRouter = AdminJSExpress.buildRouter(admin)
    app.use(admin.options.rootPath, adminRouter)

    app.listen(PORT, async () => {
        console.log(`AdminJS started on http://localhost:${PORT}${admin.options.rootPath}`)

        try {
            await sequelize.authenticate();
            console.log("database connected successfully")

            await sequelize.sync();
            console.log("database models synchronized")
        }
        catch (err) {
            console.log("error connecting to database", err)
        }
    })
}

start()

我尝试记录有关它的任何信息，但似乎它根本没有加载组件？ 任何帮助或建议将不胜感激。谢谢！

Answer 1

如果有人遇到同样的问题，只需删除 .adminjs 文件夹即可。重新启动或重新加载，它将再次捆绑。我知道 AdminJS 上的捆绑是如何工作的。