dcbf6dcf1f
Rewrite 237-line vanilla JS + Jinja2 template into Vue 3 SFC components (App.vue, TableCatalog.vue, DataViewer.vue, useTableData composable). Establishes apiPost POST request pattern for pure Vite pages. Removes templates/index.html, updates Vite entry to HTML, and Flask route to send_from_directory. Includes sql_fragments WHERE_CLAUSE escaping fix, updated integration tests, and OpenSpec artifact archive. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
31 lines
1.8 KiB
Markdown
31 lines
1.8 KiB
Markdown
## Why
|
||
|
||
Tables 頁面（`/tables`）是完全獨立的開發工具頁面，無跨頁面 drill-down 依賴，且行數最少（237 行 JS），是建立 POST/CSRF 請求模式的理想候選。QC-GATE 遷移已建立 GET-only 的 Vue 3 + Vite 架構模式，現在需要補齊 POST 請求模式，為後續更複雜頁面遷移鋪路。
|
||
|
||
## What Changes
|
||
|
||
- 將 `/tables` 頁面從 Jinja2 模板 + vanilla JS 遷移為純 Vue 3 + Vite SFC 架構
|
||
- Flask route 從 `render_template()` 改為 `send_from_directory()`，不再傳入 `TABLES_CONFIG` context
|
||
- 前端改用 `/api/get_table_info` (GET) 取得表格配置，取代 Jinja2 server-render
|
||
- API 呼叫從 `window.MesApi.post()` 改為 `apiPost()` from `core/api.js`
|
||
- 純 Vite 頁面發出 POST 請求時需自行攜帶 CSRF token（透過 `<meta>` tag 或從 API 取得）
|
||
- Vite config entry 從 JS-only (`tables/main.js`) 改為 HTML entry (`tables/index.html`)
|
||
- 保留現有 Jinja2 模板作為 fallback 直到驗證完成後移除
|
||
|
||
## Capabilities
|
||
|
||
### New Capabilities
|
||
- `tables-query-page`: 數據表查詢頁面的功能需求（表格選擇、動態欄位篩選、查詢結果顯示）
|
||
|
||
### Modified Capabilities
|
||
- `vue-vite-page-architecture`: 新增 POST 請求 + CSRF token 處理模式（現有 spec 僅涵蓋 GET）
|
||
|
||
## Impact
|
||
|
||
- **前端**：`frontend/src/tables/` 整個目錄重寫（main.js → Vue 3 SFC 結構）
|
||
- **後端**：`app.py` 中 `/tables` route 改為 `send_from_directory`
|
||
- **Vite config**：tables entry 改為 HTML entry point
|
||
- **CSRF**：純 Vite 頁面無 Jinja2 `{{ csrf_token() }}`，需建立替代方案（API endpoint 或 cookie-based）
|
||
- **模板**：`templates/index.html` 遷移完成後可移除
|
||
- **API**：現有 `/api/get_table_info`、`/api/get_table_columns`、`/api/query_table` 不變
|