# PhotDesign

**Repository Path**: Photlab/phot-design

## Basic Information

- **Project Name**: PhotDesign
- **Description**: 光纤传输仿真平台GUI
- **Primary Language**: TypeScript
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2024-10-30
- **Last Updated**: 2026-03-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# PhotDesign

[PhotDesign光纤通信仿真平台交互设计软件项目说明]()[1 模块简介]()[2 功能说明]()[2.1 系统仿真]()[2.2 无源器件仿真]()[2.3 有源器件仿真]()[2.4 分析器]()[3 依赖环境]()[3.1 环境依赖安装]()[3.2 安装Node.js环境]()[3.3 安装外部依赖包]()[3.4 安装项目相关依赖]()[4 开发指南]()[5 调试方法]()[5.1 启动 Chrome 开发者工具]()[5.2 DevTools 面板概览]()[5.3 使用断点调试 JavaScript]()[5.4 使用 Console 进行调试]()[6 打包方式]()[7 部署步骤]()[8 版权声明]()

## 1 模块简介

**本软件提供光纤通信仿真平台的可视化交互设计功能。实现可视化交互设计空间，用户通过鼠标交互式地设计和构建光纤通信仿真计算任务；实现光纤通信仿真组件库，允许用户管理通信仿真组件，从仿真组件库选择所需组件添加到光纤通信仿真计算任务中，根据仿真任务需要设置仿真组件参数，并实现对仿真组件库与仿真示例项目库的管理与用户浏览；实现光纤通信仿真任务的运行控制交互操作，并在消息日志窗口中输出仿真任务运行日志信息。  **

## 2 功能说明

**PhotDesign主要分为系统仿真、无源器件仿真、有源器件仿真、分析器四个子模块/平台。**

### 2.1 系统仿真

**系统仿真模块具体可以分为客户端工具、界面切换、快速访问工具、常用工具、分析器以及设计器功能子模块。其中界面切换子模块包括系统仿真界面、器件仿真界面切换；设计器包括资源管理器、工作空间、组件浏览器、日志输出，资源管理器支持快速查询和模糊搜索，日志输出模块支持日志的过滤、清除以及保存。**

**系统仿真UI主要由五个部分组成：顶部工具栏区域、底部消息日志区域、中部从左至右分别为资源管理器区域、工作空间区域以及组件浏览器区域。工具栏主要提供系统仿真所使用到的各类工具菜单，例如文件工具、文本编辑工具、组件编辑工具、仿真工具、分析器工具等；资源管理器主要包括组件库、示例库、工程目录管理以及搜索功能入口；工作空间为用户提供设计光纤仿真系统的空间；组件管理器用于显示当前工作空间某个标签页的组件列表，并提供组件信息与组件参数的预览；消息日志区用于系统日志的输出与查看。**

### 2.2 无源器件仿真

**无源器件仿真UI主要由五个部分组成：顶部工具栏区域、底部消息日志区域、中部从左至右分别为器件对象管理区域、视图展示区域以及仿真历史记录列表区域。工具栏主要提供器件仿真所使用到的各类工具菜单，其中包括文件工具：用于提供器件仿真工程的创建、打开及关闭操作；模拟区域工具：用于设置器件仿真的系统参数；材料库管理：用于为器件对象提供新的材料、管理材料列表；器件设置：提供便捷的添加各类器件对象操作；仿真操作：用于管理仿真计算操作。器件对象管理主要包括已加入视图的各类器件对象列表的分类显示，同时提供快捷的器件对象管理操作，包括快速添加对象、删除器件以及批量删除器件操作，底部提供器件对象参数列表预览窗口。视图展示区域主要用于用户在添加完各类器件后，器件相对位置的预览，包括三张二维视图和一张透视视图窗口。仿真历史记录列表用于管理历史仿真视图。消息日志区用于系统日志的输出与查看。**

### 2.3 有源器件仿真

**有源光器件仿真平台可以根据新建工程类型的不同分为半导体器件仿真、有源光纤器件仿真、有源电光器件。有源光纤器件仿真主要有五部分组成：顶部工具栏区域、底部消息日志区域、中部从左至右分别为仿真工程管理器模块、仿真器件结构图模块、器件参数设置窗口模块。其中在主界面的器件结构图区域，目前显示完整的器件结构关系。用户可以通过右侧的参数设置来设置仿真器件的各参数以及输入信号。**

**MZ调制器仿真主界面主要有五部分组成：顶部工具栏区域、底部消息日志区域、中部从左至右分别为仿真工程管理器模块、仿真器件结构图模块、器件参数设置窗口模块。其中在主界面的器件结构图区域，目前显示完整的器件结构关系。用户可以通过右侧的参数设置来设置仿真器件的各参数以及输入信号。**

### 2.4 分析器

**分析器管理模块用于对仿真系统结果数据生成的图表进行管理，可以分为客户端工具、工具栏模块、图表显示区域模块以及分析器管理模块。其中工具栏功能模块包括文件工具、视图工具以及窗口工具；图表显示区域模块提供三类图表类型服务：一种服务于系统仿真计算后眼图、星座图、波形图等的显示，另一种为无源光器件仿真计算后，探测器数据结果的可视化图表，波导模式场绘制、时域场分布图显示；第三种是有源光器件仿真计算后，用于有源光器件仿真结果的时域波形图、纵向载流子分布图、横向载流子分布图、频谱图以及横向电场分布图等显示。**

