Thiết Kế Tổng Quan — Admin Dashboard Traffic Tools V2

1. Ứng dụng này làm gì

Admin Dashboard là giao diện quản trị của hệ thống Traffic Tools V2. Đây là một SPA (Single-Page Application) xây dựng trên Vue 3, dùng để cấu hình, giám sát và điều phối hoạt động của hệ thống traffic.

Bản thân ứng dụng không chạy bất kỳ tác vụ traffic nào. Toàn bộ việc nó làm là giao tiếp với Backend API Engine qua HTTP, rồi hiển thị kết quả dưới dạng bảng dữ liệu, biểu đồ và form.

Các nhóm chức năng chính

Xác thực người dùng với hỗ trợ 2FA qua Google Authenticator.

Quản lý chiến dịch traffic: tạo, chỉnh sửa, theo dõi tiến độ, xuất báo cáo.

Quản lý từ khóa tìm kiếm tự động cho Google Ads và CocCoc Ads.

Giám sát hiệu suất máy chủ Worker theo thời gian thực, phân tích theo khung giờ.

Quản lý hạ tầng proxy: proxy chính, proxy dự phòng, gói proxy, nhà cung cấp.

Quản lý Browser Profile dùng cho các tác vụ tự động hóa.

Xem nhật ký hoạt động của từng tài khoản trong hệ thống.

Báo cáo thống kê hàng ngày và dashboard tổng hợp.

2. Danh sách màn hình và URL

Toàn bộ cấu trúc điều hướng được định nghĩa trong src/router/modules/. Các route được tự động nạp bằng import.meta.glob và gắn vào layout chính.

2.1. Xác thực

Màn hình	URL	Route name	Mô tả
Đăng nhập	`/login`	`login`	Form nhập email và mật khẩu. Sau khi xác thực xong, hệ thống kiểm tra trạng thái 2FA để chuyển hướng tiếp.
Xác thực 2FA	`/auth-factor`	`auth-factor`	Nhập mã OTP 6 chữ số từ Google Authenticator. Nếu chưa thiết lập 2FA, màn hình này hiển thị mã QR để quét và kích hoạt.
Đăng ký	`/signup`	`signup`	Chỉ khả dụng khi `MODE=development`. Ở môi trường khác sẽ bị redirect về trang đăng nhập.

2.2. Thống kê và báo cáo

Màn hình	URL	Route name	Mô tả
Thống kê hàng ngày	`/report-daily`	`reportDaily.root`	Trang mặc định sau khi đăng nhập. Báo cáo sản lượng traffic theo ngày, lọc được theo khoảng thời gian.
Dashboard báo cáo	`/report-dashboard`	`report-dashboard`	Trung tâm báo cáo với nhiều tab: tổng quan, hiệu suất theo nền tảng, phân tích thương hiệu, xu hướng theo ngày.
Thống kê click quảng cáo	`/dashboard1/click-ads`	`dashboard.click-ads`	Chi tiết các lượt click vào Google Ads và CocCoc Ads.
Thống kê Negative SEO	`/dashboard1/negative-seo`	`dashboard.negative-seo`	Traffic Kill gửi đến website đối thủ, kèm biểu đồ thứ hạng từ khóa theo thời gian.
Thống kê traffic tự nhiên	`/dashboard1/traffic-natural`	`dashboard.traffic-natural`	Traffic mô phỏng hành vi truy cập tự nhiên không qua quảng cáo.

2.3. Tìm kiếm tự động

