@fui-org/fui-cli 1.3.2 → 2.0.0

package/skills/fui-skill/references/platform-architecture.md

@@ -1,40 +1,37 @@
-# FUI Platform Architecture — Cấu tạo & cơ chế phân cấp
+# FUI Platform Architecture
 
-> File này sở hữu: **cấu tạo FUI và phân cấp Project→Module: import/component/set trộn thế nào, `vueData`/`v_Set`, vòng đời runtime**.
+> Owns: **FUI structure and Project→Module hierarchy: how import/component/set merge, `vueData`/`v_Set`, runtime lifecycle**.
 
-Hiểu FUI vận hành thế nào **dưới nắp** để thiết kế đúng ngay từ đầu. Nội dung ở đây rút trực tiếp từ runtime `scripts/fastproject.js` (file chính của nền tảng), `defaultfunction.js` (hàm dùng chung), `component.js`/`componentTable.js` (V3: `componentTable-3.0.js`) — đăng ký component lõi có sẵn (`f-table`, `t-*`, dialog, editor...). `f-echart` (`fechart.js`) và `f-sheet` (`fsheet.js`) là hai component **tách file riêng, nạp qua import khai trong module/project**, không tự động load như phần lõi. Đây là **nguồn sự thật** — không suy từ training data.
+Source of truth (not training data): runtime `scripts/fastproject.js` (main), `defaultfunction.js` (shared functions), `component.js`/`componentTable.js` (V3: `componentTable-3.0.js`) — core components (`f-table`, `t-*`, dialog, editor...). `f-echart` (`fechart.js`) and `f-sheet` (`fsheet.js`) are **separate files loaded via imports declared in module/project**, not auto-loaded.
 
-> Đọc file này TRƯỚC khi thiết kế hệ thống/module. Sau đó: cấu hình từng phần → [module-json-anatomy.md](module-json-anatomy.md); project.json & set → [project-config.md](project-config.md); pattern UI thực tế → [ui-patterns.md](ui-patterns.md) (ưu tiên cao — đã tinh chỉnh qua thực chiến).
+> Read BEFORE designing a system/module. Then: per-part config → [module-json-anatomy.md](module-json-anatomy.md); project.json & set → [project-config.md](project-config.md); UI patterns → [ui-patterns.md](ui-patterns.md) (high priority, battle-tested).
 
----
+## 1. What FUI is
 
-## 1. FUI là gì
+Metadata-driven low-code: each page (module) declares UI + logic in `module.json`; `fastproject.js` builds the Vue 2 + Vuetify DOM from it. Declare only — never hand-write a Vue component per page.
 
-FUI (Framework UI) là nền tảng low-code **metadata-driven**: mỗi trang (module) mô tả UI + logic bằng JSON (`module.json`), runtime `fastproject.js` đọc JSON đó và tự dựng DOM Vue 2 + Vuetify. Không viết Vue component thủ công cho từng trang — chỉ khai báo.
+Page load order (pre-bundled, **never re-import**):
 
-Một trang FUI khi chạy nạp theo thứ tự (đã bundle sẵn, **không import lại**):
-1. Thư viện nền: jQuery, Lodash (`_`), Moment, Numeral, Vuetify, vue-toast, jquery-confirm
-2. `defaultfunction.js` — hàm tiện ích (`openWindow`, `CALL`, `confirm`, `showMessage`, `ajaxCALL`, `jsonToExcel`...)
-3. `component.js` + `componentTable.js` — đăng ký toàn bộ component `f-*` / `t-*`
-4. `fastproject.js` — engine: đọc `module.json`, merge config, dựng DOM, chạy action, gắn watch
-5. Data của trang: `$projectData` (project.json), `$moduleUI` (module.json), `$projectGroupSetting`
+1. jQuery, Lodash (`_`), Moment, Numeral, Vuetify, vue-toast, jquery-confirm
+2. `defaultfunction.js` — utilities (`openWindow`, `CALL`, `confirm`, `showMessage`, `ajaxCALL`, `jsonToExcel`...)
+3. `component.js` + `componentTable.js` — register all `f-*` / `t-*`
+4. `fastproject.js` — read `module.json`, merge config, build DOM, run actions, attach watch
+5. Page data: `$projectData` (project.json), `$moduleUI` (module.json), `$projectGroupSetting`
 
