使用 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。
刷新后文件没了
确认没有删除工作区；快照按工作区隔离，切换工作区后看到的是另一份文件。