Cấu trúc Mã nguồn

Dự án này sử dụng mô hình tổ chức theo tính năng (Feature-Based Structure) giúp cho mã nguồn có tính đóng gói cao và dễ dàng bảo trì.

1. Cấu trúc thư mục định hướng

Dưới đây là sơ đồ cấu trúc thư mục chính của dự án:

src/
├── assets/          # Chứa các tài nguyên tĩnh như hình ảnh, biểu tượng (icons), styles chính.
├── components/      # Các component dùng chung cho toàn bộ dự án (Button, Input, Tooltip...).
├── composables/     # Các logic xử lý chung (Global hooks) như Query, Helper...
├── configs/         # Các hằng số, cấu hình router, axios client.
├── layouts/         # Các khung giao diện chính (Default layout, Auth layout).
├── services/        # Định nghĩa các cuộc gọi API với backend, chia theo từng tài liệu service.
├── stores/          # Pinia stores chung (quản lý Auth, cấu hình chung).
├── types/           # Định nghĩa các TypeScript Interfaces/Types cho toàn bộ dự án.
├── utils/           # Các hàm tiện ích dùng chung (format tiền, xử lý ngày tháng...).
└── views/           # Thư mục quan trọng nhất chứa các "Feature Modules".

2. Tổ chức Modules bên trong `src/views/`

Mỗi module trong src/views/ (ví dụ: campaign, facebook, server-management) thường tuân theo cấu trúc chuẩn sau:

feature-name/
├── components/      # Các component chỉ dành riêng cho module này.
├── composables/     # Các logic liên quan đến dữ liệu (Fetch, Mutation) dành riêng cho module.
├── stores/          # Pinia store cục bộ cho module (quản lý state riêng).
└── IndexView.vue    # Trang chính đóng vai trò entry point cho module.

Việc tổ chức như vậy giúp chúng ta dễ dàng tìm kiếm mã nguồn theo từng module cụ thể khi cần chỉnh sửa hoặc thêm mới tính năng.

3. Quy ước viết mã

Vue API: Sử dụng script setup lang="ts" cho toàn bộ các component mới.

Tên Component: Sử dụng PascalCase cho file component (ví dụ: CreateModal.vue).

Tên Biến/Hàm: Sử dụng camelCase (ví dụ: isFetching, handleLoginAll).

Styles: Sử dụng các tiện ích của Tailwind CSS là chính, kết hợp với các CSS module (nếu cần) thông qua class style đặc thù của Naive UI.

State Management:

Sử dụng computed cho các dữ liệu phái sinh.

Sử dụng reactive/ref cho dữ liệu cục bộ của component.

Chuyển sang sử dụng bộ nhớ cache của Vue Query thay vì lưu mảng dữ liệu thô vào store nếu không cần thiết chia sẻ giữa nhiều trang khác nhau.

4. Quy trình xử lý dữ liệu (API Lifecycle)

Quy trình chuẩn để hiển thị và cập nhật dữ liệu:

Định nghĩa hàm API trong src/services/api/.

Tạo Composable (ví dụ: useUserFacebookList) sử dụng useQuery trong thư mục composables của module.

Sử dụng Composable trong IndexView.vue hoặc các sub-component.

Khi cần cập nhật (Mutation), sử dụng useMutation và gọi invalidateQueries để tự động cập nhật lại giao diện.

Code structure

Cấu trúc Mã nguồn#

1. Cấu trúc thư mục định hướng#

2. Tổ chức Modules bên trong src/views/#

3. Quy ước viết mã#

4. Quy trình xử lý dữ liệu (API Lifecycle)#

Cấu trúc Mã nguồn

1. Cấu trúc thư mục định hướng

2. Tổ chức Modules bên trong `src/views/`

3. Quy ước viết mã

4. Quy trình xử lý dữ liệu (API Lifecycle)