📐 项目架构设计

l-pc-front 项目完整架构分析与技术实现

🎯 架构总览

整体架构图

┌─────────────────────────────────────────────────────────────┐
│                        应用层 (Vue App)                     │
│  ┌──────────┐  ┌──────────┐  ┌──────────┐  ┌──────────┐   │
│  │ 页面视图 │  │ 组件库   │  │ 路由导航 │  │ 状态管理 │   │
│  │  (Pages) │  │(Components)│  │ (Router) │  │ (Vuex)   │   │
│  └──────────┘  └──────────┘  └──────────┘  └──────────┘   │
└─────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────┐
│                    核心服务层 (Services)                    │
│  ┌──────────┐  ┌──────────┐  ┌──────────┐  ┌──────────┐   │
│  │ HTTP客户端│  │ 权限管理 │  │ 文件处理 │  │ 更新检查 │   │
│  │  (Axios) │  │ (Auth)   │  │ (File)   │  │ (Update) │   │
│  └──────────┘  └──────────┘  └──────────┘  └──────────┘   │
└─────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────┐
│                    工具层 (Utilities)                       │
│  ┌──────────┐  ┌──────────┐  ┌──────────┐  ┌──────────┐   │
│  │ 通用工具 │  │ 数据处理 │  │ 事件总线 │  │ 自定义指令 │  │
│  │ (Common) │  │ (Data)   │  │ (Event)  │  │ (Directives)│ │
│  └──────────┘  └──────────┘  └──────────┘  └──────────┘   │
└─────────────────────────────────────────────────────────────┘

🏗️ 技术架构详解

1. 核心框架层

Vue.js 版本特性

版本: Vue 2.7.16 (Vue 2 的最终版本，支持 Composition API)
兼容性: 兼容 Vue 3 的部分特性，平滑过渡
优势: 稳定性高，生态系统成熟

路由架构 (Vue Router 3.0.3)

javascript

// 路由设计思路
├── 通用CRUD路由 (15+ 个)
├── 业务模块路由 (10+ 个模块)
├── 低代码路由 (动态生成)
└── 嵌套路由支持

路由栈管理器 (创新特性)

javascript

Vue.prototype.$routeStack = {
  goBack(), goForward(), goToIndex(),
  getStack(), canGoBack(), smartGoBack()
}

状态管理 (Vuex 3)

javascript

// 模块化设计
├── SrvColData       # 服务列数据管理
├── HotTableData     # 热表数据管理
├── routeStack       # 路由栈管理
├── theme            # 主题配置
├── loginInfo        # 登录信息
├── chatInfo         # 聊天信息
└── customState      # 自定义状态

2. UI 架构层

多UI框架集成

javascript

// 主要UI框架
├── Element UI 2.15.14    # 企业级组件库
├── Bootstrap Vue 2.23.1  # 响应式组件
├── Tailwind CSS 2.2.17   # 实用类框架
└── 自定义主题系统        # SCSS/LESS 定制

组件分类体系

src/components/
├── common/          # 通用业务组件
│   ├── CRUD系列     # add, update, detail, list
│   ├── 流程组件     # listproc, procdetail
│   ├── 表单组件     # form-list, field-editor
│   └── 工具组件     # dialog, loader, export
├── ui/              # 基础UI组件
│   ├── autocomplete-input
│   ├── rich-text-view
│   └── login-dialog
├── model/           # 数据模型组件
│   └── Field.js     # 字段定义与处理
└── mixin/           # 混合逻辑

3. 业务架构层

低代码平台架构

javascript

// 低代码核心模块
├── 页面编辑器 (src/pages/lowcode/)
│   ├── index.vue          # 主编辑器
│   ├── view.vue           # 预览模式
│   └── card-cell-editor   # 卡片编辑器
├── 移动端构建 (src/pages/low-app/)
│   ├── app-home.vue       # 移动端编辑器
│   └── app-preview        # 移动端预览
├── 数据可视化 (src/pages/datav/)
│   ├── grid-layout        # 网格布局编辑器
│   └── editor-next        # 新一代编辑器
└── 地图编辑器 (src/pages/lowcode/map-editor/)