----
+## 2. Project → Module hierarchy (merge rules — most important)
 
-## 2. Phân cấp Project → Module (CƠ CHẾ TRỘN — quan trọng nhất)
+**Project** (shared) parts auto-merge into every **Module** (one page); on conflict **Module wins**.
 
-FUI có hai cấp: **Project** (dùng chung) và **Module** (một trang). Ba thành phần của Project **tự động nhúng/trộn xuống** mọi Module; khi trùng, **Module chi phối (override)**.
+### 2.1 `set`
 
-### 2.1 `set` — project.json trộn vào `set` của module
-
-Runtime tính config hiệu lực `v_Set` bằng (fastproject.js):
+Effective config `v_Set` (fastproject.js):
 
 ```js
 $.extend(vueData.v_Set, $projectGroupSetting, $projectData, $moduleUI.set);
 // rồi nếu có: $.extend(v_Set, v_Set.domainSetting[domain hiện tại])
 ```
 
-Thứ tự ưu tiên (sau ghi đè trước):
+Priority (later overrides earlier):
 
 ```
 $projectGroupSetting   (cấu hình nhóm project — thấp nhất)
@@ -46,89 +43,79 @@ $moduleUI.set          = "set" trong module.json   ← ƯU TIÊN CAO NHẤT
 v_Set.domainSetting[domain]   (nếu đang chạy trên domain đó)
 ```
 
-→ Module **kế thừa toàn bộ** config project (menu, apiDomain, style, login...) và chỉ cần khai báo `set` cho những gì khác biệt. Đây là lý do `module.json` của một trang bình thường **không có `set`** (kế thừa hết từ project).
-
-Chi tiết các thuộc tính của `set`/`v_Set` và project.json: [project-config.md](project-config.md).
-
-### 2.2 `imports` — project imports **nối** với module imports
+→ Module inherits all project config (menu, apiDomain, style, login...); declare `set` only for differences. A normal page has **no `set`**. Properties: [project-config.md](project-config.md).
 
-Import (JS/CSS) khai báo ở cấp project **và** cấp module đều được nạp — không thay thế nhau. Runtime (`addImport`): file `.css` → thêm `<link>`; file khác → nạp như `<script>`.
+### 2.2 `imports` — appended, not replaced
 
-Thứ tự nạp **không phải** "framework rồi project rồi module": server (`spA_FUI_ModuleDataSelect`) UNION cả **ba** phạm vi — framework (theo V2/V3), project (`ModuleID IS NULL`), module — rồi sort **chung một lần** theo `FileSort, FileName`. Nên một import module-scope có `FileSort` nhỏ vẫn nạp **trước** import project-scope. Phụ thuộc thứ tự (vd `echarts.min.js` phải trước `fechart.js`) → phải thể hiện bằng `FileSort`, đừng trông vào phạm vi.
+Project and module imports both load. `addImport`: `.css` → `<link>`; else `<script>`.
 
-Framework tự xưng `FileSort` thấp (~1-10). `file_import_new`/`file_import_update` tự bảo vệ ngưỡng này ở code level (`resolveImportSort`, `src/tools/module.ts`): `fileSort` bỏ trống → mặc định an toàn theo scope (project ≥ 20, module ≥ 50); truyền một giá trị thấp hơn ngưỡng đó → tự nâng lên, kèm ghi chú `ℹ️` trong kết quả tool. Không có cách nào truyền một `FileSort` đủ thấp để chen trước framework qua hai tool này — nếu thật sự cần thứ tự sát framework, phải deploy trực tiếp qua route khác ngoài MCP.
+Order is **not** framework → project → module: server (`spA_FUI_ModuleDataSelect`) UNIONs framework (per V2/V3), project (`ModuleID IS NULL`) and module scopes, then sorts **once** by `FileSort, FileName`. A module import with small `FileSort` loads **before** a project import. Express order dependencies (e.g. `echarts.min.js` before `fechart.js`) with `FileSort`, never via scope.
 
