# Vue-CLI Branch Port Plan

Port code changes from `vue-cli` branch (commits `16c4065..66b305c`, 50 commits) into the current `merge` branch.
Priority: keep current WXT structure, only port **src/ code changes**.

---

## 1. Layout System Overhaul

### Deleted (old)
- `Layout/Box.vue` — simple Card wrapper
- `Layout/Popup.vue` — popup header + content area, used `configLayout` for width/height
- `Layout/Single.vue` — full-page layout with sidebar MenuSide, header slot, toggle button, footer

### Created (new)
- `Layout/LayoutDefault.vue` (547 lines) — replaces `Single.vue`
  - Flexbox sidebar + main layout (not iView Grid)
  - Collapsible sidebar: 220px ↔ 56px with CSS transition
  - Mobile responsive: `window.innerWidth < 768`, auto-collapse, overlay
  - Page header driven by `$route.meta.pageTitleKey` and `$route.meta.pageIcon`
  - Auto-generated breadcrumbs from URL path via `BREADCRUMB_MAP`
  - Route transition: `<transition name="page" mode="out-in">`
  - Contains `<router-view />` directly — child views no longer wrap in layout
  - Menu toggle persisted via `appSetting.toggleMenu`
  - BEM-style CSS classes

- `Layout/LayoutBox.vue` (70 lines) — replaces `Box.vue`
  - Scoped CSS with BEM naming, no iView Card dependency

- `Layout/LayoutPopup.vue` (128 lines) — replaces `Popup.vue`
  - Fixed dimensions: `width: 800px; height: 560px`
  - Version badge in header

### popup/App.vue
- Old: `$route.meta.isSingleLayout` / `$route.meta.isPopupLayout` (booleans)
- New: `$route.meta.layout` (string: `'default'` | `'popup'`)
- `LayoutDefault` wraps its own `<router-view />`
- `LayoutPopup` wraps `<router-view />` as slot

### plugins/loader.js
- Remove global registration: `WrapProfileActive`, `WrapRequireAuth`, `WrapRequirePaid`, `LayoutSingle`, `AlertPlus`
- Rename: `BoxLayout` → `LayoutBox`

---

## 2. Router & Middleware

### router/index.js
- Every route meta changed: `{ isSingleLayout: true }` → `{ layout: 'default' }`
- New meta fields on every route: `pageTitleKey` (i18n key), `pageIcon` (FA class), `requireAuth` (bool), `requirePlan` (string: `'Vip'`)
- Login/Register consolidated: removed `/login/popup` + `/login/index` split, now single `/login` with `layout: isPopupEnv ? 'popup' : 'default'`
- Same for `/setting` — one route adapts layout via `isPopupEnv`
- Added routes: `/register`, `/upgrade-plan`
- `useOpenPopup()` → `isPopupEnv` constant

### router/middleware.js — Simplified (154 → 47 lines)
- Init logic moved to `router/tasks.js`
- Guards moved to `router/guards.js`
- Wires: `router.beforeEach(guardAuth)`, `router.beforeEach(guardPlan)`, `router.beforeEach(guardProgress)`
- `afterTitle` hook dispatches `SetAppTitle` from `$route.meta.pageTitleKey`

### router/guards.js (NEW, 54 lines)
- `guardAuth(to, from, next)` — if `to.meta.requireAuth` && not authed → warning + redirect `/login`
- `guardPlan(to, from, next)` — if `to.meta.requirePlan` → `hasPlanAccess(userPlan, requiredPlan)`, else redirect `/upgrade-plan?redirect=&feature=&plan=`
- `getFeatureName(to)` reads `to.meta.pageTitleKey`

### router/tasks.js (NEW, 83 lines)
- Extracted from middleware: `checkShopeeApiValid`, `taskShopeeFlashsale`, `initStore`, `serviceWorkerKeepAlive`
- `initStore` simplified: removed `UserProfileCheck` dispatch

### router/shopee.js
- Import `isPopupEnv` from `@/browser/api`
- Every route gets: `layout`, `pageTitleKey`, `pageIcon`, `requireAuth`, `requirePlan`
- New routes: `/shopee/spy/shop/by-username`, `/shopee/spy/search`
- Flash sale: `requireAuth: true` but no `requirePlan` (was behind WrapRequirePaid)

