# 把標準後臺開源：admin-design 覆蓋什麼、適合誰用

從平臺前端提取的後臺基線：語義 Token、佈局外殼、公共組件、標準頁型與組件總覽，MIT 許可，複製即可用。

> Runlume 提供平臺能力、獨立業務應用與專業服務，支持按需組合。功能、額度與交付範圍由所選套餐或服務約定確定；業務應用可獨立選用，跨應用協作遵循接入配置與授權邊界。

原始頁面: https://runlume.app/zh-hant/blog/admin-design-open-source

開發者指南 · 標準後臺 / 開源 / 前端基線

發佈：2026-09-17 · 作者：Runlume 團隊

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

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

## 覆蓋什麼

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

## 三個入口

- 宣傳頁與項目說明：[adesign.runlume.app](https://adesign.runlume.app)
- 文檔站（組件說明與工程約定）：[adoc.runlume.app](https://adoc.runlume.app)
- 在線演示（兩個測試賬號，權限不同）：[ago.runlume.app](https://ago.runlume.app)
- 源碼與問題反饋：[github.com/runlume/admin-design](https://github.com/runlume/admin-design)

## 適合誰、邊界在哪

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

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

## 相關頁面

- [平臺能力](https://runlume.app/zh-hant/platform)
- [業務應用](https://runlume.app/zh-hant/apps)
- [開發者](https://runlume.app/zh-hant/developers)
- [關於 Runlume](https://runlume.app/zh-hant/about)