Cấu Trúc Mã Nguồn — Admin Dashboard Traffic Tools V2

1. Cây thư mục

admin/
├── src/
│   ├── assets/                   ← Tài nguyên tĩnh qua build pipeline
│   │   ├── icons/                ← Icon SVG tùy chỉnh
│   │   ├── images/               ← Hình ảnh trong UI
│   │   └── styles/
│   │       ├── index.scss        ← Import toàn bộ CSS global
│   │       └── tailwind.scss     ← Khai báo Tailwind directives
│   ├── components/               ← Components dùng chung toàn ứng dụng
│   │   ├── BulkActions.vue       ← Thanh hành động hàng loạt
│   │   ├── block/                ← Block components (card, panel)
│   │   ├── common/               ← Components phổ biến (DatePicker, SearchInput)
│   │   ├── header/               ← HeaderBar và các thành phần header
│   │   ├── helper/               ← Components hỗ trợ (tooltip, popover)
│   │   ├── icon/                 ← Wrapper components cho icon
│   │   ├── pagination/           ← Component phân trang tùy chỉnh
│   │   └── progress/             ← Component thanh tiến trình
│   ├── composables/              ← Vue composables (logic tái sử dụng)
│   │   ├── auth.ts               ← Composable xác thực
│   │   ├── format.ts             ← Định dạng số, ngày, trạng thái
│   │   ├── i18n.ts               ← Tiện ích đa ngôn ngữ
│   │   ├── render.ts             ← Render động cột bảng Naive UI
│   │   ├── router.ts             ← Tiện ích router (replaceParamsInPath)
│   │   ├── toggle.ts             ← Quản lý trạng thái boolean
│   │   ├── useBulkSelection.ts   ← Chọn nhiều bản ghi trong bảng
│   │   └── utils.ts              ← Tiện ích tổng hợp (useHelper, useEnv, ...)
│   ├── configs/                  ← Cấu hình hệ thống
│   │   ├── axios.ts              ← Axios instance + interceptors
│   │   ├── colors.ts             ← Bảng màu hệ thống
│   │   ├── theme/                ← Cấu hình theme Naive UI
│   │   ├── theme.ts              ← Theme override cho Naive UI
│   │   └── webhook-axios.ts      ← Axios instance riêng cho webhook
│   ├── data/                     ← Dữ liệu tĩnh và hằng số
│   │   ├── constants/
│   │   │   └── router.ts         ← Định nghĩa toàn bộ RouteName
│   │   ├── menu/                 ← Cấu hình menu sidebar theo nhóm
│   │   ├── sidebarMenu.ts        ← Cấu hình tổng hợp sidebar menu
│   │   └── vietnamLocations.ts   ← Danh sách tỉnh thành Việt Nam
│   ├── layouts/                  ← Khung bố cục trang
│   │   ├── LayoutDefault.vue     ← Layout chính sau đăng nhập
│   │   └── components/
│   │       ├── SidebarMenu.vue   ← Menu điều hướng dọc
│   │       └── HeaderBar.vue     ← Thanh tiêu đề với breadcrumb
│   ├── plugins/
│   │   └── i18n.ts               ← Cấu hình vue-i18n, locale options
│   ├── router/
│   │   ├── index.ts              ← Router instance + beforeEach/afterEach guard
│   │   └── modules/              ← Route definitions theo chức năng
│   │       ├── authFactor.ts     ← Route /auth-factor
│   │       ├── autoSearch.ts     ← Route /auto-search và children
│   │       ├── campaign.ts       ← Route /campaigns
│   │       ├── dashboard1.ts     ← Route /dashboard1 và children
│   │       ├── errors.ts         ← Route 404, 403
│   │       ├── remaining.ts      ← Route /login, /signup (không có layout)
│   │       ├── reportDaily.ts    ← Route /report-daily
│   │       ├── reportDashboard.ts ← Route /report-dashboard
│   │       ├── server-management.ts ← Route /system-management và children
│   │       ├── task.ts           ← Route /tasks
│   │       └── user-management.ts ← Route /user-management và children
│   ├── services/                 ← Lớp gọi API
│   │   ├── api/
│   │   │   ├── auth.ts
│   │   │   ├── autoSearch.ts
│   │   │   ├── backup-proxies.ts
│   │   │   ├── campain.ts
│   │   │   ├── dashBoard.ts
│   │   │   ├── location.ts
│   │   │   ├── negativeSeo.ts
│   │   │   ├── package.ts
│   │   │   ├── profiles.ts
│   │   │   ├── provider.ts
│   │   │   ├── proxies.ts
│   │   │   ├── reports.ts        ← Class ReportApiService
│   │   │   ├── reports/          ← Sub-services cho module báo cáo
│   │   │   ├── serverPerformance.ts
│   │   │   ├── servers.ts
│   │   │   ├── task.ts
│   │   │   ├── trafficNatural.ts
│   │   │   └── users.ts
│   │   └── mockData.ts           ← Dữ liệu mock cho development
│   ├── stores/
│   │   ├── authStore.ts
│   │   ├── appStore.ts
│   │   ├── reportStore.ts
│   │   └── report/               ← Store con cho module báo cáo
│   ├── types/
│   │   ├── index.ts              ← Re-export toàn bộ namespace
│   │   ├── breadcrumb.d.ts
│   │   ├── http.d.ts             ← APIResponseSuccess, Pagination
│   │   ├── pagination.d.ts
│   │   └── modules/              ← Kiểu từng module nghiệp vụ
│   ├── utils/
│   │   ├── countries.ts          ← Danh sách quốc gia
│   │   └── date.ts               ← Hàm format ngày tháng
│   ├── views/                    ← Màn hình nghiệp vụ
│   │   ├── auth/                 ← Đăng nhập, đăng ký
│   │   ├── auth-factor/          ← Xác thực 2FA
│   │   ├── auto-search/          ← Tìm kiếm tự động
│   │   ├── campain/              ← Quản lý chiến dịch
│   │   ├── dashboard1/           ← Thống kê hệ thống
│   │   ├── errors/               ← Trang lỗi 404, 403
│   │   ├── profile-management/   ← Quản lý Browser Profile
│   │   ├── report-daily/         ← Báo cáo hàng ngày
│   │   ├── report-dashboard/     ← Dashboard báo cáo
│   │   ├── server-management/    ← Quản lý hạ tầng
│   │   ├── task/                 ← Danh sách tác vụ
│   │   └── user-management/      ← Quản lý người dùng
│   ├── App.vue                   ← Root component
│   └── main.ts                   ← Entry point, khởi tạo app
├── locales/
│   ├── vi-VN.json
│   ├── en-US.json
│   └── _schema.json
├── public/
│   ├── runtime.config.js         ← window.configs injection point
│   ├── favicon.ico
│   └── fonts/                    ← Font icon tùy chỉnh
├── deploy/
│   ├── development/Dockerfile
│   └── production/Dockerfile
├── docs/
├── .env.development
├── .env.staging
├── .env.release
├── .env.production
├── package.json
├── vite.config.ts
└── tsconfig.json

