wustxing's blog 星的博客 2026-06-01T00:43:59.361Z http://blog.ypintao.com/ wustxing Hexo 安卓模拟器设置 http://blog.ypintao.com/2026/06/01/%E5%89%8D%E7%AB%AF/%E9%80%86%E5%90%91/%E6%8A%93%E5%8C%85/ 2026-05-31T20:00:00.000Z 2026-06-01T00:43:59.361Z 1、获取mumu模拟器最新版
2、开启root权限，和磁盘共享 可写系统盘权限
点击图上三个点，然后点击设备设置

开启root权限，和可写系统盘

Charles安装与环境配置

1. 获取并安装Charles

前往Charles官网获取最新版本安装包>>点击访问

2. 修改代理端口（Port）

安装完成后，在Charles主页面点击顶部菜单栏— Proxy（代理）— Proxy Settings（代理设置），设置Port（代理端口号）为8888；

3. 修改SSL代理

返回Charles主页面，点击顶部菜单栏— Proxy（代理）— SSL Proxying Settings（SSL代理设置），勾选启用SSL代理，添加主机和端口都为*，并保存；

4. 安装证书

返回Charles主页面，点击顶部菜单栏— Help— SSL Proxying — Install Charles Root Certificate，安装证书，完成后重启Charles即可。



四、模拟器证书安装流程

1. 保存.pem文件到本地

在Charles主页面点击顶部菜单栏—Help— Save Chales Certificate—保存到本地，如保存为Charles.pem；

2. 打开命令提示符界面执行命令

进入Charles.pem所在磁盘目录下，点击磁盘地址栏-输入cmd并回车，在弹出的cmd界面（命令提示符界面）内，输入以下命令：

openssl x509 -inform PEM -subject_hash_old -in charles.pem

若输出结果第一行类似：d0c556f7，则将Charles.pem更名为 d0c556f7.0；

注：这个已更名的证书可以重复使用（过期后再重新生成即可），可以存放在方便的位置以便后续使用。

请注意，若没有安装OpenSSL，可到官网下载安装>>点击访问

安装时OpenSSL选择默认安装，最后的捐款取消勾选。之后配置环境变量，将OpenSSL安装路径bin的路径(例如 C:\OpenSSL-Win64\bin)加入到操作系统的系统环境变量Path中。

3. 获取IP地址端口(IP Address)

返回Charles主页面，点击顶部菜单栏Help —Local IP Address，获取到IP Address（IP 地址端口）；

4. 调整模拟器内WiFi代理设置

返回模拟器主页面，点击桌面系统应用—设置—网络与互联网—互联网，点击WiFi右侧设置，进入WiFi详情页面并点击右上角编辑，打开高级选项，将代理切换为手动，代理主机名填入Charles获取到的IP地址，代理端口填入8888之后保存；


5.导入证书

把这个放到共享文件夹下，这样模拟器上就可以看到了

这里还需要有个工具,mumu模拟器自带的。下载安装一下就可以了

默认系统是只读的。这里可以挂载为可读写。

把共享的 这个证书文件复制到根目录的
/system/etc/security/cacerts 这个目录下

安卓的证书就安装完毕了

接下来就访问安卓浏览器就可以看到

]]> <p>1、获取mumu模拟器最新版<br>2、开启root权限，和磁盘共享 可写系统盘权限<br>点击图上三个点，然后点击设备设置<br><img src="/img/zhuabao/1.png"><br><img src="/img/zhuabao/2.png"></p> <p>开启root权限，和可写系统盘</p> 中间人攻击（MITM）原理与抓包分析 http://blog.ypintao.com/2026/06/01/%E5%89%8D%E7%AB%AF/%E9%80%86%E5%90%91/%E4%B8%AD%E9%97%B4%E4%BA%BA%E6%94%BB%E5%87%BB/ 2026-05-31T16:00:00.000Z 2026-06-01T04:43:18.572Z 中间人攻击（MITM）原理与抓包分析

一、什么是中间人攻击

中间人攻击（Man-in-the-Middle Attack，简称 MITM）是一种网络攻击手段，攻击者秘密地拦截并可能篡改双方之间的通信，而通信双方对此毫不知情。

简单来说，攻击者把自己”插”在了客户端和服务端之间，充当一个透明的中转站。

二、正常通信 vs 中间人攻击

2.1 正常通信流程

1
2
3
4
5
6
┌──────────┐                        ┌──────────┐
│          │      请求 (Request)     │          │
│  客户端   │ ──────────────────────► │  服务端   │
│ (Client) │                        │ (Server) │
│          │ ◄────────────────────── │          │
└──────────┘      响应 (Response)     └──────────┘

在正常通信中，客户端直接与服务端建立连接，数据在两者之间直接传输。

2.2 中间人攻击流程

1
2
3
4
5
6
7
8
9
10
11
12
13
┌──────────┐                        ┌──────────┐
│          │      请求 (Request)     │          │
│  客户端   │ ──────────────────────► │  服务端   │
│ (Client) │                        │ (Server) │
│          │ ◄────────────────────── │          │
└─────┬────┘      响应 (Response)     └─────▲────┘
      │                                      │
      │    ┌──────────────────────┐          │
      │    │                      │          │
      └───►│   中间人 (Attacker)   │──────────┘
           │                      │
           │  窃听 / 篡改 / 伪造   │
           └──────────────────────┘

攻击者在客户端和服务端之间拦截通信：

  • 客户端以为自己在和真正的服务端通信
  • 服务端以为自己在和真正的客户端通信
  • 中间人可以窃听、篡改甚至伪造通信内容

三、HTTPS 下的中间人攻击原理

HTTPS 本身就是为了防止中间人攻击而设计的，那中间人攻击是如何突破 HTTPS 的呢？

3.1 正常 HTTPS 握手流程

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
Client                                Server
  │                                      │
  │  1. ClientHello                      │
  │  (支持的加密套件、随机数)               │
  │ ──────────────────────────────────────►
  │                                      │
  │  2. ServerHello + 证书                │
  │  (选定加密套件、服务端证书)              │
  │ ◄──────────────────────────────────────
  │                                      │
  │  3. 客户端验证证书                     │
  │  (CA 签名验证、域名匹配、有效期检查)     │
  │                                      │
  │  4. 生成 Pre-Master Secret            │
  │  用服务端公钥加密发送                    │
  │ ──────────────────────────────────────►
  │                                      │
  │  5. 双方生成会话密钥                    │
  │  (Session Key)                       │
  │                                      │
  │  6. 加密通信开始                       │
  │ ◄─────────────────────────────────────►

关键点：客户端会验证服务端证书是否由可信 CA 机构签发，如果证书不可信，浏览器会弹出警告。

3.2 中间人攻击 HTTPS 的方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Client              MITM(Attacker)              Server
  │                      │                        │
  │  1. ClientHello      │                        │
  │ ────────────────────►│  1'. ClientHello       │
  │                      │ ──────────────────────►│
  │                      │                        │
  │                      │  2'. ServerHello+真证书  │
  │  2. ServerHello      │ ◄──────────────────────│
  │  + 伪造证书           │                        │
  │ ◄────────────────────│                        │
  │                      │                        │
  │  3. 客户端验证伪造证书  │                        │
  │  (需要信任伪造CA)      │                        │
  │                      │                        │
  │  4. 用伪造公钥加密     │                        │
  │ ────────────────────►│  4'. 用真公钥加密        │
  │                      │ ──────────────────────►│
  │                      │                        │
  │  ←─ 加密通信 ──→     │  ←─ 加密通信 ──→       │
  │  (MITM可解密)        │  (正常HTTPS)           │

核心原理：

  1. 中间人向客户端提供伪造证书，同时向服务端发起正常的 HTTPS 请求
  2. 客户端需要信任中间人的 CA 证书（这是关键前提）
  3. 中间人分别与客户端和服务端建立两段独立的加密连接
  4. 中间人可以解密客户端发来的数据，查看/修改后，再加密发给服务端

四、抓包原理与过程

抓包（Packet Capture）本质上也是一种”中间人”行为，常见的抓包工具有 Fiddler、Charles、mitmproxy 等。

4.1 抓包工具的工作原理

1
2
3
4
5
6
7
8
9
10
11
┌──────────┐       ┌──────────────┐       ┌──────────┐
│          │       │              │       │          │
│  浏览器   │──────►│   代理服务器   │──────►│  目标服务器 │
│ (Browser) │ HTTP  │  (Proxy)     │ HTTP  │ (Server) │
│          │◄──────│  e.g. Fiddler │◄──────│          │
└──────────┘       └──────────────┘       └──────────┘
     │                    │
     │                    │
     ▼                    ▼
  设置代理            抓包 & 展示
  127.0.0.1:8888     请求/响应详情

抓包工具的核心步骤：

步骤说明
1. 设置代理客户端（浏览器/App）将 HTTP/HTTPS 请求发送到代理服务器
2. 转发请求代理服务器将请求转发给真正的目标服务器
3. 接收响应目标服务器返回响应给代理服务器
4. 返回客户端代理服务器将响应返回给客户端
5. 记录展示代理服务器在中间记录所有请求和响应数据

4.2 HTTP 抓包（明文）

对于 HTTP 请求，数据本身就是明文传输，抓包工具只需要简单地转发即可看到所有内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
浏览器                         Fiddler                        服务器
  │                              │                              │
  │  GET /api/user HTTP/1.1      │                              │
  │  Cookie: token=abc123        │                              │
  │ ────────────────────────────►│  GET /api/user HTTP/1.1      │
  │                              │  Cookie: token=abc123        │
  │                              │ ────────────────────────────►│
  │                              │                              │
  │                              │  HTTP/1.1 200 OK             │
  │                              │  {"name":"张三","age":25}     │
  │                              │ ◄────────────────────────────│
  │  HTTP/1.1 200 OK             │                              │
  │  {"name":"张三","age":25}     │                              │
  │ ◄─────────────────────────────│                              │
  │                              │                              │
  │                              │  ✅ 完整记录请求和响应          │

HTTP 抓包无需任何额外配置，因为数据本身没有加密。

4.3 HTTPS 抂包（加密流量）

HTTPS 流量是加密的，抓包工具需要通过中间人方式解密：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
                  HTTPS 抓包完整流程

浏览器                          Fiddler                       服务器
  │                               │                              │
  │  ① 设置系统代理                 │                              │
  │  → 127.0.0.1:8888             │                              │
  │                               │                              │
  │  ② 安装并信任 Fiddler 根证书    │                              │
  │  (FiddlerRoot Certificate)     │                              │
  │                               │                              │
  │  ③ HTTPS 握手                  │                              │
  │  ClientHello ─────────────────►│                              │
  │                               │  ④ 与服务器建立真实 HTTPS      │
  │                               │  ClientHello ────────────────►│
  │                               │  ServerHello+真证书 ◄─────────│
  │                               │                              │
  │  ⑤ 向浏览器出示伪造证书          │                              │
  │  ServerHello+伪造证书 ◄────────│                              │
  │                               │                              │
  │  ⑥ 浏览器验证伪造证书 ✅         │                              │
  │  (因为已信任 Fiddler 根证书)     │                              │
  │                               │                              │
  │  ⑦ 浏览器用伪造公钥加密数据 ────►│  ⑧ Fiddler 解密数据(明文)     │
  │                               │  ⑨ Fiddler 用真公钥加密 ──────►│
  │                               │                              │
  │                               │  ⑩ 服务器返回加密响应 ◄────────│
  │                               │  ⑪ Fiddler 解密(明文)         │
  │  ⑫ Fiddler 加密返回浏览器 ◄────│                              │
  │                               │                              │
  │                               │  ✅ 中间明文查看所有数据        │

4.4 抓包工具实操步骤（以 Fiddler 为例）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
步骤流程图：

  ┌─────────────────────┐
  │ 1. 启动 Fiddler      │
  │    默认监听 8888 端口  │
  └──────────┬──────────┘
             │
             ▼
  ┌─────────────────────┐
  │ 2. 开启 HTTPS 解密   │
  │    Tools → Options   │
  │    → HTTPS → Decrypt │
  └──────────┬──────────┘
             │
             ▼
  ┌─────────────────────┐
  │ 3. 安装根证书到系统   │
  │    浏览器/系统信任     │
  │    FiddlerRoot CA    │
  └──────────┬──────────┘
             │
             ▼
  ┌─────────────────────┐
  │ 4. 配置客户端代理     │
  │    127.0.0.1:8888    │
  └──────────┬──────────┘
             │
             ▼
  ┌─────────────────────┐
  │ 5. 正常操作应用       │
  │    Fiddler 自动抓包   │
  └──────────┬──────────┘
             │
             ▼
  ┌─────────────────────┐
  │ 6. 查看请求/响应详情  │
  │    Headers、Body、    │
  │    Cookies 等        │
  └─────────────────────┘

五、常见中间人攻击手段

5.1 ARP 欺骗

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
              局域网拓扑

    ┌─────────────────────────────┐
    │         交换机 / 路由器       │
    └──┬──────────────────────┬───┘
       │                      │
       ▼                      ▼
┌──────────┐          ┌──────────┐
│  受害者   │          │   网关    │
│  192.168  │          │ 192.168  │
│  .1.100  │          │  .1.1    │
└──────────┘          └──────────┘
       ▲
       │ ARP 欺骗
       │
┌──────────┐
│  攻击者   │
│  192.168  │
│  .1.200  │
└──────────┘

ARP 欺骗原理：

1
2
3
4
5
6
7
8
正常 ARP 表：                    被欺骗后的 ARP 表：
┌───────────────────────┐       ┌───────────────────────┐
│ IP           MAC      │       │ IP           MAC      │
├───────────────────────┤       ├───────────────────────┤
│ 192.168.1.1  AA-BB-CC │       │ 192.168.1.1  DD-EE-FF │ ← 被篡改
│ 192.168.1.200 DD-EE-FF│       │ 192.168.1.200 DD-EE-FF│
└───────────────────────┘       └───────────────────────┘
(网关的 MAC 是路由器的)          (网关的 MAC 变成了攻击者的)

攻击者告诉受害者”我是网关”，受害者的数据就会发给攻击者。

5.2 DNS 欺骗

1
2
3
4
5
6
7
8
正常 DNS 解析：                     DNS 欺骗后：

  用户 → DNS服务器                    用户 → DNS服务器
         (询问: bank.com 的IP?)              (询问: bank.com 的IP?)
  用户 ← DNS服务器                    用户 ← 攻击者(伪造响应)
         (回答: 93.184.216.34)               (回答: 6.6.6.6 ← 恶意IP)
  用户 → 93.184.216.34               用户 → 6.6.6.6
         (真正的银行服务器)                     (攻击者的钓鱼网站)

5.3 Wi-Fi 热点欺骗

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
┌──────────────────────────────────────────┐
│            公共场所 Wi-Fi 场景             │
│                                          │
│   ┌──────────┐     ┌──────────┐          │
│   │  用户 A   │     │  用户 B   │          │
│   │  📱      │     │  📱      │          │
│   └────┬─────┘     └────┬─────┘          │
│        │                │                │
│        ▼                ▼                │
│   ┌────────────────────────────┐         │
│   │  "Free_WiFi" (攻击者热点)   │         │
│   │  📡 恶意 AP               │         │
│   └────────────┬───────────────┘         │
│                │                         │
│                ▼                         │
│   ┌──────────────────┐                   │
│   │  攻击者笔记本 💻   │ ← 所有流量经过此处  │
│   └──────────────────┘                   │
└──────────────────────────────────────────┘

攻击者创建一个与合法 Wi-Fi 同名或诱人的免费热点，用户连接后所有流量都经过攻击者。

5.4 SSL 剥离（SSL Stripping）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
正常流程：                          SSL 剥离攻击：

用户输入 bank.com                   用户输入 bank.com
     │                                   │
     ▼                                   ▼
浏览器 → http://bank.com            浏览器 → http://bank.com
     │                                   │
     ▼                                   ▼
服务器 301 重定向                     攻击者拦截重定向!
→ https://bank.com                       │
     │                                   ▼
     ▼                              不转发重定向
建立 HTTPS 安全连接                  保持 HTTP 明文连接
     │                                   │
     ▼                                   ▼
✅ 安全通信                          ❌ 攻击者可查看所有数据

用户看到的是 http:// 而不是 https://
但大多数用户不会注意到这个区别

六、如何防御中间人攻击

防御手段说明
始终使用 HTTPS确保网站强制使用 HTTPS，启用 HSTS
证书锁定（Certificate Pinning）App 内置证书指纹，拒绝其他证书
验证证书信息检查证书颁发者、有效期、域名是否匹配
不要连接不信任的 Wi-Fi避免使用公共 Wi-Fi 处理敏感信息
使用 VPN加密所有网络流量，防止窃听
DNS over HTTPS (DoH)防止 DNS 查询被篡改
双向 TLS 认证（mTLS）客户端也验证服务端，服务端也验证客户端

七、总结

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
┌─────────────────────────────────────────────────────┐
│                  中间人攻击全景图                      │
│                                                     │
│   攻击前提：                                         │
│   ├── 网络层面：ARP/DNS/Wi-Fi 欺骗                   │
│   ├── 协议层面：SSL 剥离、降级攻击                     │
│   └── 证书层面：伪造 CA、自签名证书                    │
│                                                     │
│   攻击效果：                                         │
│   ├── 窃听：获取敏感信息（密码、Cookie、Token）         │
│   ├── 篡改：修改通信内容（注入恶意代码）                │
│   └── 伪造：冒充身份进行操作                           │
│                                                     │
│   抓包本质 = 合法的中间人攻击（用于调试/分析）           │
│   ├── 需要安装并信任代理工具的根证书                    │
│   ├── 代理工具分别与双方建立加密连接                    │
│   └── 在中间以明文形式查看和记录数据                    │
└─────────────────────────────────────────────────────┘

核心认知：抓包工具（Fiddler/Charles/mitmproxy）的原理与恶意中间人攻击完全相同，区别仅在于目的不同——一个用于开发调试，一个用于恶意窃取。理解中间人攻击的原理，是掌握网络安全的基石。

]]> <h1 id="中间人攻击（MITM）原理与抓包分析"><a href="#中间人攻击（MITM）原理与抓包分析" class="headerlink" title="中间人攻击（MITM）原理与抓包分析"></a>中间人攻击（MITM）原理与抓包分析</h1><h2 id="一 http://blog.ypintao.com/2026/05/14/%E5%89%8D%E7%AB%AF/AI/task/ 2026-05-14T15:23:58.361Z 2026-05-20T14:30:37.423Z 超级IP智能体
提取抖音文案，文案改写，语音克隆
视频对口型

]]> <p>超级IP智能体<br>提取抖音文案，文案改写，语音克隆<br>视频对口型</p> 关于低代码DSL转vue3组件的实现 http://blog.ypintao.com/2026/05/10/%E5%89%8D%E7%AB%AF/%E4%BD%8E%E4%BB%A3%E7%A0%81/%E5%85%B3%E4%BA%8E%E4%BD%8E%E4%BB%A3%E7%A0%81DSL%E8%BD%ACvue3%E7%BB%84%E4%BB%B6%E7%9A%84%E5%AE%9E%E7%8E%B0/ 2026-05-09T16:00:00.000Z 2026-05-13T23:58:04.733Z

DSL 渲染为 Vue3 页面组件 — 完整流程

整体流程概览

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
BlockSchema (JSON DSL)
       │
       ▼
  createRenderer()
       │
       ├─ 1. 创建 Context 上下文对象
       │
       ├─ 2. 定义 Vue 组件 (defineComponent)
       │     ├─ setup(): 初始化 state / computed / methods / watch
       │     └─ render(): 递归调用 nodeRender() 生成 VNode 树
       │
       └─ 3. 返回 { renderer, context }
              │
              ▼
         <Suspense><component :is="renderer" /></Suspense>
              │
              ▼
         页面渲染完成

Step 1: DSL 数据结构定义

代码路径: src/core/types.ts

DSL 使用 JSON 描述页面，核心类型：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
// 页面级 Schema
interface BlockSchema {
  id?: string;
  name: string;                          // 页面名称
  state?: Record<string, JSExpression>;  // 响应式状态
  computed?: Record<string, JSFunction>; // 计算属性
  methods?: Record<string, JSFunction>;  // 方法
  watch?: any[];                         // 侦听器
  lifeCycles?: Record<string, JSFunction>; // 生命周期
  nodes?: NodeSchema[];                  // 子节点树
  css?: string;                          // 样式
}

// 节点 Schema
interface NodeSchema {
  id?: string;
  name: string;              // HTML 标签名或组件名 (如 'div', 'button')
  props?: NodeProps;         // 属性 (含 style, class)
  events?: NodeEvents;       // 事件绑定
  directives?: NodeDirective[]; // 指令 (v-if, v-for, v-model...)
  children?: string | JSExpression | NodeSchema[]; // 子节点
}

// 动态表达式 — 在运行时通过 new Function 求值
interface JSExpression {
  type: 'JSExpression';
  value: string;  // 如 "count + 1"
}

// 动态函数 — 在运行时通过 new Function 生成函数
interface JSFunction {
  type: 'JSFunction';
  value: string;  // 如 "function() { return this.count + 1 }"
}

Step 2: 创建渲染器 — createRenderer()

代码路径: src/core/renderer.ts → createRenderer()

重点方法: createRenderer(options)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
export function createRenderer(options: CreateRendererOptions) {
  const V = Vue;
  const ctx = new Context({ dsl: options.dsl });

  // 核心：定义一个 Vue 组件
  const renderer = V.defineComponent({
    name: dsl.name || 'DslRenderer',

    // setup 是 async（所以外层需要 <Suspense>）
    async setup() {
      // 2a. 创建响应式 state
      ctx.state = createState(V, dsl.state, ctx);
      // 2b. 创建 computed
      const computed = createComputed(V, dsl.computed, ctx);
      // 2c. 创建 methods
      const methods = createMethods(dsl.methods, ctx);
      // 2d. 绑定 Vue 实例到 Context
      ctx.setup({ ...computed, ...methods }, V);
      // 2e. 设置 watch
      setWatches(V, dsl.watch, ctx);
      // 暴露给模板
      return { state: ctx.state, ...computed, ...methods };
    },

    // 生命周期钩子
    ...createLifeCycles(dsl.lifeCycles, ctx),

    // 渲染函数：递归遍历 nodes 生成 VNode
    render() {
      const nodes = dsl.nodes || [];
      if (nodes.length === 1) return nodeRender(nodes[0], ctx, V, nodes);
      return V.createVNode('div', {},
        nodes.map(child => nodeRender(child, ctx, V, nodes))
      );
    }
  });

  return { renderer: V.markRaw(renderer), context: ctx };
}

调用方式 (在 CanvasApp.vue / PreviewView.vue 中):

1
2
3
4
5
6
7
const result = createRenderer({ dsl: blockSchema });
renderer.value = result.renderer;

// 模板中使用（必须包 Suspense，因为 setup 是 async）
<Suspense>
  <component :is="renderer" />
</Suspense>

Step 3: 运行时上下文 — Context 类

代码路径: src/core/renderer.ts → class Context

Context 是 DSL 表达式执行的运行环境，代理了 Vue 实例的所有能力：

1
2
3
4
5
6
7
8
9
10
11
Context
├── state        → Vue reactive 状态
├── props        → 组件 props
├── $refs        → 模板引用
├── $emit        → 事件触发
├── $slots       → 插槽
├── $watch       → 侦听器
├── __parseExpression()  → 执行 JSExpression
├── __parseFunction()    → 执行 JSFunction
├── __clone()            → 克隆上下文（用于 v-for 循环变量）
└── __ref()              → 处理模板 ref 引用

重点方法:

  • ctx.setup(attrs, V) — 在 Vue setup() 中调用，绑定 getCurrentInstance() 到 ctx
  • ctx.__parseExpression(code) — 将 JSExpression 字符串转为实际值
  • ctx.__parseFunction(code) — 将 JSFunction 字符串转为可执行函数
  • ctx.__clone(context) — 创建子上下文（v-for 中每个迭代项需要独立上下文）

Step 4: 表达式解析 — parseExpression / parseFunction

代码路径: src/core/renderer.ts → parseExpression(), parseFunction()

重点方法: parseExpression(str, self)

1
2
3
4
5
6
7
8
function parseExpression(str: JSExpression, self: any) {
  // 1. 替换 this 为 __self
  let tarStr = str.value.replace(/this(\W|$)/g, `__self$1`);
  // 2. 用 with 语句构建作用域
  const code = `with($scope || {}) { "use strict"; var __self = arguments[0]; return ${tarStr} }`;
  // 3. new Function 动态执行
  return new Function('$scope', code)(self);
}

原理: 利用 new Function + with 语句，让 DSL 中的表达式字符串可以访问 Context 上的 state/props/methods 等变量。

示例:

1
2
3
JSExpression: { type: 'JSExpression', value: 'count + 1' }
                    ↓ parseExpression
结果: state.count + 1 的实际值

Step 5: 节点渲染 — nodeRender() 递归

代码路径: src/core/renderer.ts → nodeRender()

重点方法: nodeRender(dsl, ctx, V, brothers, isBranch, index)

这是整个渲染器最核心的函数，将一个 NodeSchema 递归转为 Vue VNode：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
nodeRender(dsl, ctx)
  │
  ├─ 1. 处理指令 (v-if / v-else-if / v-else)
  │     条件不满足 → 查找兄弟节点的 v-else-if / v-else
  │
  ├─ 2. 内部 render(c, seq) 函数:
  │     ├─ parseNodeProps()   → 解析属性（递归处理 JSExpression）
  │     ├─ parseNodeEvents()  → 解析事件（JSFunction → onXxx）
  │     ├─ 处理 v-bind       → 合并动态属性
  │     ├─ 处理 v-show        → 控制 display: none
  │     ├─ 处理 v-html        → 设置 innerHTML
  │     ├─ 处理 v-model       → 双向绑定（区分原生/组件）
  │     ├─ childrenToSlots()  → 子节点转为插槽
  │     └─ Vue.createVNode()  → 创建 VNode
  │
  ├─ 3. 处理 v-for → vForRender() 循环渲染
  │     每次迭代 clone Context，注入 item/index 变量
  │
  └─ 4. 返回 VNode 或 VNode 数组

