---
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)