Màn hình	URL	Route name	Mô tả
Tìm kiếm tự động	`/auto-search`	`auto-search`	Route gốc, tự động chuyển hướng đến tab Google Ads.
Google Ads	`/auto-search/google-search`	`auto-search.google-search`	Quản lý nhóm từ khóa giả lập click quảng cáo Google. Hỗ trợ tạo hàng loạt, cập nhật trạng thái và xem lịch sử kết quả.
CocCoc Ads	`/auto-search/coccoc-search`	`auto-search.cococ-search`	Tương tự Google Ads nhưng dùng engine CocCoc.
Hiệu suất máy chủ	`/auto-search/server-performance`	`auto-search.server-performance`	Theo dõi hiệu suất Worker theo thời gian thực. Biểu đồ phân tích theo khung giờ với các chỉ số: xử lý, thành công, thất bại, captcha, lỗi.
Quản lý vị trí	`/auto-search/location`	`auto-search.location`	Danh sách vị trí địa lý (lat/lng) gán cho các chiến dịch traffic.

2.4. Quản lý hệ thống

Màn hình	URL	Route name	Mô tả
Quản lý máy chủ	`/system-management/server-management`	`system-management.server-management`	Danh sách Worker với thông tin IP, giới hạn tiến trình, số tiến trình hiện tại và trạng thái. Hỗ trợ kích hoạt/vô hiệu hóa và xóa hàng loạt.
Quản lý proxy	`/system-management/proxy-management`	`system-management.proxy-management`	Danh sách proxy IP với đầy đủ thông tin: host, port, username, password, khu vực, nhà cung cấp, ngày hết hạn, giá và trạng thái. Hỗ trợ import từ Excel và xóa hàng loạt.
Quản lý backup proxy	`/system-management/backup-proxy-management`	`system-management.backup-proxy-management`	Proxy dự phòng kích hoạt khi proxy chính gặp sự cố. Hỗ trợ kiểm tra sức khỏe, import từ Proxifly và xóa hàng loạt.
Quản lý gói proxy	`/system-management/proxy-package-management`	`system-management.proxy-package-management`	Theo dõi các gói proxy đã mua: mã gói, tên, giá, nhà cung cấp và trạng thái kích hoạt.
Quản lý nhà cung cấp	`/system-management/proxy-provider-management`	`system-management.proxy-provider-management`	Thông tin nhà cung cấp proxy: tên, tài khoản, domain, loại kết nối (4G/ADSL), chu kỳ reset và dữ liệu sử dụng. Hỗ trợ sắp xếp thứ tự ưu tiên.

2.5. Quản lý người dùng

Màn hình	URL	Route name	Mô tả
Quản lý tài khoản	`/user-management/users`	`user-management.user`	Tạo, chỉnh sửa, xóa tài khoản nhân sự. Hỗ trợ đổi mật khẩu và kích hoạt/vô hiệu hóa.
Nhật ký hoạt động	`/user-management/activities`	`user-management.active`	Lịch sử hành động của từng tài khoản: thao tác gì, trên đối tượng nào, giá trị trước/sau khi thay đổi, IP và User-Agent.

2.6. Các màn hình khác

Màn hình	URL	Route name	Mô tả
Quản lý chiến dịch	`/campaigns`	`campaigns`	Danh sách chiến dịch traffic với thống kê tổng hợp. Hỗ trợ xuất dữ liệu ra Excel theo khoảng thời gian.
Quản lý hồ sơ	`/profile-management`	`profile-management`	Quản lý Browser Profile dùng cho tự động hóa. Theo dõi trạng thái, lần sử dụng cuối, số lần click và tìm kiếm.
Danh sách tác vụ	`/tasks`	`tasks`	Chi tiết các tác vụ traffic đang thực thi: tiến độ, loại traffic, thiết bị và từ khóa.
Trang 404	—	`notFound`	Hiển thị khi URL không khớp với bất kỳ route nào.
Trang 403	—	`forbidden`	Hiển thị khi tài khoản không có quyền truy cập.

3. Luồng xác thực và bảo mật

3.1. Luồng đăng nhập

Người dùng nhập email và mật khẩu tại /login.

Ứng dụng gọi POST /api/user/login. Server trả về AuthToken gồm token, refresh_token, device_token và cờ is_2fa.

authStore.login() lưu AuthToken vào Pinia store và cập nhật sessionStorage.is_2fa.

Ứng dụng gọi GET /api/user/profile để lấy thông tin người dùng, lưu vào authStore.profile.