Step 6: 辅助函数详解

6.1 属性解析 — deepParseNodeProps()

代码路径: src/core/renderer.ts → deepParseNodeProps()

递归遍历 props 对象，将所有 JSExpression/JSFunction 替换为实际值：

1
2
3
props: { class: { type: 'JSExpression', value: 'active ? "active" : ""' } }
  ↓ deepParseNodeProps
props: { class: "active" }  // 运行时求值结果

6.2 事件解析 — parseNodeEvents()

代码路径: src/core/renderer.ts → parseNodeEvents()

将 DSL 事件定义转为 Vue 的 onXxx 格式：

1
2
3
events: { click: { handler: { type: 'JSFunction', value: 'function() { ... }' } } }
  ↓ parseNodeEvents
{ onClick: [Function] }

6.3 指令处理 — getDiretives()

代码路径: src/core/renderer.ts → getDiretives()

将 directives 数组分类为 vIf/vFor/vShow/vModel 等，方便后续分别处理。

6.4 v-for 渲染 — vForRender()

代码路径: src/core/renderer.ts → vForRender()

1
2
3
4
5
6
7
8
// 示例 DSL:
{ directives: [{ name: 'vFor', value: { type: 'JSExpression', value: 'items' }, iterator: { item: 'item', index: 'idx' } }] }

// 执行流程:
// 1. ctx.__parseExpression(value) → 获取数组 [1, 2, 3]
// 2. 遍历数组，每次 ctx.__clone({ item: val, idx: i }) 创建子上下文
// 3. 对每个子上下文调用 render(c, seq) 生成 VNode
// 4. 返回 VNode 数组

6.5 子节点转插槽 — childrenToSlots()

代码路径: src/core/renderer.ts → childrenToSlots(), createSlotsConfig()

将 NodeSchema 的 children 转为 Vue 插槽对象：

1
2
3
4
5
6
7
8
9
children: [
  { name: 'div', slot: 'header', children: '标题' },
  { name: 'div', slot: 'default', children: '内容' }
]
  ↓ childrenToSlots
{
  header: () => [VNode],
  default: () => [VNode]
}

6.6 状态初始化 — createState() / createComputed() / createMethods()

代码路径: src/core/renderer.ts

1
2
3
4
BlockSchema.state    → createState()    → Vue.reactive({ ... })
BlockSchema.computed → createComputed() → { key: Vue.computed(fn) }
BlockSchema.methods  → createMethods()  → { key: Function }
BlockSchema.watch    → setWatches()     → Vue.watch(source, handler)

Step 7: 设计器中的渲染集成

7.1 iframe 画布渲染

代码路径: src/canvas/CanvasApp.vue

1
2
3
4
5
6
7
8
9
DesignerView (主页面)
  │ postMessage('init', dsl)
  ▼
CanvasApp.vue (iframe 内)
  │ 收到 init → renderDsl()
  │   ├─ createRenderer({ dsl })
  │   └─ renderer.value = result.renderer
  ▼
<Suspense><component :is="renderer" /></Suspense>

7.2 预览页渲染

代码路径: src/views/PreviewView.vue

1
2
3
4
5
6
7
sessionStorage.getItem('vtj_preview_dsl')
  │ JSON.parse
  ▼
createRenderer({ dsl })
  │
  ▼
<Suspense><component :is="renderer" /></Suspense>

代码文件索引

文件说明核心方法
src/core/types.tsDSL 类型定义BlockSchema, NodeSchema, JSExpression, JSFunction
src/core/renderer.ts渲染器核心createRenderer(), nodeRender(), Context
表达式解析parseExpression(), parseFunction()
属性处理deepParseNodeProps(), parseNodeProps(), parseNodeEvents()
指令处理getDiretives(), vForRender()
插槽处理childrenToSlots(), createSlotsConfig()
状态初始化createState(), createComputed(), createMethods(), setWatches(), createLifeCycles()
src/canvas/CanvasApp.vueiframe 画布应用renderDsl(), addNode(), onDocumentClick()
src/canvas/protocol.tspostMessage 通信sendMessage(), onMessage()
src/views/PreviewView.vue预览页createRenderer() + <Suspense>
src/views/DesignerView.vue设计器主页面sendToCanvas(), onMaskMouseUp()
src/engine/Engine.ts设计器引擎DSL CRUD, 撤销/重做, 节点操作
src/materials/index.ts物料定义createNodeSchema()
src/coder/index.ts代码生成generateVueSFC(), generateJSON()

完整数据流图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
用户拖拽物料
    │
    ▼
DesignerView.onDragStart()  ──→ dragSchema = schema
    │ (鼠标松开在画布遮罩上)
    ▼
DesignerView.onMaskMouseUp()
    │ postMessage('dropNode', { schema, x, y })
    ▼
CanvasApp 收到 dropNode
    │ addNode(parentId, schema)
    │   ├─ dsl.nodes.push(node)
    │   ├─ renderDsl() → createRenderer({ dsl })
    │   │   ├─ new Context({ dsl })
    │   │   ├─ defineComponent({
    │   │   │     setup: createState + createComputed + createMethods
    │   │   │     render: nodes.map(n => nodeRender(n, ctx))
    │   │   │       ├─ parseNodeProps()   解析属性
    │   │   │       ├─ parseNodeEvents()  解析事件
    │   │   │       ├─ getDiretives()     处理指令
    │   │   │       ├─ childrenToSlots()  处理子节点
    │   │   │       └─ Vue.createVNode()  创建 VNode
    │   │   │   })
    │   │   └─ markRaw(renderer)
    │   └─ renderer.value = result.renderer
    ▼
<Suspense><component :is="renderer" /></Suspense>
    │
    ▼
页面渲染出组件
    │ postMessage('updateDsl', dsl)  ←── 同步回主页面
    ▼
DesignerView 收到 updateDsl
    │ eng.setDSL(dsl)  ←── 更新引擎状态
    ▼
右侧 PropsPanel 显示选中节点配置
]]> <span id="more"></span> <h1 id="DSL-渲染为-Vue3-页面组件-—-完整流程"><a href="#DSL-渲染为-Vue3-页面组件-—-完整流程" class="headerlink" title="DSL 渲染为 Vue3 页面组件 — 关于低代码相关的理解 http://blog.ypintao.com/2026/05/09/%E5%89%8D%E7%AB%AF/%E4%BD%8E%E4%BB%A3%E7%A0%81/%E5%85%B3%E4%BA%8E%E4%BD%8E%E4%BB%A3%E7%A0%81/ 2026-05-08T16:00:00.000Z 2026-05-10T08:24:25.627Z 大纲

前端在开发活动过程中，前端开发流程老的方式就是设计出图=>前端开发页面=>对接接口调整页面交互逻辑=>测试完上线=>运营配置活动。
低代码重点是为了满足大部分日常活动的需求，运营可自主配置活动并上线，释放了相当一部分的开发人力。
不过，此时的方案仍然无法很好地服务大型直播活动场景，比如年度 S 级的直播活动，这类活动赛程多且持续时间长（可长达两周），页面和组件都包含多种状态，运营难以配置出大型直播活动的所有需求，故此阶段的大型活动仍然完全由开发编码实现，需要占用较多人力，但此类活动从数量上来看连 1% 都不到。鉴于我们已在日常活动中积累维护了相当多功能的低代码组件，如何复用已有的低代码组件来更快实现更多活动玩法就成了一个值得研究的问题。此外，大型活动从筹备到结束，时间长达数月，而密集开发阶段可能只占其中的一个月，密集开发结束后的长尾需求又该如何优化提效？需要探索前端在活动场景的低代码相关经验，以及最终稳定的开发模式。

不同场景的开发方案

配置类页面

经产运及技术负责人评估后，若无需开发参与则由产运同事自助配置并上线。若需要开发参与，则视情况修改组件或开发 JS 或 CSS 补丁代码来实现，沉淀下来的代码也可用于后续的类似活动。

开发类页面

在一些玩法较为复杂、活动状态多的场景，配置页面的难度可能会呈指数级上升，当时平台也并不具备完善的预览能力，所以此类活动几乎完全由开发负责实现（部分页面可能会跳转到配置类页面）。虽然工作量较大，但简单来说就是根据设计稿、产品需求文档、接口文档这几个关键输入来实现活动页面，在流程上并没有太多可说的。

]]> <h1 id="大纲"><a href="#大纲" class="headerlink" title="大纲"></a>大纲</h1><p>前端在开发活动过程中，前端开发流程老的方式就是设计出图&#x3D;&gt;前端开发页面&#x3D;&gt;对接接口调整页面交互逻辑&#x3D;&gt;测试完上线&#x3D;&gt;运营配置活动。<br>低代码重点是为了满足大部分日常活动的需求，运营可自主配置活动并上线，释放了相当一部分的开发人力。<br>不过，此时的方案仍然无法很好地服务大型直播活动场景，比如年度 S 级的直播活动，这类活动赛程多且持续时间长（可长达两周），页面和组件都包含多种状态，运营难以配置出大型直播活动的所有需求，故此阶段的大型活动仍然完全由开发编码实现，需要占用较多人力，但此类活动从数量上来看连 1% 都不到。鉴于我们已在日常活动中积累维护了相当多功能的低代码组件，如何复用已有的低代码组件来更快实现更多活动玩法就成了一个值得研究的问题。此外，大型活动从筹备到结束，时间长达数月，而密集开发阶段可能只占其中的一个月，密集开发结束后的长尾需求又该如何优化提效？需要探索前端在活动场景的低代码相关经验，以及最终稳定的开发模式。</p> 从DSL 到渲染出vue3组件的几种方式 http://blog.ypintao.com/2026/05/09/%E5%89%8D%E7%AB%AF/%E4%BD%8E%E4%BB%A3%E7%A0%81/%E4%BB%8EDSL%20%E5%88%B0%E6%B8%B2%E6%9F%93%E5%87%BAvue3%E7%BB%84%E4%BB%B6%E7%9A%84%E5%87%A0%E7%A7%8D%E6%96%B9%E5%BC%8F/ 2026-05-08T16:00:00.000Z 2026-05-14T00:07:27.740Z 将 DSL（Domain-Specific Language，领域特定语言，通常在前端表现为 JSON 或 XML 格式的数据结构）渲染为 Vue 3 组件，是低代码（Low-Code）、动态表单、CMS 页面可视化搭建等场景的核心诉求。

在 Vue 3 中，实现从 DSL 到组件渲染主要有以下几种方式，按推荐程度和常用场景排序：

假设我们有如下的基础 DSL 结构：

1
2
3
4
5
6
7
8
9
10
11
{
  "type": "div",
  "props": { "class": "container" },
  "children": [
    {
      "type": "MyButton",
      "props": { "type": "primary", "text": "点击我" },
      "children": []
    }
  ]
}

1. 递归动态组件（<component :is="xxx">）

这是最符合 Vue 模板开发直觉、使用最广泛的方式。通过编写一个递归的 Vue 组件，解析 DSL 的每一个节点。

  • 实现原理：利用 Vue 的 <component :is="..."> 动态挂载组件，并结合 v-for 和组件自身的递归调用来渲染子节点。
  • 代码示例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!-- DslRenderer.vue -->
<template>
  <!-- 动态渲染当前节点 -->
  <component :is="resolveTag(dsl.type)" v-bind="dsl.props">
    <!-- 如果有文本内容 -->
    <template v-if="dsl.props.text">{{ dsl.props.text }}</template>
    
    <!-- 递归渲染子节点 -->
    <template v-if="dsl.children && dsl.children.length">
      <DslRenderer 
        v-for="(child, index) in dsl.children" 
        :key="index" 
        :dsl="child" 
      />
    </template>
  </component>
</template>

<script setup>
import { resolveComponent } from 'vue';
// 预先引入自定义组件
import MyButton from './MyButton.vue';

const props = defineProps({
  dsl: Object
});

// 解析标签（区分原生 HTML 标签和 Vue 组件）
const resolveTag = (type) => {
  const htmlTags = ['div', 'span', 'p', 'h1', 'section'];
  if (htmlTags.includes(type)) {
    return type;
  }
  // 如果全局注册过，也可以按需获取
  const componentsMap = { MyButton };
  return componentsMap[type] || type;
};
</script>
  • 优点：纯模板语法，心智负担小；天然支持 Vue 的指令（v-if, v-show）；易于集成现有的 UI 组件库。
  • 缺点：对于极其复杂的巨型 DOM 树，递归组件的实例开销较大。

2. 渲染函数（Render Function / h 函数）

直接跳过模板编译阶段，使用 Vue 3 的底层 API h() 生成虚拟 DOM (VNode)。这是性能最好、最灵活的方式，也是大多数成熟开源低代码引擎（如阿里 LowCodeEngine 的 Vue 渲染器）的底层选择。

  • 实现原理：编写一个递归的 JavaScript 函数，遍历 DSL 并不断调用 h() 生成 VNode 树。
  • 代码示例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// renderDsl.js
import { h, resolveComponent, Text } from 'vue';
import MyButton from './MyButton.vue';

const componentsMap = { MyButton };

export function renderDsl(node) {
  if (!node) return null;

  // 1. 获取组件类型
  let tag = node.type;
  // 如果不是原生标签，则从映射表或全局获取
  if (!['div', 'span', 'p'].includes(tag)) {
    tag = componentsMap[tag] || resolveComponent(tag);
  }

  // 2. 处理子节点
  const children = [];
  if (node.props?.text) {
    children.push(node.props.text); // 纯文本节点
  }
  if (node.children && node.children.length > 0) {
    children.push(...node.children.map(child => renderDsl(child)));
  }

  // 3. 返回 VNode
  return h(tag, node.props, children);
}

使用时包装在一个函数式组件或普通组件的 setup 中：

1
2
3
4
5
6
7
8
9
10
11
<script>
import { defineComponent } from 'vue';
import { renderDsl } from './renderDsl';

export default defineComponent({
  props: ['dsl'],
  setup(props) {
    return () => renderDsl(props.dsl);
  }
});
</script>
  • 优点：性能极高（没有模板解析开销，直接生成 VNode）；极度灵活，可以轻松实现复杂的逻辑流转（如动态插槽、事件拦截）。
  • 缺点：代码可读性稍差（尤其是多层嵌套时），需要开发者非常熟悉 Vue 的 VNode 设计规范。

3. JSX / TSX 语法

本质上是第 2 种方案（渲染函数）的语法糖。利用 Babel 将 JSX 编译成 h() 函数，使代码看起来更像 HTML 结构。

  • 代码示例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// DslRenderer.tsx
import { defineComponent } from 'vue';
import MyButton from './MyButton.vue';

const componentsMap: Record<string, any> = { MyButton };

export const DslRenderer = defineComponent({
  props: {
    dsl: { type: Object, required: true }
  },
  setup(props) {
    const renderNode = (node: any) => {
      const Tag = componentsMap[node.type] || node.type;
      
      return (
        <Tag {...node.props}>
          {node.props.text && node.props.text}
          {node.children?.map((child: any) => renderNode(child))}
        </Tag>
      );
    };

    return () => renderNode(props.dsl);
  }
});
  • 优点：比手写 h() 可读性好太多，React 开发者可以零成本平滑迁移。
  • 缺点：需要配置构建工具（Vite/Webpack）支持 JSX；部分 Vue 独有的模板指令（如 v-model 的修饰符、v-slot）在 JSX 中的写法较为反直觉。

4. 运行时模板编译（Runtime Compiler）

将 DSL 解析并拼接成一段 Vue template 字符串，然后利用 Vue 的运行时编译器将字符串动态编译为组件。

  • 实现原理：DSL -> Template String -> compile() -> Component
  • 代码示例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import { defineComponent } from 'vue';
// 注意：必须使用带有编译器的 Vue 构建版本 (vue.esm-browser.js 或配置 alias)

// 假设我们写了一个将 DSL 转为 HTML 字符串的函数
function dslToTemplate(dsl) {
  // 生成类似 "<div class='container'><MyButton type='primary'>点击我</MyButton></div>" 的字符串
  // 省略具体的字符串拼接逻辑
  return `<${dsl.type} ...>...</${dsl.type}>`; 
}

export const DynamicComponent = defineComponent({
  props: ['dsl'],
  setup(props) {
    // 动态生成 template 字符串
    const templateStr = dslToTemplate(props.dsl);
    
    // 返回包含动态 template 的组件对象
    return {
      template: templateStr,
      components: { MyButton }
    }
  }
});
  • 优点：可以将传统的 HTML 字符串片段直接变活，对处理服务端下发的富文本/旧版微前端架构比较有用。
  • 缺点：
    • 严重警告：带来极大的安全风险（XSS 攻击），绝对不要渲染不可信的 DSL。
    • 性能较差：在浏览器里运行完整的 Vue 编译器，非常消耗性能。
    • 体积增加：打包时必须引入 Vue Compiler 版本，会增加约 100kb+ 的包体积。

5. 构建时编译（AST 生成 Vue SFC）

这种方式不属于“运行时渲染”，而是属于“代码生成（Code Generation）”。通常用于 D2C（Design to Code，设计稿转代码）工具中。

  • 实现原理：在 Node.js 环境下，读取 JSON DSL，利用 Babel 或直接拼字符串的方式，生成 .vue 文件（单文件组件 SFC），然后交给 Vite/Webpack 正常打包。
  • 使用场景：比如各种低代码平台中的“导出 Vue 源码”功能，或者企业内部的 CLI 脚手架工具。
  • 优点：运行时零负担，生成的代码可二次开发。
  • 缺点：无法应对运行时 DSL 发生改变的场景（即无法做到配置即刻生效）。

💡 总结与建议：我该选哪种？

方式性能灵活性维护难度适用场景
1. 递归动态组件中等高极低（推荐）中后台动态表单、配置驱动的基础页面构建。
2. h 渲染函数最高最高高大型低代码平台核心渲染器、需要极致性能的复杂树状组件。
3. JSX/TSX高高中团队有 React 背景，需要手写复杂渲染逻辑的场景。
4. 运行时编译极低中危险极特殊的富文本解析、兼容老旧系统（强烈不推荐常规业务使用）。
5. 构建时编译---设计稿转源码工具（D2C）、自动生成样板代码。

最佳实践闭环：
绝大多数现代前端业务中，如果你在做一个动态表单或中小型低代码系统，推荐使用 第1种（递归动态组件）；如果你在做一个商业级、面临复杂交互与插槽嵌套的低代码引擎，请毫不犹豫地选择 第2种（Render Function） 或 第3种（JSX）。

]]> <p>将 DSL（Domain-Specific Language，领域特定语言，通常在前端表现为 JSON 或 XML 格式的数据结构）渲染为 Vue 3 组件，是<strong>低代码（Low-Code）、动态表单、CMS 页面可视化搭建</strong>等场景的核心诉求。< 渲染器方法详解 http://blog.ypintao.com/2026/05/09/%E5%89%8D%E7%AB%AF/%E4%BD%8E%E4%BB%A3%E7%A0%81/DSL%20%E6%B8%B2%E6%9F%93%E5%99%A8%E6%96%B9%E6%B3%95%E8%AF%A6%E8%A7%A3/ 2026-05-08T16:00:00.000Z 2026-05-14T00:42:55.380Z DSL 渲染器方法详解

基于当前项目 test/demo/src 源码，逐函数详细说明转换过程

一、类型系统 (src/core/types.ts)

1.1 JSExpression

1
2
3
4
5
interface JSExpression {
  type: 'JSExpression';
  id?: string;
  value: string;  // 如 "count + 1", "items.length", "visible ? 'show' : 'hide'"
}

作用: 表示一段需要在运行时动态求值的 JavaScript 表达式。
value 是字符串形式的表达式代码，渲染时通过 new Function 执行得到实际值。

转换示例:

1
2
3
输入: { type: 'JSExpression', value: 'count + 1' }
  ↓ parseExpression() 执行
输出: number（如 count=5 时结果为 6）

1.2 JSFunction

1
2
3
4
5
interface JSFunction {
  type: 'JSFunction';
  id?: string;
  value: string;  // 如 "function() { return this.count + 1 }"
}

作用: 表示一段需要在运行时动态生成的 JavaScript 函数。
value 是字符串形式的函数定义代码。

转换示例:

1
2
3
输入: { type: 'JSFunction', value: 'function handleClick() { this.count++ }' }
  ↓ parseFunction() 执行
输出: Function 对象，可直接调用

1.3 NodeSchema

1
2
3
4
5
6
7
8
9
10
11
12
interface NodeSchema {
  id?: string;           // 节点唯一标识，设计器用
  name: string;          // HTML 标签名或组件名，如 'div', 'button', 'MyComponent'
  from?: string;         // 组件来源路径
  locked?: boolean;      // 是否锁定（不可编辑）
  invisible?: boolean;   // 是否隐藏（不渲染）
  props?: NodeProps;     // 组件属性
  events?: NodeEvents;   // 事件绑定
  directives?: NodeDirective[]; // Vue 指令
  children?: string | JSExpression | NodeSchema[]; // 子节点
  slot?: string | NodeSlot;    // 插槽信息
}

作用: 描述页面中的每一个组件节点。children 可以是：

  • string — 纯文本内容，如 "Hello World"
  • JSExpression — 动态文本，如 { type: 'JSExpression', value: 'message' }
  • NodeSchema[] — 子节点数组，递归嵌套

1.4 BlockSchema

1
2
3
4
5
6
7
8
9
10
11
interface BlockSchema {
  id?: string;
  name: string;           // 页面/区块名称
  state?: Record<string, JSExpression | JSFunction>; // 响应式状态
  computed?: Record<string, JSFunction>;              // 计算属性
  methods?: Record<string, JSFunction>;               // 方法
  watch?: any[];          // 侦听器
  lifeCycles?: Record<string, JSFunction>;            // 生命周期钩子
  nodes?: NodeSchema[];   // 根节点列表
  css?: string;           // CSS 样式字符串
}

作用: 描述一个完整的页面或可复用区块，对应 Vue 的一个 SFC 组件。

1.5 NodeDirective

1
2
3
4
5
6
7
8
interface NodeDirective {
  id?: string;
  name: string | JSExpression;  // 指令名：vIf, vFor, vShow, vModel, vBind, vHtml
  arg?: string | JSExpression;  // 指令参数：v-model:arg
  modifiers?: Record<string, boolean>; // 修饰符
  value?: JSExpression;         // 指令绑定值
  iterator?: { item: string; index: string }; // v-for 的迭代变量名
}

1.6 类型守卫函数

1
2
3
4
5
6
7
function isJSExpression(data: any): data is JSExpression {
  return data && data.type === 'JSExpression';
}

function isJSFunction(data: any): data is JSFunction {
  return typeof data === 'object' && data && data.type === 'JSFunction';
}

作用: 在运行时判断一个值是否为动态表达式/函数，用于递归遍历时区分静态值和动态值。

二、表达式解析 (src/core/renderer.ts)

2.1 parseExpression(str, self)

1
2
3
4
5
6
7
8
9
10
11
12
13
function parseExpression(str: JSExpression | JSFunction, self: any) {
  // 1. 获取表达式字符串
  let tarStr = (str.value || '').trim();

  // 2. 将 this 替换为 __self（因为 new Function 内不能用 this 访问上下文）
  tarStr = tarStr.replace(/this(\W|$)/g, (_a, b) => `__self${b}`);

  // 3. 构建 with 语句，使 $scope 中的变量可以直接访问
  const code = `with($scope || {}) { "use strict"; var __self = arguments[0]; return ${tarStr} }`;

  // 4. 用 new Function 创建函数并执行，传入 self 作为上下文
  return new Function('$scope', code)(self);
}

执行原理:

步骤说明
str.value原始表达式字符串，如 "count + 1"
this → __self替换 this.count 为 __self.count
with($scope)让 $scope 对象的属性可以直接用变量名访问
new Function('$scope', code)(self)动态创建并立即执行函数

self 参数是什么: 即 Context 实例。Context 上有 state、props、methods 等属性，
通过 with 语句，表达式中可以直接写 count 而不是 this.state.count。

完整执行示例:

1
2
3
4
5
6
7
8
9
10
11
12
表达式: { type: 'JSExpression', value: 'count + 1' }
Context: { state: { count: 5 }, ... }

执行代码:
  with($scope || {}) {
    "use strict";
    var __self = arguments[0];
    return count + 1
  }

$scope = Context实例，state 通过 with 展开为可访问变量
结果: 6

2.2 parseFunction(str, self)

1
2
3
4
5
6
7
function parseFunction(str: JSFunction, self: any) {
  const fn = parseExpression(str, self);  // 复用 parseExpression
  if (typeof fn !== 'function') {
    console.warn('parseFunction.error: not a function', str.value);
  }
  return fn as Function;
}

作用: 与 parseExpression 相同的执行机制，但期望返回值是一个 Function 对象。

示例:

1
2
3
4
5
输入: { type: 'JSFunction', value: 'function() { this.count++ }' }
  ↓ this → __self 替换
  ↓ with($scope) 包裹
  ↓ new Function 执行
输出: Function 对象，调用时 count 会自增

三、运行时上下文 — Context 类

3.1 Context 构造

1
2
3
4
5
6
7
8
9
10
11
12
13
14
class Context {
  state: Record<string, any> = {};    // Vue reactive 状态
  props: Record<string, any> = {};    // 组件 props
  $refs: Record<string, any> = {};    // 模板 ref
  $emit: any = null;                  // 触发事件
  $slots: any = null;                 // 插槽
  $watch: any = null;                 // 侦听器
  // ... 其他 Vue 实例代理属性

  constructor(private options: { dsl?: BlockSchema; attrs?: any }) {
    if (options.dsl) this.__id = options.dsl.id || null;
    if (options.attrs) Object.assign(this, options.attrs);
  }
}

作用: Context 是 DSL 表达式执行的”宿主环境”，代理了 Vue 组件实例的所有能力。
DSL 中的 this.xxx 实际上就是访问 Context 上的属性。