## 3 依赖环境

### 3.1 环境依赖安装

**本说明默认您在Windows下进行环境配置，Linux在某些细节可能略有不同。**

#### 3.2 安装Node.js环境

**请您访问**[Node.js官网](https://nodejs.org/en/download/package-manager)下载并安装合适版本的 `Node.js`环境（为确保开发环境一致，建议使用16版本）。如果您的计算机已经安装了不同版本的 `Node.js`，建议您使用`nvm``进行多版本管理和切换（参考[使用 nvm 管理不同版本的 node 与 npm | 菜鸟教程](https://www.runoob.com/w3cnote/nvm-manager-node-versions.html)）。

#### 3.3 安装项目依赖包

**在项目根目录执行以下命令**

```
npm install
```

**如果上述命令执行期间发生网络相关问题，建议您考虑改用** `cnpm`或 `pnpm`，详情建议参考下面的文章：

[npm、cnpm、yarn和pnpm，我们应该选择哪个包管理工具？](https://juejin.cn/post/7230745439124717629)

## 4 开发指南

**建议使用Visual Studio Code（以下简称VSCode）进行开发。**

**推荐的VSCode插件如下**

* **Vue：用于提供对vue框架的智能提示**
* **ESlint：用于自动进行代码规范约束和检查**
* **Typescript：用于支持Typescript相关语言特性**
* **Prettier：用于自动格式化代码**
* **Github Coiplit：用于智能代码提示和补全**
* **GitLens：用于Git可视化管理**

**参考上一节进行环境依赖安装完成后，在项目根目录下执行以下命令来运行：**

```
npm run serve
```

**项目正常执行须与后端服务建立连接，请您在启动后端服务后再启动或刷新本软件。**

**如需修改后端服务访问地址，请在如下代码位置进行配置：**

```
// src\background.ts
ipcMain.on('setDefaultStore', (_) => {
    const defaultSetting = {
        locale: 'zh-CN',
        theme: 'light',
        savePath: `.\\photlab`,
        server: {
            ip: '127.0.0.1', // 这里填写您的服务器IP地址
            port: '9000', // 这里填写您的服务端口
        },
        backupTime: '15',
        autoSave: true,
    }
    ...
}
```

**项目支持代码热重载，当您修改代码并保存之后，被修改的代码模块会自动重新加载并展示在软件上。**

## 5 调试方法

**执行命令** `npm run serve`以启动软件，如果您需要调试，可以参考以下教程。

### 5.1 启动 Chrome 开发者工具

**要启动 Chrome 开发者工具，可以使用快捷键（Windows/Linux: **`Ctrl+Shift+I` 或 `F12`，Mac: `Cmd+Option+I`）。打开后，您可以看到多个面板，每个面板都有其特定功能。

### 5.2 DevTools 面板概览

**Elements 面板**用于查看和修改 HTML 结构和 CSS 样式。您可以实时编辑这些内容，查看更改效果，并通过右键单击元素选择“Inspect”快速定位。**Console 面板**允许您执行 JavaScript 命令和查看日志，查看输出的调试信息。**Sources 面板**用于浏览和调试编译后的 JavaScript 代码，您可以设置断点、使用 `debugger` 关键字暂停代码执行，并逐步调试代码。**Network 面板**可以查看和分析网络请求，检查请求的类型、状态、时间等细节，帮助您了解数据的加载过程。**Performance 面板**用于记录和分析程序性能，识别性能瓶颈和长时间运行的代码片段。**Memory 面板**则帮助您分析内存使用情况，查找内存泄漏。**Application 面板**让您管理应用程序缓存和存储，查看和清除 Cookies、本地存储等。**Security 面板**提供页面的安全状态和 SSL/TLS 证书信息。

### 5.3 使用断点调试 JavaScript

**在 Sources 面板中，您可以找到需要调试的 JavaScript 文件，并通过点击行号设置断点。您也可以在项目源代码中添加debugger并重新编译执行。当代码执行到有debugger的行时会自动暂停。您还可以右键点击行号，选择“Add conditional breakpoint”添加条件断点，只在条件为真时触发。工具栏上的控制按钮允许您进行调试控制，如继续执行、逐步执行、跳过函数调用等。**

### 5.4 使用 Console 进行调试

**Console 面板不仅可以输入命令查看输出结果，还可以通过 **`console.table()` 更直观地查看对象和数组。除了 `console.table()`，Console 面板还支持多种日志方法，包括 `console.log()` 用于输出一般信息、`console.error()` 用于显示错误信息、`console.warn()` 则用于警告提示。此外，`console.group()` 和 `console.groupEnd()` 可以帮助您将日志信息进行分组，使信息组织更有条理，易于阅读。通过灵活运用这些功能，您能够更高效地调试代码和分析数据，从而提高开发效率和代码质量。

## 6 打包方式

**当您确定软件所需依赖均已安装完成时，请在项目根目录命令行中执行：**

```
npm run build
```

**如果您需要打包发布至32位运行环境，请执行**

```
npm run build32
```

## 7 部署步骤

**打包后直接安装即可。**

## 8 版权声明