Kiểm tra profile.two_factor: nếu false thì chuyển đến màn hình quét QR, nếu true thì chuyển đến màn hình nhập OTP.

Sau khi xác thực 2FA thành công qua POST /api/user/verify-totp, token được lưu vào localStorage với key auth_token và sessionStorage.move_to_dashboard được đặt thành 'true'.

Router Guard đọc cờ move_to_dashboard và cho phép vào trang reportDaily.

3.2. Phục hồi phiên tự động

Khi người dùng mở lại tab hoặc F5 trang, Router Guard trong src/router/index.ts thực hiện:

Đọc auth_token từ localStorage và parse thành AuthToken.

Gán token vào authStore.authToken.

Gọi GET /api/user/profile để xác minh token còn hiệu lực.

Nếu thành công: đặt sessionStorage.move_to_dashboard = 'true' và tiếp tục điều hướng.

Nếu thất bại: xóa auth_token khỏi localStorage, ghi log lỗi và redirect về trang đăng nhập.

3.3. Router Guard

router.beforeEach kiểm soát toàn bộ điều hướng theo thứ tự sau:

Nếu đích là trang login và đã có auth_token hợp lệ: phục hồi phiên và vào thẳng Dashboard.

Nếu đích là trang signup và không phải môi trường development: redirect về login.

Nếu authStore.authToken hoặc authStore.profile trống: kiểm tra localStorage. Không có token thì lưu URL hiện tại vào sessionStorage.redirectTo và redirect về login.

Nếu đích là trang auth-factor: luôn cho phép để người dùng hoàn tất 2FA.

Nếu sessionStorage.move_to_dashboard không phải 'true': chặn và redirect về login.

Nếu sessionStorage.redirectTo tồn tại: xóa giá trị này và chuyển người dùng về URL họ muốn truy cập ban đầu.

3.4. Lưu trữ token

Nơi lưu	Dữ liệu	Lý do
`localStorage` (key: `auth_token`)	Toàn bộ `AuthToken` dạng JSON	Tồn tại qua các lần đóng/mở trình duyệt, cho phép phục hồi phiên tự động.
`sessionStorage` (key: `move_to_dashboard`)	Chuỗi `'true'`	Bị xóa khi đóng tab, đảm bảo mỗi phiên mới phải qua xác thực. Ngăn truy cập trực tiếp vào Dashboard khi chưa hoàn tất 2FA.
`sessionStorage` (key: `redirectTo`)	Đường dẫn URL	Sau khi đăng nhập xong, hệ thống đưa người dùng về đúng trang họ muốn vào.
`sessionStorage` (key: `is_2fa`)	`'true'` hoặc `'false'`	Màn hình auth-factor dùng để biết hiển thị form OTP hay form quét QR.
Pinia store (persist)	`sideBarCollapsed`, `i18nLocale`	Ghi nhớ tùy chọn giao diện giữa các phiên qua `pinia-plugin-persistedstate`.

3.5. Xử lý token hết hạn

Khi server trả về HTTP 401, Axios response interceptor trong src/configs/axios.ts tự động gọi useAuthStore().logout(). Hàm này:

Đặt authStore.authToken = null và authStore.profile = null.

Xóa auth_token khỏi localStorage.

Xóa is_2fa và move_to_dashboard khỏi sessionStorage.

Redirect về trang login.

authStore cũng có hàm refreshToken() gọi POST /api/user/refresh để làm mới token trước khi hết hạn, sau đó cập nhật store và localStorage.

4. Layout giao diện

4.1. LayoutDefault

Tất cả trang sau khi đăng nhập đều được bọc trong src/layouts/LayoutDefault.vue, chia màn hình thành hai vùng:

Bên trái — SidebarMenu: Menu điều hướng dọc theo cấp bậc. Hỗ trợ thu gọn (sideBarCollapsed) lưu vào localStorage qua appStore. Khi thu gọn chỉ hiện icon, khi mở rộng hiện đầy đủ tên.