3.2 ctx.setup(attrs, V) — 绑定 Vue 实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
setup(attrs: Record<string, any>, V: any = Vue) {
  // 1. 获取当前 Vue 组件实例
  const instance = V.getCurrentInstance();
  if (!instance) return;

  // 2. 重置缓存
  this.__refs = {};
  this.__refCaches = {};
  this.$refs = {};

  // 3. 代理 Vue 实例
  this.__instance = instance.proxy;
  Object.assign(this, instance.appContext.config.globalProperties);
  Object.assign(this, attrs || {});

  // 4. 代理 Vue 实例方法 ($emit, $nextTick, $watch 等)
  CONTEXT_HOST.forEach((name) => {
    this[name] = this.__instance?.[name];
  });

  // 5. 生命周期内自动更新代理
  V.onMounted(() => { /* 重新绑定 CONTEXT_HOST */ });
  V.onUnmounted(() => { /* 清理引用 */ });
  V.onBeforeUpdate(() => { /* 重置缓存 */ });
}

调用时机: 在 createRenderer 的 setup() 函数内调用，使 Context 与当前 Vue 组件实例绑定。

3.3 ctx.__parseExpression(code) / ctx.__parseFunction(code)

1
2
3
4
5
6
7
8
9
__parseExpression(code?: JSExpression | JSFunction) {
  if (!code) return;
  return parseExpression(code, this);  // this 就是 self 参数
}

__parseFunction(code?: JSFunction) {
  if (!code) return;
  return parseFunction(code, this);
}

作用: Context 实例方法，将自身作为执行上下文传给 parseExpression/parseFunction。

3.4 ctx.__clone(context) — 克隆上下文

1
2
3
4
5
6
7
__clone(context: Record<string, any> = {}) {
  const _context = { ...this.context, ...context };
  const copy: any = { ..._context, context: _context };
  copy.context.__proto__ = this.context;
  copy.__proto__ = this;
  return copy as Context;
}

作用: 创建 Context 的浅克隆，用于 v-for 循环。每次迭代需要独立的上下文来存储 item 和 index 变量。

使用场景:

1
2
3
4
v-for="item in items"
  ↓ 每次迭代
ctx.__clone({ item: items[0], index: 0 })  // 子上下文 1
ctx.__clone({ item: items[1], index: 1 })  // 子上下文 2

3.5 ctx.__ref(id, ref) — 处理模板引用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
__ref(id: string | null = null, ref?: string | Function) {
  if (!id) return undefined;
  // 缓存 ref 函数避免重复创建
  let refFunc = this.__refCaches[id];
  if (refFunc) return refFunc;

  refFunc = async (el: any) => {
    await new Promise(r => setTimeout(r, 0)); // 等待 DOM 更新
    let dom = el?.$el || el;
    if (id) this.__refs[id] = el;     // 存储到 Context.__refs
    if (typeof ref === 'function') ref(el);
    else if (ref) this.$refs[ref] = el; // 存储到 Vue $refs
  };
  this.__refCaches[id] = refFunc;
  return refFunc;
}

作用: 为每个 DSL 节点创建 Vue 的 ref 回调函数，用于获取 DOM 元素引用。

四、节点渲染 — nodeRender() 核心流程

4.1 函数签名

1
2
3
4
5
6
7
8
function nodeRender(
  dsl: NodeSchema,         // 当前节点 Schema
  ctx: Context,            // 运行时上下文
  V: any = Vue,            // Vue 运行时引用
  brothers: NodeSchema[],  // 兄弟节点列表（用于 v-if/v-else 链）
  isBranch: boolean,       // 是否是 v-else-if/v-else 分支渲染
  index: number            // 节点在兄弟中的索引
): any  // 返回 VNode | VNode[] | null

4.2 完整执行流程

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
nodeRender(dsl, ctx, V, brothers, isBranch, index)
  │
  ├─ 1. 前置检查
  │     ├─ dsl 为空或 invisible → 返回 null
  │     └─ 非分支模式遇到 v-else-if/v-else → 返回 null（跳过）
  │
  ├─ 2. 提取指令
  │     └─ getDiretives(directives) → { vIf, vElseIf, vElse, vFor, vShow, vBind, vHtml, vModels }
  │
  ├─ 3. 处理 v-if 条件链
  │     ├─ vIf 条件为 false → 向后搜索兄弟节点的 v-else-if / v-else
  │     ├─ 找到匹配的 v-else-if → 递归调用 nodeRender(brother, ctx, V, brothers, true)
  │     └─ 找到 v-else → 递归调用 nodeRender(brother, ctx, V, brothers, true)
  │
  ├─ 4. 定义内部 render(c, seq) 函数
  │     │
  │     ├─ 4a. 解析属性
  │     │     └─ parseNodeProps(id, dsl.props, c)
  │     │         ├─ deepParseNodeProps(props, c)  // 递归处理 JSExpression
  │     │         │   ├─ 遇到 JSExpression → c.__parseExpression() 求值
  │     │         │   ├─ 遇到 JSFunction → c.__parseFunction() 生成函数
  │     │         │   ├─ 遇到 Object → 递归处理每个值
  │     │         │   └─ 遇到 Array → 递归处理每个元素
  │     │         └─ 设置 ref 回调 c.__ref(id)
  │     │
  │     ├─ 4b. 解析事件
  │     │     └─ parseNodeEvents(V, id, dsl.events, c)
  │     │         ├─ 遍历每个事件 { name, handler: JSFunction }
  │     │         ├─ c.__parseFunction(handler) → 得到实际函数
  │     │         └─ 转为 Vue 格式: { onClick: fn, onInput: fn }
  │     │
  │     ├─ 4c. 处理特殊节点类型
  │     │     └─ name === 'slot' → 渲染 Vue slot
  │     │
  │     ├─ 4d. 处理指令效果
  │     │     ├─ vBind → Object.assign(props, 解析值)  // 合并动态属性
  │     │     ├─ vShow → 条件为 false 时设置 style.display = 'none'
  │     │     ├─ vHtml → 设置 props.innerHTML = 解析值
  │     │     └─ vModel → 双向绑定处理（区分原生/组件）
  │     │
  │     ├─ 4e. 处理 v-model 双向绑定
  │     │     ├─ 原生 HTML 标签:
  │     │     │   props.value = 解析值
  │     │     │   props.onInput = (v) => { 变量 = v.target.value }
  │     │     └─ Vue 组件:
  │     │         props.modelValue = 解析值
  │     │         props['onUpdate:modelValue'] = (v) => { 变量 = v }
  │     │
  │     ├─ 4f. 处理子节点
  │     │     └─ childrenToSlots(V, dsl.children, c, dsl)
  │     │         ├─ children 是 string → { default: () => text }
  │     │         ├─ children 是 JSExpression → { default: () => 动态文本 }
  │     │         └─ children 是 NodeSchema[] → createSlotsConfig() 分组
  │     │             ├─ 按 slot 属性分组
  │     │             └─ 每组递归调用 nodeRender()
  │     │
  │     └─ 4g. 创建 VNode
  │           └─ Vue.createVNode(component, { key, data-vtj, ...props, ...events }, slots)
  │
  ├─ 5. 处理 v-for 循环
  │     └─ vForRender(directive, render, ctx)
  │         ├─ 解析数组: ctx.__parseExpression(value)
  │         ├─ 遍历每个元素:
  │         │   ctx.__clone({ item, index }) → 创建子上下文
  │         │   render(子上下文, 序号) → 生成 VNode
  │         └─ 返回 VNode 数组
  │
  └─ 6. 返回结果
        ├─ 有 v-for → VNode 数组
        └─ 无 v-for → 单个 VNode

4.3 getDiretives() — 指令分类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function getDiretives(directives: NodeDirective[] = []) {
  // 将驼峰指令名转为标准格式：vIf → 'vIf', vFor → 'vFor'
  const camelCase = (s: string) => s.replace(/([A-Z])/g, (_, c, i) => i === 0 ? c.toLowerCase() : c);

  return {
    vIf: directives.find(n => camelCase(n.name) === 'vIf'),
    vElseIf: directives.find(n => camelCase(n.name) === 'vElseIf'),
    vElse: directives.find(n => camelCase(n.name) === 'vElse'),
    vFor: directives.find(n => camelCase(n.name) === 'vFor'),
    vShow: directives.find(n => camelCase(n.name) === 'vShow'),
    vBind: directives.find(n => camelCase(n.name) === 'vBind'),
    vHtml: directives.find(n => camelCase(n.name) === 'vHtml'),
    vModels: directives.filter(n => camelCase(n.name) === 'vModel'),  // 注意是 filter，可以有多个
    others: directives.filter(n => /* 其他自定义指令 */)
  };
}

返回值: 将 directives 数组按类型分类，方便后续分别处理。

4.4 deepParseNodeProps() — 深度属性解析

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function deepParseNodeProps(props: any, ctx: Context): any {
  // 递归终止条件
  if (isJSExpression(props)) return ctx.__parseExpression(props);  // 表达式 → 求值
  if (isJSFunction(props)) return ctx.__parseFunction(props);      // 函数 → 生成函数
  if (Array.isArray(props)) return props.map(i => deepParseNodeProps(i, ctx)); // 数组 → 递归
  if (typeof props === 'object' && props !== null) {
    // 对象 → 递归处理每个属性值
    return Object.keys(props).reduce((r, k) => {
      r[k] = deepParseNodeProps(props[k], ctx);
      return r;
    }, {});
  }
  return props;  // 原始值直接返回
}

递归逻辑:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
props: {
  class: { type: 'JSExpression', value: 'active ? "active" : ""' },
  style: { color: 'red', fontSize: { type: 'JSExpression', value: 'size + "px"' } },
  items: [
    { type: 'JSExpression', value: 'list' },
    'static'
  ]
}
  ↓ deepParseNodeProps
{
  class: "active",              // JSExpression 求值
  style: { color: 'red', fontSize: '16px' },  // 嵌套递归
  items: [['a','b'], 'static']  // 数组递归
}

4.5 parseNodeEvents() — 事件解析

1
2
3
4
5
6
7
8
9
10
11
function parseNodeEvents(V: any, _id: string, events: NodeEvents, ctx: Context) {
  return Object.keys(events || {}).reduce((result, key) => {
    const event = events[key];
    const handler = ctx.__parseFunction(event.handler); // JSFunction → 真实函数
    if (handler) {
      // click → onClick, input → onInput
      result['on' + key.charAt(0).toUpperCase() + key.slice(1)] = handler;
    }
    return result;
  }, {});
}

转换规则:

1
2
3
DSL:  { click: { handler: JSFunction } }
  ↓
Vue:  { onClick: Function }

4.6 vForRender() — v-for 循环渲染

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function vForRender(directive: NodeDirective, render: (ctx: Context, seq?: number) => any, ctx: Context) {
  const { value, iterator } = directive;
  const { item = 'item', index = 'index' } = iterator || {};

  // 1. 解析循环数据源
  let items = ctx.__parseExpression(value) || [];

  // 2. 数字也可以循环: v-for="(item, index) in 3" → [1, 2, 3]
  if (Number.isInteger(items)) items = new Array(items).fill(true).map((_, i) => i + 1);

  if (!Array.isArray(items)) return [];

  // 3. 遍历每个元素，克隆上下文并注入循环变量
  return items.map((_item, _index) =>
    render(ctx.__clone({ [item]: _item, [index]: _index }), _index)
  );
}

执行示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
指令: { name: 'vFor', value: { type: 'JSExpression', value: 'items' }, iterator: { item: 'todo', index: 'i' } }
items = ['吃饭', '睡觉', '写代码']

  ↓ 第1次迭代
ctx.__clone({ todo: '吃饭', i: 0 }) → render(clone, 0) → VNode('li', {}, '吃饭')

  ↓ 第2次迭代
ctx.__clone({ todo: '睡觉', i: 1 }) → render(clone, 1) → VNode('li', {}, '睡觉')

  ↓ 第3次迭代
ctx.__clone({ todo: '写代码', i: 2 }) → render(clone, 2) → VNode('li', {}, '写代码')

结果: [VNode, VNode, VNode]

4.7 childrenToSlots() — 子节点转插槽

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function childrenToSlots(V: any, children: any, ctx: Context, parent?: NodeSchema): any {
  if (!children) return null;

  // 纯文本 → 默认插槽
  if (typeof children === 'string') return { default: () => children };

  // 动态文本 → 默认插槽
  if (isJSExpression(children)) return { default: () => toString(ctx.__parseExpression(children)) };

  // 节点数组 → 按 slot 属性分组为具名插槽
  if (Array.isArray(children) && children.length > 0) {
    const slots = createSlotsConfig(children);
    return Object.entries(slots).reduce((result, [name, { nodes }]) => {
      result[name] = (scope: any) => {
        const props = parent?.id && scope ? { [`scope_${parent.id}`]: scope } : {};
        // 递归渲染每个子节点
        return nodes.map((node, index) => nodeRender(node, ctx.__clone(props), V, nodes, false, index));
      };
      return result;
    }, {});
  }
  return null;
}

createSlotsConfig() 分组逻辑:

1
2
3
4
5
children: [
  { name: 'div', slot: 'header', children: '标题' },    → slots.header
  { name: 'p', slot: 'default', children: '内容' },      → slots.default
  { name: 'span', slot: 'footer', children: '底部' }     → slots.footer
]

五、状态初始化函数

5.1 createState() — 创建响应式状态

1
2
3
4
5
6
7
8
9
10
11
function createState(V: any, state: BlockSchema['state'], ctx: Context) {
  return V.reactive(
    Object.keys(state || {}).reduce((result, key) => {
      let val = state[key];
      if (isJSExpression(val)) val = ctx.__parseExpression(val);  // 表达式求值
      else if (isJSFunction(val)) val = ctx.__parseFunction(val); // 函数生成
      result[key] = val;
      return result;
    }, {})
  );
}

转换:

1
2
3
DSL state: { count: { type: 'JSExpression', value: '0' }, name: { type: 'JSExpression', value: '"Hello"' } }
  ↓
Vue.reactive({ count: 0, name: 'Hello' })

5.2 createComputed() — 创建计算属性

1
2
3
4
5
6
function createComputed(V: any, computed: Record<string, JSFunction>, ctx: Context) {
  return Object.entries(computed ?? {}).reduce((result, [k, v]) => {
    result[k] = V.computed(ctx.__parseFunction(v) as any);
    return result;
  }, {});
}

转换:

1
2
3
DSL computed: { double: { type: 'JSFunction', value: 'function() { return this.count * 2 }' } }
  ↓
{ double: Vue.computed(() => count * 2) }

5.3 createMethods() — 创建方法

1
2
3
4
5
6
function createMethods(methods: Record<string, JSFunction>, ctx: Context) {
  return Object.entries(methods ?? {}).reduce((result, [k, v]) => {
    result[k] = ctx.__parseFunction(v);
    return result;
  }, {});
}

转换:

1
2
3
DSL methods: { increment: { type: 'JSFunction', value: 'function() { this.count++ }' } }
  ↓
{ increment: Function }  // 调用时 count 自增

5.4 createLifeCycles() — 创建生命周期钩子

1
2
3
4
5
6
7
8
9
10
11
12
function createLifeCycles(lifeCycle: Record<string, JSFunction>, ctx: Context) {
  return Object.entries(lifeCycle ?? {}).reduce((result, [k, v]) => {
    const func = ctx.__parseFunction(v);
    result[k] = async () => {
      if (typeof func === 'function') {
        await new Promise(r => setTimeout(r, 0)); // 延迟确保 Context 已绑定
        await func();
      }
    };
    return result;
  }, {});
}

支持的钩子: onMounted, onUnmounted, onBeforeUpdate, onUpdated 等。
这些会展开为 defineComponent 的选项式钩子。

5.5 setWatches() — 设置侦听器

1
2
3
4
5
6
7
8
9
function setWatches(V: any, watches: any[], ctx: Context) {
  watches.forEach((n) => {
    V.watch(
      ctx.__parseExpression(n.source),     // 监听源
      ctx.__parseFunction(n.handler),       // 回调函数
      { deep: n.deep, immediate: n.immediate }  // 选项
    );
  });
}

六、createRenderer() — 渲染器入口

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
export function createRenderer(options: CreateRendererOptions) {
  const V = Vue;
  const ctx = new Context({ dsl: options.dsl });

  const renderer = V.defineComponent({
    name: options.dsl?.name || 'DslRenderer',
    props: {},

    // async setup → 外层必须用 <Suspense> 包裹
    async setup() {
      ctx.state = createState(V, options.dsl?.state, ctx);
      const computed = createComputed(V, options.dsl?.computed, ctx);
      const methods = createMethods(options.dsl?.methods, ctx);
      ctx.setup({ ...computed, ...methods }, V);
      setWatches(V, options.dsl?.watch, ctx);
      return { state: ctx.state, ...computed, ...methods };
    },

    ...createLifeCycles(options.dsl?.lifeCycles, ctx),

    render() {
      if (!options.dsl?.nodes) return null;
      const nodes = options.dsl.nodes || [];
      if (nodes.length === 1) return nodeRender(nodes[0], ctx, V, nodes);
      return V.createVNode('div', {},
        nodes.map(child => nodeRender(child, ctx, V, nodes))
      );
    }
  });

  return { renderer: V.markRaw(renderer), context: ctx };
}

返回值:

  • renderer — 用 markRaw 标记的 Vue 组件（避免被 reactive 代理）
  • context — Context 实例（可用于外部操作）

七、通信协议 (src/canvas/protocol.ts)

7.1 消息格式

1
2
3
4
5
interface DesignerMessage {
  channel: '__VTJ_DESIGNER__';  // 频道标识，过滤无关消息
  type: MessageType;             // 消息类型
  payload?: any;                 // 数据载荷
}

7.2 消息类型

类型方向说明payload
initHost → Canvas初始化 DSLBlockSchema
updateDsl双向同步 DSL 变更BlockSchema
selectHost → Canvas设置选中节点nodeId | null
nodeClickCanvas → Host用户点击节点nodeId | null
dropNodeHost → Canvas拖拽放置组件{ schema, x, y }
readyCanvas → HostCanvas 就绪无
selectedInfoCanvas → Host新增节点选中信息{ id, node }

7.3 sendMessage(target, msg)

1
2
3
function sendMessage(target: Window, msg: DesignerMessage) {
  target.postMessage(msg, '*');  // 使用 window.postMessage API
}

7.4 onMessage(fn) — 监听消息

1
2
3
4
5
6
7
8
9
function onMessage(fn: (msg: DesignerMessage) => void): () => void {
  const handler = (e: MessageEvent) => {
    if (e.data && e.data.channel === CHANNEL) {
      fn(e.data);  // 只处理本频道的消息
    }
  };
  window.addEventListener('message', handler);
  return () => window.removeEventListener('message', handler); // 返回取消函数
}

八、代码生成器 (src/coder/index.ts)

8.1 generateVueSFC(dsl) — DSL → Vue SFC 源码

将 BlockSchema 转为 .vue 单文件组件字符串：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
BlockSchema
  │
  ├─ nodes → <template> 部分
  │   └─ genNode() 递归生成 HTML 模板
  │       ├─ props → HTML 属性
  │       ├─ directives → v-if/v-for/v-model 等指令
  │       ├─ events → @click/@input 等事件
  │       └─ children → 递归子节点
  │
  ├─ state → <script setup> reactive()
  ├─ computed → computed()
  ├─ methods → 普通函数
  │
  └─ css → <style scoped>

8.2 genNode(node, indent) — 节点转模板

1
2
3
NodeSchema: { name: 'button', props: { class: 'btn' }, children: '点击' }
  ↓ genNode
<button class="btn">点击</button>

指令转换:

1
2
3
4
5
6
7
8
9
10
11
{ name: 'vFor', value: 'items', iterator: { item: 'item', index: 'i' } }
  ↓
v-for="(item, i) in items"

{ name: 'vIf', value: 'show' }
  ↓
v-if="show"

{ name: 'vModel', value: 'text' }
  ↓
v-model="text"

事件转换:

1
2
3
{ click: { handler: { type: 'JSFunction', value: 'function() { this.count++ }' } } }
  ↓
@click="() { count++ }"

8.3 generateJSON(dsl) — DSL → 格式化 JSON

1
2
3
function generateJSON(dsl: BlockSchema): string {
  return JSON.stringify(dsl, null, 2);
}

直接格式化输出，用于 DSL 查看和导入导出。

九、设计器集成

9.1 DesignerView → Canvas 交互流程

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
DesignerView (主页面)                      CanvasApp (iframe)
─────────────────────                      ───────────────────
1. iframe 加载 canvas.html
2. iframe load 事件
3. sendToCanvas('init', dsl)  ─────────→  收到 init → renderDsl()
4.                                           createRenderer({ dsl })
5.                                           <Suspense> 渲染
6.                        ←───────────  sendToHost('ready')
7. iframeReady = true

用户拖拽物料:
8. onDragStart(schema)                      显示蓝色虚线遮罩
9. 鼠标移到画布上方松开
10. onMaskMouseUp()
11. sendToCanvas('dropNode', ...) ──────→  收到 dropNode
12.                                         addNode() → renderDsl()
13.                        ←───────────  sendToHost('updateDsl')
14. eng.setDSL(dsl)

用户点击节点:
15.                                        onDocumentClick()
16.                        ←───────────  sendToHost('nodeClick', id)
17. selectedId = id
18. 右侧 PropsPanel 显示节点配置
19. 用户修改属性
20. eng.updateNodeProp() → syncDslToCanvas()
21. sendToCanvas('updateDsl')  ─────────→  收到 → renderDsl()

9.2 CanvasApp 内部渲染流程

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
CanvasApp.renderDsl()
  │
  ├─ JSON.parse(JSON.stringify(dsl))  // 深拷贝去除 reactive 代理
  │
  ├─ createRenderer({ dsl })
  │   ├─ new Context({ dsl })
  │   └─ defineComponent({ setup, render })
  │
  ├─ renderer.value = result.renderer  // 触发 Vue 重新渲染
  │
  └─ <Suspense>
      └─ <component :is="renderer" />
          ├─ setup() 执行
          │   ├─ createState() → reactive state
          │   ├─ createComputed() → computed
          │   ├─ createMethods() → methods
          │   └─ ctx.setup() → 绑定 Vue 实例
          │
          └─ render() 执行
              └─ nodes.map(n => nodeRender(n, ctx, V, nodes))
                  ├─ 解析 props
                  ├─ 解析 events
                  ├─ 处理 directives
                  ├─ 处理 children/slots
                  └─ createVNode() → VNode 树
]]> <h1 id="DSL-渲染器方法详解"><a href="#DSL-渲染器方法详解" class="headerlink" title="DSL 渲染器方法详解"></a>DSL 渲染器方法详解</h1><blockquote> <p>基于当前项目 <code>test/dem 自有服务器VPS 3x-Ui面板搭建安装详细教程 http://blog.ypintao.com/2026/01/03/%E4%BA%91%E6%89%8B%E6%9C%BA-%E6%97%A0%E4%BA%BA%E7%9B%B4%E6%92%AD/%E4%BB%A3%E7%90%86%E6%90%AD%E5%BB%BA/ 2026-01-03T12:26:55.739Z 2026-01-03T12:28:31.797Z 自由超12/06/202512/16/2025科学上网
3X-Ui面板项目地址：https://github.com/MHSanaei/3x-ui

自有服务器VPS 3x-Ui面板搭建安装详细教程01
准备
服务器：Ubuntu 22.04+/Debian12+系统
域名：自购或免费域名
cloudflare账号
SSH工具：如Finalshell
域名解析

假设已经有域名，并且已经托管到cloudflare（推荐：Namesilo，后缀top/xyz等2刀/年左右，新用户优惠码：freechao，省1美元）

自有服务器VPS 3x-Ui面板搭建安装详细教程12
域名解析需要时间，我们优先把3x-Ui面板访问地址对应的域名在cloudflare添加DNS，推荐用二级域名

为面板访问地址开启SSL证书做准备，这样访问更加安全

①登录cloudflare：https://dash.cloudflare.com
②添加域名DNS指向服务器ip，关闭小云朵
自有服务器VPS 3x-Ui面板搭建安装详细教程02
④通过窗口+R，输入cmd，输入ping 域名，来查看是否解析成功

自有服务器VPS 3x-Ui面板搭建安装详细教程03

连接服务器
假设已经购买服务器，没有的话推荐性价比服务器Racknerd，最低10刀左右/年：https://freechao.com/5857.html

成立于 2017 年，美国老牌服务器供应商
优先选择洛杉矶Los Angeles DC02、圣何塞San Jose
终身续费同价
3天内免费更换1次IP，不用担心被墙
终身免费流量翻倍：RackNerd服务器免费流量翻倍申请教程，还没申请亏大了
支付方式灵活，支持 PayPal、信用卡、支付宝
7x24小时客服，支持中文
注册购买RackNerd服务器VPS账号注册购买流量翻倍详细教程
CPU内存SSD硬盘月流量带宽优惠价格点击购买
1 核1 G25 G2 TB @1Gbps$10.6/年官网链接
2 核2.5 G45 G3 TB @1Gbps$18.66/年官网链接
3 核4 G65 G6.5 TB @1Gbps$29.98/年官网链接
5 核6 G100 G10 TB @1Gbps$44.98/年官网链接
6 核8 G150 G20 TB @1Gbps$62.49/年官网链接
①下载安装Finalshell：https://www.hostbuf.com/t/988.html
②Finalshell连接服务器
名称：任意自定义
主机：服务器的ip地址
端口：基本都是22
用户名：root
密码：服务器的root密码
自有服务器VPS 3x-Ui面板搭建安装详细教程04
③服务器系统更新及安装组件
apt update -y && apt install -y curl && apt install -y socat
自有服务器VPS 3x-Ui面板搭建安装详细教程05
3x-UI搭建安装部署
①安装3X-UI面板命令
bash <(curl -Ls https://raw.githubusercontent.com/mhsanaei/3x-ui/master/install.sh)
自有服务器VPS 3x-Ui面板搭建安装详细教程06
安装过程中询问设置面板端口

Would you like to customize the Panel Port settings?（If not , a random port will be applied) [y/n]:
自有服务器VPS 3x-Ui面板搭建安装详细教程07
输入n，随机生成端口
输入y，自定义端口
如果后面无法打开面板地址，要放行端口：比如端口1234，输入命令：ufw allow 1234

