# Công nghệ sử dụng

## Tổng quan công nghệ

| Lĩnh vực | Công nghệ | Phiên bản |
|-----------|-----------|-----------|
| Framework | Vue.js | 2.7.10 |
| State (chính) | Vuex | 3.6.2 |
| State (bổ sung) | Pinia | 2.1.7 |
| Router | Vue Router | 3.5.1 |
| UI Library | View Design (iView) | 4.2.0 |
| CSS Framework | Tailwind CSS | 1.9.6 |
| CSS Preprocessor | SASS | 1.32.7 |
| CSS Post-processing | PostCSS + Autoprefixer + cssnano | 8 / 10.4.5 / 7.0.7 |
| HTTP Client | Axios | 0.20.0 |
| Real-time | Socket.io Client | 4.7.5 |
| Local DB | PouchDB | 9.0.0 |
| Remote DB | CouchDB | (server-side) |
| Bundler | Webpack (via Vue CLI 5) | - |
| Transpiler | Babel 7 | 7.12.16 |
| Linter | ESLint | 8.35.0 |
| Formatter | Prettier | 2.6.0 |
| Extension API | webextension-polyfill | 0.12.0 |
| Messaging | webext-bridge | 6.0.1 |
| i18n | vue-i18n | 8.26.5 |
| Validation | Joi + AJV | 17.13.3 / 8.17.1 |
| Logging | loglevel | 1.9.2 |
| Analytics | vue-matomo | 4.2.0 |
| SEO | vue-meta | 2.4.0 |

## Chi tiết từng nhóm

### Frontend Framework & UI

#### Vue 2.7.10
- Sử dụng **Options API** (KHÔNG dùng Composition API)
- JSDoc types (KHÔNG dùng TypeScript)
- Single File Components (`.vue`)

#### View Design (iView) 4.2.0
- Thư viện UI component chính
- Cung cấp: Button, Table, Modal, Form, Menu, etc.

#### Tailwind CSS 1.9.6
- Utility-first CSS framework
- Cấu hình tại `tailwind.config.js`

#### Các thư viện UI bổ sung
| Thư viện | Mục đích |
|----------|----------|
| vue-apexcharts + apexcharts | Biểu đồ thống kê |
| @fullcalendar/vue | Lịch (calendar view) |
| vue-cool-lightbox | Lightbox xem ảnh |
| vue-color | Color picker |
| vuedraggable | Kéo thả (drag & drop) |
| vue-zoom-on-hover | Zoom ảnh khi hover |
| vue-lazyload | Lazy load ảnh |
| vue-switches | Toggle switch |
| vue-input-tag | Input tags |
| v-tooltip | Tooltip |
| v-mask | Input mask |
| perfect-scrollbar | Custom scrollbar |
| nprogress | Progress bar |
| portal-vue | Render component ở vị trí khác trong DOM |
| vue-chat-scroll | Auto-scroll cho chat |
| vue-click-outside | Xử lý click bên ngoài component |
| vue-clipboard2 | Copy to clipboard |
| vue-debounce | Debounce directive cho input |
| vue-base64-upload | Upload ảnh dạng base64 |
| file-upload-with-preview | Upload file có preview |
| highlight.js | Syntax highlighting |
| vue-json-excel | Xuất dữ liệu ra Excel |

#### Icons
| Thư viện | Mục đích |
|----------|----------|
| @fortawesome/fontawesome-free | Font Awesome 5 icons |
| @fortawesome/vue-fontawesome | Vue component cho FA |
| feather-icons | Feather icon set |
| flag-icon-css | Cờ quốc gia |
| font-awesome | Font Awesome 4 (legacy) |

### State Management

#### Vuex 3.6.2 (chính)
- Chia module theo domain: user, shop, shopee, tiktok, lazada, setting, app
- Persist vào localStorage qua `vuex-persistedstate`

#### Pinia 2.1.7 (bổ sung)
- Stores: user, usage, printer, productUpdate
- Persist qua `pinia-plugin-persistedstate`
- Setup tại `src/app/pinia/setup.js`

### Networking & API

#### Axios 0.20.0
- HTTP client chính
- Adapters:
  - `@vespaiach/axios-fetch-adapter` - Fetch-based adapter (cho Service Worker)
  - `axios-fetch-adapter` - Adapter thay thế
- Request/Response interceptors cho auth tokens

#### Socket.io Client 4.7.5
- Real-time communication với server
- Kết nối đến `wss://ws.autoshopee.com`
- Có thêm `socket.io-client-v2` cho backward compatibility

#### webext-bridge 6.0.1
- Message passing giữa background, content scripts, popup
- Type-safe messaging

### Database & Storage

#### PouchDB 9.0.0
- Document store chạy trên IndexedDB
- Plugins:
  - `pouchdb-find` - Query API (Mango queries)
  - `pouchdb-authentication` - Xác thực với CouchDB
  - `pouchdb-upsert` - Upsert operations
  - `relational-pouch` - Relational data modeling
  - `pouch-box` - Encryption
- Sync 2 chiều với CouchDB remote

#### Các storage khác
| Thư viện | Mục đích |
|----------|----------|
| localforage | Key-value store (IndexedDB/WebSQL/localStorage) |
| ttl-localstorage | localStorage có TTL (time-to-live) |
| js-cookie | Cookie management |
| simple.cache | In-memory cache |

### PDF & File Handling