-- Import project-scope: dùng chung cho mọi module (thư viện chung).
-- Import module-scope: chỉ trang đó (vd `echarts.min.js` + `fechart.js` cho trang có `f-echart`).
-- Module thật thường có `imports/_imports.json` = `[]` khi chỉ dùng thư viện bundle sẵn.
+Framework uses `FileSort` ~1-10. `fui import new`/`fui import update` guard this in code (`resolveImportSort`, `src/tools/module.ts`): empty sort → scope default (project ≥ 20, module ≥ 50); lower value → raised, with an `ℹ️` note in output. They cannot place an import before the framework — if truly needed, deploy via a route outside fui.
 
-> Thêm/bỏ component cần import (f-echart, f-file-upload, f-editor...) → luôn `file_import_list` rồi `file_import_new`/`file_import_delete`. Bảng import: [component-quickref.md](component-quickref.md).
+- Project-scope: shared libs for all modules.
+- Module-scope: that page only (e.g. `echarts.min.js` + `fechart.js` for `f-echart`).
+- `imports/_imports.json` = `[]` is normal when only bundled libs are used.
 
-#### Hai loại import: CDN/URL vs Nội dung upload (`ContentType`)
+> Adding/removing a component that needs imports (f-echart, f-file-upload, f-editor...) → always `fui import list`, then `fui import new`/`fui import delete`. Import table: [component-quickref.md](component-quickref.md).
 
-Một import record trong FUI tồn tại dưới **một trong hai dạng** — phân biệt ngay ở `ContentType`:
+#### Import kinds by `ContentType`
 
-| Dạng | `ContentType` | Nguồn | Tool chỉnh sửa nội dung |
-|---|---|---|---|
-| **Tham chiếu CDN / URL** | rỗng hoặc không phải JS/CSS | URL ngoài (jsdelivr, cdnjs, custom server...) — không có file local | `file_import_update` (chỉ sửa metadata: url, sort, tên) |
-| **Nội dung đã upload** | `text/javascript` / `text/css` | File lưu trên server FUI, có `fileID` và `filePath` local | `file_import_upload_content` (ghi đè nội dung) |
+| Kind                    | `ContentType`                  | Source                                                    | Edit with                                            |
+| ----------------------- | ------------------------------ | --------------------------------------------------------- | ---------------------------------------------------- |
+| **CDN / URL reference** | empty or not JS/CSS            | External URL (jsdelivr, cdnjs, custom...) — no local file | `fui import update` (metadata only: url, sort, name) |
+| **Uploaded content**    | `text/javascript` / `text/css` | Stored on FUI server; has `fileID` and local `filePath`   | `fui import upload` (overwrite content)              |
 
-**Hệ quả thực tế — khi người dùng đính kèm file JS/CSS trong chat:**
+User attaches a JS/CSS file and asks for an import:
 
 ```
-User đính kèm file.js → nhờ AI tạo import
+❌ WRONG: fui import new --content-type link --name "<some url>"
+   → creates a CDN reference; file.js is never stored on the server
 
-❌ SAI: file_import_new({ url: "<url nào đó>" })
-   → tạo CDN reference, file.js không được lưu lên server
-
-✅ ĐÚNG:
-  1. file_import_new({ ... })           → tạo metadata (tên, sort, scope)
-  2. file_import_upload_content(fileId, nộidung)  → upload nội dung file lên server FUI
+✅ RIGHT:
+  1. fui import new ... --content-type text/javascript   → metadata (name, sort, scope)
+  2. fui import upload <fileId> -f file.js                → upload content to FUI server
 ```
 
