圖靈鏡

適用於 React 專案

圖靈鏡 UI TRM UI

共用元件庫與設計系統

TRM UI 為圖靈鏡桌面應用程式提供一致的元件、配色與互動規則。元件畫廊展示實際效果,並提供互動、文案和動效的使用說明。元件套件可接入專案既有的語言與佈景設定。

元件畫廊可在瀏覽器中執行。建置 Tauri 桌面應用程式時需要安裝 Rust。

互動範例

核心特色

  • 共用元件

    按鈕、表單、選單、提示和彈出視窗由元件套件統一維護,產品透過相依版本取得改進。

  • 可操作的設計規範

    畫廊提供互動、文案、排版、配色與動效範例,並記錄已被替換的設計及原因。

  • 連續的互動變化

    分段控制項支援拖曳。清單篩選保留既有項目,內容切換時面板高度連續變化。

  • 八種語言與佈景設定

    通用介面提供八種語言。產品可連接既有翻譯,並使用共用配色變數或保留自己的佈景。

快速開始

  1. 預覽畫廊

    取得專案後執行 npm install 和 npm run dev,在瀏覽器中開啟本機預覽網址。

  2. 安裝元件套件

    依接入說明安裝固定提交的 trm-ui,匯入所需元件與樣式,並連接專案的語言設定。

  3. 驗證並升級

    升級元件套件後,檢查產品建置和實際互動。確認通過後,再發佈產品更新。

其他產品