每個後臺項目都要重新做一遍同樣的工作：登錄、佈局、表格、樹、通知、設置、空狀態與錯誤狀態。做完之後，各自的顏色、間距與交互細節又都不一樣，維護成本會跟著頁面數量一起漲。

我們把這層公共部分收口成一份可複製的基線，並以 MIT 許可開源：admin-design，從 Runlume 平臺前端提取出來的標準後臺設計與實現。

覆蓋什麼

  • 主題與語義 Token：顏色只走語義工具類，六套預設配色疊加基礎色與主題色，深淺模式自動跟隨。
  • 三種佈局外殼：側邊導航、頂部 + 側邊、頂部導航；側欄寬度、圓角、頁面過渡與頂欄操作順序都能調。
  • 九類組件頁：基礎控件、表單與選擇、數據展示、反饋與浮層、導航與流程、指標與圖表、圖標、主題與設置、標準頁型。組件總覽既是文檔，也是驗收面。
  • 標準頁型：工作臺、列表、詳情、設置、通知中心、登錄、註冊與找回密碼。
  • 中英雙語、鍵盤可達與無障礙開關，以及與文檔站同源的命令面板搜索。

三個入口

適合誰、邊界在哪

適合要自己做後臺、又不想把界面從零寫第二遍的團隊：複製倉庫，改 package.json 的名稱，換菜單與品牌資源，把示例數據換成自己的接口即可。

它只包含設計與交互層，不含業務接口、認證實現、權限模型與業務規則；示例數據都在內存裡，刷新即重置。身份、上傳、樹拖拽、懶加載這類能力通過 prop 注入，接入真實服務時替換對應回調，不必改組件內部。