docs: add upage usage instructions document

docs/content/index.md

@@ -2,21 +2,33 @@
 id: index
 title: UPage 文档
 slug: /
+hide_title: true
 ---
 
-# UPage
+<p align="center">
+  <div className="theme-logo" style={{ width: '240px' }}>
+    <img alt="UPage 主界面" />
+  </div>
+</p>
+
+<p align="center" style={{ display: 'flex', gap: '4px', justifyContent: 'center' }}>
+<a href="https://github.com/halo-dev/upage/releases"><img alt="GitHub release" src="https://img.shields.io/github/release/halo-dev/upage.svg?style=flat-square&include_prereleases" /></a>
+<a href="https://github.com/halo-dev/upage/commits"><img alt="GitHub last commit" src="https://img.shields.io/github/last-commit/halo-dev/upage.svg?style=flat-square" /></a>
+<a href="https://github.com/halo-dev/upage/actions"><img alt="GitHub Workflow Status" src="https://img.shields.io/github/actions/workflow/status/halo-dev/upage/halo.yaml?branch=main&style=flat-square" /></a>
+<a href="https://halo-dev.github.io/upage/"><img alt="Documentation" src="https://img.shields.io/badge/docs-latest-blue?style=flat-square" /></a>
+</p>
 
-UPage 是一款基于大模型的可视化网页构建平台，支持多种 AI 提供商集成，基于自然语言快速实现定制化网页。
 
 ## 什么是 UPage？
 
-UPage 是一个开源的网页构建工具，它利用大语言模型，让用户能够通过自然语言描述来创建和定制网页。无论您是开发者、设计师还是内容创作者，UPage 都能帮助您快速将想法转化为可视化的网页。
+UPage 是一款基于大模型的可视化网页构建平台，支持多种 AI 提供商集成，基于自然语言快速实现定制化网页。它利用大语言模型，让用户能够通过自然语言描述来创建和定制网页。无论您是开发者、设计师还是内容创作者，UPage 都能帮助您快速将想法转化为可视化的网页。
 
 ## 核心特性
 
-- **基于 AI 的页面生成**：通过自然语言描述生成完整的网页
+- **基于 LLM 的页面生成**：通过自然语言描述生成完整的网页
-- **多种 AI 提供商支持**：兼容 OpenAI、Anthropic Claude、Google Gemini 等多种 AI 模型
+- **多种 LLM 提供商支持**：兼容 OpenAI、Anthropic Claude、Google Gemini 等多种 LLM 模型
 - **可视化编辑器**：简洁直观的可视化编辑器界面，实时预览
+- **多页面生成**：支持同时生成多个页面
 - **代码导出**：生成标准的 HTML/CSS/JS 代码，方便集成到现有项目
 - **响应式设计**：自动适应不同屏幕尺寸
 - **部署集成**：支持一键部署到常见托管平台

docs/content/user-guide/ai-page-generation.md

