eCourt-Doc-Edit/web
Suphonchai Phoonsawat ee4d8573ee Phase 12 v9.2: download-first + backend open-links (Word 16.101+ broke ms-word)
การทดสอบ 6 รอบบนเครื่องจริง (Mac, Word 16.101) พิสูจน์ว่า ms-word:ofe
ถูกเมินแบบไม่ deterministic ทุกรูปแบบ (http/https/query/ไม่มี query/
file:// — Word ไม่ยิง request ถึง server เลย เด้งหน้าเลือกไฟล์แทน)
open -a Word <local file> ใช้ได้แต่เรียกจากเว็บไม่ได้ (sandbox +
backend รัน server กลางใน production) → สรุปทางเดียวที่ deterministic
คือ download-first

- Backend: OpenLinkService (HMAC อายุสั้น ValidateOnStart) +
  OpenController /api/open/{t}/{e}/v/{did}/{vid}/file.docx และ /d/{objectKey}
  — ทุกอย่างอยู่ใน path ไม่มี query string (Word เมิน URL มี query),
  [AllowAnonymous] ด้วยลายเซ็นแทน Bearer, stream จาก MinIO + disposition
  ชื่อไทยเหมือนเดิม · download-link + generate-draft ออก open-link
  แทน presigned ของ MinIO (http) · ลบ dead code presigned ทิ้ง
- Web: openDocxUrl = ดาวน์โหลดทันทีทุกครั้ง + ยิง ms-word ควบคู่แบบ
  best-effort + notice "ไฟล์อยู่ Downloads" — เอา heuristic สลับแอป
  ออก (โดนหน้าเลือกไฟล์ของ Word หลอกจนไม่ดาวน์โหลด)
- Spec v9.2 + ตารางทดสอบเครื่องจริงใน acceptance-review + CLAUDE.md
  กฎ 13 (ms-word = best-effort เท่านั้น) + ทางเลือก helper อนาคต
- backend 86 / web 58 / add-in 66 + build ครบ; QA reviewer PASS
  (1 round, minors 4 แก้ครบ)

หมายเหตุ deploy: ต้องตั้ง OpenLinks__Secret (ค่าลับจริง) และ
OpenLinks__BaseUrl (https domain ของ backend) — fail ดังตั้งแต่สตาร์ทถ้าไม่ตั้ง

Co-Authored-By: Claude Code <noreply@anthropic.com>
2026-09-10 13:39:23 +07:00
..
app Phase 12 v9.2: download-first + backend open-links (Word 16.101+ broke ms-word) 2026-09-10 13:39:23 +07:00
public phase 0 2026-08-18 12:52:40 +07:00
test Phase 12 v9.2: download-first + backend open-links (Word 16.101+ broke ms-word) 2026-09-10 13:39:23 +07:00
.env.example phase 6 เบื้องต้น 2026-08-20 06:20:16 +07:00
.gitignore phase 0 2026-08-18 12:52:40 +07:00
nuxt.config.ts ปรับ look and feel 2026-08-20 21:34:45 +07:00
package-lock.json Phase 7-8 2026-08-20 13:51:42 +07:00
package.json Phase 7-8 2026-08-20 13:51:42 +07:00
README.md Phase 10: field editor (FR-14) 2026-08-22 09:17:15 +07:00
tailwind.config.ts ปรับ look and feel 2026-08-20 21:34:45 +07:00
tsconfig.json phase 0 2026-08-18 12:52:40 +07:00
vitest.config.ts Phase 12: draft generation (FR-16) 2026-09-10 10:51:13 +07:00

Web Portal — e-Court Documents Versioning

หน้าเว็บสำหรับจัดการ template + สร้างเอกสารจาก template (ได้ .docx ที่เป็น version 1 อัตโนมัติ) + ดูรายการเอกสาร/detail + re-generate — เป็นส่วนหนึ่งของ monorepo หลัก (ดู ../README.md สำหรับภาพรวมทั้งระบบ)

สั่งรัน

npm install
npm run dev       # http://localhost:5173 (ห้ามใช้ 3000 — ชนกับ add-in dev server)
npm test          # Vitest — 46 ตัว
npm run build     # production build (.output/)

ต้องรัน infra + backend ก่อน (docker compose + dotnet run ที่ backend) — login ผ่าน Keycloak ด้วย test user testuser / Test1234!

โครงสร้าง

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
  utils/                      # oidc, fieldValidation, fieldEditor, snapshot — pure functions ไว้ unit test
test/                         # Vitest (happy-dom) — fieldValidation / fieldEditor / useTheme / snapshot
tailwind.config.ts            # สี/fontSize/radius/shadow expose จาก CSS variables (rgb(var(--c-x) / <alpha-value>))

Design system + responsive

  • สี/ฟอนต์/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

⚠️ กติกาสำคัญ:

  • แก้ 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 อายุสั้น)

Config

ค่า default ชี้ dev ในพื้นที่ override ผ่าน env ได้ทั้งหมด (ดู .env.example): NUXT_PUBLIC_API_BASE_URL, NUXT_PUBLIC_KEYCLOAK_AUTHORITY, NUXT_PUBLIC_KEYCLOAK_CLIENT_ID