For AI agents: fetch the complete documentation index at /llms.txt, the full documentation corpus at /llms-full.txt, the agent skill at /skill.md, or this page as Markdown at /zh-tw/docs/mobile/ui.md (or send Accept: text/markdown).

原生 UI 與主題

映象 Web 設計決策的螢幕原語與共享 view-model。

詢問本指南

開始之前

使用“檔案”→“開啟資料夾”在 Visual Studio Code 中開啟下載的 supastack 專案，然後選擇“終端”→“新建終端”。儲存庫根目錄是包含 package.json、apps 和 packages 的資料夾。執行下面的命令並保持終端開啟。如果無法識別命令，請先完成工具安裝指南，然後再繼續。

首先閱讀平臺教程。伺服器是響應瀏覽器或電話請求的應用程式程式。 Web 讀取 apps/web/.env.local，Expo 讀取 apps/mobile/.env.local，資料庫遷移命令讀取 root .env。無資料庫/儀錶板演示與真實/身份驗證帳戶分開，需要遷移Postgres。僅電話或桌面結帳需要單獨執行的 Web 後端。

corepack pnpm --filter @supastack/mobile start

安裝與配置

螢幕基礎元件位於 apps/mobile/src/ui —— Screen、Card、Title、Detail、SectionLabel、ErrorText、AppButton —— 由 apps/mobile/src/theme 提供樣式，使網頁端的視覺決策直接對映到原生介面。在外觀設定中，“跟隨網頁端”模式（通過 GET/PUT /api/mobile/appearance 呼叫的 apps/mobile/src/theme/synced.ts）會從本地快取應用已登入使用者同步的網頁端配色包。

packages/ui-native 承載跨平臺的 view-model 助手：createEntitlementCard 把服務端許可權狀態轉成卡片的 title、status、detail、動作標籤與無障礙標籤，讓 Web 與移動端渲染同一個訪問決策。

apps/mobile/src/ui/screen.tsx exports:
  Screen, Card, H1, H2, Title, Detail,
  SectionLabel, ErrorText, AppButton

@supastack/ui-native → createEntitlementCard(input)
  → { title, status, detail, accessibilityLabel, action }

實現流程

先用共享原語組裝螢幕，再寫新元素；對齊 theme 模組的令牌與密度，而不是硬編碼尺寸和顏色。

產品文案不要進入原語 —— 它們渲染標籤，不做文案決策。像 createEntitlementCard 那樣，在自定義行中透傳無障礙標籤。

驗證與排障

在淺色與深色、最大文字尺寸、讀屏標籤與小屏裝置下驗證介面。在 200% 文字下截斷或裁切的元件不算完成。