### router/tiktok.js
- Same pattern: `isPopupEnv`, layout meta fields

---

## 3. Auth & Permissions — From Wrappers to Route Guards

### Deleted wrapper components
- `WrapRequireAuth.vue` — rendered slot if authed, else showed login prompt
- `WrapRequirePaid.vue` — wrapped WrapRequireAuth + checked isPaidPlan
- `WrapProfileActive.vue` — wrapped WrapRequireAuth + checked profileActive

### New
- `constant/permissions.js` — `PLAN_LEVELS = { Free: 0, Vip: 1, Plus: 2 }`, `hasPlanAccess(userPlan, requiredPlan)`
- Guards in `router/guards.js` (see above)

### User store changes
- Removed: `profileId`, `profileActive` state; `SET_PROFILE_ID`, `SET_PROFILE_STATUS` mutations; `getUserProfileId`, `getUserProfileActive` getters; `UserProfileCheck` action
- Added: `UserRegister` action → calls `registerUser` API
- `mixin/store.js`: removed `getUserProfileId` and `getUserProfileActive` from global getter mapping

### Also deleted
- `Plugin/AlertPlus.vue`
- `Plugin/GoBack.vue`
- `Plugin/GoSetting.vue`
- `User/Profile.vue`

---

## 4. Universal View Wrapper Pattern

**Every seller/spy/tool view** was modified with the same pattern:

### Before
```html
<template>
  <layout-single require-authed>
    <template slot="header">
      <h1 class="text-warning">
        <i class="fa fa-home mr-5" />
        <span>{{ $t('SHOPEE_MY_SHOP') }}</span>
      </h1>
    </template>
    <wrap-require-paid>
      <!-- content -->
    </wrap-require-paid>
  </layout-single>
</template>
```

### After
```html
<template>
  <div>
    <!-- content only, no wrapper, no header slot -->
  </div>
</template>
```

### What was removed from each view
1. `<layout-single>` wrapper → bare `<div>`
2. `<template slot="header">` block → title/icon from route meta
3. `<wrap-require-paid>` / `<wrap-require-auth>` → router guards
4. `metaInfo()` computed → `afterTitle` hook
5. Content indentation reduced 1-2 levels

### Affected views (full list)
**Shopee Seller:** Dashboard, PushProduct, RatingOrder, ReplyRating, SendMessage/Index, SendMessage/Send, SendMessage/Collect, SendMessage/Direct, FlashSale/Index, FlashSale/Create, FlashSale/Clone, Ads/Index, Ads/Detail, Keyword/Index, Keyword/Detail, Keyword/Research, Product/Manager, Shop/Info

**Shopee Spy:** Dashboard, Category, Shop, Product, Market

**Shopee Product:** Clone, Image, Review/Get, Review/Index

**TikTok:** Product/Clone, Spy/Category, Spy/Market

**Other:** Printer/Index, Printer/Config, Printer/Popup, PdfLog/Index, Setting/Index, Login/Index

---

## 5. New Features

### Register system
- `api/autoshopee/user.js` — `registerUser()` replaces `checkProfileId()`
- `components/Single/Register.vue` (249 lines) — form: username, fullname, email, phone, password
- `views/Login/Register.vue` (23 lines) — route wrapper
- `views/Login/Popup.vue` — DELETED (login/register now use layout meta)

### UpgradePlan
- `components/Single/UpgradePlan.vue` (154 lines) — QR payment, reads `$route.query.feature/plan`
- Shows: username, required plan, duration, expiry, payment QR + buttons

### Shopee Spy Search
- `components/Shopee/Spy/Search/Keyword.vue` (626 lines) — dual popup/full mode, search by keyword, stats header, export Excel, top sellers modal
- `components/Shopee/Spy/Search/Shop.vue` — reworked with popup/full mode pattern
- `views/Shopee/Spy/Search.vue` (21 lines) — passes `$route.query.keyword` to keyword component
- `views/Shopee/Spy/ShopByUsername.vue` (49 lines) — resolves username → shopId → redirects