| Thư viện | Mục đích |
|----------|----------|
| pdf-lib | Tạo và chỉnh sửa PDF |
| pdfjs-dist | Hiển thị PDF (PDF viewer) |
| xlsx | Đọc/ghi file Excel |
| jszip | Tạo/giải nén file ZIP |
| file-saver | Tải file xuống trình duyệt |
| downloadjs | Download helper |
| jimp | Xử lý ảnh (resize, crop, etc.) |

### Cryptography & Security

| Thư viện | Mục đích |
|----------|----------|
| crypto-js | Mã hóa/giải mã (AES, SHA, etc.) |
| @fingerprintjs/fingerprintjs | Device fingerprinting |
| sha256 | SHA-256 hashing |
| md5 | MD5 hashing |
| short-hash | Hash ngắn |

### Utilities

| Thư viện | Mục đích |
|----------|----------|
| lodash | Utility functions (debounce, throttle, merge, etc.) |
| moment + moment-timezone | Xử lý ngày giờ và timezone |
| moment-mini | Phiên bản nhẹ của moment |
| uuid | Tạo unique ID |
| sqids | Tạo short unique ID từ số |
| fuse.js | Fuzzy search |
| joi | Schema validation |
| ajv | JSON Schema validation |
| slugify | Tạo URL slug |
| delay / sleep-promise | Async delay |
| interval-promise | Lặp interval với Promise |
| p-queue / p-map | Concurrent async operations |
| async-retry | Retry logic |
| bluebird | Promise utilities |
| clone | Deep clone objects |
| number-precision | Tính toán số chính xác |
| query-string | Parse/stringify query params |
| html-to-text | Chuyển HTML sang text |
| json-to-graphql-query | Tạo GraphQL query từ JSON |
| random / randomstring | Tạo số/chuỗi ngẫu nhiên |
| array-dedupe | Loại bỏ phần tử trùng trong mảng |
| group-array | Gom nhóm mảng theo key |
| sum-by | Tính tổng theo property |
| short-number | Rút gọn số (1000 -> 1K) |
| unix-timestamp | Xử lý Unix timestamp |
| loglevel | Logging có cấp độ |
| i18n-js | Thư viện i18n bổ sung |
| parse-js | Parsing utilities |

### Encoding & Conversion

| Thư viện | Mục đích |
|----------|----------|
| js-base64 | Encode/decode Base64 |
| b64-to-blob | Chuyển Base64 sang Blob |
| fetch-base64-in-browser | Fetch resource dạng base64 |
| arraybuffer-to-string | Chuyển ArrayBuffer sang string |
| string-to-arraybuffer | Chuyển string sang ArrayBuffer |

### Build & Development Tools

#### WXT 0.20.20
- Build framework cho browser extension (Vite-based)
- HMR cho popup/options pages, auto-reload content scripts
- Tu dong xu ly MV3 (Chrome) / MV2 (Firefox)
- Cau hinh tai `wxt.config.ts`

#### Vite 8
- Module bundler (qua WXT)
- Plugin: `@vitejs/plugin-vue2` (Vue 2 support)
- ESBuild cho transpilation (thay Babel)

#### Code Quality
| Tool | Mục đích |
|------|----------|
| ESLint 8 | Linting JavaScript/Vue |
| eslint-config-airbnb-base | Ruleset Airbnb |
| eslint-config-prettier | Tắt rules xung đột với Prettier |
| eslint-plugin-vue | Linting Vue SFC |
| eslint-plugin-jsdoc | Linting JSDoc |
| eslint-plugin-import | Linting import/export |
| eslint-plugin-node | Linting Node.js |
| eslint-plugin-promise | Linting Promise |
| eslint-plugin-prettier | Chạy Prettier như ESLint rule |
| eslint-import-resolver-alias | Resolve alias cho eslint-plugin-import |
| @vue/eslint-config-standard | ESLint config chuẩn cho Vue |
| Prettier 2 | Code formatting |
| Husky 2 | Git hooks (pre-commit) |

#### Vue Build Tooling
| Tool | Mục đích |
|------|----------|
| vue-template-compiler 2.7.10 | Compile Vue templates |
| vue-loader | Webpack loader cho Vue SFC |
| vue-html-loader | Webpack loader cho HTML trong Vue |
| @vue/devtools 6.2.1 | Vue DevTools cho development |
| vue-devtools 5.1.4 | Vue DevTools standalone |
| pouchdb-debug | Debug mode cho PouchDB |

#### Các công cụ khác
| Tool | Mục đích |
|------|----------|
| cross-env | Cross-platform env variables |
| archiver | Tạo ZIP file (build script) |
| cheerio | HTML parsing (build/test) |
| cssnano | CSS minification |
| postcss | CSS processing pipeline |
| jsonfile | Đọc/ghi JSON |
| minio | S3-compatible storage (deploy) |
| dotenv | Đọc biến môi trường từ file .env |
| core-js | Polyfills cho JavaScript |
| @vue/composition-api | Composition API polyfill cho Vue 2 |
| @vueuse/core | Composable utilities |
| autoprefixer | Tự động thêm vendor prefix CSS |

## Browser Compatibility

| Trình duyệt | Phiên bản tối thiểu | Manifest |
|-------------|---------------------|----------|
| Chrome | 88+ | V3 (service_worker) |
| Firefox | 78+ | V2 (background.scripts) |

### Khác biệt giữa Chrome và Firefox

| Tính năng | Chrome (MV3) | Firefox (MV2) |
|-----------|-------------|---------------|
| Background | Service Worker | Background Script |
| Incognito | split | spanning |
| Extension ID | Tự động | `{8022593c-73bb-441f-b9ff-cbaaf909c82d}` |
| Build command | `npm run build:chrome` | `npm run build:firefox` |