2. Hệ thống kiểu dữ liệu

2.1. Namespace Auth

2.2. Namespace AutoSearchKeyword

Item — Một nhóm từ khóa tìm kiếm:

SearchDataItem — Một kết quả tìm kiếm cụ thể:

Enum AutoSearchEngine:

Enum SearchEngineType:

2.3. Namespace Server

2.4. Namespace ServerPerformance

2.5. Namespace Proxy

2.6. Namespace Task

2.7. Namespace Provider

2.8. Interface Profile

2.9. Interface Activity

3. Chi tiết module views

3.1. Xác thực (`views/auth/`)

views/auth/
├── LoginView.vue
├── SignUpView.vue
└── composables/
    └── useLoginAuth.ts

useLoginAuth.ts chứa:

handleLogin(email, password): Gọi authStore.login(), sau đó authStore.getMe(). Kiểm tra profile.two_factor để chuyển sang màn hình OTP hay QR.

verifyCode(otp): Gọi POST /api/user/verify-totp. Khi thành công, lưu token vào localStorage, đặt move_to_dashboard = 'true' và điều hướng vào Dashboard.

generateQR(): Gọi GET /api/user/generate-totp để lấy mã QR cho lần thiết lập 2FA đầu tiên.

3.2. Tìm kiếm tự động (`views/auto-search/`)

views/auto-search/
├── IndexView.vue
├── components/
│   ├── GoogleAds.vue
│   ├── CocCocAds.vue
│   ├── ServerPerformance.vue
│   └── server-performance/
│       └── composables/
│           └── useServerPerformanceCharts.ts
├── composables/
│   ├── useDataTableServerDetail.ts
│   └── server-performance/
│       └── useServerPerformanceColumns.ts
└── stores/

GoogleAds.vue và CocCocAds.vue cung cấp:

Danh sách nhóm từ khóa với phân trang và tìm kiếm.

Tạo mới hàng loạt (nhiều từ khóa cùng lúc).

Cập nhật cấu hình: engine, thiết bị, số kết quả, vị trí địa lý.

Xem kết quả tìm kiếm chi tiết và lịch sử.

Cập nhật action_status và confirm_status cho từng kết quả.

Reset từ khóa về trạng thái ban đầu.

Xuất dữ liệu ra Excel.

ServerPerformance.vue cung cấp:

Bảng tổng hợp hiệu suất tất cả Worker.

Biểu đồ phân tích theo khung giờ (0-23h) cho từng máy chủ.

