vue2-client 1.18.3 → 1.18.5

package/CLAUDE.md

@@ -1,98 +1,98 @@
-# CLAUDE.md
-
-This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
-
-## 常用开发命令
-
-### 开发服务器
-- `npm run serve` - 在端口8020启动开发服务器（Windows需要SET命令设置NODE_OPTIONS）
-- `npm run mac-serve` - 在macOS/Linux启动开发服务器
-- 支持多环境启动命令：gaslink、revenue、liuli、scada、iot、his、runtime、message、apply
-
-### 构建命令
-- `npm run build` - 生产环境构建
-- `npm run build:preview` - 预览环境构建
-
-### 测试
-- `npm test` - 运行Jest测试
-- `npm run test:unit` - 运行Vue CLI单元测试
-
-### 代码质量
-- `npm run lint` - 运行ESLint并自动修复问题
-- `npm run lint:nofix` - 运行ESLint但不自动修复
-
-## 项目架构
-
-### Vue 2.7 + Ant Design Vue应用
-这是一个使用Vue 2.7和Ant Design Vue 1.7.8作为UI框架的项目。项目采用模块化组件架构，包含自定义的base-client基础组件库。
-
-### 核心架构组件
-
-#### 基础客户端系统 (`src/base-client/`)
-- **Components**: 可复用的UI组件，使用X前缀命名（XForm、XTable、XCard等）
-- **Plugins**: 全局Vue插件，包括认证、i18n扩展和页面管理
-- **全局注册**: base-client中的组件会全局注册，整个应用可用
-
-#### 组件库结构
-- **X组件**: 核心表单和表格组件（XForm、XTable、XFormTable），通过JSON配置动态生成UI
-- **布局组件**: XPageView用于复杂页面布局，支持基于行的渲染
-- **业务组件**: 针对工单、系统管理、HIS（医院信息系统）等特定领域的组件
-
-#### 配置驱动开发
-- 组件使用JSON配置动态生成表单、表格和布局
-- `src/config/`中的配置文件定义组件行为和系统设置
-- 支持多环境配置的特定部署模式
-
-#### 模块系统
-- **Pages**: 按功能组织的应用页面
-- **Services**: API层，包含数据模型和服务抽象
-- **Utils**: 共享工具，包括加密、格式化和低代码辅助工具
-- **Store**: Vuex状态管理，包含账户、设置和低代码模块
-
-#### 低代码平台集成
-- 内置低代码编辑器和渲染器组件
-- 低代码环境的自定义组件注册系统
-- 表达式求值的逻辑运行器系统
-
-### 开发模式
-
-#### 组件开发
-- 遵循现有X组件模式保持一致性
-- 使用mixins共享表单验证逻辑
-- 使用XFormCol栅格系统实现响应式设计
-
-#### API集成
-- 使用`src/services/apiService.js`进行API调用
-- 遵循DataModel模式进行数据转换
-- 使用axios拦截器实现正确的错误处理
-
-#### 样式开发
-- 使用Less预处理器，主题变量在`src/theme/`中
-- Ant Design Vue主题系统，支持动态颜色替换
-- 组件特定样式与组件共同放置
-
-#### 测试策略
-- Jest进行单元测试
-- Vue Test Utils进行组件测试
-- 测试文件位于`test/`和`tests/unit/`
-
-### 环境配置
-项目通过Vue CLI模式支持多个部署环境：
-- gaslink、revenue、liuli、scada、iot、his、runtime、message、apply
-- 每个模式在vue.config.js中有特定的代理配置
-- 环境变量控制API端点和功能标志
-
-### 代码风格指南（来自.cursorrules）
-- 使用Vue 2.7组合API和setup语法糖，避免选项API（除非修改现有代码）
-- 目录名使用kebab-case（如components/auth-wizard）
-- 组件名使用PascalCase（如AuthWizard.vue）
-- 可组合函数使用camelCase（如useAuthState.js）
-- 方法和计算属性使用箭头函数
-- 避免条件语句中不必要的花括号，使用简洁语法
-- 模块化和迭代式代码，避免重复
-
-### 重要配置说明
-- **NODE_OPTIONS**: Windows环境需要设置`--openssl-legacy-provider`解决OpenSSL兼容性问题
-- **Webpack别名**: 引入项目需添加别名配置：`@vue2-client` → `node_modules/vue2-client/src`
-- **端口**: 开发服务器默认运行在8020端口
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## 常用开发命令
+
+### 开发服务器
+- `npm run serve` - 在端口8020启动开发服务器（Windows需要SET命令设置NODE_OPTIONS）
+- `npm run mac-serve` - 在macOS/Linux启动开发服务器
+- 支持多环境启动命令：gaslink、revenue、liuli、scada、iot、his、runtime、message、apply
+
+### 构建命令
+- `npm run build` - 生产环境构建
+- `npm run build:preview` - 预览环境构建
+
+### 测试
+- `npm test` - 运行Jest测试
+- `npm run test:unit` - 运行Vue CLI单元测试
+
+### 代码质量
+- `npm run lint` - 运行ESLint并自动修复问题
+- `npm run lint:nofix` - 运行ESLint但不自动修复
+
+## 项目架构
+
+### Vue 2.7 + Ant Design Vue应用
+这是一个使用Vue 2.7和Ant Design Vue 1.7.8作为UI框架的项目。项目采用模块化组件架构，包含自定义的base-client基础组件库。
+
+### 核心架构组件
+
+#### 基础客户端系统 (`src/base-client/`)
+- **Components**: 可复用的UI组件，使用X前缀命名（XForm、XTable、XCard等）
+- **Plugins**: 全局Vue插件，包括认证、i18n扩展和页面管理
+- **全局注册**: base-client中的组件会全局注册，整个应用可用
+
+#### 组件库结构
+- **X组件**: 核心表单和表格组件（XForm、XTable、XFormTable），通过JSON配置动态生成UI
+- **布局组件**: XPageView用于复杂页面布局，支持基于行的渲染
+- **业务组件**: 针对工单、系统管理、HIS（医院信息系统）等特定领域的组件
+
+#### 配置驱动开发
+- 组件使用JSON配置动态生成表单、表格和布局
+- `src/config/`中的配置文件定义组件行为和系统设置
+- 支持多环境配置的特定部署模式
+
+#### 模块系统
+- **Pages**: 按功能组织的应用页面
+- **Services**: API层，包含数据模型和服务抽象
+- **Utils**: 共享工具，包括加密、格式化和低代码辅助工具
+- **Store**: Vuex状态管理，包含账户、设置和低代码模块
+
+#### 低代码平台集成
+- 内置低代码编辑器和渲染器组件
+- 低代码环境的自定义组件注册系统
+- 表达式求值的逻辑运行器系统
+
+### 开发模式
+
+#### 组件开发
+- 遵循现有X组件模式保持一致性
+- 使用mixins共享表单验证逻辑
+- 使用XFormCol栅格系统实现响应式设计
+
+#### API集成
+- 使用`src/services/apiService.js`进行API调用
+- 遵循DataModel模式进行数据转换
+- 使用axios拦截器实现正确的错误处理
+
+#### 样式开发
+- 使用Less预处理器，主题变量在`src/theme/`中
+- Ant Design Vue主题系统，支持动态颜色替换
+- 组件特定样式与组件共同放置
+
+#### 测试策略
+- Jest进行单元测试
+- Vue Test Utils进行组件测试
+- 测试文件位于`test/`和`tests/unit/`
+
+### 环境配置
+项目通过Vue CLI模式支持多个部署环境：
+- gaslink、revenue、liuli、scada、iot、his、runtime、message、apply
+- 每个模式在vue.config.js中有特定的代理配置
+- 环境变量控制API端点和功能标志
+
+### 代码风格指南（来自.cursorrules）
+- 使用Vue 2.7组合API和setup语法糖，避免选项API（除非修改现有代码）
+- 目录名使用kebab-case（如components/auth-wizard）
+- 组件名使用PascalCase（如AuthWizard.vue）
+- 可组合函数使用camelCase（如useAuthState.js）
+- 方法和计算属性使用箭头函数
+- 避免条件语句中不必要的花括号，使用简洁语法
+- 模块化和迭代式代码，避免重复
+
+### 重要配置说明
+- **NODE_OPTIONS**: Windows环境需要设置`--openssl-legacy-provider`解决OpenSSL兼容性问题
+- **Webpack别名**: 引入项目需添加别名配置：`@vue2-client` → `node_modules/vue2-client/src`
+- **端口**: 开发服务器默认运行在8020端口
 - **ESLint**: 开发模式默认禁用ESLint（--no-eslint），使用`npm run lint`单独执行检查