Bên phải — Nội dung chính: HeaderBar phía trên và RouterView bên dưới để render màn hình hiện tại.

4.2. HeaderBar

Breadcrumbs tự động: Tạo từ route.meta.title của các route đang active. Không cần khai báo thủ công ở bất kỳ component nào.

Thông tin tài khoản: Tên và email từ authStore.profile.

Nút đăng xuất: Gọi authStore.logout().

Bộ chọn ngôn ngữ: Chuyển đổi giữa Tiếng Việt và Tiếng Anh, lưu vào appStore.i18nLocale.

router.afterEach chạy sau mỗi lần điều hướng thành công:

Đọc to.matched — mảng tất cả route đang active từ gốc đến lá.

Với mỗi route có meta.title, tạo một breadcrumb gồm text, to và routeName.

Cập nhật appStore.breadcrumbs.

HeaderBar lắng nghe và render tự động.

4.4. Loading bar

window.$loadingBar được mount toàn cục từ Naive UI:

router.beforeEach gọi window.$loadingBar.start() khi bắt đầu xử lý điều hướng.

router.afterEach gọi window.$loadingBar.finish() sau khi hoàn tất.

5. Hệ thống thông báo

Ứng dụng dùng ba kênh thông báo của Naive UI, mount toàn cục trong src/main.ts và truy cập qua window.$message, window.$notification, window.$loadingBar.

Kênh	Khi nào dùng	Thời gian hiển thị
`window.$message.success()`	Tác vụ thành công: lưu cấu hình, tạo bản ghi, xóa xong.	3 giây, tự ẩn.
`window.$message.error()`	Lỗi từ API hoặc lỗi JavaScript.	5 giây, tự ẩn.
`window.$message.warning()`	Cảnh báo: chưa chọn bản ghi, dữ liệu không hợp lệ.	3 giây, tự ẩn.
`window.$message.info()`	Thông tin trung tính không cần hành động.	3 giây, tự ẩn.

Hàm showMessageError trong src/composables/utils.ts là điểm duy nhất xử lý và hiển thị lỗi API. Nó chuẩn hóa lỗi theo thứ tự ưu tiên:

response.data.errors (lỗi validation nhiều trường): nối tất cả thành chuỗi xuống dòng.

response.data.message (chuỗi đơn): dùng trực tiếp.

error.message (lỗi JavaScript thuần): dùng trực tiếp.

defaultMsg hoặc 'An error occurred' làm fallback cuối.

6. Đa ngôn ngữ

Ứng dụng dùng vue-i18n v9, cấu hình trong src/plugins/i18n.ts.

Ngôn ngữ mặc định: Tiếng Việt (vi-VN).

Ngôn ngữ hỗ trợ: vi-VN và en-US.

File ngôn ngữ: locales/vi-VN.json và locales/en-US.json.

Fallback: Nếu key không tồn tại trong ngôn ngữ hiện tại, tự động fallback về Tiếng Anh.

Ngôn ngữ hiện tại lưu vào appStore.i18nLocale, persist qua pinia-plugin-persistedstate.

Thay đổi ngôn ngữ có hiệu lực ngay, không cần tải lại trang.

Trong component Vue dùng useI18n() hoặc $t(). Trong file TypeScript thuần dùng (window as any).$t vì useI18n() chỉ hoạt động trong Vue component context.

7. Axios — lớp giao tiếp API

7.1. Cấu hình

Class AxiosHttp trong src/configs/axios.ts tạo một Axios instance duy nhất:

baseURL: Đọc từ useEnv('VITE_API_SERVER') và nối thêm /api.

timeout: 10,000ms mặc định.

7.2. Request interceptor

Đính kèm Authorization: Bearer {token} vào mọi request.

Nếu có device_token, đính kèm thêm header Device-Token.

Timeout đặc biệt cho các endpoint nặng:

URL chứa /import-all: 300,000ms (5 phút) — import proxy hàng loạt.