-- `file_import_upload_content` đồng bộ nội dung tới **mọi thư mục `imports/` local** đang khai `fileID` đó — không cần gọi lại tool cho từng scope.
-- Import dạng CDN (URL ngoài): dùng `file_import_update` nếu muốn đổi URL, sort, hay tên — **không thể** upload content vào record này.
-- Dùng `file_import_get` để biết một import đang ở dạng nào (xem trường `ContentType` và `FilePath` trong kết quả).
-
-> Kiểm tra trước khi thao tác: `file_import_list` liệt kê mọi import kèm `ContentType` — nhìn vào đó là biết ngay nên gọi tool nào tiếp theo.
+(Flags: `fui import new --help`.)
 
-### 2.3 `components` — component **dùng chung toàn project**
+- `fui import upload` syncs to **every local `imports/`** declaring that `fileID` — no per-scope repeat.
+- CDN imports: change URL/sort/name via `fui import update`; content **cannot** be uploaded into them.
+- `fui import get` shows the kind (`ContentType`, `FilePath`); `fui import list` shows `ContentType` for all — check it first to pick the next command.
 
-- `component.js` đăng ký sẵn mọi component `f-*`/`t-*` **global**.
-- Custom `uc-*.vue` **project-scope** (`{projectId}/components/`) → FUI tự load **global ở MỌI module**, gọi thẳng bằng tên (không khai báo `components:{}`).
-- `uc-*.vue` **module-scope** (`{moduleId}/components/`) → chỉ dùng trong module đó.
-- Trùng tên → bản module-scope chi phối trong phạm vi module đó.
+### 2.3 `components`
 
-> Component design & scope: [component-design.md](component-design.md).
+- `component.js` registers all `f-*`/`t-*` **globally**.
+- Project-scope `uc-*.vue` (`{projectId}/components/`) → auto-loaded globally in **every** module, used by name (no `components:{}`).
+- Module-scope `uc-*.vue` (`{moduleId}/components/`) → that module only.
+- Same name → module-scope wins in that module.
 
-### 2.4 Bảng tóm tắt phân cấp
+> Design & scope: [component-design.md](component-design.md).
 
-| Thành phần | Project cung cấp | Trộn vào module thế nào | Khi trùng |
-|---|---|---|---|
-| **set / config** | `project.json` (khối `data`) | Trộn vào `v_Set`, rồi `module.set` | **Module.set thắng** |
-| **imports** | project `_imports.json` | **Nối thêm** vào import module | Cả hai đều nạp |
-| **components** | `uc-*.vue` project-scope + `f-*`/`t-*` global | Auto-load global mọi module | Module-scope thắng |
+### 2.4 Summary
 
----
+| Part             | Project provides                              | Merge                           | On conflict         |
+| ---------------- | --------------------------------------------- | ------------------------------- | ------------------- |
+| **set / config** | `project.json` (`data`)                       | Into `v_Set`, then `module.set` | **Module.set wins** |
+| **imports**      | project `_imports.json`                       | **Appended** to module imports  | Both load           |
+| **components**   | project-scope `uc-*.vue` + global `f-*`/`t-*` | Global in every module          | Module-scope wins   |
 
-## 3. Runtime state có sẵn (`vueData`)
+## 3. Built-in state (`vueData`)
 
-`fastproject.js` khởi tạo sẵn các biến này trong `vueData` — dùng được ngay trong `module.json`/`script.js`, không cần khai báo:
+Pre-initialized; use directly in `module.json`/`script.js`:
 
