2026-08-20 22:05:49 +07:00
|
|
|
# Web Portal — e-Court Documents Versioning
|
2026-08-18 12:52:40 +07:00
|
|
|
|
2026-08-20 22:05:49 +07:00
|
|
|
หน้าเว็บสำหรับจัดการ template + สร้างเอกสารจาก template (ได้ .docx ที่เป็น version 1 อัตโนมัติ) + ดูรายการเอกสาร/detail + re-generate — เป็นส่วนหนึ่งของ monorepo หลัก (ดู [../README.md](../README.md) สำหรับภาพรวมทั้งระบบ)
|
2026-08-18 12:52:40 +07:00
|
|
|
|
2026-08-20 22:05:49 +07:00
|
|
|
## สั่งรัน
|
2026-08-18 12:52:40 +07:00
|
|
|
|
|
|
|
|
```bash
|
|
|
|
|
npm install
|
2026-08-20 22:05:49 +07:00
|
|
|
npm run dev # http://localhost:5173 (ห้ามใช้ 3000 — ชนกับ add-in dev server)
|
2026-08-22 09:17:15 +07:00
|
|
|
npm test # Vitest — 46 ตัว
|
2026-08-20 22:05:49 +07:00
|
|
|
npm run build # production build (.output/)
|
2026-08-18 12:52:40 +07:00
|
|
|
```
|
|
|
|
|
|
2026-08-20 22:05:49 +07:00
|
|
|
ต้องรัน infra + backend ก่อน (docker compose + `dotnet run` ที่ backend) — login ผ่าน Keycloak ด้วย test user `testuser` / `Test1234!`
|
2026-08-18 12:52:40 +07:00
|
|
|
|
2026-08-20 22:05:49 +07:00
|
|
|
## โครงสร้าง
|
2026-08-18 12:52:40 +07:00
|
|
|
|
|
|
|
|
```
|
2026-08-20 22:05:49 +07:00
|
|
|
app/
|
|
|
|
|
app.vue # shell: sticky header + navbar + skip link
|
|
|
|
|
assets/css/tailwind.css # design tokens (CSS variables) + @layer components (.btn/.input/.card/…)
|
|
|
|
|
composables/ # useAuth (PKCE), useApi (Bearer + refresh), useTheme (light/dark)
|
|
|
|
|
pages/ # ทุกหน้า: หน้าหลัก / templates (list/new/edit/documents) / documents (create/detail) / auth/callback
|
|
|
|
|
types/api.ts # DTO mirror ของ backend
|
2026-08-22 09:17:15 +07:00
|
|
|
utils/ # oidc, fieldValidation, fieldEditor, snapshot — pure functions ไว้ unit test
|
|
|
|
|
test/ # Vitest (happy-dom) — fieldValidation / fieldEditor / useTheme / snapshot
|
2026-08-20 22:05:49 +07:00
|
|
|
tailwind.config.ts # สี/fontSize/radius/shadow expose จาก CSS variables (rgb(var(--c-x) / <alpha-value>))
|
2026-08-18 12:52:40 +07:00
|
|
|
```
|
|
|
|
|
|
2026-08-20 22:05:49 +07:00
|
|
|
## Design system + responsive
|
2026-08-18 12:52:40 +07:00
|
|
|
|
2026-08-20 22:05:49 +07:00
|
|
|
- **สี/ฟอนต์/radius/shadow เป็น token ทั้งหมด** — CSS variables (`:root` + `.dark`) ใน `app/assets/css/tailwind.css`, derive จาก scheme ของ admincourt.go.th (primary `#0000EE`, elevated ครีม `#FBF7EC`, ฟอนต์ Sukhumvit Set → Sarabun ผ่าน Google Fonts) · dark mode พลิกที่ตัวแปร ไม่ใช้ `dark:` utility คู่
|
|
|
|
|
- **Component classes กลาง** — `.btn*` / `.input` / `.label` / `.card` / `.table-card` / `.badge*` / `.alert*` / `.spinner` ใน `@layer components`
|
|
|
|
|
- **Responsive ทุกหน้า** — ตารางทุกตัว dual-render (desktop ตาราง / ต่ำกว่า `md` เป็น card list), page header stack บนมือถือ, ฟอร์ม action row `flex-col-reverse → sm:flex-row`
|
2026-08-18 12:52:40 +07:00
|
|
|
|
2026-08-20 22:05:49 +07:00
|
|
|
⚠️ **กติกาสำคัญ:**
|
|
|
|
|
- แก้ `tailwind.config.ts` แล้วต้อง **restart dev server** ทุกครั้ง
|
|
|
|
|
- CSS variables ต้องเป็น **RGB triplet เว้นวรรค** (`0 0 238`) — ใส่ hex จะ break `/opacity` utilities เงียบๆ
|
|
|
|
|
- ต้องระบุ `tailwindcss.cssPath: '~/assets/css/tailwind.css'` ใน `nuxt.config.ts` (default resolve ผิดบน Nuxt 4 → fallback ไปไฟล์ default ของ tailwindcss package แบบเงียบ — ดูกติกา #14 ของ CLAUDE.md หลัก)
|
|
|
|
|
- Token เก็บใน memory เท่านั้น — persist ได้เฉพาะ theme (localStorage) + refresh token/PKCE verifier (sessionStorage อายุสั้น)
|
2026-08-18 12:52:40 +07:00
|
|
|
|
2026-08-20 22:05:49 +07:00
|
|
|
## Config
|
2026-08-18 12:52:40 +07:00
|
|
|
|
2026-08-20 22:05:49 +07:00
|
|
|
ค่า default ชี้ dev ในพื้นที่ override ผ่าน env ได้ทั้งหมด (ดู [.env.example](.env.example)): `NUXT_PUBLIC_API_BASE_URL`, `NUXT_PUBLIC_KEYCLOAK_AUTHORITY`, `NUXT_PUBLIC_KEYCLOAK_CLIENT_ID`
|
