docs: supplemental user guide documents

docs/content/user-guide/basics.md

@@ -1,12 +1,39 @@
 ---
 id: basics
-title: 基础使用
+title: 基础介绍
 ---
 
-# 基础使用
+# 基础介绍
 
-本文档介绍 UPage 的基本使用方法，帮助您快速上手这款基于大模型的可视化网页构建平台。
+本文档介绍 UPage 的基本功能，帮助您快速上手这款基于大模型的可视化网页构建平台。
 
-## 主界面概览
+UPage 主要分为两个部分：
 
-建设中...
+- 首页
+- 会话及生成界面
+
+## 首页
+
+UPage 的首页是用户与 AI 交互的入口，由几个主要区域组成，每个区域都有其特定的功能：
+
+![](/img/user-guide/basics/home.png)
+
+1. **菜单功能部分：** 包含 **历史记录**、**亮暗色模式切换**。
+2. **个人用户功能部分：** 包括 **用户信息**、**API 使用量统计**、 **部署记录**、**登录/退出登录** 等功能。
+3. **主功能区域：** UPage 的主要入口，包括 **聊天输入框**、**上传按钮**、**提示词优化** 等功能。
+4. **快捷生成部分：** 主要用于使用预设提示词的网页生成。
+
+## 会话及生成界面
+
+当用户在首页中输入提示词并点击发送后，会自动跳转至对话及生成界面，此界面是 UPage 的核心功能界面，用户可以在此界面中与 AI 进行交互，生成网页。
+包含如下区域：
+
+![](/img/user-guide/basics/dialogue_interface.png)
+
+1. **标题区域：**：展示当前聊天的标题，用户可以在此区域中重命名聊天名称。
+2. **部署功能区：**：用于将生成的页面部署至 **1Panel**、**Netlify**、**Vercel** 等平台。
+3. **聊天交互区：**：展示用户与 AI 的聊天信息，例如用户发送的消息、AI 回复的消息以及生成的页面。
+4. **编辑器功能菜单：**：对生成的页面进行**预览**、**下载源码**、**推送至 Github** 等操作。
+5. **响应状态区域：**：展示当前对话的响应状态，例如正在处理响应、正在思考等中间状态。
+6. **对话输入框：**：用户与 AI 可以进行多轮对话，对生成的页面进行多轮调整。
+7. **编辑器：**：核心区域，用于实时展示 AI 生成的页面，并且支持用户手动编辑。

docs/content/user-guide/dialogue-interface.md

