把「活動報名專區」重做成順手、不跑版的編輯器
這份文件示範改版後的活動建立與報名流程，參考 Accupass 的售票體驗， 但完全沿用實習通既有的視覺系統。所有畫面皆為靜態 mockup， 不會動到 internx.me 現有的任何程式碼，僅作為介面規格與交接依據。
目前哪裡卡住，以及這次怎麼解
每一條都對應到現有 frontend 的實際程式碼，方便對照。
早鳥票過期還能選
票價只存名稱與金額，沒有「販售起訖時間」。早鳥票 6/18 截止，6/22 仍可被選取。
現況：feeItems: Array<{ name, price }> — activity-form-schema.ts:328
改法：每張票加上 saleStart / saleEnd，系統自動算出狀態（尚未開賣／販售中／已截止），過期票自動鎖定不可選。
不能限制每種票的張數
只有一個全活動的「參加名額上限」，無法針對「早鳥 50 張、一般票無限」分別設定。
現況：feeItems 無 quantity 欄位 — activity-form-schema.ts:371
改法：每張票各自設 quantity，畫面顯示「已售 / 剩餘」與售罄自動標記。
報名表單欄位排序不順手
主辦方希望直接拖曳欄位上下排序，但現有拖曳實作不穩、手機難用，工程端也反映從零做拖曳很麻煩。
現況：自製 drag 的 handleReorderFields — FormBuilder.tsx:88
改法：改用成熟拖曳套件 @dnd-kit/sortable，抓住把手即可順暢拖曳；內建觸控與鍵盤支援，工程端不必自己造輪子。
編輯會跑版、不好編輯、不夠精緻
所有設定擠在同一長頁，欄位寬度不固定，輸入時版面跳動。
現況：單一長表單 AddActivity.tsx（690 行）
改法：固定寬度的「左側步驟 + 右側表單」版面，分成 4 個步驟，每步聚焦一件事，搭配即時預覽。
新版編輯器的四個步驟
1 · 活動內容
標題、封面、時間地點、主辦資訊、富文本介紹。欄位寬度固定、不跑版。
2 · 票券設定 核心改動
多種票券，每張可設售價、數量、販售起訖時間，狀態自動計算。
3 · 報名表單
從欄位庫加欄位，抓把手拖曳排序，即時看到報名者會填到的樣子。
4 · 進階與送出
付款方式、退款規則、審核設定，最後預覽整頁再送審上架。
關於這份交接
本網站是純靜態示意檔（HTML/CSS/JS，無建置流程），用來對齊「介面應該長什麼樣、行為應該怎麼運作」。
它不引用、也不修改 internx.me 既有專案。工程同事可直接照著 工程規格 與
交接文件 INTEGRATION.md，調整現有的
activity-form-schema.ts 與 FormBuilder。