-| Biến | Ý nghĩa |
-|---|---|
-| `user` | Thông tin user đăng nhập (fetch từ `v_Set.userInfo`) — xem cấu trúc bên dưới |
-| `v_Set` | Config hiệu lực của trang (mục 2.1) — xem [project-config.md](project-config.md) |
-| `p_domain` | Hostname hiện tại (vd `tsa.example.vn`) |
-| `p_router` / `p_routers` | Path hiện tại (`/manager/schedule-assignment`) / mảng segment (`["manager","schedule-assignment"]`) |
-| `p_params` | Query string (`?...`) |
-| `p_urlReferrer` | URL trang giới thiệu |
-| `v_Loading` / `v_LoadingOverlay` | Trạng thái loading khi gọi API (tự quản lý) |
-| `v_containerOn` | Bật/tắt vùng nội dung chính |
+| Variable                         | Meaning                                                                                |
+| -------------------------------- | -------------------------------------------------------------------------------------- |
+| `user`                           | Logged-in user (from `v_Set.userInfo`)                                                 |
+| `v_Set`                          | Effective page config (§2.1) — [project-config.md](project-config.md)                  |
+| `p_domain`                       | Hostname (e.g. `tsa.example.vn`)                                                       |
+| `p_router` / `p_routers`         | Path (`/manager/schedule-assignment`) / segments (`["manager","schedule-assignment"]`) |
+| `p_params`                       | Query string (`?...`)                                                                  |
+| `p_urlReferrer`                  | Referrer URL                                                                           |
+| `v_Loading` / `v_LoadingOverlay` | API loading state (self-managed)                                                       |
+| `v_containerOn`                  | Toggle main content area                                                               |
 
-### Cấu trúc `vueData` thực tế (mẫu)
-
-Runtime khởi tạo sẵn `p_*`, `user`, `v_Set`. Đây là một `vueData` thật (đã rút gọn) — dùng để biết chính xác đường dẫn khi tham chiếu:
+Real `vueData` (trimmed) — use for exact paths:
 
 ```json
 {
@@ -165,24 +152,24 @@ Runtime khởi tạo sẵn `p_*`, `user`, `v_Set`. Đây là một `vueData` th
 }
 ```
 
-**Trường của `user`** (thay đổi tùy `userInfo` endpoint, nhưng thường gồm): `UserID`, `UserName`, `LastName`, `FirstName`, `Phone`, `Email`, `GroupID`, `DepartmentID`, `ClassID`, `SystemRight` (int), `FunctionRight` (**mảng string**, vd `["10","14"]`), `LastLogin`. Một số hệ thống có thêm `Sex`.
+`user` fields depend on the `userInfo` endpoint; usually `UserID`, `UserName`, `LastName`, `FirstName`, `Phone`, `Email`, `GroupID`, `DepartmentID`, `ClassID`, `SystemRight` (int), `FunctionRight` (**string array**, e.g. `["10","14"]`), `LastLogin`; some systems add `Sex`.
 
-> **Lưu ý dùng:** `user.SystemRight` là **số** (so sánh `>= 2`); `user.FunctionRight` là **mảng chuỗi** (kiểm tra bằng `.includes('10')` hoặc `rightTest`). Tham chiếu trong controls: `vueData.user.UserID`, `vueData.user.SystemRight`, `vueData.v_Set.apiDomain`...
+> `user.SystemRight` is a **number** (compare `>= 2`); `user.FunctionRight` is a **string array** (`.includes('10')` or `rightTest`). In controls: `vueData.user.UserID`, `vueData.user.SystemRight`, `vueData.v_Set.apiDomain`...
 
-### API lấy thông tin user (userInfo endpoint)
+### userInfo endpoint
 
-FUI dùng database phân quyền riêng, truy cập qua **apiName/Alias `acc`**. Endpoint lấy thông tin user và quyền hạn trên một project có cấu trúc:
+Permission DB is reached via **apiName/Alias `acc`**:
 
 ```
 {apiDomain}/acc/userinfo/{project_apiName}
 ```
 
