# azurelab-azure/elc architecture

> Architecture diagram of the GitHub repository azurelab-azure/elc, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-10-01). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/azurelab-azure/elc
- Repository: https://github.com/azurelab-azure/elc

## Overview

电路仿真实验室是面向电气与自动化学习者的 Web／Electron 电路仿真和教学平台。主要用户流程是从首页进入教学、仿真或电路图页面；各页面通过目录 composable 获取数据加载器构建的教学、仿真与电路资源。README 还声明三相电、PLC、基础及进阶电路仿真、实时示波器和拖拽绘图能力，相关模块在树中存在，但未采样其实现与调用关系，因此仅保留功能组件，不推断内部连线。

Main entry points: [`src/App.vue`](https://github.com/azurelab-azure/elc/blob/main/src/App.vue) (应用外壳), [`src/router/index.ts`](https://github.com/azurelab-azure/elc/blob/main/src/router/index.ts) (页面路由), [`src/views/SimulationView.vue`](https://github.com/azurelab-azure/elc/blob/main/src/views/SimulationView.vue) (仿真资源页), [`src/composables/useCatalog.ts`](https://github.com/azurelab-azure/elc/blob/main/src/composables/useCatalog.ts) (目录 composable)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_navigation["应用与导航"]
  node_app["应用外壳<br/>[App.vue]"]
  node_router["页面路由<br/>[index.ts]"]
  node_home["首页<br/>[HomeView.vue]"]
  node_settings["偏好设置<br/>[SettingsView.vue]"]
  node_dock["导航栏<br/>[DockBar.vue]"]
  node_context["快捷菜单<br/>[ContextMenu.vue]"]
  node_theme["主题设置<br/>[themeStore.ts]"]
  node_settingsstore["界面设置<br/>[settingsStore.ts]"]
  node_cookies["Cookie 同意<br/>[cookieStore.ts]"]
  node_cookiebanner["同意横幅<br/>[CookieBanner.vue]"]
end

subgraph group_learning["教学与资源"]
  node_teaching["教学资料<br/>[TeachingView.vue]"]
  node_catalog["目录 composable<br/>[useCatalog.ts]"]
  node_loader["资源加载器<br/>[dataLoader.ts]"]
end

subgraph group_simulation["电路仿真"]
  node_simulationpage["仿真资源页<br/>[SimulationView.vue]"]
  node_simengine["仿真控制<br/>[useSimulation.ts]"]
  node_oscilloscope["示波器<br/>[useOscilloscope.ts]"]
  node_threephase["三相电<br/>[useThreePhase.ts]"]
  node_plc["PLC 仿真<br/>[usePLC.ts]"]
  node_simstate["仿真状态<br/>[simulationStore.ts]"]
end

subgraph group_editor["绘制与设置"]
  node_circuit["电路图页面<br/>[CircuitView.vue]"]
  node_editorstate["绘图编辑器"]
  node_circuitstate["电路状态<br/>[circuitStore.ts]"]
  node_electron["Electron 接入<br/>[useElectron.ts]"]
end

node_learner(("学习者"))

node_learner -->|"访问应用"| node_app
node_app -->|"呈现路由页"| node_router
node_router -->|"路由至"| node_home
node_router -->|"路由至"| node_teaching
node_router -->|"路由至"| node_simulationpage
node_router -->|"路由至"| node_circuit
node_router -->|"路由至"| node_settings
node_app -->|"打开菜单"| node_context
node_app -->|"初始化主题"| node_theme
node_app -->|"加载设置"| node_settingsstore
node_app -->|"加载同意"| node_cookies
node_app -->|"显示横幅"| node_cookiebanner
node_settings -->|"设置主题"| node_theme
node_settings -->|"调整界面"| node_settingsstore
node_settings -->|"管理同意"| node_cookies
node_home -->|"获取目录"| node_catalog
node_teaching -->|"获取目录"| node_catalog
node_simulationpage -->|"获取目录"| node_catalog
node_circuit -->|"获取目录"| node_catalog
node_catalog -->|"加载资源"| node_loader
node_simulationpage -.->|"仿真运行"| node_simengine
node_simulationpage -.->|"显示波形"| node_oscilloscope
node_simulationpage -.->|"三相仿真"| node_threephase
node_simulationpage -.->|"PLC 仿真"| node_plc
node_simengine -.->|"更新状态"| node_simstate
node_circuit -.->|"编辑电路"| node_editorstate
node_circuitstate -.->|"委托编辑"| node_editorstate

click node_app "https://github.com/azurelab-azure/elc/blob/main/src/App.vue"
click node_router "https://github.com/azurelab-azure/elc/blob/main/src/router/index.ts"
click node_home "https://github.com/azurelab-azure/elc/blob/main/src/views/HomeView.vue"
click node_settings "https://github.com/azurelab-azure/elc/blob/main/src/views/SettingsView.vue"
click node_dock "https://github.com/azurelab-azure/elc/blob/main/src/components/common/DockBar.vue"
click node_context "https://github.com/azurelab-azure/elc/blob/main/src/components/common/ContextMenu.vue"
click node_theme "https://github.com/azurelab-azure/elc/blob/main/src/store/themeStore.ts"
click node_settingsstore "https://github.com/azurelab-azure/elc/blob/main/src/store/settingsStore.ts"
click node_cookies "https://github.com/azurelab-azure/elc/blob/main/src/store/cookieStore.ts"
click node_cookiebanner "https://github.com/azurelab-azure/elc/blob/main/src/components/common/CookieBanner.vue"
click node_teaching "https://github.com/azurelab-azure/elc/blob/main/src/views/TeachingView.vue"
click node_catalog "https://github.com/azurelab-azure/elc/blob/main/src/composables/useCatalog.ts"
click node_loader "https://github.com/azurelab-azure/elc/blob/main/src/engines/dataLoader.ts"
click node_simulationpage "https://github.com/azurelab-azure/elc/blob/main/src/views/SimulationView.vue"
click node_simengine "https://github.com/azurelab-azure/elc/blob/main/src/composables/useSimulation.ts"
click node_oscilloscope "https://github.com/azurelab-azure/elc/blob/main/src/composables/useOscilloscope.ts"
click node_threephase "https://github.com/azurelab-azure/elc/blob/main/src/composables/useThreePhase.ts"
click node_plc "https://github.com/azurelab-azure/elc/blob/main/src/composables/usePLC.ts"
click node_simstate "https://github.com/azurelab-azure/elc/blob/main/src/store/simulationStore.ts"
click node_circuit "https://github.com/azurelab-azure/elc/blob/main/src/views/CircuitView.vue"
click node_editorstate "https://github.com/azurelab-azure/elc/blob/main/src/composables/useCircuitEditor.ts"
click node_circuitstate "https://github.com/azurelab-azure/elc/blob/main/src/store/circuitStore.ts"
click node_electron "https://github.com/azurelab-azure/elc/blob/main/src/composables/useElectron.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_app,node_router,node_home,node_settings,node_dock,node_context,node_theme,node_settingsstore,node_cookies,node_cookiebanner toneBlue
class node_teaching,node_catalog,node_loader toneAmber
class node_simulationpage,node_simengine,node_oscilloscope,node_threephase,node_plc,node_simstate toneMint
class node_circuit,node_editorstate,node_circuitstate,node_electron toneRose
class node_learner toneIndigo
```

## Components

### 应用与导航

- [应用外壳](https://github.com/azurelab-azure/elc/blob/main/src/App.vue): `src/App.vue`
- [页面路由](https://github.com/azurelab-azure/elc/blob/main/src/router/index.ts): `src/router/index.ts`
- [首页](https://github.com/azurelab-azure/elc/blob/main/src/views/HomeView.vue): `src/views/HomeView.vue`
- [偏好设置](https://github.com/azurelab-azure/elc/blob/main/src/views/SettingsView.vue): `src/views/SettingsView.vue`
- [导航栏](https://github.com/azurelab-azure/elc/blob/main/src/components/common/DockBar.vue): `src/components/common/DockBar.vue`
- [快捷菜单](https://github.com/azurelab-azure/elc/blob/main/src/components/common/ContextMenu.vue): `src/components/common/ContextMenu.vue`
- [主题设置](https://github.com/azurelab-azure/elc/blob/main/src/store/themeStore.ts): `src/store/themeStore.ts`
- [界面设置](https://github.com/azurelab-azure/elc/blob/main/src/store/settingsStore.ts): `src/store/settingsStore.ts`
- [Cookie 同意](https://github.com/azurelab-azure/elc/blob/main/src/store/cookieStore.ts): `src/store/cookieStore.ts`
- [同意横幅](https://github.com/azurelab-azure/elc/blob/main/src/components/common/CookieBanner.vue): `src/components/common/CookieBanner.vue`

### 教学与资源

- [教学资料](https://github.com/azurelab-azure/elc/blob/main/src/views/TeachingView.vue): `src/views/TeachingView.vue`
- [目录 composable](https://github.com/azurelab-azure/elc/blob/main/src/composables/useCatalog.ts): `src/composables/useCatalog.ts`
- [资源加载器](https://github.com/azurelab-azure/elc/blob/main/src/engines/dataLoader.ts): `src/engines/dataLoader.ts`

### 电路仿真

- [仿真资源页](https://github.com/azurelab-azure/elc/blob/main/src/views/SimulationView.vue): `src/views/SimulationView.vue`
- [仿真控制](https://github.com/azurelab-azure/elc/blob/main/src/composables/useSimulation.ts): `src/composables/useSimulation.ts`
- [示波器](https://github.com/azurelab-azure/elc/blob/main/src/composables/useOscilloscope.ts): `src/composables/useOscilloscope.ts`
- [三相电](https://github.com/azurelab-azure/elc/blob/main/src/composables/useThreePhase.ts): `src/composables/useThreePhase.ts`
- [PLC 仿真](https://github.com/azurelab-azure/elc/blob/main/src/composables/usePLC.ts): `src/composables/usePLC.ts`
- [仿真状态](https://github.com/azurelab-azure/elc/blob/main/src/store/simulationStore.ts): `src/store/simulationStore.ts`

### 绘制与设置

- [电路图页面](https://github.com/azurelab-azure/elc/blob/main/src/views/CircuitView.vue): `src/views/CircuitView.vue`
- [绘图编辑器](https://github.com/azurelab-azure/elc/blob/main/src/composables/useCircuitEditor.ts): `src/composables/useCircuitEditor.ts`
- [电路状态](https://github.com/azurelab-azure/elc/blob/main/src/store/circuitStore.ts): `src/store/circuitStore.ts`
- [Electron 接入](https://github.com/azurelab-azure/elc/blob/main/src/composables/useElectron.ts): `src/composables/useElectron.ts`

### Other components

- **学习者**

## Connections

- 学习者 → 应用外壳: 访问应用 (evidence: `src/App.vue`)
- 应用外壳 → 页面路由: 呈现路由页 (evidence: `src/App.vue`)
- 页面路由 → 首页: 路由至 (evidence: `src/router/index.ts`)
- 页面路由 → 教学资料: 路由至 (evidence: `src/router/index.ts`)
- 页面路由 → 仿真资源页: 路由至 (evidence: `src/router/index.ts`)
- 页面路由 → 电路图页面: 路由至 (evidence: `src/router/index.ts`)
- 页面路由 → 偏好设置: 路由至 (evidence: `src/router/index.ts`)
- 应用外壳 → 快捷菜单: 打开菜单 (evidence: `src/App.vue`)
- 应用外壳 → 主题设置: 初始化主题 (evidence: `src/App.vue`)
- 应用外壳 → 界面设置: 加载设置 (evidence: `src/App.vue`)
- 应用外壳 → Cookie 同意: 加载同意 (evidence: `src/App.vue`)
- 应用外壳 → 同意横幅: 显示横幅 (evidence: `src/App.vue`)
- 偏好设置 → 主题设置: 设置主题 (evidence: `src/views/SettingsView.vue`)
- 偏好设置 → 界面设置: 调整界面 (evidence: `src/views/SettingsView.vue`)
- 偏好设置 → Cookie 同意: 管理同意 (evidence: `src/views/SettingsView.vue`)
- 首页 → 目录 composable: 获取目录 (evidence: `src/views/HomeView.vue`)
- 教学资料 → 目录 composable: 获取目录 (evidence: `src/views/TeachingView.vue`)
- 仿真资源页 → 目录 composable: 获取目录 (evidence: `src/views/SimulationView.vue`)
- 电路图页面 → 目录 composable: 获取目录 (evidence: `src/views/CircuitView.vue`)
- 目录 composable → 资源加载器: 加载资源 (evidence: `src/composables/useCatalog.ts`)
- 仿真资源页 → 仿真控制: 仿真运行
- 仿真资源页 → 示波器: 显示波形
- 仿真资源页 → 三相电: 三相仿真
- 仿真资源页 → PLC 仿真: PLC 仿真
- 仿真控制 → 仿真状态: 更新状态
- 电路图页面 → 绘图编辑器: 编辑电路
- 电路状态 → 绘图编辑器: 委托编辑 (evidence: `src/store/circuitStore.ts`)