upage-git/docs/content/user-guide/basics.md

id, title

id	title
basics	基础使用

基础使用

本文档介绍 UPage 的基本使用方法，帮助您快速上手这款基于 AI 的网页构建平台。

登录系统

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 生成页面
• 学习页面管理的高级技巧
• 探索更多配置选项