-- `{apiDomain}` — domain tAPI của hệ thống (lấy từ `vueData.v_Set.apiDomain`)
-- `acc` — alias cố định cho database phân quyền (không đổi)
-- `userinfo` — tên API lấy thông tin user
-- `{project_apiName}` — apiName/code của project (do admin cấu hình, ví dụ: `quansinh`, `ts`, `qlsv`)
+- `{apiDomain}` — tAPI domain (`vueData.v_Set.apiDomain`)
+- `acc` — fixed permission-DB alias
+- `userinfo` — API name
+- `{project_apiName}` — project apiName/code (admin-set, e.g. `quansinh`, `ts`, `qlsv`)
 
-**Cách dùng:** khai báo `userInfo` trong `project.json` (field `set`) hoặc `module.json` (field `set`). FUI tự fetch khi trang load và gán kết quả vào `vueData.user`.
+Declare `userInfo` in `set` of `project.json` or `module.json`; FUI fetches it on load into `vueData.user`.
 
 ```json
 // project.json → set
@@ -191,44 +178,40 @@ FUI dùng database phân quyền riêng, truy cập qua **apiName/Alias `acc`**.
 }
 ```
 
-Sau khi khai báo, toàn bộ thông tin user có sẵn trong `vueData.user`:
-
 ```js
-vueData.user.UserID          // mã nhân viên/sinh viên
-vueData.user.UserName        // tên đăng nhập
-vueData.user.SystemRight     // quyền hệ thống (int 0–9)
-vueData.user.FunctionRight   // mảng quyền chức năng ["1","2","10",...]
-vueData.user.DepartmentID    // mã đơn vị
+vueData.user.UserID; // mã nhân viên/sinh viên
+vueData.user.UserName; // tên đăng nhập
+vueData.user.SystemRight; // quyền hệ thống (int 0–9)
+vueData.user.FunctionRight; // mảng quyền chức năng ["1","2","10",...]
+vueData.user.DepartmentID; // mã đơn vị
 ```
 
-**Dùng trong controls (v-if ẩn/hiện theo quyền):**
+In controls (`v-if` by right):
 
 ```json
 { "col": { "v-if": "vueData.user.SystemRight >= 5" } }
 { "col": { "v-if": "vueData.user.FunctionRight.includes('10')" } }
 ```
 
-**Dùng trong action IN (truyền vào API):**
+In action `IN`:
 
 ```json
 { "API": "SP_GetDuLieu", "IN": { "UserID": "vueData.user.UserID", "DeptID": "vueData.user.DepartmentID" } }
 ```
 
-> **Lưu ý:** `@sys_UserID`, `@sys_UserName`, `@sys_GroupID`... được tAPI tự inject vào mọi SP — không cần truyền thủ công qua `IN`. Chỉ tham chiếu `vueData.user.*` khi cần dùng trong logic JS/Vue phía client.
-
-### Tham số URL tự inject vào `vueData`
+> tAPI auto-injects `@sys_UserID`, `@sys_UserName`, `@sys_GroupID`... into every SP — never pass them via `IN`. Use `vueData.user.*` only for client-side JS/Vue logic.
 
-`buildParamURL()` đọc mọi query param `?key=value` và gán `vueData[key] = value` **trước khi** `data[]` chạy. → Module con mở qua `openWindow`/`redirect` chỉ cần khai báo biến trùng tên param rồi `{ "CALL": "apiLoad" }` ở cuối `data[]`. (Xem [ui-crosswindow-patterns.md](ui-crosswindow-patterns.md).)
+### URL params → `vueData`
 
-### Quyền của user
+`buildParamURL()` sets `vueData[key] = value` for each `?key=value` **before** `data[]` runs. A child module opened via `openWindow`/`redirect` just declares same-named variables and ends `data[]` with `{ "CALL": "apiLoad" }` ([ui-crosswindow-patterns.md](ui-crosswindow-patterns.md)).
 