@@ -1,159 +0,0 @@
----
-id: ai-page-generation
-title: AI 页面生成
----
-
-# AI 页面生成
-
-UPage 的核心功能是通过人工智能生成网页。本文档将指导您如何使用 AI 功能快速创建和定制网页。
-
-## 基于自然语言创建页面
-
-### 创建新页面
-
-1. 在 UPage 主界面，点击侧边栏中的"新建页面"按钮
-2. 选择"AI 创建"选项
-3. 在对话框中输入您的页面需求描述
-4. 点击"生成"按钮
-
-### 编写有效的页面描述
-
-为了获得最佳结果，建议按照以下方式编写页面描述：
-
-- **明确页面类型**：例如"产品展示页面"、"博客文章"、"联系表单"等
-- **指定关键元素**：列出页面应包含的主要组件和内容
-- **描述风格和布局**：说明您期望的设计风格和布局结构
-- **提供具体内容**：如果有特定文本或图片要求，请明确说明
-
-示例描述：
-
-```
-创建一个现代风格的产品登录页面，用于展示我们的智能手表产品。页面应包含：
-1. 顶部导航栏，带有品牌标志和菜单
-2. 醒目的标题和副标题，强调产品的主要卖点
-3. 产品图片展示区，包含至少3张不同角度的产品图
-4. 产品特点列表，使用图标和简短描述
-5. 价格信息和"立即购买"按钮
-6. 客户评价部分
-7. 常见问题解答
-8. 页脚，包含联系信息和社交媒体链接
-整体配色应使用深蓝色和白色为主，符合科技产品的定位
-```
-
-## 迭代优化页面
-
-### 修改现有页面
-
-1. 选择要修改的页面
-2. 点击工具栏中的"AI 辅助"按钮
-3. 描述您想要进行的修改
-4. AI 将生成修改建议并应用到页面
-
-### 局部调整
-
-您也可以针对页面的特定部分进行 AI 辅助调整：
-
-1. 选择页面中的特定组件或区域
-2. 点击右键菜单中的"AI 辅助"选项
-3. 描述您希望对该部分进行的修改
-4. 确认 AI 生成的调整
-
-## AI 提示技巧
-
-### 有效的提示模式
-
-以下是一些有效的 AI 提示模式：
-
-- **添加内容**："在页面顶部添加一个公告栏，显示最新促销信息"
-- **修改样式**："将按钮颜色改为蓝色，并增加圆角效果"
-- **调整布局**："将产品展示区改为两列网格布局，每个产品卡片包含图片、标题和价格"
-- **优化文案**："将页面标题改为更吸引人的营销语言，强调产品的独特卖点"
-- **增强功能**："在产品图片区添加轮播效果，允许用户浏览多张产品图片"
-
-### 提示示例
-
-以下是一些实际的提示示例：
-
-```
-将页面背景改为浅灰色，增加视觉层次感
-```
-
-```
-优化页面的移动端显示效果，确保在小屏幕上也能良好展示
-```
-
-```
-添加一个简单的联系表单，包含姓名、邮箱和留言字段
-```
-
-```
-将产品描述文本改为更简洁有力的表达，突出产品解决的问题
-```
-
-## 高级 AI 功能
-
-### 风格迁移
-
-您可以使用 AI 将一个页面的设计风格应用到另一个页面：
-
-1. 在 AI 提示中引用现有页面
-2. 描述您希望迁移的风格元素
-3. AI 将分析并应用相似的设计风格
-
-示例：
-```
-将我的"关于我们"页面的设计风格应用到这个"联系我们"页面，保持一致的视觉语言
-```
-
-### 多语言支持
-
-UPage 支持使用 AI 生成多语言内容：
-
-1. 创建基础页面
-2. 使用 AI 辅助功能，指定目标语言
-3. AI 将翻译页面内容并保持布局结构
-
-示例：
-```
-将此页面内容翻译成英文，保持相同的布局和设计
-```
-
-## 最佳实践
-
-### 审查和编辑
-
-AI 生成的内容通常需要人工审查和编辑：
-
-1. 检查生成的文本是否准确、相关
-2. 调整布局和样式以符合品牌要求
-3. 确保所有链接和功能正常工作
-4. 优化图片和媒体内容
-
-### 渐进式生成
-
-对于复杂页面，采用渐进式生成方法：
-
-1. 首先生成基本页面结构
-2. 逐步添加和完善各个部分
-3. 使用 AI 辅助进行细节优化
-4. 最后进行整体协调和统一
-
-## 故障排除
-
-### 生成结果不理想
-
-如果 AI 生成的页面不符合预期：
-
-1. 尝试提供更具体、更详细的描述
-2. 分解复杂需求为多个简单步骤
-3. 提供参考示例或链接
-4. 调整使用的 AI 模型（如果可用）
-
-### 性能问题
-
-如果遇到性能问题：
-
-1. 减少单次生成的页面复杂度
-2. 分步骤生成复杂页面
-3. 检查网络连接和 API 状态
-4. 确认 AI 提供商配置正确

docs/content/user-guide/basics.md

@@ -5,138 +5,8 @@ title: 基础使用
 
 # 基础使用
 
-本文档介绍 UPage 的基本使用方法，帮助您快速上手这款基于 AI 的网页构建平台。
+本文档介绍 UPage 的基本使用方法，帮助您快速上手这款基于大模型的可视化网页构建平台。
 
-## 登录系统
+## 主界面概览
 
