143 lines
3.8 KiB
Markdown
143 lines
3.8 KiB
Markdown
---
|
||
id: basics
|
||
title: 基础使用
|
||
---
|
||
|
||
# 基础使用
|
||
|
||
本文档介绍 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 生成页面](ai-page-generation)
|
||
- 学习[页面管理](page-management)的高级技巧
|
||
- 探索更多[配置选项](../configuration)
|