如何自定义覆盖Strapi V4的管理员欢迎页面UI？

Strapi V4的后台欢迎页面属于admin面板核心组件，需通过扩展admin源码的方式覆盖，具体步骤如下：

1. 搭建自定义目录结构 #

在项目根目录创建src/admin文件夹（无则新建），再构建如下层级：

src/admin/
└── src/
    └── components/
        └── Welcome/
            └── index.js

2. 编写自定义欢迎组件 #

在src/admin/src/components/Welcome/index.js中写入自定义UI代码，示例如下：

import React from 'react';
import { Box, Typography } from '@strapi/design-system';

const Welcome = () => {
  return (
    <Box padding={8} textAlign="center">
      <Typography variant="alpha">欢迎来到我的专属Strapi后台</Typography>
      <Typography variant="beta" marginTop={4}>
        这里是自定义的欢迎页面内容区域
      </Typography>
    </Box>
  );
};

export default Welcome;

3. 替换默认组件 #

在src/admin/src下新建app.js文件，通过Strapi的注册方法替换默认组件：

import Welcome from './components/Welcome';

export default {
  register(app) {
    app.registerComponent('Welcome', Welcome);
  },
};

4. 重新构建admin面板 #

在项目根目录执行命令重建admin：

npm run build
# 或使用yarn
yarn build

5. 启动项目验证 #

启动Strapi服务后，登录后台即可看到自定义的欢迎页面：

npm run develop

注意事项 #

• 自定义组件建议使用Strapi官方提供的@strapi/design-system组件库，保证后台风格统一
• 若需添加数据统计、快捷操作等复杂功能，可在组件内调用Strapi API获取数据
• 每次修改admin自定义代码后，必须重新构建admin面板才能生效

内容的提问来源于stack exchange，提问作者Isuru Sampath