# Cấu trúc dự án

## Tổng quan thư mục

```
AutoShopee Kit/
│
├── src/                          # Source code chính
│   ├── app/                      # Vue application (Popup & Options)
│   │   ├── api/                  # HTTP clients theo nền tảng
│   │   │   ├── autoshopee/       # API nội bộ AutoShopee
│   │   │   ├── shopee/           # API Shopee
│   │   │   ├── lazada/           # API Lazada
│   │   │   ├── tiktok/           # API TikTok
│   │   │   └── model.js          # PouchDB ModelApiLoader base class
│   │   │
│   │   ├── adapter/              # Data transformers theo nền tảng
│   │   │   ├── shopee/           # Adapter cho dữ liệu Shopee
│   │   │   ├── tiktok/           # Adapter cho dữ liệu TikTok
│   │   │   └── lazada/           # Adapter cho dữ liệu Lazada
│   │   │
│   │   ├── bridge/               # webext-bridge message handlers
│   │   │   ├── background/       # Handlers phía background
│   │   │   ├── content/          # Handlers phía content script
│   │   │   └── popup/            # Handlers phía popup
│   │   │
│   │   ├── components/           # Vue components
│   │   │   ├── Shopee/           # Components riêng cho Shopee
│   │   │   ├── Tiktok/           # Components riêng cho TikTok
│   │   │   ├── Lazada/           # Components riêng cho Lazada
│   │   │   ├── User/             # Components quản lý user
│   │   │   ├── Layout/           # Layout components
│   │   │   └── Common/           # Components dùng chung
│   │   │
│   │   ├── models/               # PouchDB data models
│   │   │   ├── loader.js         # Model initialization
│   │   │   └── [model files]     # Từng model riêng
│   │   │
│   │   ├── router/               # Vue Router configuration
│   │   │   └── index.js          # Route definitions
│   │   │
│   │   ├── store/                # Vuex store
│   │   │   ├── index.js          # Store setup
│   │   │   └── modules/          # Store modules (user, shop, etc.)
│   │   │
│   │   ├── pinia/                # Pinia stores
│   │   │   ├── setup.js          # Pinia initialization
│   │   │   └── [store files]     # Từng store riêng
│   │   │
│   │   ├── service/              # Business logic services
│   │   │   ├── print/            # In đơn hàng
│   │   │   ├── flashsale/        # Flash sale automation
│   │   │   └── [other services]
│   │   │
│   │   ├── mixins/               # Vue mixins
│   │   ├── directives/           # Vue directives
│   │   ├── filters/              # Vue filters
│   │   ├── plugins/              # Vue plugins
│   │   ├── utils/                # Utility functions
│   │   ├── constants/            # Constants và enums
│   │   ├── logger/               # Logging system
│   │   └── config.json           # Credentials template
│   │
│   ├── background/               # Service Worker
│   │   └── index.js              # Background entry point
│   │
│   ├── content/                  # Content Scripts
│   │   ├── shopee/               # Shopee content scripts
│   │   │   ├── seller/           # Seller portal scripts
│   │   │   └── client/           # Client/buyer scripts
│   │   ├── tiktok/               # TikTok content scripts
│   │   ├── lazada/               # Lazada content scripts
│   │   ├── tiki/                 # Tiki content scripts
│   │   └── global/               # Global scripts (ping, listener)
│   │
│   ├── popup/                    # Popup UI entry
│   │   └── main.js               # Popup Vue app initialization
│   │
│   ├── options/                  # Options page entry
│   │   └── main.js               # Options Vue app initialization
│   │
│   └── manifest.json             # Extension manifest (MV3)
│
├── public/                       # Static assets
│   ├── icons/                    # Extension icons
│   ├── platform/                 # PDF templates theo nền tảng
│   ├── pdfjs/                    # PDF.js viewer files
│   ├── _locales/                 # Translations (i18n)
│   │   └── vi/messages.json      # Tiếng Việt
│   └── popup.html                # Popup HTML template
│
├── build/                        # Build scripts
│   ├── zip.js                    # ZIP packaging
│   └── analyze.js                # Bundle analysis
│
├── tasks/                        # Task scripts
│   └── s3.js                     # S3 upload script
│
├── test/                         # Test utilities
│   ├── des_json.js               # Data serialization tests
│   ├── fetchScript.js            # Script injection tests
│   ├── injectScript.js           # Injection utilities
│   └── openai.js                 # AI integration tests
│
├── dist/                         # Build output (generated)
├── artifacts/                    # ZIP archives (generated)
├── docs/                         # Tài liệu dự án
│
├── package.json                  # Dependencies & scripts
├── wxt.config.ts                 # WXT & Vite config (build, manifest, aliases)
├── tailwind.config.js            # Tailwind CSS config
├── .eslintrc.js                  # ESLint rules
├── .env                          # Env variables (production)
├── .env.dev                      # Env variables (development)
├── .env.prod                     # Env variables (production alt)
├── .drone.yml                    # CI/CD pipeline
├── entrypoints/                  # WXT entrypoints (popup, options, background, content scripts)
└── CLAUDE.md                     # Code conventions cho AI
```

## Path Aliases

Duoc cau hinh trong `wxt.config.ts` (field `alias` va `srcDir`):

| Alias | Đường dẫn thực |
|-------|---------------|
| `@` | `src/app/` |
| `@content` | `src/content/` |
| `@background` | `src/background/` |

## Quy ước đặt tên

### Files & Folders
- **Components:** PascalCase (`ShopeeOrderList.vue`)
- **Services/Utils:** camelCase (`printService.js`)
- **Models:** PascalCase (`ShopeeShop.js`)
- **Stores (Vuex):** camelCase (modules: `user.js`, `shopee.js`)
- **Stores (Pinia):** camelCase (`useUserStore.js`)
- **Content scripts:** camelCase (`order.js`, `marketing.js`)

### Code Style
- **Vue components:** Options API (KHÔNG dùng Composition API)
- **Types:** JSDoc annotations (KHÔNG dùng TypeScript)
- **ESLint:** Airbnb base config
- **Formatting:** Prettier
- **Console:** Khong dung `console.log` — dung logger system

## File quan trọng

| File | Vai trò |
|------|---------|
| `src/background/index.js` | Entry point của Service Worker |
| `src/popup/main.js` | Entry point của Popup UI |
| `src/app/store/index.js` | Vuex store setup |
| `src/app/pinia/setup.js` | Pinia store setup |
| `src/app/router/index.js` | Vue Router routes |
| `src/app/api/model.js` | PouchDB ModelApiLoader class |
| `src/app/models/loader.js` | Model initialization |
| `wxt.config.ts` | WXT build config & manifest |
| `package.json` | Dependencies (v3.4.3) |
| `CLAUDE.md` | Code conventions |