业务功能模块

src/pages/
├── audit/          # 稽核管理
├── health/         # 健康数据
├── payment/        # 支付系统
├── meetingRoomBooking/ # 会议预约
├── flowStation/    # 流程工作站
├── dashboard/      # 数据看板
├── datav/          # 数据可视化
├── lowcode/        # 低代码平台
├── platform/       # 平台管理
├── authority/      # 权限管理
└── video/          # 视频播放

4. 数据流架构

HTTP 层设计

javascript

// src/common/http.js
├── axios 实例封装 (超时、拦截器)
├── 请求拦截器 (自动添加认证票据)
├── 响应拦截器 (统一错误处理)
├── 登录弹窗集成 (401 处理)
└── 文件下载管理 (图片、文件路径处理)

// 工具函数
├── $selectOne()    # 查询单条
├── $selectList()   # 查询列表
├── $delete()       # 删除操作
└── getImagePath()  # 文件路径处理

数据操作模式

javascript

// 标准化 CRUD 模式
const req = {
  serviceName: "服务名",
  condition: [{ colName: "字段", ruleType: "eq", value: "值" }],
  data: [{ 字段: "值" }]
}

// 响应格式
{
  state: "SUCCESS/FAILURE",
  data: [...],
  resultCode: "状态码",
  resultMessage: "提示信息"
}

5. 环境与构建架构

多环境配置体系

javascript

// 环境配置映射 (src/common/envList.js)
const pathConfigMap = {
  parkProd:    { gateway: "...", homePageNo: "..." },
  auditDev:    { gateway: "...", homePageNo: "..." },
  debug:       { gateway: "...", homePageNo: "..." },
  dev:         { gateway: "...", homePageNo: "..." },
  // ... 其他环境
}

// 环境变量文件
├── .env              # 默认环境
├── .env.audit        # 稽核环境
├── .env.auditDev     # 稽核开发
├── .env.debug        # 调试环境
├── .env.park         # 园区环境
└── .env.example      # 模板

Webpack 构建优化

javascript

// vue.config.js 核心配置
├── 代码分割策略 (SplitChunks)
├── Gzip压缩 (CompressionWebpackPlugin)
├── SourceMap控制 (按需生成)
├── 资源路径优化 (assets/js/css/img)
├── Babel优化 (ES6+ 转译)
└── 环境隔离 (多环境构建)

// 构建命令
├── npm run build              # 标准构建
├── npm run build:audit        # 稽核环境
├── npm run build:debug        # 调试环境
├── npm run build:version      # 版本化构建
└── npm run build-lib          # 库模式构建

🎨 设计模式应用

1. 模块化模式 (Modular Pattern)

javascript

// 路由模块化
import auditRoutes from "./modules/audit";
import healthRoutes from "./modules/health";
// ... 按需导入

// 状态模块化
modules: {
  SrvColData,
  HotTableData,
  frontTableData,
  // ...
}

2. 工厂模式 (Factory Pattern)

javascript

// 组件动态加载
const componentFactory = (name) => {
  return () => import(`@/components/${name}`);
}

// 路由工厂
const createCRUDRoute = (path, component, meta) => ({
  path,
  component: componentFactory(component),
  meta
})

3. 观察者模式 (Observer Pattern)

javascript

// 路由栈事件总线
Vue.prototype.$routeStackBus = new Vue();

// 状态监听
store.watch(
  (state) => state.routeStack.stack,
  (newStack, oldStack) => {
    Vue.prototype.$routeStackBus.$emit('stack-changed', {
      newStack, oldStack
    });
  }
)

4. 装饰器模式 (Decorator Pattern)

javascript

// 组件增强
Vue.use(bxPlugin);  // 插件增强
VueInit();          # 全局初始化
VueUtil();          # 工具增强

📊 性能架构设计

1. 构建优化

代码分割: 按路由和组件分割
Tree Shaking: 移除未使用代码
Gzip压缩: 减少传输体积
资源哈希: 缓存控制