-1. 打开浏览器，访问 UPage 的地址（例如 `http://localhost:3000`）
+建设中...
-2. 如果已配置 Logto 认证，您将被重定向到登录页面
-3. 输入用户名和密码登录系统
-4. 如果未配置认证系统，您将直接进入 UPage 主界面
-
-## 界面概览
-
-UPage 的界面主要分为以下几个部分：
-
-- **顶部导航栏**：包含项目切换、用户信息和全局设置
-- **侧边栏**：包含页面列表和创建新页面的入口
-- **主内容区**：显示当前编辑的页面或预览
-- **工具栏**：提供各种编辑工具和操作按钮
-
-## 创建新页面
-
-### 使用 AI 创建页面
-
-1. 点击侧边栏中的"新建页面"按钮
-2. 选择"AI 创建"选项
-3. 在对话框中描述您想要创建的页面，例如：
-   ```
-   创建一个产品展示页面，包含标题、产品图片、详细描述和购买按钮
-   ```
-4. 点击"生成"按钮，系统将基于您的描述生成页面
-5. 生成完成后，您可以进一步编辑和调整页面内容
-
-### 从模板创建页面
-
-1. 点击侧边栏中的"新建页面"按钮
-2. 选择"从模板创建"选项
-3. 浏览可用的模板并选择一个适合您需求的模板
-4. 点击"使用此模板"按钮
-5. 根据需要编辑和自定义模板内容
-
-### 从空白页面开始
-
-1. 点击侧边栏中的"新建页面"按钮
-2. 选择"空白页面"选项
-3. 使用拖拽方式添加组件到页面
-4. 配置组件属性和样式
-
-## 编辑页面
-
-### 添加组件
-
-1. 在编辑模式下，点击工具栏中的"组件"按钮
-2. 从组件库中选择所需组件
-3. 将组件拖拽到页面中的目标位置
-4. 调整组件大小和位置
-
-### 编辑组件属性
-
-1. 在页面中点击选择要编辑的组件
-2. 在右侧属性面板中编辑组件的属性
-3. 修改文本内容、图片、链接等
-4. 调整组件的样式、颜色、字体等
-
-### 使用 AI 辅助编辑
-
-1. 选择要编辑的组件或页面区域
-2. 点击工具栏中的"AI 辅助"按钮
-3. 描述您想要进行的修改，例如：
-   ```
-   将这段文本改为更吸引人的营销语言，强调产品的优势
-   ```
-4. AI 将根据您的描述生成修改建议
-5. 确认修改或进行进一步调整
-
-## 预览和发布
-
-### 预览页面
-
-1. 点击工具栏中的"预览"按钮
-2. 在预览模式下查看页面在不同设备上的显示效果
-3. 使用设备切换按钮查看响应式效果
-
-### 发布页面
-
-1. 完成页面编辑后，点击工具栏中的"发布"按钮
-2. 选择发布选项（如发布到网站、导出代码等）
-3. 根据提示完成发布流程
-
-## 管理页面
-
-### 页面列表
-
-1. 在侧边栏中查看所有已创建的页面
-2. 点击页面名称打开并编辑页面
-3. 使用搜索框查找特定页面
-
-### 页面操作
-
-1. 在页面列表中，每个页面右侧有操作菜单
-2. 点击操作菜单可以进行复制、重命名、删除等操作
-3. 使用拖拽调整页面顺序
-
-## 系统设置
-
-### 用户设置
-
-1. 点击顶部导航栏中的用户头像
-2. 选择"个人设置"
-3. 修改个人信息、密码等
-
-### 系统配置
-
-1. 点击顶部导航栏中的设置图标
-2. 配置系统参数、AI 提供商等
-3. 管理用户权限和角色（需要管理员权限）
-
-## 键盘快捷键
-
-UPage 提供了一系列键盘快捷键，帮助您提高工作效率：
-
-| 快捷键 | 功能 |
-| --- | --- |
-| Ctrl+S | 保存当前页面 |
-| Ctrl+Z | 撤销操作 |
-| Ctrl+Y | 重做操作 |
-| Ctrl+C | 复制选中的组件 |
-| Ctrl+V | 粘贴组件 |
-| Delete | 删除选中的组件 |
-| Ctrl+P | 预览页面 |
-| Esc | 退出当前模式或取消选择 |
-
-## 下一步
-
-- 了解如何[使用 AI 生成页面](ai-page-generation)
-- 学习[页面管理](page-management)的高级技巧
-- 探索更多[配置选项](../configuration)

docs/content/user-guide/page-management.md

