# devtools

**Repository Path**: chen_d_z/devtools

## Basic Information

- **Project Name**: devtools
- **Description**: 。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2026-09-10
- **Last Updated**: 2026-09-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# devtools

An Electron application with Vue and TypeScript

## 开发规范

- [项目约定与协作规则](AGENTS.md)
- [详细开发规范](docs/standards/development-guidelines.md)
- [基础事件架构与使用说明](docs/event-architecture.md)
- [窗口管理架构与主进程调用说明](docs/window-architecture.md)

开发以本仓库的规范和架构文档为准，文档链接使用仓库内的相对路径。验证由开发者按需执行。

各进程统一通过 `import type { Xxx } from '@type/xxx'` 引用 `src/types` 中的声明，省略 `.d.ts` 后缀，Node、Web 和 electron-vite 的三个进程配置均维护该别名。使用单数 `@type` 是因为 TypeScript 会对 `@types/` 前缀报告 TS6137；不需要多层相对路径，也不改变进程隔离。

main 与 preload 根目录均只保留 index.ts，功能使用 `功能目录/index.ts` 组织。preload 根入口只注册页面 API；`window/index.ts` 实现窗口请求与订阅，`window/windowChannels.ts` 维护共用通道，`event/index.ts` 和 `lifecycle/index.ts` 提供各进程可复用的纯基础能力。

## 渲染端结构

保留 `src/renderer/src`，目录职责如下：

| 目录 / 文件 | 职责 |
| --- | --- |
| `assets/` | 图片、SVG、字体等静态资源，不放样式文件 |
| `components/` | 自定义组件，当前包含 AppHeader |
| `layouts/index.vue` | 父级路由的布局入口，使用 defineAsyncComponent 定义布局，通过 component 渲染 |
| `layouts/default.vue` | 使用 ElContainer、ElHeader、ElMain 承载标题栏与子路由内容区 |
| `styles/app.scss` | 应用全局样式，配色引用 Element Plus 生成的主题变量 |
| `styles/element-plus.scss` | Element Plus Sass 主题变量配置，本身不输出 CSS |
| `styles/index.scss` | 仅引入组件库 SCSS 源码和应用样式，由 main.ts 统一加载 |
| `views/` | 路由页面，当前首页保持空白 |
| `router/route.ts` | 全部路由配置 |
| `router/index.ts` | 创建并导出 Hash 路由 |
| `stores/index.ts` | 创建并导出当前渲染窗口的 Pinia 实例 |

main.ts 注册 Pinia 和路由，Element Plus 组件、指令及服务 API 由渲染端自动导入插件按需引入。App.vue 使用 ElConfigProvider 统一提供中文配置，并包裹顶层 RouterView。布局作为父级路由，首页放在其 children 的空路径路由中，保持根路径访问；页面按需加载，未知路径回到首页。Pinia 不负责跨窗口通信。

新页面和界面功能优先使用 Element Plus 组件，图标优先使用 @element-plus/icons-vue。模板中的 ElButton、ElDialog 等组件以及脚本中的 ElMessage、ElMessageBox 等服务 API 无需手写导入；同时启用 Vue、Vue Router、Pinia 的自动导入预设。业务组件、图标、类型及预设未包含的 API 仍明确导入。

两个插件均使用默认声明配置，启动开发或执行 Vite 构建时生成 `src/renderer/auto-imports.d.ts` 和 `src/renderer/components.d.ts`。Web 类型配置包含这两个文件，Git 忽略它们；生成内容由插件维护。

主题采用 [Element Plus 官方 Sass 配置方式](https://element-plus.org/en-US/guide/theming.html#how-to-override-it)：`element-plus.scss` 使用 `@forward ... with (...)` 统一配置暖灰底色与系统蓝。Vite 通过 `renderer.css.preprocessorOptions.scss.additionalData` 预先注入该文件；全量组件样式源码只从 `styles/index.scss` 引入一次，使用配置后的变量编译，不加载预编译组件库 CSS。

两个自动导入插件均使用 `ElementPlusResolver({ importStyle: false })`，只负责代码导入，继续复用上述 Sass 主题入口。

默认布局使用 44px 紧凑标题栏、居中的窗口标题和铺满窗口的工作区。macOS 通过隐藏系统标题栏保留原生交通灯，页面为按钮预留空间；窗口背景与页面底色一致。修改原生窗口配置后需要重启应用查看效果。

其他平台在标题栏右侧提供最小化、最大化／还原和关闭按钮，使用 ElButton、ElIcon 及 Element Plus 图标。普通按钮悬停变灰，关闭按钮悬停变红，支持按下和键盘焦点样式；标题保持居中。按钮已通过 preload 接入原生操作，macOS 不显示这组按钮。

调用链为 AppHeader → preload 的 windowControls → 所属窗口的 WindowControls → WindowHandle。主进程校验来源主 frame 和应用页面，不接受页面指定窗口 ID；关闭沿用 `requestClose()` 的父子窗口协调。最大化／还原图标跟随原生通知，初始快照使用 revision 避免覆盖新状态；组件卸载取消订阅，窗口关闭释放处理器。具体语义与代码入口见[窗口架构说明](docs/window-architecture.md)。修改主进程或 preload 后需重启应用，由开发者自行验证。

按钮默认采用 28px 高度、5px 圆角和轻微高光，包含悬停、按下、禁用及键盘焦点状态；输入框使用白底和蓝色焦点轮廓。弹窗默认宽 440px、圆角 10px、内边距 24px，居中且可拖动；标题、可滚动内容区和操作区共用统一浅色面板。公共行为配置在 App.vue，Sass 参数在 element-plus.scss，结构及交互样式在 app.scss。

首页保持空白，示例按钮、工作区名称编辑弹窗及其专用资源已移除。公共控件和弹窗样式继续保留；后续页面可复用全局 `.app-toolbar` 和 `.app-dialog-description`，直接使用 ElButton、ElInput、ElDialog 即可继承公共外观。

## Recommended IDE Setup

- [VSCode](https://code.visualstudio.com/) + [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar)

## Project Setup

### Install

```bash
$ pnpm install
```

### Development

```bash
$ pnpm dev
```

### Build

```bash
# For windows
$ pnpm build:win

# For macOS
$ pnpm build:mac

# For Linux
$ pnpm build:linux
```