Strapi v4内容管理器动态区块添加时视图自定义需求

一、替换动态区块默认图标为预览图 #

Strapi官方文档虽未直接提供修改动态区块图标的API，但可通过自定义插件覆盖核心组件的方式实现：

1. 创建自定义Admin插件
   执行命令生成插件：

   yarn strapi generate plugin custom-dz-preview
   

2. 覆盖核心组件
   在自定义插件的admin/src/index.js中配置组件覆盖逻辑，替换Content Manager里动态区块选择弹窗的卡片组件：

   import { override } from '@strapi/admin/strapi-admin';
   import CustomComponentCard from './components/CustomComponentCard';
   
   export default {
     register(app) {},
     bootstrap(app) {
       // 替换原始的ComponentCard组件
       override(
         'ContentManager.components.DynamicZone.AddComponentModal.ComponentCard',
         CustomComponentCard
       );
     },
   };
   

3. 编写自定义卡片组件
   创建admin/src/components/CustomComponentCard.jsx，将默认图标替换为预览图：

   import React from 'react';
   import { Card, Typography } from '@strapi/design-system';
   // 导入对应组件的预览图，或从组件配置中读取远程地址
   import HeroPreview from '../preview-images/hero-section.png';
   
   const CustomComponentCard = ({ component, onClick }) => {
     return (
       <Card onClick={onClick} padding={4} hasBorder>
         <div style={{ textAlign: 'center' }}>
           <img 
             src={HeroPreview} 
             alt={component.label} 
             style={{ width: '80px', height: '80px', objectFit: 'cover' }} 
           />
           <Typography variant="pi" fontWeight="bold" mt={2}>
             {component.label}
           </Typography>
         </div>
       </Card>
     );
   };
   
   export default CustomComponentCard;
   

   若需更灵活的预览图管理，可在内容类型的组件配置中添加自定义字段（如previewImage）存储媒体库文件URL，再在组件中通过component.previewImage读取渲染。

二、添加鼠标悬停预览功能 #

若替换图标成本较高，可通过自定义组件实现悬停显示预览的效果：

1. 沿用上述自定义插件的基础结构，修改CustomComponentCard.jsx添加悬停逻辑：

   import React, { useState } from 'react';
   import { Card, Typography, Tooltip } from '@strapi/design-system';
   import HeroPreview from '../preview-images/hero-section.png';
   
   const CustomComponentCard = ({ component, onClick }) => {
     const [isHovered, setIsHovered] = useState(false);
   
     return (
       <Tooltip
         label={
           <img 
             src={HeroPreview} 
             alt={`${component.label} 预览`} 
             style={{ width: '250px', height: 'auto', borderRadius: '4px' }} 
           />
         }
         visible={isHovered}
         placement="top"
       >
         <Card
           onClick={onClick}
           padding={4}
           hasBorder
           onMouseEnter={() => setIsHovered(true)}
           onMouseLeave={() => setIsHovered(false)}
         >
           {/* 保留默认图标或替换为小型缩略图 */}
           <div style={{ textAlign: 'center' }}>
             <Typography variant="pi" fontWeight="bold" mt={2}>
               {component.label}
             </Typography>
           </div>
         </Card>
       </Tooltip>
     );
   };
   
   export default CustomComponentCard;
   

2. 启用插件
   在项目的config/plugins.js中启用自定义插件：

   module.exports = ({ env }) => ({
     'custom-dz-preview': {
       enabled: true,
       resolve: './src/plugins/custom-dz-preview',
     },
   });
   

最后重启Strapi服务，即可在Content Manager的动态区块选择弹窗中看到自定义效果。

内容的提问来源于stack exchange，提问作者Egor Morozov