@@ -0,0 +1,136 @@
+---
+id: dialogue-interface
+title: 会话及生成界面
+---
+
+# 会话及生成界面概述
+
+会话及生成界面是 UPage 的核心功能界面，用户可以在此界面中与 AI 进行多轮对话，生成网页。
+
+![](/img/user-guide/dialogue-interface/index.png)
+
+:::tip
+此页面需要至少与 AI 进行首次对话后，才能出现，否则会自动跳转至首页。
+:::
+
+## 标题区域
+
+在标题区域中，可以展示当前聊天的标题，用户可以在此区域中重命名聊天名称。重命名后的聊天名称将展示在历史记录中。
+
+:::note
+不建议重命名特别长的聊天名称，过长的聊天名称会被遮挡。
+:::
+
+## 部署功能区
+
+当页面生成完成之后，可以使用部署功能区将生成的页面部署至 **1Panel**、**Netlify**、**Vercel** 等平台。
+
+![](/img/user-guide/dialogue-interface/deployment.png)
+
+### 部署至 1Panel
+
+:::warning
+当前仅支持 **1Panel V2** 版本。并且请确保 **1Panel** 已安装 `OpenResty` 应用。
+:::
+
+首次部署时，会弹出**连接 1Panel** 的对话框，用户需要在此对话框中填写 1Panel 的连接信息。
+
+![](/img/user-guide/dialogue-interface/connect_1panel.png)
+
+在此对话框中，用户需要填写 **服务器地址** 和 **API 密钥**。
+
+:::tip
+API 密钥可以前往 1Panel 的 `面板设置 - API 接口` 中获取。
+
+请参阅 [1Panel API 文档](https://1panel.cn/docs/v2/dev_manual/api_manual/)。
+:::
+
+填写完成后，点击**连接**按钮，会打开**部署至 1Panel** 的对话框。
+
+![](/img/user-guide/dialogue-interface/deploy_1panel.png)
+
+在此对话框中，用户可以输入 **协议**、**自定义域名** 等信息，点击**部署到 1Panel**按钮后，会自动将生成的页面部署至 1Panel 的网站中。
+
+### 部署至 Netlify
+
+首次部署时，会弹出**连接 Netlify** 的对话框，用户需要在此对话框中填写 Netlify 的连接信息。
+
+![](/img/user-guide/dialogue-interface/connect_netlify.png)
+
+在此对话框中，用户需要填写 Netlify 的 **访问令牌**。
+
+填写完成后，点击**连接**按钮，会打开**部署至 Netlify** 的对话框。
+
+![](/img/user-guide/dialogue-interface/deploy_netlify.png)
+
+在此对话框中，可以对已部署的网站进行 **清除缓存**、**删除站点** 等操作。
+
+点击 **部署到 Netlify** 按钮后，会自动将生成的页面部署至 Netlify 中。
+
+### 部署至 Vercel
+
+首次部署时，会弹出**连接 Vercel** 的对话框，用户需要在此对话框中填写 Vercel 的连接信息。
+
+![](/img/user-guide/dialogue-interface/connect_vercel.png)
+
+在此对话框中，用户需要填写 Vercel 的 **访问令牌**。
+
+填写完成后，点击**连接**按钮，会打开**部署至 Vercel** 的对话框。
+
+![](/img/user-guide/dialogue-interface/deploy_vercel.png)
+
+在此对话框中，可以查看已部署至 Vercel 的网站信息。
+
+点击 **部署到 Vercel** 按钮后，会自动将生成的页面部署至 Vercel 中。
+
+## 对话交互
+
+在对话交互区中，可以展示用户与 AI 的聊天信息，例如用户发送的消息、AI 回复的消息以及 AI 当前正在生成或已生成完成的页面 `Section` 信息。
+
+![](/img/user-guide/dialogue-interface/chat_interaction.png)
+
+点击对应的 `Section` 可以查看该 `Section` 在整个页面中所处的位置。
+
+## 对话输入框
+
+对话输入框中，可以与 AI 进行多轮对话，对已生成的页面进行调整。
+
+## 编辑器功能菜单
+
+编辑器功能菜单用于对已生成的页面进行可视化、预览、下载源码、推送至 Github 等操作。并且还可以在用户手动编辑后，展示与 AI 生成内容的差异性。
+
+### 可视化
+
+建设中...
+
+### 差异
+
+建设中...
+
+### 预览
+
+建设中...
+
+### 下载源码
+
+建设中...
+
+### 推送至 Github
+
+建设中...
+
+## 可视化编辑器
+
+可视化编辑器用于对已生成的页面进行可视化编辑，支持对文本直接修改、上传图片、修改图标、 AI 定点修改等操作。
+
+### 上传图片
+
+建设中...
+
+### 修改图标
+
+建设中...
+
+### AI定点修改
+
+建设中...

docs/content/user-guide/home.md

@@ -0,0 +1,57 @@
+---
+id: home
+title: 首页
+---
+
+# 首页概述
+
+首页是 UPage 的入口，用户可以在此页面中对将要生成的页面进行首次提示词的填写。
+
+![](/img/user-guide/home/index.png)
+
+## 首次提示词填写
+
+在首页的**主功能区域**中，用户可以填写首次提示词，点击**发送**按钮后，会自动跳转至对话及生成界面。
+
+![](/img/user-guide/home/index_prompt.png)
+
+在此界面中，用户还可以选择图片上传，上传的图片将会在对话及生成界面中作为参考图片使用。
+
+:::tip
+尽可能详细地描述您的网页需求，包括功能、风格、布局、色彩等，这样 AI 可以生成更符合您期望的网页。
+
+根据图片生成页面需要相应的模型支持，部分模型可能不支持识别图片。
+
+如果提示词中包含网页、查询天气等，大部分模型并不支持此类功能，此时需要工具的支持。 参考 [AI 工具配置](../configuration#ai-工具配置) 进行配置。
+:::
+
+## 提示词优化
+
+在首页的**主功能区域**中，当填写完提示词后，可以点击**提示词优化**按钮，使用 LLM 对编写的提示词进行优化。优化后的提示词将作为首次提示词使用。
+
+## 侧边工具栏
+
+点击首页**菜单功能部分**中的 **历史记录** 按钮，可以打开侧边栏，查看所有历史对话。
+
+![](/img/user-guide/home/index_history.png)
+
+在侧边栏中，可以对历史对话进行 **查看**、 **复制**、 **重命名**、**删除** 等操作。
+
+## 用户功能
+
+在首页的**个人用户功能部分**中，可以查看用户信息、API 使用量统计、部署记录、登录/退出登录等。
+
+![](/img/user-guide/home/user_detail.png)
+
+### API 使用量统计
+
+点击**API 使用量统计**按钮，可以查看 API 使用量情况统计。
+
+![](/img/user-guide/home/api_usage.png)
+
+### 部署记录
+
+点击**部署记录**按钮，可以查看当前聊天的部署记录。
+
+![](/img/user-guide/home/deployment_records.png)
+

docs/content/user-guide/share.md

@@ -0,0 +1,6 @@
+---
+id: share
+title: 分享
+---
+
+建设中...

docs/sidebars.js

@@ -54,6 +54,9 @@ const sidebars = {
       },
       items: [
         'user-guide/basics',
+        'user-guide/home',
+        'user-guide/dialogue-interface',
+        'user-guide/share',
       ],
     },
     {