-FUI có 2 loại quyền độc lập — `SystemRight` (cấp bậc trên project) và `FunctionRight` (quyền theo từng chức năng cụ thể), cả hai định nghĩa trong database phân quyền trung tâm (alias `acc`, `{project_apiName}` = APIName của project trong `tblModules`). Runtime: `vueData.user.SystemRight` (int)/`vueData.user.FunctionRight` (mảng string) dùng cho `v-if` và `right` trong menu; hàm `rightTest({ SystemRight:[...], FunctionRight:[...] })` kiểm tra giao quyền.
+### User rights
 
-**Khái niệm đầy đủ (SystemRight vs FunctionRight), cấu trúc `tblSysRight`/`tblFunction`, và 4 MCP tool quản lý định nghĩa quyền (`right_system_list/set`, `right_function_list/set`):** xem [permission-system.md](permission-system.md).
+Two independent kinds, both in the central permission DB (alias `acc`, `{project_apiName}` = project APIName in `tblModules`): `SystemRight` (rank on project, int) and `FunctionRight` (per function, string array). Use in `v-if` and menu `right`; `rightTest({ SystemRight:[...], FunctionRight:[...] })` checks intersection.
 
----
+Concepts, `tblSysRight`/`tblFunction`, managing definitions (`fui right system|function list|new|update|delete`): [permission-system.md](permission-system.md).
 
-## 4. Vòng đời khởi tạo một trang (fastproject.js)
+## 4. Page init lifecycle (fastproject.js)
 
 ```
 $(document).ready → loadModuleInfo()
@@ -245,50 +228,42 @@ $(document).ready → loadModuleInfo()
      - Kiểm tra đăng nhập (v_Set.login)
 ```
 
