Umi+React后台管理系统适配4K大屏的优雅方案

适配4K大屏(3840×2160分辨率)需要考虑高DPI显示、布局缩放、字体清晰度等多方面因素。以下是针对Umi+React后台管理系统的完整适配方案：

1. 基础配置

1.1 设置视口和缩放

<!-- 在public/index.html中 -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

1.2 配置Umi的hd方案

在config/config.ts中：

export default {
  // 启用高清方案
  hd: {
    // 根据dpr调整rem基准值
    theme: {
      '@hd': '2px',
    },
  },
  // 其他配置...
}

2. 响应式布局方案

2.1 使用CSS媒体查询

/* 在全局样式文件中 */
@media screen and (min-width: 3840px) {
  :root {
    font-size: 24px; /* 4K下增大基准字体 */
  }

  .container {
    max-width: 80%; /* 控制内容区域宽度 */
    margin: 0 auto;
  }
}

2.2 基于rem的弹性布局

// 在入口文件或layout组件中
function setRem() {
  const baseSize = 16; // 基准大小
  const scale = document.documentElement.clientWidth / 1920; // 设计稿宽度

  document.documentElement.style.fontSize = 
    baseSize * Math.min(scale, 2) + 'px'; // 限制最大缩放2倍
}

window.addEventListener('resize', setRem);
setRem();

3. 高清组件适配

3.1 图表组件(ECharts/antv)

// 初始化图表时设置devicePixelRatio
const chart = echarts.init(dom, null, {
  devicePixelRatio: window.devicePixelRatio > 1 ? 2 : 1
});

3.2 图片资源处理

// 使用Umi的图片处理
import logo from '@/assets/logo@2x.png'; // 准备2x/3x图

// 或者使用动态加载
const imageUrl = window.devicePixelRatio > 2 
  ? require('@/assets/logo@3x.png') 
  : require('@/assets/logo@2x.png');

4. Ant Design Pro组件适配

4.1 修改主题变量

在config/config.ts中：

theme: {
  'font-size-base': '16px', // 基础字体大小
  'layout-header-height': '80px', // 增大头部高度
  'menu-item-height': '60px', // 增大菜单项高度
  'table-padding-vertical': '24px', // 表格内边距
  'table-padding-horizontal': '24px',
}

4.2 自定义组件样式

// src/global.less
.ant-btn {
  padding: 12px 24px;
  font-size: 16px;
}

.ant-table {
  font-size: 16px;

  td, th {
    padding: 16px;
  }
}

5. 性能优化

5.1 按需加载

// 使用dynamicImport拆分大屏专用组件
export default {
  dynamicImport: {
    loading: '@/components/PageLoading',
  },
}

5.2 字体优化

/* 使用更清晰的字体渲染 */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

6. 实用工具函数

// utils/screenAdapter.js
export const is4KScreen = () => {
  return window.screen.width >= 3840 || window.devicePixelRatio >= 2;
};

export const getScaleRatio = (baseWidth = 1920) => {
  return Math.min(window.innerWidth / baseWidth, 2);
};

// 组件中使用
import { is4KScreen, getScaleRatio } from '@/utils/screenAdapter';

const scale = getScaleRatio();
const style = {
  transform: `scale(${scale})`,
  transformOrigin: 'top left',
  width: `${100/scale}%`,
  height: `${100/scale}%`
};

7. 部署注意事项

1. 确保Nginx等服务器配置正确支持高分辨率资源
2. 使用CDN加速大尺寸资源加载
3. 考虑使用WebP格式图片减少体积

通过以上方案，可以优雅地实现Umi+React后台管理系统在4K大屏上的完美展示，同时保持良好的开发体验和代码可维护性。