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 生成的页面，并且支持用户手动编辑。