②保存面板信息
Username：用户名
Password：密码
Port：端口
WebBasePath：路径
Aceess URL：面板访问地址
自有服务器VPS 3x-Ui面板搭建安装详细教程08
③生成面板SSL：输入命令x-ui，选择数字18
依次输入数字1》输入域名》》按提示输入y，绑定证书到面板

保存开启SSL之后的面板链接

自有服务器VPS 3x-Ui面板搭建安装详细教程10
⑤开启BBR加速
输入命令x-ui，选择数字23，选择两次1，Enable BBR

自有服务器VPS 3x-Ui面板搭建安装详细教程11
3x-UI面板设置
①登录面板：https://域名:端口/根路径
如果没有创建SSL证书，会提示：安全警报，此连接不安全。在激活TLS进行数据保护之前，请勿输入敏感信息。

自有服务器VPS 3x-Ui面板搭建安装详细教程09
②点击【面板设置常规】
面板url根路径：让访问地址更短，前后要加/
面板监听端口：可以更改
更改后重启面板生效

③点击【安全设定】
可以更改用户名和密码

④添加节点：点击入站列表》添加入站
组合1：vless+TCP+Reality

备注：随意
协议：选择vless
端口：随机
传输：选择TCP
安全：选reality
Dest（Target）/SNI：改成yahoo.com、tesla.com、amd.com
点击【Get New Cert】获取公钥和私钥
组合2：vless+XHTTP+Reality

备注：随意
协议：选择vless
端口：随机
传输：选择XHTTP
路径：任意设置，英文
安全：选reality
Dest（Target）/SNI：改成yahoo.com、tesla.com、amd.com
点击【Get New Cert】获取公钥和私钥
客户端配置
扫描二维码、或复制粘贴链接导入客户端

Windows（v2rayN）：https://github.com/2dust/v2rayN/releases （下载v2rayN-windows-64-SelfContained.zip版）
Android（v2rayNG）：https://github.com/2dust/v2rayNG/releases
Mac（v2rayN）：https://github.com/2dust/v2rayN/releases
IOS（shadowrocket）：https://apps.apple.com/app/shadowrocket/id932747118
郑重声明：请合理使用科学上网，用于学习、科研、外贸等，严格遵守当地相关规定！

https://youtu.be/WffyIuCy3Xw

]]> <p>自由超12&#x2F;06&#x2F;202512&#x2F;16&#x2F;2025科学上网<br>3X-Ui面板项目地址：<a href="https://github.com/MHSanaei/3x-ui">https://github.com/MHSanaei/3x-ui</a></p> 购买服务器推荐链接 http://blog.ypintao.com/2026/01/03/%E4%BA%91%E6%89%8B%E6%9C%BA-%E6%97%A0%E4%BA%BA%E7%9B%B4%E6%92%AD/%E6%9C%8D%E5%8A%A1%E5%99%A8/ 2026-01-03T12:26:41.374Z 2026-01-12T15:12:37.956Z https://tools.ypintao.com

echo
“deb [arch=$(dpkg –print-architecture) signed-by=/usr/share/keyrings/docker-archive-keyring.gpg] https://mirrors.aliyun.com/docker-ce/linux/debian
$(lsb_release -cs) stable” | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null

静态图片 + 背景音频（最适合 BPI-P2 Pro）
这是对这款开发板负担最小的方式，适合做“24小时电台”：
code
Bash
ffmpeg -loop 1 -i cover.jpg -i “你的音乐目录/*.mp3”
-c:v libx264 -tune stillimage -c:a aac -b:a 128k
-pix_fmt yuv420p -shortest -f flv “rtmp://a.rtmp.youtube.com/live2/你的密钥”

使用 GitHub 上的自动化项目
如果你指的是 GitHub 上某些成熟的开源项目，通常推荐以下两个：

  1. kimbat/youtube-live
    重试

错误原因
(基于 Node.js)
这是一个简单的推流包装，适合前端开发者。
安装：需要先安装 Node.js。
用途：通过配置文件管理直播。
2. Live-Stream-Radio 直播电台 (适合做 24/7 音乐电台)
这个项目非常适合 BPI-P2 Pro 的音频强项。
它能自动读取文件夹里的音乐，随机播放，并配合一张背景图生成直播流。

获取 YouTube 直播密钥（Stream Key）的步骤非常直观，但如果你是第一次开通直播，可能需要等待 24 小时。
以下是详细步骤：
第一步：登录 YouTube Studio
在电脑浏览器上打开：YouTube Studio。
确保你已经登录了你的 Google 账号。
第二步：进入直播控制台
点击页面右上角的 “创建” (Create) 按钮（像一个摄像机图标）。
选择 “开始直播” (Go Live)。
第三步：激活直播权限（仅限第一次）
如果你以前从未直播过，YouTube 会提示你“请求直播权限”。
点击请求后，通常需要 等待 24 小时 才能审核通过。
如果已经开通了，你会直接进入直播控制面板。
第四步：获取密钥
在直播控制面板（YouTube Live Control Panel）中：
在左侧菜单确保选择了 “流” (Stream) 选项卡（不是“摄像头”）。
在页面中间的 “推流设置” (Stream settings) 栏目下，你会看到：
直播推流密钥 (Stream key)：这是一串由数字和字母组成的密码（例如：abcd-1234-efgh-5678）。
点击旁边的 “复制” (Copy) 按钮。
⚠️ 注意：绝对不要把这个密钥发给别人，任何人拿到这个密钥都能直接占用你的频道开始直播。
同时你也需要 推流地址 (Stream URL)：
就在密钥下方，通常是：rtmp://a.rtmp.youtube.com/live2。
第五步：将密钥填入你的脚本
回到你的 BPI-P2 Pro 终端，在你之前的 start_live.sh 脚本中，将刚才复制的密钥填进去：
code
Bash

修改脚本中的这一行

STREAM_KEY=”这里粘贴你刚才复制的密钥”
提示：如何测试是否成功？
在板子上运行脚本：./start_live.sh
回到 YouTube Studio 页面。
如果脚本运行正常，右上角的信号状态会变绿，显示 “连接状态良好”。
几秒钟后，预览窗口就会出现你的背景图片，并能听到声音。
点击页面右上角的 “开始直播” (Go Live)（如果开启了自动开始则不用点），你就正式上线了。
常见小问题：
网络问题：如果你在国内，BPI-P2 Pro 必须能够科学访问 YouTube 的 RTMP 服务器，否则推流会一直连接失败。
重置密钥：如果你觉得密钥泄露了，可以在 YouTube 后台点“重置”，旧密钥就会立即失效。

]]> <p><a href="https://tools.ypintao.com/">https://tools.ypintao.com</a></p> <p>echo <br> “deb [arch&#x3D;$(dpkg –print-architecture) signed-b 独占式文件锁定3 http://blog.ypintao.com/2025/12/28/%E5%89%8D%E7%AB%AF/electron/%E7%8B%AC%E5%8D%A0%E5%BC%8F%E6%96%87%E4%BB%B6%E9%94%81%E5%AE%9Awindowapi%E8%8E%B7%E5%8F%96%E5%8F%A5%E6%9F%84/ 2025-12-28T15:39:07.993Z 2025-12-28T15:39:43.443Z 这是一个非常硬核的系统级需求。你想要的是 强制性锁定（Mandatory Locking）。

在 Node.js/Electron 的标准 fs 模块中，fs.open 打开的文件默认通常是允许“共享读写”的，这意味着虽然你打开了文件，外部程序（如记事本）可能仍然能读取甚至修改它（取决于 OS 及其共享标志）。

要实现“只能在你的 IDE 操作，外部完全无法重命名、删除、修改”，你需要绕过 Node.js 的 fs，直接调用操作系统的原生 API（Windows API）。

推荐方案：使用 koffi (高性能 FFI 库) 调用 Windows CreateFile API

目前没有现成的 npm 包能完美做到“递归锁定文件夹且不消耗系统资源”，因为这是操作系统层面的限制。但我可以为你写一个基于 koffi（现代版 ffi-napi，支持 Electron）的工具类，通过独占句柄来实现。

核心原理

调用 Windows 的 CreateFileW 函数，并将 dwShareMode 设置为 0（即不共享）。

  • 只要你的 IDE 拿着这个句柄（Handle）不释放，任何其他进程（资源管理器、Git、Notepad）尝试访问该文件都会收到 Access Denied 或 File is being used by another process。

1. 安装依赖

你需要 koffi 来调用 C++ API。

1
npm install koffi

2. 实现 HandleLockManager.ts

这个管理器负责打开文件/文件夹的独占句柄。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
// src/main/HandleLockManager.ts
import koffi from 'koffi'
import path from 'path'

// === 1. 定义 Windows Kernel32 API ===
const lib = koffi.load('kernel32.dll')

// 定义常量
const GENERIC_READ = 0x80000000
const GENERIC_WRITE = 0x40000000
const OPEN_EXISTING = 3
const FILE_ATTRIBUTE_NORMAL = 0x80
const FILE_FLAG_BACKUP_SEMANTICS = 0x02000000 // 关键：允许打开文件夹句柄
const INVALID_HANDLE_VALUE = -1n // koffi 使用 BigInt 处理指针/句柄

// 定义函数签名
const CreateFileW = lib.func('CreateFileW', 'void*', [
  'str16', // lpFileName (宽字符路径)
  'uint32', // dwDesiredAccess
  'uint32', // dwShareMode (关键在这里！设为 0 表示独占)
  'void*', // lpSecurityAttributes
  'uint32', // dwCreationDisposition
  'uint32', // dwFlagsAndAttributes
  'void*' // hTemplateFile
])

const CloseHandle = lib.func('CloseHandle', 'int', ['void*'])

export class HandleLockManager {
  // 存储路径到句柄的映射
  private handles = new Map<string, any>()

  /**
   * 🔒 锁定单个文件或文件夹
   * @param targetPath 绝对路径
   */
  lock(targetPath: string) {
    if (this.handles.has(targetPath)) return true // 已经锁了

    // 1. 构造参数
    // dwShareMode = 0 (表示禁止其他进程 读、写、删除)
    const shareMode = 0 
    
    // dwFlagsAndAttributes: 如果是文件夹，必须加 BACKUP_SEMANTICS
    const flags = FILE_ATTRIBUTE_NORMAL | FILE_FLAG_BACKUP_SEMANTICS

    // 2. 调用 Windows API
    const handle = CreateFileW(
      targetPath,
      GENERIC_READ, // 我们只需要读权限来持有句柄
      shareMode,    // 【核心】0 = 独占！拒绝任何共享
      null,
      OPEN_EXISTING,
      flags,
      null
    )

    // 3. 检查是否成功
    if (BigInt(handle) === INVALID_HANDLE_VALUE) {
      console.error(`锁定失败: ${targetPath} (可能已被占用或权限不足)`)
      return false
    }

    // 4. 存入 Map
    this.handles.set(targetPath, handle)
    console.log(`🔒 已独占锁定: ${targetPath}`)
    return true
  }

  /**
   * 🔓 解锁
   */
  unlock(targetPath: string) {
    const handle = this.handles.get(targetPath)
    if (!handle) return

    CloseHandle(handle)
    this.handles.delete(targetPath)
    console.log(`🔓 已释放句柄: ${targetPath}`)
  }

  /**
   * 🔓 解锁所有 (通常在关闭工程时调用)
   */
  unlockAll() {
    for (const [path, handle] of this.handles) {
      CloseHandle(handle)
    }
    this.handles.clear()
  }
}

export const handleLockManager = new HandleLockManager()

3. 如何使用

在你的主进程逻辑中集成：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
// main.ts
import { handleLockManager } from './HandleLockManager'
import fs from 'fs'
import path from 'path'

// 当打开工程时
ipcMain.handle('open-project', async (e, projectDir) => {
  
  // 1. 锁定根文件夹 (防止根目录被重命名/删除)
  handleLockManager.lock(projectDir)

  // 2. 递归锁定所有子文件 (暴力锁定模式)
  // 注意：这会消耗系统句柄资源，文件数上万可能会有性能问题
  const lockRecursively = (dir: string) => {
    const items = fs.readdirSync(dir)
    for (const item of items) {
      if (['.git', 'node_modules'].includes(item)) continue; // 跳过黑名单
      
      const fullPath = path.join(dir, item)
      handleLockManager.lock(fullPath)
      
      if (fs.statSync(fullPath).isDirectory()) {
        lockRecursively(fullPath)
      }
    }
  }
  
  lockRecursively(projectDir)
  
  return { success: true }
})

// 当你的 IDE 需要修改文件时 (重命名/写入)
ipcMain.handle('ide-write-file', async (e, { filePath, content }) => {
  // 1. 必须先解锁！因为你自己持有的 Read 句柄也会阻止你自己的 Write 操作
  // (除非你在 CreateFile 时指定了 WRITE 权限，但为了安全通常先解锁)
  handleLockManager.unlock(filePath)
  
  try {
    // 2. 执行操作
    await fs.promises.writeFile(filePath, content)
  } finally {
    // 3. 操作完立即锁回去
    handleLockManager.lock(filePath)
  }
})

// 应用退出时释放所有
app.on('will-quit', () => {
  handleLockManager.unlockAll()
})

4. 这种方案的优缺点（必读）

优点：

  1. 绝对防御：这比 icacls 权限更狠。只要你的 IDE 运行着，外部用户在资源管理器里右键删除、重命名、或者用 Notepad 打开修改，Windows 都会直接弹窗“文件已在另一个程序中打开”，完全无法操作。
  2. 即时生效：不需要等待，调用即锁定。
  3. 崩溃安全：如果你的 Electron App 崩溃了（进程彻底结束），操作系统会自动回收所有句柄，锁会自动解开。不会像 icacls 那样留下永久的权限烂摊子。

缺点与挑战：

  1. 文件夹锁定的局限：
    • 锁定一个文件夹的句柄，只能防止该文件夹本身被重命名或删除。
    • 它不能阻止外部程序修改文件夹里面的文件。
    • 解决方案：你必须像上面代码那样，递归遍历所有文件并对每一个文件都打开一个句柄。
  2. 句柄数量限制：
    • 如果工程有 10 万个文件，打开 10 万个句柄可能会消耗大量内存或达到系统限制。
    • 建议策略：只锁定当前显示的、重要的文件，或者锁定根目录和一二级目录，配合 chokidar 监听深层目录。或者只在“独占模式”下才递归锁。
  3. 副作用：
    • Git 无法使用：你在 IDE 锁着文件的时候，外部的 git pull、git checkout 会全部失败。
    • 编译无法使用：如果你在外部运行 npm run build，编译器会因为无法读取/写入文件而报错。

总结

如果你的需求是**“除了我的 IDE，谁也别想动这些文件，包括用户自己”，那么句柄锁定 (Handle Locking)** 是最正确的技术路线。

使用 koffi 调用 CreateFileW 并设置 dwShareMode = 0 是实现这一目标的终极武器。

]]> <p>这是一个非常硬核的系统级需求。你想要的是 <strong>强制性锁定（Mandatory Locking）</strong>。</p> <p>在 Node.js&#x2F;Electron 的标准 <code>fs</code> 模块中，<code>fs.open</code> 打开的文件默认通常是允许“共享读写”的，这意味着虽然你打开了文件，外部程序（如记事本）可能仍然能读取甚至修改它（取决于 OS 及其共享标志）。</p> <p>要实现“只能在你的 IDE 操作，外部完全无法重命名、删除、修改”，你需要绕过 Node.js 的 <code>fs</code>，直接调用操作系统的原生 API（Windows API）。</p> 使用trae开发 http://blog.ypintao.com/2025/12/28/%E5%89%8D%E7%AB%AF/AI/%E4%BD%BF%E7%94%A8trae%E5%BC%80%E5%8F%91/ 2025-12-28T05:45:05.289Z 2025-12-28T05:46:52.549Z 定义开发内容

vibe codeing

规则驱动编程

https://www.bilibili.com/video/BV1mTHHzCEaU

]]> <h2 id="定义开发内容"><a href="#定义开发内容" class="headerlink" title="定义开发内容"></a>定义开发内容</h2> 一些常用的工具方法 http://blog.ypintao.com/2025/12/28/%E5%89%8D%E7%AB%AF/electron/%E5%B7%A5%E5%85%B7%E6%96%B9%E6%B3%95/ 2025-12-28T05:43:06.589Z 2025-12-28T05:44:17.499Z 搜集一些常用的工具方法

完美的 Windows 文件名校验

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
export const isStrictWindowsFileName = (name: string): string | true => {
  // 1. 检查非法字符
  if (/[\\/:*?"<>|]/.test(name)) {
    return '名称不能包含 \\ / : * ? " < > |';
  }

  // 2. 检查控制字符 (0-31)
  // eslint-disable-next-line no-control-regex
  if (/[\x00-\x1f]/.test(name)) {
    return '名称不能包含控制字符';
  }

  // 3. 检查保留字 (CON, PRN, AUX, NUL, COM1-9, LPT1-9)
  const reserved = /^(con|prn|aux|nul|com\d|lpt\d)$/i;
  if (reserved.test(name)) {
    return '此名称是系统保留字，不允许使用';
  }

  // 4. 检查结尾的点或空格
  if (/[. ]$/.test(name)) {
    return '名称不能以空格或点结尾';
  }

  return true; // 通过
};
]]> <p>搜集一些常用的工具方法</p> 兼容一键切换是否锁定文件夹 http://blog.ypintao.com/2025/12/21/%E5%89%8D%E7%AB%AF/electron/%E5%85%BC%E5%AE%B9%E4%B8%80%E9%94%AE%E5%88%87%E6%8D%A2%E6%98%AF%E5%90%A6%E9%94%81%E5%AE%9A%E6%96%87%E4%BB%B6%E5%A4%B9/ 2025-12-21T13:12:20.870Z 2025-12-21T13:28:15.803Z 之前介绍了两种锁定文件的形式，

1、句柄占用
2、icacls 权限管理
最后我选择了icacls权限管理，因为它更加灵活，可以针对文件夹和文件分别进行权限控制。

问题，icacls管理 是可行的，但是我担心后面又不想要权限管理了（这个取决于需求）
研究后发现改动点其实主要在文件和文件夹的修改 保存 删除 重命名 的方式不一样。
icacls 都是先解锁 然后操作 然后上锁
正常模式就是没有解锁上锁的过程
目前就是要兼容这两种 一键切换。

解决方案

创建了一个文件管理 src\main\ipc\file-service.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
// src/main/file-service.ts
import fs from 'fs-extra'
import path from 'path'
import { securityManager } from './security-manager' // 复用上一条回答中的 SecurityManager

export class FileService {
  // 当前是否处于锁定模式
  private isLockedMode = false
  // 当前打开的工程根目录
  private currentRootPath = ''

  /**
   * 打开工程
   */
  async openProject(dirPath: string) {
    this.currentRootPath = dirPath
    
    // 默认打开时为普通模式，或者你可以设计为默认锁定
    // 这里演示：打开时不锁，由用户手动切换，或者保持上次状态
    if (this.isLockedMode) {
      await securityManager.lockProject(dirPath)
    }
    return true
  }

  /**
   * 关闭工程
   */
  async closeProject() {
    if (this.isLockedMode) {
      await securityManager.unlockProject()
    }
    this.currentRootPath = ''
    this.isLockedMode = false
  }

  /**
   * ✨ 核心功能：切换模式
   */
  async toggleLockMode(locked: boolean) {
    if (!this.currentRootPath) throw new Error('未打开工程')

    if (locked) {
      // 切换到锁定模式
      await securityManager.lockProject(this.currentRootPath)
      this.isLockedMode = true
      console.log('🔄 模式切换: [独占锁定]')
    } else {
      // 切换到普通模式
      await securityManager.unlockProject()
      this.isLockedMode = false
      console.log('🔄 模式切换: [普通模式]')
    }
    return this.isLockedMode
  }

  /**
   * 获取当前模式
   */
  getMode() {
    return this.isLockedMode
  }

  // ==========================================
  //  统一 CRUD 操作 (自动判断模式)
  // ==========================================

  async writeFile(filePath: string, content: string) {
    if (this.isLockedMode) {
      // 🔒 锁定模式：走特权通道 (Unlock -> Write -> Lock)
      return await securityManager.privilegedWrite(filePath, content)
    } else {
      // 🔓 普通模式：走原生 Node.js API
      return await fs.writeFile(filePath, content, 'utf-8')
    }
  }

//   async createFile(targetPath: string, type: 'file' | 'directory') {
//     if (this.isLockedMode) {
//       return await securityManager.privilegedCreate(targetPath, type)
//     } else {
//       if (type === 'directory') {
//         return await fs.ensureDir(targetPath)
//       } else {
//         return await fs.ensureFile(targetPath)
//       }
//     }
//   }
  

  async deleteEntry(targetPath: string) {
    if (this.isLockedMode) {
      return await securityManager.privilegedDelete(targetPath)
    } else {
      // 普通模式直接删 (建议移入回收站，这里演示直接删)
      return await fs.remove(targetPath)
    }
  }
  
  async renameEntry(oldPath: string, newName: string) {
    const dir = path.dirname(oldPath)
    const newPath = path.join(dir, newName)
    
    if (this.isLockedMode) {
        // SecurityManager 需要补充一个 privilegedRename 方法
        // 逻辑同 delete/create：解锁父目录 -> rename -> 加锁
        // 这里暂时先用 unlock -> rename -> lock 模拟
        await securityManager.privilegedRename(oldPath, newPath) 
    } else {
        await fs.rename(oldPath, newPath)
    }
    return newPath
  }
    /**
   * 📖 读取文件内容
   * (读取通常不受写锁影响，直接读即可)
   */
  async readFile(filePath: string) {
    // 统一读取，如果文件不存在会抛错
    return await fs.readFile(filePath, 'utf-8')
  }
  /**
   * ✨ 创建文件或文件夹 (自动判断模式)
   */
  async createEntry(targetPath: string, type: 'file' | 'directory') {
    if (this.isLockedMode) {
      // 🔒 锁定模式：走特权创建流程
      console.log(`[FileService] 特权创建: ${targetPath}`)
      await securityManager.privilegedCreate(targetPath, type)
    } else {
      // 🔓 普通模式：直接创建
      console.log(`[FileService] 普通创建: ${targetPath}`)
      if (type === 'directory') {
        await fs.ensureDir(targetPath)
      } else {
        await fs.ensureFile(targetPath)
      }
    }
    return true
  }
}

export const fileService = new FileService()

然后创建一个 src\main\ipc\project-ipc.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
// src/main/ipc/project-ipc.ts
// src/main/ipc/project-ipc.ts
import { ipcMain, dialog } from 'electron'
import { fileService } from './file-service'
import fs from 'fs-extra' // 建议安装 fs-extra: npm install fs-extra @types/fs-extra
import path from 'path'
// 定义文件节点类型
export interface FileNode {
    name: string
    path: string
    type: 'file' | 'directory'
    children?: FileNode[]
}

// 忽略列表
const IGNORE_LIST = ['.git', 'node_modules', '.DS_Store']

// 递归构建文件树
const buildFileTree = (dirPath: string): FileNode[] => {
    const stats = fs.statSync(dirPath)
    if (!stats.isDirectory()) return []

    const children = fs.readdirSync(dirPath)
        .filter(name => !IGNORE_LIST.includes(name))
        .map(name => {
            const fullPath = path.join(dirPath, name)
            const fileStats = fs.statSync(fullPath)

            const node: FileNode = {
                name,
                path: fullPath,
                type: fileStats.isDirectory() ? 'directory' : 'file'
            }

            if (node.type === 'directory') {
                node.children = buildFileTree(fullPath)
            }
            return node
        })

    // 排序：文件夹在前，文件在后
    return children.sort((a, b) => {
        if (a.type === b.type) return a.name.localeCompare(b.name)
        return a.type === 'directory' ? -1 : 1
    })
}
export function setupProjectIPC() {
// 2. 读取整个工程结构
    ipcMain.handle('fs-read-project-tree', async (_, rootPath: string) => {
        try {
            if (!fs.existsSync(rootPath)) throw new Error('Path not found')

            // 读取或创建工程配置文件
            // const configPath = path.join(rootPath, 'project.config.json')
            let projectInfo = { name: path.basename(rootPath), version: '1.0.0' }

            // if (fs.existsSync(configPath)) {
            //     projectInfo = await fs.readJson(configPath)
            // } else {
            //     // await fs.writeJson(configPath, projectInfo, { spaces: 2 })
            //     await securityManager.privilegedWrite(configPath,JSON.stringify(projectInfo))
            // }
            // console.log('Project Info:', projectInfo,rootPath)

            const tree = buildFileTree(rootPath)
            return { tree, projectInfo }
        } catch (error) {
            console.error(error)
            throw error
        }
    })
  // 1. 打开并选择工程
  ipcMain.handle('prj-open', async () => {
    const { canceled, filePaths } = await dialog.showOpenDialog({
      properties: ['openDirectory']
    })
    if (canceled || !filePaths.length) return null
    
    const path = filePaths[0]
    await fileService.openProject(path)
    return path
  })

  // 2. 关闭
  ipcMain.handle('prj-close', () => fileService.closeProject())

  // 3. 切换锁定状态
  ipcMain.handle('prj-toggle-lock', (_, locked: boolean) => fileService.toggleLockMode(locked))

  // 4. 统一 CRUD
  ipcMain.handle('prj-write', (_, { path, content }) => fileService.writeFile(path, content))
//   ipcMain.handle('prj-create', (_, { path, type }) => fileService.createFile(path, type))
  ipcMain.handle('prj-delete', (_, path) => fileService.deleteEntry(path))
    // ✅ 新增：读取文件
  ipcMain.handle('prj-read', (_, path) => fileService.readFile(path))

  // ✅ 新增：创建 (注意参数解构)
  ipcMain.handle('prj-create', (_, { path, type }) => fileService.createEntry(path, type))
    // ✅ 新增：重命名
  // 参数接收一个对象 { oldPath, newName }
  ipcMain.handle('prj-rename', (_, { oldPath, newName }) => 
    fileService.renameEntry(oldPath, newName)
  )
}