2. 运行时优化

按需加载: 组件懒加载
虚拟滚动: 大数据列表
防抖节流: 频繁操作优化
缓存策略: 路由缓存、数据缓存

3. 网络优化

代理配置: API请求优化
CDN支持: 静态资源加速
HTTP2: 多路复用
WebSocket: 实时通信

🔒 安全架构

1. 认证授权

票据机制: bx_auth_ticket
会话管理: sessionStorage
路由守卫: beforeEach 拦截
权限控制: 组件级权限

2. 数据安全

XSS防护: 输入过滤
CSRF防护: Token校验
传输加密: HTTPS支持
敏感信息: 脱敏处理

🎯 扩展性设计

1. 插件系统

javascript

// src/plugin/bx-plugin.js
├── 全局组件注册
├── 自定义指令
├── 原型方法扩展
└── 第三方库集成

2. 配置化能力

动态路由: 基于服务名生成
主题系统: SCSS变量定制
环境配置: 多环境隔离
构建配置: 灵活的 webpack 配置

3. 可维护性

代码规范: ESLint
注释文档: JSDoc风格
类型提示: JSDoc类型
模块隔离: 清晰的边界

🚀 技术亮点总结

✅ 优势

架构清晰 - 分层明确，职责分离
低代码能力 - 强大的可视化构建
多环境支持 - 灵活的部署方案
性能优化 - Webpack 深度定制
扩展性强 - 插件化设计
生态完整 - 丰富的组件库

🎯 适用场景

企业级管理系统
数据可视化平台
低代码开发工具
业务流程引擎
多租户SaaS应用

文档维护: l-pc-front 开发组
最后更新: 2025-12-19

📐 项目架构设计 ​

🎯 架构总览 ​

整体架构图 ​

🏗️ 技术架构详解 ​

1. 核心框架层 ​

Vue.js 版本特性 ​

路由架构 (Vue Router 3.0.3) ​

状态管理 (Vuex 3) ​

2. UI 架构层 ​

多UI框架集成 ​

组件分类体系 ​

3. 业务架构层 ​

低代码平台架构 ​

业务功能模块 ​

4. 数据流架构 ​

HTTP 层设计 ​

数据操作模式 ​

5. 环境与构建架构 ​

多环境配置体系 ​

Webpack 构建优化 ​

🎨 设计模式应用 ​

1. 模块化模式 (Modular Pattern) ​

2. 工厂模式 (Factory Pattern) ​

3. 观察者模式 (Observer Pattern) ​

4. 装饰器模式 (Decorator Pattern) ​

📊 性能架构设计 ​

1. 构建优化 ​

2. 运行时优化 ​

3. 网络优化 ​

🔒 安全架构 ​

1. 认证授权 ​

2. 数据安全 ​

🎯 扩展性设计 ​

1. 插件系统 ​

2. 配置化能力 ​

3. 可维护性 ​

🚀 技术亮点总结 ​

✅ 优势 ​

🎯 适用场景 ​

📐 项目架构设计

🎯 架构总览

整体架构图

🏗️ 技术架构详解

1. 核心框架层

Vue.js 版本特性

路由架构 (Vue Router 3.0.3)

状态管理 (Vuex 3)

2. UI 架构层

多UI框架集成

组件分类体系

3. 业务架构层

低代码平台架构

业务功能模块

4. 数据流架构

HTTP 层设计

数据操作模式

5. 环境与构建架构

多环境配置体系

Webpack 构建优化

🎨 设计模式应用

1. 模块化模式 (Modular Pattern)

2. 工厂模式 (Factory Pattern)

3. 观察者模式 (Observer Pattern)

4. 装饰器模式 (Decorator Pattern)

📊 性能架构设计

1. 构建优化

2. 运行时优化

3. 网络优化

🔒 安全架构

1. 认证授权

2. 数据安全

🎯 扩展性设计

1. 插件系统

2. 配置化能力

3. 可维护性

🚀 技术亮点总结

✅ 优势

🎯 适用场景