package/docs/LowCode/lowcode.md

@@ -1,155 +1,155 @@
-# 奥枫低代码平台
-
-> 奥枫低代码平台是一个前端低代码框架，它使用JSON配置来生成页面
-
-
-
-## 概念
-
-### 配置与组件
-
-#### 结构
-
-> 一个配置的结构是这样的
->
-> ```json
-> {
->     "page": [
->         {
->             "id": "page_tvV9Ci",
->             "type": "page",
->             "title": "11",
->             "body": [
->                 {
->                     "id": "page_tvV9Ci_0",
->                     "config": {
->                         "align": "top",
->                         "gutter": 0,
->                         "justify": "start"
->                     },
->                     "type": "row",
->                     "body": [
->                         {
->                             "type": "XFormTable",
->                             "selected": false,
->                             "span": 24,
->                             "id": "XFormTable_76UItw",
->                             "props": {
->                                 "queryParamsName": "",
->                                 "serviceName": ""
->                             },
->                             "selfEvent": [
->                                 "action"
->                             ]
->                         }
->                     ]
->                 }
->             ]
->         }
->     ]
-> }
-> ```
-> page下的每一个对象，表示一个`页面容器`
->
-> body中的每一个对象，表示一`行`
->
-> 每行中body下的每个元素，表示一个`组件`
-
-> 组件的完整配置是这样的
->
-> ```json
-> {
->     "type": "xx组件",
->     "span": 12,
->     "id": "xx组件_001",
->     "selected": false,
->     "props": {
->         "值1": "111",
->         "值2": "222",
->         ...
->     },
->     "selfEvent": [
->         "action",
->         ...
->     ],
->     "onEvent": {
->         "action": [
->             {
->                 "emitType": "action",
->                 "eventType": "changeValue",
->                 "target": "组件_00x",
->                 "targetKey": "data"
->             },
->     	{...}
->         ]
->     }
-> }
-> ```
->
-> `type`定义了组件的类型
->
-> `span`定义了组件的宽度
->
-> `selected`定义了组件当前是否被选中
->
-> `id`表示组件的唯一标识
->
-> `props`中定义的是组件可以被改变的值
->
-> `selfEvent`定义了组件可以发出哪些事件交给低代码平台处理
->
-> `onEvent`表示每一个事件的具体定义
->
-> `onEvent`中的每一个对象的key代表了是针对哪种事件的处理
-
-> 在低代码平台中，最小的单位是`组件`，最大的单位是`页面容器`
-
-
-
-#### 页面容器
-
-> 一个`页面容器`可以是`页面`，`弹框`，`抽屉`等
->
-> `页面容器`是所有`组件`的容器，`组件`组成了`行`，`行`组成了`页面`
-
-
-
-#### 组件
-
-> `组件`是低代码平台的最小单位
->
-> 一个组件是某种功能的封装，比如XFormTable是为了展示CRUD表单，XTree是为了展示树型结构
-
-
-
-#### 组件的拆分
-
-> 如同栅格化布局一样，每一行套每一列
->
-> 某个列又可被看做一个整体，在其下继续拆分为多行，每行又包含多列
-
-> 比如一个页面，左侧是导航栏，右侧是内容栏
->
-> 这就是第一行，第一行分为两列，左侧列是导航栏，右侧列是内容栏
->
-> 内容栏又被分为了两行
->
-> 第一行是标题，第二行是主要内容
-
-
-
-### 事件
-
-> 在组件中，会因为各种各样的原因，修改一些状态，比如点击搜索，切换标签
->
-> 这些改动，要通过`事件`的形式，向外层触发，来通知其他组件进行联动。比如在树组件中切换了标签，根据不同的标签在CRUD表单中渲染不同的内容
->
-> 这个时候我们就需要对触发改动的`组件`添加`事件`，比如在XFormTable中点击详情，我们希望打开一个抽屉，我们就需要为XFormTable添加一个点击详情的事件
-
-
-
-### 行为
-
-> 行为是`组件`自身内部进行的一系列变动。比如其他组件触发了某个`事件`，这个`组件`需要对这个`事件`进行响应，并在自身内部进行一系列的更新。这就是一种行为
->
-> 还是刚才的例子在XFormTable中点击详情，我们希望打开一个抽屉。那抽屉改变自身的显隐，就是响应点击详情`事件`的一种`行为`
+# 奥枫低代码平台
+
+> 奥枫低代码平台是一个前端低代码框架，它使用JSON配置来生成页面
+
+
+
+## 概念
+
+### 配置与组件
+
+#### 结构
+
+> 一个配置的结构是这样的
+>
+> ```json
+> {
+>     "page": [
+>         {
+>             "id": "page_tvV9Ci",
+>             "type": "page",
+>             "title": "11",
+>             "body": [
+>                 {
+>                     "id": "page_tvV9Ci_0",
+>                     "config": {
+>                         "align": "top",
+>                         "gutter": 0,
+>                         "justify": "start"
+>                     },
+>                     "type": "row",
+>                     "body": [
+>                         {
+>                             "type": "XFormTable",
+>                             "selected": false,
+>                             "span": 24,
+>                             "id": "XFormTable_76UItw",
+>                             "props": {
+>                                 "queryParamsName": "",
+>                                 "serviceName": ""
+>                             },
+>                             "selfEvent": [
+>                                 "action"
+>                             ]
+>                         }
+>                     ]
+>                 }
+>             ]
+>         }
+>     ]
+> }
+> ```
+> page下的每一个对象，表示一个`页面容器`
+>
+> body中的每一个对象，表示一`行`
+>
+> 每行中body下的每个元素，表示一个`组件`
+
+> 组件的完整配置是这样的
+>
+> ```json
+> {
+>     "type": "xx组件",
+>     "span": 12,
+>     "id": "xx组件_001",
+>     "selected": false,
+>     "props": {
+>         "值1": "111",
+>         "值2": "222",
+>         ...
+>     },
+>     "selfEvent": [
+>         "action",
+>         ...
+>     ],
+>     "onEvent": {
+>         "action": [
+>             {
+>                 "emitType": "action",
+>                 "eventType": "changeValue",
+>                 "target": "组件_00x",
+>                 "targetKey": "data"
+>             },
+>     	{...}
+>         ]
+>     }
+> }
+> ```
+>
+> `type`定义了组件的类型
+>
+> `span`定义了组件的宽度
+>
+> `selected`定义了组件当前是否被选中
+>
+> `id`表示组件的唯一标识
+>
+> `props`中定义的是组件可以被改变的值
+>
+> `selfEvent`定义了组件可以发出哪些事件交给低代码平台处理
+>
+> `onEvent`表示每一个事件的具体定义
+>
+> `onEvent`中的每一个对象的key代表了是针对哪种事件的处理
+
+> 在低代码平台中，最小的单位是`组件`，最大的单位是`页面容器`
+
+
+
+#### 页面容器
+
+> 一个`页面容器`可以是`页面`，`弹框`，`抽屉`等
+>
+> `页面容器`是所有`组件`的容器，`组件`组成了`行`，`行`组成了`页面`
+
+
+
+#### 组件
+
+> `组件`是低代码平台的最小单位
+>
+> 一个组件是某种功能的封装，比如XFormTable是为了展示CRUD表单，XTree是为了展示树型结构
+
+
+
+#### 组件的拆分
+
+> 如同栅格化布局一样，每一行套每一列
+>
+> 某个列又可被看做一个整体，在其下继续拆分为多行，每行又包含多列
+
+> 比如一个页面，左侧是导航栏，右侧是内容栏
+>
+> 这就是第一行，第一行分为两列，左侧列是导航栏，右侧列是内容栏
+>
+> 内容栏又被分为了两行
+>
+> 第一行是标题，第二行是主要内容
+
+
+
+### 事件
+
+> 在组件中，会因为各种各样的原因，修改一些状态，比如点击搜索，切换标签
+>
+> 这些改动，要通过`事件`的形式，向外层触发，来通知其他组件进行联动。比如在树组件中切换了标签，根据不同的标签在CRUD表单中渲染不同的内容
+>
+> 这个时候我们就需要对触发改动的`组件`添加`事件`，比如在XFormTable中点击详情，我们希望打开一个抽屉，我们就需要为XFormTable添加一个点击详情的事件
+
+
+
+### 行为
+
+> 行为是`组件`自身内部进行的一系列变动。比如其他组件触发了某个`事件`，这个`组件`需要对这个`事件`进行响应，并在自身内部进行一系列的更新。这就是一种行为
+>
+> 还是刚才的例子在XFormTable中点击详情，我们希望打开一个抽屉。那抽屉改变自身的显隐，就是响应点击详情`事件`的一种`行为`