创建加密的管理方法 src\main\ipc\security-manager.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
// src/main/ipc/security-manager.ts
// src/main/security-manager.ts
import { exec } from 'child_process'
import { promisify } from 'util'
import path from 'path'
import fs from 'fs-extra'
import chokidar from 'chokidar'

const execAsync = promisify(exec)
// 🚫 黑名单列表
const IGNORE_DIRS = ['.git', 'node_modules', 'dist', 'build', '.vscode', '.idea']

export class SecurityManager {
  private rootPath = ''
  private watcher: chokidar.FSWatcher | null = null
  private isWindows = process.platform === 'win32'

  /**
   * 🔒 开启“完全独占模式”
   */
  async lockProject(dirPath: string) {
    this.rootPath = dirPath
    console.log(`🛡️ 正在开启独占模式 (智能排除): ${dirPath}`)

    // 1. 系统级权限锁定 (递归)
    // await this.applySystemLock(dirPath, true)
        // 1. 智能遍历并锁定
    await this.applySmartLock(dirPath, true)

    // 2. 启动哨兵 (防止漏网之鱼)
    this.startSentry(dirPath)
  }

  /**
   * 🔓 关闭独占模式 (恢复权限)
   */
  async unlockProject() {
    if (!this.rootPath) return

    console.log(`🔓 正在解除独占模式...`)
    
    // 1. 关闭哨兵
    if (this.watcher) {
      await this.watcher.close()
      this.watcher = null
    }

    // 2. 恢复系统权限
    await this.applySystemLock(this.rootPath, false, true) // true 表示强制递归
    this.rootPath = ''
  }

  /**
   * ✏️ 特权写入文件
   */
  async privilegedWrite(filePath: string, content: string) {
    // 1. 临时解锁单个文件
    await this.unlockSingleFile(filePath)

    try {
      // 2. 写入
      await fs.writeFile(filePath, content, 'utf-8')
    } finally {
      // 3. 立即回锁
      await this.lockSingleFile(filePath)
    }
  }

  /**
   * 📄 特权创建文件/文件夹
   */
  async privilegedCreate(targetPath: string, type: 'file' | 'directory') {
    const parentDir = path.dirname(targetPath)
    
    // 1. 解锁父目录 (才有权限创建子项)
    await this.unlockSingleFile(parentDir)

    try {
      if (type === 'directory') {
        await fs.ensureDir(targetPath)
      } else {
        await fs.ensureFile(targetPath)
      }
    } finally {
      // 3. 回锁父目录 & 锁定新文件
      await this.lockSingleFile(parentDir)
      await this.lockSingleFile(targetPath)
    }
  }

  /**
   * 🗑️ 特权删除
   */
  async privilegedDelete(targetPath: string) {
    const parentDir = path.dirname(targetPath)
    
    // 1. 解锁父目录 (才有权限删除子项) 和 目标本身
    await this.unlockSingleFile(parentDir)
    await this.unlockSingleFile(targetPath) // 防止自身只读无法删除

    try {
      await fs.remove(targetPath)
    } finally {
      // 3. 回锁父目录
      await this.lockSingleFile(parentDir)
    }
  }

   /**
   * ✨ 特权重命名 (或移动)
   * 逻辑：解锁旧父目录 & 文件 -> 重命名 -> 锁旧父目录 & 锁新文件
   */
  async privilegedRename(oldPath: string, newPath: string) {
    const oldParent = path.dirname(oldPath)
    const newParent = path.dirname(newPath)
    
    // 判断是否是移动到另一个文件夹 (通常重命名是在同一个文件夹，但也支持移动)
    const isMove = oldParent !== newParent

    // 1. 解锁阶段
    // 解锁旧父目录 (允许从中移除条目)
    await this.unlockSingleFile(oldParent)
    
    // 解锁文件本身 (允许修改其元数据/路径，Windows 上 Deny Delete 也会阻止重命名)
    await this.unlockSingleFile(oldPath)

    // 如果是移动到不同目录，还需要解锁目标父目录
    if (isMove) {
      await this.unlockSingleFile(newParent)
    }

    try {
      // 2. 执行重命名
      await fs.rename(oldPath, newPath)
    } finally {
      // 3. 回锁阶段 (无论成功失败，都要尝试恢复锁)
      
      // 恢复旧父目录
      await this.lockSingleFile(oldParent)

      // 如果是移动，恢复新父目录
      if (isMove) {
        await this.lockSingleFile(newParent)
      }

      // ⚠️ 关键：新路径下的文件必须被锁住 (因为重命名后，原有的路径失效，新路径可能失去了锁)
      // (虽然在同一个盘符下移动通常保留 ACL，但为了保险起见，显式锁一次)
      if (await fs.pathExists(newPath)) {
        await this.lockSingleFile(newPath)
      }
    }
  }

  // =========================================
  //  底层系统命令实现
  // =========================================

   // =========================================
  //  核心优化：智能锁定逻辑
  // =========================================

  private async applySmartLock(basePath: string, isLock: boolean) {
    // 读取根目录下的第一级内容
    const items = await fs.readdir(basePath, { withFileTypes: true })

    for (const item of items) {
      const fullPath = path.join(basePath, item.name)

      // 1. 检查是否在黑名单中
      if (IGNORE_DIRS.includes(item.name)) {
        console.log(`⏩ 跳过忽略目录: ${item.name}`)
        continue
      }

      // 2. 执行锁定
      if (item.isDirectory()) {
        // 如果是普通文件夹 (如 src)，执行递归锁定 (/T)
        // 这样 src 下面有 1000 个文件也会被一次性锁住，效率很高
        await this.applySystemLock(fullPath, isLock, true)
      } else {
        // 如果是文件，直接锁
        await this.lockSingleFile(fullPath)
      }
    }
    
    // 最后，别忘了锁根目录本身（防止根目录被重命名），但不递归
    // 注意：这里我们只锁根目录的“属性”，不加 /T
    await this.lockSingleFile(basePath) 
  }
   // 修改底层的命令执行方法，增加 recursive 参数
  private async applySystemLock(targetPath: string, isLock: boolean, recursive: boolean) {
    if (this.isWindows) {
      // Windows: 使用 icacls 拒绝写入和删除
      // /deny Everyone:(OI)(CI)(DE,DC,WD,AD,WEA,WA)
      // OI: Object Inherit (对象继承)
      // CI: Container Inherit (容器继承)
      // DE: Delete, DC: Delete Child
      // WD: Write Data, AD: Append Data
       const perm = isLock 
        ? '/deny Everyone:(OI)(CI)(DE,DC,WD,AD,WEA,WA)' 
        : '/remove:d Everyone'
        // 关键：只有 recursive 为 true 时才加 /T
      const recursiveFlag = recursive ? '/T' : ''
       const cmd = `icacls "${targetPath}" ${perm} ${recursiveFlag} /C /Q`
      try { await execAsync(cmd) } catch (e) {}
    //   const cmd = isLock
    //     ? `icacls "${targetPath}" /deny Everyone:(OI)(CI)(DE,DC,WD,AD,WEA,WA) /T /C /Q`
    //     : `icacls "${targetPath}" /remove:d Everyone /T /C /Q`
      
    //   try { await execAsync(cmd) } catch (e) { /* 忽略部分权限错误 */ }

    } else {
      // Mac/Linux: 移除写权限 (chmod -R a-w)
      // 注意：这在 Linux 上不能完全防止拥有者删除，但能防止修改
         // Mac/Linux
      const perm = isLock ? 'a-w' : 'u+w'
      const recursiveFlag = recursive ? '-R' : ''
      const cmd = `chmod ${recursiveFlag} ${perm} "${targetPath}"`
      try { await execAsync(cmd) } catch (e) {}
    }
  }

  private async lockSingleFile(targetPath: string) {
    if (this.isWindows) {
      // 锁定单个文件 (不带 /T 递归)
      await execAsync(`icacls "${targetPath}" /deny Everyone:(DE,DC,WD,AD,WEA,WA) /C /Q`)
    } else {
      await execAsync(`chmod a-w "${targetPath}"`)
    }
  }

  private async unlockSingleFile(targetPath: string) {
    if (this.isWindows) {
      await execAsync(`icacls "${targetPath}" /remove:d Everyone /C /Q`)
    } else {
      await execAsync(`chmod u+w "${targetPath}"`)
    }
  }

  // =========================================
  //  哨兵模式：防止外部强行创建文件
  // =========================================
  private startSentry(dirPath: string) {
    this.watcher = chokidar.watch(dirPath, {
      ignored: /(^|[\/\\])\../,
      ignoreInitial: true, // 不处理已存在的文件
      persistent: true
    })

    // 如果检测到有新文件/文件夹被外部创建（此时我们没有调用 privilegedCreate）
    // 说明用户可能通过更高权限强行塞了文件进来
    // 策略：立即锁定它，或者根据需求直接删除它
    this.watcher.on('add', async (filePath) => {
        console.warn(`🚨 检测到外部新增文件: ${filePath}，正在强制锁定...`)
        await this.lockSingleFile(filePath)
    })
    
    this.watcher.on('addDir', async (p) => {
        await this.lockSingleFile(p)
    })
  }
}

export const securityManager = new SecurityManager()

