> ## Documentation Index
> Fetch the complete documentation index at: https://supastack.dev/llms.txt
> Use this file to discover all available pages before exploring further.
> For the full documentation corpus in one file, fetch: https://supastack.dev/llms-full.txt

# 原生 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 後端。

[安裝工具並獲取程式碼](https://supastack.dev/zh-tw/docs/web/before-you-start.md)

[學習命令、檔案和配置](https://supastack.dev/zh-tw/docs/web/terminal-basics.md)

[完成手機首次執行教程](https://supastack.dev/zh-tw/docs/mobile/ship-in-5-minutes.md)

```
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% 文字下截斷或裁切的元件不算完成。


## 下一篇

[移動端權益](https://supastack.dev/zh-tw/docs/mobile/entitlements.md)