Quản lý cấu hình thống nhất cho Ant Design Pro - 88win

Là một “CRUD boy” chính hiệu, tôi thường xuyên phải tạo ra các dự án quản trị backend mới. Nói chính xác hơn thì công việc của tôi thường xoay quanh việc sử dụng phím tắt Ctrl+C / Ctrl+V để sao lịch thi đấu ngoại hạng anh 2025 chép những dự án cũ.

Tuy nhiên, trong Ant Design 88win Pro, có rất nhiều thiết lập không được tập trung vào một file cấu hình duy nhất mà lại phân tán ở nhiều nơi khác nhau. Điều này khiến việc chỉnh sửa trở nên phức tạp và tốn thời gian. Ví dụ như:

• Tiêu đề thanh trên cùng
• Tiêu đề trang đăng nhập
• Logo hiển thị ở cả thanh trên cùng lẫn trang đăng nhập

Việc phải tìm kiếm các thiết lập rải rác khắp nơi không chỉ làm tiêu hao trí óc mà còn khiến mái tóc vốn đã thưa dần của tôi thêm phần khan hiếm. Vì vậy, việc quản lý tất cả các thiết lập tại một nơi là giải pháp tối ưu nhất.

File cấu hình thống nhất nằm ở đâu?

File cấu hình mặc định là config/defaultSettings.ts. Mặc dù tại đây đã định nghĩa một số thiết lập, nhưng ví dụ như tiêu đề trang đăng nhập thì lại không chịu sự kiểm soát từ file này.

Sử dụng tiêu đề từ file cấu hình cho trang đăng nhập

import defaultSettings from '@/../config/defaultSettings';
const { title } = defaultSettings;
<span className={styles.title}>{title}</span>

Trong đoạn mã trên, ký hiệu @ đại diện cho đường dẫn được định nghĩa trong file jsconfig.json:

{
 "compilerOptions": {
  "emitDecoratorMetadata": true,
  "experimentalDecorators": true,
  "baseUrl": ".",
  "paths": {
   "@/*": ["./src/*"]
  }
 }
}

Đối với các trang khác, bạn cũng có thể áp dụng cách tương tự để đưa tất cả các thiết lập về một điểm tập trung. Điều này sẽ giúp tăng đáng kể hiệu suất khi cần copy-paste dự án sau này.

Thiết lập tiêu đề cho trang tải

Trong file config/config.ts, cấu hình layout đã đọc tiêu đề từ defaultSettings:

import defaultSettings from './defaultSettings';
 layout: {
  // 
  //locale: true,
  siderWidth: 208,
  ...defaultSettings,
 },

Do đó, bạn chỉ cần chỉnh sửa trực tiếp trong file src/pages/document.ejs:

<title><%= context.config.layout.title%></title>
<link rel="icon" href="<%= context.config.publicPath +'favicon.ico'%>" type="image/x-icon" />

Như vậy, mọi thiết lập liên quan đến tiêu đề đều đã được quy tụ về một nơi duy nhất, giúp quá trình phát triển dự án trở nên gọn gàng và hiệu quả hơn rất nhiều.