在 src\main\index.ts 中引入 SecurityManager 并初始化 projectIPC

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
// src/main/index.ts
import { securityManager } from './ipc/security-manager'
import {setupProjectIPC  } from './ipc/project-ipc'

  app.whenReady().then(() => {
  // Set app user model id for windows
  electronApp.setAppUserModelId('com.electron')

  // Default open or close DevTools by F12 in development
  // and ignore CommandOrControl + R in production.
  // see https://github.com/alex8088/electron-toolkit/tree/master/packages/utils
  app.on('browser-window-created', (_, window) => {
    optimizer.watchWindowShortcuts(window)
  })



  // setupWindowIPC()
  // setupLockIPC()
  // setupSecurityIPC()
  setupProjectIPC()
  createWindow()

  app.on('activate', function () {
    // On macOS it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('will-quit', async () => {
  // 确保退出时解锁，否则你的文件夹会被锁死，需要管理员权限修复
  await securityManager.unlockProject()
})

然后是 preload.ts 文件，用于在渲染进程中注入一些全局变量

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
// src/preload/index.ts
import { contextBridge, ipcRenderer } from 'electron'
import { electronAPI } from '@electron-toolkit/preload'

// Custom APIs for renderer
// 自定义 API
const api = {
  // 调用主进程检测坐标
  checkCursorOutside: () => ipcRenderer.invoke('check-cursor-outside-window'),
  activateCurrentWindow: () => ipcRenderer.invoke('activate-current-window'),


}


const projectAPI = {
  open: () => ipcRenderer.invoke('prj-open'),
  close: () => ipcRenderer.invoke('prj-close'),

  // 切换模式：传 true 开启独占，传 false 关闭
  toggleLock: (locked: boolean) => ipcRenderer.invoke('prj-toggle-lock', locked),

  // 统一的操作接口
  writeFile: (path: string, content: string) => ipcRenderer.invoke('prj-write', { path, content }),
  create: (path: string, type: 'file' | 'directory') => ipcRenderer.invoke('prj-create', { path, type }),
  delete: (path: string) => ipcRenderer.invoke('prj-delete', path),

  readDir: (path: string) => ipcRenderer.invoke('fs-read-project-tree', path),
  // ✅ 新增
  rename: (oldPath: string, newName: string) =>
    ipcRenderer.invoke('prj-rename', { oldPath, newName }),
  readFile: (path: string) => ipcRenderer.invoke('prj-read', path),
}

// Use `contextBridge` APIs to expose Electron APIs to
// renderer only if context isolation is enabled, otherwise
// just add to the DOM global.
if (process.contextIsolated) {
  try {
    contextBridge.exposeInMainWorld('electron', electronAPI)
    contextBridge.exposeInMainWorld('api', api)
    contextBridge.exposeInMainWorld('lockAPI', lockAPI)
    contextBridge.exposeInMainWorld('fsAPI', fsAPI)
    contextBridge.exposeInMainWorld('securityAPI', securityAPI)
    contextBridge.exposeInMainWorld('projectAPI', projectAPI)

  } catch (error) {
    console.error(error)
  }
} else {
  // @ts-ignore (define in dts)
  window.electron = electronAPI
  // @ts-ignore (define in dts)
  window.api = api
  // @ts-ignore
  window.projectAPI = projectAPI

}


对应的ts文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// src/preload/index.d.ts
import { ElectronAPI } from '@electron-toolkit/preload'

interface ProjectAPI {
  open: () => Promise<string | null>;
  close: () => Promise<void>;
  toggleLock: (locked: boolean) => Promise<boolean>;
  writeFile: (path: string, content: string) => Promise<void>;
  create: (path: string, type: 'file' | 'directory') => Promise<void>;
  delete: (path: string) => Promise<void>;
  readDir: (path: string) => Promise<{ tree: FileNode[], projectInfo: string }>;
  rename: (oldPath: string, newName: string) => Promise<string>;
  readFile: (path: string) => Promise<string>;
}
declare global {
  interface Window {
    electron: ElectronAPI
    api: {
      checkCursorOutside: () => Promise<boolean>
      activateCurrentWindow: () => Promise<boolean>
    },

    projectAPI:ProjectAPI

  }
}

新建LockEditor.vue文件，用于编辑锁定文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
// src/renderer/components/LockEditor.vue
<template>
  <div class="security-ide">
    <!-- 1. 顶部状态栏 -->
    <header class="header">
      <div class="controls">
        <button 
          class="btn primary" 
          @click="handleOpenProject" 
          :disabled="isLocked"
        >
          🛡️ 打开并锁定工程
        </button>
        <button 
          class="btn danger" 
          @click="handleUnlockProject" 
          :disabled="!isLocked"
        >
          🔓 解锁并关闭
        </button>
      </div>
      <div class="status">
        状态: 
        <span :class="['badge', isLocked ? 'locked' : 'unlocked']">
          {{ isLocked ? 'ACL 权限独占中' : '普通模式' }}
        </span>
        <span class="path" v-if="projectPath">{{ projectPath }}</span>
      </div>
    </header>

    <div>
       <!-- ✨ 一键切换开关 -->
        <label class="switch-container">
          <input 
            type="checkbox" 
            v-model="isLocked_back" 
            @change="handleToggleLock"
          />
          <span class="slider"></span>
          <span class="label-text">{{ isLocked_back ? '🛡️ 独占模式' : '🔓 普通模式' }}</span>
        </label>
    </div>

    <!-- 2. 主体内容 -->
    <main class="workspace">
      <!-- 左侧文件列表 -->
      <aside class="sidebar" @contextmenu.prevent="onSidebarRightClick">
        <div class="sidebar-title">资源管理器</div>
        
        <div v-if="!files.length" class="empty-list">
          {{ isLocked ? '目录为空' : '未打开工程' }}
        </div>

        <ul class="file-list">
          <li 
            v-for="file in files" 
            :key="file.path"
            class="file-item"
            :class="{ active: currentFile?.path === file.path }"
            @click="selectFile(file)"
            @contextmenu.stop="onFileRightClick($event, file)"
          >
            <span class="icon">{{ file.type=== 'directory' ? '📁' : '📄' }}</span>
            <span class="name">{{ file.name }}</span>
          </li>
        </ul>
      </aside>

      <!-- 右侧编辑器 -->
      <section class="editor">
        <div v-if="!currentFile" class="welcome">
          <h3>验证说明</h3>
          <ol>
            <li>点击左上角打开一个测试文件夹。</li>
            <li><strong>验证锁定</strong>：打开系统资源管理器，尝试删除该文件夹下的文件，系统应提示“需要权限”。</li>
            <li><strong>验证特权</strong>：在下方编辑器修改内容，按 Ctrl+S 保存，应成功。</li>
            <li><strong>验证管理</strong>：在左侧列表右键，尝试新建或删除，应成功。</li>
          </ol>
        </div>
        <div v-else class="code-wrapper">
          <div class="tab-header">
            {{ currentFile.name }}
            <span v-if="isDirty" class="dot">●</span>
          </div>
          <textarea 
            class="code-area" 
            v-model="fileContent" 
            @input="isDirty = true"
            @keydown.ctrl.s.prevent="saveFile"
            @keydown.meta.s.prevent="saveFile"
          ></textarea>
        </div>
      </section>
    </main>

    <!-- 3. 底部日志 -->
    <footer class="logger">
      <div class="log-line" v-for="(log, idx) in logs" :key="idx">
        <span class="time">[{{ log.time }}]</span> {{ log.msg }}
      </div>
    </footer>

    <!-- 4. 自定义右键菜单 -->
    <div 
      v-if="contextMenu.visible" 
      class="ctx-menu" 
      :style="{ top: contextMenu.y + 'px', left: contextMenu.x + 'px' }"
    >
      <div class="menu-item disabled" v-if="contextMenu.target">
        操作: {{ contextMenu.target.name }}
      </div>
      <div class="divider"></div>
      <div class="menu-item" @click="handleCreate('file')">✨ 特权新建文件</div>
      <div class="menu-item" @click="handleCreate('directory')">📁 特权新建文件夹</div>
      <div class="menu-item danger" @click="handleDelete" v-if="contextMenu.target">
        🗑️ 特权删除
      </div>
    </div>

    <!-- ✅ 新增：自定义输入弹窗 -->
    <div v-if="inputBox.visible" class="modal-overlay">
      <div class="modal-content">
        <div class="modal-title">{{ inputBox.title }}</div>
        <input 
          id="custom-input"
          v-model="inputBox.value" 
          @keydown.enter="confirmInput"
          @keydown.esc="cancelInput"
          class="modal-input" 
          type="text" 
          autocomplete="off"
        />
        <div class="modal-actions">
          <button class="btn" @click="cancelInput">取消</button>
          <button class="btn primary" @click="confirmInput">确定</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onBeforeUnmount, onMounted } from 'vue'

// --- 类型定义 ---
interface FileNode {
  name: string
  path: string
  type: string
  children?: FileNode[]
}

interface Log {
  time: string
  msg: string
}

// --- 状态数据 ---
const isLocked = ref(false)
const isLocked_back = ref(false)
const projectPath = ref('')
const files = ref<FileNode[]>([])
const currentFile = ref<FileNode | null>(null)
const fileContent = ref('')
const isDirty = ref(false)
const logs = ref<Log[]>([])

// 右键菜单状态
const contextMenu = reactive({
  visible: false,
  x: 0,
  y: 0,
  target: null as FileNode | null // null 代表在空白处点击
})


// --- 新增：Input 弹窗的状态 ---
const inputBox = reactive({
  visible: false,
  title: '',
  value: '',
  resolve: null as ((val: string | null) => void) | null
})

// --- 新增：封装一个 Promise 化的输入框函数 ---
const showInputBox = (title: string, defaultValue = '') => {
  inputBox.title = title
  inputBox.value = defaultValue
  inputBox.visible = true
  
  // 自动聚焦输入框 (使用 nextTick)
  setTimeout(() => {
    document.getElementById('custom-input')?.focus()
  }, 100)

  return new Promise<string | null>((resolve) => {
    inputBox.resolve = resolve
  })
}

// --- 新增：弹窗确认与取消 ---
const confirmInput = () => {
  if (inputBox.resolve) inputBox.resolve(inputBox.value)
  inputBox.visible = false
}

const cancelInput = () => {
  if (inputBox.resolve) inputBox.resolve(null)
  inputBox.visible = false
}

// --- 日志工具 ---
const addLog = (msg: string) => {
  const time = new Date().toLocaleTimeString()
  logs.value.unshift({ time, msg })
}


// --- 1. 工程操作 ---

const handleOpenProject = async () => {
  try {
    addLog('正在请求系统权限锁定...')
    // const path = await window.securityAPI.openProject()
      const path = await window.projectAPI.open()
    if (path) {
      projectPath.value = path
      isLocked.value = true
      addLog(`✅ 工程已锁定: ${path}`)
      addLog('🔒 此时外部应用无法写入或删除此目录内容')
      await refreshFiles()
    } else {
      addLog('用户取消了操作')
    }
  } catch (e: any) {
    addLog(`❌ 锁定失败: ${e.message}`)
  }
}

// 2. ✨ 核心：切换模式
const handleToggleLock = async () => {
  try {
    console.log('正在切换模式...', isLocked_back.value)
    // 直接调用统一接口，后端负责上锁或解锁
    await window.projectAPI.toggleLock(isLocked_back.value)
    alert(isLocked_back.value ? '已开启独占锁定！外部无法修改文件。' : '已切换回普通模式。')
  } catch (e) {
    console.error(e)
    // 如果切换失败（比如权限不够），回滚开关状态
    isLocked_back.value = !isLocked_back.value
    alert('切换失败，请检查日志')
  }
}

const handleUnlockProject = async () => {
  try {
    // await window.securityAPI.closeProject()
    await window.projectAPI.close()
    isLocked.value = false
    projectPath.value = ''
    files.value = []
    currentFile.value = null
    addLog('🔓 工程已解锁，恢复系统默认权限')
  } catch (e: any) {
    addLog(`❌ 解锁失败: ${e.message}`)
  }
}

const refreshFiles = async () => {
  if (!projectPath.value) return
  try {
    // 假设后端 ipc 实现了 sec-read-dir
    // 如果没有实现，请在后端补充 fs.readdir 逻辑
    const {tree} = await window.projectAPI.readDir(projectPath.value)
    files.value = tree
    console.log('Files:', files.value)
  } catch (e) {
    addLog('读取文件列表失败 (请确认后端实现了 readDir)')
  }
}

// --- 2. 文件操作 ---

const selectFile = async (file: FileNode) => {
  if (file.type == 'directory') return
  try {
    // 这里为了演示简单，假设你有一个 readFile 的 API
    // 或者我们直接显示一段 Mock 内容，重点验证 Save 功能
    const content = await window.projectAPI.readFile(file.path)
    currentFile.value = file
    // fileContent.value = content
    fileContent.value = `// 这是文件 ${file.name}\n// 它是只读的 (对于外部程序)\n// 试着修改并按 Ctrl+S 保存。\n// ${content}`
    isDirty.value = false
    addLog(`已打开: ${file.name}`)
  } catch (e) {
    addLog('读取文件内容失败')
  }
}

const saveFile = async () => {
  if (!currentFile.value) return
  addLog(`正在通过特权通道保存 ${currentFile.value.name}...`)
  
  try {
    // ✨ 核心验证点：特权写入
    // await window.securityAPI.writeFile(currentFile.value.path, fileContent.value)
      await window.projectAPI.writeFile(currentFile.value.path, fileContent.value)
    isDirty.value = false
    addLog(`✅ 保存成功！(ACL 权限临时提权完成)`)
  } catch (e: any) {
    addLog(`❌ 保存失败: ${e.message}`)
  }
}

// --- 3. 右键菜单与新建/删除 ---

const onSidebarRightClick = (e: MouseEvent) => {
  showMenu(e.clientX, e.clientY, null)
}

const onFileRightClick = (e: MouseEvent, file: FileNode) => {
  showMenu(e.clientX, e.clientY, file)
}

const showMenu = (x: number, y: number, target: FileNode | null) => {
  contextMenu.visible = true
  contextMenu.x = x
  contextMenu.y = y
  contextMenu.target = target
}

const closeMenu = () => { contextMenu.visible = false }

const handleCreate = async (type: 'file' | 'directory') => {
  closeMenu()
  if (!projectPath.value) return

//   const name = prompt(`请输入${type === 'file' ? '文件' : '文件夹'}名称:`)
// ✅ 替换为自定义弹窗:
  const name = await showInputBox(`请输入${type === 'file' ? '文件' : '文件夹'}名称:`)
  if (!name) return

  const targetPath = `${projectPath.value}/${name}` // 简单拼接，实际应用请用 path.join
  
  try {
    addLog(`正在创建: ${name}...`)
    // ✨ 核心验证点：特权创建
    await window.projectAPI.create(targetPath, type)
    addLog(`✅ 创建成功`)
    await refreshFiles()
  } catch (e: any) {
    addLog(`❌ 创建失败: ${e.message}`)
  }
}

const handleDelete = async () => {
  closeMenu()
  const target = contextMenu.target
  if (!target) return

  if (!confirm(`确定要强制删除 ${target.name} 吗？`)) return

  try {
    addLog(`正在删除: ${target.name}...`)
    // ✨ 核心验证点：特权删除
    // await window.securityAPI.delete(target.path)
     // 💥 同样不需要判断模式
    await window.projectAPI.delete(target.path)
    addLog(`✅ 删除成功`)
    if (currentFile.value?.path === target.path) {
      currentFile.value = null
      fileContent.value = ''
    }
    await refreshFiles()
  } catch (e: any) {
    addLog(`❌ 删除失败: ${e.message}`)
  }
}

const handleRename = async (file: any) => {
  const newName = await showInputBox('请输入新名称', file.name)
  if (!newName || newName === file.name) return

  try {
    // ✨ 无论是否锁定，直接调用统一接口
    await window.projectAPI.rename(file.path, newName)
    
    console.log('重命名成功')
    // 刷新文件列表
    await refreshFiles()
  } catch (e) {
    console.error('重命名失败', e)
    alert('重命名失败：权限不足或文件被占用')
  }
}

// 全局点击关闭菜单
onMounted(() => {
  window.addEventListener('click', closeMenu)
})

onBeforeUnmount(() => {
  window.removeEventListener('click', closeMenu)
  // 防止开发时刷新页面导致锁死
  if (isLocked.value) {
    window.projectAPI.close()
  }
})
</script>

<style scoped>
.security-ide {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #1e1e1e;
  color: #ccc;
  font-family: 'Segoe UI', sans-serif;
  user-select: none;
}

/* Header */
.header {
  height: 50px;
  background: #252526;
  border-bottom: 1px solid #111;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
}
.btn {
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-right: 10px;
  font-weight: bold;
  color: white;
  opacity: 0.9;
}
.btn:hover:not(:disabled) { opacity: 1; transform: translateY(-1px); }
.btn:disabled { opacity: 0.3; cursor: not-allowed; }
.primary { background: #0e639c; }
.danger { background: #ab1212; }

.status { font-size: 13px; display: flex; align-items: center; gap: 8px;}
.badge { padding: 2px 6px; border-radius: 3px; font-size: 12px; color: #111; font-weight: bold;}
.badge.locked { background: #4caf50; }
.badge.unlocked { background: #888; }
.path { color: #888; font-family: monospace; }

/* Workspace */
.workspace { flex: 1; display: flex; overflow: hidden; }

.sidebar {
  width: 250px;
  background: #252526;
  border-right: 1px solid #111;
  display: flex;
  flex-direction: column;
}
.sidebar-title {
  padding: 10px 16px; font-size: 11px; font-weight: bold; color: #888; text-transform: uppercase;
}
.empty-list { padding: 20px; text-align: center; color: #555; font-size: 13px; }
.file-list { list-style: none; padding: 0; margin: 0; overflow-y: auto; }
.file-item {
  padding: 4px 16px; cursor: pointer; display: flex; align-items: center; font-size: 13px;
}
.file-item:hover { background: #2a2d2e; }
.file-item.active { background: #37373d; color: white; }
.icon { margin-right: 6px; }

.editor { flex: 1; display: flex; flex-direction: column; background: #1e1e1e; }
.welcome { 
  flex: 1; display: flex; flex-direction: column; 
  justify-content: center; align-items: center; color: #666; 
  padding: 40px; line-height: 1.8;
}
.welcome ol { text-align: left; }
.code-wrapper { display: flex; flex-direction: column; height: 100%; }
.tab-header { 
  background: #2d2d2d; height: 35px; display: flex; align-items: center; 
  padding: 0 16px; font-size: 13px; border-top: 1px solid #007fd4; color: white;
}
.dot { margin-left: 8px; font-size: 20px; line-height: 10px; }
.code-area {
  flex: 1; background: #1e1e1e; color: #d4d4d4; border: none; resize: none;
  padding: 16px; font-family: 'Consolas', monospace; outline: none; font-size: 14px;
}

/* Logger */
.logger {
  height: 120px; background: #111; border-top: 1px solid #333;
  padding: 8px; overflow-y: auto; font-family: monospace; font-size: 12px;
}
.log-line { margin-bottom: 4px; color: #ccc; }
.time { color: #569cd6; margin-right: 8px; }

/* Context Menu */
.ctx-menu {
  position: fixed; background: #252526; border: 1px solid #454545;
  box-shadow: 0 4px 10px rgba(0,0,0,0.5); z-index: 9999;
  min-width: 160px; border-radius: 4px; padding: 4px 0;
}
.menu-item {
  padding: 6px 12px; cursor: pointer; font-size: 13px; color: #ccc;
}
.menu-item:hover:not(.disabled) { background: #094771; color: white; }
.menu-item.disabled { color: #666; cursor: default; border-bottom: 1px solid #333; padding-bottom: 8px; margin-bottom: 4px;}
.menu-item.danger:hover { background: #881111; }
.divider { height: 1px; background: #454545; margin: 4px 0; }


/* ✅ 新增：弹窗样式 */
.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
}

.modal-content {
  background: #252526;
  border: 1px solid #454545;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  width: 300px;
  padding: 16px;
  border-radius: 4px;
}

.modal-title {
  margin-bottom: 12px;
  font-size: 14px;
  color: #ccc;
  font-weight: bold;
}

.modal-input {
  width: 100%;
  background: #3c3c3c;
  border: 1px solid #3c3c3c;
  color: white;
  padding: 6px;
  outline: 1px solid transparent;
  margin-bottom: 16px;
  font-family: inherit;
}

.modal-input:focus {
  outline-color: #0e639c;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
</style>
]]> <h2 id="之前介绍了两种锁定文件的形式，"><a href="#之前介绍了两种锁定文件的形式，" class="headerlink" title="之前介绍了两种锁定文件的形式，"></a>之前介绍了两种锁定文件的形式，</h2><p>1、句柄占用<br>2、icacls 权限管理<br>最后我选择了icacls权限管理，因为它更加灵活，可以针对文件夹和文件分别进行权限控制。</p> <p>问题，icacls管理 是可行的，但是我担心后面又不想要权限管理了（这个取决于需求）<br>研究后发现改动点其实主要在文件和文件夹的修改 保存 删除 重命名 的方式不一样。<br>icacls 都是先解锁 然后操作 然后上锁<br>正常模式就是没有解锁上锁的过程<br>目前就是要兼容这两种 一键切换。</p> Windows (icacls) 这个方案 有文件夹node_modle,.git这种限制吗 http://blog.ypintao.com/2025/12/21/%E5%89%8D%E7%AB%AF/electron/%E4%B8%A4%E7%A7%8D%E7%8B%AC%E5%8D%A0%E5%BC%8F%E6%96%B9%E6%A1%88%E6%AF%94%E8%BE%83/ 2025-12-20T17:37:43.041Z 2025-12-20T17:39:39.543Z 不会崩溃，没有“文件句柄耗尽”的限制，但是有“性能”和“业务逻辑”上的严重副作用。

我们来对比一下两种方案的区别，你就能明白为什么了：

1. 之前的方案 (fs.open / 文件句柄)

  • 原理：程序必须“抓住”每一个文件（占用 1 个句柄）。
  • node_modules：如果有 30,000 个文件，就要抓 30,000 次。
  • 结果：崩溃。因为操作系统限制单个程序只能抓几千个。

2. 现在的方案 (icacls / 权限控制)

  • 原理：程序只是对操作系统下达一个指令：“把这个文件夹及其子文件的属性改为不可写”。
  • node_modules：即使有 30,000 个文件，Electron 也只是发出了一条命令。操作系统负责在底层修改元数据（Metadata）。
  • 结果：不会崩溃。Electron 进程甚至不需要读取这些文件。

但是！虽然不会崩，我强烈建议你【依然要排除】它们

原因如下：

1. 性能问题 (时间成本)

虽然不会崩，但 icacls 递归修改 3 万个文件的权限需要时间。

  • 现象：用户点击“打开工程”，界面可能会卡住 5~10 秒（视磁盘速度而定），直到命令执行完。这在用户体验上是不可接受的。

2. 业务逻辑冲突 (Git 和 NPM 瘫痪)

这是最致命的：

  • 如果锁了 .git：你的 Git 就会报错 permission denied，你无法 commit，无法 checkout，Git 状态全乱。
  • 如果锁了 node_modules：用户想运行 npm install 安装新包时，会直接报错，因为 NPM 无法写入那个文件夹。
  • 如果锁了 dist：Webpack/Vite 无法打包，因为无法清理旧文件。

解决方案：优化 SecurityManager 以跳过特定目录

icacls 命令本身不支持“排除文件夹”的参数（它要么锁单个，要么 /T 递归锁全部）。

所以，我们需要在 Node.js 层面做一个**“智能遍历”**：

  1. 读取根目录下的第一层文件/文件夹。
  2. 如果是 node_modules 或 .git，直接跳过，不执行 icacls。
  3. 如果是其他文件夹（如 src），执行 递归 (/T) 锁定。
  4. 如果是文件（如 package.json），执行 单文件 锁定。

下面是优化后的 src/main/security-manager.ts 代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
// src/main/security-manager.ts

// ... 之前的 import ...

// 🚫 黑名单列表
const IGNORE_DIRS = ['.git', 'node_modules', 'dist', 'build', '.vscode', '.idea']

export class SecurityManager {
  // ...

  async lockProject(dirPath: string) {
    this.rootPath = dirPath
    console.log(`🛡️ 正在开启独占模式 (智能排除): ${dirPath}`)

    // 1. 智能遍历并锁定
    await this.applySmartLock(dirPath, true)

    // 2. 启动哨兵
    this.startSentry(dirPath)
  }

  async unlockProject() {
    if (!this.rootPath) return
    console.log(`🔓 正在解除独占模式...`)
    
    // 关闭哨兵
    if (this.watcher) {
      await this.watcher.close()
      this.watcher = null
    }

    // 解锁时，为了省事且防止漏网之鱼，我们可以直接对根目录进行全量递归解锁
    // (解锁 node_modules 也没坏处，反正本来就该是解锁的)
    await this.applySystemLock(this.rootPath, false, true) // true 表示强制递归
    this.rootPath = ''
  }

  // ... privilegedWrite 等方法保持不变 ...

  // =========================================
  //  核心优化：智能锁定逻辑
  // =========================================

  private async applySmartLock(basePath: string, isLock: boolean) {
    // 读取根目录下的第一级内容
    const items = await fs.readdir(basePath, { withFileTypes: true })

    for (const item of items) {
      const fullPath = path.join(basePath, item.name)

      // 1. 检查是否在黑名单中
      if (IGNORE_DIRS.includes(item.name)) {
        console.log(`⏩ 跳过忽略目录: ${item.name}`)
        continue
      }

      // 2. 执行锁定
      if (item.isDirectory()) {
        // 如果是普通文件夹 (如 src)，执行递归锁定 (/T)
        // 这样 src 下面有 1000 个文件也会被一次性锁住，效率很高
        await this.applySystemLock(fullPath, isLock, true)
      } else {
        // 如果是文件，直接锁
        await this.lockSingleFile(fullPath)
      }
    }
    
    // 最后，别忘了锁根目录本身（防止根目录被重命名），但不递归
    // 注意：这里我们只锁根目录的“属性”，不加 /T
    await this.lockSingleFile(basePath) 
  }

  // 修改底层的命令执行方法，增加 recursive 参数
  private async applySystemLock(targetPath: string, isLock: boolean, recursive: boolean) {
    if (this.isWindows) {
      // Windows
      const perm = isLock 
        ? '/deny Everyone:(OI)(CI)(DE,DC,WD,AD,WEA,WA)' 
        : '/remove:d Everyone'
      
      // 关键：只有 recursive 为 true 时才加 /T
      const recursiveFlag = recursive ? '/T' : ''
      
      const cmd = `icacls "${targetPath}" ${perm} ${recursiveFlag} /C /Q`
      try { await execAsync(cmd) } catch (e) {}

    } else {
      // Mac/Linux
      const perm = isLock ? 'a-w' : 'u+w'
      const recursiveFlag = recursive ? '-R' : ''
      const cmd = `chmod ${recursiveFlag} ${perm} "${targetPath}"`
      try { await execAsync(cmd) } catch (e) {}
    }
  }

  // ... 之前的 lockSingleFile 等 ...
}

总结

  1. 技术上：icacls 方案没有文件数量限制，不会崩溃。
  2. 实际上：为了保证 Git 和 NPM 正常工作，以及打开工程时的速度，必须排除 node_modules 和 .git。
  3. 实现策略：“首层遍历 + 针对性递归”。即遍历根目录，跳过黑名单，对剩下的文件夹（如 src）进行全量递归锁定。这样既快又安全。
]]> <p><strong>不会崩溃，没有“文件句柄耗尽”的限制，但是有“性能”和“业务逻辑”上的严重副作用。</strong></p> <p>我们来对比一下两种方案的区别，你就能明白为什么了：</p> <h3 id="1-之前的方案-fs-open-文件句柄"><a href="#1 独占式文件锁定_icacls http://blog.ypintao.com/2025/12/21/%E5%89%8D%E7%AB%AF/electron/%E7%8B%AC%E5%8D%A0%E5%BC%8F%E5%B7%A5%E5%85%B7%E8%A7%A3%E9%94%81%E6%96%87%E4%BB%B6/ 2025-12-20T17:32:16.024Z 2025-12-20T17:35:07.018Z 这是一个非常必要的工具脚本。因为一旦开发过程中 App 崩溃或者调试中断，文件夹就会保持在“拒绝写入”的状态，连你自己都删不掉它。

这个脚本作为一个独立的 Node.js 运维脚本，不依赖 Electron，直接在终端运行即可救急。

🛠️ 脚本：reset-lock.js

在你的项目根目录下创建一个名为 reset-lock.js 的文件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
/**
 * 紧急解锁脚本
 * 用途：当 Electron 应用崩溃导致文件夹被锁死（拒绝访问）时，
 * 运行此脚本强制恢复文件夹权限。
 * 
 * 用法：
 * 1. node reset-lock.js "D:/Project/MyLockedFolder"
 * 2. 或者直接运行 node reset-lock.js 然后按提示输入路径
 */

const { exec } = require('child_process');
const path = require('path');
const fs = require('fs');
const readline = require('readline');

// 判断操作系统
const isWindows = process.platform === 'win32';

// 创建交互接口
const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout
});

// 执行解锁的核心函数
function unlockDirectory(targetPath) {
  // 1. 处理路径格式
  const absolutePath = path.resolve(targetPath.trim());
  
  if (!fs.existsSync(absolutePath)) {
    console.error(`\n❌ 错误：找不到路径 "${absolutePath}"`);
    process.exit(1);
  }

  console.log(`\n🛡️  正在尝试解锁: ${absolutePath}`);
  console.log(`💻 操作系统: ${isWindows ? 'Windows' : 'macOS/Linux'}`);

  let cmd = '';

  if (isWindows) {
    // Windows 解锁命令
    // /remove:d Everyone: 移除“拒绝 Everyone”的规则
    // /T: 递归子文件夹
    // /C: 即使出错继续执行
    // /Q: 静默模式
    cmd = `icacls "${absolutePath}" /remove:d Everyone /T /C /Q`;
  } else {
    // macOS/Linux 解锁命令
    // u+w: 给当前用户增加写权限
    cmd = `chmod -R u+w "${absolutePath}"`;
  }

  console.log(`⚙️  执行命令: ${cmd}`);

  exec(cmd, (error, stdout, stderr) => {
    if (error) {
      console.error(`\n❌ 解锁失败!`);
      console.error(`原因: ${error.message}`);
      console.error(`提示: 如果文件夹在系统保护目录，请尝试以【管理员身份】运行此脚本。`);
    } else {
      console.log(`\n✅ 解锁成功!`);
      console.log(`📁 你现在应该可以正常删除或修改 "${absolutePath}" 了。`);
    }
    process.exit(0);
  });
}

// 主流程
const args = process.argv.slice(2);

if (args.length > 0) {
  // 如果命令行带了参数：node reset-lock.js ./test
  unlockDirectory(args[0]);
} else {
  // 如果没带参数，询问用户
  rl.question('请输入被锁定的文件夹路径: ', (answer) => {
    if (!answer) {
      console.log('未输入路径，退出。');
      process.exit(0);
    }
    unlockDirectory(answer);
    rl.close();
  });
}

📖 使用方法

方式 1：交互式运行（推荐）

  1. 打开终端（在 VS Code 或 CMD 中）。
  2. 运行命令：
    1
    node reset-lock.js
  3. 脚本会提示你输入路径，把被锁的文件夹拖进终端（或者复制路径粘贴进去），回车即可。

方式 2：命令行参数运行

直接把路径跟在后面：

1
2
3
4
5
# Windows
node reset-lock.js "C:\Users\Admin\Desktop\TestFolder"

# Mac
node reset-lock.js ./TestFolder

💡 为什么需要这个脚本？

你在前面的代码中使用了 icacls ... /deny Everyone。这是一个非常强力的系统级指令。
如果你的 Electron App 在开发时：

  1. 热更新（HMR）导致主进程重启，但没来得及触发 will-quit。
  2. 你手动点了 VS Code 的“停止调试”按钮（这属于强制杀进程，不会触发 will-quit）。
  3. 代码报错导致主进程 Crash。

在这些情况下，unlockProject() 永远不会被执行。那个文件夹就会像“钉子户”一样留在你的磁盘上，删也删不掉，改也改不了。这时只有运行这个脚本才能“解救”它。

]]> <p>这是一个非常必要的工具脚本。因为一旦开发过程中 App 崩溃或者调试中断，文件夹就会保持在“拒绝写入”的状态，连你自己都删不掉它。</p> <p>这个脚本作为一个独立的 <strong>Node.js 运维脚本</strong>，不依赖 Electron，直接在终端运行即可救急。</p> 独占式文件锁定1 http://blog.ypintao.com/2025/12/20/%E5%89%8D%E7%AB%AF/electron/%E7%8B%AC%E5%8D%A0%E5%BC%8F%E6%96%87%E4%BB%B6%E9%94%81%E5%AE%9A_%E6%96%87%E4%BB%B6%E5%8F%A5%E6%9F%84%E5%8D%A0%E7%94%A8/ 2025-12-20T15:36:27.385Z 2025-12-20T17:31:24.400Z 通常被称为**“独占式文件锁定” (Exclusive File Locking)**。
不能完全控制 文件夹里面的文件，新建删除都可以

实现这个功能的难点在于：

  1. 操作系统差异：Windows 的文件锁是强制的（Mandatory），而 Linux/macOS 通常是建议性的（Advisory）。
  2. 句柄限制：操作系统对单个进程能打开的文件句柄数量（File Descriptors）有限制（通常几千个）。如果文件夹里有 node_modules 这种包含数万个文件的目录，直接全锁会导致应用崩溃。
  3. 自身的读写：锁住后，你自己的应用也需要特殊的写入方式（复用句柄），否则也会被拒绝访问。

基于 Electron 环境，我为你设计一套基于 “文件句柄持有 (File Handle Holding)” + “Chokidar 监听” 的完整解决方案。这在 Windows 上效果极佳（完全无法删除/重命名/修改），在 macOS/Linux 上也能阻止大部分操作。

核心原理

  1. 占用 (Lock)：主进程使用 fs.open(path, 'r+') 打开文件并不关闭，持有该文件的 fd (文件描述符)。在 Windows 上，只要句柄没关，资源管理器就无法删除或重命名该文件。
  2. 自身写入 (Write)：当你的 IDE 需要保存文件时，不重新打开文件，而是直接复用内存中持有的 fd 进行 fs.write。
  3. 自身删除/重命名：先 fs.close(fd) 释放锁，执行操作，如果是重命名则再次锁定新路径。

1. 后端核心逻辑 (src/main/lock-manager.ts)

这是整个方案的大脑。建议新建一个类来专门管理锁。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
// src/main/lock-manager.ts
import fs from 'fs-extra'
import path from 'path'
import chokidar from 'chokidar'

export class LockManager {
  // 存储路径到文件描述符(fd)的映射
  private locks = new Map<string, number>()
  private watcher: chokidar.FSWatcher | null = null
  private rootPath: string = ''

  /**
   * 锁定整个文件夹
   */
  async lockDirectory(dirPath: string) {
    // 1. 先清理之前的锁
    await this.unlockAll()
    this.rootPath = dirPath

    console.log(`🔒 开始锁定目录: ${dirPath}`)

    // 2. 启动监听器，防止外部新建文件“逃逸”
    // (如果有人强行塞入新文件，我们立刻锁定它)
    this.watcher = chokidar.watch(dirPath, {
      ignored: /(^|[\/\\])\../, // 忽略隐藏文件
      persistent: true,
      ignoreInitial: false, // 初始扫描也触发 add 事件
      awaitWriteFinish: true // 等待写入完成后再锁
    })

    this.watcher.on('add', (filePath) => this.lockFile(filePath))
    this.watcher.on('addDir', (dirPath) => this.lockFile(dirPath, true))
    
    // 监听解除锁定（比如被外部强制删除了）
    this.watcher.on('unlink', (filePath) => this.releaseLock(filePath))
    this.watcher.on('unlinkDir', (dirPath) => this.releaseLock(dirPath))
  }

  /**
   * 释放所有锁 (通常在关闭项目或退出应用时调用)
   */
  async unlockAll() {
    if (this.watcher) {
      await this.watcher.close()
      this.watcher = null
    }

    for (const [filePath, fd] of this.locks.entries()) {
      try {
        fs.closeSync(fd)
      } catch (e) {
        // 忽略关闭错误的句柄
      }
    }
    this.locks.clear()
    console.log('🔓 已释放所有文件锁')
  }

  /**
   * 核心：锁定单个文件/文件夹
   */
  private lockFile(targetPath: string, isDir = false) {
    if (this.locks.has(targetPath)) return

    try {
      // ⚠️ 关键点：使用 'r+' (读写模式) 打开并不关闭
      // 对于目录，我们在 Windows 上打开句柄可以防止重命名/移动
      // Linux/Mac 对目录 open 的支持有限，通常只支持 'r'
      const flags = isDir ? 'r' : 'r+' 
      
      const fd = fs.openSync(targetPath, flags)
      this.locks.set(targetPath, fd)
      
      // console.log(`Locked: ${path.basename(targetPath)}`)
    } catch (error: any) {
      // 常见错误：EMFILE (句柄耗尽), EPERM (无权限)
      if (error.code === 'EMFILE') {
        console.error('❌ 错误：打开的文件太多，达到了系统上限！建议忽略 node_modules')
      } else {
        console.warn(`无法锁定 ${targetPath}:`, error.message)
      }
    }
  }

  private releaseLock(targetPath: string) {
    const fd = this.locks.get(targetPath)
    if (fd !== undefined) {
      try {
        fs.closeSync(fd)
      } catch (e) {}
      this.locks.delete(targetPath)
    }
  }

  // ==========================================
  //  提供给 IDE 自身的特权操作 API
  // ==========================================

  /**
   * 特权写入：复用 fd 进行写入
   */
  async writeLockedFile(filePath: string, content: string) {
    let fd = this.locks.get(filePath)

    try {
      // 如果还没锁（比如新创建的瞬间），尝试锁一下
      if (fd === undefined) {
        this.lockFile(filePath)
        fd = this.locks.get(filePath)
      }

      if (fd === undefined) throw new Error('File not locked or accessible')

      // Node.js 的 fs.writeFile 支持传入 fd ！！！
      // 但直接传 fd 可能会追加内容，所以我们需要先清空文件内容
      await fs.ftruncate(fd, 0) // 清空文件
      
      // 将内容写入 buffer
      const buffer = Buffer.from(content, 'utf-8')
      
      // 使用 writeSync 或 write 写入
      // position: 0 (从头开始写)
      fs.writeSync(fd, buffer, 0, buffer.length, 0)
      
      console.log(`✅ 特权写入成功: ${filePath}`)
      return true
    } catch (error) {
      console.error('写入失败:', error)
      throw error
    }
  }

  /**
   * 特权重命名
   */
  async renameLockedEntry(oldPath: string, newName: string) {
    const dir = path.dirname(oldPath)
    const newPath = path.join(dir, newName)

    // 1. 必须先释放锁，否则自己也无法重命名 (Windows特性)
    this.releaseLock(oldPath)

    try {
      await fs.rename(oldPath, newPath)
      // 2. 这里的锁会由 Chokidar 的 'add' 事件自动加上，或者手动加
      // this.lockFile(newPath) 
      return newPath
    } catch (error) {
      // 失败了尝试重新锁回去
      this.lockFile(oldPath)
      throw error
    }
  }

  /**
   * 特权删除
   */
  async deleteLockedEntry(targetPath: string) {
    // 1. 释放锁
    this.releaseLock(targetPath)
    
    // 如果是目录，可能需要递归释放子文件锁
    // 简单起见，这里假设外部调用逻辑会处理，或者依赖 Chokidar 的 unlink
    // 为了稳健，我们遍历一下 map 释放所有子路径
    for (const key of this.locks.keys()) {
      if (key.startsWith(targetPath)) {
        this.releaseLock(key)
      }
    }

    try {
      await fs.remove(targetPath)
    } catch (error) {
      // 恢复锁很难，因为可能删了一半
      throw error
    }
  }
  
  /**
   * 特权创建文件
   */
  async createLockedFile(folderPath: string, name: string) {
      const fullPath = path.join(folderPath, name)
      await fs.ensureFile(fullPath)
      // 创建完立刻锁
      this.lockFile(fullPath)
  }
}

// 导出单例
export const lockManager = new LockManager()

2. 注册 IPC 接口 (src/main/ipc/lock-ipc.ts)

将这些特权操作暴露给前端。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
// src/main/ipc/lock-ipc.ts
import { ipcMain } from 'electron'
import { lockManager } from '../lock-manager'

export function setupLockIPC() {
  
  // 1. 打开并锁定工程
  ipcMain.handle('lock-open-project', async (_, dirPath: string) => {
    await lockManager.lockDirectory(dirPath)
    return true
  })

  // 2. 关闭工程（释放锁）
  ipcMain.handle('lock-close-project', async () => {
    await lockManager.unlockAll()
  })

  // 3. 特权写入 (替代 fs.writeFile)
  ipcMain.handle('lock-write-file', async (_, { filePath, content }) => {
    return await lockManager.writeLockedFile(filePath, content)
  })

  // 4. 特权删除
  ipcMain.handle('lock-delete', async (_, filePath: string) => {
    return await lockManager.deleteLockedEntry(filePath)
  })
  
  // 5. 特权重命名
  ipcMain.handle('lock-rename', async (_, { oldPath, newName }) => {
    return await lockManager.renameLockedEntry(oldPath, newName)
  })
}

并在 src/main/index.ts 中调用：

1
2
3
import { setupLockIPC } from './ipc/lock-ipc'
// ...
setupLockIPC()

3. Preload 暴露 (src/preload/index.ts)

1
2
3
4
5
6
7
8
9
const lockAPI = {
  openProject: (path: string) => ipcRenderer.invoke('lock-open-project', path),
  closeProject: () => ipcRenderer.invoke('lock-close-project'),
  writeFile: (path: string, content: string) => ipcRenderer.invoke('lock-write-file', { filePath: path, content }),
  delete: (path: string) => ipcRenderer.invoke('lock-delete', path),
  rename: (oldPath: string, newName: string) => ipcRenderer.invoke('lock-rename', { oldPath, newName })
}

// expose ...

4. 前端使用示例 (Editor.vue)

在前端，你不再使用普通的 fsAPI.saveFile，而是必须使用 lockAPI.writeFile。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<script setup lang="ts">
// 打开项目时
const openProject = async (path) => {
  // 这会触发后端递归锁定
  await window.lockAPI.openProject(path)
  console.log('项目已打开且已独占锁定')
}

// 保存文件时
const saveDocument = async (currentFile, content) => {
  try {
    // 使用特权通道写入
    await window.lockAPI.writeFile(currentFile.path, content)
    console.log('保存成功')
  } catch (e) {
    console.error('保存失败', e)
    alert('无法保存，可能锁失效或权限不足')
  }
}

// 退出应用前
window.onbeforeunload = () => {
  // 最好主动释放，虽然 Electron 进程结束 OS 会自动回收句柄，但主动清理更安全
  window.lockAPI.closeProject()
}
</script>

⚠️ 关键限制与注意事项 (必读)

  1. 文件句柄上限 (EMFILE Error)：

    • 现象：如果用户打开了一个包含 node_modules 的文件夹，里面可能有 30,000+ 个文件。操作系统通常默认限制单进程打开 1024 或 4096 个文件。尝试全锁会直接导致你的应用崩溃或报错。
    • 解决方案：
      • 忽略策略：在 LockManager 的 chokidar 配置和递归逻辑中，必须忽略 node_modules, .git, dist 等构建目录。只锁定核心代码文件。
      • 优雅降级：在 lockFile 方法中捕获 EMFILE 错误，如果句柄满了，停止锁定后续文件，并通知前端“部分文件未锁定”。

  2. Windows vs POSIX：

    • Windows：此方案效果极佳。fs.open 默认会阻止删除和重命名。此时如果你尝试用资源管理器删文件，会提示“文件在 Electron 中已打开”。
    • macOS / Linux：此方案效果有限。Unix 哲学允许删除正在被进程使用的文件（只删除引用，句柄依然有效）。要实现完全禁止修改，通常需要：
      • 使用 fs-ext 原生模块调用 flock(fd, LOCK_EX)（排他锁）。但这增加了编译成本。
      • 或者简单地：在 Unix 上接受“软锁定”，即你的应用能正常跑，但用户如果在终端 rm -rf，你拦不住。

  3. 性能开销：

    • 保持数千个文件句柄打开会消耗内存（虽然不多）。
    • chokidar 监听大量文件会消耗 CPU。

总结

这个方案通过 “不释放句柄 (Leaking FDs intentionally)” 的方式实现了应用层面的独占。对于开发一个需要“独占模式”的 IDE 来说，这是最标准且纯 JS (Node) 能做到的极限。如果需要更强力的锁（如拦截系统级写入），则需要编写 C++ 驱动层，那将远超 Electron 的范畴。

]]> <p>通常被称为**“独占式文件锁定” (Exclusive File Locking)**。<br>不能完全控制 文件夹里面的文件，新建删除都可以</p> 文件菜单显示 http://blog.ypintao.com/2025/12/18/%E5%89%8D%E7%AB%AF/electron/%E6%96%87%E4%BB%B6%E8%8F%9C%E5%8D%95%E6%98%BE%E7%A4%BA/ 2025-12-18T15:25:27.246Z 2025-12-18T15:25:48.330Z 这是一个非常专业的需求。要将一个涉及 Main/Preload/Renderer 三端的复杂业务封装成一个“开箱即用”的库，我们需要遵循 “关注点分离” 和 “依赖注入” 的原则。

为了满足“封装成库”且“参考 VS Code”的要求，我设计了一个名为 electron-tree-explorer 的本地库结构。你可以直接将其视为一个独立的 npm 包来维护。

📚 库的设计架构

这个库将包含三个导出入口：

  1. main: 提供给 Electron 主进程注册 IPC 监听器。
  2. preload: 提供给 Preload 脚本暴露 API。
  3. renderer: 提供 Vue 组件 (FileExplorer) 和 CSS。

🚀 1. 核心类型定义 (types.ts)

首先定义通信协议，保证前后端类型一致。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// packages/electron-tree-explorer/src/types.ts

export interface FileNode {
  name: string
  path: string
  type: 'file' | 'directory'
  children?: FileNode[] // 如果已加载，则有子节点
  isExpanded?: boolean  // UI状态
  isEditing?: boolean   // 是否正在重命名/新建
}

export type ExplorerEvents = 
  | 'ete:read-dir'
  | 'ete:create'
  | 'ete:rename'
  | 'ete:delete'
  | 'ete:open-file'

export interface CreatePayload {
  basePath: string
  name: string
  type: 'file' | 'directory'
}

🏗️ 2. 主进程逻辑 (main.ts)

这里封装了所有 fs 操作。为了安全，我们不直接暴露 fs，而是暴露业务方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
// packages/electron-tree-explorer/src/main.ts
import { ipcMain, shell } from 'electron'
import fs from 'fs-extra'
import path from 'path'
import { FileNode, CreatePayload } from './types'

export class FileExplorerServer {
  constructor() {
    this.registerHandlers()
  }

  private registerHandlers() {
    // 1. 读取目录 (懒加载模式)
    ipcMain.handle('ete:read-dir', async (_, dirPath: string): Promise<FileNode[]> => {
      try {
        const names = await fs.readdir(dirPath)
        const nodes: FileNode[] = []
        
        for (const name of names) {
          // 过滤隐藏文件
          if (name.startsWith('.')) continue
          
          const fullPath = path.join(dirPath, name)
          try {
            const stats = await fs.stat(fullPath)
            nodes.push({
              name,
              path: fullPath,
              type: stats.isDirectory() ? 'directory' : 'file',
              children: undefined // 懒加载，初始为空
            })
          } catch (e) { /* ignore errors */ }
        }

        // 排序：文件夹在前
        return nodes.sort((a, b) => {
          if (a.type === b.type) return a.name.localeCompare(b.name)
          return a.type === 'directory' ? -1 : 1
        })
      } catch (error) {
        console.error('Read dir failed:', error)
        return []
      }
    })

    // 2. 创建文件/文件夹
    ipcMain.handle('ete:create', async (_, { basePath, name, type }: CreatePayload) => {
      const targetPath = path.join(basePath, name)
      if (await fs.pathExists(targetPath)) throw new Error('Exist')
      
      if (type === 'directory') {
        await fs.ensureDir(targetPath)
      } else {
        await fs.ensureFile(targetPath)
      }
      return targetPath
    })

    // 3. 重命名
    ipcMain.handle('ete:rename', async (_, { oldPath, newName }) => {
      const dir = path.dirname(oldPath)
      const newPath = path.join(dir, newName)
      await fs.rename(oldPath, newPath)
      return newPath
    })

    // 4. 删除 (移入回收站)
    ipcMain.handle('ete:delete', async (_, filePath: string) => {
      await shell.trashedItem(filePath)
      return true
    })

    // 5. 打开文件 (使用默认应用)
    ipcMain.handle('ete:open-file', async (_, filePath: string) => {
      // 如果需要编辑器打开，这里不处理，由前端 emit 事件给主应用
      // 这里只演示用系统默认程序打开
      shell.openPath(filePath) 
    })
  }
}

// 导出单例初始化方法
export function registerFileExplorer() {
  new FileExplorerServer()
}

🌉 3. Preload 桥接 (preload.ts)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// packages/electron-tree-explorer/src/preload.ts
import { ipcRenderer, contextBridge } from 'electron'
import { CreatePayload } from './types'

const api = {
  readDir: (path: string) => ipcRenderer.invoke('ete:read-dir', path),
  create: (payload: CreatePayload) => ipcRenderer.invoke('ete:create', payload),
  rename: (oldPath: string, newName: string) => ipcRenderer.invoke('ete:rename', { oldPath, newName }),
  delete: (path: string) => ipcRenderer.invoke('ete:delete', path),
  openFile: (path: string) => ipcRenderer.invoke('ete:open-file', path)
}

// 供主项目调用
export function exposeExplorerAPI() {
  if (process.contextIsolated) {
    contextBridge.exposeInMainWorld('fileExplorerAPI', api)
  } else {
    // @ts-ignore
    window.fileExplorerAPI = api
  }
}

🎨 4. Renderer 组件 (Vue)

这里是逻辑最复杂的地方。为了封装性，我们将 ContextMenu 和 TreeItem 都集成在一起。

4.1 树节点组件 (TreeItem.vue)

处理递归渲染、重命名输入框、右键菜单事件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
<template>
  <div class="ete-node">
    <!-- 节点行 -->
    <div 
      class="ete-label"
      :class="{ 'selected': isSelected }"
      :style="{ paddingLeft: `${depth * 12 + 10}px` }"
      @click="onLeftClick"
      @contextmenu.prevent="onRightClick"
    >
      <!-- 箭头 -->
      <span class="ete-arrow" :class="{ 'open': isOpen, 'hidden': node.type === 'file' }">
        ▶
      </span>
      
      <!-- 图标 -->
      <span class="ete-icon">{{ node.type === 'directory' ? '📁' : '📄' }}</span>

      <!-- 正常名称 -->
      <span v-if="!isRenaming" class="ete-name">{{ node.name }}</span>
      
      <!-- 重命名/新建 输入框 -->
      <input 
        v-else
        ref="inputRef"
        v-model="editName"
        class="ete-input"
        @blur="confirmEdit"
        @keydown.enter="confirmEdit"
        @keydown.esc="cancelEdit"
        @click.stop
      />
    </div>

    <!-- 子节点递归 -->
    <div v-if="node.type === 'directory' && isOpen">
      <TreeItem 
        v-for="child in node.children" 
        :key="child.path"
        :node="child"
        :depth="depth + 1"
        :selectedPath="selectedPath"
        @select="$emit('select', $event)"
        @context="$emit('context', $event)"
        @refresh="$emit('refresh', node)" 
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, nextTick, watch, toRef } from 'vue'
import { FileNode } from './types'

const props = defineProps<{
  node: FileNode
  depth: number
  selectedPath: string
}>()

const emit = defineEmits(['select', 'context', 'refresh'])

const isOpen = ref(false)
const isRenaming = ref(false)
const editName = ref('')
const inputRef = ref<HTMLInputElement>()

// 监听外部控制的编辑状态 (用于新建)
watch(() => props.node.isEditing, (val) => {
  if (val) startEdit()
})

const isSelected = toRef(() => props.selectedPath === props.node.path)

// 加载子目录
const loadChildren = async () => {
  if (props.node.children) return // 已加载过
  // @ts-ignore
  const children = await window.fileExplorerAPI.readDir(props.node.path)
  props.node.children = children
}

const onLeftClick = async () => {
  emit('select', props.node)
  if (props.node.type === 'directory') {
    isOpen.value = !isOpen.value
    if (isOpen.value) await loadChildren()
  }
}

const onRightClick = (e: MouseEvent) => {
  emit('select', props.node) // 右键同时也选中
  emit('context', { event: e, node: props.node })
}

// === 编辑逻辑 ===
const startEdit = () => {
  isRenaming.value = true
  editName.value = props.node.name
  nextTick(() => inputRef.value?.focus())
}

const confirmEdit = async () => {
  if (!isRenaming.value) return
  isRenaming.value = false
  
  if (!editName.value || editName.value === props.node.name) {
    if (props.node.name === '') {
      // 如果是新建文件且名字为空，触发刷新父级以移除临时节点
       emit('refresh', null) 
    }
    return
  }

  try {
    if (props.node.path.endsWith('__temp__')) {
      // 新建逻辑
      const basePath = props.node.path.replace('__temp__', '')
      // @ts-ignore
      await window.fileExplorerAPI.create({
        basePath,
        name: editName.value,
        type: props.node.type
      })
    } else {
      // 重命名逻辑
      // @ts-ignore
      await window.fileExplorerAPI.rename(props.node.path, editName.value)
    }
    // 成功后请求父级刷新
    emit('refresh', 'parent') 
  } catch (e) {
    alert('操作失败: ' + e)
    // 失败如果是新建，需要移除
    if (props.node.path.endsWith('__temp__')) emit('refresh', null)
  }
}

const cancelEdit = () => {
  isRenaming.value = false
  if (props.node.path.endsWith('__temp__')) emit('refresh', null)
}

defineExpose({ startEdit })
</script>

<style>
/* 包含 VS Code 风格的基础样式 */
.ete-label {
  display: flex;
  align-items: center;
  cursor: pointer;
  height: 22px;
  color: #cccccc;
  font-size: 13px;
  user-select: none;
  border: 1px solid transparent;
}
.ete-label:hover { background-color: #2a2d2e; }
.ete-label.selected { background-color: #37373d; color: #fff; }

.ete-arrow {
  font-size: 10px; margin-right: 4px; transition: transform 0.1s;
  color: #999;
  width: 14px; text-align: center;
}
.ete-arrow.open { transform: rotate(90deg); }
.ete-arrow.hidden { visibility: hidden; }

.ete-icon { margin-right: 6px; }
.ete-input {
  background: #3c3c3c; color: white; border: 1px solid #007fd4;
  outline: none; height: 20px; width: 100%;
}
</style>

4.2 主入口组件 (FileExplorer.vue)

负责管理根节点、右键菜单的显示与隐藏。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<template>
  <div class="ete-container" @click="selectedPath = ''" @contextmenu.prevent="onRootContext">
    <!-- 递归树 -->
    <TreeItem 
      v-for="node in tree" 
      :key="node.path"
      ref="itemRefs"
      :node="node" 
      :depth="0"
      :selectedPath="selectedPath"
      @select="onSelect"
      @context="onContext"
      @refresh="refreshNode"
    />

    <!-- 右键菜单 -->
    <div v-if="menu.visible" class="ete-context-menu" :style="{ top: menu.y + 'px', left: menu.x + 'px' }">
      <div @click="handleAction('new_file')">新建文件</div>
      <div @click="handleAction('new_folder')">新建文件夹</div>
      <div @click="handleAction('rename')">重命名</div>
      <div class="ete-divider"></div>
      <div @click="handleAction('delete')" class="ete-danger">删除</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive, nextTick } from 'vue'
import TreeItem from './TreeItem.vue'
import { FileNode } from './types'

const props = defineProps<{ rootPath: string }>()
const emit = defineEmits(['open-file'])

const tree = ref<FileNode[]>([])
const selectedPath = ref('')
const itemRefs = ref([]) // 用于获取子组件实例调用 startEdit

const menu = reactive({ visible: false, x: 0, y: 0, targetNode: null as FileNode | null })

// 初始化
onMounted(async () => {
  await loadRoot()
})

const loadRoot = async () => {
  if (!props.rootPath) return
  // @ts-ignore
  tree.value = await window.fileExplorerAPI.readDir(props.rootPath)
}

const onSelect = (node: FileNode) => {
  selectedPath.value = node.path
  if (node.type === 'file') emit('open-file', node.path)
}

const onContext = ({ event, node }: any) => {
  menu.visible = true
  menu.x = event.clientX
  menu.y = event.clientY
  menu.targetNode = node
}

const onRootContext = (event: MouseEvent) => {
  // 空白处右键
  menu.visible = true
  menu.x = event.clientX
  menu.y = event.clientY
  menu.targetNode = null // null 代表根目录
}

// 刷新逻辑：如果是 'parent'，说明子节点有变动，这里简单处理，重新加载整个父节点
// 在生产级库中，应该通过 path 找到父节点并只刷新它
const refreshNode = () => {
  // 简单实现：全量刷新根目录 (优化点：根据 path 局部刷新)
  loadRoot()
}

const handleAction = async (action: string) => {
  menu.visible = false
  const target = menu.targetNode
  
  if (action === 'delete') {
    if (!target) return
    if (confirm(`删除 ${target.name}?`)) {
      // @ts-ignore
      await window.fileExplorerAPI.delete(target.path)
      loadRoot()
    }
    return
  }

  if (action === 'rename') {
    if (!target) return
    // 找到对应的组件实例调用 startEdit
    // 实际库中一般使用 bus 或 provide/inject 来控制编辑状态
    target.isEditing = true 
    return
  }

  if (action === 'new_file' || action === 'new_folder') {
    // 1. 确定插入位置（当前文件夹下，或者当前文件同级，或者根目录）
    let insertList = tree.value
    let basePath = props.rootPath
    
    if (target) {
       if (target.type === 'directory') {
         // 插入到该文件夹内部（需要先展开）
         if (!target.children) target.children = []
         insertList = target.children
         basePath = target.path
       } else {
         // 插入到同级 (这里简化，暂时只支持根目录或者文件夹内)
         // 实际需要递归查找 parent
       }
    }

    // 2. 插入临时节点
    const tempNode: FileNode = {
      name: '',
      path: basePath + '/__temp__', // 特殊标记
      type: action === 'new_file' ? 'file' : 'directory',
      isEditing: true
    }
    insertList.unshift(tempNode)
  }
}

// 点击空白关闭菜单
window.addEventListener('click', () => { menu.visible = false })
</script>

<style scoped>
.ete-container {
  height: 100%; overflow-y: auto; background: #252526; color: #ccc;
  font-family: 'Segoe UI', sans-serif;
}
.ete-context-menu {
  position: fixed; background: #333; border: 1px solid #454545;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3); z-index: 9999;
  min-width: 120px; padding: 4px 0;
}
.ete-context-menu div {
  padding: 6px 16px; cursor: pointer; font-size: 13px;
}
.ete-context-menu div:hover { background: #094771; color: white; }
.ete-divider { height: 1px; background: #454545; margin: 4px 0; padding: 0 !important; }
.ete-danger:hover { background: #800000 !important; }
</style>

📦 5. 如何在你的项目中使用

现在你已经有了一个名为 electron-tree-explorer 的本地库（文件夹）。

步骤 1: 注册主进程

在 src/main/index.ts 中：

1
2
3
4
import { registerFileExplorer } from '../packages/electron-tree-explorer/src/main'

// 在 app.whenReady() 之后
registerFileExplorer()

步骤 2: 注册 Preload

在 src/preload/index.ts 中：

1
2
3
import { exposeExplorerAPI } from '../packages/electron-tree-explorer/src/preload'

exposeExplorerAPI()

步骤 3: 在 Vue 中使用

在你的业务页面 (比如 Sidebar.vue):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<template>
  <div class="sidebar">
    <FileExplorer 
      root-path="D:/MyProject" 
      @open-file="handleOpenFile" 
    />
  </div>
</template>

<script setup lang="ts">
import FileExplorer from '../packages/electron-tree-explorer/src/FileExplorer.vue'

const handleOpenFile = (path: string) => {
  console.log('用户请求打开文件:', path)
  // 这里调用你自己的 Tab 系统打开文件
}
</script>

✅ 方案亮点

  1. 高度封装：主项目不需要关心 fs.readdir 怎么写，也不需要写 CSS。
  2. 安全：通过 contextBridge 只暴露了 5 个必要的 API，没有暴露整个 fs 模块。
  3. VS Code 体验：
    • 懒加载：只有点开文件夹才读取子目录，性能好。
    • 内联重命名：不是弹窗，而是直接在树上变成输入框。
    • 右键菜单：自定义 DOM 菜单，样式统一。
  4. 可扩展：如果你想发包，只需要把 packages/electron-tree-explorer 用 tsup 打包，并在 package.json 定义 exports 即可。

如果你的文件目录结构或者 CSS 样式有特殊要求，直接修改这个 packages 目录下的文件即可，不会污染你的业务代码。

]]> <p>这是一个非常专业的需求。要将一个涉及 Main&#x2F;Preload&#x2F;Renderer 三端的复杂业务封装成一个“开箱即用”的库，我们需要遵循 <strong>“关注点分离”</strong> 和 <strong>“依赖注入”</strong> 的原则。</p 文件比对标红显示 http://blog.ypintao.com/2025/12/17/%E5%89%8D%E7%AB%AF/electron/%E6%96%87%E4%BB%B6%E6%AF%94%E5%AF%B9%E6%A0%87%E7%BA%A2%E6%98%BE%E7%A4%BA/ 2025-12-17T15:42:43.979Z 2025-12-17T15:43:56.808Z 既然你已经有了工程文件的结构数据（比如是从 project.config.json 读取出来的树形结构），现在的核心任务是：验证这些路径在磁盘上是否真的存在，并根据结果更新 UI。

这是一个典型的 “元数据” vs “物理数据” 的校验场景。

为了保证性能（避免成百上千次 IPC 通信），我们应该采用 “批量校验” 的策略。

1. 后端：批量路径校验 (src/main/ipc/fs-ipc.ts)

不要一个一个文件去调 fs.existsSync，那样 UI 会卡顿。我们要提供一个接口，前端传一个路径数组，后端返回一个状态 Map。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// src/main/ipc/fs-ipc.ts
import { ipcMain } from 'electron'
import fs from 'fs-extra'

export function setupFsIPC() {
  // ... 之前的代码 ...

  // ✅ 新增：批量检查路径是否存在
  // 参数：paths: string[]
  // 返回：Record<string, boolean>  { "/path/to/a": true, "/path/to/b": false }
  ipcMain.handle('fs-check-paths-batch', async (_, paths: string[]) => {
    const result: Record<string, boolean> = {}
    
    // 使用 Promise.all 并行检查，性能最高
    await Promise.all(paths.map(async (p) => {
      try {
        // access 比 exists 更推荐，因为它不会阻塞事件循环
        await fs.access(p)
        result[p] = true
      } catch {
        result[p] = false
      }
    }))
    
    return result
  })
}

2. Preload 暴露 API (src/preload/index.ts)

1
2
3
4
5
6
// src/preload/index.ts
const fsAPI = {
  // ... 之前的 API ...
  checkPathsBatch: (paths: string[]) => ipcRenderer.invoke('fs-check-paths-batch', paths)
}
// ...

3. 前端：递归组件实现 (FileTreeItem.vue)

我们需要修改组件，接收一个全局的 fileStatusMap（记录谁存在，谁不存在）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!-- src/components/explorer/FileTreeItem.vue -->
<template>
  <div class="tree-node">
    <div 
      class="item-label"
      :class="{ 
        'selected': isSelected,
        'missing': isMissing // 🔴 关键样式：不存在标红
      }"
      :style="{ paddingLeft: `${depth * 16 + 8}px` }"
      @click.stop="handleClick"
      @contextmenu.stop="handleRightClick"
    >
      <!-- 图标：如果丢失显示警告，否则显示正常的文件夹/文件图标 -->
      <span class="icon">
        <template v-if="isMissing">⚠️</template>
        <template v-else>
            {{ node.type === 'directory' ? (isOpen ? '📂' : '📁') : '📄' }}
        </template>
      </span>
      
      <span class="name">{{ node.name }}</span>
      <span v-if="isMissing" class="missing-tag">(已删除)</span>
    </div>

    <!-- 递归渲染 -->
    <div v-if="node.type === 'directory' && isOpen">
      <FileTreeItem 
        v-for="child in node.children" 
        :key="child.path"
        :node="child"
        :depth="depth + 1"
        :selectedPath="selectedPath"
        :statusMap="statusMap" 
        @select="$emit('select', $event)"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

const props = defineProps<{
  node: any
  depth: number
  selectedPath: string
  // 接收父组件传下来的状态表 { "path": true/false }
  statusMap: Record<string, boolean> 
}>()

const emit = defineEmits(['select'])

const isOpen = ref(false)

const isSelected = computed(() => props.selectedPath === props.node.path)

// ⚠️ 核心判断：如果 map 里显式记为 false，则视为丢失
// (如果 map 里没有这个 key，通常视作还没加载完，暂不标红，或者默认为 true)
const isMissing = computed(() => {
    return props.statusMap[props.node.path] === false
})

const handleClick = () => {
  // 🚫 核心逻辑：不存在则禁止点击（或者只能触发特定逻辑）
  if (isMissing.value) {
    console.warn('文件不存在，无法打开')
    return
  }

  if (props.node.type === 'directory') {
    isOpen.value = !isOpen.value
  }
  emit('select', props.node)
}

const handleRightClick = () => {
    // 即使文件不存在，通常也允许右键，以便用户选择 "从列表中删除"
}
</script>

<style scoped>
.item-label {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 4px 0;
  color: #ccc;
  user-select: none;
}

/* 正常状态 hover */
.item-label:hover:not(.missing) { background-color: #2a2d2e; }
.item-label.selected { background-color: #37373d; color: white; }

/* 🔴 丢失文件样式 */
.item-label.missing {
  color: #e51400; /* 鲜艳的红 */
  opacity: 0.8;
  cursor: not-allowed; /* 禁止手势 */
}
.item-label.missing:hover {
  background-color: rgba(229, 20, 0, 0.1); /* 红色背景微光 */
}

.icon { margin-right: 6px; width: 16px; text-align: center; }
.missing-tag { font-size: 10px; margin-left: 8px; opacity: 0.7; }
</style>

4. 前端：父组件逻辑 (ProjectExplorer.vue)

在这里我们将树形数据拍平，批量发送给后端校验。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!-- src/components/explorer/ProjectExplorer.vue -->
<template>
  <div class="explorer">
    <div class="toolbar">
        <button @click="validateFiles">🔄 刷新状态</button>
    </div>
    
    <div class="tree-container">
      <FileTreeItem 
        v-for="node in projectData" 
        :key="node.path"
        :node="node"
        :depth="0"
        :selectedPath="selectedPath"
        :statusMap="fileStatusMap" 
        @select="handleSelect"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import FileTreeItem from './FileTreeItem.vue'

// 假设这是你从 project.config.json 读出来的原始数据
const projectData = ref<any[]>([
    // 示例数据
    { 
        name: 'src', path: 'D:/project/src', type: 'directory', 
        children: [
            { name: 'main.ts', path: 'D:/project/src/main.ts', type: 'file' },
            { name: 'deleted.ts', path: 'D:/project/src/deleted.ts', type: 'file' } // 假设这个文件被删了
        ]
    }
])

const selectedPath = ref('')
const fileStatusMap = ref<Record<string, boolean>>({})

// === 核心工具：拍平树结构获取所有路径 ===
const getAllPaths = (nodes: any[]): string[] => {
  let paths: string[] = []
  for (const node of nodes) {
    paths.push(node.path)
    if (node.children) {
      paths = paths.concat(getAllPaths(node.children))
    }
  }
  return paths
}

// === 核心逻辑：批量校验 ===
const validateFiles = async () => {
  if (projectData.value.length === 0) return

  // 1. 提取所有路径
  const allPaths = getAllPaths(projectData.value)
  
  // 2. 发送给主进程批量检查
  console.log('正在校验文件数量:', allPaths.length)
  const result = await window.fsAPI.checkPathsBatch(allPaths)
  
  // 3. 更新状态 Map
  fileStatusMap.value = result
}

// 初始化时校验一次
onMounted(() => {
  validateFiles()
})

// 监听数据变化（如果工程文件变了，重新校验）
watch(projectData, () => {
    validateFiles()
}, { deep: true })

const handleSelect = (node: any) => {
    selectedPath.value = node.path
    // 打开文件逻辑...
}
</script>

方案总结

  1. 性能优化：通过 getAllPaths 将树拍平，只需 一次 IPC 调用 即可验证整个工程成百上千个文件的状态，不会卡顿。
  2. 状态驱动 UI：使用 fileStatusMap 传递给所有子组件。Vue 的响应式系统会自动把状态为 false 的节点渲染成红色。
  3. 交互控制：在子组件内部拦截 handleClick，如果 isMissing 为真，直接 return，实现了“不能点击”。

这完全符合你的需求。你可以直接把这段样式和逻辑贴进你现有的左侧菜单组件中。

]]> <p>既然你已经有了工程文件的结构数据（比如是从 <code>project.config.json</code> 读取出来的树形结构），现在的核心任务是：<strong>验证这些路径在磁盘上是否真的存在</strong>，并根据结果更新 UI。</p> <p>这是一个典型的 <strong>“元数据” vs “物理数据”</strong> 的校验场景。</p> <p>为了保证性能（避免成百上千次 IPC 通信），我们应该采用 <strong>“批量校验”</strong> 的策略。</p> electron-vite IDE左侧读取工程文件 http://blog.ypintao.com/2025/12/17/%E5%89%8D%E7%AB%AF/electron/IDE%E5%B7%A6%E4%BE%A7%E8%AF%BB%E5%8F%96%E5%B7%A5%E7%A8%8B%E6%96%87%E4%BB%B6/ 2025-12-17T15:30:04.028Z 2025-12-17T15:43:00.657Z 这是一个非常硬核且实用的需求。要实现类似 VS Code / Visual Studio 的工程文件资源管理器，我们需要打通 Electron 的 Main Process (Node.js fs 能力) 和 Renderer Process (Vue 组件交互)。

由于代码量较大，我将分为 后端 (IPC/Node) 和 前端 (Vue 组件) 两部分来构建。

核心功能规划

  1. 工程元数据：在根目录维护一个 project.config.json。
  2. 文件树生成：递归读取文件夹结构，过滤 node_modules 等。
  3. CRUD 操作：读取内容、新建文件/文件夹、重命名、删除。
  4. UI 交互：递归树组件 + 右键菜单。

第一部分：后端逻辑 (Node.js + IPC)

我们继续沿用模块化的思路，新建 src/main/ipc/fs-ipc.ts。

1. 定义类型与 IPC 逻辑

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
// src/main/ipc/fs-ipc.ts
import { ipcMain, dialog, BrowserWindow, shell } from 'electron'
import fs from 'fs-extra' // 建议安装 fs-extra: npm install fs-extra @types/fs-extra
import path from 'path'

// 定义文件节点类型
export interface FileNode {
  name: string
  path: string
  type: 'file' | 'directory'
  children?: FileNode[]
}

// 忽略列表
const IGNORE_LIST = ['.git', 'node_modules', '.DS_Store']

// 递归构建文件树
const buildFileTree = (dirPath: string): FileNode[] => {
  const stats = fs.statSync(dirPath)
  if (!stats.isDirectory()) return []

  const children = fs.readdirSync(dirPath)
    .filter(name => !IGNORE_LIST.includes(name))
    .map(name => {
      const fullPath = path.join(dirPath, name)
      const fileStats = fs.statSync(fullPath)
      
      const node: FileNode = {
        name,
        path: fullPath,
        type: fileStats.isDirectory() ? 'directory' : 'file'
      }

      if (node.type === 'directory') {
        node.children = buildFileTree(fullPath)
      }
      return node
    })

  // 排序：文件夹在前，文件在后
  return children.sort((a, b) => {
    if (a.type === b.type) return a.name.localeCompare(b.name)
    return a.type === 'directory' ? -1 : 1
  })
}

export function setupFsIPC() {
  
  // 1. 打开工程目录
  ipcMain.handle('fs-open-project-dialog', async () => {
    const { canceled, filePaths } = await dialog.showOpenDialog({
      properties: ['openDirectory']
    })
    if (canceled) return null
    return filePaths[0]
  })

  // 2. 读取整个工程结构
  ipcMain.handle('fs-read-project-tree', async (_, rootPath: string) => {
    try {
      if (!fs.existsSync(rootPath)) throw new Error('Path not found')
      
      // 读取或创建工程配置文件
      const configPath = path.join(rootPath, 'project.config.json')
      let projectInfo = { name: path.basename(rootPath), version: '1.0.0' }
      
      if (fs.existsSync(configPath)) {
        projectInfo = await fs.readJson(configPath)
      } else {
        await fs.writeJson(configPath, projectInfo, { spaces: 2 })
      }

      const tree = buildFileTree(rootPath)
      return { tree, projectInfo }
    } catch (error) {
      console.error(error)
      throw error
    }
  })

  // 3. 读取文件内容
  ipcMain.handle('fs-read-file', async (_, filePath: string) => {
    return await fs.readFile(filePath, 'utf-8')
  })

  // 4. 保存文件
  ipcMain.handle('fs-save-file', async (_, { filePath, content }) => {
    return await fs.writeFile(filePath, content, 'utf-8')
  })

  // 5. 创建文件或文件夹
  ipcMain.handle('fs-create-entry', async (_, { parentPath, name, type }) => {
    const fullPath = path.join(parentPath, name)
    if (fs.existsSync(fullPath)) throw new Error('File already exists')
    
    if (type === 'directory') {
      await fs.ensureDir(fullPath)
    } else {
      await fs.ensureFile(fullPath)
    }
    return fullPath
  })

  // 6. 删除
  ipcMain.handle('fs-delete-entry', async (_, filePath: string) => {
    // 移入回收站 (比直接删除更安全)
    return await shell.trashedItem(filePath)
    // 或者直接删除: await fs.remove(filePath)
  })
}

记得在 src/main/index.ts 中调用 setupFsIPC()。

第二部分：Preload 暴露 API

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// src/preload/index.ts
import { contextBridge, ipcRenderer } from 'electron'

const fsAPI = {
  openProject: () => ipcRenderer.invoke('fs-open-project-dialog'),
  readProjectTree: (path: string) => ipcRenderer.invoke('fs-read-project-tree', path),
  readFile: (path: string) => ipcRenderer.invoke('fs-read-file', path),
  saveFile: (path: string, content: string) => ipcRenderer.invoke('fs-save-file', { filePath: path, content }),
  createEntry: (parentPath: string, name: string, type: 'file' | 'directory') => 
    ipcRenderer.invoke('fs-create-entry', { parentPath, name, type }),
  deleteEntry: (path: string) => ipcRenderer.invoke('fs-delete-entry', path)
}

if (process.contextIsolated) {
  contextBridge.exposeInMainWorld('fsAPI', fsAPI)
} else {
  // @ts-ignore
  window.fsAPI = fsAPI
}

第三部分：前端 Vue 组件 (递归树 + 右键菜单)

我们将创建两个组件：

  1. FileTreeItem.vue: 递归渲染单个节点。
  2. ProjectExplorer.vue: 容器，处理右键菜单逻辑。

1. 递归子组件 src/components/explorer/FileTreeItem.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<template>
  <div class="tree-item">
    <!-- 当前行内容 -->
    <div 
      class="item-label" 
      :class="{ selected: isSelected }"
      :style="{ paddingLeft: `${depth * 16 + 8}px` }"
      @click.stop="onLeftClick"
      @contextmenu.prevent.stop="onRightClick"
    >
      <!-- 图标 (可用 iconify 或 svg 替换) -->
      <span class="icon">{{ node.type === 'directory' ? (isOpen ? '📂' : '📁') : '📄' }}</span>
      <span class="name">{{ node.name }}</span>
    </div>

    <!-- 递归渲染子节点 -->
    <div v-if="node.type === 'directory' && isOpen">
      <FileTreeItem 
        v-for="child in node.children" 
        :key="child.path"
        :node="child"
        :depth="depth + 1"
        :selectedPath="selectedPath"
        @select="$emit('select', $event)"
        @context-menu="$emit('context-menu', $event)"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const props = defineProps<{
  node: any
  depth: number
  selectedPath: string
}>()

const emit = defineEmits(['select', 'context-menu'])

const isOpen = ref(false)

// 计算是否被选中
const isSelected = computed(() => props.selectedPath === props.node.path)

const onLeftClick = () => {
  if (props.node.type === 'directory') {
    isOpen.value = !isOpen.value
  }
  emit('select', props.node)
}

const onRightClick = (event: MouseEvent) => {
  // 将事件和当前节点信息向上抛出
  emit('context-menu', { event, node: props.node })
}
</script>

<style scoped>
.item-label {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 4px 0;
  user-select: none;
  color: #ccc;
}
.item-label:hover { background-color: #2a2d2e; }
.item-label.selected { background-color: #37373d; color: white; }
.icon { margin-right: 6px; font-size: 14px; }
.name { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
</style>

2. 主容器组件 src/components/explorer/ProjectExplorer.vue

这里包含了核心业务逻辑：加载工程、右键菜单、创建/删除文件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
<template>
  <div class="explorer-container">
    <!-- 顶部工具栏 -->
    <div class="toolbar">
      <span>{{ projectName || '未打开工程' }}</span>
      <button @click="openProject" class="icon-btn">📂</button>
      <button @click="refreshTree" class="icon-btn" v-if="projectPath">🔄</button>
    </div>

    <!-- 文件树区域 -->
    <div class="tree-content" @contextmenu.prevent="onEmptyAreaRightClick">
      <FileTreeItem 
        v-for="node in fileTree" 
        :key="node.path"
        :node="node"
        :depth="0"
        :selectedPath="selectedPath"
        @select="onFileSelect"
        @context-menu="handleContextMenu"
      />
    </div>

    <!-- 自定义右键菜单 -->
    <div 
      v-if="contextMenu.visible" 
      class="context-menu"
      :style="{ top: `${contextMenu.y}px`, left: `${contextMenu.x}px` }"
      @blur="closeContextMenu"
    >
      <div class="menu-item disabled">{{ contextMenu.targetName }}</div>
      <div class="divider"></div>
      <div class="menu-item" @click="createNew('file')">📄 新建文件</div>
      <div class="menu-item" @click="createNew('directory')">📁 新建文件夹</div>
      <div class="divider"></div>
      <div class="menu-item delete" @click="deleteItem">🗑 删除</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, onUnmounted } from 'vue'
import FileTreeItem from './FileTreeItem.vue'

// 状态
const projectPath = ref('')
const projectName = ref('')
const fileTree = ref<any[]>([])
const selectedPath = ref('')

// 右键菜单状态
const contextMenu = reactive({
  visible: false,
  x: 0,
  y: 0,
  targetNode: null as any | null, // 右键点击的节点
  targetName: ''
})

// === 1. 打开工程 ===
const openProject = async () => {
  const path = await window.fsAPI.openProject()
  if (path) {
    projectPath.value = path
    await loadTree()
  }
}

// === 2. 加载文件树 ===
const loadTree = async () => {
  if (!projectPath.value) return
  const { tree, projectInfo } = await window.fsAPI.readProjectTree(projectPath.value)
  fileTree.value = tree
  projectName.value = projectInfo.name
}

const refreshTree = () => loadTree()

// === 3. 文件选择 ===
const onFileSelect = async (node: any) => {
  selectedPath.value = node.path
  if (node.type === 'file') {
    // TODO: 这里可以调用 Dockview 或 EventBus 打开文件编辑器
    // const content = await window.fsAPI.readFile(node.path)
    console.log('打开文件:', node.path)
  }
}

// === 4. 右键菜单处理 ===
const handleContextMenu = ({ event, node }: any) => {
  showMenu(event, node)
}

const onEmptyAreaRightClick = (event: MouseEvent) => {
  // 在空白处点击，视作在根目录操作
  showMenu(event, { 
    path: projectPath.value, 
    type: 'directory', 
    name: '根目录' 
  })
}

const showMenu = (event: MouseEvent, node: any) => {
  contextMenu.visible = true
  contextMenu.x = event.clientX
  contextMenu.y = event.clientY
  contextMenu.targetNode = node
  contextMenu.targetName = node.name
}

const closeContextMenu = () => {
  contextMenu.visible = false
}

// === 5. 创建文件/文件夹 ===
const createNew = async (type: 'file' | 'directory') => {
  closeContextMenu()
  if (!contextMenu.targetNode) return

  // 确定父目录 (如果是文件，则在同级创建；如果是文件夹，则在内部创建)
  const parentPath = contextMenu.targetNode.type === 'directory' 
    ? contextMenu.targetNode.path 
    : contextMenu.targetNode.path.replace(/[\\/][^\\/]+$/, '') // 获取父级路径
  
  // 简单起见，这里用 prompt，实际可以用 Modal 弹窗
  const name = prompt(`请输入${type === 'file' ? '文件' : '文件夹'}名称:`)
  if (!name) return

  try {
    await window.fsAPI.createEntry(parentPath, name, type)
    await refreshTree() // 刷新树
  } catch (e) {
    alert('创建失败: ' + e)
  }
}

// === 6. 删除 ===
const deleteItem = async () => {
  closeContextMenu()
  const node = contextMenu.targetNode
  if (!node || node.path === projectPath.value) return

  if (!confirm(`确定要删除 ${node.name} 吗？`)) return

  try {
    await window.fsAPI.deleteEntry(node.path)
    await refreshTree()
  } catch (e) {
    alert('删除失败')
  }
}

// 点击外部关闭菜单
const onClickOutside = () => closeContextMenu()
onMounted(() => window.addEventListener('click', onClickOutside))
onUnmounted(() => window.removeEventListener('click', onClickOutside))
</script>

<style scoped>
.explorer-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #1e1e1e;
  color: #ccc;
  font-family: 'Segoe UI', sans-serif;
  user-select: none;
}
.toolbar {
  padding: 8px;
  background-color: #252526;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: bold;
}
.icon-btn {
  background: none; border: none; cursor: pointer; color: #ccc;
}
.icon-btn:hover { color: white; }
.tree-content {
  flex: 1;
  overflow-y: auto;
  padding-top: 4px;
}

/* 右键菜单样式 */
.context-menu {
  position: fixed;
  background: #252526;
  border: 1px solid #454545;
  box-shadow: 0 4px 6px rgba(0,0,0,0.3);
  min-width: 150px;
  z-index: 9999;
  border-radius: 4px;
  padding: 4px 0;
}
.menu-item {
  padding: 6px 12px;
  font-size: 13px;
  cursor: pointer;
  color: #cccccc;
}
.menu-item:hover:not(.disabled) {
  background-color: #094771;
  color: white;
}
.menu-item.disabled {
  color: #666;
  cursor: default;
  font-size: 12px;
  border-bottom: 1px solid #333;
}
.menu-item.delete:hover {
  background-color: #710909;
}
.divider {
  height: 1px;
  background-color: #454545;
  margin: 4px 0;
}
</style>

如何集成到你的 Dockview

你可以将 ProjectExplorer.vue 作为一个 Panel 放入 Dockview 的侧边栏（如果你的布局支持侧边栏），或者作为一个普通的 Panel。

关键的联动点：

  1. 文件点击：

    • 在 onFileSelect 中，获取到 node.path。
    • 调用我们之前实现的 tab-manager -> findAndActivateTab(node.path)。
    • 如果没找到，则读取文件内容 (window.fsAPI.readFile(node.path))，然后 dockAPI.addPanel 创建一个新的编辑器 Tab，ID 使用文件路径（确保唯一）。

  2. 右键创建：

    • 创建文件成功后，可以自动触发一次“打开文件”的操作，体验会更好。

总结

这个 Demo 实现了：

  1. Node.js 层：安全的 fs 封装，只暴露必要接口。
  2. 数据层：简单的 project.config.json 读写。
  3. UI 层：递归文件树，支持无限层级。
  4. 交互：VS Code 风格的右键菜单，支持新建和删除。

这基本上就是一个轻量级 IDE 资源管理器的雏形了。你可以把 ProjectExplorer.vue 复制进去直接运行。

]]> <p>这是一个非常硬核且实用的需求。要实现类似 VS Code &#x2F; Visual Studio 的工程文件资源管理器，我们需要打通 Electron 的 <strong>Main Process (Node.js fs 能力)</strong> 和 <strong>Renderer Process (Vue 组件交互)</strong>。</p> <p>由于代码量较大，我将分为 <strong>后端 (IPC&#x2F;Node)</strong> 和 <strong>前端 (Vue 组件)</strong> 两部分来构建。</p> 多窗口事件总线怎么处理 http://blog.ypintao.com/2025/12/16/%E5%89%8D%E7%AB%AF/electron/%E5%A4%9A%E7%AA%97%E5%8F%A3%E4%BA%8B%E4%BB%B6%E6%80%BB%E7%BA%BF%E6%80%8E%E4%B9%88%E5%A4%84%E7%90%86/ 2025-12-16T13:52:57.677Z 2025-12-16T15:04:31.801Z 问题

我现在做的是多窗口应用（基于electron-vite,vue3,和dokeview），现在有一个场景：我们原项目里面多出地方使用的事件总线模式，在组件挂载的时候注册事件，在组件销毁的时候off事件，现在改成多窗口应用后，就出现了打开了多个注册事件的窗口，事件触发的时候会触发多次，事件关闭的时候就全都关闭了。这种情况 有什么好的解决方案吗？

解决方案

这是一个非常经典的架构演进问题。当你从“单页面应用 (SPA)”转变为“多窗口应用 (Multi-Window)”时，传统的事件总线（EventBus）模式如果不加改造，必然会遇到**“广播风暴”（触发多次）和“误杀”**（关一个全关了）的问题。

问题根源分析

  1. 触发多次 (Broadcast Storm)：

    • 如果你的事件总线是基于 IPC（ipcRenderer）或 BroadcastChannel 的，消息是广播的。
    • 你有 3 个窗口，每个窗口里的组件都监听了 refresh-data。
    • 当一个事件发出时，3 个窗口都收到了，导致代码执行了 3 次。
    • 但在旧的单页应用思维里，通常预期是谁发出的，或者谁在当前视野里，谁才响应。

  2. 全都不触发了 (Premature Unsubscription)：

    • 这是最常见的问题。你的代码可能写的是 bus.off('event-name')。
    • 这会移除该事件的所有监听器。
    • 在多窗口（或同一窗口多 Tab）场景下，窗口 A 销毁组件时调用了 off，结果把窗口 B（甚至同窗口下的 Tab B）正在用的监听器也给删掉了。

解决方案

你需要将事件总线升级为 “多级分发策略”。我们需要明确区分：这是给谁的消息？

我为你提供一套 “带作用域的分布式事件总线” 解决方案。

核心策略

  1. 精确销毁：绝对禁止使用 bus.off('name')（清空所有），必须使用 bus.off('name', handler)（只移除当前函数的引用）。
  2. 作用域区分 (Scoping)：
    • Local (本地)：只在当前窗口/当前组件内生效（使用 mitt 或简单的回调）。
    • Global (全局)：所有窗口都生效（例如：用户退出登录）。
    • Targeted (定向)：只发给特定的 panelId 或 windowId（例如：刷新表格，只刷新 ID 为 user-table 的那个）。

代码实现：DistributedEventBus

我们将封装一个智能的 EventBus，它底层结合了 mitt (本地) 和 BroadcastChannel (跨窗口)。

1. 工具类封装 (src/utils/event-bus.ts)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
import mitt, { Handler } from 'mitt'

// 定义消息结构
type BusPayload = {
  event: string
  data: any
  targetId?: string // 指定接收目标的 ID (PanelId 或 WindowId)
  sourceId?: string // 发送者的 ID
}

export class DistributedEventBus {
  private localBus = mitt() // 本地事件中心
  private channel: BroadcastChannel
  private myId: string // 当前实例/窗口的 ID

  constructor(channelName: string = 'app-global-bus') {
    // 生成或获取当前环境 ID (可以使用之前 Pinia 插件里的 generateId 逻辑)
    this.myId = Math.random().toString(36).substr(2, 9)
    
    // 1. 初始化跨窗口通道
    this.channel = new BroadcastChannel(channelName)

    // 2. 监听来自其他窗口的消息
    this.channel.onmessage = (msg: MessageEvent<BusPayload>) => {
      const { event, data, targetId, sourceId } = msg.data

      // A. 如果指定了 targetId，且不是发给我的 -> 忽略
      // (这里假设 myId 是窗口ID，或者是你传入的 panelId)
      if (targetId && targetId !== this.myId) return

      // B. 触发本地监听器
      // 注意：我们在本地触发时，标记它来自"外部"，避免死循环
      this.localBus.emit(event, { ...data, _fromRemote: true })
    }
  }

  /**
   * 注册监听 (用法和以前一样)
   */
  on(event: string, handler: Handler) {
    this.localBus.on(event, handler)
  }

  /**
   * 移除监听 (必须传入 handler 引用！)
   */
  off(event: string, handler: Handler) {
    this.localBus.off(event, handler)
  }

  /**
   * 发送事件
   * @param event 事件名
   * @param data 数据
   * @param scope 发送范围
   *    - 'local': 只在当前窗口触发 (默认)
   *    - 'global': 所有窗口都触发
   *    - string: 指定 ID (只发给特定 ID 的实例)
   */
  emit(event: string, data: any = {}, scope: 'local' | 'global' | string = 'local') {
    // 1. 总是触发本地 (除非有特殊需求)
    this.localBus.emit(event, data)

    // 2. 根据范围决定是否广播
    if (scope === 'local') return

    // 3. 构造广播包
    const payload: BusPayload = {
      event,
      data,
      sourceId: this.myId,
      targetId: scope === 'global' ? undefined : scope // 如果是 global 则 targetId 为空
    }

    this.channel.postMessage(payload)
  }
  
  // 设置当前实例的 ID (用于 Dockview 的 Panel ID 绑定)
  setId(id: string) {
    this.myId = id
  }

  destroy() {
    this.localBus.all.clear()
    this.channel.close()
  }
}

// 导出单例 (或者在组件里 new)
export const bus = new DistributedEventBus()

2. 在 Vue 组件中如何正确使用 (解决“全关闭”问题)

关键在于：在 onUnmounted 时，只移除自己的那个回调函数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<script setup lang="ts">
import { onMounted, onUnmounted } from 'vue'
import { bus } from './utils/event-bus'

// 假设这是 Dockview 里的一个 Panel
const props = defineProps<{ params: any }>()
const myPanelId = props.params.api.id

// 1. 设置 ID，以便能接收定向消息
bus.setId(myPanelId)

// 2. 定义处理函数 (必须提取出来，不能写匿名函数！)
// ❌ 错误：bus.on('refresh', () => { ... })  <- 匿名函数没法精确移除
// ✅ 正确：
const handleRefresh = (data: any) => {
  console.log(`[${myPanelId}] 收到刷新请求:`, data)
  // 业务逻辑...
}

onMounted(() => {
  // 注册
  bus.on('refresh-grid', handleRefresh)
})

onUnmounted(() => {
  // 3. 销毁时，只移除当前的 handleRefresh
  // 这样绝对不会影响其他窗口或 Tab 的 'refresh-grid' 监听
  bus.off('refresh-grid', handleRefresh)
})

// --- 触发示例 ---

const triggerLocal = () => {
  // 只刷新我自己这个窗口/Tab
  bus.emit('refresh-grid', { page: 1 }, 'local')
}

const triggerGlobal = () => {
  // 刷新所有打开这个页面的窗口 (比如用户修改了全局配置)
  bus.emit('refresh-grid', { theme: 'dark' }, 'global')
}

const triggerTarget = () => {
  // 假设你想刷新 ID 为 'user-list-panel' 的那个 Tab (无论它在哪个窗口)
  bus.emit('refresh-grid', { reload: true }, 'user-list-panel')
}
</script>

方案优缺点总结

  1. 解决“触发多次”：

    • 默认 scope: 'local'：大多数业务场景（比如点击按钮刷新当前表格）只需要本地触发。旧代码如果不改，默认就是 Local，行为和单页应用一致，不会广播风暴。
    • 需要同步时显式用 'global'。

  2. 解决“全部关闭”：

    • 强制要求传入 handler 进行 off。这是编程习惯的矫正。
    • mitt 库本身就支持精确移除。

  3. 适配 Dockview：

    • 通过 setId(panelId)，实现了基于 Panel ID 的定向通信。
    • 你可以实现：“在窗口 A 点击保存，自动刷新窗口 B 里的列表”这种高级功能。

迁移建议

你现在的项目里可能充斥着 bus.emit 和 bus.off。

  1. 搜索替换：把引入的老 EventBus 换成这个新的 DistributedEventBus。
  2. 默认行为：由于默认是 'local'，你直接替换后，大部分功能会恢复正常（不再乱广播）。
  3. 修复销毁逻辑：你需要人工检查所有 onUnmounted 或 beforeDestroy，把 bus.off('event') 改成 bus.off('event', myHandler)。
    • 如果老代码全是匿名函数怎么办？
    • 临时补救：在 DistributedEventBus 里维护一个 Map<PanelId, List<Handler>>，在组件销毁时调用 bus.clearCurrentScope()。但这比较复杂，推荐还是重构为命名函数。
]]> <h2 id="问题"><a href="#问题" class="headerlink" title="问题"></a>问题</h2><p>我现在做的是多窗口应用（基于electron-vite,vue3,和dokeview），现在有一个场景：我们原项目里面多出地方使用的事件总线模式，在组件挂载的时候注册事件，在组件销毁的时候off事件，现在改成多窗口应用后，就出现了打开了多个注册事件的窗口，事件触发的时候会触发多次，事件关闭的时候就全都关闭了。这种情况 有什么好的解决方案吗？</p>