URL chứa /get-data-report: 60,000ms (1 phút) — tổng hợp báo cáo lớn.

7.3. Response interceptor

HTTP 200–299: Trả về response bình thường.

HTTP 401: Gọi authStore.logout() và redirect về login.

Lỗi khác: Reject Promise để component xử lý qua showMessageError.

8. Kiểu dữ liệu TypeScript

8.1. Cấu trúc response API

8.2. Tổ chức namespace

Mỗi module có một namespace riêng trong src/types/modules/. File src/types/index.ts re-export tất cả để các file khác chỉ cần import từ một nơi: import type { Auth, Server, Proxy } from '@/types'.

Danh sách namespace: Auth, AutoSearchKeyword, Server, ServerPerformance, Proxy, Campaign, Task, User, Package, Provider, Location, NegativeSeo, TrafficNatural, Activity, Profile.

9. Nguyên tắc thiết kế

Hệ thống xây dựng theo hướng "Convention over Configuration" — các hành vi phổ biến như breadcrumb tự động, xác thực redirect, xử lý lỗi API và loading indicator đều được xử lý tập trung ở tầng framework, không lặp lại ở từng màn hình.

Một số quyết định thiết kế quan trọng:

Toàn bộ HTTP đi qua một Axios instance duy nhất với interceptor tập trung, đảm bảo mọi request đều có header xác thực và mọi lỗi 401 được xử lý nhất quán.

TypeScript namespace tổ chức theo module nghiệp vụ, tránh xung đột tên.

Pinia store chỉ lưu dữ liệu thực sự cần chia sẻ giữa nhiều component. Dữ liệu cục bộ của từng màn hình dùng ref và reactive trong composable riêng.

Auto-import loại bỏ hoàn toàn các câu lệnh import lặp đi lặp lại cho Vue APIs, Pinia, Vue Router và Naive UI.

Mọi thao tác không thể hoàn tác (xóa, vô hiệu hóa) đều yêu cầu xác nhận qua dialog trước khi thực thi.

10. Chi tiết từng module nghiệp vụ

10.1. Module tìm kiếm tự động

Quản lý các nhóm từ khóa dùng để giả lập hành vi tìm kiếm và click quảng cáo.

Luồng hoạt động:

Quản trị viên tạo nhóm từ khóa với cấu hình: từ khóa, engine (Google VN/Google/CocCoc), loại thiết bị, hệ điều hành, số kết quả cần lấy, vị trí địa lý và độ ưu tiên.

Backend Engine thực hiện tìm kiếm thực tế và ghi kết quả vào keyword_results.

Admin Dashboard hiển thị kết quả dưới dạng bảng: URL, vị trí (rank), loại (quảng cáo/tự nhiên), trạng thái hành động và trạng thái xác nhận.

Quản trị viên có thể cập nhật action_status và confirm_status cho từng kết quả.

Trạng thái action_status:

pending — Chờ xử lý, Worker chưa thực hiện hành động.

clicked — Worker đã click thành công.

skipped — Worker bỏ qua theo cấu hình.

error — Worker gặp lỗi khi xử lý.

Tính năng đặc biệt:

Tạo hàng loạt: nhập nhiều từ khóa cùng lúc, mỗi từ khóa một dòng.

Reset từ khóa: xóa toàn bộ kết quả và đặt lại trạng thái để chạy lại.

Lịch sử từ khóa: xem các lần tìm kiếm trước đó.

Xuất Excel: xuất toàn bộ dữ liệu ra file .xlsx.

10.2. Module quản lý chiến dịch

Chiến dịch là đơn vị tổ chức cấp cao nhất, chứa nhiều tác vụ traffic.

Một Campaign chứa nhiều Task.Item.

Mỗi tác vụ có cấu hình riêng: loại traffic, thiết bị, từ khóa, danh sách URL đích, khung giờ hoạt động và thời gian ở lại trang.

Xuất dữ liệu: gọi GET /api/campaign/export với tham số ngày, server trả về file Excel (Blob) được tải xuống tự động qua useDownload.