-Hệ quả thiết kế:
-- `data[]` chạy tuần tự trên xuống; đặt khởi tạo state trước, `{ "CALL": ... }` auto-startup ở cuối.
-- Đặt các gán `#PARENT.*` / biến từ URL **trước** các CALL fetch để dữ liệu sẵn sàng.
-
----
-
-## 5. Action engine — các key trong một action (tham chiếu nhanh)
-
-`runAction`/`vueAction` xử lý một object action theo các key sau (nguồn: fastproject.js). Pattern chi tiết + value resolution: **[controls-patterns.md](controls-patterns.md)**.
-
-| Key | Tác dụng |
-|---|---|
-| `API` | Gọi endpoint (POST mặc định). Đường dẫn không `http` → tự prepend `v_Set.apiDomain` (`fixURL`) |
-| `IN` | Tham số gửi lên (map từ `vueData`) |
-| `OUT` | Nơi lưu kết quả. Nếu response chỉ có key `data` và `OUT` là string → tự unwrap `d.data` |
-| `METHOD` | Override HTTP method (mặc định POST) |
-| `HEADER` | Override header (mặc định `authorization: Bearer awt`) |
-| `MESS` | Toast thành công |
-| `MESSBOX` | Hộp thoại thông báo (`showMessage`) |
-| `CALLBACK` | Action chạy sau khi API/FUN xong |
-| `ERROROUT` / `ERRORCALLBACK` | Xử lý nhánh lỗi |
-| `CALL` | Gọi action đã đặt tên khác |
-| `CONFIRM` / `CANCEL` | Hỏi xác nhận trước, nhánh hủy |
-| `IF` / `THEN` / `ELSE` | Rẽ nhánh (điều kiện là JS expression trên vueData) |
-| `FUN` (+`IN`/`OUT`/`CALLBACK`) | Gọi hàm global (`openWindow`, `jsonToExcel`, `printPDF`...) |
-| `EXE` | Chạy JS thô (dùng dè xẻn) |
-| *(object thường)* | Gán trực tiếp vào `vueData` (state set) |
-
-`json_data_parse` tự parse cột `json_data:Field` trong response thành object (xem [tapi-reference.md](tapi-reference.md)).
-
----
-
-## 6. Component & hàm dựng sẵn (điểm vào)
-
-- **Component `f-*` / `t-*`**: danh mục đầy đủ + import cần thiết → [component-quickref.md](component-quickref.md).
-- **Hàm tiện ích global** (`openWindow`, `CALL`, `confirm`, `showMessage`, `ajaxCALL`, `jsonToExcel`, `groupBy`, `pushRouter`, `rightTest`, `printPDF`, `webSocket_Send`...) → [default-function.md](default-function.md).
-- **Thư viện toàn cục** (`$`, `_`, `moment`, `numeral`, `Vue.$toast`) → [script-map.md](script-map.md) §0 "Thư viện đã bundled sẵn" — đọc trước khi định thêm CDN.
-
----
-
-## 7. Ghi nhớ thiết kế
-
-- Project cung cấp khung (menu, apiDomain, style, component chung); Module chỉ khai báo phần khác biệt.
-- Đừng lặp lại config đã có ở project trong từng module.
-- Component dùng >1 module → đặt project-scope (global), không copy vào từng module.
-- Import chỉ khai báo ở nơi thực sự dùng; component dùng chung → import project-scope.
-- Mọi thứ chạy trên `vueData`; tham chiếu state bằng tiền tố `vueData.` trong controls/attr.
+- `data[]` runs top to bottom: state init first, auto-startup `{ "CALL": ... }` last.
+- Put `#PARENT.*` / URL variable assignments **before** fetch CALLs.
+
+## 5. Action keys (quick ref)
+
+Handled by `runAction`/`vueAction`. Patterns + value resolution: **[controls-patterns.md](controls-patterns.md)**.
+
+| Key                            | Effect                                                                                     |
+| ------------------------------ | ------------------------------------------------------------------------------------------ |
+| `API`                          | Call endpoint (POST default). Path without `http` → `v_Set.apiDomain` prepended (`fixURL`) |
+| `IN`                           | Params (mapped from `vueData`)                                                             |
+| `OUT`                          | Result target. Response with only key `data` + string `OUT` → auto-unwrap `d.data`         |
+| `METHOD`                       | Override HTTP method (default POST)                                                        |
+| `HEADER`                       | Override header (default `authorization: Bearer awt`)                                      |
+| `MESS`                         | Success toast                                                                              |
+| `MESSBOX`                      | Message dialog (`showMessage`)                                                             |
+| `CALLBACK`                     | Runs after API/FUN finishes                                                                |
+| `ERROROUT` / `ERRORCALLBACK`   | Error branch                                                                               |
+| `CALL`                         | Call another named action                                                                  |
+| `CONFIRM` / `CANCEL`           | Confirm first; cancel branch                                                               |
+| `IF` / `THEN` / `ELSE`         | Branch (JS expression on vueData)                                                          |
+| `FUN` (+`IN`/`OUT`/`CALLBACK`) | Global function (`openWindow`, `jsonToExcel`, `printPDF`...)                               |
+| `EXE`                          | Raw JS (sparingly)                                                                         |
+| _(plain object)_               | Assigned into `vueData`                                                                    |
+
+`json_data_parse` auto-parses `json_data:Field` response columns into objects ([tapi-reference.md](tapi-reference.md)).
+
+## 6. Entry points
+
+- `f-*` / `t-*` list + required imports → [component-quickref.md](component-quickref.md).
+- Global utilities (`openWindow`, `CALL`, `confirm`, `showMessage`, `ajaxCALL`, `jsonToExcel`, `groupBy`, `pushRouter`, `rightTest`, `printPDF`, `webSocket_Send`...) → [default-function.md](default-function.md).
+- Global libs (`$`, `_`, `moment`, `numeral`, `Vue.$toast`) → [script-map.md](script-map.md) §0 — read before adding any CDN.
+
+## 7. Design rules
+
+- Project provides the frame (menu, apiDomain, style, shared components); Module declares only differences — never repeat project config per module.
+- Component used by >1 module → project-scope, never copied per module.
+- Declare imports only where used; shared component → project-scope import.
+- Everything runs on `vueData`; reference state with the `vueData.` prefix in controls/attrs.