# 低代码不该止步于"能跑"：Forge Admin 三大核心能力硬核升级解析
> 当低代码平台的天花板被吐槽了 5 年，是时候看看真正能"深度扩展"的方案长什么样了。
---
## 写在前面
低代码这个赛道，这两年有个很微妙的变化——大家不再争论"低代码会不会取代程序员"了，而是开始吐槽**"低代码做出来的东西，改又改不动，扔又舍不得"**。
核心痛点就一句话：**低代码平台能做的事情天花板太低，一旦需求超出平台能力，就得全部推倒重来。**
[Forge Admin](https://gitee.com/ForgeLab/forge-admin) 最近一轮更新，直接对着这个痛点开刀。7 月以来连续 40+ 次提交，把三个方向拉了一个大版本：
1. **低代码扩展能力**——新增「扩展代码工作台」，JS/CSS 沙箱隔离运行，低代码页面也能写自定义逻辑
2. **编码规则**——从一行模板字符串，重构为分段式可视化配置引擎
3. **多标签页交互**——拖拽排序、右键全功能、未保存红点、恢复关闭，全面对齐主流 IDE
这篇文章拆解这三个方向的技术实现，不讲营销话术，直接看代码和设计思路。
---
## 一、低代码扩展能力：让"能跑"变成"能扩展"
### 1.1 先说问题在哪
大部分低代码平台的表格组件，能力边界是固定的——分页、排序、搜索，到此为止。你想要一个"金额超过 10 万的行自动标红"的需求，平台不支持，你就只能：
- 方案 A：在低代码平台外手写一个完整页面（低代码白用了）
- 方案 B： fork 平台源码，改表格组件（维护噩梦）
Forge 的答案是 **方案 C：在低代码页面上直接写扩展代码，沙箱隔离运行**。
### 1.2 扩展代码工作台：JS + CSS 双通道
新增的 `lowcode-extension` 组件目录下有三个核心文件：
```
lowcode-extension/
├── ExtensionCodeWorkbench.vue # 工作台主组件
├── js/ExtensionSandboxHost.vue # JS 沙箱宿主
└── css/ScopedCssPreview.vue # CSS 隔离预览
```
**JS 扩展的隔离方案**——用 Web Worker：
```javascript
// ExtensionSandboxHost.vue 核心逻辑
function execute(script, context = {}, allowedFields = []) {
validateClientScript(script) // 1. 静态校验脚本
const safeContext = sanitizeExtensionContext( // 2. 白名单过滤上下文
context, allowedFields
)
const nonce = createNonce() // 3. 生成唯一 nonce
worker = new Worker(
new URL('./extension-sandbox.worker.js', import.meta.url),
{ type: 'module' }
)
// 4. 超时控制 + 输出大小限制
// - 执行超时默认 800ms
// - 输出上限 64KB
// - Worker 初始化超时 5000ms
}
```
为什么用 Worker 而不是 `eval` 或 `new Function`？三个原因：
| 维度 | eval/new Function | Web Worker 沙箱 |
|------|-------------------|-----------------|
| **DOM 访问** | 能访问主线程 DOM，有 XSS 风险 | 不能访问主线程 DOM |
| **崩溃隔离** | 脚本崩溃直接卡死主线程 | Worker 崩溃不影响主应用 |
| **超时控制** | 无法强制中断 | 可以 terminate Worker |
也就是说，用户在低代码页面上写的扩展 JS，**就算写了个死循环，也不会拖垮整个后台管理系统**。这在多租户场景下尤其重要——一个租户的扩展脚本出问题，不能影响其他租户。
**CSS 扩展的隔离方案**——用 iframe + 作用域选择器：
```javascript
// ScopedCssPreview.vue
const previewDocument = computed(() => {
return `
`
})
```
`