feat: add markdown
This commit is contained in:
alivender
@@ -53,159 +53,16 @@ const showDocPanel = ref(false);
|
||||
const documentContent = ref('');
|
||||
|
||||
// 切换文档面板和属性面板
|
||||
function toggleDocPanel() {
|
||||
async function toggleDocPanel() {
|
||||
showDocPanel.value = !showDocPanel.value;
|
||||
|
||||
// 如果切换到文档面板，则获取文档内容
|
||||
if (showDocPanel.value) {
|
||||
fetchDocumentation();
|
||||
const response = await fetch("/public/doc/01_water_led/water_led.md");
|
||||
documentContent.value = await response.text();
|
||||
}
|
||||
}
|
||||
|
||||
// 模拟获取文档的函数
|
||||
function fetchDocumentation() {
|
||||
// 这里模拟API请求，返回固定的Markdown内容
|
||||
const mockDocContent = `
|
||||
# FPGA WebLab 用户指南
|
||||
|
||||
## 简介
|
||||
|
||||
FPGA WebLab是一个基于Web的FPGA设计和实验平台，允许用户在浏览器中进行FPGA设计、仿真和验证。该平台提供了丰富的组件库和直观的界面，使FPGA学习和设计变得简单高效。
|
||||
|
||||
## 功能特点
|
||||
|
||||
- **可视化设计**：拖拽式界面，无需编写底层代码
|
||||
- **组件库**：包含多种常用FPGA组件
|
||||
- **实时验证**：设计完成后可立即进行验证和测试
|
||||
- **远程编程**：支持远程将设计烧录到物理FPGA设备
|
||||
- **协作功能**：支持多人同时在线编辑和查看
|
||||
|
||||
## 快速入门
|
||||
|
||||
### 创建项目
|
||||
|
||||
1. 点击主界面的"新建项目"按钮
|
||||
2. 输入项目名称和描述
|
||||
3. 选择目标FPGA设备型号
|
||||
4. 点击"创建"完成项目初始化
|
||||
|
||||
### 添加组件
|
||||
|
||||
1. 在左侧组件库中找到需要的组件
|
||||
2. 将组件拖拽到设计区域
|
||||
3. 通过右侧属性面板配置组件参数
|
||||
|
||||
### 连接组件
|
||||
|
||||
1. 点击一个组件的输出引脚
|
||||
2. 拖动连线到目标组件的输入引脚
|
||||
3. 松开鼠标完成连接
|
||||
4. 连线会自动显示信号名称和类型
|
||||
|
||||
### 验证设计
|
||||
|
||||
1. 点击工具栏中的"验证"按钮
|
||||
2. 系统会自动检查设计中的错误和警告
|
||||
3. 如有问题，可查看错误日志进行修复
|
||||
|
||||
### 模拟仿真
|
||||
|
||||
1. 点击"仿真"按钮进入仿真模式
|
||||
2. 设置输入信号和仿真参数
|
||||
3. 运行仿真并查看波形输出
|
||||
4. 可通过时间轴查看不同时刻的信号状态
|
||||
|
||||
### 烧录到设备
|
||||
|
||||
1. 确保FPGA设备已连接
|
||||
2. 点击"合成"按钮生成比特流文件
|
||||
3. 点击"烧录"将设计下载到物理设备
|
||||
4. 查看烧录日志确认操作成功
|
||||
|
||||
## 组件说明
|
||||
|
||||
### 基础逻辑组件
|
||||
|
||||
- **AND/OR/XOR门**：基本逻辑门，可设置输入数量
|
||||
- **MUX多路复用器**：数据选择器，根据选择信号输出不同输入
|
||||
- **触发器/寄存器**：存储单元，可选D、T、JK等不同类型
|
||||
- **计数器**：可配置位宽、计数方向等参数
|
||||
|
||||
### 接口组件
|
||||
|
||||
- **按钮/开关**：用户输入控制元件
|
||||
- **LED指示灯**：显示数字输出状态
|
||||
- **七段数码管**：显示数字信息
|
||||
- **UART接口**：串行通信接口
|
||||
|
||||
### 高级组件
|
||||
|
||||
- **RAM/ROM**：存储模块，可配置数据位宽和深度
|
||||
- **PLL/DCM**：时钟控制模块
|
||||
- **DSP模块**：数字信号处理单元
|
||||
- **MCU集成**：可嵌入微控制器核心
|
||||
|
||||
## 常见问题
|
||||
|
||||
### 设计无法编译
|
||||
|
||||
检查以下可能的原因：
|
||||
- 组件之间连线不完整
|
||||
- 组件参数设置不正确
|
||||
- 存在时序冲突
|
||||
- 资源使用超出目标设备限制
|
||||
|
||||
### 模拟结果与预期不符
|
||||
|
||||
可能的解决方法：
|
||||
- 检查输入激励是否正确
|
||||
- 验证时钟设置和复位信号
|
||||
- 调整仿真时间步长
|
||||
- 查看信号完整传播路径
|
||||
|
||||
### 设备烧录失败
|
||||
|
||||
常见原因及解决方法：
|
||||
- 检查USB连接和驱动安装
|
||||
- 确认选择了正确的设备型号
|
||||
- 验证生成的比特流文件是否有效
|
||||
- 重新安装FPGA开发工具
|
||||
|
||||
## 高级技巧
|
||||
|
||||
### 层次化设计
|
||||
|
||||
对于复杂项目，建议按功能模块划分设计层次，创建子模块后再进行顶层连接。
|
||||
|
||||
### 自定义组件
|
||||
|
||||
可以将常用电路打包为自定义组件，方便在不同项目中重复使用。
|
||||
|
||||
### 版本控制
|
||||
|
||||
定期保存设计快照，利用版本历史功能跟踪设计变更。
|
||||
|
||||
### 性能优化
|
||||
|
||||
- 减少关键路径上的组件数量
|
||||
- 优化时钟树结构
|
||||
- 合理布局减小互连延迟
|
||||
- 使用流水线结构提高吞吐量
|
||||
|
||||
## 联系我们
|
||||
|
||||
如有任何问题或建议，请通过以下方式联系我们：
|
||||
- 邮箱：support@fpgaweblab.com
|
||||
- 论坛：forum.fpgaweblab.com
|
||||
- 微信公众号：FPGA_WebLab
|
||||
|
||||
感谢您使用FPGA WebLab！
|
||||
`;
|
||||
|
||||
// 更新文档内容
|
||||
documentContent.value = mockDocContent;
|
||||
}
|
||||
|
||||
// --- 元器件管理 ---
|
||||
const showComponentsMenu = ref(false);
|
||||
const diagramData = ref<DiagramData>({
|
||||
|
||||
Reference in New Issue
Block a user