使用 Studio
Studio 是瀏覽器裡的元件工作區：左邊檔案樹，中間編輯器與雙預覽，右邊 AI 對話與終端機。它不需要本地環境，開啟網頁就能從零寫一個元件並發布。
進入 Studio
兩種方式：
- 直接開啟 Studio 位址（生產環境
studio.comphub.cn）。 - 在平台元件詳情頁點擊「在 Studio 中開啟」，把線上元件匯入為一個工作區。
首次進入是工作區選擇頁：列出這台瀏覽器裡已有的工作區，可以選擇繼續，也可以新建。
資料存在瀏覽器裡
工作區、檔案和對話記錄儲存在本機瀏覽器的 IndexedDB 中，不會自動同步到其他裝置或瀏覽器。
介面導覽
| 區域 | 內容 |
|---|---|
| 左欄 | 檔案樹：新建/刪除檔案、拖曳、切換元件 |
| 中欄 | 程式碼編輯器 + 預覽面板（mini 小窗 / full 全螢幕） |
| 右欄 | AI 對話與終端機（同一欄上下切換） |
面板之間的分隔線可以拖動；預覽面板可以拉滿查看細節。
建立元件
點擊新建，在「建立元件」彈窗裡選擇頁籤：
範本建立
| 欄位 | 說明 |
|---|---|
| 框架 | Vue / React / Web Component |
| 版本 | Vue 或 React 的大版本（如 Vue 3、React 18） |
| 名稱 | 元件名稱，需符合命名規範 |
| 標籤 | 僅 Web Component：自訂元素標籤名稱，如 my-element |
建立後 Studio 會產生入口檔案、README 與 comp.json，並自動安裝對應執行環境。安裝套件進度顯示在終端機面板。
本地匯入
把已有的元件資料夾拖進彈窗，或選擇本地檔案。適合把專案裡的舊元件搬進來改。
編輯與預覽
- 儲存檔案後預覽自動重新整理。
.vue檔案沒有模組級熱更新，儲存後會整頁重新整理（約 300ms 防抖）。- 預覽分 mini 與 full 兩塊面板，對應平台列表卡片與詳情頁的展示效果。
- 預覽入口可以在檔案樹裡指定；未指定時使用規範預設入口（
demo/index.vue/demo/full.vue）。
預覽空白先看依賴
元件用到的套件必須先裝好。依賴缺失時頂欄會提示，終端機裡也會給出缺哪個套件。
AI 對話
右側對話區可以用自然語言讓 AI 改程式碼。兩種模型來源：
| 來源 | 設定 | 限額 |
|---|---|---|
| 平台內建 | 無需設定，登入後直接選模型 | 登入使用者免限額；匿名按 ID + IP 限額 |
| 自填 Key | 在「設定」裡選服務商、填 API Key、挑預設模型 | 由服務商決定 |
自填的 Key 只儲存在本機瀏覽器，不會上傳。設定裡可以選擇是否讓多個工作區共用同一份設定。
AI 的每次改動會以操作卡片呈現：寫入、刪除、執行命令等。涉及刪除或需要你選擇時，會先彈出確認卡，確認後才執行。執行失敗會顯示失敗原因，而不是假裝完成。
終端機
終端機用來安裝依賴：
npm install echarts只放行 npm install / npm i / npm add 這類安裝套件命令，其他命令會被攔下並提示。預設使用 npmmirror 來源，可以在終端機面板切換回 npmjs。
安裝套件在瀏覽器內的虛擬環境完成，不會影響你本機的專案。
快照與恢復
Studio 會自動把工作區快照儲存到 IndexedDB：
- 重新整理頁面後自動恢復檔案與對話。
- 切換分頁、關閉頁面時有防抖兜底。
- 刪除工作區會一併清除對應快照。
如果重新整理後發現目錄是空的，先確認是否剛做過大幅刪除操作；必要時從工作區列表裡換一份歷史工作區。
發布到元件庫
在檔案樹裡選取元件根目錄，點擊發布。流程分三段：
1. 登入授權
未登入時會給出授權入口，在瀏覽器裡確認後回到 Studio。授權只需要一次。
2. 填寫發布資訊
| 欄位 | 說明 |
|---|---|
| 名稱 | 元件名稱，首次發布後固定 |
| 版本 | 語意化版本；更新時必須大於線上 |
| 描述 | 一句話說明用途 |
| 標籤 | 最多 5 個，幫助檢索 |
| 升級說明 | 更新時填寫本次改了什麼 |
3. 等待發布階段完成
Studio 會依次完成截圖、收集檔案、預檢、依賴預先編譯與提交，每個階段的進度都會顯示。全部完成後給出結果，並提供跳轉到元件詳情頁的入口。
發布按鈕會自動判斷目前是「發布」還是「更新」：工作區來自線上元件且你仍是作者（或協作者）時顯示更新，否則顯示發布。
預覽入口缺失會攔住發布
mini 或 full 預覽入口不存在時，發布前會提示補齊。按元件規範放置 demo/index.vue、demo/full.vue 即可。
Studio 與 CLI 怎麼選
| 情境 | 推薦 |
|---|---|
| 從零寫一個元件、邊看效果邊改 | Studio |
| 首次發布、需要設定預覽與描述 | Studio 或上傳頁 |
| 已有元件改程式碼、快速發版 | comphub upload |
| 只改描述、標籤、預覽設定 | 平台更新頁 |
常見問題
預覽一直白屏
先看終端機是否還在安裝依賴，再確認元件入口有 default export。Web Component 檢查預覽 HTML 是否包含位於 <body> 的模組腳本。
AI 沒有回應
檢查目前模型來源：平台內建需要登入；自填 Key 需要確認 Key 有效、模型可用。
發布時提示未登入
重新走一次授權入口。授權頁只用來確認身分，不會把你的瀏覽器登入狀態複製給 Studio。
重新整理後檔案沒了
確認沒有刪除工作區；快照按工作區隔離，切換工作區後看到的是另一份檔案。