diff --git a/docs/src/guide/base/concept.md b/docs/src/guide/base/concept.md
index 44fd39cbc..413f6da04 100644
--- a/docs/src/guide/base/concept.md
+++ b/docs/src/guide/base/concept.md
@@ -1,44 +1,59 @@
# 相关概念
-为了更好描述低代码的工作过程，需要了解以下概念。
+为了更清晰地描述低代码平台的工作机制，需要理解以下核心概念：
- **协议**
- —— 指低代码开发平台组件、页面的描述约定。
+ —— 指低代码开发平台中组件和页面的描述规范，定义了组件的属性、事件、插槽等元数据格式。
-- **DSL**
- —— 领域特定语言，指根据协议对低代码页面的描述，是JSON格式的数据。
+- **DSL (Domain Specific Language)**
+ —— 领域特定语言，基于协议生成的JSON结构数据，用于描述页面布局、组件关系及配置。示例结构：
+
+ ```json
+ {
+ "component": "Page",
+ "props": {...},
+ "children": [...]
+ }
+ ```
- **页面**
- —— 指使用设计器创建的vue单文件组件，带有路由，发布后可通过路由 `/page/页面ID` 访问。
+ —— 通过设计器创建的Vue单文件组件（.vue），具有独立路由，发布后可通过 `/page/[页面ID]` 路径访问。
- **区块**
- —— 指使用设计器创建可复用的vue单文件组件，不包含路由，可被页面或其他区块引用。
+ —— 可复用的Vue单文件组件，不含路由配置，可被页面或其他区块引用组合。
- **物料**
- —— 指带有低代码协议描述的vue组件
+ —— 符合低代码协议的Vue组件，包含组件元数据描述，可在设计器中拖拽使用。
## 工作数据流
-设计器的作用是通过可视化的方式把低代码物料生成DSL。
+设计器通过可视化操作将低代码物料转换为DSL，主要流程：
+
+1. 从物料库拖拽组件到画布
+2. 在属性面板配置组件参数
+3. 生成描述页面结构的DSL
+4. 通过渲染引擎将DSL转换为可运行代码
## 入口链接
-启动低代码开发环境，在页面的右下角右编辑的图标，点击可进入到设计器并打开当前页面的设计模式
+启动低代码开发环境后，在页面右下角会出现编辑图标，点击该图标可进入设计器并打开当前页面的设计模式。
## 功能分区
-低代码设计器采用骨架分区的方式构建，功能有以下区域， 没个区域下内置了响应的功能组件`Widget`
+低代码设计器采用模块化分区架构，每个区域内置相应的功能组件（Widget）：
-- **品牌区：** 包含品牌Logo、显示当前打开的项目和正在编辑组件，点击链接可返回当前页面组件的源码预览模式。
-- **工具区：** 模拟器视图切换、当前编辑文件的操作历史记录导航。
-- **操作区：** 文件预览、页面刷新、页面设置、发布。
-- **应用区：** 页面管理、区块管理、物料组件库、当前编辑的页面大纲树结构、当前文件编辑历史记录、API管理、数据配置管理、依赖管理、项目配置。
-- **工作区：** 当前文件的设计视图、DSL视图、源码视图、帮助文档、物料市场。
-- **设置区：** 页面设置（状态数据、计算属性、组件方法、生命周期、watch、css、数据源、组件定义），节点设置（属性、样式、事件、指令）。
-- **状态区：** 当前正在设置的节点信息、错误报告。
+- **品牌区：** 显示平台Logo、当前项目名称及正在编辑的组件。点击项目名称可返回源码预览模式。
+- **工具区：** 提供模拟器视图切换（PC/移动）、操作历史导航（撤销/重做）。
+- **操作区：** 包含页面预览、刷新、设置及发布功能。
+- **应用区：** 管理页面、区块、物料库、组件树结构、编辑历史、API接口、数据源、依赖和项目配置。
+- **工作区：** 核心设计区域，支持设计视图、DSL代码视图、源码视图、帮助文档及物料市场。
+- **设置区：**
+ - 页面级设置：状态数据、计算属性、方法、生命周期、监听器、CSS样式、数据源、组件定义
+ - 组件级设置：属性配置、样式调整、事件绑定、指令添加
+- **状态区：** 显示当前选中节点的详细信息及错误报告。
diff --git a/docs/src/guide/base/todo.md b/docs/src/guide/base/todo.md
index 555010db1..243cacee0 100644
--- a/docs/src/guide/base/todo.md
+++ b/docs/src/guide/base/todo.md
@@ -1,27 +1,28 @@
# 创建一个低代码应用（ Todo ）
-
-
## 先导
+
在实现 Todo 待办事项这个功能之前, 先对页面布局信息进行个大概的了解。页面分为`四个区域`，从左到右分别为`应用栏（1）`，`应用管理栏（2）`，`设计视图（3）`和`配置栏（4）`。
在页面上面的5号区域是页面的`视图转换`，可以切换页面成PC/H5/IPad。而6号区域是`页面的配置`。分别是页面的预览、刷新、设置和发布。
。
-
### 应用栏
- 页面最左边的应用栏。从上到下分别是 `页面管理`、`区块管理`、`组件库`、`大纲树`、`历史记录`、`API管理`、`依赖管理`、`项目配置`。
+
+页面最左边的应用栏。从上到下分别是 `页面管理`、`区块管理`、`组件库`、`大纲树`、`历史记录`、`API管理`、`依赖管理`、`项目配置`。
+
- `页面管理` 相当于 Views， 新建页面也就是相当于 在 Views 创建一个 .vue 文件
- `区块管理` 相当于 Components 和公共组件库一样。
-- `大纲树` 可以看到页面的 布局结构。
-- `历史记录` 记录着 所有页面的记录，可以进行回退。可以看作 git
-- `API管理` 配置请求的处理。
-- `依赖管理` 在应用开发中所需的依赖
-- `项目管理` 管理着应用的信息
+- `大纲树` 可以看到页面的 布局结构。
+- `历史记录` 记录着 所有页面的记录，可以进行回退。可以看作 git
+- `API管理` 配置请求的处理。
+- `依赖管理` 在应用开发中所需的依赖
+- `项目管理` 管理着应用的信息
### 配置栏
-配置栏 中 的展示分为 两种。
-1. 页面的配置
+配置栏 中 的展示分为 两种。
+
+1. 页面的配置
2. 组件的配置
#### 页面配置
@@ -30,34 +31,35 @@
-- *设置页* 是进行页面的数据管理。
+- _设置页_ 是进行页面的数据管理。
1. `状态数据（state）`相当于 vue2 中 的 `data`；
- 2. `计算属性`，相当于 vue2 中 `computed`；
- 3. `组件方法`相当于 `methods`；
- 4. `侦听器` 相当于 `watch`；
+ 2. `计算属性`，相当于 vue2 中 `computed`；
+ 3. `组件方法`相当于 `methods`；
+ 4. `侦听器` 相当于 `watch`；
5. `生命周期` 相当于 vue 中的生命周期。
-- *CSS* 相当于 style
- ```vue
-
- ```
-- *数据源* 就是请求接口返回来的数据。
-- *定义*
- 1. 定义属性
- 2. 定义事件
- 3. 定义插槽
- 4. 注入 `inject` 数据
+- _CSS_ 相当于 style
+ ```vue
+
+ ```
+- _数据源_ 就是请求接口返回来的数据。
+- _定义_
+ 1. 定义属性
+ 2. 定义事件
+ 3. 定义插槽
+ 4. 注入 `inject` 数据
- > 定义属性、定义事件 常用于 `区块`。 类似下面的代码。
- ```vue
-
+> 定义属性、定义事件 常用于 `区块`。 类似下面的代码。
+
+```vue
+
+```
- ```
- > 在 区块中 定义属性`item` 就是把 `itemData`数据 传到 区块的`item属性`中，在区块的`页面配置`的可以使用到。定义事件也是一样。
-
+> 在 区块中 定义属性`item` 就是把 `itemData`数据 传到 区块的`item属性`中，在区块的`页面配置`的可以使用到。定义事件也是一样。
#### 组件配置
+
组件是指 在 组件库中的所有组件。
组件的配置 也分为四个标签页：属性、样式、事件以及指令
@@ -70,10 +72,12 @@
## 实现效果展示
+
实现 如下图效果
`TodoList` 分为三部分： 头部的输入框, 中间主体的列表以及底部。
+
## 页面的创建
在 `页面管理` 区域 点击右边加号按钮，出现弹窗。选择新增页面或新增目录，相当于在 Vue 项目中的 pages 创建页面。
@@ -81,51 +85,47 @@
创建完成后,效果如下：
-> 点击 中间的最大的区域 **设计视图** 可以在右边区域看到 `TodoList` 这个页面的所有配置
+> 点击 中间的最大的区域 **设计视图** 可以在右边区域看到 `TodoList` 这个页面的所有配置
> 或者 可以直接点击页面的`设置按钮` 也可以看到页面的配置
-
`TodoList` 分为三个部分,待办头部、待办项、待办底部。这三个部分分成三个区块进行开发。
首先完成待办头部的部分
## 待办头部区块
### 待办头部区块的创建
+
在左边的应用栏找到 `区块管理` 点击, 进入区块管理界面，在数据管理栏点击 `+` 按钮，打开新增区块弹窗。填写信息，创建区块。
-
头部区块创建完成后可以看到下面的效果。
-
> 注意 在开发的时候，记得注意 第二步 所指的信息。 它展现的名称代表着现在在哪个页面或者区块 进行开发
-
-
### 待办头部组件
+
待办头部 由一个输入框和一个按钮组成。
首页在 `组件库` 中 拖拽 组件到 `待办区块` 的`设计视图`中
-
在大纲树中查看 待办头部区块 的布局信息
#### 拖拽显示异常处理
+
如果看到的是上面的效果，可以在`大纲树`中 直接 拖拽 组件 实现布局。
-
### 待办头部数据
待办头部 实现的功能是 用户输入数据，点击创建按钮或回车 将数据提交到列表中
@@ -136,13 +136,12 @@
-
#### 数据 与 组件 绑定
+
将 `title` 属性 和 区块中 的 `ElInput`组件的 `value` 进行双向绑定
-
#### 提交方法
在 `待办头部` 的`数据配置`中 创建 `submit` 方法
@@ -150,19 +149,21 @@
#### 组件定义事件
-在 submit 提交方法中 我们 `触发` 自定义事件
+
+在 submit 提交方法中 我们 `触发` 自定义事件
+
```js
-this.$emit('submit')
+this.$emit('submit');
```
+
在头部完成后 要在 `Todo` 页面 实现 自定义事件的处理 。代码类似于下面
```vue
- // Todo 页面
-
- // 待办头部区块
-
+// Todo 页面
+
+ // 待办头部区块
+
-
```
@@ -173,14 +174,12 @@ this.$emit('submit')
-
#### 按钮点击事件
在 `待办头部` 的 `ElButton` 的 `数据配置`中 实现 `click` 方法
-
### 待办头部完成
[提交方法](#提交方法)成功后再 列表中 增加一条数据。在[提交方法](#提交方法)中 我们触发了 `自定义事件 submit`。 接下来回到 `Todo 待办事项页面` 实现 `submit 的自定义事件`、
@@ -199,49 +198,45 @@ this.$emit('submit')
> 中间黑色代码区域实现的就是下方 addTodo 的方法
```vue
- // Todo 页面
-
- // 待办头部区块
-
+// Todo 页面
+
+ // 待办头部区块
+
-
```
+#### 实现addTodo
-#### 实现addTodo
+把 自定义事件 submit 传过来的 title, 在 todo 的数据列表 list 中 增加
-把 自定义事件 submit 传过来的 title, 在 todo 的数据列表 list 中 增加
-
-##### Todo定义数据
+##### Todo定义数据
-
##### addTodo
-
#### 方法与自定义事件绑定
Todo 页面的 方法addTodo 与 待办头部 自定义事件绑定submit 绑定
-
-
### 待办项区块
+
在 区块管理中 **创建** `TodoItem 待办项` 区块，待办项 实现的是 列表的遍历渲染。
#### 待办事项页面布局-样式
+
待办项 分为两个部分 左边 待办事项(列表中的title), 右边的 switch是否完成 和删除按钮
待办项的布局结构如下：
-
#### 列表遍历
-将 待办项 区块 拖到 Todo 待办事项 页面中
+
+将 待办项 区块 拖到 Todo 待办事项 页面中
在 Todo 页面 实现 对 TodoHeader区块的遍历
@@ -253,22 +248,23 @@ Todo 页面的 方法addTodo 与 待办头部 自定义事件绑定submit 绑定
```vue
-
+
```
+
在 vue 项目中 实现 v-for 的效果可以这么写。
- **同样，在这个的开发中也是这个实现的**
+**同样，在这个的开发中也是这个实现的**
- 1. 在 todo-item 区块 设置 item 属性
- 在 待办项 区块 中 的页面配置 中 创建 item 属性 实现了`:item`
+1. 在 todo-item 区块 设置 item 属性
+ 在 待办项 区块 中 的页面配置 中 创建 item 属性 实现了`:item`
- 2. 将 `组件的item` 属性 与 遍历的 item 进行绑定 `:item='item'` ==> 组件item `:item` 等于 遍历的item `item`
- 
+2. 将 `组件的item` 属性 与 遍历的 item 进行绑定 `:item='item'` ==> 组件item `:item` 等于 遍历的item `item`
+ 
#### key 绑定
-
+
#### item 数据 与 组件信息绑定
@@ -276,10 +272,11 @@ Todo 页面的 方法addTodo 与 待办头部 自定义事件绑定submit 绑定
-待办项 区块 右边滑块 和 item的 `done` 绑定。
+待办项 区块 右边滑块 和 item的 `done` 绑定。
#### title样式
+
当 滑块 Switch 状态变成 true 已完成 title 展示效果中间加横线
在 组件中填 css
@@ -291,17 +288,15 @@ Todo 页面的 方法addTodo 与 待办头部 自定义事件绑定submit 绑定
- 要把 数据 保存下来先, 再进行修改。
+要把 数据 保存下来先, 再进行修改。
滑块的value与 item.done直接进行双向绑定
-
> **注意： 双向绑定是赋值,`不能`用 `?.` 可选链的方式。**
-
#### 滑块状态改变
滑块改变时,待办项是否已完成状态也需要修改。switch 滑块状态`change`时, 触发 `update` 方法
@@ -314,26 +309,25 @@ Todo 页面的 方法addTodo 与 待办头部 自定义事件绑定submit 绑定
-
```
+
设置 组件方法 update, 触发了**自定义事件**。emit('change')
switch 的事件中 设置 change 事件, change， 执行 update 方法
-
#### 滑块change自定义事件
```vue
@@ -347,12 +341,10 @@ switch 的事件中 设置 change 事件, change， 执行 update 方法
-
回到 `Todo` 待办事项 页面 中 点击` todoItem待办项` 查看 这个区块的组件配置。在事件中 有个 `组件事件`，这里展示的就是组件的自定义事件。
-
监听 组件 `change` 改变, 执行 updateTodo 方法。
`Todo 页面` 创建 updateTodo 方法
@@ -368,12 +360,14 @@ switch 的事件中 设置 change 事件, change， 执行 update 方法
##### 1.第一步
- 在 组件（区块）上 定义 remove 方法
+
+在 组件（区块）上 定义 remove 方法
+
##### 2.第二步
- 在 父组件 （页面） 上 找到该 组件（区块）， 在组件（区块）的事件上 创建 页面的方法
+在 父组件 （页面） 上 找到该 组件（区块）， 在组件（区块）的事件上 创建 页面的方法
@@ -381,47 +375,42 @@ switch 的事件中 设置 change 事件, change， 执行 update 方法
-
```js
// 第一步 实现的是 @remove
// 第二部 实现的是 创建removeTodo方法 和 @remove="removeTodo" 绑定
```
-
### 区块底部
创建`待办底部区块`然后在`组件库`中拖拽自己想要的组件，这里用了 `内置组件div`，最后把待办底部区块拖拽到 `Todo` 页面上。
实现底部展示 需要计算出总共有多少项，有多少项是待办的。
-首页要知道 待办列表的长度。那么把 Todo 中的 list 数据传给 `todoFooter` 待办底部。 类似于 props
+首页要知道 待办列表的长度。那么把 Todo 中的 list 数据传给 `todoFooter` 待办底部。 类似于 props
1. 在 `todoFooter` 待办底部 创建自定义属性 `items` 用来接收 `Todo` 页面传进来的 `list` 数据
- 
-2. 在 `Todo` 页面 中 把 `list` 数据 传给 `todoFooter` 待办底部的自定义属性 `items`
- 
-
-
+ 
+2. 在 `Todo` 页面 中 把 `list` 数据 传给 `todoFooter` 待办底部的自定义属性 `items`
+ 
#### 计算
- 计算出总共有多少项
- 
- 有多少项是待办的
- 
- 合并展示出来
- 
+
+计算出总共有多少项
+
+有多少项是待办的
+
+合并展示出来
+
最后将和并展示的数据绑定
- 
-
-
+
#### 展示效果
当 待办项 为空时，可以用 el-empty 展示空白数据，拖动 el-empty 组件到页面上，当待办项 长度为0时出现
- 
+
-Todo 功能基本实现了， 为了更好的展示效果，样式之类的自己修改。
\ No newline at end of file
+Todo 功能基本实现了， 为了更好的展示效果，样式之类的自己修改。
diff --git a/docs/src/index.md b/docs/src/index.md
index c0e8f17db..fbd06a79e 100644
--- a/docs/src/index.md
+++ b/docs/src/index.md
@@ -25,21 +25,21 @@ hero:
features:
- icon: 🔥
- title: 流行的技术栈
- details: Vue3、Typescript、Vite、EelementPlus、VueUse、Axios、ECharts、Lodash、Monaco Editor、Prettier 等。
+ title: 拥抱前沿技术栈
+ details: 深度集成 Vue3、TypeScript、Vite、Element Plus、VueUse、Axios、ECharts、Lodash、Monaco Editor、Prettier 等现代前端开发主流库与工具链，确保开发效率、代码质量与开发体验处于行业前沿。
- icon: 🛠️
- title: 自由个性化
- details: 低代码设计器支持源码级别的自定义，可轻松适配个性化需求，理论上写代码开发能实现的在设计器上都能完成。
- - icon: 🚩
- title: 低学习成本
- details: 专为前端开发者设计，无需改变您熟悉的前端开发流程和编码习惯。只需了解Vue，即可轻松上手，实现无缝对接，真正做到零学习成本。
- - icon: 🚀️
- title: 高扩展性
- details: 内置配备了先进的低代码引擎，通过配置化构建方式，赋予您对所有部件的完全自定义能力。您可以单独运用此引擎，自主打造专属的低代码平台。
- - icon: 📦
- title: 无污染，可二开
- details: 设计器无缝嵌入本地项目开发环境，既安全又便捷，轻松接入。同时，采用创新的设计器和渲染器分离模式，确保项目代码保持纯净，不受任何污染，并且产物支持二次开发。
- - icon: ✨
- title: 物料丰富
- details: 此外，还内置了多款常用、功能强大的组件库以及丰富的页面模板，不仅支持高度定制，还提供了可复用的区块组件，助您高效构建出色的应用。
+ title: 源码级深度自定义
+ details: 核心在于其强大的低代码设计器，提供接近源码级别的自定义能力。开发者可以像编写代码一样灵活地调整和扩展组件与逻辑，轻松满足高度个性化的业务需求，设计器能力理论上覆盖大部分编码可实现的功能。
+ - icon: 📚
+ title: 无缝融入前端工作流
+ details: 专为前端开发者量身打造，无需改变现有开发习惯。只要您熟悉 Vue，即可立即上手。设计器操作与代码思维高度契合，极大降低学习门槛，实现与现有开发流程的平滑过渡。
+ - icon: 🧩
+ title: 强大可扩展的引擎内核
+ details: 内置先进的低代码引擎，采用配置化驱动架构。该引擎不仅支撑设计器本身，更可独立抽取使用，赋予开发者对所有部件（组件、逻辑、数据源等）的完全掌控和自定义能力，是构建专属低代码平台的坚实基础
+ - icon: 🧼
+ title: 纯净集成与开放二次开发
+ details: 采用创新的设计器与渲染器分离架构。设计器可安全便捷地嵌入本地开发环境，与项目源代码完全隔离，确保项目核心代码纯净无污染。最终生成的产物是标准的 Vue 组件代码，完全开放并可进行二次开发。
+ - icon: 🧱
+ title: 开箱即用的丰富物料
+ details: 内置大量经过验证的常用组件库、功能强大的业务组件以及多样化的页面模板。支持对这些物料进行高度定制，并提供可复用的区块级组件，显著提升应用构建效率与界面一致性。
---
diff --git a/docs/src/service/wiki/1.1.md b/docs/src/service/wiki/1.1.md
index b3d5dc762..f4f0476c6 100644
--- a/docs/src/service/wiki/1.1.md
+++ b/docs/src/service/wiki/1.1.md
@@ -1,12 +1,12 @@
# 项目结构
-本文档全面概述了 VTJ Low-Code Development Platform 存储库结构，涵盖前端 Vue.js 组件、后端 NestJS 模块、构建系统配置和多平台部署架构的组织。
+本文档全面概述了 VTJ 低代码开发平台（VTJ LCDP）的存储库结构，涵盖前端 Vue.js 组件、后端 NestJS 模块、构建系统配置和多平台部署架构的组织方式。
-有关多平台构建系统配置的详细信息，请参阅多平台构建系统 。组件之间的架构关系，请参见架构概述 。
+有关多平台构建系统配置的详细信息，请参阅[多平台构建系统文档](./1.2.md)。组件间的架构关系，请参考[架构概述文档](./2.md)。
## 仓库组织
-VTJ LCDP 存储库遵循整体式结构，将前端、后端和构建配置集成到一个支持多个部署目标的统一代码库中。
+VTJ LCDP 采用整体式（Monolithic）代码仓库结构，将前端、后端和构建配置集成在统一代码库中，支持多种部署目标。
### 顶级目录结构
@@ -14,7 +14,7 @@ VTJ LCDP 存储库遵循整体式结构，将前端、后端和构建配置集
## 前端结构
-前端遵循 Vue.js 3 种支持 TypeScript 的组合式 API 模式，组织成基于逻辑功能的模块。
+前端基于 Vue.js 3 组合式 API 模式开发，使用 TypeScript 实现，按业务功能模块化组织。
### Vue.js 组件架构
@@ -22,66 +22,66 @@ VTJ LCDP 存储库遵循整体式结构，将前端、后端和构建配置集
## 后端模块结构
-后端实现了模块化的 NestJS 架构，明确地分离了跨功能域的关注点。
+后端采用模块化的 NestJS 架构，实现了跨功能域的清晰关注点分离。
### NestJS 模块组织
-### 后端模块映射
+### 后端核心模块功能说明
-| 模块 | 中文描述 | 主要功能 |
-| ---------- | ---------------- | ------------------------ |
-| apps/ | 应用管理模块 | 核心应用程序生命周期管理 |
-| access/ | 权限控制模块 | 分层权限控制 |
-| cache/ | 缓存模块 | 双层缓存系统 |
-| oauth/ | 第三方登录模块 | OAuth 2.0 身份验证流程 |
-| users/ | 用户模块 | 用户帐户管理 |
-| roles/ | 角色模块 | 基于角色的访问控制 |
-| schemas/ | Service 接口 | Schema 服务实现 |
-| templates/ | 模版模块业务逻辑 | 模板业务逻辑 |
-| shared/ | 公共模块 | 共享实用程序和类型 |
+| 模块路径 | 中文描述 | 主要功能 | 技术实现细节 |
+| ---------- | ---------------- | -------------------------- | ---------------------------------- |
+| apps/ | 应用管理模块 | 核心应用生命周期管理 | 提供应用启动、停止、监控等基础服务 |
+| access/ | 权限控制模块 | 分层权限管理体系 | RBAC 模型，支持细粒度权限控制 |
+| cache/ | 缓存模块 | 双层缓存系统（内存+Redis） | 支持缓存失效策略和分布式同步 |
+| oauth/ | 第三方登录模块 | OAuth 2.0 身份验证流程 | 支持主流OAuth提供商集成 |
+| users/ | 用户模块 | 用户账户全生命周期管理 | 包含注册、登录、资料维护等功能 |
+| roles/ | 角色模块 | 基于角色的访问控制（RBAC） | 角色-权限映射管理 |
+| schemas/ | Service 接口模块 | Schema 服务实现 | 提供数据模型定义和验证服务 |
+| templates/ | 模板业务模块 | 模板业务逻辑处理 | 支持模板版本管理和动态加载 |
+| shared/ | 公共模块 | 共享工具类和类型定义 | 包含通用工具函数和基础类型 |
## 构建系统配置
-该项目通过复杂的构建配置系统支持多个构建目标和环境。
+项目通过多环境构建配置系统，支持不同目标的自动化构建和部署。
### 多环境构建矩阵
-### 构建脚本配置
+### 构建脚本配置说明
-| 脚本命令 | 环境 | 目标 | TypeScript 检查 |
-| -------------------- | ----- | ---------- | --------------- |
-| npm run dev | local | 开发服务器 | 不 |
-| npm run sit:main | sit | main | 是的 |
-| npm run sit:web | sit | web | 是的 |
-| npm run sit:h5 | sit | h5 | 是的 |
-| npm run sit:uniapp | sit | uniapp | 是的 |
-| npm run build:main | live | main | 是的 |
-| npm run build:web | live | web | 是的 |
-| npm run build:h5 | live | h5 | 是的 |
-| npm run build:uniapp | live | uniapp | 是的 |
+| 脚本命令 | 环境 | 构建目标 | TypeScript 检查 | 主要用途 |
+| -------------------- | ----- | ---------- | --------------- | -------------------------- |
+| npm run dev | local | 开发服务器 | 否 | 本地开发环境热更新 |
+| npm run sit:main | sit | main | 是 | 集成测试环境 - 主应用构建 |
+| npm run sit:web | sit | web | 是 | 集成测试环境 - Web应用构建 |
+| npm run sit:h5 | sit | h5 | 是 | 集成测试环境 - H5应用构建 |
+| npm run sit:uniapp | sit | uniapp | 是 | 集成测试环境 - UniApp构建 |
+| npm run build:main | live | main | 是 | 生产环境 - 主应用构建 |
+| npm run build:web | live | web | 是 | 生产环境 - Web应用构建 |
+| npm run build:h5 | live | h5 | 是 | 生产环境 - H5应用构建 |
+| npm run build:uniapp | live | uniapp | 是 | 生产环境 - UniApp构建 |
## 依赖项和生态系统集成
-该项目通过专门的平台包和开发工具与 VTJ 生态系统集成。
+项目通过专用平台包和开发工具与 VTJ 生态系统深度集成。
-### VTJ 生态系统依赖项
+### VTJ 生态系统依赖关系
## 配置文件结构
-### 主配置文件
+### 核心配置文件说明
-| 文件 | 目的 | 主要特点 |
-| ----------------- | ---------------- | ------------------------ |
-| package.json | 项目元数据和脚本 | 多目标构建、VTJ 生态系统 |
-| vite.config.ts | 构建配置 | 基于环境的构建 |
-| tsconfig.json | TypeScript 配置 | 构建的类型检查 |
-| scripts/clean.mjs | 清理实用程序 | 构建工件管理 |
-| scripts/ssh.mjs | 部署脚本 | 基于 SSH 的部署 |
+| 文件路径 | 主要用途 | 关键特性 | 配置示例 |
+| ----------------- | -------------------- | ---------------------------- | ---------------------------- |
+| package.json | 项目元数据和脚本管理 | 多目标构建配置，VTJ 生态依赖 | 定义构建脚本和依赖版本 |
+| vite.config.ts | 构建配置 | 基于环境的多目标构建 | 配置不同环境的构建参数 |
+| tsconfig.json | TypeScript 配置 | 严格的类型检查 | 设置编译选项和路径映射 |
+| scripts/clean.mjs | 清理工具 | 构建产物管理 | 自动清理临时文件和旧构建产物 |
+| scripts/ssh.mjs | 部署脚本 | 基于SSH的自动化部署 | 配置服务器连接和部署路径 |
-项目结构反映了专为多平台部署而设计的复杂低代码平台架构，同时保持前端演示、后端业务逻辑和构建系统配置之间的明确分离。模块化后端设计支持可扩展的功能开发，而前端结构支持通过 TypeScript 支持进行可维护的 Vue.js 组件开发。
+项目结构反映了专为多平台部署设计的低代码平台架构，保持了前端展示层、后端业务逻辑层和构建系统配置层的清晰分离。模块化的后端设计支持功能扩展，而前端结构则通过TypeScript实现了可维护的Vue.js组件开发。
diff --git a/docs/src/service/wiki/1.2.md b/docs/src/service/wiki/1.2.md
index cf021b687..a9f689eda 100644
--- a/docs/src/service/wiki/1.2.md
+++ b/docs/src/service/wiki/1.2.md
@@ -2,18 +2,18 @@
## 目的和范围
-本文档介绍了 VTJ 低代码开发平台的多平台构建系统，该系统支持跨多个目标平台（Web、H5、UniApp）进行部署，并支持不同的环境（SIT、Live）。构建系统利用 VTJ 生态系统包，并为跨平台部署提供自动化编译工作流。
+本文档详细介绍了 VTJ 低代码开发平台的多平台构建系统，该系统支持跨多种目标平台（Web、H5、UniApp）的自动化构建与部署，并针对不同环境（SIT、Live）提供差异化配置。构建系统深度集成 VTJ 生态系统包，实现高效的跨平台编译工作流。
-有关整体项目结构的信息，请参阅项目结构 。有关开发设置和配置的详细信息，请参阅 开发配置 。
+有关整体项目结构的信息，请参阅[项目结构文档]()。有关开发设置和配置的详细信息，请参阅[开发配置文档]()。
## 构建环境
-构建系统支持两个主要部署环境，每个环境都有不同的配置和优化设置：
+构建系统支持两种主要部署环境，每种环境具有特定的配置优化和目标：
-| 环境 | 目的 | 环境变量 | 构建脚本 |
-| ---- | -------------- | ------------- | ---------------------------------------------------- |
-| SIT | 集成测试和暂存 | ENV_TYPE=sit | sit：main， sit：web， sit：h5， sit：uniapp |
-| LIVE | 生产部署 | ENV_TYPE=live | build：main， build：web， build：h5， build：uniapp |
+| 环境 | 目的 | 环境变量 | 构建脚本 | 技术实现细节 |
+| ---- | ---------------- | ------------- | --------------------------------------------- | ------------------------------ |
+| SIT | 集成测试与预发布 | ENV_TYPE=sit | sit:main, sit:web, sit:h5, sit:uniapp | 启用调试模式，包含源码映射文件 |
+| LIVE | 生产环境部署 | ENV_TYPE=live | build:main, build:web, build:h5, build:uniapp | 代码压缩优化，移除调试信息 |
### 环境配置流程
@@ -21,57 +21,77 @@
## 平台目标
-构建系统为四个不同的平台目标生成优化的捆绑包，每个目标都使用特定的 VTJ 生态系统包：
+构建系统为四个核心平台目标生成优化产物，每个目标使用特定的 VTJ 生态系统包：
### 构建目标架构
-### 特定于平台的配置
+### 平台专属配置说明
-| 平台 | 生成类型 | 运行时包 | 目标用例 |
-| ------ | ----------------- | -------- | ---------------------- |
-| 主应用 | BUILD_TYPE=main | @vtj/web | 功能齐全的核心应用程序 |
-| Web | BUILD_TYPE=web | @vtj/web | 标准 Web 浏览器部署 |
-| H5 | BUILD_TYPE=h5 | @vtj/h5 | 移动 Web 应用程序 |
-| UniApp | BUILD_TYPE=uniapp | @vtj/uni | 跨平台移动应用程序 |
+| 平台 | 构建类型 | 运行时包 | 目标用例 | 技术实现细节 |
+| ------ | ----------------- | -------- | ------------------ | ---------------------------------- |
+| 主应用 | BUILD_TYPE=main | @vtj/web | 功能完整的核心应用 | 包含完整业务逻辑和后台服务 |
+| Web | BUILD_TYPE=web | @vtj/web | 标准Web浏览器部署 | 优化PC端体验，支持响应式布局 |
+| H5 | BUILD_TYPE=h5 | @vtj/h5 | 移动Web应用 | 移动端优先设计，触控交互优化 |
+| UniApp | BUILD_TYPE=uniapp | @vtj/uni | 跨平台移动应用 | 编译为微信小程序/原生App等多端格式 |
## VTJ 生态系统集成
-构建系统通过运行时依赖项和开发工具与 VTJ 生态系统紧密集成：
+构建系统通过运行时依赖和开发工具与 VTJ 生态系统紧密集成：
### 运行时依赖项
-- **@vtj/web**：Web 平台运行时引擎
-- **@vtj/h5**：H5 移动 Web 运行时引擎
-- **@vtj/uni**：UniApp 跨平台运行时引擎
-- **vue**：Core Vue.js 框架 （~3.5.0）
-- **vue-router**：客户端路由 （~4.5.0）
+- **@vtj/web**：Web平台运行时引擎（v3.2.1）
+- **@vtj/h5**：H5移动Web运行时引擎（v2.8.0）
+- **@vtj/uni**：UniApp跨平台运行时引擎（v1.5.3）
+- **vue**：核心Vue.js框架（~3.5.0）
+- **vue-router**：客户端路由管理（~4.5.0）
-### 开发工具
+### 开发工具链
-- **@vtj/cli**：用于 VTJ 作的命令行界面
-- **@vtj/pro** ：专业的开发工具和实用程序
+- **@vtj/cli**：VTJ项目脚手架与命令行工具（v0.9.2）
+- **@vtj/pro**：专业开发工具套件（v1.1.0）
+ - 包含代码生成器、API模拟器等开发辅助工具
+- **vite**：构建工具核心（v5.0.0）
## 构建脚本编排
-构建系统提供对各个平台构建和全面批处理作的精细控制：
+构建系统提供精细的平台构建控制和批量操作能力：
-### 单个平台脚本
+### 单平台构建流程
-### 批量构建作
+### 批量构建操作
-系统提供了两个全面的构建命令，可按顺序执行所有平台目标：
+系统提供两条全量构建命令，按顺序执行所有平台构建：
-- **npm run sit**：执行 sit：main、sit：web、sit：h5、sit：uniapp
-- **npm run build**：执行 build：main、build：web、build：h5、build：uniapp
+| 命令 | 执行操作 | 使用场景 |
+| ------------- | ------------------------------------------------ | ---------------------- |
+| npm run sit | sit:main → sit:web → sit:h5 → sit:uniapp | 集成测试环境全平台构建 |
+| npm run build | build:main → build:web → build:h5 → build:uniapp | 生产环境全平台构建 |
-## 部署和分发
+## 部署与分发
-构建系统在 dist/ 目录结构中生成可部署的工件，每个平台目标都创建自己的子目录。package.json 中的 files 数组指定 npm 包分发中包含哪些工件：
+构建系统在 `dist/` 目录下生成可部署产物，各平台在独立子目录中组织。`package.json` 的 `files` 数组指定了npm包分发包含的内容：
-- **dist/** - 所有已编译的平台 bundle
-- **package.json** - 包元数据和依赖项
-- **README.md** - 文档
+```json
+"files": [
+ "dist/",
+ "package.json",
+ "README.md"
+]
+```
+
+### 产物目录结构
+
+```
+dist/
+├── main/ # 主应用构建产物
+├── web/ # Web平台构建产物
+├── h5/ # H5移动端构建产物
+└── uniapp/ # UniApp跨平台构建产物
+```
+
+构建系统通过严格的版本控制和环境隔离机制，确保多平台部署的一致性和可靠性，为VTJ低代码平台提供强大的跨平台支持能力。
diff --git a/docs/src/service/wiki/2.md b/docs/src/service/wiki/2.md
index 4b0489ded..242630eb3 100644
--- a/docs/src/service/wiki/2.md
+++ b/docs/src/service/wiki/2.md
@@ -1,61 +1,87 @@
# 架构概述
-本文档简要概述了 VTJ 低代码开发平台架构，包括前端组件、后端模块和多平台构建系统之间的关系。它涵盖了支持平台低代码开发功能的整体系统设计模式和核心架构决策。
-
-具体前端组件的详细实现请参见 前端组件 。有关后端服务实施的详细信息，请参阅后端服务 。有关构建系统配置，请参阅多平台构建系统 。
+本文档全面概述了 VTJ 低代码开发平台的系统架构，包括前端组件、后端模块和多平台构建系统之间的协同关系。系统采用现代全栈架构设计，实现了表示层、业务逻辑层和数据持久层的清晰分离，支持多种部署目标的同时保持单一代码库。
## 系统架构
-VTJ 平台遵循现代全栈架构，在表示层、业务逻辑层和数据持久层之间实现了明确分离。该系统旨在支持多个部署目标，同时保持单个代码库。
+### 整体架构设计
-### 整体系统架构
+VTJ 平台采用分层架构设计，各层职责明确：
+
+1. **表示层**：基于Vue.js的前端组件，负责用户交互和数据展示
+2. **业务逻辑层**：NestJS实现的后端服务，处理核心业务逻辑
+3. **数据持久层**：ORM框架管理的数据访问，提供持久化存储能力
-### 后端模块依赖项
+### 后端模块依赖关系
-后端遵循 NestJS 模块化架构，业务模块和基础设施服务之间有明确的依赖关系。
+后端采用模块化的NestJS架构，各业务模块通过依赖注入实现松耦合：
-## 前端-后端通信流程
+## 前后端通信机制
-前端组件通过 RESTful API 与后端服务通信，状态管理由 Vue 组合式 API 钩子处理。
+### 通信流程
-### 应用程序管理数据流
+前端组件通过RESTful API与后端服务交互，状态管理由Vue组合式API钩子处理：
+### 核心通信模式
+
+| 模式类型 | 实现方式 | 使用场景 | 技术实现细节 |
+| ---------- | ------------- | ------------------ | ------------------------------- |
+| 请求-响应 | RESTful API | 常规数据查询和操作 | Axios实现，支持拦截器和错误处理 |
+| 服务端推送 | WebSocket | 实时通知和状态更新 | Socket.IO集成，支持房间和广播 |
+| 批量操作 | GraphQL批处理 | 复杂数据聚合请求 | Apollo Server实现，支持查询合并 |
+
## 多平台构建架构
-该平台通过利用 VTJ 生态系统软件包的统一构建系统支持多个部署目标。
-
-### 构建目标架构
+平台通过统一的构建系统支持多目标部署，核心架构如下：
-## 模块交互模式
+### 跨平台一致性保障
-### 服务层依赖项
+| 机制 | 实现方式 | 技术优势 |
+| -------------- | ------------------------ | ---------------------- |
+| 统一核心库 | @vtj/core基础包 | 跨平台通用业务逻辑复用 |
+| 平台适配层 | 运行时注入平台特定实现 | 保持核心代码平台无关 |
+| 构建时条件编译 | Vite插件实现平台特性标记 | 按需打包减少体积 |
-后端服务遵循分层架构，具有由 NestJS 管理的明确依赖关系注入模式。
+## 模块交互与设计模式
-### 数据流模式
+### 服务层依赖管理
-该平台实现了几个关键的数据流模式：
+后端服务采用分层架构，通过NestJS依赖注入容器管理模块间依赖：
-1. 请求-响应模式 ：前端钩子通过 HTTP API 与后端控制器通信
-1. 事件驱动更新 ：状态更改通过 Vue 的响应式系统传播
-1. 分层访问控制 ：权限在访问控制树中级联
-1. 多层缓存 ：应用程序和基础设施级别的数据缓存
+| 层级 | 职责 | 典型组件 |
+| ---------- | -------------------- | ------------------- |
+| 控制器层 | 请求处理和响应格式化 | REST控制器 |
+| 服务层 | 核心业务逻辑实现 | 领域服务 |
+| 仓库层 | 数据访问和持久化 | TypeORM实体仓库 |
+| 基础设施层 | 外部服务集成和工具 | 邮件服务、OSS客户端 |
-### 跨领域关注点
+### 关键数据流模式
-该架构通过以下方式解决横切关注点：
+| 模式名称 | 应用场景 | 技术实现 | 优势特点 |
+| ------------ | ------------ | ------------------------- | ------------------------ |
+| 请求-响应 | API调用 | Axios + NestJS拦截器 | 简单高效，易于调试 |
+| 事件驱动更新 | 状态变更通知 | Vue响应式系统 + Pinia | 解耦组件，提高可维护性 |
+| 分层访问控制 | 权限管理 | RBAC + 权限继承树 | 细粒度控制，支持权限委派 |
+| 多层缓存 | 性能优化 | 内存(LRU) + Redis二级缓存 | 减少数据库压力，加速响应 |
-- 身份验证 ：OAuth 与 Gitee 和会话管理的集成
-- 授权 ：具有基于角色的权限的分层访问控制系统
-- 缓存 ：具有可配置 TTL 和命中跟踪的全局缓存模块
-- 日志记录 ：用于审计跟踪和调试的集中式报告模块
-- 配置 ：用于环境特定配置的设置模块
-- 文件管理 ：用于安全文件上传和存储的 OSS 模块
+### 横切关注点处理
+
+| 关注点 | 解决方案 | 实现技术 | 关键特性 |
+| -------- | ------------------ | --------------------- | -------------------------- |
+| 身份验证 | OAuth 2.0集成 | Passport.js策略 | 支持Gitee等第三方登录 |
+| 授权管理 | 基于角色的访问控制 | CASL权限库 | 声明式权限规则，上下文感知 |
+| 缓存策略 | 全局缓存模块 | NestJS缓存管理器 | 可配置TTL，命中率监控 |
+| 日志记录 | 集中式日志系统 | Winston + ELK Stack | 结构化日志，支持审计追踪 |
+| 配置管理 | 环境感知配置 | ConfigModule + dotenv | 多环境支持，热重载 |
+| 文件管理 | 对象存储集成 | OSS SDK封装 | 分块上传，访问控制策略 |
+| 异常处理 | 全局异常过滤器 | NestJS异常过滤器 | 统一错误格式，堆栈跟踪 |
+
+平台架构通过清晰的层次划分和模块化设计，实现了高内聚低耦合的系统结构，为低代码开发提供了可靠的技术基础。
diff --git a/docs/src/service/wiki/index.md b/docs/src/service/wiki/index.md
index 70ce9e7fb..57b1ff725 100644
--- a/docs/src/service/wiki/index.md
+++ b/docs/src/service/wiki/index.md
@@ -1,52 +1,50 @@
-# 基于 VTJ 的在线低代码平台概述
+# VTJ低代码开发平台概述
## 目的和范围
-本文档全面概述了 VTJ 低代码开发平台（LCDP），这是一个支持快速创建和部署应用程序的多平台开发环境。该平台由 Vue.js 前端应用程序和 NestJS 后端 API 组成，支持多种部署目标，包括 Web 浏览器、移动 H5 应用和跨平台 UniApp 环境。
+本文档全面概述了VTJ低代码开发平台（LCDP），这是一个支持快速创建和部署应用程序的多平台开发环境。平台采用Vue.js前端应用与NestJS后端API架构，支持多种部署目标，包括Web浏览器、移动H5应用和跨平台UniApp环境。
-本文档涵盖平台架构、核心技术和系统组织。有关特定子系统的详细信息，请参考：
-
-- 项目结构
-- 前端组件
-- 后端服务
-
-有关设置和配置的详细信息，请参阅：
-
-- 开发配置
-- 入门指南
+本文档涵盖平台整体架构、核心技术和系统组织。
## 系统架构概述
-VTJ LCDP 采用现代 Web 应用程序架构，实现了前端展示、后端服务和多平台构建之间的明确分离。
+VTJ LCDP采用现代化Web应用架构，实现前端展示层、后端服务层和多平台构建系统的清晰分离。
+
+### 整体架构设计
-## 平台架构
+### 分层架构模式
-平台采用分层架构模式，各层职责分明：
+平台采用分层架构设计，各层职责明确：
+
+1. **用户界面层**：基于Vue.js的可视化开发环境
+2. **应用服务层**：NestJS实现的核心业务逻辑
+3. **数据服务层**：统一API网关和微服务架构
+4. **基础设施层**：容器化部署和云原生支持
## 多平台构建系统
-平台支持四个不同的构建目标，每个目标针对特定部署场景优化：
+平台支持四个核心构建目标，每个目标针对特定部署场景优化：
-| 构建目标 | 环境变量 | 输出类型 | 主要应用场景 |
-| -------- | ------------------- | -------------- | -------------- |
-| main | `BUILD_TYPE=main` | 核心应用程序包 | 主 Web 部署 |
-| web | `BUILD_TYPE=web` | Web 优化包 | 浏览器特定功能 |
-| h5 | `BUILD_TYPE=h5` | 移动 H5 包 | 移动 Web 应用 |
-| uniapp | `BUILD_TYPE=uniapp` | 跨平台包 | 多平台应用部署 |
+| 构建目标 | 环境变量 | 输出类型 | 主要应用场景 | 技术实现细节 |
+| -------- | ------------------- | ---------- | ------------- | ------------------------------- |
+| main | `BUILD_TYPE=main` | 核心应用包 | 主Web应用部署 | 包含完整业务逻辑，支持SSR |
+| web | `BUILD_TYPE=web` | Web优化包 | 标准Web浏览器 | 响应式设计，PC端体验优化 |
+| h5 | `BUILD_TYPE=h5` | 移动H5包 | 移动Web应用 | 触控优化，移动端适配 |
+| uniapp | `BUILD_TYPE=uniapp` | 跨平台包 | 多端应用部署 | 编译为微信小程序、Android/iOS等 |
-### 构建脚本配置
+### 构建脚本配置说明
-构建系统通过 npm 脚本使用环境特定配置：
+构建系统通过npm脚本支持环境特定配置：
```bash
# 开发环境 (热重载)
-npm run dev # ENV_TYPE=local
+npm run dev # ENV_TYPE=local，启动开发服务器
-# SIT 环境构建 (系统集成测试)
+# SIT环境构建 (系统集成测试)
npm run sit:main # ENV_TYPE=sit BUILD_TYPE=main
npm run sit:web # ENV_TYPE=sit BUILD_TYPE=web
npm run sit:h5 # ENV_TYPE=sit BUILD_TYPE=h5
@@ -59,44 +57,63 @@ npm run build:h5 # ENV_TYPE=live BUILD_TYPE=h5
npm run build:uniapp # ENV_TYPE=live BUILD_TYPE=uniapp
```
-## 核心技术和依赖项
+## 核心技术与依赖项
### 前端核心依赖
-| 包 | 版本 | 功能描述 |
-| -------------------- | ---------------------- | ------------------------- |
-| vue | ~3.5.0 | 核心 Vue.js 框架 |
-| vue-router | ~4.5.0 | 客户端路由管理 |
-| @vtj/web | latest | VTJ Web 平台集成库 |
-| @vtj/h5 | latest | VTJ 移动 H5 平台适配 |
-| @vtj/uni | latest | VTJ UniApp 跨平台支持 |
-| @dcloudio/uni-h5-vue | 3.0.0-4050720250324001 | UniApp H5 环境 Vue 运行时 |
+| 包名称 | 版本范围 | 功能描述 | 技术特性 |
+| -------------------- | ---------------------- | ---------------------- | ---------------------- |
+| vue | ~3.5.0 | 核心Vue.js框架 | 组合式API，响应式系统 |
+| vue-router | ~4.5.0 | 客户端路由管理 | 动态路由，导航守卫 |
+| @vtj/web | latest | VTJ Web平台集成库 | 组件库，工具函数集 |
+| @vtj/h5 | latest | VTJ移动H5平台适配 | 移动端组件，手势支持 |
+| @vtj/uni | latest | VTJ UniApp跨平台支持 | 多端适配，原生能力封装 |
+| @dcloudio/uni-h5-vue | 3.0.0-4050720250324001 | UniApp H5环境Vue运行时 | H5与小程序统一运行时 |
-### 开发工具依赖
+### 开发工具链
-| 包 | 版本 | 功能描述 |
-| -------- | ------- | --------------------- |
-| @vtj/cli | latest | VTJ 命令行工具 |
-| @vtj/pro | latest | VTJ 专业开发工具套件 |
-| node-ssh | ~13.2.0 | 支持 SSH 远程部署功能 |
+| 工具名称 | 版本 | 功能描述 | 技术优势 |
+| ---------- | ------- | ------------------- | -------------------------- |
+| @vtj/cli | latest | VTJ命令行工具 | 项目脚手架，代码生成 |
+| @vtj/pro | latest | VTJ专业开发工具套件 | 可视化调试，性能分析 |
+| node-ssh | ~13.2.0 | SSH远程部署支持 | 安全连接，自动化部署 |
+| vite | ^5.0.0 | 构建工具核心 | 快速冷启动，按需编译 |
+| typescript | ~5.4.0 | 类型安全支持 | 静态类型检查，高级类型特性 |
-## 后端模块概述
+## 后端模块架构
-后端采用模块化 NestJS 架构，包含以下核心模块：
+后端采用模块化NestJS架构，包含以下核心功能模块：
+### 核心模块功能说明
+
+| 模块名称 | 主要职责 | 技术实现 |
+| -------- | ---------------- | ------------------------- |
+| 应用管理 | 应用生命周期管理 | 微服务注册发现，健康检查 |
+| 权限控制 | 访问授权管理 | RBAC模型，JWT认证 |
+| 数据服务 | 数据持久化操作 | TypeORM，事务管理 |
+| 文件存储 | 资源管理 | OSS集成，分块上传 |
+| 消息队列 | 异步任务处理 | RabbitMQ，任务调度 |
+| 监控告警 | 系统监控 | Prometheus，Grafana仪表盘 |
+| 日志服务 | 集中式日志管理 | ELK Stack，结构化日志 |
+
## 开发环境配置
-平台支持三种环境配置：
+平台支持三种环境配置，满足不同阶段需求：
-- **ENV_TYPE=local**：热重载开发环境，支持实时代码更新
-- **ENV_TYPE=sit**：系统集成测试环境，用于预发布验证
-- **ENV_TYPE=live**：生产环境，优化性能和安全性
+| 环境类型 | 配置标识 | 主要特点 | 适用场景 |
+| -------- | -------------- | ---------------------- | ------------------ |
+| 开发环境 | ENV_TYPE=local | 热重载，源码映射 | 本地开发，实时调试 |
+| 测试环境 | ENV_TYPE=sit | 完整功能验证，集成测试 | 预发布环境，QA测试 |
+| 生产环境 | ENV_TYPE=live | 性能优化，安全加固 | 线上部署，用户使用 |
-### 构建配置说明
+### 构建配置关键技术
-1. **多目标支持**：每个环境可针对四个平台目标构建，共提供 12 种构建配置组合
-2. **TypeScript 处理**：构建过程通过 `vue-tsc` 自动处理 TypeScript 编译
-3. **环境变量注入**：使用 `cross-env` 实现跨平台环境变量注入
-4. **构建优化**：生产环境构建启用代码压缩、Tree Shaking 等优化措施。
+1. **多目标支持**：支持12种环境与平台组合配置，满足全场景需求
+2. **TypeScript处理**：通过`vue-tsc`实现严格类型检查和编译
+3. **环境变量注入**：使用`cross-env`实现跨平台环境变量管理
+4. **构建优化**：生产环境启用代码压缩、Tree Shaking和代码分割
+5. **增量构建**：开发环境支持模块热替换(HMR)，提升开发效率
+
+VTJ低代码平台通过模块化架构和灵活的多平台构建系统，为开发者提供高效的应用开发和部署体验。
diff --git a/docs/src/ui/action.md b/docs/src/ui/action.md
index 1ef47ef96..7b5de8c00 100644
--- a/docs/src/ui/action.md
+++ b/docs/src/ui/action.md
@@ -1,40 +1,31 @@
# XAction 操作按钮
-
## 示例
-
### 基础用法
-
:::preview
demo-preview=../examples/ui/action/action-1.vue
:::
-
-
### 提示信息 用法
:::preview
demo-preview=../examples/ui/action/action-3.vue
:::
-
### mode: icon 用法
:::preview
demo-preview=../examples/ui/action/action-4.vue
:::
-
### 下拉菜单 用法
-
:::preview
demo-preview=../examples/ui/action/action-2.vue
:::
-
-
-
-
## API
-### 属性
-
-| 属性名 | 说明 | 类型 | 默认值 |
-| ---------- | ---------------------------------------- | --------------------------------------- | ------- |
-| name | 动作名称标识 | string | - |
-| label | 动作标题文本 | boolean | false |
-| value | 动作值，用来传输数据 | string \| number \| object \| array \| | - |
-| icon | 图标配置 | string \| object | - |
-| mode | 模式 | string | button |
-| menus | 下拉菜单配置 | array | - |
-| tooltip | tooltip 配置 | string \| object | - |
-| badge | badge配置 | string \| Number \| Object | - |
-| dropdown | ElDropdown 组件配置 | object | - |
-| button | ElButton 组件配置，mode为button时有效 | object | - |
-| disabled | 禁用 | boolean | - |
-| size | 尺寸 | string | default |
-| type | 颜色类型 | string | - |
-| background | icon 背景设置，当 mode为 icon 时有效 | string ```always, hover, none``` | always |
-| circle | icon 背景样式圆形，当 mode为 icon 时有效 | string | - |
-| draggable | 是否可拖拽 | boolean | - |
-
+### 属性
+| 属性名 | 说明 | 类型 | 默认值 |
+| ---------- | ---------------------------------------- | -------------------------------------- | ------- |
+| name | 动作名称标识 | string | - |
+| label | 动作标题文本 | boolean | false |
+| value | 动作值，用来传输数据 | string \| number \| object \| array \| | - |
+| icon | 图标配置 | string \| object | - |
+| mode | 模式 | string | button |
+| menus | 下拉菜单配置 | array | - |
+| tooltip | tooltip 配置 | string \| object | - |
+| badge | badge配置 | string \| Number \| Object | - |
+| dropdown | ElDropdown 组件配置 | object | - |
+| button | ElButton 组件配置，mode为button时有效 | object | - |
+| disabled | 禁用 | boolean | - |
+| size | 尺寸 | string | default |
+| type | 颜色类型 | string | - |
+| background | icon 背景设置，当 mode为 icon 时有效 | string `always, hover, none` | always |
+| circle | icon 背景样式圆形，当 mode为 icon 时有效 | string | - |
+| draggable | 是否可拖拽 | boolean | - |
### 事件
| 名称 | 说明 | 参数 |
| ------- | ------------------ | ---- |
| click | 点击事件 | - |
-| command | menu菜单项点击事件 | - |
\ No newline at end of file
+| command | menu菜单项点击事件 | - |
diff --git a/docs/src/ui/actionBar.md b/docs/src/ui/actionBar.md
index a93e2b432..8d7f2dec5 100644
--- a/docs/src/ui/actionBar.md
+++ b/docs/src/ui/actionBar.md
@@ -1,48 +1,40 @@
# XActionBar 操作按钮集
-
## 示例
-
### 基础用法
:::preview
demo-preview=../examples/ui/actionBar/actionBar-1.vue
:::
-
### mode:icon 效果
:::preview
demo-preview=../examples/ui/actionBar/actionBar-2.vue
:::
-
-
-
## API
-### 属性
-
-| 属性名 | 说明 | 类型 | 默认值 |
-| ---------- | ---------------------------------------- | ---------------------------------- | ------- |
-| items | 动作项 | array | - |
-| mode | 模式 | string ```button\|text\|icon``` | - |
-| size | 尺寸 | string | default |
-| type | 颜色类型 | string | - |
-| background | icon 背景设置，当 mode为 icon 时有效 | string ```always\|hover\|none``` | always |
-| circle | icon 背景样式圆形，当 mode为 icon 时有效 | boolean | - |
-| disabled | 禁用 | boolean \| () => boolean | - |
-| tooltip | tooltip 配置 | object | - |
-| badge | Badge 配置 | object | - |
-| dropdown | ElDropdown 组件配置 | object | - |
-| button | ElButton 组件配置，mode为button时有效 | object | - |
-
+### 属性
+| 属性名 | 说明 | 类型 | 默认值 |
+| ---------- | ---------------------------------------- | ---------------------------- | ------- |
+| items | 动作项 | array | - |
+| mode | 模式 | string `button\|text\|icon` | - |
+| size | 尺寸 | string | default |
+| type | 颜色类型 | string | - |
+| background | icon 背景设置，当 mode为 icon 时有效 | string `always\|hover\|none` | always |
+| circle | icon 背景样式圆形，当 mode为 icon 时有效 | boolean | - |
+| disabled | 禁用 | boolean \| () => boolean | - |
+| tooltip | tooltip 配置 | object | - |
+| badge | Badge 配置 | object | - |
+| dropdown | ElDropdown 组件配置 | object | - |
+| button | ElButton 组件配置，mode为button时有效 | object | - |
### 事件
| 名称 | 说明 | 参数 |
| ------- | ------------------ | ---- |
| click | 点击事件 | - |
-| command | menu菜单项点击事件 | - |
\ No newline at end of file
+| command | menu菜单项点击事件 | - |
diff --git a/docs/src/ui/attachment.md b/docs/src/ui/attachment.md
index 91af7c0c5..d18f371cf 100644
--- a/docs/src/ui/attachment.md
+++ b/docs/src/ui/attachment.md
@@ -1,63 +1,54 @@
# XAttachment 附件
-
## 示例
-
### 基础用法
-
:::preview
demo-preview=../examples/ui/attachment/base.vue
:::
-
### 模式用法
-
:::preview
demo-preview=../examples/ui/attachment/attachment-1.vue
:::
-
### 插槽用法
-
:::preview
demo-preview=../examples/ui/attachment/attachment-2.vue
:::
-
## API
-### 属性
-
-| 属性名 | 说明 | 类型 | 默认值 |
-| -------------- | ---------------------------------------------------------------------------------------------------------------------- | ---------------------- | --------------------------------------------------------------------------------- |
-| modelValue | 列表显示的文件 | `array` | - |
-| selectValue | 选中值，开启 selectable 有效 | `object \| array` | - |
-| uploader | 文件上传方法 | `function` | - |
-| multiple | 支持多文件上传, 同时在selectable时控制多选 | `boolean` | - |
-| limit | 允许上传文件的最大数量 | `number` | - |
-| accept | 接受上传的[文件类型](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers) | `string` | 'image/* ,audio/* ,video/*,.zip,.svg,.pdf,.json,.docx,.xlsx,.pptx,.doc,.xls,.ppt' |
-| disabled | 禁止更改文件，不能上传和删除 | `boolean` | - |
-| size | 图片显示尺寸 | `string` | default |
-| thumbnail | 缩略图生成方法 | `function` | - |
-| addable | 可增加 | `boolean` | true |
-| removable | 可删除 | `boolean` | true |
-| downloadable | 可下载 | `boolean` | true |
-| previewable | 可预览 | `boolean` | true |
-| selectable | 可选择 | `boolean` | false |
-| clickable | 可点击 | `boolean` | false |
-| listType | 列表类型 | `string` | card |
-| beforeUpload | 上传前守卫 | `function` | - |
-| limitSize | 允许上传的文件大写最大值， 支持 K / M | `string` | 10M |
-| formatter | 格式化 | `function` | - |
-| valueFormatter | 列表数据格式化 | `function` | - |
-| previewer | 预览器方法 | `function` | - |
-| downloader | 下载器方法 | `function` | - |
-| autoUpload | 是否自动上传文件 | `boolean` | true |
+### 属性
+| 属性名 | 说明 | 类型 | 默认值 |
+| -------------- | ---------------------------------------------------------------------------------------------------------------------- | ---------------------- | ---------------------------------------------------------------------------------- |
+| modelValue | 列表显示的文件 | `array` | - |
+| selectValue | 选中值，开启 selectable 有效 | `object \| array` | - |
+| uploader | 文件上传方法 | `function` | - |
+| multiple | 支持多文件上传, 同时在selectable时控制多选 | `boolean` | - |
+| limit | 允许上传文件的最大数量 | `number` | - |
+| accept | 接受上传的[文件类型](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers) | `string` | 'image/_ ,audio/_ ,video/\*,.zip,.svg,.pdf,.json,.docx,.xlsx,.pptx,.doc,.xls,.ppt' |
+| disabled | 禁止更改文件，不能上传和删除 | `boolean` | - |
+| size | 图片显示尺寸 | `string` | default |
+| thumbnail | 缩略图生成方法 | `function` | - |
+| addable | 可增加 | `boolean` | true |
+| removable | 可删除 | `boolean` | true |
+| downloadable | 可下载 | `boolean` | true |
+| previewable | 可预览 | `boolean` | true |
+| selectable | 可选择 | `boolean` | false |
+| clickable | 可点击 | `boolean` | false |
+| listType | 列表类型 | `string` | card |
+| beforeUpload | 上传前守卫 | `function` | - |
+| limitSize | 允许上传的文件大写最大值， 支持 K / M | `string` | 10M |
+| formatter | 格式化 | `function` | - |
+| valueFormatter | 列表数据格式化 | `function` | - |
+| previewer | 预览器方法 | `function` | - |
+| downloader | 下载器方法 | `function` | - |
+| autoUpload | 是否自动上传文件 | `boolean` | true |
### 事件
@@ -70,10 +61,8 @@ demo-preview=../examples/ui/attachment/attachment-2.vue
| download | 下载 | - |
| preview | 预览 | - |
-
-
### 插槽
| 插槽名 | 说明 | 类型 |
| ------ | -------- | ---- |
-| tip | 提示信息 | - |
\ No newline at end of file
+| tip | 提示信息 | - |
diff --git a/docs/src/ui/container.md b/docs/src/ui/container.md
index 352228363..fa6a0dac8 100644
--- a/docs/src/ui/container.md
+++ b/docs/src/ui/container.md
@@ -1,72 +1,60 @@
# XContainer 容器
-
## 示例
-
### 基础用法
-XContainer 容器 的基本用法
+XContainer 容器 的基本用法
:::preview
demo-preview=../examples/ui/container/container-1.vue
:::
-### 定义 组件渲染html标签:span、 尺寸 、overflow:hidden
-
+### 定义 组件渲染html标签:span、 尺寸 、overflow:hidden
:::preview
demo-preview=../examples/ui/container/container-2.vue
:::
-
### 定义 Flex 布局
-
:::preview
demo-preview=../examples/ui/container/container-3.vue
:::
### 定义 放大 缩小
-
:::preview
demo-preview=../examples/ui/container/container-4.vue
:::
-
### 全部用法
-
:::preview
demo-preview=../examples/ui/container/container-5.vue
:::
-
-
## API
### 属性
-| 属性名 | 说明 | 类型 | 默认值 |
-| ------------ | --------------------------------------------------------------------------------------- | ---------------- | ---------- |
-| tag | 组件渲染html标签 | string | div |
-| fit | 宽高自适应 | boolean | false |
-| width | 指定高度，fit 为true 失效 | string \| number | - |
-| height | 指定高度，fit 为true失效 | string \| number | - |
-| flex | 开启flex布局 | boolean | - |
-| inline | inline-flex | boolean | - |
-| direction | flex主轴方向 | string | row |
-| wrap | 换行 | string | nowrap |
-| justify | 主轴上的对齐方式 | string | flex-start |
-| align | 交叉轴上对齐方式 | string | flex-start |
-| alignContent | 多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用.(即 ```flex-wrap="nowrap"```) | string | stretch |
-| grow | 放大 | boolean | false |
-| shrink | 缩小 | boolean | false |
-| alignSelf | 单个项目有与其他项目不一样的对齐方式。可覆盖容器的align-items属性 | string | auto |
-| overflow | css overflow | string | - |
-| padding | 内边距 | boolean | false |
-| gap | 嵌套子组件加间隔 | boolean | - |
-| autoPointer | cursor-pointer | boolean | - |
-
-
+| 属性名 | 说明 | 类型 | 默认值 |
+| ------------ | ---------------------------------------------------------------------------------- | ---------------- | ---------- |
+| tag | 组件渲染html标签 | string | div |
+| fit | 宽高自适应 | boolean | false |
+| width | 指定高度，fit 为true 失效 | string \| number | - |
+| height | 指定高度，fit 为true失效 | string \| number | - |
+| flex | 开启flex布局 | boolean | - |
+| inline | inline-flex | boolean | - |
+| direction | flex主轴方向 | string | row |
+| wrap | 换行 | string | nowrap |
+| justify | 主轴上的对齐方式 | string | flex-start |
+| align | 交叉轴上对齐方式 | string | flex-start |
+| alignContent | 多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用.(即 `flex-wrap="nowrap"`) | string | stretch |
+| grow | 放大 | boolean | false |
+| shrink | 缩小 | boolean | false |
+| alignSelf | 单个项目有与其他项目不一样的对齐方式。可覆盖容器的align-items属性 | string | auto |
+| overflow | css overflow | string | - |
+| padding | 内边距 | boolean | false |
+| gap | 嵌套子组件加间隔 | boolean | - |
+| autoPointer | cursor-pointer | boolean | - |
diff --git a/docs/src/ui/dataItem.md b/docs/src/ui/dataItem.md
index 98b1743ad..49eefb2d8 100644
--- a/docs/src/ui/dataItem.md
+++ b/docs/src/ui/dataItem.md
@@ -1,40 +1,28 @@
# XDataItem 数据项
-
## 示例
-
### 基础用法
:::preview
demo-preview=../examples/ui/dataItem/base.vue
:::
-
### 排列展示
:::preview
demo-preview=../examples/ui/dataItem/dataItem-1.vue
:::
-
### 插槽展示
:::preview
demo-preview=../examples/ui/dataItem/dataItem-2.vue
:::
-
-
-
-
-
-
-
-
## API
-### 属性
+### 属性
| 属性名 | 说明 | 类型 | 默认值 |
| -------------- | --------------------- | --------------------------- | ------------------------------------------ |
@@ -51,8 +39,6 @@ demo-preview=../examples/ui/dataItem/dataItem-2.vue
| onImageClick | 点击图片 | `function` | - |
| onTitleClick | 点击标题 | `function` | - |
-
-
### 事件
| 名称 | 说明 | 参数 |
@@ -62,8 +48,6 @@ demo-preview=../examples/ui/dataItem/dataItem-2.vue
| actionClick | 点击图标 | (action) |
| actionCommand | 点击图标 | (action,menu) |
-
-
### 插槽
| 插槽名 | 说明 | 类型 |
@@ -73,6 +57,3 @@ demo-preview=../examples/ui/dataItem/dataItem-2.vue
| title | - | - |
| description | - |
| actions | - | - |
-
-
-
diff --git a/docs/src/ui/dialog.md b/docs/src/ui/dialog.md
index 53bc8c9d5..f96c1a849 100644
--- a/docs/src/ui/dialog.md
+++ b/docs/src/ui/dialog.md
@@ -44,7 +44,6 @@ demo-preview=../examples/ui/dialog/dialog-2.vue
| bodyPadding | 显示内容区域的内边距 | `boolean` | `true` |
| primary | 标题背景颜色 | `boolean` | - |
-
#### 接收 XPanel 所有参数
### 事件
@@ -68,10 +67,6 @@ demo-preview=../examples/ui/dialog/dialog-2.vue
| `submit` | Dialog 点击确认按钮的回 | - |
| `cancel` | Dialog 点击取消按钮的回 | - |
-
-
-
-
### 暴露
| 名称 | 说明 | 类型 |
@@ -88,9 +83,8 @@ demo-preview=../examples/ui/dialog/dialog-2.vue
| cancel- | Dialog 点击取消按钮的回调 | - |
| close | Dialog 关闭的回调 | - |
-
-
#### state 参数说明
+
| 参数 | 类型 |
| ------------- | ----------------------------------------------- |
| mode | string <`normal` \| `maximized` \| `minimized`> |
@@ -103,6 +97,3 @@ demo-preview=../examples/ui/dialog/dialog-2.vue
| zIndex | number |
| dragging | boolean |
| resizing | boolean |
-
-
-
diff --git a/docs/src/ui/dialogForm.md b/docs/src/ui/dialogForm.md
index 122aff5ee..d01d3a273 100644
--- a/docs/src/ui/dialogForm.md
+++ b/docs/src/ui/dialogForm.md
@@ -1,68 +1,54 @@
-# XDialogForm 弹窗表单
-
-
-## 示例
+# XDialogForm 对话框表单
+## 示例用法
### 基础用法
-
:::preview
demo-preview=../examples/ui/dialogForm/dialogForm-1.vue
:::
-
-
### 插槽用法
-
:::preview
demo-preview=../examples/ui/dialogForm/dialogForm-2.vue
:::
-
-
-
## API
-### 属性
-
-| 属性名 | 说明 | 类型 | 默认值 |
-| ------------ | -------------------------------------- | ------------------ | ------- |
-| modelValue | 控制弹窗显示或隐藏 | `boolean` | false |
-| size | 控制头部和尾部的尺寸 | `string` | default |
-| primary | 弹窗主题颜色 | `boolean` | false |
-| formProps | - | `object` | - |
-| submit | 确认按钮 | `boolean\| string` | `确认` |
-| cancel | 取消按钮 | `boolean\| string` | `取消` |
-| model | 表单模型 | `object` | {} |
-| rules | 表单校验规则 | `object` | {} |
-| submitMethod | 表单提交处理方法, return true 关闭弹窗 | `function` | - |
+### 属性
+| 属性名 | 说明 | 类型 | 默认值 |
+| ------------ | -------------------------------------- | ------------------ | --------- |
+| modelValue | 控制对话框显示状态 | `boolean` | `false` |
+| size | 对话框尺寸（small, default, large） | `string` | `default` |
+| primary | 是否使用主色调标题背景 | `boolean` | `false` |
+| formProps | 传递给内部表单组件的属性 | `object` | - |
+| submit | 确认按钮配置 | `boolean\| string` | `确认` |
+| cancel | 取消按钮配置 | `boolean\| string` | `取消` |
+| model | 表单数据模型 | `object` | `{}` |
+| rules | 表单验证规则 | `object` | `{}` |
+| submitMethod | 表单提交处理方法（返回true关闭对话框） | `function` | - |
### 事件
-| 名称 | 说明 | 参数 |
-| ------ | ---------------- | ---- |
-| submit | 点击确认按钮触发 | - |
-| close | 点击取消按钮触发 |
-
-
+| 事件名称 | 说明 | 参数 |
+| -------- | ---------------- | ---- |
+| submit | 确认按钮点击事件 | - |
+| close | 取消按钮点击事件 | - |
### 插槽
| 插槽名 | 说明 | 类型 |
| ------ | ------------ | ---- |
-| extra | - | - |
+| extra | 额外内容区域 | - |
| handle | 底部按钮区域 | - |
-| footer | - | - |
+| footer | 整个底部区域 | - |
+### 暴露API
-
-### 暴露
-
-| 名称 | 说明 | 类型 |
-| --------- | --------------------- | ---- |
-| $vtjEl | 组件父元素的ref |
-| formRef | 组件内部form表单的ref |
-| dialogRef | 弹窗表单组件的ref |
\ No newline at end of file
+| 名称 | 说明 | 类型 |
+| --------- | -------------------- | ---- |
+| $vtjEl | 组件父元素实例引用 | - |
+| formRef | 内部表单组件实例引用 | - |
+| dialogRef | 对话框组件实例引用 | - |
diff --git a/docs/src/ui/dialogGrid.md b/docs/src/ui/dialogGrid.md
index ceba6b39c..1e5c90c62 100644
--- a/docs/src/ui/dialogGrid.md
+++ b/docs/src/ui/dialogGrid.md
@@ -1,8 +1,6 @@
-# XDialogGrid 弹窗表格
-
-
-## 示例
+# XDialogGrid 对话框表格
+## 示例用法
### 基础用法
@@ -10,27 +8,28 @@
demo-preview=../examples/ui/dialogGrid/base.vue
:::
-
## API
-### 属性
+### 属性
-| 属性名 | 说明 | 类型 | 默认值 |
-| -------------- | ----------------------------------- | ----------------------- | ------ |
-| columns | 表格列配置 | `array` | - |
-| model | 表格数据 | `any` | - |
-| formatter | model数据转换为表格数据 | `(model: any) => any[]` | - |
-| valueFormatter | 表格数据转换为model数据 | `(rows: any) => any` | - |
-| rules | 表格验证规则 | - | - |
-| plus | 显示增行按钮 | `boolean` | - |
-| minus | 显示删行按钮 | `boolean` | - |
-| gridProps | 表格其他配置 | - | - |
-| submitMethod | 表单提交方法， return true 关闭弹窗 | `function` | - |
-
-#### 接收 XPanel 所有参数
+| 属性名 | 说明 | 类型 | 默认值 |
+| -------------- | --------------------------------------- | ----------------------- | ------ |
+| columns | 表格列配置 | `array` | - |
+| model | 表格数据模型 | `any` | - |
+| formatter | 数据格式化函数（模型数据→表格数据） | `(model: any) => any[]` | - |
+| valueFormatter | 反向数据格式化函数（表格数据→模型数据） | `(rows: any) => any` | - |
+| rules | 表格数据验证规则 | `object` | - |
+| plus | 是否显示添加行按钮 | `boolean` | `true` |
+| minus | 是否显示删除行按钮 | `boolean` | `true` |
+| gridProps | 传递给内部表格组件的属性 | `object` | - |
+| submitMethod | 表单提交方法（返回true关闭对话框） | `function` | - |
### 插槽
-| 插槽名 | 说明 | 类型 |
-| --------- | ---- | ---- |
-| valueCell | - | - |
+| 插槽名 | 说明 | 类型 |
+| --------- | ---------------- | ---- |
+| valueCell | 自定义单元格内容 | - |
+
+### 备注
+
+- 该组件继承所有 XPanel 组件的属性
diff --git a/docs/src/wiki/ai/index.md b/docs/src/wiki/ai/index.md
index de3228783..162a8db73 100644
--- a/docs/src/wiki/ai/index.md
+++ b/docs/src/wiki/ai/index.md
@@ -1,153 +1,206 @@
-# AI 集成
+# AI 集成架构
-本文档介绍了 VTJ 的 AI 驱动的代码生成和设计辅助功能。AI 集成使用户能够通过自然语言提示、图像上传和元数据文件生成 Vue 组件和页面。有关处理 AI 生成代码的核心低代码引擎的信息，请参阅**核心架构** 。有关可视化设计器界面的详细信息，请参阅 **设计器和渲染器** 。
+本文档详细介绍了 VTJ 平台中 AI 驱动的代码生成与设计辅助功能。AI 子系统与 VTJ 核心引擎深度集成，支持通过自然语言提示、图像上传和元数据文件生成 Vue 组件和页面。有关底层处理机制，请参阅**核心架构文档**；关于可视化设计实现，请参考**设计器与渲染器文档**。
## AI 系统架构
-VTJ 的 AI 集成由多个层组成，这些层协同工作，将用户输入转换为可执行的 Vue 代码：
+VTJ 的 AI 集成采用分层架构设计，各层协同工作实现用户输入到可执行 Vue 代码的转换：
-**AI 集成架构**
+**AI 集成架构层次：**
-AI 系统通过分层架构运行，其中接口组件收集用户输入，逻辑层管理状态和 API 通信，后端服务处理 AI 处理。生成的代码直接与 VTJ 的核心引擎集成，用于解析和渲染。
+1. **接口层**：负责收集用户输入（文本、图像、JSON）
+2. **逻辑控制层**：管理状态机、API 通信和错误处理
+3. **AI 处理层**：执行自然语言理解、图像识别和代码生成
+4. **引擎集成层**：将生成的代码与 VTJ 核心引擎对接
-## AI 输入类型和处理
+## AI 输入处理机制
-VTJ 支持三种主要的 AI 输入模式，每种模式都针对不同的用例而设计：
+VTJ 支持三种输入模式，每种模式针对不同的开发场景：
-| 输入类型 | 元件 | 文件扩展名 | 用例 |
-| ----------- | ---------- | ---------------- | ------------------ |
-| 文本信息 | ChatInput | 不适用 | 自然语言要求 |
-| 图像 | ImageInput | .png、.jpg .jpeg | 设计模型、屏幕截图 |
-| JSON/元数据 | JsonInput | .json | Figma、Sketch 导出 |
+| 输入类型 | 前端组件 | 支持格式 | 典型应用场景 |
+| ------------ | ---------- | ----------------- | ------------------------- |
+| 自然语言文本 | ChatInput | 纯文本 | 功能需求描述、代码优化 |
+| 设计图像 | ImageInput | .png, .jpg, .jpeg | 界面原型、设计稿转代码 |
+| 结构化元数据 | JsonInput | .json | Figma/Sketch 设计文件导出 |
-### 文本输入处理
+### 文本输入处理流程
-基于文本的 AI 生成通过 AISendData 接口处理自然语言提示：
+文本输入通过 AISendData 接口处理自然语言提示，处理流程如下：
-**文本输入处理流程**
+**处理流程：**
-文本输入流使用当前项目上下文创建一个主题，包括现有的 DSL 和生成的 Vue 源代码，为 AI 提供完整的代码生成上下文。
+1. 提取当前项目上下文（包括 DSL 定义和 Vue 源码）
+2. 构建包含完整上下文的提示词
+3. 通过 AI 模型生成 Vue SFC 代码
+4. 解析并验证生成代码的有效性
-### 图像输入处理
+### 图像输入处理流程
-图像处理支持从屏幕截图、模型和设计文件生成设计到代码：
+图像处理管线将视觉设计转换为语义化的 Vue 组件：
-**图像到代码处理管道**
+**转换流程：**
-图像输入系统接受设计文件，并通过经过设计识别训练的专用 AI 模型对其进行处理，将视觉布局转换为语义 Vue 组件。
+1. 图像预处理（尺寸归一化、特征增强）
+2. 基于 CV 模型识别 UI 元素和布局结构
+3. 生成组件层次结构和样式定义
+4. 输出符合 VTJ DSL 规范的中间表示
-## AI 聊天系统和实时流媒体
+## AI 聊天系统与实时流处理
-AI 聊天系统管理与流式响应的对话交互：
+AI 聊天系统通过状态机管理对话交互，支持实时响应流：
-**AI 聊天状态机**
+**状态机关键状态：**
-聊天系统通过结构化状态机维护对话状态，该状态机处理流式响应、错误恢复和用户交互。
+- `INITIAL`: 等待用户输入
+- `STREAMING`: 处理 AI 流式响应
+- `COMPLETED`: 生成最终代码结果
+- `ERROR`: 处理异常情况
-### 实时响应流
+### 实时流式响应实现
-流式处理实现使用服务器发送事件 （SSE） 进行实时 AI 响应：
+使用 Server-Sent Events (SSE) 实现低延迟响应传输：
```ts
-// Key streaming logic from chatCompletions
+// 聊天补全核心逻辑
const chatCompletions = async (
topicId: string,
chatId: string,
callback?: (data: any, done?: boolean) => void,
error?: (err: any, cancel?: boolean) => void
) => {
- // Streaming implementation with AbortController
const controller = new AbortController();
- // Process streaming chunks and update UI reactively
+
+ try {
+ // 建立 SSE 连接
+ const response = await fetch(API_ENDPOINT, {
+ method: 'POST',
+ signal: controller.signal,
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ topicId, chatId })
+ });
+
+ // 处理流式数据块
+ const reader = response.body.getReader();
+ const decoder = new TextDecoder();
+ let buffer = '';
+
+ while (true) {
+ const { value, done } = await reader.read();
+ if (done) break;
+
+ buffer += decoder.decode(value, { stream: true });
+ const lines = buffer.split('\n');
+
+ for (const line of lines) {
+ if (line.startsWith('data:')) {
+ const data = JSON.parse(line.substring(5));
+ callback(data, false);
+ }
+ }
+ }
+
+ callback(null, true); // 流处理完成
+ } catch (err) {
+ error(err, true); // 错误处理
+ }
};
```
-流式处理系统处理增量 AI 响应，实时更新 UI，同时保持对话上下文并处理中断。
+## 代码生成与 DSL 集成
-## 代码生成和 DSL 集成
-
-AI 系统通过双向代码转换与 VTJ 的核心引擎紧密集成：
+AI 系统通过双向转换管道与 VTJ 核心引擎集成：
-**AI 代码生成和集成管道**
+**集成工作流：**
-代码生成管道从 AI 响应中提取 Vue 代码，将其解析为 VTJ 的 DSL 格式，并将更改应用于当前块模型以进行即时渲染。
+1. 从 AI 响应中提取 Vue SFC 代码
+2. 将 Vue 代码转换为 DSL 中间表示
+3. 应用变更到当前块模型
+4. 通过渲染引擎更新 UI
-### Vue 代码提取和解析
+### 代码转换关键函数
-系统从 AI markdown 响应中提取 Vue 代码，并将其转换为 VTJ 的内部 DSL：
+| 函数 | 功能描述 | 输入 | 输出 |
+| ---------- | ------------------------- | ------------ | ---------------- |
+| getVueCode | 从 Markdown 提取 Vue 代码 | AI 响应文本 | Vue SFC 代码 |
+| vue2Dsl | Vue SFC 转 DSL 表示 | Vue SFC 代码 | 块架构定义 |
+| applyAI | 应用变更到引擎 | 块架构定义 | 更新后的 UI 状态 |
-| 功能 | 目的 | 输入 | 输出 |
-| ---------- | ---------------------- | ------------ | ------------ |
-| getVueCode | 从 markdown 中提取 Vue | AI 响应文本 | Vue SFC 代码 |
-| vue2Dsl | 转换为 DSL | Vue SFC 代码 | 块架构 |
-| applyAI | 应用于 engine | 块架构 | 更新的 UI |
+转换过程包含严格验证：
-解析过程根据 VTJ 的组件规则验证生成的代码，并在代码不符合预期模式时提供错误反馈。
+1. 组件命名符合 PascalCase 规范
+2. 属性类型与值匹配验证
+3. 样式作用域隔离检查
+4. 依赖项完整性校验
-## AI 主题和聊天管理
+## 主题管理与对话上下文
-AI 系统通过基于主题的组织维护对话历史记录：
+AI 系统通过主题机制管理对话上下文：
-**AI 数据模型关系**
+**数据模型关系：**
-主题系统按文件上下文组织对话，每个主题包含多个聊天交流。主题链接到特定的 BlockModel 实例，以实现上下文感知生成。
+- 每个 `BlockModel` 关联多个 `Topic`
+- 每个 `Topic` 包含多个 `Chat` 对话
+- 每个 `Chat` 包含多条 `Message` 记录
### 主题生命周期管理
-主题是为每个新的 AI 对话创建的，并在会话中持续存在：
+1. **主题创建**
+ 通过 `onPostTopic` 创建新主题，关联项目上下文
+2. **对话管理**
+ `onPostChat` 向主题添加消息，维护完整对话历史
+3. **上下文加载**
+ 根据 BlockModel 状态动态加载关联主题
+4. **资源清理**
+ `onRemoveTopic` 级联删除主题及关联对话
-- **主题创建** ：onPostTopic 使用项目上下文创建新主题
-- **聊天添加** ：onPostChat 向现有主题添加消息
-- **历史管理**：主题按 BlockModel 上下文加载
-- **清理 **：onRemoveTopic 使用级联处理主题删除
+## 用户体验增强功能
-主题系统使用户能够在每个文件中维护多个 AI 对话，同时保留对话上下文和生成的代码历史记录。
+### 自动应用机制
-## 自动应用和用户体验功能
-
-VTJ 的 AI 集成包括多项 UX 增强功能，以简化开发：
-
-### 自动应用功能
-
-启用自动应用功能后，会自动将生成的代码应用于当前页面：
+启用后，系统自动应用验证通过的生成代码：
```ts
-// Auto-apply logic in completions callback
-if (data.auto) {
- onApply(c); // Automatically apply generated DSL
+// 自动应用逻辑
+function handleAutoApply(generatedCode) {
+ if (config.autoApplyEnabled) {
+ const dsl = vue2Dsl(generatedCode);
+ if (validateDSL(dsl)) {
+ engine.applyDSL(dsl);
+ }
+ }
}
```
### 交互式代码审查
-系统通过 `Detail` 组件提供详细的代码审查界面：
+提供多维度代码审查界面：
-- **代码编辑器** ：在应用之前修改生成的 Vue 代码
-- **DSL 预览** ：查看转换后的 DSL 结构
-- **重新生成** ：修改代码后更新 DSL
-- **Apply Control**：手动应用已审核的代码
+- **源码编辑器**：支持直接修改生成的 Vue 代码
+- **DSL 预览面板**：实时显示转换后的 DSL 结构
+- **版本比对**：对比不同生成版本的代码差异
+- **手动应用控制**：选择性应用审查后的代码
-### 错误处理和恢复
+### 错误恢复机制
-AI 系统包括全面的错误处理：
+全面错误处理框架：
-| 错误类型 | 处理器 | 恢复作 |
-| -------- | ------------ | ---------------------- |
-| 解析错误 | vue2Dsl 捕获 | 显示错误消息，报价修复 |
-| 网络错误 | 完成错误 | 重试机制 |
-| 验证错误 | DSL 验证 | 显示验证错误 |
-| 取消 | onCancelChat | Clean 状态，允许重试 |
+| 错误类型 | 处理机制 | 恢复策略 |
+| ------------ | --------------------- | -------------------------- |
+| 语法解析错误 | vue2Dsl 异常捕获 | 高亮错误位置，提供修复建议 |
+| 网络通信异常 | 请求超时/中断处理 | 自动重试机制（最多3次） |
+| 验证错误 | DSL 模式校验 | 过滤无效节点，保留有效部分 |
+| 用户取消操作 | onCancelChat 事件处理 | 清理中间状态，释放资源 |
-错误系统提供上下文反馈和恢复选项，使用户能够迭代优化其 AI 生成的代码。
+错误处理系统提供上下文感知的恢复建议，支持用户迭代优化 AI 生成的代码。
diff --git a/docs/src/wiki/core/code-generation-and-parsing-pipeline.md b/docs/src/wiki/core/code-generation-and-parsing-pipeline.md
index 2ba66cc8f..a2766e0b6 100644
--- a/docs/src/wiki/core/code-generation-and-parsing-pipeline.md
+++ b/docs/src/wiki/core/code-generation-and-parsing-pipeline.md
@@ -1,131 +1,165 @@
-# 代码生成和解析管道
+# 代码生成与解析管道
-本文档涵盖了 VTJ 在 Vue 单文件组件 （SFC） 和平台内部领域特定语言 （DSL） 之间的双向转换系统。该系统通过 `@vtj/parser` 和 `@vtj/coder` 包实现基于代码的开发和可视化低代码设计之间的无缝集成。
-
-有关编排这些管道的整体引擎架构的信息，请参阅**引擎、提供程序和服务层** 。有关这些管道所作的数据模型的详细信息，请参阅**项目模型和块模型**。
+本文档详细介绍了 VTJ 平台在 Vue 单文件组件(SFC)与领域特定语言(DSL)之间的双向转换系统。该系统通过 `@vtj/parser` 和 `@vtj/coder` 包实现代码开发与可视化低代码设计之间的无缝集成。关于管道编排的引擎架构，请参考引擎、提供者与服务层文档；关于数据模型实现，请查阅项目模型和块模型文档。
## 架构概述
-代码生成和解析管道构成了 VTJ 的 AI 增强开发工作流程的支柱，支持人类可读的 Vue 代码和机器可处理的 DSL 表示之间的转换。
+代码生成与解析管道构成了 VTJ AI 增强开发工作流的核心支柱，支持人类可读的 Vue 代码与机器可处理的 DSL 表示之间的高效转换。
## 解析管道：Vue SFC 到 DSL
-解析管道通过多阶段过程将 Vue 单文件组件转换为 VTJ 的内部 DSL 表示。
+解析管道通过多阶段处理将 Vue 单文件组件转换为 VTJ 的内部 DSL 表示。
### 解析器入口点
-主解析函数 parseVue 编排整个转换过程：
+主解析函数 `parseVue` 编排整个转换流程：
-`ParseVueOptions` 接口定义了所需的输入，包括目标项目上下文、块标识符和源代码。
+`ParseVueOptions` 接口定义了必要的输入参数，包括目标项目上下文、块标识符和源代码。
### 模板解析
-模板解析使用 Vue 的编译器基础设施将 Vue 模板语法转换为 `NodeSchema` 结构：
+模板解析使用 Vue 编译器基础设施将模板语法转换为 `NodeSchema` 结构：
-关键处理函数处理不同的模板节点类型，包括元素、文本节点、条件语句 （v-if）、循环 （v-for） 和插槽。
+**关键处理函数：**
+
+- 处理元素节点（ElementNode）
+- 解析文本节点（TextNode）
+- 转换条件语句（v-if/v-else）
+- 处理循环指令（v-for）
+- 解析插槽（SlotNode）
### 脚本解析
-脚本解析提取 Vue 组件逻辑并将其转换为 BlockState 表示：
+脚本解析提取 Vue 组件逻辑并转换为 BlockState 表示：
-脚本解析器处理 Vue 的 Options API 语法，提取组件属性、方法、计算属性、侦听器和生命周期钩子。
+脚本解析器处理 Vue Options API 和 Composition API：
+
+1. 提取组件属性（props）
+2. 解析数据（data）和状态（state）
+3. 转换计算属性（computed）
+4. 处理生命周期钩子（lifecycle hooks）
+5. 提取方法（methods）和监听器（watchers）
## 代码生成管道：DSL 到 Vue SFC
-代码生成管道将 VTJ 的内部 DSL 转换回针对不同目标平台的可部署的 Vue 单文件组件。
+代码生成管道将内部 DSL 转换回可部署的 Vue 单文件组件，针对不同目标平台优化。
-### 生成过程
+### 生成流程
-平台适配器可确保生成的代码针对特定部署目标进行优化，从而处理组件库、API 和平台特定功能中的差异。
+平台适配器确保生成的代码针对特定部署目标优化：
+
+1. **Web 平台**：标准 Vue 3 组件
+2. **UniApp 平台**：跨平台小程序组件
+3. **H5 平台**：移动端优化组件
### 模板代码生成
模板生成将 `NodeSchema` 结构转换回 Vue 模板语法：
-| 节点类型 | 生成的输出 | 特殊处理 |
-| --------------- | ----------------------- | ---------------------- |
-| ElementNode | tag 元素 | 标记名称格式、属性绑定 |
-| TextNode | 文本内容 | 表达式插值 |
-| ConditionalNode | v-if、v-else-if、v-else | 分支逻辑 |
-| LoopNode | v-for 指令 | 迭代语法 |
-| SlotNode | slot 元素 | 命名插槽、插槽 props |
+| 节点类型 | 生成输出 | 特殊处理 |
+| --------------- | --------------------- | ------------------------ |
+| ElementNode | HTML 元素 | 标签名格式、属性绑定 |
+| TextNode | 文本内容 | 表达式插值处理 |
+| ConditionalNode | v-if/v-else-if/v-else | 分支逻辑优化 |
+| LoopNode | v-for 指令 | 迭代器语法生成 |
+| SlotNode | slot 元素 | 命名插槽、作用域插槽处理 |
-生成器处理特定于平台的标记名称，并确保正确转义动态内容。
+生成器处理平台特定的标签名称，并确保动态内容的正确转义。
### 脚本代码生成
-脚本生成从 `BlockState` 表示中重建 Vue 组件逻辑：
+脚本生成从 `BlockState` 表示重建 Vue 组件逻辑：
-脚本生成器可确保正确的 TypeScript 类型并自动处理依赖项导入。
+**生成过程：**
-## 关键组件和数据结构
+1. 生成组件选项结构
+2. 处理 TypeScript 类型注解
+3. 自动管理依赖项导入
+4. 优化 Composition API 逻辑
+5. 确保响应式数据一致性
+
+## 核心组件与数据结构
### 解析器组件
-| 元件 | 目的 | 主要功能 |
-| ------------- | ------------ | ---------------------------- |
-| parseVue | 主解析入口点 | 编排 SFC → DSL 转换 |
-| parseTemplate | 模板处理 | 将 Vue 模板转换为 NodeSchema |
-| parseScripts | 脚本分析 | 将组件逻辑提取到 BlockState |
-| parseStyle | 样式处理 | 将 CSS 转换为 CSSRule |
-| htmlToNodes | HTML 解析 | 直接 HTML → NodeSchema 转换 |
+| 组件 | 功能描述 | 核心能力 |
+| ------------- | ----------- | --------------------------- |
+| parseVue | 主解析入口 | 编排 SFC → DSL 转换流程 |
+| parseTemplate | 模板处理器 | Vue 模板 → NodeSchema 转换 |
+| parseScripts | 脚本分析器 | 组件逻辑 → BlockState 转换 |
+| parseStyle | 样式处理器 | CSS → CSSRule 转换 |
+| htmlToNodes | HTML 解析器 | 原生 HTML → NodeSchema 转换 |
### 编码器组件
-代码生成系统使用特定于平台的适配器来确保生成的代码在不同的部署目标中正常工作：
+代码生成系统使用平台适配器确保跨平台兼容性：
+**适配器功能：**
+
+1. 组件库 API 桥接
+2. 事件处理机制适配
+3. 样式作用域处理
+4. 构建工具配置生成
+
### 数据结构转换
-管道执行几个关键数据转换：
+管道执行关键数据结构转换：
-| 源格式 | 目标格式 | 转型 |
+| 源格式 | 目标格式 | 转换过程 |
| ----------- | ------------ | ------------------------- |
-| 模板视图 | NodeSchema[] | AST 解析 + 属性提取 |
-| Script 视图 | BlockState | Babel AST 分析 + 逻辑提取 |
-| Vue 样式 | CSSRules | CSS 解析 + 范围 |
-| BlockSchema | SFC 视图 | DSL → 代码生成 |
+| 模板 AST | NodeSchema[] | AST 解析 + 属性提取 |
+| Script AST | BlockState | Babel AST 分析 + 逻辑提取 |
+| Vue 样式 | CSSRules | CSS 解析 + 作用域处理 |
+| BlockSchema | SFC 结构 | DSL → 代码生成 |
-每个转换都会保留语义含义，同时适应目标表示的约束。
+每个转换过程保持语义一致性，同时适应目标表示的约束条件。
-## 平台支持和扩展
+## 平台支持与扩展能力
### 多平台代码生成
-系统支持生成平台优化代码：
+系统支持生成平台优化的代码：
-- **Web 平台** ：带有 Element Plus/Ant Design Vue 的标准 Vue 3 组件
-- **UniApp Platform**：移动端 / 小程序的跨平台组件
-- **H5 平台** ：使用 Vant UI 的移动优化 Web 组件
+**平台适配：**
-平台适配器处理以下方面的差异：
+- **Web 平台**：使用 Element Plus/Ant Design Vue 的标准 Vue 3 组件
+- **UniApp 平台**：支持小程序/移动端的跨平台组件
+- **H5 平台**：使用 Vant UI 的移动端优化组件
-- 组件库 API
-- 事件处理机制
-- 样式方法
-- 构建工具配置
+**适配差异处理：**
+
+1. 组件库 API 差异
+2. 事件处理机制
+3. 样式解决方案
+4. 构建配置优化
### HTML 导入支持
-系统可以通过 htmlToNodes 将原始 HTML 内容直接导入到可视化设计器中：
+系统通过 htmlToNodes 支持原生 HTML 内容导入：
-这样就可以导入现有的 HTML 布局，并在可视化设计器中将它们转换为可编辑的组件。
+**导入流程：**
-:::info 提示
-内容由AI翻译，可能会出现错漏或过时信息，请查阅原文：https://deepwiki.com/ChenXiaohui99/vtj/2.3-code-generation-and-parsing-pipeline
+1. 解析 HTML 结构
+2. 转换为 NodeSchema 表示
+3. 集成到可视化设计器
+4. 支持进一步编辑和组件化
+
+:::info 文档说明
+本文档由AI辅助生成，可能存在技术细节偏差，最新实现请参考原始文档：[https://deepwiki.com/ChenXiaohui99/vtj/2.3-code-generation-and-parsing-pipeline]()
:::
diff --git a/docs/src/wiki/core/engine-provider-and-service.md b/docs/src/wiki/core/engine-provider-and-service.md
index afad376b5..dcbb6e9fa 100644
--- a/docs/src/wiki/core/engine-provider-and-service.md
+++ b/docs/src/wiki/core/engine-provider-and-service.md
@@ -1,265 +1,281 @@
-# 引擎、提供程序和服务
+# 引擎、提供者与服务
-本文档详细介绍了 VTJ 低代码平台架构的基础组件：引擎、提供程序和服务层。这三个组件构成了平台在视觉设计和 Vue 源代码之间进行转换的能力的基础，管理设计时和运行时作。有关这些组件处理的数据模型的信息，请参阅工程模型和块模型 。
+本文档详细介绍了 VTJ 低代码平台架构的核心组件：引擎、提供者（Provider）和服务层（Service Layer）。这三个组件构成了平台在可视化设计和 Vue 源代码之间进行双向转换的基础架构，统一管理设计时环境和运行时环境。有关这些组件处理的数据模型细节，请参阅**工程模型**和**区块模型**
## 核心架构模式
-VTJ 平台使用 Engine-Provider-Service 模式来分离设计时环境、运行时环境和后端服务的关注点
-
-**VTJ 核心架构：引擎-提供程序-服务模式**
+VTJ 平台采用引擎-提供者-服务（Engine-Provider-Service）模式，实现设计时环境、运行时环境和后端服务的关注点分离。
+**VTJ 核心架构：引擎-提供者-服务模式**
-## 引擎
+## 引擎（Engine）
-引擎是设计时环境的核心组件，用于编排工程模型、模块编辑和仿真功能。
+引擎是设计时环境的核心控制器，负责工程模型管理、模块编辑和画布渲染仿真。
-### 引擎属性和初始化
+### 引擎属性与初始化
-该 Engine 类通过几个关键属性管理整个设计时状态：
+`Engine` 类通过以下关键属性管理完整的设计时状态：
-| 属性 | 类型 | 描述 |
-| --------- | --------------------- | ------------------------ |
-| service | Service | 用于文件作的后端服务 |
-| provider | Provider | 用于渲染的运行时提供程序 |
-| simulator | Simulator | 管理画布渲染 |
-| project | `Ref ` | 当前加载的项目 |
-| current | `Ref` | 当前编辑的块 |
-| access | Access 身份验证和授权 |
-| history | `Ref` | 撤消、重做历史记录堆栈 |
+| 属性 | 类型 | 描述 |
+| --------- | ------------------- | --------------------------------- |
+| service | Service | 后端服务接口（文件操作/代码生成） |
+| provider | Provider | 运行时渲染提供者 |
+| simulator | Simulator | 画布渲染仿真器 |
+| project | `Ref` | 当前加载的工程模型 |
+| current | `Ref` | 当前编辑的区块模型 |
+| access | Access | 身份验证与权限控制模块 |
+| history | `Ref` | 撤销/重做历史记录堆栈 |
```ts
-// Engine initialization
+// 引擎初始化
const engine = new Engine({
- container: containerElement, // UI container
- service: localService, // Backend service
- materialPath: '/', // Material assets path
- adapter: adapterInstance, // Runtime adapter
- remote: 'https://lcdp.vtj.pro' // Remote server URL
+ container: containerElement, // UI容器元素
+ service: localService, // 后端服务实例
+ materialPath: '/', // 物料资源基础路径
+ adapter: adapterInstance, // 运行时适配器
+ remote: 'https://lcdp.vtj.pro' // 远程服务器地址
});
```
### 引擎生命周期事件
-引擎绑定到各种发射器事件以处理编辑器生命周期：
+引擎通过事件发射器绑定关键生命周期事件：
```ts
-emitter.on(EVENT_PROJECT_CHANGE, (e) => this.saveProject(e));
-emitter.on(EVENT_BLOCK_CHANGE, (e) => this.changeFile(e));
-emitter.on(EVENT_NODE_CHANGE, () => this.changeCurrentFile());
-emitter.on(EVENT_PROJECT_PUBLISH, () => this.publish());
-emitter.on(EVENT_PROJECT_FILE_PUBLISH, () => this.publishCurrent());
+// 核心事件监听
+emitter.on(EVENT_PROJECT_CHANGE, (e) => this.saveProject(e)); // 工程变更
+emitter.on(EVENT_BLOCK_CHANGE, (e) => this.changeFile(e)); // 区块变更
+emitter.on(EVENT_NODE_CHANGE, () => this.changeCurrentFile()); // 节点变更
+emitter.on(EVENT_PROJECT_PUBLISH, () => this.publish()); // 工程发布
+emitter.on(EVENT_PROJECT_FILE_PUBLISH, () => this.publishCurrent()); // 当前文件发布
```
### 初始化流程
-## 提供商
+## 提供者（Provider）
-Provider 充当设计时模型和运行时环境之间的桥梁。它负责加载依赖项、材料，并为渲染块和页面提供上下文。
+提供者作为设计时模型与运行时环境的桥梁，负责依赖加载、物料管理和渲染上下文提供。
-### 提供程序属性和初始化
+### 提供者属性与初始化
-| 属性 | 类型 | 描述 |
-| ---------- | ------------------------ | ---------------------------- |
-| mode | ContextMode | 作模式（设计、原始、运行时） |
-| service | Service | 后端服务接口 |
-| project | ProjectSchema | 加载的项目架构 |
-| library | Record | 加载的库依赖项 |
-| components | Record | 组件定义 |
-| apis | Record | API 函数 |
+| 属性 | 类型 | 描述 |
+| ---------- | ------------------------ | --------------------------------- |
+| mode | ContextMode | 运行模式（Design/Raw/Runtime） |
+| service | Service | 后端服务接口 |
+| project | ProjectSchema | 加载的工程架构 |
+| library | Record | 已加载的库依赖（Vue/VueRouter等） |
+| components | Record | 注册的组件定义 |
+| apis | Record | 平台API函数集合 |
```ts
-// Provider initialization
+// 提供者初始化
const { provider, onReady } = createProvider({
- mode: ContextMode.Runtime, // Operating mode
- service: localService, // Backend service
- materialPath: '/materials', // Material assets path
+ mode: ContextMode.Runtime, // 运行模式
+ service: localService, // 后端服务实例
+ materialPath: '/materials', // 物料资源路径
dependencies: {
- // Frontend dependencies
+ // 前端依赖库
Vue: () => import('vue'),
VueRouter: () => import('vue-router')
}
});
```
-### 加载过程
+### 上下文模式说明
-Provider 通过其 `load` 方法加载项目依赖项和资产：
+| 模式 | 使用场景 | 特性 |
+| ------- | --------------- | ------------------------------- |
+| Design | 设计时环境 | 支持节点选择/属性编辑等设计操作 |
+| Runtime | 预览/运行时环境 | 完整交互功能，无设计控件 |
+| Raw | 纯渲染模式 | 无平台依赖，最小化运行时 |
+### 资源加载流程
+
+Provider 通过 `load` 方法按需加载工程依赖和资源：
-### 渲染组件
+### 渲染能力
-Provider 可以从 DSL 架构创建渲染器
+提供者支持从DSL架构创建渲染器实例：
```ts
-// Get a render component for a file ID
+// 根据文件ID获取渲染组件
const component = await provider.getRenderComponent('pageId');
-// Create a renderer for a DSL schema
+// 从DSL架构创建渲染器
const { renderer, context } = provider.createDslRenderer(dslSchema);
```
-## 服务层
+## 服务层（Service Layer）
-Service Layer 为后端作提供抽象，为项目数据、文件管理和代码生成定义接口。它由多个级别组成：抽象的 `Service` 接口、基本实现和针对不同部署场景的特定服务类。
+服务层抽象后端操作接口，涵盖工程数据管理、文件操作和代码生成等核心能力，采用分层架构设计。
-### 服务接口层次结构
+### 服务接口架构
-#### 核心服务接口
+#### 核心服务契约
-`Service` 抽象类定义了所有后端作的 Contract：
+`Service` 抽象类定义后端操作接口规范：
-| 方法组 | 关键方法 | 目的 |
-| -------- | ---------------------------------------------- | ---------------- |
-| 配置 | getExtension（） 和 init（） | 项目初始化和配置 |
-| 项目管理 | saveProject（）、saveMaterials（） | 项目级作 |
-| 文件操作 | saveFile（）、getFile（）、removeFile（） | 块、页 CRUD |
-| 历史管理 | saveHistory（） 的 getHistoryItem（） | 撤消、重做功能 |
-| 代码生成 | publish（）， genVueContent（）， parseVue（） | 双向代码转换 |
-| 资产管理 | uploadStaticFile（）、getStaticFiles（） | 静态资源处理 |
+| 能力类别 | 关键方法 | 功能说明 |
+| -------- | -------------------------------------- | ----------------------- |
+| 配置管理 | getExtension(), init() | 工程初始化与扩展配置 |
+| 工程管理 | saveProject(), saveMaterials() | 工程元数据保存 |
+| 文件操作 | saveFile(), getFile(), removeFile() | 区块/页面文件CRUD操作 |
+| 历史管理 | saveHistory(), getHistoryItem() | 撤销/重做历史记录管理 |
+| 代码生成 | publish(), genVueContent(), parseVue() | 双向代码转换（DSL⇄Vue） |
+| 资产管理 | uploadStaticFile(), getStaticFiles() | 静态资源上传/管理 |
-#### Service Layer 架构
+#### 服务层架构
-### LocalService 实现
+### LocalService实现
-`LocalService` 通过 API 控制器与本地开发服务器通信来处理本地开发：
+`LocalService` 通过API控制器与本地开发服务器通信：
-```
-// LocalService request flow
-LocalService.init(project)
- -> this.api('init', project)
- -> POST /__vtj__/api/:type.json
- -> controller.init(req, opts)
- -> service.init(body, opts)
- -> JsonRepository.get(projectId)
+```mermaid
+sequenceDiagram
+ participant L as LocalService
+ participant A as API Controller
+ participant S as Service
+ participant R as Repository
+ L->>A: POST /__vtj__/api/init.json
+ A->>S: controller.init(req, opts)
+ S->>R: JsonRepository.get(projectId)
+ R-->>S: ProjectSchema
+ S-->>A: Response
+ A-->>L: Result
```
-#### LocalService 作映射
+#### 操作映射表
-| LocalService | 方法 | API 终端节点 | 控制器功能 | 存储库作 |
-| ------------- | ---- | ----------------- | ---------------------- | ---------------------------------- |
-| init() | POST | /init.json | controller.init | JsonRepository.get() |
-| saveProject() | POST | /saveProject.json | controller.saveProject | JsonRepository.save() |
-| saveFile() | POST | /saveFile.json | controller.saveFile | JsonRepository.save() |
-| publish() | POST | /publish.json | controller.publish | generator() + VueRepository.save() |
+| LocalService方法 | HTTP方法 | API端点 | 控制器方法 | 存储库操作 |
+| ---------------- | -------- | ----------------- | ---------------------- | ------------------------------- |
+| init() | POST | /init.json | controller.init | JsonRepository.get() |
+| saveProject() | POST | /saveProject.json | controller.saveProject | JsonRepository.save() |
+| saveFile() | POST | /saveFile.json | controller.saveFile | JsonRepository.save() |
+| publish() | POST | /publish.json | controller.publish | VueRepository.save() + 代码生成 |
### 存储库层实现
-存储库层为不同的数据类型提供特定的存储实现：
+存储库层为不同数据类型提供持久化方案：
-| 存储库类 | 存储位置 | 数据类型 | 关键方法 |
-| ---------------- | ---------------------------- | -------------------------- | --------------------------------------- |
-| JsonRepository | .vtj/projects/， .vtj/files/ | ProjectSchema、BlockSchema | get（）、save（）、remove（） |
-| VueRepository | .vtj/vue/ | 生成的 Vue 文件 | save（）、remove（） |
-| StaticRepository | public/static/ | 图片、资产 | save（）、getAllFiles（） |
-| PluginRepository | package.json | 插件定义 | getPlugins() |
-| UniRepository | src/ | Uni-app 配置 | saveManifestJson（）、savePagesJson（） |
+| 存储库类型 | 存储位置 | 数据类型 | 核心能力 |
+| ---------------- | --------------------------- | ------------------- | ------------------------- |
+| JsonRepository | .vtj/projects/, .vtj/files/ | 工程元数据/区块架构 | 工程配置的版本化管理 |
+| VueRepository | .vtj/vue/ | 生成的Vue单文件组件 | 源码版本控制/差异化对比 |
+| StaticRepository | public/static/ | 图片/CSS等静态资源 | CDN上传/资源指纹管理 |
+| PluginRepository | package.json | 平台插件配置 | 插件依赖解析/生命周期管理 |
+| UniRepository | src/ | Uni-app工程配置 | 跨平台适配（小程序/H5） |
-### 服务层请求流程
-
-**API 请求处理**
+### 请求处理流程
-## 组件之间的数据流
+## 组件间数据流
-### 设计时到运行时流程
-
-引擎文件加载和渲染过程
+### 设计时→运行时流程
-### 代码生成和发布流程
+1. 用户通过设计器修改区块属性
+2. 引擎生成更新的DSL架构
+3. 提供者重新创建渲染上下文
+4. 仿真器更新画布渲染
-引擎发布到 Vue 代码生成
+### 代码生成流程
+1. 用户触发发布操作
+2. 服务层执行代码生成
+3. Vue SFC文件写入存储库
+4. 生成可部署的前端工程
+
## 集成示例
-### 在 Runtime 应用程序中使用 Provider
+### 运行时环境集成
```ts
-// Create a provider for runtime mode
+// 创建运行时提供者
const { provider, onReady } = createProvider({
mode: ContextMode.Runtime,
service: new LocalService(createServiceRequest(notify)),
adapter: createAdapter({
- loading,
- notify,
- useTitle,
- alert
+ // 平台能力适配器
+ loading, // 加载状态管理
+ notify, // 通知系统
+ useTitle, // 页面标题管理
+ alert // 弹窗系统
}),
dependencies: {
+ // 按需加载的依赖
Vue: () => import('vue'),
VueRouter: () => import('vue-router')
}
});
-// When provider is ready, render a component
+// 提供者就绪后渲染组件
onReady(async () => {
- app.use(provider);
+ app.use(provider); // 注册提供者到Vue实例
+ // 获取页面渲染组件
renderer.value = await provider.getRenderComponent(
route.params.id.toString(),
- (file) => {
- setupPageSetting(app, route, file);
- }
+ (file) => setupPageSetting(app, route, file) // 页面配置初始化
);
});
```
-### 在设计环境中使用 Engine
+### 设计环境集成
```ts
-// Create an engine for design mode
+// 创建设计时引擎
const engine = new Engine({
- container,
- service,
- materialPath: __BASE_PATH__,
- pageBasePath: base === '/' ? '' : base,
- adapter,
- access: __ACCESS__,
- remote,
- auth,
- checkVersion
+ container, // 画布容器
+ service, // 后端服务实例
+ materialPath: __BASE_PATH__, // 物料基准路径
+ pageBasePath: base === '/' ? '' : base, // 页面基础路径
+ adapter, // 运行时适配器
+ access: __ACCESS__, // 权限控制模块
+ remote, // 远程服务器配置
+ auth, // 认证模块
+ checkVersion // 版本检查
});
-// When engine is ready, open a file
+// 引擎就绪后打开文件
engine.ready(() => {
- engine.openFile(route.query.id as string);
+ engine.openFile(route.query.id as string); // 通过URL参数打开指定文件
});
```
## 服务层集成模式
-### 运行时提供程序集成
-
-运行时模式下的 Provider Service 集成
+### 运行时服务集成
-### 访问控制集成
+> **关键点**：运行时环境通过轻量级服务代理与后端交互，避免直接依赖平台内部模块
-访问跨层插件集成
+### 访问控制集成
+> **权限控制链**：UI层 → 引擎Access模块 → 服务层 → 存储库层
+
## 总结
-Engine、Provider 和 Service 构成了 VTJ 低代码平台的架构基础：
+引擎、提供者与服务层构成VTJ低代码平台的架构基石：
-- **引擎**：管理设计时环境、项目模型和可视化编辑器
-- **提供程序** ：处理运行时依赖项、组件渲染和应用程序上下文
-- **Service**：定义具有各种实现的后端作接口
+- **引擎(Engine)**：设计时环境核心，管理工程状态和编辑生命周期
+- **提供者(Provider)**：连接设计与运行的桥梁，负责上下文创建和渲染管理
+- **服务层(Service)**：抽象后端操作，支持多存储方案和代码生成
-这些组件共同实现了可视化设计和代码生成之间的双向工作流程，这是 VTJ 平台的核心。
+三者协同实现可视化设计与可运行代码间的双向转换工作流，这是VTJ平台的核心价值所在。
-:::info 提示
-内容由AI翻译，可能会出现错漏或过时信息，请查阅原文：https://deepwiki.com/ChenXiaohui99/vtj/2.1-engine-provider-and-service-layer
+:::info 说明
+本文档内容由AI辅助翻译，可能存在术语差异或细节遗漏，请以[英文原版](https://deepwiki.com/ChenXiaohui99/vtj/2.1-engine-provider-and-service-layer)为准
:::
diff --git a/docs/src/wiki/core/index.md b/docs/src/wiki/core/index.md
index a87f8afa7..1d9e120e7 100644
--- a/docs/src/wiki/core/index.md
+++ b/docs/src/wiki/core/index.md
@@ -1,122 +1,164 @@
-# 核心架构
+# 核心架构设计
-本文档介绍了为 VTJ 低代码平台提供支持的基本架构组件，包括 Engine 编排层、Provider 服务系统、数据模型和代码生成管道。有关 UI 组件库和 widget 系统的信息，请参阅 UI 组件库 。有关特定于平台的实施，请参阅平台实施 。
+本文档详细阐述了 VTJ 低代码平台的核心架构组件，包括引擎协调层、服务提供者系统、数据模型和代码转换管道。关于 UI 组件库的具体实现，请参考 UI 组件库文档；关于平台适配层实现，请查阅平台实现文档。
-## 引擎、提供商和服务层
+## 引擎、服务提供者与模拟器层
-VTJ 架构围绕三个主要编排组件构建：用于设计时管理的 `Engine`、用于运行时服务的 `Provider` 和用于基于 iframe 的渲染的 `Simulator`。
+VTJ 架构围绕三个核心协调组件构建，形成完整的设计-开发工作流：
### 设计时引擎架构
-类 `Engine` 充当设计时环境的中央业务流程协调程序。它通过几个关键职责来管理整个生命周期：
+`Engine` 类作为设计时环境的中央协调器，通过以下关键职责管理完整生命周期：
-- **项目管理** ：通过 `Service` 界面协调 `ProjectModel` 实例和文件操作
-- **模拟器控制** ：管理模拟器以进行基于 iframe 的组件渲染和预览
-- **Asset Management**：通过 `Assets` 类处理材质加载和组件注册
-- **事件协调** ：绑定到模型事件以实现实时更新和持久性
+1. **项目管理**
+ 通过 `Service` 接口协调 `ProjectModel` 实例和文件操作
+2. **模拟器控制**
+ 管理 iframe 沙箱环境中的组件渲染和实时预览
+3. **资源管理**
+ 通过 `Assets` 类处理物料加载和组件注册
+4. **事件协调**
+ 实现模型事件绑定，支持响应式更新和状态持久化
-### Provider 服务架构
+### 服务提供者架构
-`Provider` 类跨不同执行模式（`ContextMode.Design`、`ContextMode.Runtime`、`ContextMode.Raw`）管理运行时服务和资源加载。关键架构模式包括：
+`Provider` 类管理不同执行模式下的运行时服务：
-- **资源加载** ：根据项目配置异步加载依赖项、材料和组件
-- **API 管理** ：通过 `createSchemaApis` 创建和管理基于 schema 的 API
-- **组件注册** ：动态组件解析和 Vue 插件安装
-- **DSL 渲染** ：用于创建将 BlockSchema 转换为 Vue 组件的渲染器的工厂方法
+**支持模式：**
-## 项目模型和块模型
+- **设计模式**：完整可视化编辑能力
+- **运行时模式**：生产环境优化执行
+- **原始模式**：直接执行 Vue 组件
-数据层以反应式模型为中心，这些模型通过事件驱动架构管理项目状态和组件定义。
+**核心功能：**
-### 模型层次结构和事件
+1. **资源加载**
+ 根据项目配置异步加载依赖项、物料和组件
+2. **API 管理**
+ 通过 `createSchemaApis` 创建基于 Schema 的 RESTful API
+3. **组件注册**
+ 动态解析组件并安装 Vue 插件
+4. **DSL 渲染**
+ 提供工厂方法将 BlockSchema 转换为可执行 Vue 组件
+
+## 项目模型与块模型系统
+
+数据层采用响应式模型架构，通过事件驱动机制管理项目状态和组件定义。
+
+### 模型层次结构与事件机制
-`ProjectModel` 管理完整的项目状态，包括页面、块、依赖项和配置。它实现了几个关键模式：
+`ProjectModel` 管理项目全局状态：
-- **文件管理** ：`PageFile` 和 `BlockFile` 的 CRUD 操作，包括验证和事件发出
-- **依存关系管理** ：外部库和材料的动态加载和版本管理
-- **状态同步** ：事件驱动的更新，通过 `Service` 层触发持久性
-- **平台适配**：支持不同目标平台（`web`、`h5`、`uniapp`）
+**核心数据结构：**
-关键作包括用于文件管理的 `createPage（）`、`createBlock（）`、`setDeps（）` 和 `active（）`， 每个作都会触发相应的事件以进行 UI 同步。
+- **页面(page)**：应用路由单元
+- **块(block)**：可复用组件单元
+- **依赖项(dependencies)**：外部库版本管理
+- **配置(configuration)**：项目级设置
-### 块模型和节点层次结构
+**关键特性：**
+
+- **文件操作**：支持 `PageFile` 和 `BlockFile` 的 CRUD 操作（含验证和事件触发）
+- **依赖管理**：支持外部库和物料的动态加载与版本控制
+- **状态同步**：通过事件驱动更新，由 `Service` 层触发状态持久化
+- **平台适配**：支持多目标平台（`web`, `h5`, `uniapp`）
+
+关键方法包括 `createPage()`, `createBlock()`, `setDeps()` 和 `active()`，每个操作触发相应事件实现 UI 同步
+
+### 块模型与节点层次结构
-`BlockModel` 将单个组件或页面表示为 `NodeModel` 实例的树。该架构支持：
+`BlockModel` 将组件或页面表示为 `NodeModel` 节点树：
-- **层次结构** ：基于插槽的内容组织的父子关系
-- **组件集成** ：通过 MaterialDescription 和 NodeFrom 配置动态加载组件
-- **状态管理** ：具有锁定、可见性和验证状态的响应式属性
-- **序列化**：运行时模型和可序列化 BlockSchema/NodeSchema 之间的双向转换
+**架构特性：**
-## 代码生成和解析管道
+- **层次结构**：基于插槽(slot)的内容组织，形成树形父子关系
+- **组件集成**：通过物料描述(MaterialDescription)和节点来源(NodeFrom)配置动态加载组件
+- **状态管理**：支持锁定(locked)、可见性(visible)和验证状态(validation)的响应式属性
+- **序列化**：实现运行时模型与可序列化 BlockSchema/NodeSchema 的双向转换
-VTJ 通过复杂的解析和代码生成管道实现 Vue 单文件组件 （SFC） 和低代码 DSL 之间的双向转换。
+## 代码生成与解析管道
+
+VTJ 通过多层解析和代码生成管道，实现 Vue 单文件组件(SFC)与低代码 DSL 的双向转换。
### DSL 到组件渲染管道
-渲染管道通过几个阶段将 `BlockSchema` 定义转换为可执行的 Vue 组件：
+渲染管道通过四个阶段将 `BlockSchema` 转换为可执行 Vue 组件：
-- **DSL 加载** ：createLoader 函数创建一个递归解析组件依赖关系的 BlockLoader
-- **组件解析** ：NodeFrom 配置指定如何加载组件（`Schema`、`UrlSchema`、`Plugin` 类型）
-- **异步组件创建** ：Vue 的 `defineAsyncComponent` 支持通过 **loaders** 进行缓存的延迟加载组件
-- 上下文集成 ：`CreateRendererOptions` 提供包括 Vue 实例、组件库和 API 在内的运行时上下文
+1. **DSL 加载**
+ `createLoader` 函数创建 BlockLoader，递归解析组件依赖
+2. **组件解析**
+ NodeFrom 配置指定组件加载方式（`Schema`, `UrlSchema`, `Plugin`）
+3. **异步组件创建**
+ 利用 Vue 的 `defineAsyncComponent`，通过支持缓存的加载器实现异步加载
+4. **上下文集成**
+ `CreateRendererOptions` 提供运行时上下文（Vue 实例、组件库、API）
-### Vue SFC 解析和代码生成
+### Vue SFC 解析与代码生成
-双向转换系统支持视觉设计和代码之间的无缝过渡：
+双向转换系统支持可视化设计与代码编辑的无缝切换：
-- **解析器集成**：`@vtj/parser`将 Vue SFC 转换为 `BlockSchema` 以进行可视化编辑
-- **代码生成** ：`@vtj/coder` 包从 `BlockSchema` 定义生成完整的 Vue 项目
-- **服务层** ：通过 `Service.saveFile（）` 和 `Service.getFile（）` 进行的文件作保持同步
-- **AI 集成** ：`Engine.applyAI（）` 方法使 AI 生成的 DSL 能够集成到设计工作流程中
+**核心处理流程：**
-`Engine.genSource（）` 方法编排完整的代码生成过程，而 `createRawPage（）` 支持具有可视化组件和基于代码的组件的混合工作流。
+1. **解析器集成**
+ `@vtj/parser` 将 Vue 单文件组件(SFC)转换为 `BlockSchema`
+2. **代码生成**
+ `@vtj/coder` 根据 `BlockSchema` 生成完整 Vue 项目结构
+3. **服务层操作**
+ 通过 `Service.saveFile()` 和 `Service.getFile()` 实现文件同步
+4. **AI 集成**
+ `Engine.applyAI()` 方法支持 AI 生成 DSL 集成到设计流程
-## 运行时架构和上下文管理
+`Engine.genSource()` 方法编排完整代码生成流程，`createRawPage()` 支持混合工作流（可视化组件 + 代码组件）
-运行时系统通过分层上下文架构管理不同模式和平台上的组件执行
+## 运行时架构与上下文管理
-### 上下文和模式管理
+运行时系统通过分层上下文架构管理不同模式（mode）和平台（platform）的组件执行。
+
+### 上下文与模式管理
-运行时体系结构根据 `ContextMode` 调整行为：
+运行时架构根据 `ContextMode` 调整行为：
-- **设计模式** ：完整的设计时功能，带有热重载和可视化编辑工具
-- **运行时模式** ：针对生产部署优化组件执行
-- **Raw 模式**：直接执行 Vue 组件，无低代码开销
+**执行模式：**
-`模拟器`会创建一个隔离的 iframe 环境 （`contentWindow`），其中包含自己的 `SimulatorEnv`：
+- **设计模式**：提供完整设计时功能，支持热重载(hot-reload)和可视化编辑
+- **运行时模式**：为生产环境优化组件执行性能
+- **原始模式**：直接执行 Vue 组件，无低代码平台开销
-- **组件注册表**：从 Materials 和 dependencies 解析的组件
-- **API 层** ：具有模拟数据支持的基于 Schema 的 API
-- **平台适配器** ：`Web` 与 `uniapp` 平台的不同应用程序创建策略
+`Simulator` 创建隔离的 iframe 环境（通过 `contentWindow`），包含专属的 `SimulatorEnv`：
+
+- **组件注册表**：从物料(materials)和依赖(dependencies)解析的组件集合
+- **API 层**：基于 Schema 的 API，支持模拟数据
+- **平台适配器**：针对不同平台的应用创建策略
### 多平台运行时适配
-特定于平台的运行时创建可处理不同的执行环境：
+针对不同平台采用特定的运行时创建策略：
-- **Web 平台** ：带有 Vue 路由器和 DOM 安装的标准 Vue 应用程序
-- **UniApp 平台** ：使用 `setupUniApp（）` 和 `UniH5` 运行时集成进行专门设置
-- **插件安装** ：根据依赖项配置自动安装库插件
-- **路由器配置**：具有不同历史模式的平台适当路由设置
+**平台适配实现：**
-`Provider.install（）` 方法管理跨平台的插件安装和全局属性设置。
+- **Web 平台**：创建带 Vue 路由器和 DOM 挂载的标准 Vue 应用
+- **UniApp 平台**：使用 `setupUniApp()` 和 `UniH5` 运行时进行跨平台配置
+- **插件安装**：根据依赖配置自动安装库插件
+- **路由配置**：平台特定的路由历史模式实现
-:::info 提示
-内容由AI翻译，可能会出现错漏或过时信息，请查阅原文：https://deepwiki.com/ChenXiaohui99/vtj/2-core-architecture
+`Provider.install()` 方法管理跨平台的插件安装和全局属性设置
+
+:::info 文档说明
+本文档由AI辅助生成，可能存在技术细节偏差，最新架构设计请参考原始技术文档：
+[VTJ核心架构原文](https://deepwiki.com/ChenXiaohui99/vtj/2-core-architecture)
:::
diff --git a/docs/src/wiki/core/project-and-block-models.md b/docs/src/wiki/core/project-and-block-models.md
index eb9022871..9ab78ef2e 100644
--- a/docs/src/wiki/core/project-and-block-models.md
+++ b/docs/src/wiki/core/project-and-block-models.md
@@ -1,54 +1,54 @@
-# 项目模型和块模型
+# 项目模型和区块模型
-本文档涵盖了 VTJ 低代码平台的核心数据层，特别是管理项目结构、文件组织和状态管理的 `ProjectModel` 和 `BlockModel` 类。这些模型充当所有设计时作的中央数据存储，并为可视化设计人员的文件管理功能提供基础。
+本文档涵盖了 VTJ 低代码平台的核心数据层，重点介绍了管理项目结构、文件组织和状态管理的 `ProjectModel` 和 `BlockModel` 类。这些模型作为所有设计时操作的中央数据存储，并为可视化设计器的文件管理功能提供基础支撑。
-有关在运行时渲染和执行这些模型的信息，请参阅 Engine、Provider 和 Service Layer。有关从这些模型生成代码的详细信息，请参阅代码生成和解析管道 。
+有关运行时渲染和执行这些模型的信息，请参阅 Engine、Provider 和 Service Layer 文档。有关代码生成的实现细节，请参阅代码生成和解析管道文档。
## 数据模型架构
-project 和 block 模型形成一个分层数据结构，代表整个低代码 project 状态：
+项目(Project)和区块(Block)模型构成分层数据结构，完整表示低代码项目的状态：
## ProjectModel 类结构
-`ProjectModel` 类用作管理项目状态的主要接口，并为对所有项目实体执行 CRUD 作提供方法：
+`ProjectModel` 类是管理项目状态的主要接口，提供对所有项目实体执行 CRUD 操作的方法：
### 核心属性
-| 属性 | 类型 | 描述 |
-| ------------ | ---------------- | --------------------------------- |
-| id | 字符串 | 唯一项目标识符 |
-| name | 字符串 | 项目名称 |
-| platform | 平台类型 | 目标平台（'web'、'h5'、'uniapp'） |
-| pages | 页面文件[] | 项目页面和目录 |
-| blocks | BlockFile[] | 可重用的块组件 |
-| currentFile | 页面文件、块文件 | 当前活动文件 |
-| dependencies | 依赖 | 外部包依赖项 |
-| apis | ApiSchema | API 定义 |
-| meta | 元模式[] | 元数据配置 |
+| 属性 | 类型 | 描述 |
+| -------------- | -------------------- | ------------------------------- |
+| `id` | `string` | 唯一项目标识符 |
+| `name` | `string` | 项目名称 |
+| `platform` | `PlatformType` | 目标平台（'web'/'h5'/'uniapp'） |
+| `pages` | `PageFile[]` | 项目页面和目录结构 |
+| `blocks` | `BlockFile[]` | 可复用区块组件列表 |
+| `currentFile` | `PageFile/BlockFile` | 当前活动文件 |
+| `dependencies` | `Dependency` | 外部包依赖项 |
+| `apis` | `ApiSchema` | API 定义集合 |
+| `meta` | `MetaSchema[]` | 元数据配置项 |
-### 文件管理作
+### 文件管理操作
-ProjectModel 提供了全面的文件管理功能：
+ProjectModel 提供全面的文件管理功能：
-## 事件驱动型架构
+## 事件驱动架构
-ProjectModel 为状态更改通知实现了一个全面的事件系统：
+ProjectModel 实现了完整的事件系统用于状态变更通知：
### 事件类型
-| 事件常量 | 触发条件 | 目的 |
-| --------------------------- | ---------------- | ---------------- |
-| EVENT_PROJECT_CHANGE | 任何项目属性更改 | 常规项目更新 |
-| EVENT_PROJECT_ACTIVED | 文件打开/关闭 | 活动文件状态更改 |
-| EVENT_PROJECT_PAGES_CHANGE | 页面 CRUD 作 | 页面列表更新 |
-| EVENT_PROJECT_BLOCKS_CHANGE | 阻止 CRUD 作 | 黑名单更新 |
-| EVENT_PROJECT_DEPS_CHANGE | 依赖项修改 | 依赖项管理 |
-| EVENT_PROJECT_PUBLISH | 项目发布 | 发布工作流程 |
-| EVENT_PROJECT_GEN_SOURCE | 代码生成 | 源代码生成 |
+| 事件常量 | 触发条件 | 目的 |
+| ----------------------------- | ----------------- | -------------------- |
+| `EVENT_PROJECT_CHANGE` | 任何项目属性变更 | 通知全局项目更新 |
+| `EVENT_PROJECT_ACTIVED` | 文件打开/关闭操作 | 活动文件状态变更通知 |
+| `EVENT_PROJECT_PAGES_CHANGE` | 页面增删改操作 | 页面结构更新通知 |
+| `EVENT_PROJECT_BLOCKS_CHANGE` | 区块增删改操作 | 区块列表更新通知 |
+| `EVENT_PROJECT_DEPS_CHANGE` | 依赖项变更 | 依赖关系更新通知 |
+| `EVENT_PROJECT_PUBLISH` | 项目发布操作 | 触发发布流程 |
+| `EVENT_PROJECT_GEN_SOURCE` | 代码生成操作 | 源代码生成事件通知 |
### 事件流模式
@@ -56,91 +56,86 @@ ProjectModel 为状态更改通知实现了一个全面的事件系统：
## 文件类型系统
-VTJ 管理两种具有不同特征的主要文件类型：
+VTJ 管理两种具有不同特性的主要文件类型：
### PageFile 结构
-页面表示可导航的应用程序屏幕，可以按层次结构进行组织：
+页面表示可导航的应用程序界面，支持分层组织：
```ts
interface PageFile {
- id: string; // Unique identifier
- name: string; // Component name (PascalCase)
- title: string; // Display title
- type: 'page'; // File type marker
- dir?: boolean; // Directory flag
- children?: PageFile[]; // Child pages (for directories)
- dsl?: BlockSchema; // Design schema (null for directories)
- raw?: boolean; // Source code mode flag
- cache?: boolean; // Page caching
- hidden?: boolean; // Hide in navigation
- pure?: boolean; // Pure component mode
+ id: string; // 唯一标识符
+ name: string; // 组件名（帕斯卡命名法）
+ title: string; // 显示标题
+ type: 'page'; // 文件类型标记
+ dir?: boolean; // 目录标识
+ children?: PageFile[]; // 子页面（目录结构）
+ dsl?: BlockSchema; // 设计架构（目录为空）
+ raw?: boolean; // 源码模式标记
+ cache?: boolean; // 页面缓存配置
+ hidden?: boolean; // 是否隐藏于导航
+ pure?: boolean; // 纯组件模式
}
```
### BlockFile 结构
-区块是可重用的组件，可以通过多种方法创建：
+区块是可复用的组件单元，支持多种创建方式：
```ts
interface BlockFile {
- id: string;
- name: string;
- title: string;
- type: 'block';
- fromType: 'Schema' | 'UrlSchema' | 'Plugin'; // Creation method
- dsl?: BlockSchema; // Design schema
- category?: string; // Organization category
- library?: string; // Plugin library name
- urls?: string; // External resource URLs
+ id: string; // 唯一标识符
+ name: string; // 区块名称
+ title: string; // 显示标题
+ type: 'block'; // 文件类型标记
+ fromType: 'Schema' | 'UrlSchema' | 'Plugin'; // 创建方式
+ dsl?: BlockSchema; // 设计架构
+ category?: string; // 分类标识
+ library?: string; // 插件库名称
+ urls?: string; // 外部资源URL
}
```
-`fromType` 属性确定如何处理块：
+`fromType` 属性决定区块的处理方式：
-- **Schema** ：通过可视化设计器创建
+- **Schema**：通过可视化设计器创建
- **UrlSchema**：从外部 JSON 架构导入
-- **Plugin** ：从外部 JavaScript/CSS 资源加载
+- **Plugin**：从外部 JavaScript/CSS 资源加载
-## 与 Designer UI 集成
+## 与设计器(Designer)集成
-项目模型通过反应式钩子和 widget 组件与 designer 界面紧密集成：
+项目模型通过响应式钩子和组件与设计器界面深度集成：
-### UI 组件集成
+### UI 组件集成架构
-### UI 上下文中的文件操作
+### 文件操作接口
-设计器小部件为文件作提供了用户友好的界面：
+设计器小部件提供用户友好的文件操作界面：
-### Pages 小组件作
+### 页面管理操作
```ts
-// Page management actions
+// 页面管理操作处理
const onAction = async (action: any) => {
const { name, modelValue } = action;
const { data } = modelValue;
switch (name) {
- case 'add':
- // Create new page/directory
+ case 'add': // 创建新页面/目录
project.value?.createPage(pageData, parentId);
break;
- case 'edit':
- // Update existing page
+ case 'edit': // 更新现有页面
project.value?.updatePage(pageData);
break;
- case 'remove':
- // Delete page
+ case 'remove': // 删除页面
project.value?.removePage(data.id);
break;
- case 'copy':
- // Clone page
+ case 'copy': // 克隆页面
project.value?.clonePage(data, parentId);
break;
- case 'saveToBlock':
- // Convert page to reusable block
+ case 'saveToBlock': // 转换为可复用区块
await project.value?.saveToBlock(data);
break;
}
@@ -149,43 +144,44 @@ const onAction = async (action: any) => {
### 区块管理界面
-块小部件提供分类组织和拖放功能：
+区块小部件提供分类组织和拖放功能：
-## 数据持久化和序列化
+## 数据持久化与序列化
-ProjectModel 为持久化和共享提供了序列化功能：
+ProjectModel 提供序列化功能用于持久化存储：
### DSL 导出格式
```ts
toDsl(_version?: string): ProjectSchema {
+ // 提取可序列化属性
const attrs = ProjectModel.attrs.reduce((result, current) => {
result[current] = (this as any)[current];
return result;
}, {} as Record);
- // Clean DSL data for serialization
+ // 清理序列化数据
if (attrs.pages) {
attrs.pages = attrs.pages.map((page: PageFile) => ({
...page,
- dsl: undefined // Remove design schemas
+ dsl: undefined // 移除设计架构
}));
}
return {
- __VTJ_PROJECT__: true,
+ __VTJ_PROJECT__: true, // 项目标识
id: this.id,
...attrs
} as ProjectSchema;
}
```
-此方法创建适用于以下各项的可序列化表示形式：
+此序列化格式适用于：
- 项目文件存储
-- 版本控制
+- 版本控制系统
- 模板发布
- 代码生成输入
@@ -193,25 +189,27 @@ toDsl(_version?: string): ProjectSchema {
-## 锁管理系统
+## 协作编辑锁系统
-ProjectModel 通过锁定机制包含协作编辑支持：
+ProjectModel 通过锁定机制支持协作编辑：
```ts
+// 锁定项目
lock(id: string) {
this.locked = id;
- // Emit change event
+ // 触发变更事件
}
+// 解锁项目
unlock(id: string) {
if (id !== this.locked) return;
this.locked = '';
- // Emit change event
+ // 触发变更事件
}
```
-该系统可防止在协作环境中进行并发修改，并与身份验证系统集成，以确保只有授权用户才能修改锁定的项目。
+该系统防止协作环境中的并发修改，并与认证系统集成确保仅授权用户可修改锁定的项目。
-:::info 提示
-内容由AI翻译，可能会出现错漏或过时信息，请查阅原文：https://deepwiki.com/ChenXiaohui99/vtj/2.2-project-and-block-models
+:::info 说明
+本文档由AI辅助翻译，可能存在术语差异或时效性问题，请查阅原文确认：https://deepwiki.com/ChenXiaohui99/vtj/2.2-project-and-block-models
:::
diff --git a/docs/src/wiki/dev/index.md b/docs/src/wiki/dev/index.md
index eb3f287a3..c0e851fbe 100644
--- a/docs/src/wiki/dev/index.md
+++ b/docs/src/wiki/dev/index.md
@@ -1,24 +1,24 @@
-# 开发人员工具和可扩展性
+# 开发人员工具与可扩展性
-VTJ 平台提供了一个由开发人员工具和可扩展性框架组成的综合生态系统，旨在支持开发、构建和扩展低代码应用程序。本页概述了关键的工具基础设施、基架系统和插件架构，使开发人员能够使用和扩展 VTJ 平台。
+VTJ 平台提供了一套全面的开发工具和可扩展性框架，旨在支持低代码应用程序的开发、构建和扩展。本文档概述了关键的工具基础设施、脚手架系统和插件架构，使开发人员能够高效使用和扩展 VTJ 平台。
-VTJ 开发人员工具生态系统由几个互连系统组成，以下小节中对此进行了详细说明：
+VTJ 开发者工具生态系统由多个互联系统组成：
-- **CLI 和构建系统** : 命令行工具和构建配置
-- **插件系统:** 自定义组件的扩展性框架
-- **Uni-App 集成**: 跨平台开发支持
+- **CLI 与构建系统**：命令行工具和构建配置
+- **插件系统**：自定义组件的扩展性框架
+- **Uni-App 集成**：跨平台开发支持
## 概述
-VTJ 开发人员工具生态系统是围绕多个专用软件包构建的，这些软件包协同工作以提供完整的开发体验。这些工具与 Vite、TypeScript 和 Vue 等现代前端技术集成，为平台开发和扩展创建优化的工作流程。
+VTJ 开发者工具生态系统围绕多个专用软件包构建，这些包协同工作以提供完整的开发体验。这些工具与现代前端技术（如 Vite、TypeScript 和 Vue）集成，为平台开发和扩展创建了优化的工作流。
-**VTJ 开发人员工具生态系统**
+**VTJ 开发者工具生态系统**
-## 核心开发人员工具
+## 核心开发工具
-VTJ 生态系统包括几个提供开发工具和基础设施的核心软件包：
+VTJ 生态系统包含多个提供开发工具和基础设施的核心软件包：
**核心开发包**
@@ -26,33 +26,33 @@ VTJ 生态系统包括几个提供开发工具和基础设施的核心软件包
### 关键工具功能
-| 包 | 主要功能 | 主要出口 |
-| ---------- | ----------------------------- | ---------------------------------------------------------------- |
-| @vtj/cli | 构建工具和开发服务器 | createViteConfig、createUniappViteConfig、createPluginViteConfig |
-| @vtj/local | 具有 API 代理的本地开发服务器 | 开发服务器、文件作、代码生成 |
-| @vtj/node | 用于工具的 Node.js 实用程序 | 文件系统实用程序、HTTP 客户端、项目作 |
-| create-vtj | 项目脚手架系统 | 针对不同平台创建基于模板的项目 |
+| 包 | 主要功能 | 主要导出项 |
+| ---------- | ------------------------- | ---------------------------------------------------------------- |
+| @vtj/cli | 构建工具和开发服务器 | createViteConfig、createUniappViteConfig、createPluginViteConfig |
+| @vtj/local | 带API代理的本地开发服务器 | 开发服务器、文件操作、代码生成 |
+| @vtj/node | Node.js工具实用程序 | 文件系统实用程序、HTTP客户端、项目操作 |
+| create-vtj | 项目脚手架系统 | 基于模板创建不同平台的项目 |
## 项目脚手架系统
-VTJ 平台通过 `create-vtj` 软件包包括一个复杂的项目基架系统，该系统为不同类型的 VTJ 应用程序提供基于模板的项目创建。
+VTJ 平台通过 `create-vtj` 包提供完善的项目脚手架系统，为不同类型的 VTJ 应用程序提供基于模板的项目创建方案。
**脚手架架构**
-### 可用的项目模板
+### 可用项目模板
-| 模板 | 参数 | 生成的项目类型 | 主要特点 |
+| 模板 | 参数 | 生成的项目类型 | 主要特性 |
| -------- | ----------- | ---------------------- | ------------------------------- |
| 应用程序 | -t app | 标准 Vue Web 应用程序 | Vue 路由器、Pinia、Element Plus |
-| H5 | -t h5 | 移动优先的 H5 应用程序 | Vant UI，移动优化 |
+| H5 | -t h5 | 移动优先的 H5 应用程序 | Vant UI，移动端优化 |
| UniApp | -t uniapp | 跨平台应用程序 | 多平台部署，Uni-UI |
-| 物料 | -t material | 组件库 | 插件系统，可重用组件 |
+| 物料库 | -t material | 组件库 | 插件系统，可复用组件 |
## 插件开发框架
-VTJ 提供了一个全面的插件开发框架，允许开发人员为低代码平台创建自定义组件、材料和扩展。
+VTJ 提供全面的插件开发框架，允许开发者为低代码平台创建自定义组件、物料和扩展。
**插件系统架构**
@@ -63,16 +63,16 @@ VTJ 提供了一个全面的插件开发框架，允许开发人员为低代码
插件通过 `package.json` 中的 `vtj.plugins` 部分进行配置：
```json
-// Example plugin configuration in package.json
+// package.json 中的插件配置示例
{
"vtj": {
"plugins": [
{
- "id": "v-test", // Unique plugin identifier
- "name": "VTest", // Component name for registration
- "library": "VTest", // Library export name
- "title": "测试", // Display title in designer
- "urls": "xxx.json,xxx.css,xxx.js" // Additional resources
+ "id": "v-test", // 唯一插件标识符
+ "name": "VTest", // 注册的组件名称
+ "library": "VTest", // 库导出名称
+ "title": "测试", // 设计器中的显示标题
+ "urls": "xxx.json,xxx.css,xxx.js" // 附加资源
}
]
}
@@ -81,7 +81,7 @@ VTJ 提供了一个全面的插件开发框架，允许开发人员为低代码
## 本地开发基础设施
-VTJ 平台包括用于本地开发的专用工具，包括具有 API 代理功能和文件作实用程序的开发服务器。
+VTJ 平台包含专为本地开发设计的工具，包括具备 API 代理功能和文件操作实用程序的开发服务器。
**本地开发架构**
@@ -89,62 +89,62 @@ VTJ 平台包括用于本地开发的专用工具，包括具有 API 代理功
### 开发服务器功能
-| 特征 | 包 | 依赖 | 目的 |
+| 功能 | 包 | 依赖项 | 目的 |
| -------- | ---------- | ----------------------- | ----------------------- |
| 文件上传 | @vtj/local | formidable | 处理开发中的文件上传 |
| 代码生成 | @vtj/local | @vtj/coder、@vtj/parser | 生成和解析 Vue SFC 文件 |
-| API 代理 | @vtj/local | @vtj/node | 开发期间的代理 API 请求 |
-| 文件作 | @vtj/node | FS-extra、 AXIOS | 文件系统和 HTTP 作 |
+| API 代理 | @vtj/local | @vtj/node | 开发期间代理 API 请求 |
+| 文件操作 | @vtj/node | FS-extra、Axios | 文件系统和 HTTP 操作 |
-## 扩展性框架
+## 可扩展性框架
-VTJ 为开发人员提供了多个扩展点，用于自定义和扩展平台的功能。
+VTJ 为开发者提供多个扩展点，用于自定义和扩展平台功能。
-**扩展点和集成**
+**扩展点与集成**
-### 扩展开发工作流程
+### 扩展开发工作流
-| 扩展类型 | 基础包 | 关键依赖项 | 构建输出 |
-| ------------- | -------------------------------------- | ---------------------------------- | ------------------ |
-| 材料组件 | @vtj/materials | Element Plus、Ant Design Vue、Vant | 包含元数据的组件库 |
-| Designer 插件 | @vtj/designer 摩纳哥编辑，highlight.js | 设计时功能 |
-| 自定义渲染器 | @vtj/renderer | @vtj/core、@vtj/utils | 运行时渲染逻辑 |
-| 构建插件 | @vtj/cli | Vite、Rollup 插件 | 开发工具 |
+| 扩展类型 | 基础包 | 关键依赖项 | 构建输出 |
+| ------------ | -------------- | ---------------------------- | ---------------- |
+| 物料组件 | @vtj/materials | Element Plus、Ant Design Vue | 含元数据的组件库 |
+| 设计器插件 | @vtj/designer | Monaco 编辑器、highlight.js | 设计时功能 |
+| 自定义渲染器 | @vtj/renderer | @vtj/core、@vtj/utils | 运行时渲染逻辑 |
+| 构建插件 | @vtj/cli | Vite、Rollup 插件 | 开发工具 |
-## 开发工作流程集成
+## 开发工作流集成
-VTJ 开发人员工具与现代开发工作流程无缝集成，并通过 npm 脚本和命令行实用程序提供全面的自动化。
+VTJ 开发者工具与现代开发工作流无缝集成，通过 npm 脚本和命令行实用程序提供全面的自动化支持。
-**Monorepo 开发工作**
+**Monorepo 开发工作流**
### 关键开发命令
-| 命令类别 | 示例命令 | 目的 |
-| ---------- | ------------------------------------- | -------------------- |
-| 设置和维护 | Pnpm 设置 、Pnpm 重置 、Pnpm 清理 | 环境初始化 |
-| 建筑 | npm run build， lerna run build | 编译所有软件包 |
-| 测试 | npm run test、npm run 覆盖率 | 运行测试并生成覆盖率 |
-| 发展 | npm run dev、npm run pro：dev | 启动开发服务器 |
-| 文档 | npm run docs：build， npm run typedoc | 生成文档 |
+| 命令类别 | 示例命令 | 目的 |
+| ---------- | ----------------------------------- | -------------------- |
+| 设置与维护 | pnpm setup、pnpm reset、pnpm clean | 环境初始化 |
+| 构建 | npm run build、lerna run build | 编译所有软件包 |
+| 测试 | npm run test、npm run coverage | 运行测试并生成覆盖率 |
+| 开发 | npm run dev、npm run pro:dev | 启动开发服务器 |
+| 文档 | npm run docs:build、npm run typedoc | 生成文档 |
-## 开发工作流程
+## 开发工作流命令
-VTJ CLI 使用以下命令（在项目 package.json 中提供）支持简化的开发工作流程：
+VTJ CLI 支持通过项目 package.json 中的命令简化开发工作流：
| 命令 | 描述 |
| ----------- | -------------- |
| vtj dev | 启动开发服务器 |
-| vtj build | 为生产而构建 |
+| vtj build | 构建生产版本 |
| vtj preview | 预览生产版本 |
| vtj test | 运行单元测试 |
-| vtj clean | 清理构建工件 |
+| vtj clean | 清理构建产物 |
## 结论
-VTJ 开发人员工具提供了一套全面的实用程序，用于构建、测试和部署各种类型的低代码应用程序。通过利用 Vite、TypeScript 和 Vue 等现代前端工具，VTJ CLI 创建了一个强大而灵活的开发环境。
+VTJ 开发者工具提供了一套全面的实用程序，用于构建、测试和部署各类低代码应用程序。通过利用 Vite、TypeScript 和 Vue 等现代前端工具，VTJ CLI 创建了强大而灵活的开发环境。
-对于需要扩展 VTJ 本身功能的项目，开发人员工具支持使用专用构建配置和集成点进行插件开发。
+对于需要扩展 VTJ 本身功能的项目，开发者工具支持使用专用构建配置和集成点进行插件开发。
diff --git a/docs/src/wiki/index.md b/docs/src/wiki/index.md
index a799cd1bc..a94bab468 100644
--- a/docs/src/wiki/index.md
+++ b/docs/src/wiki/index.md
@@ -1,111 +1,138 @@
-# 概述
+# VTJ.PRO 概述
-VTJ.PRO 是一个 AI 驱动的 Vue3 低代码开发平台，支持 Vue 单文件组件 （SFC） 和领域特定语言 （DSL） 表示之间的双向转换。VTJ 构建在具有同步版本控制的 monorepo 架构之上，为可视化设计、代码生成和多平台部署提供了一个全面的软件包生态系统，同时保持与现有 Vue 3 开发工作流程的兼容性。
+VTJ.PRO 是一个 AI 驱动的 Vue3 低代码开发平台，支持 Vue 单文件组件(SFC)与领域特定语言(DSL)之间的双向转换。基于具有同步版本控制的 monorepo 架构，VTJ 提供了完整的软件包生态系统，包含可视化设计器、代码生成引擎和多平台部署能力，同时保持与标准 Vue 3 开发工作流的兼容性。
-## 目的和范围
+## 目的与范围
-本文档简要概述了 VTJ 低代码平台，包括其架构、关键组件和设计理念。有关特定组件（如 Engine 和 Provider 系统）的详细信息，请参阅核心架构 ，或者有关工程和块模型的详细信息，请参阅工程和块模型 。
+本文档概述了 VTJ 低代码平台的整体架构、核心组件和设计理念，涵盖以下关键方面：
-## 主要特点
+- **核心架构**：引擎协调层、服务提供者系统和数据模型
+- **开发工作流**：双向代码转换、AI 增强开发
+- **多平台支持**：Web、H5 和 UniApp 部署方案
+- **扩展能力**：插件系统和开发者工具
-- **双向代码流** ：在视觉设计和 Vue 源代码之间无缝转换
-- **AI 集成** ：智能代码生成、优化和图像到代码转换功能
-- **Vue 3 基础** ：建立在最新的 Vue 生态系统之上，支持 TypeScript 和 Vite
-- **多平台支持** ：面向 Web 应用程序、移动应用程序和 UniApp（跨平台）项目
-- **低学习曲线** ：专为 Vue 开发人员设计，需要最少的额外知识
-- **非侵入式实施** ：与现有项目集成，无代码污染
+## 核心特性
+
+- **双向代码转换**：实现可视化设计与 Vue 源代码之间的无缝双向转换
+- **AI 增强开发**：集成智能代码生成、性能优化及图像到代码转换功能
+- **Vue 3 基础架构**：基于最新 Vue 生态系统，全面支持 TypeScript 和 Vite
+- **多平台适配**：针对 Web 应用、移动 H5 应用和 UniApp 跨平台项目优化
+- **渐进式集成**：专为 Vue 开发者设计，支持逐步集成到现有项目
+- **非侵入式设计**：与现有代码库无缝集成，无运行时污染
## 系统架构概述
-VTJ 遵循模块化架构，在多个软件包中明确分离关注点，从基础到平台特定的实现，按层组织。
+VTJ 采用分层模块化架构，通过清晰的关注点分离实现高内聚低耦合：
-## Monorepo 包架构
+## Monorepo 包结构
+
+VTJ 使用 monorepo 管理多个相互依赖的独立包，确保版本同步和高效协作：
## 项目脚手架系统
+create-vtj 提供标准化项目初始化流程，支持多种项目类型：
+
-## AI 增强的设计时到运行时流程
+## AI 增强的设计-开发工作流
-VTJ 的核心创新是 Vue SFC 和低代码 DSL 之间的双向转换，并通过 AI 功能进行了增强：
+VTJ 通过 AI 技术增强 Vue SFC 与低代码 DSL 之间的双向转换：
-### 双向代码管道
+### 双向代码转换管道
-### 数据结构流
+### 数据结构转换流程
-## AI 驱动的开发功能
+1. **设计时模型**：可视化编辑生成 DSL 表示
+2. **代码生成**：将 DSL 转换为 Vue SFC
+3. **AI 优化**：应用 AI 建议改进代码质量和性能
+4. **逆向工程**：将修改后的代码同步回设计时模型
-VTJ 将 AI 功能集成到整个开发管道中，重点是图像到代码的生成和智能辅助：
+## AI 驱动的开发能力
+
+VTJ 将 AI 功能深度集成到整个开发流程中：
### AI 集成架构
-## 开始
+**关键 AI 功能：**
-VTJ 提供了几种开始使用该平台的方法：
+- 自然语言转代码：将需求描述转换为可执行组件
+- 设计稿识别：将 UI 设计图像转换为 Vue 组件
+- 代码优化建议：识别性能瓶颈并提供优化方案
+- 错误预测与修复：提前检测潜在错误并提供修复方案
+
+## 快速开始
### 使用 create-vtj 创建项目
-`create-vtj` 脚手架工具使用预配置的构建系统生成特定于平台的项目：
+通过以下命令创建不同类型的 VTJ 项目：
```shell
-# Web applications (PC) - uses @vtj/web platform
+# Web 应用程序(PC) - 使用 @vtj/web 平台
npm create vtj@latest --registry=https://registry.npmmirror.com -- -t app
-# Mobile H5 applications - uses @vtj/h5 platform
+# 移动 H5 应用程序 - 使用 @vtj/h5 平台
npm create vtj@latest --registry=https://registry.npmmirror.com -- -t h5
-# Cross-platform apps - uses @vtj/uni-app platform
+# 跨平台应用 - 使用 @vtj/uni-app 平台
npm create vtj@latest --registry=https://registry.npmmirror.com -- -t uniapp
-# Component development - uses @vtj/materials
+# 组件开发 - 使用 @vtj/materials 平台
npm create vtj@latest --registry=https://registry.npmmirror.com -- -t material
```
-### 开发环境设置
+### 开发环境配置
-对于 VTJ 本身的本地开发：
+配置本地开发环境的完整流程：
```shell
git clone https://gitee.com/newgateway/vtj.git
cd vtj
-npm run setup && npm run build && npm run app:dev
+npm run setup # 安装依赖并初始化项目
+npm run build # 构建所有包
+npm run app:dev # 启动开发服务器
```
### 与现有项目集成
-VTJ 通过特定于平台的软件包与现有的 Vue 3 项目无缝集成。有关详细的集成模式，请参阅 集成指南
+VTJ 通过平台适配器包与现有 Vue 3 项目集成：
-### 多平台部署架构
+1. 安装对应平台包：`npm install @vtj/web`
+2. 在入口文件中注册 VTJ 插件
+3. 配置构建工具（Vite/Webpack）集成
+4. 逐步迁移组件到可视化设计环境
-VTJ 通过专门的平台包支持多个部署目标，每个平台包都针对特定环境进行了优化：
+## 多平台部署架构
-| 平台 | 包 | 目标环境 | 关键依赖项 |
-| --------- | ------------ | -------------------------------- | ------------------------------------------ |
-| Web | @vtj/web | 桌面 Web 应用程序 | element-plus、@vtj/core、@vtj/renderer |
-| 设计器 | @vtj/pro | 使用 Designer 的企业平台 | @vtj/renderer、@vtj/local、 @vtj/materials |
-| 移动式 H5 | @vtj/h5 | 移动 Web 应用程序 | vant、@vtj/core、@vtj/renderer |
-| UniApp | @vtj/uni-app | 跨平台应用（iOS/Android/小程序） | @dcloudio/uni-app、@vtj/uni、@vtj/renderer |
+VTJ 通过专用平台包支持不同部署目标：
-### 平台架构
+| 平台 | 包 | 目标环境 | 核心依赖 |
+| ------- | ------------ | ------------------------------ | ------------------------------------------ |
+| Web | @vtj/web | 桌面 Web 应用 | element-plus, @vtj/core, @vtj/renderer |
+| 设计器 | @vtj/pro | 可视化设计平台 | @vtj/renderer, @vtj/local, @vtj/materials |
+| 移动 H5 | @vtj/h5 | 移动端 Web 应用 | vant, @vtj/core, @vtj/renderer |
+| UniApp | @vtj/uni-app | 跨平台应用(小程序/iOS/Android) | @dcloudio/uni-app, @vtj/uni, @vtj/renderer |
+
+### 平台运行时架构
## 当前版本
-VTJ 的当前版本是 0.12.40，在 monorepo 中的所有软件包之间同步。
+VTJ 当前稳定版本为 v0.12.47，所有 monorepo 包保持版本同步。每个版本包含：
-## 结论
+- 核心引擎更新
+- AI 模型优化
+- 平台适配改进
+- 开发者工具增强
-VTJ.PRO 是专为 Vue 3 开发人员设计的综合性低代码平台。通过实现视觉设计和 Vue 源代码之间的双向转换，它可以加速开发，同时保持直接代码访问的灵活性和强大功能。该平台的模块化架构、AI 集成和多平台支持使其适用于广泛的应用程序开发场景。
+## 总结
-:::info 提示
-内容由AI翻译，可能会出现错漏或过时信息，请查阅原文：https://deepwiki.com/ChenXiaohui99/vtj/1-overview
-:::
+VTJ.PRO 是为 Vue 3 开发者设计的企业级低代码平台，通过可视化设计与源代码之间的双向转换，在保持开发灵活性的同时提升效率。其模块化架构、AI 增强工作流和多平台支持，使其适用于从简单原型到复杂企业应用的开发场景。
diff --git a/docs/src/wiki/package/charts-and-visualization.md b/docs/src/wiki/package/charts-and-visualization.md
index 5261c3559..0e927c83d 100644
--- a/docs/src/wiki/package/charts-and-visualization.md
+++ b/docs/src/wiki/package/charts-and-visualization.md
@@ -1,70 +1,78 @@
-# 图表和可视化
+# 图表与可视化
-本文档涵盖了 `@vtj/charts` 包，该包通过 ECharts 集成为 VTJ 低代码平台提供了全面的数据可视化能力。该软件包提供图表组件、地理映射和可视化工具，这些工具可与 VTJ 的设计时和运行时环境无缝集成。
+本文档涵盖 `@vtj/charts` 包，该包通过 ECharts 集成为 VTJ 低代码平台提供全面的数据可视化能力。该软件包提供图表组件、地理映射和可视化工具，可与 VTJ 设计时和运行时环境无缝集成。
-有关更广泛的 UI 组件生态系统的信息，请参阅 **UI 组件库 **。有关特定于平台的实施，请参阅**平台实施** 。
+关于更广泛的 UI 组件生态系统，请参阅 **UI 组件库**。关于特定平台实现，请参阅**平台实现**文档。
-## 软件包概述
+## 包概述
-`@vtj/charts` 包是 VTJ 组件生态中的主要可视化层，基于 ECharts 5.6.0 构建，作为其核心图表引擎。该包提供了 Vue 3 组件，这些组件封装了 ECharts 功能，同时保持了与 VTJ 低代码设计模式的兼容性。
+`@vtj/charts` 包是 VTJ 组件生态中的核心可视化层，基于 ECharts 5.6.0 构建。该包提供 Vue 3 组件，封装了 ECharts 功能，同时保持与 VTJ 低代码设计模式的兼容性。
-**Chart 包依赖项和集成**
+**图表包依赖项与集成架构**
## 图表组件系统
-charts 包提供了一种基于组件的架构，将 ECharts 功能封装到可重用的 Vue 组件中。这些组件旨在在 VTJ 的低代码环境中工作，同时提供对 ECharts 可视化能力的完全访问权限。
+图表包采用基于组件的架构，将 ECharts 功能封装为可重用的 Vue 组件。这些组件专为 VTJ 低代码环境设计，同时提供对 ECharts 可视化能力的完整访问。
-| 组件类别 | 功能性 | ECharts 集成 |
+| 组件类别 | 功能描述 | ECharts 集成机制 |
| ---------- | ---------------------------- | --------------------- |
-| 基本图表 | 折线图、条形图、饼图、散点图 | 直接 ECharts 选项绑定 |
-| 地理图表 | 地图、地理可视化 | ECharts geo/map 组件 |
-| 复杂图表 | 多轴，组合 | ECharts 高级配置 |
-| 交互式图表 | 画笔、DataZoom、图例 | ECharts 交互 API |
+| 基础图表 | 折线图、柱状图、饼图、散点图 | 直接 ECharts 选项绑定 |
+| 地理图表 | 地图、地理数据可视化 | ECharts geo/map 组件 |
+| 复合图表 | 多轴图表、组合图表 | ECharts 高级配置 |
+| 交互式图表 | 刷选、区域缩放、图例控制 | ECharts 交互 API |
-**Chart 组件架构和 ECharts 集成**
+**图表组件架构与 ECharts 集成**
## 地理可视化支持
-图表包的一个重要功能是其地理可视化功能，包括对地理地图和地理数据显示的支持。添加此功能是为了在 VTJ 应用程序中支持基于位置的数据可视化。
+图表包的核心功能是其地理可视化能力，支持地理地图和地理数据展示。此功能专门为 VTJ 应用中基于位置的数据可视化需求设计。
-**地理图表初始化和数据加载流程**
+**地理图表初始化与数据加载流程**
-地理可视化系统解决了 DOM 就绪和异步数据加载的常见问题，与地图就绪状态和 DOM 渲染计时相关的错误修复证明了这一点。
+地理可视化系统解决了以下关键问题：
+
+- DOM 就绪状态检测
+- 异步数据加载管理
+- 地图就绪状态同步
+- DOM 渲染时序处理
## ECharts 集成架构
-该包为 ECharts 提供了一个复杂的包装器，在保持 Vue 3 响应性的同时，保留了对完整 ECharts API 的访问。此集成处理图表生命周期、数据绑定和事件管理。
+该包为 ECharts 提供了复杂的封装层，在保留完整 ECharts API 访问能力的同时，确保与 Vue 3 响应式系统的兼容。此集成处理以下关键方面：
+
+- **DOM 就绪检测**：确保 ECharts 在 DOM 元素可用后初始化
+- **响应式更新**：当数据或配置 props 变化时自动更新图表
+- **事件桥接**：将 ECharts 原生事件转换为 Vue 组件事件
+- **资源管理**：在组件卸载时正确处理图表实例
**ECharts Vue 3 集成架构**
-集成层处理几个关键方面：
+## 构建与分发系统
-- **DOM 就绪性**：确保 ECharts 初始化发生在 DOM 元素可用之后
-- **反应式更新** ：当数据或配置 props 发生变化时自动更新图表
-- **事件桥接** ：将 ECharts 事件转换为 Vue 组件事件
-- **资源管理** ：在组件卸载期间正确处理 Chart 实例
+图表包采用双构建系统，同时生成 ES 模块和 UMD 包，确保在 VTJ 生态系统内不同部署场景的兼容性。
-## 构建和分发系统
-
-charts 包使用双重构建系统，该系统可同时生成 ES 模块和 UMD 捆绑包，从而确保 VTJ 生态系统内不同部署场景之间的兼容性。
-
-| 构建目标 | 输出格式 | 用例 |
-| --------------- | ----------------- | ------------------------ |
-| ES 模块 | dist/index.mjs | 现代捆绑器，tree-shaking |
-| UMD 捆绑包 | dist/index.umd.js | 浏览器全局变量、遗留系统 |
-| TypeScript 定义 | types/index.d.ts | 类型安全和 IDE 支持 |
-| CSS 捆绑包 | dist/style.css | 组件样式 |
+| 构建目标 | 输出格式 | 适用场景 |
+| --------------- | ----------------- | ------------------------------- |
+| ES 模块 | dist/index.mjs | 现代打包工具，支持 tree-shaking |
+| UMD 包 | dist/index.umd.js | 浏览器全局变量、传统系统 |
+| TypeScript 声明 | types/index.d.ts | 类型安全与 IDE 支持 |
+| CSS 样式包 | dist/style.css | 组件样式 |
-**图表包构建和分发管道**
+**图表包构建与分发流程**
-构建系统确保 charts 包可以在 VTJ 的多平台部署目标中使用，同时通过 tree-shaking 支持保持最佳捆绑包大小。
+构建系统确保图表包：
+
+1. 支持 VTJ 多平台部署目标
+2. 通过 tree-shaking 优化包体积
+3. 提供类型安全支持
+4. 保持样式一致性
diff --git a/docs/src/wiki/package/designer-and-renderer.md b/docs/src/wiki/package/designer-and-renderer.md
index 11ac6b102..548dc4f62 100644
--- a/docs/src/wiki/package/designer-and-renderer.md
+++ b/docs/src/wiki/package/designer-and-renderer.md
@@ -1,79 +1,136 @@
-# 设计器和渲染器
+# 设计器与渲染器
-本文档介绍了支持 VTJ 低代码体验的可视化设计环境 （`@vtj/designer`） 和运行时渲染系统 （`@vtj/renderer`）。Designer 提供了交互式可视化编辑环境，用户可以在其中拖放和配置组件，而 Renderer 在设计时预览和运行时环境中执行生成的 DSL 架构。
+本文档介绍了支持 VTJ 低代码体验的可视化设计环境（`@vtj/designer`）和运行时渲染系统（`@vtj/renderer`）。设计器提供交互式可视化编辑环境，用户可在其中拖放和配置组件；渲染器则负责在设计时预览和运行时环境中执行生成的 DSL 架构。
-有关这些系统运行的核心引擎和数据模型的信息，请参阅**引擎、提供程序和服务层** 。有关提供实际小组件的 UI 组件库的详细信息，请参阅 **UI 组件库** 。
+关于这些系统运行的核心引擎和数据模型，请参阅**引擎、提供程序和服务层**文档。关于提供实际组件的 UI 组件库，请参阅 **UI 组件库**文档。
-## Designer 架构
+## 设计器架构
-Designer 系统通过以 `Designer` 类及其与仿真环境的集成为中心的复杂事件驱动架构提供交互式可视化编辑功能。
+设计器系统通过以 `Designer` 类为核心的复杂事件驱动架构，提供交互式可视化编辑功能，并与仿真环境深度集成。
-### Core Designer 类
+### 核心设计器类
-`Designer` 类充当所有设计时交互的中心编排器，管理鼠标事件、拖放作、元素选择和视觉反馈系统。
+`Designer` 类作为所有设计时交互的中心协调器，管理以下功能：
+
+- 鼠标事件处理
+- 拖放操作
+- 元素选择机制
+- 视觉反馈系统
-Designer 通过对具有特殊属性 （`__vtj__`、`__context__`） 的 DOM 元素进行检测来运行，这些属性使其能够在可视元素及其相应的数据模型之间进行映射。
+设计器通过检测具有特殊属性（`__vtj__`、`__context__`）的 DOM 元素运行，这些属性使其能够在可视元素与对应数据模型之间建立映射关系。
### 事件处理系统
-Designer 实现了一个全面的事件处理系统，该系统可以捕获用户交互并将其转换为设计作：
+设计器实现了一套全面的事件处理系统，能够捕获用户交互并将其转换为设计操作：
+事件处理流程包括：
+
+1. 原始事件捕获
+2. 事件分类与路由
+3. 操作指令生成
+4. 状态更新与反馈
+
### 视觉反馈组件
-Designer 系统通过突出显示交互式元素的叠加组件提供实时视觉反馈：
+设计器系统通过覆盖层组件提供实时视觉反馈，突出显示交互元素：
+
+- 悬停高亮
+- 选择边框
+- 放置区域指示
+- 操作状态提示
## 渲染器架构
-Renderer 系统为 VTJ DSL 模式提供运行时执行环境，支持多种执行模式和上下文。
+渲染器系统为 VTJ DSL 模式提供运行时执行环境，支持多种执行模式和上下文。
### 上下文系统
-`Context` 类充当运行时执行环境，为组件实例提供对状态、props、生命周期方法和实用程序函数的访问：
+`Context` 类作为运行时执行环境，为组件实例提供以下访问能力：
+
+- 状态管理
+- 属性传递
+- 生命周期方法
+- 实用工具函数
-Context 系统支持三种不同的执行模式：
+上下文系统支持三种执行模式：
-- **设计模式** ：用于设计时交互的 Instruments 元素
-- **运行模式** ：提供生产执行环境
-- **VNode 模式** ：支持无 refs 的虚拟节点渲染
+1. **设计模式**：用于设计时交互的检测元素
+2. **运行模式**：提供生产级执行环境
+3. **VNode 模式**：支持无引用(refs)的虚拟节点渲染
### 多模式渲染
-Renderer 支持通过 Context 系统在设计时和运行时模式之间无缝切换：
+渲染器通过上下文系统在设计时和运行时模式之间无缝切换：
+模式切换机制包括：
+
+- 环境状态检测
+- 渲染策略切换
+- 上下文重配置
+- 性能优化调整
+
## 设计时集成
-Designer 和 Renderer 系统通过基于 iframe 的共享模拟环境进行集成，该环境支持实时预览和交互。
+设计器和渲染器系统通过基于 iframe 的共享模拟环境集成，支持实时预览和交互。
### 模拟器架构
-### 元件检测
+模拟器架构包含以下关键组件：
-在设计模式下，Renderer 使用特殊属性检测 DOM 元素，使 Designer 能够跟踪和作它们：
+- 沙箱环境隔离
+- 双向通信通道
+- 状态同步机制
+- 资源加载管理
+
+### 组件检测
+
+在设计模式下，渲染器使用特殊属性检测 DOM 元素，使设计器能够跟踪和操作它们：
-## 视口和响应式设计
+检测机制包括：
-Designer 提供了一个复杂的视口系统，该系统支持多种设备模式和自定义大小调整，以便进行响应式设计测试。
+- 元素标记（`__vtj__`）
+- 上下文关联（`__context__`）
+- 属性映射
+- 事件代理
+
+## 视口与响应式设计
+
+设计器提供复杂的视口系统，支持多种设备模式和自定义尺寸调整，便于响应式设计测试。
### 视口模式
+视口系统支持：
+
+- 预设设备尺寸（手机、平板、桌面）
+- 自定义视口尺寸
+- 方向切换（横屏/竖屏）
+- 缩放控制
+
## 运行时性能优化
-Renderer 系统包括针对运行时性能的多项优化，用于区分设计时插桩和生产执行。
+渲染器系统包含多项运行时性能优化，用于区分设计时检测和生产执行。
-Context 系统会自动管理 Vue 实例生命周期、引用跟踪和清理，以确保在不同执行模式下的最佳性能，同时保持设计时插桩所需的灵活性。
+上下文系统自动管理以下方面以确保性能：
+
+- Vue 实例生命周期
+- 引用跟踪
+- 资源清理
+- 按需渲染
+
+这些优化确保在不同执行模式下保持最佳性能，同时保留设计时检测所需的灵活性。
diff --git a/docs/src/wiki/package/index.md b/docs/src/wiki/package/index.md
index 0e1f547e1..048c5e895 100644
--- a/docs/src/wiki/package/index.md
+++ b/docs/src/wiki/package/index.md
@@ -1,78 +1,78 @@
-# 包结构和 Monorepo
+# 包结构与 Monorepo
-本文档概述了 VTJ 低代码平台的 monorepo 结构、软件包依赖关系和构建系统组织。它概述了包的组织方式、它们之间的关系以及编排开发和部署的构建系统。有关核心架构组件的信息，请参阅**核心架构** 。
+本文档概述了 VTJ 低代码平台的 monorepo 结构、软件包依赖关系和构建系统组织。它详细说明了包的架构方式、相互依赖关系以及支持开发和部署的构建系统。关于核心架构组件的详细信息，请参阅**核心架构**文档。
## Monorepo 结构概述
-VTJ 平台使用 PNPM 工作区和 Lerna 进行包管理，以 monorepo 的形式进行组织。存储库包含组织为逻辑层的包，其工作区依赖项通过 workspace：~ 引用进行管理。monorepo 结构支持跨所有软件包的同步版本控制、共享工具和协调发布。
+VTJ 平台采用 PNPM 工作区和 Lerna 进行包管理，以 monorepo 形式组织。代码库包含多个逻辑分层的包，通过 `workspace:~` 引用管理工作区依赖项。这种 monorepo 结构支持跨所有包的同步版本控制、共享工具和协调发布。
-## 软件包描述和用途
+## 软件包功能与用途
-VTJ 平台由以下主要软件包组成：
+VTJ 平台包含以下核心软件包：
-| 包 | 版本 | 描述 | 依赖 |
-| -------------- | ------- | -------------------------- | ------------------------------------------------------------------ |
-| @vtj/base | 0.12.40 | 基础类型和实用程序 | reflect-metadata， 加密-js， dayjs， lodash-es |
-| @vtj/utils | 0.12.40 | 常用实用程序函数和帮助程序 | @vtj/base、axios、js-cookie |
-| @vtj/core | 0.12.40 | 核心数据模型和引擎抽象 | @vtj/base |
-| @vtj/icons | 0.12.40 | 平台的图标组件 | @element-plus/icons-vue |
-| @vtj/ui | 0.12.40 | UI 组件库 | @vtj/icons、@vtj/utils、element-plus、sortablejs、vxe 表 |
-| @vtj/materials | 0.12.40 | 设计师的组件材料 | @vtj/core、@vtj/ui、@vtj/utils、element-plus、ant-design-vue、vant |
-| @vtj/charts | 0.12.40 | 用于数据可视化的图表组件 | @vtj/icons、@vtj/utils、echarts |
-| @vtj/renderer | 0.12.40 | 低代码 DSL 的运行时渲染器 | @vtj/core、@vtj/utils |
-| @vtj/parser | 0.12.40 | 将 Vue 代码解析为 DSL 模型 | @vtj/base、@vtj/core、@babel/parser、@vue/compiler-sfc |
-| @vtj/coder | 0.12.40 | 从 DSL 模型生成 Vue 代码 | @vtj/base， @vtj/core， 更漂亮 |
-| @vtj/designer | 0.12.40 | 可视化设计环境 | @vtj/核心、@vtj/渲染器、@vtj/UI、monaco-editor |
-| @vtj/local | 0.12.40 | 本地开发服务 | @vtj/编码器、@vtj/核心、@vtj/节点、@vtj/解析器 |
-| @vtj/pro | 0.12.40 | 带 IDE 的专业平台 | @vtj/核心、@vtj/designer、@vtj/本地、@vtj/materials、@vtj/renderer |
-| @vtj/web | 0.12.40 | Web 平台实施 | @vtj/图表、@vtj/核心、@vtj/渲染器、@vtj/UI |
-| @vtj/uni | 0.12.40 | UniApp 支持包 | @vtj/core、@vtj/renderer、@vtj/utils |
-| @vtj/uni-app | 0.12.40 | UniApp 平台实现 | @vtj/核心、@vtj/渲染器、@vtj/uni |
-| @vtj/cli | 0.12.4 | 构建和开发工具 | vite、vue-tsc、@vitejs/plugin-vue、rollup 插件 |
-| @vtj/node | 0.12.40 | Node.js 实用程序 | @vtj/基础、FS-extra、AXIOS |
+| 包名 | 版本 | 功能描述 | 主要依赖 |
+| -------------- | ------- | --------------------------- | ------------------------------------------------------------------- |
+| @vtj/base | 0.12.40 | 基础类型定义和核心工具 | reflect-metadata, crypto-js, dayjs, lodash-es |
+| @vtj/utils | 0.12.40 | 通用工具函数和辅助方法 | @vtj/base, axios, js-cookie |
+| @vtj/core | 0.12.40 | 核心数据模型和引擎抽象 | @vtj/base |
+| @vtj/icons | 0.12.40 | 平台图标组件库 | @element-plus/icons-vue |
+| @vtj/ui | 0.12.40 | UI 组件库 | @vtj/icons, @vtj/utils, element-plus, sortablejs, vxe-table |
+| @vtj/materials | 0.12.40 | 设计器使用的组件物料库 | @vtj/core, @vtj/ui, @vtj/utils, element-plus, ant-design-vue, vant |
+| @vtj/charts | 0.12.40 | 数据可视化图表组件 | @vtj/icons, @vtj/utils, echarts |
+| @vtj/renderer | 0.12.40 | 低代码 DSL 运行时渲染器 | @vtj/core, @vtj/utils |
+| @vtj/parser | 0.12.40 | Vue 代码到 DSL 模型的转换器 | @vtj/base, @vtj/core, @babel/parser, @vue/compiler-sfc |
+| @vtj/coder | 0.12.40 | DSL 模型到 Vue 代码的生成器 | @vtj/base, @vtj/core, prettier |
+| @vtj/designer | 0.12.40 | 可视化设计环境 | @vtj/core, @vtj/renderer, @vtj/ui, monaco-editor |
+| @vtj/local | 0.12.40 | 本地开发服务 | @vtj/coder, @vtj/core, @vtj/node, @vtj/parser |
+| @vtj/pro | 0.12.40 | 集成 IDE 的专业平台 | @vtj/core, @vtj/designer, @vtj/local, @vtj/materials, @vtj/renderer |
+| @vtj/web | 0.12.40 | Web 平台实现 | @vtj/charts, @vtj/core, @vtj/renderer, @vtj/ui |
+| @vtj/uni | 0.12.40 | UniApp 支持包 | @vtj/core, @vtj/renderer, @vtj/utils |
+| @vtj/uni-app | 0.12.40 | UniApp 平台实现 | @vtj/core, @vtj/renderer, @vtj/uni |
+| @vtj/cli | 0.12.4 | 构建和开发工具 | vite, vue-tsc, @vitejs/plugin-vue, rollup plugins |
+| @vtj/node | 0.12.40 | Node.js 工具集 | @vtj/base, fs-extra, axios |
-## 包依赖项和关系
+## 包依赖关系
## 基础层：Core、Base 和 Utils
-基础层为整个平台提供了必要的构建块。
+基础层为整个平台提供核心构建模块。
### @vtj/base
-基础包提供基本实用程序、类型和帮助程序函数。它包含：
+基础包提供以下核心功能：
-- 类型定义
-- 常用接口
-- 加密实用程序
-- 使用 dayjs 进行日期格式化
-- Lodash 实用程序扩展
+- 类型定义系统
+- 通用接口声明
+- 基于 crypto-js 的加密工具
+- 使用 dayjs 的日期处理工具
+- Lodash 工具函数扩展
### @vtj/utils
-utils 包基于 base 构建，并提供更专业的 Utility 函数：
+工具包在基础包之上提供更专业的实用功能：
-- 基于 axios 的 HTTP 请求实用程序
-- Cookie 管理
-- 浏览器存储抽象
-- 常见的帮助程序函数
-- 路径匹配实用程序
+- 基于 axios 的 HTTP 请求封装
+- Cookie 管理工具
+- 浏览器存储抽象层
+- 通用辅助函数集
+- 路径匹配实用工具
### @vtj/core
-核心包定义了低代码平台的主要数据模型和抽象：
+核心包定义低代码平台的核心数据模型和抽象：
-- 项目模型
-- 块模型
-- 节点模型
-- 状态管理
-- 事件处理
-- 数据绑定
+- 项目模型架构
+- 模块(Block)模型
+- 节点(Node)模型
+- 状态管理机制
+- 事件处理系统
+- 数据绑定实现
-此包是系统的概念核心，它定义了为低代码体验提供支持的域特定语言 （DSL）。
+此包是系统的概念核心，定义了支撑低代码体验的领域特定语言(DSL)。
## 运行时层：Renderer、Parser 和 Coder
@@ -80,31 +80,31 @@ utils 包基于 base 构建，并提供更专业的 Utility 函数：
### @vtj/renderer
-renderer 包负责：
+渲染器包负责以下功能：
- 在运行时将 DSL 模型转换为 Vue 组件
-- 管理组件 state 和 props
-- 处理事件和数据流
+- 管理组件状态(state)和属性(props)
+- 处理事件流和数据绑定
- 支持动态插槽渲染
-- 为组件通信提供上下文
+- 提供组件通信上下文
### @vtj/parser
-parser 包提供：
+解析器包提供以下能力：
-- 将 Vue SFC 文件转换为 DSL 模型
+- 将 Vue 单文件组件(SFC)转换为 DSL 模型
- 使用 Babel 进行 AST 遍历和分析
-- CSS 解析和提取
-- 使用 Vue 编译器解析模板
+- CSS 解析和样式提取
+- 使用 Vue 编译器解析模板结构
### @vtj/coder
-coder 包处理：
+代码生成器包处理：
- 从 DSL 模型生成 Vue 源代码
-- 使用 Prettier 进行格式化
-- 模板生成
-- 脚本和样式生成
+- 使用 Prettier 进行代码格式化
+- 模板代码生成
+- 脚本和样式代码生成
## 设计层：Designer 和本地服务
@@ -112,127 +112,126 @@ coder 包处理：
### @vtj/designer
-Designer 包包含：
+设计器包包含：
- 画布和属性面板组件
-- 组件拖放功能
-- 使用 Monaco Editor 的代码编辑器
-- 组件树导航
-- 预览模拟
-- AI 辅助集成
+- 组件拖放功能实现
+- 基于 Monaco Editor 的代码编辑器
+- 组件树导航系统
+- 预览模拟环境
+- AI 辅助集成接口
### @vtj/local
本地服务包提供：
- 本地文件系统集成
-- 项目加载和保存
-- 将代码生成到文件
-- 本地开发服务器集成
+- 项目加载和保存机制
+- 文件代码生成功能
+- 本地开发服务器支持
- 文件上传处理
-## 平台实施
+## 平台实现
-VTJ 通过专用软件包支持多个平台目标：
+VTJ 通过专用包支持多个平台目标：
### @vtj/web
-Web 包提供标准的 Web 实现，包括：
+Web 包提供标准的 Web 平台实现，包括：
-- 特定于 Web 的组件
-- 与 Element Plus 集成
-- 图表集成
+- Web 专用组件
+- Element Plus 集成
+- 图表集成方案
- Web 运行时支持
### @vtj/pro
-pro 包是完整的 IDE 体验，结合了：
+Pro 包提供完整的 IDE 体验，整合了：
-- 设计师
-- 本地服务
-- 材料
+- 设计器环境
+- 本地开发服务
+- 物料管理系统
- 运行时渲染器
-- 平台集成
+- 平台集成接口
### @vtj/uni 和 @vtj/uni-app
-这些 packages 为 UniApp 开发提供支持：
+这些包为 UniApp 开发提供支持：
-- UniApp 组件映射
-- H5 和小程序支持
-- UniApp 专用渲染
-- 与 UniApp 框架集成
+- UniApp 组件映射系统
+- H5 和小程序兼容支持
+- UniApp 专用渲染方案
+- 与 UniApp 框架的深度集成
## 开发工具
### @vtj/cli
-CLI 软件包提供开发和构建工具：
+CLI 包提供开发和构建工具：
-- 项目脚手架
-- 构建配置
-- 开发服务器
-- 测试实用程序
-- 插件支持
+- 项目脚手架生成
+- 构建配置管理
+- 开发服务器支持
+- 测试实用工具
+- 插件系统支持
### @vtj/node
-点包提供：
+Node 工具包提供：
-- 文件系统实用程序
-- 用于服务器端作的 HTTP 实用程序
-- 配置管理
+- 文件系统操作工具
+- 服务端 HTTP 工具
+- 配置管理系统
- 项目模板处理
-## Monorepo 管理和构建系统
+## Monorepo 管理与构建系统
### 工作区配置
-VTJ monorepo 使用带有 Lerna 的 PNPM 工作区进行包管理。工作区配置在 pnpm-lock.yaml 中定义，并使用 workspace：~ 说明符通过工作区依赖项进行管理。
+VTJ monorepo 使用 PNPM 工作区和 Lerna 进行包管理。工作区配置定义在 pnpm-workspace.yaml 中，通过 `workspace:~` 说明符管理工作区依赖关系。
**PNPM 工作区结构：**
### 包版本控制策略
-所有 VTJ 软件包都遵循同步版本控制策略。大多数软件包的当前版本为 0.12.40，CLI 版本为 0.12.4。此同步通过根 package.json 中定义的 Lerna 命令进行管理。
+所有 VTJ 包遵循同步版本控制策略。当前主要版本为 0.12.40（CLI 为 0.12.4），通过根目录 package.json 中定义的 Lerna 命令进行统一管理。
**版本管理命令：**
-- lerna version patch --yes - 修补程序版本更新
-- lerna version minor --yes - 次要版本更新
-- lerna version prerelease --yes - 预发行版本
-- pnpm -r publish --access public - 同步发布
+- `lerna version patch --yes` - 补丁版本更新
+- `lerna version minor --yes` - 次要版本更新
+- `lerna version prerelease --yes` - 预发布版本更新
+- `pnpm -r publish --access public` - 同步发布所有包
### 构建系统架构
-构建系统使用通过 npm 脚本编排的工具组合：
+构建系统使用通过 npm 脚本编排的工具链：
-**构建工具：**
+**主要构建工具：**
-- Vite - 软件包的主要构建工具
+- Vite - 主构建工具
- Vue-tsc - Vue 组件的 TypeScript 编译
- Unbuild - Node.js 包的统一构建系统
-- Rollup - 使用插件捆绑模块
-- Terser - JavaScript 缩小
+- Rollup - 模块打包（使用插件扩展）
+- Terser - JavaScript 代码压缩
- Sass - CSS 预处理
-**构建编排：**
-
+**构建流程编排：**
-该平台使用：
+平台构建系统特点：
-- 具有同步版本的语义版本控制
-- 使用 PNPM 工作区和 Lerna 进行 Monorepo 管理
-- 跨所有包的协调构建管道
+- 基于语义化版本控制的同步版本管理
+- 使用 PNPM 工作区和 Lerna 的 monorepo 管理
+- 跨所有包的协调构建流水线
- 自动化测试和覆盖率报告
-## 在应用程序中使用包
+## 应用集成方式
-应用程序可以通过多种方式使用 VTJ 软件包：
+应用可通过多种方式集成 VTJ 包：
-1. 使用完整的 PRO 体验：
+1. 使用完整的 Pro 平台体验：
```ts
import { createApp } from 'vue';
@@ -265,18 +264,18 @@ export function createApp() {
}
```
-## 应用实例
+## 应用示例
-该存储库包含几个示例应用程序：
+代码库包含多个示例应用：
-| 应用程序 | 描述 | 使用的软件包 |
-| --------- | ------------------------------------- | ------------------------------ |
-| 应用程序 | 标准 Web 应用程序 | @vtj/web、@vtj/plugin-ckeditor |
-| 优尼 APP | UniApp 实施 | @vtj/uni-app、@vtj/renderer |
-| H5 系列 | 移动 H5 应用程序 @vtj/h5、@vtj/渲染器 |
-| 外延 | 浏览器扩展 | @vtj/专业版、@vtj/Web |
-| 材料 | 材质编辑器 | @vtj/专业版、@vtj/Web |
-| 插件 | 插件开发 | @vtj/专业版、@vtj/Web |
-| LCDP 系列 | 在线演示 | @vtj/网页、@vtj/专业版 |
+| 应用名称 | 描述 | 使用包 |
+| --------- | -------------- | ------------------------------ |
+| app | 标准 Web 应用 | @vtj/web, @vtj/plugin-ckeditor |
+| uniapp | UniApp 实现 | @vtj/uni-app, @vtj/renderer |
+| h5 | 移动端 H5 应用 | @vtj/h5, @vtj/renderer |
+| extension | 浏览器扩展 | @vtj/pro, @vtj/web |
+| material | 物料编辑器 | @vtj/pro, @vtj/web |
+| plugin | 插件开发环境 | @vtj/pro, @vtj/web |
+| lcdp | 在线演示平台 | @vtj/web, @vtj/pro |
这些示例展示了 VTJ 支持的不同集成方法和平台目标。
diff --git a/docs/src/wiki/package/platform-implementations.md b/docs/src/wiki/package/platform-implementations.md
index d05ef25d7..ce68959a2 100644
--- a/docs/src/wiki/package/platform-implementations.md
+++ b/docs/src/wiki/package/platform-implementations.md
@@ -1,120 +1,120 @@
-# 平台实施
+# 平台实现
-VTJ 通过针对不同运行时环境的专用平台包提供多平台部署支持。每个平台实施都针对特定部署场景优化了低代码运行时，同时保持了统一的开发体验。
+VTJ 通过针对不同运行时环境的专用平台包提供多平台部署支持。每个平台实现都针对特定部署场景优化了低代码运行时，同时保持统一的开发体验。
## 平台架构概述
-VTJ 平台生态系统由四个主要实施组成：
+VTJ 平台生态系统由四个主要实现组成：
VTJ 提供全面的多平台部署支持，涵盖 Web、移动和跨平台环境。平台层将低代码设计转换为针对每个目标运行时的优化应用程序。
-## 完整的平台矩阵
+## 平台矩阵
-VTJ 支持通过专用适配器部署到多个平台类别：
+VTJ 通过专用适配器支持部署到多个平台类别：
-| 平台包 | 目标环境 | 主要用例 |
-| ------------ | --------------- | ------------------------------------- |
-| @vtj/web | 桌面 Web | 使用 Element Plus 的标准 Web 应用程序 |
-| @vtj/h5 | 移动网页 | 针对移动设备优化的 H5 应用程序 |
-| @vtj/pro | 开发环境 | 可视化设计师和 IDE |
-| @vtj/pro-uni | 专业版 + 跨平台 | 带 Uni-App 预览的专业 IDE |
-| @vtj/uni-app | 跨平台应用程序 | 原生应用和小程序 |
+| 平台包 | 目标环境 | 主要用例 |
+| ------------ | --------------- | --------------------------------- |
+| @vtj/web | 桌面 Web | 使用 Element Plus 的标准 Web 应用 |
+| @vtj/h5 | 移动 Web | 针对移动设备优化的 H5 应用 |
+| @vtj/pro | 开发环境 | 可视化设计器和 IDE |
+| @vtj/pro-uni | 专业版 + 跨平台 | 带 UniApp 预览的专业 IDE |
+| @vtj/uni-app | 跨平台应用 | 原生应用和小程序 |
### Web 平台
-`@vtj/Web` 平台面向具有完整 Element Plus 集成的桌面 Web 浏览器。它为 VTJ 应用程序提供标准的 Web 运行时。
+`@vtj/web` 平台面向具有完整 Element Plus 集成的桌面 Web 浏览器，为 VTJ 应用提供标准的 Web 运行时。
### 平台配置
-### 主要特点
+### 主要特性
-- Element Plus UI 框架集成
-- element-plus-admin 模板支持（在 v0.9.10 中添加）
-- SCSS 现代编译器支持（在 v0.9.0-alpha.0 中添加）
-- 删除 VXE 表组件以优化构建 （v0.8.141）
-- 自动更新功能（在 v0.8.161 中添加）
+- Element Plus UI 框架深度集成
+- element-plus-admin 模板支持（v0.9.10 新增）
+- SCSS 现代编译器支持（v0.9.0-alpha.0 新增）
+- 移除 VXE 表格组件以优化包体积（v0.8.141）
+- 自动更新功能（v0.8.161 新增）
## H5 移动平台
-`@vtj/h5` 平台通过支持触摸的界面和特定于移动设备的功能，为移动 Web 环境优化了 VTJ 应用程序。
+`@vtj/h5` 平台通过支持触摸的界面和移动设备特有功能，为移动 Web 环境优化 VTJ 应用。
-### 移动优化功能
+### 移动优化特性
- 移动优先的响应式设计
-- 触控手势支持
-- 移动 UI 框架集成 （Vant）
-- 针对移动网络优化的捆绑包大小
+- 触摸手势支持
+- 移动 UI 框架集成（Vant）
+- 针对移动网络优化的包体积
- H5 协议支持（v0.9.16 引入）
## 设计器平台
-`@vtj/pro` 平台充当全面的 IDE 和设计环境，将可视化设计工具与多平台预览功能相结合。
+`@vtj/pro` 平台作为全面的 IDE 和设计环境，将可视化设计工具与多平台预览功能相结合。
### IDE 架构
-### AI 驱动的功能
+### AI 驱动功能
-- 具有自然语言处理功能的 AI 助手（在 v0.12.0-alpha.0 中添加）
+- 具有自然语言处理的 AI 助手（v0.12.0-alpha.0 新增）
- 图片转代码生成（AI 图生代码，v0.12.8 新增）
- Sketch 和 Figma 元数据识别（v0.12.32 新增）
-- AI 对话取消支持（在 v0.12.10 中添加）
+- AI 对话取消支持（v0.12.10 新增）
### 设计时功能
- 模板管理系统（v0.9.0-alpha.0 新增）
- 路由位置定义（v0.9.0-alpha.0 新增）
-- 访问配置支持（v0.8.166 新增）
+- 访问控制支持（v0.8.166 新增）
- 应用增强配置（v0.12.20 新增）
- DevTools 模块集成（v0.8.131 新增）
-## 跨平台应用程序
+## 跨平台应用
-`@vtj/uni-app` 平台可通过 DCloud uni-App 框架部署到多个移动平台和小程序。
+`@vtj/uni-app` 平台通过 DCloud uni-App 框架支持部署到多个移动平台和小程序。
### 多平台构建系统
-Uni-App 平台支持广泛的部署目标：
+UniApp 平台支持广泛的部署目标：
### 平台依赖项
-| 屬地 | 版本 | 目的 |
+| 依赖包 | 版本 | 功能说明 |
| ------------------------ | ---------------------- | ---------------- |
| @dcloudio/uni-app | 3.0.0-4050720250324001 | UniApp 框架核心 |
-| @dcloudio/uni-components | 3.0.0-4050720250324001 | 标准零部件库 |
+| @dcloudio/uni-components | 3.0.0-4050720250324001 | 标准组件库 |
| @dcloudio/uni-h5 | 3.0.0-4050720250324001 | H5 平台适配器 |
| @dcloudio/uni-mp-weixin | 3.0.0-4050720250324001 | 微信小程序适配器 |
| @dcloudio/uni-ui | ~1.5.3 | UI 组件库 |
-| @vtj/renderer | 工作：~ | VTJ 渲染引擎 |
-| @vtj/uni-app | 工作：~ | VTJ UniApp 集成 |
+| @vtj/renderer | workspace:~ | VTJ 渲染引擎 |
+| @vtj/uni-app | workspace:~ | VTJ UniApp 集成 |
### 构建命令
-该平台提供了广泛的构建命令矩阵：
+平台提供全面的构建命令矩阵：
```shell
-# Development commands
-npm run dev:h5 # H5 development
-npm run dev:mp-weixin # WeChat mini-program
-npm run dev:app-android # Android development
-npm run dev:app-ios # iOS development
+# 开发命令
+npm run dev:h5 # H5 开发模式
+npm run dev:mp-weixin # 微信小程序开发
+npm run dev:app-android # Android 开发
+npm run dev:app-ios # iOS 开发
-# Production builds
-npm run build:h5 # H5 production build
-npm run build:mp-weixin # WeChat mini-program build
-npm run build:app # Native app build
+# 生产构建
+npm run build:h5 # H5 生产构建
+npm run build:mp-weixin # 微信小程序构建
+npm run build:app # 原生应用构建
```
-### 平台检测
+### 平台检测元数据
-该平台包含用于自动平台检测的元数据：
+平台包含用于自动检测的元数据：
```json
{
@@ -124,9 +124,9 @@ npm run build:app # Native app build
}
```
-## 平台选择和部署流程
+## 平台选择与部署流程
-多平台部署遵循统一的设计到部署管道：
+多平台部署遵循统一的设计到部署流水线：
### 平台部署工作流
@@ -134,71 +134,71 @@ npm run build:app # Native app build
### 环境配置
-特定于平台的环境配置：
+特定平台的环境配置：
-| 环境变量 | 目的 | 平台 |
-| ---------------------------- | ----------------- | ----------- |
-| ENV_TYPE=local | 开发模式 | 所有平台 |
-| ENV_TYPE=sit | SIT 测试 | 网页， H5 |
-| ENV_TYPE=uat | UAT 测试 | 网页， H5 |
-| ENV_TYPE=live | 生产 | 所有平台 |
-| VITE_CJS_IGNORE_WARNING=true | 禁止显示 CJS 警告 | H5、 UniApp |
-| PREVIEW=true | 预览模式 | 所有平台 |
+| 环境变量 | 功能说明 | 适用平台 |
+| ---------------------------- | ------------- | ---------- |
+| ENV_TYPE=local | 开发模式 | 所有平台 |
+| ENV_TYPE=sit | SIT 测试 | Web, H5 |
+| ENV_TYPE=uat | UAT 测试 | Web, H5 |
+| ENV_TYPE=live | 生产环境 | 所有平台 |
+| VITE_CJS_IGNORE_WARNING=true | 禁止 CJS 警告 | H5, UniApp |
+| PREVIEW=true | 预览模式 | 所有平台 |
-## 特定于平台的优化
+## 平台特定优化
### Web 平台优化
-- **Element Plus 集成** ：原生 Element Plus 组件映射
-- **捆绑包优化** ：针对较小版本删除 VXE 表 （v0.8.141）
-- **管理员模板**：内置 element-plus-admin 集成 （v0.9.9）
-- **构建系统** ：SCSS 现代编译器支持 （v0.9.0-alpha.0）
-- **性能** ：实时部署的自动更新机制 （v0.8.161）
+- **Element Plus 集成**：原生 Element Plus 组件映射
+- **包体积优化**：移除 VXE 表格以减小体积（v0.8.141）
+- **管理模板**：内置 element-plus-admin 集成（v0.9.9）
+- **构建系统**：SCSS 现代编译器支持（v0.9.0-alpha.0）
+- **性能优化**：实时部署的自动更新机制（v0.8.161）
### H5 移动优化
-- **触摸界面** ：移动优先的组件调整
-- **捆绑包大小** ：针对移动网络限制进行了优化
-- **移动框架** ：用于移动组件的 Vant UI 集成
-- **响应式设计** ：自动视口和缩放调整
+- **触摸界面**：移动优先的组件适配
+- **包体积控制**：针对移动网络限制优化
+- **移动框架**：Vant UI 移动组件集成
+- **响应式设计**：自动视口和缩放调整
### 跨平台优化
-- **统一代码库**：单一源代码编译到 15+ 平台
-- **平台 API**：每个平台的自动 API 映射
-- **原生性能** ：每个目标的平台特定优化
-- **小程序合规性**： 每个平台的自动合规性检查
+- **统一代码库**：单一源码编译到 15+ 平台
+- **平台 API**：各平台自动 API 映射
+- **原生性能**：针对各目标的平台特定优化
+- **小程序合规性**：自动平台合规检查
-### 专业的 IDE 优化
+### 专业 IDE 优化
-- **实时预览**：同时跨所有平台进行实时预览
-- **AI 增强设计** ：图像到代码和自然语言设计 （v0.12.8）
-- **多平台测试** ：针对所有部署目标的集成测试
-- **代码生成** ：经过优化的特定于平台的代码输出
+- **实时预览**：同时跨所有平台预览
+- **AI 增强设计**：图像转代码和自然语言设计（v0.12.8）
+- **多平台测试**：针对所有部署目标的集成测试
+- **代码生成**：优化的平台特定代码输出
## 实施工作流程
-下图显示了使用不同平台实施时的典型工作流程：
+使用不同平台实现时的典型工作流程：
-## 使用注意事项
+## 使用建议
-选择要在项目中使用的平台实现时，请考虑以下事项：
+选择项目平台实现时考虑以下因素：
-1. 对于标准 Web 应用程序，请使用 @vtj/web
-1. 对于移动应用程序和小程序，请使用 @vtj/uni
-1. 对于开发和设计环境，请使用 @vtj/pro
+1. 标准 Web 应用：使用 @vtj/web
+2. 移动应用和小程序：使用 @vtj/uni-app
+3. 开发和设计环境：使用 @vtj/pro
-平台实施可以单独使用，也可以一起使用，具体取决于您的项目要求。@vtj/pro 环境可以面向 Web 和 uni 平台进行预览和测试。
+平台实现可根据项目需求单独或组合使用。@vtj/pro 环境可针对 Web 和 uni 平台进行预览和测试。
-## 与外部系统集成
+## 外部系统集成
-平台实现提供了与外部系统集成的各种方法：
+平台实现提供多种外部系统集成方式：
-- 通过 @vtj/pro 中的访问控制功能进行身份验证和授权系统
-- 自定义数据源和 API
-- 适用于 Web 应用程序的 Element Plus Admin
-- 面向移动应用的 UniApp 生态系统
+- 通过 @vtj/pro 中的访问控制功能进行认证授权
+- 自定义数据源和 API 集成
+- Web 应用的 Element Plus Admin 集成
+- 移动应用的 UniApp 生态系统集成
-通过利用这些集成点，VTJ 应用程序可以连接到各种后端系统和数据源，同时保持一致的可视化设计和开发体验。
+通过这些集成点，VTJ 应用可连接到各种后端系统和数据源，同时保持一致的视觉设计和开发体验。
diff --git a/docs/src/wiki/package/ui-component-library.md b/docs/src/wiki/package/ui-component-library.md
index 713191584..d2b688164 100644
--- a/docs/src/wiki/package/ui-component-library.md
+++ b/docs/src/wiki/package/ui-component-library.md
@@ -2,11 +2,11 @@
`vtj/ui` 包提供了 Vue 3 组件的全面集合，这些组件构成了 VTJ 低代码平台用户界面的基础。该库包括表单控件、数据网格、对话框、布局组件和专用交互式元素，旨在在 VTJ 生态系统中无缝工作。
-有关如何将这些组件集成到可视化设计器中的信息，请参阅**设计器和渲染器** 。有关图表特定组件的详细信息，请参阅**图表和可视化** 。
+关于如何将这些组件集成到可视化设计器中的信息，请参阅**设计器和渲染器**文档。关于图表特定组件的详细信息，请参阅**图表和可视化**文档。
-## 包体系结构
+## 包架构
-UI 组件库组织为一个模块化系统，其中组件可以独立工作或相互集成以创建复杂的用户界面。该包遵循 Vue 3 组合式 API 模式，并始终提供 TypeScript 支持。
+UI 组件库组织为一个模块化系统，其中组件可以独立工作或相互集成以创建复杂的用户界面。该包遵循 Vue 3 组合式 API 模式，并提供全面的 TypeScript 支持。
**UI 组件包结构**
@@ -16,24 +16,24 @@ UI 组件库组织为一个模块化系统，其中组件可以独立工作或
### 表单和输入组件
-该库提供了一组丰富的表单组件，这些组件使用 VTJ 特定的功能扩展了 Element Plus。`XPicker` 组件通过将多个 UI 元素组合到一个复杂的数据选择界面中来举例说明这种方法。
+该库提供了一组丰富的表单组件，这些组件使用 VTJ 特定功能扩展了 Element Plus。`XPicker` 组件通过将多个 UI 元素组合到复杂的数据选择界面中，展示了这种方法的典型实现。
**XPicker 组件架构**
-`XPicker` 演示了关键的 UI 库模式：
+`XPicker` 展示了 UI 库的关键设计模式：
-| 模式 | 实现 | 位置 |
+| 模式 | 实现方式 | 位置 |
| ---------- | ---------------------------------------------- | ------------------------------------------ |
| 组合式 API | 使用 useOptions、useGridColumns、useModel 钩子 | packages/ui/src/components/picker/hooks.ts |
-| 类型 安全 | 全面的 TypeScript 接口 | packages/ui/src/components/picker/types.ts |
-| 事件系统 | 具有有效负载类型的结构化发出定义 | packages/ui/src/components/picker/types.ts |
-| Prop 验证 | 类型的详细 prop 定义 | packages/ui/src/components/picker/props.ts |
+| 类型安全 | 全面的 TypeScript 接口 | packages/ui/src/components/picker/types.ts |
+| 事件系统 | 具有有效负载类型的结构化事件定义 | packages/ui/src/components/picker/types.ts |
+| 属性验证 | 详细的类型化属性定义 | packages/ui/src/components/picker/props.ts |
### 数据显示组件
-`XGrid` 组件用作主要数据显示组件，与 VXE 表集成以提供高级网格功能，包括虚拟滚动、编辑、筛选和分页。
+`XGrid` 组件作为主要数据显示组件，与 VXE 表格集成以提供高级网格功能，包括虚拟滚动、编辑、筛选和分页。
**与 UI 组件的网格集成**
@@ -41,7 +41,7 @@ UI 组件库组织为一个模块化系统，其中组件可以独立工作或
### 对话框和模态组件
-`XDialog` 组件提供了整个 UI 库中使用的模态基础，具有一致的样式和行为模式。
+`XDialog` 组件提供了整个 UI 库中使用的模态基础，确保一致的样式和行为模式。
## 组件集成模式
@@ -50,7 +50,7 @@ UI 组件库组织为一个模块化系统，其中组件可以独立工作或
`XPicker` 和 `XGrid` 等组件使用加载器函数实现标准化的数据加载模式：
```ts
-// Loader function interface from types
+// 来自类型的加载器函数接口
type PickerLoader = (params: PickerState) => Promise<{
list: any[];
total: number;
@@ -63,17 +63,17 @@ type PickerLoader = (params: PickerState) => Promise<{
### 事件系统模式
-组件使用具有类型化有效负载的一致事件发出模式：
+组件使用具有类型化有效负载的一致事件模式：
-| 元件 | 重要事件 | 负载类型 |
-| ---------- | ---------------------- | ----------------------- |
-| XPicker | 更改 ， 选取 | [value: any, data: any] |
-| XGrid | 已加载 ，cell-dblclick | 特定于网格的事件类型 |
-| XQueryForm | submit | 表单模型数据 |
+| 组件 | 关键事件 | 有效负载类型 |
+| ---------- | --------------------- | ----------------------- |
+| XPicker | change, picked | [value: any, data: any] |
+| XGrid | loaded, cell-dblclick | 特定于网格的事件类型 |
+| XQueryForm | submit | 表单模型数据 |
-### 样式和主题
+### 样式与主题
-组件使用带有 BEM 方法的 SCSS 和 CSS 自定义属性进行主题设置：
+组件使用 SCSS 结合 BEM 方法和 CSS 自定义属性实现主题化：
```css
@include b(picker) {
@@ -83,24 +83,24 @@ type PickerLoader = (params: PickerState) => Promise<{
.x-picker__tigger {
background: var(--el-fill-color);
border-radius: 4px;
- // ... responsive sizing
+ /* ... 响应式尺寸 */
}
}
```
-## 材料集成
+## 物料系统集成
-UI 组件与 VTJ 材质系统集成，以便在可视化设计器中使用。每个组件都有相应的材质描述，用于定义其属性、事件和配置选项。
+UI 组件与 VTJ 物料系统集成，支持在可视化设计器中使用。每个组件都有相应的物料描述，定义其属性、事件和配置选项。
-**组件材料结构**
+**组件物料结构**
-Material System 允许从组件调色板中拖动组件，并在设计器中直观地进行配置。
+物料系统允许从组件面板拖放组件，并在设计器中直观配置。
## 使用示例
-### 基本 XPicker 实现
+### 基础 XPicker 实现
```vue
```
-### 使用格式设置的高级多选
+### 带格式化的高级多选实现
```vue
```
-UI 组件库为在 VTJ 生态系统中构建复杂的用户界面提供了强大的基础，并为数据处理、事件管理和可视化集成提供了一致的模式。
+UI 组件库为在 VTJ 生态系统中构建复杂的用户界面提供了强大基础，并为数据处理、事件管理和可视化集成提供了一致的模式。
diff --git a/docs/src/wiki/started/index.md b/docs/src/wiki/started/index.md
index 8b912ed84..980b80a9e 100644
--- a/docs/src/wiki/started/index.md
+++ b/docs/src/wiki/started/index.md
@@ -1,53 +1,53 @@
-# 开始
+# 开始使用 VTJ
-本文档提供了在开发工作流程中设置、配置和使用 VTJ 的实用指南。它涵盖了使用基架工具创建初始项目、环境设置和基本集成模式。
+本文档提供了在开发工作流程中设置、配置和使用 VTJ 的实用指南，涵盖了使用脚手架工具创建初始项目、环境设置和基本集成模式。
-有关核心体系结构和引擎组件的详细信息，请参阅**核心体系结构** 。有关特定于平台的部署指南，请参**阅平台实施** 。有关高级开发和插件创建的信息，请参阅**开发人员工具和可扩展性** 。
+关于核心架构和引擎组件的详细信息，请参阅**核心架构**文档。关于特定平台的部署指南，请参阅**平台实现**文档。关于高级开发和插件创建的信息，请参阅**开发者工具和可扩展性**文档。
-## 先决条件和系统要求
+## 先决条件与系统要求
VTJ 需要特定的开发环境配置才能正常运行：
-- **Node.js**：版本 20.0.0 或更高版本（建议使用以实现最佳兼容性）
-- **包管理器** ：pnpm（推荐）和 lerna，用于 monorepo 开发
+- **Node.js**：版本 20.0.0 或更高（推荐使用以确保最佳兼容性）
+- **包管理器**：pnpm（推荐）和 lerna，用于 monorepo 开发
- **Vue.js**：支持 TypeScript 的 3.5.5+ 版本
-- **构建工具** ：用于构建过程的 Vite
+- **构建工具**：Vite（用于构建过程）
```shell
-# Install required global dependencies
+# 安装所需的全局依赖
npm install -g lerna@latest pnpm@latest --registry=https://registry.npmmirror.com
```
-## 使用 Scaffolding 创建项目
+## 使用脚手架创建项目
-VTJ 通过 create-vtj 提供了一个全面的脚手架系统，该系统可以生成特定于平台的项目模板：
+VTJ 通过 create-vtj 提供全面的脚手架系统，可生成特定于平台的项目模板：
-### 基架命令结构
+### 脚手架命令结构
### 可用模板
-| 模板类型 | 命令 | 目标平台 | UI 框架 |
-| ------------ | ----------- | ------------ | --------------- |
-| Web 应用程序 | -t app | 桌面/PC 网页 | Element Plus |
-| H5 移动版 | -t h5 | 移动网页 | Vant |
-| UniApp | -t uniapp | 跨平台 | Uni-UI 用户界面 |
-| 材料库 | -t material | 组件开发 | Configurable |
+| 模板类型 | 命令参数 | 目标平台 | UI 框架 |
+| ----------- | ----------- | ----------- | ------------ |
+| Web 应用 | -t app | 桌面/PC Web | Element Plus |
+| H5 移动应用 | -t h5 | 移动 Web | Vant |
+| UniApp | -t uniapp | 跨平台 | Uni-UI |
+| 物料库 | -t material | 组件开发 | 可配置 |
-### 创建项目
+### 创建项目命令
```shell
-# Web application (PC desktop)
+# Web 应用（PC 桌面）
npm create vtj@latest --registry=https://registry.npmmirror.com -- -t app
-# H5 mobile application
+# H5 移动应用
npm create vtj@latest --registry=https://registry.npmmirror.com -- -t h5
-# Cross-platform uni-app
+# 跨平台 UniApp
npm create vtj@latest --registry=https://registry.npmmirror.com -- -t uniapp
-# Material/component library
+# 物料/组件库
npm create vtj@latest --registry=https://registry.npmmirror.com -- -t material
```
@@ -55,14 +55,14 @@ npm create vtj@latest --registry=https://registry.npmmirror.com -- -t material
### 本地开发设置
-要参与 VTJ 或深度定制，请设置完整的开发环境：
+要参与 VTJ 开发或进行深度定制，请设置完整的开发环境：
```shell
-# Clone the repository
+# 克隆仓库
git clone https://gitee.com/newgateway/vtj.git
cd vtj
-# Initialize and build
+# 初始化并构建
npm run setup && npm run build && npm run app:dev
```
@@ -70,14 +70,14 @@ npm run setup && npm run build && npm run app:dev
-### 开发命令
+### 开发命令参考
-| 命令 | 目的 | 用法 |
+| 命令 | 目的 | 使用场景 |
| --------------- | -------------- | ------------ |
| npm run setup | 初始化依赖项 | 首次设置 |
-| npm run build | 构建所有软件包 | 设置或更改后 |
+| npm run build | 构建所有包 | 设置或更改后 |
| npm run app:dev | 启动开发服务器 | 开发工作流程 |
-| npm run clean | 清理构建工件 | 重置环境 |
+| npm run clean | 清理构建产物 | 重置环境 |
## 集成模式
@@ -92,26 +92,26 @@ npm run setup && npm run build && npm run app:dev
```
project-root/
├── src/
-│ ├── main.ts # Application entry point
-│ ├── App.vue # Root component
-│ └── components/ # Custom components
-├── public/ # Static assets
-├── package.json # Dependencies and scripts
-├── vite.config.ts # Build configuration
-└── vtj.config.js # VTJ-specific configuration
+│ ├── main.ts # 应用入口点
+│ ├── App.vue # 根组件
+│ └── components/ # 自定义组件
+├── public/ # 静态资源
+├── package.json # 依赖项和脚本
+├── vite.config.ts # 构建配置
+└── vtj.config.js # VTJ 特定配置
```
### 生成项目中的核心依赖项
-| 包 | 目的 | 集成点 |
-| ------------- | -------------- | ------------ |
-| @vtj/web | Web 平台运行时 | 主要应用 |
-| @vtj/renderer | 组件渲染 | 模板引擎 |
-| @vtj/ui | UI 组件库 | 设计系统 |
-| @vtj/icons | 图标库 | 视觉元素 |
-| @vtj/utils | 效用函数 | 帮助程序方法 |
+| 包 | 目的 | 集成点 |
+| ------------- | -------------- | -------- |
+| @vtj/web | Web 平台运行时 | 主应用 |
+| @vtj/renderer | 组件渲染 | 模板引擎 |
+| @vtj/ui | UI 组件库 | 设计系统 |
+| @vtj/icons | 图标库 | 视觉元素 |
+| @vtj/utils | 实用函数 | 辅助方法 |
-## 配置和定制
+## 配置与定制
VTJ 平台支持通过 `package.json` 中的 `vtj` 字段进行配置：
@@ -127,26 +127,26 @@ VTJ 平台支持通过 `package.json` 中的 `vtj` 字段进行配置：
### 环境变量
-| 变量 | 目的 | 违约 |
-| ---------- | ------------ | ----- |
-| ENV_TYPE | 环境类型 | local |
-| UMD | UMD 构建标志 | false |
-| BUILD_TYPE | 构建目标 | - |
+| 变量 | 目的 | 默认值 |
+| ---------- | ------------ | ------ |
+| ENV_TYPE | 环境类型 | local |
+| UMD | UMD 构建标志 | false |
+| BUILD_TYPE | 构建目标 | - |
### 开发工作流程
-1. **项目创建** ：将 create-vtj 与适当的模板一起使用
-1. **开发** ：为本地开发服务器运行 npm run dev
-1. **构建** ：使用 npm run build 进行生产构建
-1. **集成** ：导入 VTJ 组件并使用设计器/渲染器
+1. **项目创建**：使用 create-vtj 配合合适的模板
+2. **开发**：运行 npm run dev 启动本地开发服务器
+3. **构建**：使用 npm run build 进行生产构建
+4. **集成**：导入 VTJ 组件并使用设计器/渲染器
## 后续步骤
设置 VTJ 项目后：
-1. **探索 Designer**：访问可视化设计器界面以进行拖放式开发
-1. **组件库** ：浏览可用的 UI 组件和材料
-1. **AI 功能**：利用 AI 驱动的代码生成功能
-1. **平台部署** ：为目标部署平台进行配置
+1. **探索设计器**：访问可视化设计器界面进行拖放式开发
+2. **组件库**：浏览可用的 UI 组件和物料
+3. **AI 功能**：利用 AI 驱动的代码生成功能
+4. **平台部署**：为目标部署平台进行配置
-有关项目设置和基架的详细指南，请参阅**项目设置和基架** 。有关与现有项目的集成，请参阅 **集成指南**
+关于项目设置和脚手架的详细指南，请参阅**项目设置与脚手架**文档。关于与现有项目的集成，请参阅**集成指南**文档。
diff --git a/docs/src/wiki/started/integration-guide.md b/docs/src/wiki/started/integration-guide.md
index bb109d755..34ca750f6 100644
--- a/docs/src/wiki/started/integration-guide.md
+++ b/docs/src/wiki/started/integration-guide.md
@@ -1,68 +1,68 @@
# 集成指南
-本文档介绍如何将 VTJ 组件和工具集成到现有的 Vue.js 项目和开发工作流程中。它解释了嵌入 VTJ 的低代码功能的不同集成方法、服务配置、身份验证设置和特定于平台的注意事项。
+本文档介绍如何将 VTJ 组件和工具集成到现有的 Vue.js 项目和开发工作流程中，涵盖嵌入 VTJ 低代码功能的不同集成方法、服务配置、身份验证设置和特定于平台的注意事项。
-有关从头开始进行项目设置的信息，请参阅 **项目设置和基架** 。有关集成过程中的 AI 增强功能，请参阅 **AI 集成** 。
+关于项目设置的完整指南，请参阅 **项目设置与脚手架**文档。关于集成过程中的 AI 增强功能，请参阅 **AI 集成**文档。
## 集成方法
-VTJ 提供两种主要的集成模式：用于在生产应用程序中呈现低代码内容的**运行时集成** ，以及用于将可视化设计器嵌入到开发工具中的**设计时集成** 。
+VTJ 提供两种主要集成模式：**运行时集成**（用于在生产应用程序中呈现低代码内容）和**设计时集成**（用于将可视化设计器嵌入到开发工具中）。
### 运行时集成架构
-**运行时集成**允许现有的 Vue 应用程序渲染使用 VTJ 的低代码设计器创建的页面和组件。该集成使用 `createProvider（）` 建立运行时上下文，并使用 `@vtj/renderer` 来显示低代码内容。
+**运行时集成**允许现有的 Vue 应用程序渲染使用 VTJ 低代码设计器创建的页面和组件。该集成使用 `createProvider()` 建立运行时上下文，并使用 `@vtj/renderer` 来显示低代码内容。
-### 设计时集成体系结构
+### 设计时集成架构
-**设计时集**成将 VTJ 可视化设计器嵌入到开发环境中，允许开发人员在其现有开发工作流程中创建和编辑低代码内容。
+**设计时集成**将 VTJ 可视化设计器嵌入到开发环境中，允许开发人员在其现有开发工作流程中创建和编辑低代码内容。
-## Service Layer 集成
+## 服务层集成
-服务层提供 VTJ 组件和后端系统之间的接口。VTJ 包括多个可以扩展或替换的服务实现。
+服务层提供 VTJ 组件和后端系统之间的接口。VTJ 包含多个可扩展或替换的服务实现。
-### 基本服务配置
+### 基础服务配置
-`BaseService` 类为所有服务实现提供了基础。要与现有后端集成，请执行以下作：
+`BaseService` 类为所有服务实现提供了基础。要与现有后端集成，请实现以下方法：
-| 服务方法 | 目的 | 需要实施 |
-| -------------- | -------------- | ----------------------- |
-| getExtension() | 加载平台配置 | 返回 VTJConfig 对象 |
-| init() | 初始化项目数据 | 从存储加载项目架构 |
-| saveProject() | 保留项目更改 | 保存到您的后端/文件系统 |
-| publishFile() | 生成产品代码 | 部署生成的 Vue 文件 |
+| 服务方法 | 目的 | 需要实现的功能 |
+| -------------- | -------------- | ------------------- |
+| getExtension() | 加载平台配置 | 返回 VTJConfig 对象 |
+| init() | 初始化项目数据 | 从存储加载项目架构 |
+| saveProject() | 保存项目更改 | 保存到后端/文件系统 |
+| publishFile() | 生成产品代码 | 部署生成的 Vue 文件 |
-### 自定义服务实施
+### 自定义服务实现
-要与现有后端集成，请扩展 `BaseService`：
+要与现有后端集成，请扩展 `BaseService` 类：
```ts
-// Example custom service integration
+// 自定义服务集成示例
export class MyBackendService extends BaseService {
async init(project: ProjectSchema): Promise {
- // Load project from your database
+ // 从数据库加载项目
return await this.api('myBackend/projects', project);
}
async saveProject(project: ProjectSchema): Promise {
- // Save to your storage system
+ // 保存到存储系统
return await this.api('myBackend/save', project);
}
}
```
-该服务通过 `packages/local/src/shared.ts`中定义的标准化 API 格式进行通信
+该服务通过 `packages/local/src/shared.ts` 中定义的标准化 API 格式进行通信。
-## Provider 和 Adapter 配置
+## 提供者与适配器配置
提供者/适配器模式允许 VTJ 与不同的 Vue 应用程序架构和 UI 框架集成。
-### 提供商设置流程
+### 提供者设置流程
@@ -70,13 +70,13 @@ export class MyBackendService extends BaseService {
适配器系统将 VTJ 与现有的 UI 组件和实用程序连接起来：
-| Adapter 属性 | 目的 | 示例实现 |
-| ------------ | --------------- | --------------------------- |
-| request | HTTP 客户端集成 | Axios，fetch 包装器 |
-| loading | 加载指示器 | Element 加 ElLoading |
-| notify | 通知系统 | Element Plus ElNotification |
-| useTitle | 页面标题管理 | Vue 使用 useTitle |
-| access | 认证系统 | 自定义访问类 |
+| 适配器属性 | 目的 | 示例实现 |
+| ---------- | --------------- | --------------------------- |
+| request | HTTP 客户端集成 | Axios、fetch 包装器 |
+| loading | 加载指示器 | Element Plus ElLoading |
+| notify | 通知系统 | Element Plus ElNotification |
+| useTitle | 页面标题管理 | Vue 的 useTitle 钩子 |
+| access | 认证系统 | 自定义访问类 |
```ts
const adapter = createAdapter({
@@ -93,7 +93,7 @@ const adapter = createAdapter({
## 访问控制集成
-VTJ 包括一个与现有身份验证机制集成的综合访问控制系统。
+VTJ 包含一个可与现有认证机制集成的综合访问控制系统。
### 访问控制架构
@@ -101,15 +101,15 @@ VTJ 包括一个与现有身份验证机制集成的综合访问控制系统。
### 访问配置
-`Access` 类提供了身份验证和授权功能：
+`Access` 类提供认证和授权功能：
-| 配置 | 目的 | 默认值 |
-| ------------ | -------------------- | ---------------- |
-| authKey | 授权标头名称 | '授权' |
-| storageKey | 本地存储密钥 | “ACCESS_STORAGE” |
-| session | 基于会话的身份验证 | 假 |
-| whiteList | 未进行身份验证的路由 | 定义 |
-| unauthorized | 未经授权的重定向 | 定义 |
+| 配置项 | 目的 | 默认值 |
+| ------------ | ------------------ | ---------------- |
+| authKey | 认证头名称 | 'Authorization' |
+| storageKey | 本地存储键名 | "ACCESS_STORAGE" |
+| session | 基于会话的认证 | false |
+| whiteList | 无需认证的路由列表 | 已定义 |
+| unauthorized | 未授权重定向路径 | 已定义 |
```ts
const access = createAccess({
@@ -127,12 +127,12 @@ const access = createAccess({
VTJ 支持对页面和组件进行基于角色的访问控制：
```ts
-// Check permissions in components
+// 在组件中检查权限
const access = useAccess();
const canEdit = access?.can('page.edit');
const canPublish = access?.some(['admin', 'publisher']);
-// Route-level permissions
+// 路由级权限检查
router.beforeEach((to, from, next) => {
if (access?.can(to.params.id)) {
next();
@@ -142,18 +142,18 @@ router.beforeEach((to, from, next) => {
});
```
-## 特定于平台的集成
+## 特定平台集成
VTJ 支持具有特定集成要求的多个部署平台。
### 平台集成矩阵
-| 平台 | 包 | 主要特点 | 集成说明 |
-| --------- | ------------ | ----------------- | --------------------- |
-| Web | @vtj/web | 桌面应用程序 | 标准 Vue.js 集成 |
-| 移动式 H5 | @vtj/h5 | 移动 Web 应用程序 | 触摸优化组件 |
-| UniApp | @vtj/uni-app | 跨平台应用程序 | 小程序兼容性 |
-| 专业版 | @vtj/pro | 企业功能 | Designer + 运行时组合 |
+| 平台 | 包 | 主要特性 | 集成说明 |
+| ------- | ------------ | ------------- | ------------------- |
+| Web | @vtj/web | 桌面应用 | 标准 Vue.js 集成 |
+| 移动 H5 | @vtj/h5 | 移动 Web 应用 | 触摸优化组件 |
+| UniApp | @vtj/uni-app | 跨平台应用 | 小程序兼容性 |
+| 专业版 | @vtj/pro | 企业级功能 | 设计器 + 运行时组合 |
### Web 平台集成
@@ -174,15 +174,15 @@ const provider = createProvider({
app.use(provider);
```
-### Uni-App 平台集成
+### UniApp 平台集成
-对于跨平台应用，VTJ 提供了专门的 Uni-App 集成：
+对于跨平台应用，VTJ 提供了专门的 UniApp 集成：
```ts
import VTJUni from '@vtj/uni-app';
import { createProvider } from '@vtj/renderer';
-// Uni-App specific configuration
+// UniApp 特定配置
const provider = createProvider({
mode: ContextMode.Runtime,
service: new UniService(),
@@ -193,25 +193,25 @@ const provider = createProvider({
});
```
-## 材料和组件集成
+## 物料与组件集成
-VTJ 的材质系统允许集成现有组件库和自定义组件。
+VTJ 的物料系统允许集成现有组件库和自定义组件。
### 物料集成流程
-### 材质配置
+### 物料配置
-材质描述定义了组件在 Designer 中的显示方式以及它们的呈现方式：
+物料描述定义了组件在设计器中的显示方式及其渲染行为：
```ts
-// Example material integration
+// 物料集成示例
const materials = new Map([
[
'MyButton',
{
- title: 'Custom Button',
+ title: '自定义按钮',
component: 'MyButton',
props: {
type: { type: 'String', default: 'primary' },
@@ -226,23 +226,23 @@ const materials = new Map([
await service.saveMaterials(project, materials);
```
-### 元件库集成
+### 组件库集成
-VTJ 为流行的组件库提供预构建的材质集：
+VTJ 为流行的组件库提供预构建的物料集：
-| 库 | 构建目标 | 包含的组件 |
-| ------------ | ------------------------- | ---------------- |
-| Element Plus | BUILD_TYPE=element | 表单、表格、导航 |
-| Ant Design | 视图 BUILD_TYPE=antdv | 企业组件 |
-| Vant | BUILD_TYPE=vant | 移动组件 |
-| Uni-UI | 用户界面 BUILD_TYPE=uniUI | 跨平台组件 |
+| 库 | 构建目标 | 包含的组件 |
+| ------------ | ------------------ | ---------------- |
+| Element Plus | BUILD_TYPE=element | 表单、表格、导航 |
+| Ant Design | BUILD_TYPE=antdv | 企业级组件 |
+| Vant | BUILD_TYPE=vant | 移动组件 |
+| Uni-UI | BUILD_TYPE=uniUI | 跨平台组件 |
## 配置示例
-### 完整的集成示例
+### 完整集成示例
```ts
-// main.ts - Complete VTJ integration
+// main.ts - 完整的 VTJ 集成示例
import { createApp } from 'vue';
import { createRouter, createWebHistory } from 'vue-router';
import { createProvider, ContextMode } from '@vtj/renderer';
@@ -255,7 +255,7 @@ const router = createRouter({
routes: [{ path: '/page/:id', component: VTJPage, name: 'page' }]
});
-// Configure VTJ integration
+// 配置 VTJ 集成
const service = new MyCustomService();
const access = createAccess({
authKey: 'Authorization',
@@ -283,7 +283,3 @@ app.use(router);
app.use(provider);
app.mount('#app');
```
-
-:::info 提示
-内容由AI翻译，可能会出现错漏或过时信息，请查阅原文：https://deepwiki.com/ChenXiaohui99/vtj/6.2-integration-guide
-:::
diff --git a/docs/src/wiki/started/project-setup-and-scaffolding.md b/docs/src/wiki/started/project-setup-and-scaffolding.md
index 20da39fbe..c76848ec2 100644
--- a/docs/src/wiki/started/project-setup-and-scaffolding.md
+++ b/docs/src/wiki/started/project-setup-and-scaffolding.md
@@ -1,18 +1,15 @@
-# 项目设置和基架
+# 项目设置与脚手架
-本文档提供了使用内置基架系统创建新的 VTJ 项目的详细说明。它涵盖了 `create-vtj` 脚手架工具、项目模板、开发环境设置和生成的项目结构。有关将 VTJ 集成到现有 Vue 项目中的信息，请参见第 6.2 页。
+本文档提供了使用内置脚手架系统创建新 VTJ 项目的详细说明，涵盖 `create-vtj` 脚手架工具、项目模板、开发环境设置和生成的项目结构。关于将 VTJ 集成到现有 Vue 项目中的信息，请参阅**集成指南**文档。
## 开发环境要求
-VTJ 使用最新的 Vue 3 生态，对您的开发环境有特定的要求：
+VTJ 使用最新的 Vue 3 生态系统，对开发环境有特定要求：
-```
-Node.js v20+ (recommended to use nvm for Node version management)
-lerna and pnpm package managers
+- **Node.js**：版本 20+（推荐使用 nvm 进行 Node 版本管理）
+- **包管理器**：lerna 和 pnpm
-```
-
-使用以下方法安装所需的全局软件包：
+使用以下命令安装所需的全局软件包：
```shell
npm install -g lerna@latest pnpm@latest --registry=https://registry.npmmirror.com
@@ -20,16 +17,16 @@ npm install -g lerna@latest pnpm@latest --registry=https://registry.npmmirror.co
## create-vtj 脚手架系统
-VTJ 提供了 `create-vtj` 基架工具，该工具可从预定义的模板生成新项目。该工具作为独立包实现，用于处理项目初始化、依赖项管理和模板处理。
+VTJ 提供了 `create-vtj` 脚手架工具，可从预定义模板生成新项目。该工具作为独立包实现，处理项目初始化、依赖项管理和模板处理。
-### 可用的项目模板
+### 可用项目模板
-| 模板类型 | 命令 | 目标平台 | 描述 |
-| --------------- | ------------------------------------ | ---------------------------- | --------------------- |
-| Web 应用程序 | npm create vtj@latest -- -t app | PC 桌面 Vue 3 + Element Plus |
-| H5 移动应用程序 | npm create vtj@latest -- -t h5 | 移动网页 | Vue 3 + Vant 用户界面 |
-| Uni-App 跨平台 | npm create vtj@latest -- -t uniapp | iOS/Android/小程序 | Uni-App 框架 |
-| 材料库 | npm create vtj@latest -- -t material | 组件开发 | 自定义组件库 |
+| 模板类型 | 命令参数 | 目标平台 | 描述 |
+| --------------- | ----------- | ------------------ | -------------------- |
+| Web 应用程序 | -t app | PC 桌面应用 | Vue 3 + Element Plus |
+| H5 移动应用程序 | -t h5 | 移动 Web 应用 | Vue 3 + Vant UI |
+| Uni-App 跨平台 | -t uniapp | iOS/Android/小程序 | Uni-App 框架 |
+| 物料库 | -t material | 组件开发 | 自定义组件库 |
### 脚手架工具架构
@@ -37,34 +34,34 @@ VTJ 提供了 `create-vtj` 基架工具，该工具可从预定义的模板生
create-vtj 包使用 cross-spawn、kolorist、minimist 和 prompts 进行交互式项目创建和进程管理。
-## 脚手架流程及模板系统
+## 脚手架流程与模板系统
-### reate-vtj CLI 实现
+### create-vtj CLI 实现
-`create-vtj` 包实现了一个交互式 CLI，可指导用户完成项目创建：
+`create-vtj` 包实现了一个交互式 CLI，引导用户完成项目创建过程：
-### 模板到应用程序的映射
+### 模板到应用的映射
-脚手架系统将模板映射到 monorepo 中的实际应用程序示例：
+脚手架系统将模板映射到 monorepo 中的实际应用示例：
-| 模板 | 源应用程序 | 关键依赖项 |
+| 模板 | 源应用 | 关键依赖项 |
| -------- | ------------- | ---------------------------------- |
| app | apps/app | @vtj/web、element-plus、vue-router |
| h5 | apps/h5 | @vtj/h5、vant、vue-router |
| uniapp | apps/uniapp | @vtj/uni-app、@dcloudio/uni-app |
-| material | apps/material | @vtj/core, element-plus |
+| material | apps/material | @vtj/core、element-plus |
### 脚手架后初始化
复制模板后，VTJ 系统执行运行时初始化：
- **LocalService**：从 @vtj/local 包创建 LocalService 实例
-- **ProjectModel**：使用 @vtj/核心数据结构初始化项目架构
-- **MaterialManager**：从 Fabric/Materials 加载组件库 @vtj
-- **DevTools** 集成 ：从 @vtj/pro/vite 设置 Vite 插件
-- **Asset Pipeline**：将材质复制到 public/@vtj/ 目录
+- **ProjectModel**：使用 @vtj/core 数据结构初始化项目架构
+- **MaterialManager**：从 @vtj/materials 加载组件库
+- **DevTools 集成**：从 @vtj/pro/vite 设置 Vite 插件
+- **资源管道**：将物料复制到 public/@vtj/ 目录
## 项目结构
@@ -78,15 +75,15 @@ create-vtj 包使用 cross-spawn、kolorist、minimist 和 prompts 进行交互
### 主要目录功能
-- **src/pages/**： 包含使用 @vtj/coder 包从 DSL 生成的 Vue SFC
+- **src/pages/**：包含使用 @vtj/coder 包从 DSL 生成的 Vue SFC
- **public/@vtj/materials/**：@vtj/materials 包中的运行时资源
- **.vtj/files/**：表示低代码组件的 BlockSchema JSON 文件
- **.vtj/projects/**：由 @vtj/core 管理的 ProjectModel 配置
-- **.vtj/histories/**：由 Designer 维护的版本历史记录
+- **.vtj/histories/**：由设计器维护的版本历史记录
### .gitignore 配置
-建议从版本控制中排除某些 VTJ 目录，以避免使存储库膨胀：
+建议从版本控制中排除某些 VTJ 目录，避免仓库膨胀：
```
# VTJ
@@ -95,9 +92,9 @@ create-vtj 包使用 cross-spawn、kolorist、minimist 和 prompts 进行交互
## 配置
-### package.json 中的基本配置
+### package.json 中的基础配置
-package.json 中的 vtj 部分提供了 VTJ 项目的基本配置：
+package.json 中的 vtj 部分提供 VTJ 项目的基础配置：
```json
{
@@ -105,18 +102,18 @@ package.json 中的 vtj 部分提供了 VTJ 项目的基本配置：
"id": "your-project-id",
"name": "Your Project Name",
"description": "Project description",
- "platform": "web", // or "h5", "uniapp"
- "history": "hash", // or "web"
+ "platform": "web", // 或 "h5", "uniapp"
+ "history": "hash", // 或 "web"
"base": "/",
- "pageRouteName": "page", // or "pages" for uniapp
- "plugins": [] // Additional plugins
+ "pageRouteName": "page", // uniapp 中为 "pages"
+ "plugins": [] // 额外插件
}
}
```
### VTJ 配置架构
-脚手架系统在 package.json 中生成具有 vtj 配置的项目：
+脚手架系统在 package.json 中生成包含 vtj 配置的项目：
```json
{
@@ -127,7 +124,7 @@ package.json 中的 vtj 部分提供了 VTJ 项目的基本配置：
"platform": "web", // "h5" | "uniapp"
"history": "hash", // "web"
"base": "/",
- "pageRouteName": "page", // "pages" for uniapp
+ "pageRouteName": "page", // uniapp 中为 "pages"
"remote": "https://lcdp.vtj.pro",
"checkVersion": true
}
@@ -138,23 +135,23 @@ package.json 中的 vtj 部分提供了 VTJ 项目的基本配置：
-LocalService 类处理配置并根据平台设置创建适当的平台适配器。
+LocalService 类处理配置，并根据平台设置创建适当的平台适配器。
### 配置流程
-## VTJ CLI 和构建系统
+## VTJ CLI 与构建系统
-### @vtj/cli 包体系结构
+### @vtj/cli 包架构
-@vtj/cli 包提供了核心构建工具和开发工具：
+@vtj/cli 包提供核心构建工具和开发工具：
### 生成的 Vite 配置
-基架使用 VTJ DevTools 插件创建 vite.config.ts：
+脚手架使用 VTJ DevTools 插件创建 vite.config.ts：
```ts
import { defineConfig } from 'vite';
@@ -164,45 +161,43 @@ import { createDevTools } from '@vtj/pro/vite';
export default defineConfig({
plugins: [
vue(),
- createDevTools() // VTJ Development Tools
+ createDevTools() // VTJ 开发工具
]
});
```
### CLI 包依赖项
-@vtj/cli 包包括全面的构建工具
+@vtj/cli 包包含全面的构建工具：
-| 依赖项类别 | 关键包 |
-| ------------ | ------------------------------------------- |
-| 构建工具 | vite、typescript、vue-tsc、sass |
-| Vue 生态系统 | @vitejs/plugin-vue， @vitejs/plugin-vue-jsx |
-| 测试 | vitest、@vitest/coverage-v8、jsdom |
-| 代码处理 | @babel/core、terser、rollup |
-| VTJ 集成 | @vtj/节点 、serve-static、body-parser |
+| 依赖项类别 | 关键包 |
+| ------------ | ------------------------------------------ |
+| 构建工具 | vite、typescript、vue-tsc、sass |
+| Vue 生态系统 | @vitejs/plugin-vue、@vitejs/plugin-vue-jsx |
+| 测试 | vitest、@vitest/coverage-v8、jsdom |
+| 代码处理 | @babel/core、terser、rollup |
+| VTJ 集成 | @vtj/node、serve-static、body-parser |
## 依赖项管理
-## 依赖管理和 Material System
+### 平台特定依赖项矩阵
-### 特定于平台的依赖项矩阵
+脚手架系统根据目标平台配置不同的依赖项集：
-基架系统根据目标平台配置不同的依赖项集：
+| 平台 | 核心 VTJ 包 | UI 框架 | 其他依赖项 |
+| ------------ | ------------------------------------- | ---------------- | -------------------------------- |
+| Web 应用程序 | @vtj/web、@vtj/core、@vtj/renderer | element-plus | @vtj/charts、@vtj/icons、@vtj/ui |
+| H5 移动版 | @vtj/h5、@vtj/core、@vtj/renderer | vant | @vtj/utils |
+| UniApp | @vtj/uni-app、@vtj/renderer、@vtj/uni | @dcloudio/uni-ui | @dcloudio/uni-\* 平台包 |
+| 物料库 | @vtj/core、@vtj/pro、@vtj/web | element-plus | @vueuse/core |
-| 平台 | 核心 VTJ 软件包 | UI 框架 | 其他依赖项 |
-| ------------ | ------------------------------------- | ---------------- | ------------------------------- |
-| Web 应用程序 | @vtj/web、@vtj/core、@vtj/renderer | element-plus | @vtj/图表 、@vtj/图标 、@vtj/UI |
-| H5 移动版 | @vtj/h5、@vtj/核心 、@vtj/渲染器 | vant | @vtj/utils |
-| 宇航 App | @vtj/uni-app、@vtj/renderer、@vtj/uni | @dcloudio/uni-ui | @dcloudio/uni-\* 平台 |
-| 材料 | @vtj/核心 、@vtj/专业版 、@vtj/Web | element-plus | @vueuse/core |
-
-### Material Asset Pipeline
+### 物料资源管道
### Monorepo 包依赖项
-基架项目使用 pnpm-lock.yaml 中的 workspace：~ 协议引用工作区包：
+脚手架项目使用 pnpm-lock.yaml 中的 workspace:~ 协议引用工作区包：
```yaml
dependencies:
@@ -214,20 +209,20 @@ dependencies:
version: link:../../packages/renderer
```
-这支持本地开发，并在整个 monorepo 中立即更新软件包。
+这支持本地开发，并在整个 monorepo 中实现即时包更新。
### 添加自定义依赖项
-您可以通过 Designer 界面添加自定义依赖项，这将更新项目架构。依赖项在运行时从 materials 目录加载。
+您可以通过设计器界面添加自定义依赖项，这将更新项目架构。依赖项在运行时从物料目录加载。
## 运行时配置
-## 引擎和提供程序配置
+### 引擎与提供者配置
VTJ 系统初始化两个主要组件：
-- **引擎 **：支持设计时体验（可视化编辑器）
-- **Provider**：管理运行时组件和依赖项
+- **引擎**：支持设计时体验（可视化编辑器）
+- **提供者**：管理运行时组件和依赖项
@@ -235,19 +230,19 @@ VTJ 系统初始化两个主要组件：
VTJ 管理 public/@vtj 目录中的静态资产：
-- **materials/**：包含组件库和 UI 材质资源
+- **materials/**：包含组件库和 UI 物料资源
- **plugins/**：包含从 node_modules 加载的插件资源
- **extension/**：包含自定义扩展
-系统会自动从以下位置复制资产：
+系统自动从以下位置复制资产：
-1. @vtj/材料包
-1. 自定义材质目录
-1. 与配置的前缀匹配的插件包
+1. @vtj/materials 包
+2. 自定义物料目录
+3. 与配置前缀匹配的插件包
## 开发工作流程
-### 启动基架项目
+### 启动脚手架项目
使用 create-vtj 创建项目后，典型的开发工作流程：
@@ -257,39 +252,39 @@ npm install
npm run dev
```
-### TJ Development Server 架构
+### VTJ 开发服务器架构
### 代码生成工作流程
-VTJ 设计器使用 @vtj/coder 包来生成 Vue SFC：
+VTJ 设计器使用 @vtj/coder 包生成 Vue SFC：
-1. **设计阶段** ：使用 /**vtj**/ 的可视化设计器创建组件
-2. **Schema 存储**：将 BlockSchema DSL 保存到 .vtj/files/
-3. **代码生成** ：使用 “Publish” 通过 @vtj/coder 生成 Vue SFC
-4. **集成** ：在 src/pages/ 中生成的组件会自动路由
+1. **设计阶段**：使用可视化设计器创建组件
+2. **架构存储**：将 BlockSchema DSL 保存到 .vtj/files/
+3. **代码生成**：使用 "Publish" 通过 @vtj/coder 生成 Vue SFC
+4. **集成**：在 src/pages/ 中生成的组件自动路由
### 开发工具集成
-基架项目包括 Vue DevTools 集成和通过 @vtj/pro 平台包提供的调试支持。
+脚手架项目包含 Vue DevTools 集成和通过 @vtj/pro 平台包提供的调试支持。
-## 故障 排除
+## 故障排除
### 常见问题
-- **缺少 materials**：确保已安装 @vtj/materials，并且开发服务器配置正确
-- **插件加载错误** ：检查插件是否遵循所需的格式并正确安装
-- **未找到静态资源** ：验证 staticBase 配置以及资源是否已正确复制
-- **Designer 未加载** ：检查浏览器控制台是否有错误并验证 API 服务器是否正常运行
+- **缺少物料**：确保已安装 @vtj/materials，且开发服务器配置正确
+- **插件加载错误**：检查插件是否遵循所需格式并正确安装
+- **静态资源未找到**：验证 staticBase 配置及资源是否正确复制
+- **设计器未加载**：检查浏览器控制台错误，验证 API 服务器是否正常运行
-您可以检查 .vtj/logs 目录中的日志以获取详细的错误信息。
+您可以检查 .vtj/logs 目录中的日志获取详细的错误信息。
## 后续步骤
成功设置 VTJ 项目后，您可以：
-1. 探索设计器界面以创建 UI 组件
-1. 了解如何创建自定组件的 Material Development
-1. 了解用于高级自定义的 DSL 架构格式
-1. 将 VTJ 与现有项目集成（请参阅与现有项目集成 ）
+1. 探索设计器界面创建 UI 组件
+2. 了解如何创建自定义组件物料
+3. 学习用于高级自定义的 DSL 架构格式
+4. 将 VTJ 集成到现有项目中（请参阅**集成指南**文档）