> ## Documentation Index
> Fetch the complete documentation index at: https://docs.codebanana.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 项目工作区

> 项目工作区是您与文件交互、预览输出并实时查看变更的核心工作区域。

## **文件导航与标签页**

在项目中工作时，已打开的文件会以标签页的形式组织，便于快速切换：

* 支持同时打开多个文件
* 标签页显示在工作区顶部
* 右键点击标签页可执行：
  * 关闭当前
  * 关闭其他
  * 全部关闭

这使您能够在处理项目不同部分时，更高效地管理上下文。

<Frame>
  <img src="https://mintcdn.com/gen-d40df51d/OJCghbN_0wXF2BB2/images/viewertab.png?fit=max&auto=format&n=OJCghbN_0wXF2BB2&q=85&s=98bc20b49505b78a5ef41c85b40ec9a8" alt="Viewertab" width="2294" height="1264" data-path="images/viewertab.png" />
</Frame>

## **文件查看与预览**

工作区会根据文件类型，支持 **代码模式与预览模式**：

**Markdown（md）**

* 支持在 **Code** 与 **Preview** 之间切换
* 支持在预览模式下直接编辑
* 输入 / 可触发格式选项
* 选中某一行后，可通过 **右键执行格式与编辑操作**

<Frame>
  <img src="https://mintcdn.com/gen-d40df51d/OJCghbN_0wXF2BB2/images/mdedit.png?fit=max&auto=format&n=OJCghbN_0wXF2BB2&q=85&s=e8bfe6ce1c179eff8c788f4defb26a3a" alt="Mdedit" width="2294" height="1264" data-path="images/mdedit.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/gen-d40df51d/OJCghbN_0wXF2BB2/images/markdownpreview.png?fit=max&auto=format&n=OJCghbN_0wXF2BB2&q=85&s=d5abec851b2773dcdc108e220538f917" alt="Markdownpreview" width="2294" height="1264" data-path="images/markdownpreview.png" />
</Frame>

**HTML / JSON / 静态文件**

* 支持代码视图与预览模式
* 支持在新标签页中打开

<Frame>
  <img src="https://mintcdn.com/gen-d40df51d/OJCghbN_0wXF2BB2/images/htmlpreview.png?fit=max&auto=format&n=OJCghbN_0wXF2BB2&q=85&s=81a9ccbb62c0dabc56eb1a5970e4d3fd" alt="Htmlpreview" width="2294" height="1264" data-path="images/htmlpreview.png" />
</Frame>

**应用项目**

* 支持在多个环境中进行预览：
  * Web
  * iOS
  * Android
  * My Device（通过外部预览工具）
* 支持刷新，以便实时查看更新

## **项目预览**

当服务处于运行状态时，项目工作区支持 **实时预览**：

* 自动识别活跃端口
* 可即时访问正在运行的应用
* 也可通过 **Service 面板** 进入

这带来了一种“所见即所得”的体验，类似于实时文档编辑，但应用于应用本身。

<Frame>
  <img src="https://mintcdn.com/gen-d40df51d/OJCghbN_0wXF2BB2/images/projectpreview.png?fit=max&auto=format&n=OJCghbN_0wXF2BB2&q=85&s=96a6ebba2cd79c601733c62c29cec953" alt="Projectpreview" width="2294" height="1264" data-path="images/projectpreview.png" />
</Frame>

## **编辑与交互**

项目工作区支持直接与项目内容进行交互：

* 选中内容后可执行：
  * 添加评论
  * 引用到聊天
  * 复制内容
* 评论会绑定到具体行号，并在上下文中持续可见
* 浮动评论面板可帮助您快速浏览和定位所有评论

<Frame>
  <img src="https://mintcdn.com/gen-d40df51d/OJCghbN_0wXF2BB2/images/comment.png?fit=max&auto=format&n=OJCghbN_0wXF2BB2&q=85&s=d944455484671bfa0da052518fa4d3e3" alt="Comment" width="2294" height="1264" data-path="images/comment.png" />
</Frame>

## **Diff 与变更追踪**

当文件发生修改时，可使用额外视图：

* **Preview** — 文件当前状态
* **Diff View** — 对比当前修改与之前版本的差异

这有助于团队在提交或分享更新前，清晰了解具体变更内容。

<Frame>
  <img src="https://mintcdn.com/gen-d40df51d/OJCghbN_0wXF2BB2/images/diff.png?fit=max&auto=format&n=OJCghbN_0wXF2BB2&q=85&s=2a8726894cf243c8c59b0db7c7a65b4d" alt="Diff" width="2294" height="1264" data-path="images/diff.png" />
</Frame>

## **分享**

某些文件类型（例如 HTML、Markdown、JSON）支持 **可分享链接**，允许其他人在不进入完整项目的情况下从外部查看内容。

<Frame>
  <img src="https://mintcdn.com/gen-d40df51d/Few9LVDTbxUXcu0o/images/share.png?fit=max&auto=format&n=Few9LVDTbxUXcu0o&q=85&s=6e900e36e01c58fa1f14ed422fc0d060" alt="Share" width="2294" height="1264" data-path="images/share.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/gen-d40df51d/Few9LVDTbxUXcu0o/images/shareexam.png?fit=max&auto=format&n=Few9LVDTbxUXcu0o&q=85&s=413acccd4b5b92320baea148700cb831" alt="Shareexam" width="2294" height="1264" data-path="images/shareexam.png" />
</Frame>
