CẤU TRÚC MÃ NGUỒN: ADMIN FRONTEND (CODE STRUCTURE)

Dự án Admin Frontend của hệ thống Check Domain được tổ chức tuân theo tiêu chuẩn Enterprise Vue Pattern. Cấu trúc này giúp phân tách rõ ràng các ranh giới giữa Giao diện (UI), Xử lý logic (Composables), Trạng thái toàn cục (State), và Tầng giao tiếp mạng (Network/API), từ đó giúp dự án dễ dàng bảo trì và mở rộng trong tương lai.

1. Sơ Đồ Cây Thư Mục Tổng Quan

Dưới đây là kiến trúc thư mục cốt lõi của toàn bộ dự án:

admin/
├── public/                 # Các tài nguyên tĩnh không đi qua bộ Build (favicon, raw static).
├── src/                    #  THƯ MỤC LÕI SOURCE CODE (Chứa toàn bộ logic dự án)
│   ├── App.vue             # Component Root (Gốc) của toàn bộ ứng dụng.
│   ├── main.ts             # Điểm neo (Entry point), khởi tạo Vue, thiết lập Pinia, Router.
│   ├── assets/             # Chứa Images, Icons, và hệ thống Global Stylesheets (Tailwind & SCSS).
│   ├── components/         # Các Base UI Components tái sử dụng (Buttons, Modals, Cards...).
│   ├── composables/        # Custom Vue Hooks chứa các Logic tách rời dùng lại nhiều lần.
│   ├── configs/            # Configs toàn cục (Lõi axios.ts, định nghĩa color.ts, firebase config).
│   ├── layouts/            # Bố cục giao diện trang (VD: Default Layout với SideBar & Header).
│   ├── plugins/            # Cấu hình plugin Vue (VD: i18n cho đa ngôn ngữ dịch thuật).
│   ├── router/             # Nơi quản lý Vue Router (Danh sách đường dẫn, Navigation Guards).
│   ├── services/api/       #  Tầng Network: Định nghĩa toàn bộ API Requests trỏ lên Backend.
│   ├── stores/             # Các trạng thái Global Pinia (auth, user, settings).
│   ├── types/modules/      # Khai báo TypeScript Interfaces đóng vai trò Data Schema.
│   └── views/              # Chứa các giao diện (Pages) từng màn hình riêng biệt gắn vào Router.
├── package.json            # Manifest file, chứa toàn bộ npm scripts và dependencies.
├── tsconfig.json           # Cấu hình rule cho trình biên dịch TypeScript.
├── vite.config.ts          # Cấu hình quy trình Build Vite (Aliases, server port, plugins).
└── tailwind.config.ts      # Bố cục System Design Tokens của Tailwind CSS.

2. Phân Tích Chi Tiết Các Phân Hệ Lõi (Trong `src/`)

Để giúp Lập trình viên mới dễ dàng nắm bắt, dưới đây là chức năng chi tiết của các thư mục quan trọng nhất bên trong src/:

Tầng Giao Diện & Bố Cục (UI Layer)

views/: Chứa các trang (Pages) hoàn chỉnh. Mỗi file trong này thường tương ứng với một Route (đường dẫn URL) cụ thể trên trình duyệt.

layouts/: Chứa các khung giao diện bọc ngoài views. Ví dụ: DefaultLayout sẽ chứa thanh Sidebar menu và Header dùng chung cho mọi trang quản trị, phần nội dung thay đổi sẽ nằm ở giữa (slot/router-view).

components/: Chứa các mảnh ghép giao diện nhỏ (Dumb/Presentational Components) có thể tái sử dụng nhiều lần như Nút bấm (Button), Bảng (Table), Hộp thoại (Modal).

Tầng Xử Lý Logic & Trạng Thái (Logic & State Layer)

composables/: Áp dụng triệt để sức mạnh của Vue 3 Composition API. Nơi đây chứa các hàm logic được tách rời (ví dụ: usePagination, useFormatter) để tái sử dụng ở nhiều component khác nhau mà không bị trùng lặp code.

stores/: Nơi cấu hình Pinia. Quản lý các trạng thái toàn cục (Global State) cần chia sẻ giữa nhiều component mà không cần truyền props phức tạp (Ví dụ: Trạng thái đăng nhập authStore, thông tin người dùng userStore).

Tầng Giao Tiếp Backend (Network Layer)

configs/axios.ts: Cấu hình lõi của Axios, thiết lập Interceptors để đính kèm Token và xử lý cơ chế làm mới Token ngầm (Silent Token Refresh).

services/api/: Trung tâm giao tiếp với Backend. Phân chia thành các module rõ ràng như domains.ts, keywords.ts, users.ts... Mọi lời gọi API từ giao diện đều phải thông qua thư mục này.

🛡️ Tầng Định Nghĩa Dữ Liệu (Typing Layer)

types/modules/: Đặc sản của TypeScript. Chứa các Interface mô phỏng chính xác (mapping 1-1) với cấu trúc cơ sở dữ liệu từ Backend trả về, đảm bảo code không bị lỗi sai kiểu dữ liệu trong quá trình dev.

3. Tầng Cấu Hình Môi Trường (Config Layer)

Các file nằm ngoài cùng gốc dự án chịu trách nhiệm cho việc build và tiêu chuẩn code:

vite.config.ts: Quản lý các plugin tối ưu hoá, thiết lập tự động import (auto-import components/methods), cấu hình Port server dev và bí danh đường dẫn (Path Aliases như @/).

tailwind.config.ts: Khai báo hệ thống Design Tokens (Màu sắc, kích thước, font chữ) phục vụ cho việc sử dụng các class của Tailwind CSS.

Code Structure

CẤU TRÚC MÃ NGUỒN: ADMIN FRONTEND (CODE STRUCTURE)#

1. Sơ Đồ Cây Thư Mục Tổng Quan#

2. Phân Tích Chi Tiết Các Phân Hệ Lõi (Trong src/)#

Tầng Giao Diện & Bố Cục (UI Layer)#

Tầng Xử Lý Logic & Trạng Thái (Logic & State Layer)#

Tầng Giao Tiếp Backend (Network Layer)#

🛡️ Tầng Định Nghĩa Dữ Liệu (Typing Layer)#

3. Tầng Cấu Hình Môi Trường (Config Layer)#