@@ -1,192 +0,0 @@
----
-id: page-management
-title: 页面管理
----
-
-# 页面管理
-
-本文档介绍如何在 UPage 中管理、组织和维护您的页面，帮助您有效地管理网站内容。
-
-## 页面列表
-
-### 查看页面列表
-
-1. 在 UPage 主界面，侧边栏显示了所有已创建的页面
-2. 页面按创建时间或自定义顺序排列
-3. 每个页面条目显示页面名称和最后修改时间
-
-### 搜索和筛选
-
-1. 使用侧边栏顶部的搜索框搜索特定页面
-2. 可以按页面名称、标签或内容进行搜索
-3. 使用筛选选项按页面类型、创建日期或状态筛选
-
-## 页面操作
-
-### 基本操作
-
-在页面列表中，每个页面右侧有操作菜单，提供以下功能：
-
-- **编辑**：打开页面编辑器
-- **预览**：在新标签页中预览页面
-- **复制**：创建页面的副本
-- **重命名**：修改页面名称
-- **删除**：删除页面（可恢复）
-- **导出**：导出页面代码或资源
-
-### 批量操作
-
-选择多个页面可以执行批量操作：
-
-1. 使用复选框选择多个页面
-2. 点击批量操作按钮
-3. 选择要执行的操作（如删除、导出、应用标签等）
-
-## 页面组织
-
-### 使用标签
-
-标签是组织页面的有效方式：
-
-1. 在页面设置中添加标签
-2. 使用侧边栏中的标签筛选器查看特定标签的页面
-3. 标签可以用于分类页面（如"产品"、"博客"、"着陆页"等）
-
-### 创建文件夹
-
-对于大型项目，可以使用文件夹组织页面：
-
-1. 点击侧边栏中的"新建文件夹"按钮
-2. 输入文件夹名称
-3. 将页面拖放到文件夹中
-4. 点击文件夹可以展开或折叠其内容
-
-## 页面版本控制
-
-### 版本历史
-
-UPage 自动保存页面的版本历史：
-
-1. 在页面编辑器中，点击"版本历史"按钮
-2. 查看页面的所有历史版本
-3. 点击任何版本可以预览该版本的页面状态
-
-### 恢复版本
-
-如果需要恢复到之前的版本：
-
-1. 在版本历史中找到要恢复的版本
-2. 点击"恢复此版本"按钮
-3. 确认恢复操作
-4. 系统将创建一个新版本，内容与选定的历史版本相同
-
-### 比较版本
-
-比较不同版本之间的差异：
-
-1. 在版本历史中选择两个版本
-2. 点击"比较"按钮
-3. 系统将显示两个版本之间的差异，包括添加、删除和修改的内容
-
-## 页面设置
-
-### 基本设置
-
-每个页面都有以下基本设置：
-
-1. **页面名称**：显示在侧边栏和浏览器标签中
-2. **页面描述**：用于 SEO 和社交媒体分享
-3. **URL 路径**：页面的访问路径
-4. **标签**：用于组织和分类页面
-5. **状态**：草稿、已发布或已归档
-
-### SEO 设置
-
-优化页面的搜索引擎表现：
-
-1. **Meta 标题**：搜索结果中显示的标题
-2. **Meta 描述**：搜索结果中显示的描述
-3. **关键词**：与页面内容相关的关键词
-4. **规范 URL**：指定页面的规范 URL
-5. **索引设置**：控制搜索引擎是否索引页面
-
-### 社交媒体设置
-
-自定义页面在社交媒体上的显示方式：
-
-1. **社交图片**：在社交媒体分享时显示的图片
-2. **社交标题**：在社交媒体分享时显示的标题
-3. **社交描述**：在社交媒体分享时显示的描述
-
-## 页面导出和导入
-
-### 导出页面
-
-UPage 支持多种导出格式：
-
-1. **HTML/CSS/JS**：导出标准 Web 文件
-2. **ZIP 归档**：包含所有页面资源的压缩包
-3. **JSON**：页面数据的 JSON 表示
-4. **PDF**：页面的 PDF 版本（适用于文档）
-
-导出步骤：
-
-1. 在页面列表中选择要导出的页面
-2. 点击"导出"按钮
-3. 选择导出格式
-4. 配置导出选项
-5. 点击"导出"开始下载
-
-### 导入页面
-
-导入现有页面：
-
-1. 点击"导入"按钮
-2. 选择导入源（文件、URL 或代码）
-3. 上传文件或输入 URL/代码
-4. 配置导入选项
-5. 点击"导入"开始处理
-
-## 页面备份
-
-### 创建备份
-
-定期备份您的页面：
-
-1. 在设置中找到"备份"选项
-2. 点击"创建备份"按钮
-3. 输入备份描述（可选）
-4. 选择要包含的页面
-5. 点击"开始备份"
-
-### 恢复备份
-
-从备份中恢复页面：
-
-1. 在设置中找到"备份"选项
-2. 找到要恢复的备份
-3. 点击"恢复"按钮
-4. 选择要恢复的页面
-5. 选择恢复模式（覆盖或创建新页面）
-6. 点击"开始恢复"
-
-## 协作功能
-
-### 共享页面
-
-与团队成员共享页面：
-
-1. 在页面操作菜单中选择"共享"
-2. 输入团队成员的电子邮件地址
-3. 选择权限级别（查看、编辑或管理）
-4. 点击"发送邀请"
-
-### 评论和反馈
-
-在页面上添加评论和反馈：
-
-1. 在预览模式下，点击"评论"按钮
-2. 点击页面任何位置添加评论
-3. 输入评论内容
-4. 可以@提及团队成员
-5. 评论可以标记为已解决

docs/sidebars.js

@@ -53,8 +53,6 @@ const sidebars = {
       },
       items: [
         'user-guide/basics',
-        'user-guide/ai-page-generation',
-        'user-guide/page-management',
       ],
     },
     {

docs/src/css/custom.css

@@ -50,3 +50,17 @@
 [data-theme="dark"] .base-url-highlight {
   color: #64b5f6;
 }
+
+/* 亮暗模式下的 logo 切换 */
+.theme-logo {
+  position: relative;
+  display: inline-block;
+}
+
+.theme-logo img {
+  content: url('/img/logo1.png');
+}
+
+[data-theme="dark"] .theme-logo img {
+  content: url('/img/logo2.png');
+}