### Content scripts
- `content/shopee/client/shop/spyBtn.js` (138 lines) — `ShopSpyBtnLoader` injects floating "Spy Shop" button on shop pages, reads `__NEXT_DATA__` for shopId
- `content/shopee/client/product/search.js` — expanded search data extraction
- `content/shopee/client/loader.js` — added spyBtn loader registration

### Spy Dashboard
- `views/Shopee/Spy/Dashboard.vue` — expanded with quick-search input, recent shops list

---

## 6. PdfLog Refactor

### PdfLog/Index.vue
- Removed `<layout-single require-authed>` wrapper
- Removed header slot
- Uses `Col :span="24"` (full width)
- Added: save history print toggle per platform, data cleanup for old records

### New mixins (5 files)
- `mixin/constant.js` — `PRINT_DAY_CLEANUP = 14`, `PLATFORM_MODELS`, `PLATFORM_COLORS`, `normalizeTimestamp`
- `mixin/filter.js` — filtering logic: search, shopId, date range, sort, pagination
- `mixin/action.js` — row actions: download, view, print
- `mixin/cleanup.js` — sync + delete docs older than 14 days
- `mixin/setting.js` — load/save `saveHistoryPrint` per-platform toggle

---

## 7. MenuSide & Popup

### MenuSide.vue (~60 → ~335 lines)
- **Before:** Horizontal iView `<Menu>` with flat `MenuItem` list
- **After:** Custom vertical collapsible sidebar
  - `collapsed` prop from LayoutDefault
  - User info panel: avatar, username, plan badge, expiry
  - Scrollable menu, custom BEM CSS
  - Active indicator: colored left-border bar
  - Notification badge on settings
  - Logo: full when expanded, icon when collapsed
  - Tooltip on collapsed items

### Seller/Popup.vue (~250 → ~450 lines)
- Expanded for new features in popup context

---

## 8. Other Minor Changes

### browser/api.js
- `useOpenPopup()` rewritten: `chrome.extension.getViews({ type: 'popup' }).some(view => view === window)`
- Added `isPopupEnv` constant export

### config/app.js
- Minor config changes

### constant/shopee.js
- Added new constants for search/spy features

### constant/tiktok.js
- Added constants

### types/Constant/Usage.js (NEW)
- Usage limit type definitions

### types/Store/User.js
- Removed `profileId`, `profileActive` fields

### store/modules/router.js
- Added URL matchers: `shopeeUrlMatchSearch`, `shopeeUrlMatchShopUsername`
- Added `register` to `routerTo` map
- Auto-routing: Shopee search page → `/shopee/spy/search?keyword=X`

### i18n/lang/vi.json
- Added translation keys for new features

### lib/match.js
- Extended URL matching patterns

### Shopee FlashSale
- `FlashSale/List.vue` — minor fix
- `FlashSale/mixin/List.js` — added mixin

### Background print listeners
- `bridge/listener/shopee/print.js`, `lazada/print.js`, `tiktok/print.js` — minor auth check changes
- `background/shopee/index.js`, `lazada/index.js`, `tiktok/index.js` — minor additions

### Deleted
- `Tiktok/Spy/Category/TreeHome.vue` — removed
- `views/Setting/Popup.vue` — merged into single Setting route

---

## Port Order (recommended)

1. **Permissions & constants** — `constant/permissions.js`, `types/Constant/Usage.js`, store changes
2. **Router infrastructure** — `router/guards.js`, `router/tasks.js`, middleware simplification
3. **Layout components** — LayoutDefault, LayoutBox, LayoutPopup + popup/App.vue + loader.js
4. **Route definitions** — index.js, shopee.js, tiktok.js meta updates
5. **View unwrapping** — remove wrappers from all views (mechanical, same pattern)
6. **MenuSide** — new sidebar component
7. **New features** — Register, UpgradePlan, Spy Search, spyBtn content script
8. **PdfLog refactor** — mixins extraction
9. **Cleanup** — delete old components, remove unused imports
