低代码平台前端功能优化与实现

低代码平台的相关理论知识及基础演示案例（demo），可参考低代码平台相关内容。本节将以该 low-code demo 为基础，重点开展优化工作，初步计划新增 tab 标签页、采用 vuex 替代原有事件传递等相关改动（具体优化细节可根据实际需求调整）。

优化日志

1 页面切换方式改造

实现目标

将原有页面切换方式改造为Tab标签页切换模式，通过标签管理实现多页面同时打开、快速切换，提升低代码平台操作流畅度。
核心功能
1. 初始状态：页面初始化时，默认仅展示「活动管理」一个固定Tab，作为基础主页，不支持关闭。
2. 动态新增Tab：支持通过操作触发，动态新增多个标签页，每个标签对应独立的内容页面，可同时打开多个页面、并行查看。
3. Tab关闭与自动回退：
  - 支持关闭非固定的新增标签页；
  - 关闭当前标签后，自动切换回「活动管理」默认标签。
4. 标签与内容联动：标签切换、新增、关闭时，浏览器地址栏路由不发生变化，仅通过内部状态同步更新当前显示的页面内容，实现无刷新、无路由变更的标签页体验。
提交记录

https://gitee.com/abigale1998/low-code-plus/commit/cb8e10d1feb997036d137543aff63a38e6d99201
效果展示
1. 初始状态：页面仅加载「活动管理」固定标签页，无多余标签，界面简洁，基础功能直达。
2. 多Tab新增效果：通过菜单操作可连续新增多个标签页，标签横向排列，可快速切换不同页面。
3. Tab关闭与回退：关闭新增标签后，系统自动回到「活动管理」默认标签，保证操作连贯性。

2 引入vuex管理状态

实现目标

对低代码平台 demo 进行状态管理架构升级，移除原有组件间繁琐的事件传递、本地状态维护方式，采用 Vuex 集中式管理全局共享状态，统一数据流向、简化组件通信、提升代码规范性与可维护性。
核心功能
1. 全局状态集中化：将 Tab 标签页状态、页面激活状态、全局共享数据等统一存入 Vuex，替代分散在各组件中的本地状态。
2. 简化组件通信：移除多层级事件派发 / 监听，组件直接通过 Vuex 读取、提交状态，解决跨页面、跨组件数据传递复杂问题。
3. 状态可追踪、可复用：所有全局状态变更统一通过 mutations 触发，流程清晰、便于调试，状态逻辑可在全平台任意组件复用。
4. 深拷贝工具规范使用：在 TypeScript 中统一使用 lodash/cloneDeep 对状态进行深拷贝，避免对象引用导致的状态异常变更。
提交记录
涉及知识点
1. Vuex 全局状态管理：集中管理 state、mutations、actions，实现多组件共享状态的统一维护。
2. TypeScript + lodash 深拷贝
  
  避免状态对象浅引用污染，规范状态更新方式：
  ts 复制代码
```
import { cloneDeep } from 'lodash';
const deepCopyObj = cloneDeep(sourceObj);
```
效果说明

本次为底层架构优化，聚焦状态管理模式升级，页面视觉、交互无明显改动，因此不额外展示效果图片。

3 回首页后清空配置内容

实现目标

当用户执行离开新增 / 编辑页面的操作时（包括：切换回活动管理 Tab、关闭新增 / 编辑 Tab、点击新增 / 编辑页取消按钮），需弹出确认提示框，询问用户是否确认离开。

若用户确认：清空当前页面配置内容，切换至活动管理 Tab 页；

若用户取消：保持停留在当前新增 / 编辑 Tab 页，不做任何操作。
核心功能
- 切换 Tab 触发（ant-design-tabs change 事件）监听 Tab 切换事件，当从非主 Tab（新增 / 编辑页）切回主 Tab（活动管理页）时，触发确认弹窗。
- 关闭 Tab 触发（ant-design-tabs edit 事件）监听 Tab 编辑事件，当关闭目标为非主 Tab（新增 / 编辑页）且操作类型为 remove 时，复用切换 Tab 的确认逻辑。
- 取消按钮触发（自定义点击事件）新增 / 编辑页的取消按钮点击后，直接复用上述统一的离开确认逻辑。
- 公共确认逻辑弹出确认框 → 用户确认后 → 清空新增 / 编辑页配置变量 → 将 activeKey 重置为主 Tab；用户取消则不执行任何操作。
提交记录

https://gitee.com/abigale1998/low-code-plus/commit/6b11bf0541ce37c6759905ae6fe74f637eabfad6
效果展示
1. 从新增页面、编辑页面执行返回操作（关闭标签/返回按钮）时，系统会自动弹出确认提示框，防止未保存数据丢失；
2. 从查看页面执行返回操作时，无确认提示，可直接关闭返回，交互更轻量化。

4 图片上传

为简化低代码演示流程、避免依赖后端上传接口，本节采用前端本地图片上传方案，仅在浏览器内完成文件选择、预览与临时展示，无需真实接口上传，更适合 demo 快速演示与功能验证。

文件上传相关说明

文件上传相关原理与扩展方案可参考：【浏览器 API / 网络请求 / 文件处理】前端文件上传全流程：从基础上传到断点续传
实现流程与效果展示
1. 获取上传文件对象：通过 input[type="file"] 选择图片后，获取到浏览器原生 File 对象。
2. 生成临时预览 URL：使用 URL.createObjectURL 生成内存级临时链接，仅当前会话有效，刷新或关闭页面后失效。
3. 页面图片回显：将临时 URL 赋值给 img 标签，实现本地图片实时预览。
原生上传组件样式处理

input[type="file"] 原生默认样式如下，会显示 "未选择文件" 等默认文本：

若需隐藏原生上传控件、自定义按钮样式，可使用 <label> 包裹并隐藏 input，详细说明可见上文链接中2.2.1小节。

代码实现示例

基础实现

html 复制代码

    <label for="img">
      选择文件
      <input
        ref="input"
        id="img"
        type="file"
        accept="image/*"
        @change="handleFileChange"
      />
    </label>

自定义样式实现（推荐）：通过 label 美化上传按钮并隐藏原生 input，切换组件时可避免文件选择状态异常丢失。

html 复制代码

    <label
      for="img"
      style="
        cursor: pointer;
        padding: 8px 16px;
        background: #409eff;
        color: white;
        border-radius: 4px;
      "
    >
      选择文件
      <input
        ref="input"
        id="img"
        type="file"
        accept="image/*"
        style="display: none"
        @change="handleFileChange"
      />
    </label>

效果如下