10.3. Module quản lý Browser Profile

Browser Profile là danh tính kỹ thuật số được Worker dùng khi thực hiện tác vụ tự động hóa.

Thông tin của một Profile:

Tài khoản: email, password, app_password (cho 2FA).

Trạng thái: active, inactive, cooldown, banned.

Thống kê: total_clicks, total_searches, report_task_count, profile_age.

Kỹ thuật: server_id, server_region, used_for.

Khi profile cần nghỉ ngơi, nó chuyển sang cooldown với thời gian kết thúc lưu trong cooldown_until. Worker không dùng profile này cho đến khi hết cooldown.

10.4. Module báo cáo

Cung cấp cái nhìn tổng quan về hiệu quả các chiến dịch chống quảng cáo gian lận.

Loại báo cáo: MALICIOUS_AD, PHISHING_AD, MISREPRESENTATION_AD.

Mức độ nghiêm trọng: LOW, MEDIUM, HIGH, CRITICAL.

Trạng thái: PENDING, SUBMITTING, COMPLETED, FAILED, PARTIAL.

10.5. Module nhật ký hoạt động

Ghi lại mọi hành động của người dùng, phục vụ kiểm toán và bảo mật.

Thông tin được ghi: user_id, action (create/update/delete), model_name, model_id, old_value, new_value, ip_address, user_agent, created_at.

Nhật ký không thể bị xóa hay chỉnh sửa từ Admin Dashboard.

11. Biểu đồ

Apache ECharts (qua vue-echarts): Biểu đồ cột, đường, tròn cho Server Performance và Dashboard.

Chart.js: Biểu đồ đơn giản hơn trong module báo cáo.

D3.js: Trực quan hóa dữ liệu tùy chỉnh không có sẵn trong ECharts hay Chart.js.

12. Xuất dữ liệu ra Excel

Dự án dùng hai thư viện:

xlsx — Đọc/ghi file Excel cơ bản.

xlsx-js-style — Mở rộng của xlsx với hỗ trợ định dạng màu sắc, font và border.

Quy trình xuất từ server: gọi API với responseType: 'blob', server trả về file Excel dạng binary, hàm useDownload(blob, fileName) tạo URL tạm và kích hoạt download tự động.

Một số màn hình xuất Excel trực tiếp phía client bằng xlsx-js-style mà không cần gọi API.

Tổng quan

Thiết Kế Tổng Quan — Admin Dashboard Traffic Tools V2#

1. Ứng dụng này làm gì#

Các nhóm chức năng chính#

2. Danh sách màn hình và URL#

2.1. Xác thực#

2.2. Thống kê và báo cáo#

2.3. Tìm kiếm tự động#

2.4. Quản lý hệ thống#

2.5. Quản lý người dùng#

2.6. Các màn hình khác#

3. Luồng xác thực và bảo mật#

3.1. Luồng đăng nhập#

3.2. Phục hồi phiên tự động#

3.3. Router Guard#

3.4. Lưu trữ token#

3.5. Xử lý token hết hạn#

4. Layout giao diện#

4.1. LayoutDefault#

4.2. HeaderBar#

4.3. Breadcrumb tự động#

4.4. Loading bar#

5. Hệ thống thông báo#

6. Đa ngôn ngữ#

7. Axios — lớp giao tiếp API#

7.1. Cấu hình#

7.2. Request interceptor#

7.3. Response interceptor#

8. Kiểu dữ liệu TypeScript#

8.1. Cấu trúc response API#

8.2. Tổ chức namespace#

9. Nguyên tắc thiết kế#

10. Chi tiết từng module nghiệp vụ#

10.1. Module tìm kiếm tự động#

10.2. Module quản lý chiến dịch#

10.3. Module quản lý Browser Profile#

10.4. Module báo cáo#

10.5. Module nhật ký hoạt động#

11. Biểu đồ#

12. Xuất dữ liệu ra Excel#