diff --git a/docs/content/index.md b/docs/content/index.md index 908bd2b..9d0d676 100644 --- a/docs/content/index.md +++ b/docs/content/index.md @@ -2,21 +2,33 @@ id: index title: UPage 文档 slug: / +hide_title: true --- -# UPage +

+

+ UPage 主界面 +
+

+ +

+GitHub release +GitHub last commit +GitHub Workflow Status +Documentation +

-UPage 是一款基于大模型的可视化网页构建平台，支持多种 AI 提供商集成，基于自然语言快速实现定制化网页。 ## 什么是 UPage？ -UPage 是一个开源的网页构建工具，它利用大语言模型，让用户能够通过自然语言描述来创建和定制网页。无论您是开发者、设计师还是内容创作者，UPage 都能帮助您快速将想法转化为可视化的网页。 +UPage 是一款基于大模型的可视化网页构建平台，支持多种 AI 提供商集成，基于自然语言快速实现定制化网页。它利用大语言模型，让用户能够通过自然语言描述来创建和定制网页。无论您是开发者、设计师还是内容创作者，UPage 都能帮助您快速将想法转化为可视化的网页。 ## 核心特性 -- **基于 AI 的页面生成**：通过自然语言描述生成完整的网页 -- **多种 AI 提供商支持**：兼容 OpenAI、Anthropic Claude、Google Gemini 等多种 AI 模型 +- **基于 LLM 的页面生成**：通过自然语言描述生成完整的网页 +- **多种 LLM 提供商支持**：兼容 OpenAI、Anthropic Claude、Google Gemini 等多种 LLM 模型 - **可视化编辑器**：简洁直观的可视化编辑器界面，实时预览 +- **多页面生成**：支持同时生成多个页面 - **代码导出**：生成标准的 HTML/CSS/JS 代码，方便集成到现有项目 - **响应式设计**：自动适应不同屏幕尺寸 - **部署集成**：支持一键部署到常见托管平台 diff --git a/docs/content/user-guide/ai-page-generation.md b/docs/content/user-guide/ai-page-generation.md deleted file mode 100644 index a2cb64e..0000000 --- a/docs/content/user-guide/ai-page-generation.md +++ /dev/null @@ -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 提供商配置正确 diff --git a/docs/content/user-guide/basics.md b/docs/content/user-guide/basics.md index 6e35da2..1327adb 100644 --- a/docs/content/user-guide/basics.md +++ b/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) +建设中... diff --git a/docs/content/user-guide/page-management.md b/docs/content/user-guide/page-management.md deleted file mode 100644 index 70d0af6..0000000 --- a/docs/content/user-guide/page-management.md +++ /dev/null @@ -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. 评论可以标记为已解决 diff --git a/docs/sidebars.js b/docs/sidebars.js index badec8c..cf62cb4 100644 --- a/docs/sidebars.js +++ b/docs/sidebars.js @@ -53,8 +53,6 @@ const sidebars = { }, items: [ 'user-guide/basics', - 'user-guide/ai-page-generation', - 'user-guide/page-management', ], }, { diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css index ac25312..349b681 100644 --- a/docs/src/css/custom.css +++ b/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'); +} diff --git a/docs/static/img/logo1.png b/docs/static/img/logo1.png new file mode 100644 index 0000000..ae107db Binary files /dev/null and b/docs/static/img/logo1.png differ diff --git a/docs/static/img/logo2.png b/docs/static/img/logo2.png new file mode 100644 index 0000000..665811d Binary files /dev/null and b/docs/static/img/logo2.png differ diff --git a/docs/static/img/logo3.png b/docs/static/img/logo3.png new file mode 100644 index 0000000..b17364a Binary files /dev/null and b/docs/static/img/logo3.png differ