Các chỉ số: process, success, fail, captcha, error, unknown, notfound, waiting.

Bộ lọc theo ngày để xem hiệu suất lịch sử.

3.3. Quản lý hệ thống (`views/server-management/`)

views/server-management/
├── IndexView.vue
├── servers/IndexView.vue
├── proxies/IndexView.vue
├── backup-proxies/IndexView.vue
├── packages/IndexView.vue
└── providers/IndexView.vue

proxies/IndexView.vue có các tính năng đặc biệt:

Import proxy từ file Excel mẫu.

Import hàng loạt qua apiProxies.uploadProxy(formData) với Content-Type multipart/form-data.

Import tự động từ nguồn bên ngoài qua apiProxies.uploadProxyv2() với timeout 5 phút.

Kích hoạt/vô hiệu hóa từng proxy hoặc hàng loạt.

backup-proxies/IndexView.vue có thêm:

Kiểm tra sức khỏe từng proxy qua apiBackupProxies.testProxy(id).

Import từ Proxifly qua apiBackupProxies.importFromProxifly().

Kiểm tra sức khỏe toàn bộ pool qua apiBackupProxies.healthCheck().

providers/IndexView.vue có thêm:

Sắp xếp thứ tự ưu tiên nhà cung cấp bằng drag-and-drop, lưu qua apiProviders.updateSort(data).

Xem lịch sử sử dụng dữ liệu qua apiProviders.getDataUsage(params).

3.4. Quản lý người dùng (`views/user-management/`)

views/user-management/
├── IndexView.vue
├── users/UserView.vue
└── activities/ActivityView.vue

ActivityView.vue hiển thị nhật ký với: tên người dùng, hành động, tên model và ID bản ghi bị tác động, giá trị trước/sau khi thay đổi (JSON diff), IP, User-Agent và thời gian.

4. Quy tắc đặt tên và tổ chức code

4.1. Quy tắc tên file

Loại	Quy tắc	Ví dụ
Vue Component	PascalCase	`GoogleAds.vue`, `UserView.vue`
TypeScript Composable	camelCase với tiền tố `use`	`useLoginAuth.ts`, `useBulkSelection.ts`
TypeScript Utility	camelCase	`utils.ts`, `format.ts`
Pinia Store	camelCase với hậu tố `Store`	`authStore.ts`, `appStore.ts`
Service API	camelCase	`autoSearch.ts`, `proxies.ts`
Route Module	kebab-case	`server-management.ts`, `user-management.ts`

4.2. Quy tắc import

4.3. Quy tắc component script

Mọi file .vue phải dùng <script setup lang="ts">:

<script setup lang="ts">
const props = defineProps<{
  data: Server.Item[]
  loading: boolean
}>()

const emit = defineEmits<{
  (e: 'refresh'): void
  (e: 'delete', id: number): void
}>()
</script>

4.4. Auto-import globals

unplugin-auto-import tự động import vào mọi file:

Vue core APIs: ref, computed, watch, watchEffect, onMounted, nextTick, v.v.

Vue Router: useRouter, useRoute.

Pinia: defineStore, storeToRefs.

VueUse: useUrlSearchParams, useDebounceFn, useEventBus, useClipboard.

Naive UI: useDialog, useMessage, useNotification, useLoadingBar.

Zod: z.

Tất cả composables trong src/composables/**.

Tất cả stores trong src/stores/**.

Tất cả service APIs trong src/services/api/**.

unplugin-vue-components tự động resolve và import tất cả Naive UI components trong template.

4.5. Quy tắc xử lý lỗi

Mọi lời gọi API phải được bọc trong try-catch và dùng showMessageError:

4.6. Quy tắc xác nhận trước khi xóa

Mọi thao tác xóa phải hiển thị dialog xác nhận:

Code Structure

Cấu Trúc Mã Nguồn — Admin Dashboard Traffic Tools V2#

1. Cây thư mục#

2. Hệ thống kiểu dữ liệu#

2.1. Namespace Auth#

2.2. Namespace AutoSearchKeyword#

2.3. Namespace Server#

2.4. Namespace ServerPerformance#

2.5. Namespace Proxy#

2.6. Namespace Task#

2.7. Namespace Provider#

2.8. Interface Profile#

2.9. Interface Activity#

3. Chi tiết module views#

3.1. Xác thực (views/auth/)#

3.2. Tìm kiếm tự động (views/auto-search/)#

3.3. Quản lý hệ thống (views/server-management/)#

3.4. Quản lý người dùng (views/user-management/)#

4. Quy tắc đặt tên và tổ chức code#

4.1. Quy tắc tên file#

4.2. Quy tắc import#

4.3. Quy tắc component script#

4.4. Auto-import globals#

4.5. Quy tắc xử lý lỗi#

4.6. Quy tắc xác nhận trước khi xóa#