低代码开发框架

Appearance

前端组件体系 ​

本文档引用的文件

目录 ​

  1. 简介
  2. 项目结构
  3. 核心组件
  4. KFrame框架机制
  5. 表单组件封装
  6. 业务组件与字典交互
  7. 组件使用示例
  8. 响应式与兼容性
  9. 最佳实践与问题解决

简介 ​

本文档详细阐述了基于Vue 3的前端组件体系，涵盖PC端与移动端的UI组件设计与实现。重点分析KFrame框架的核心机制、表单组件（如CustomInput、CustomSelect）的封装逻辑、业务组件（如DictSelect、DictbizSelect）与字典数据的交互方式，并提供组件使用的代码示例、响应式设计实现及跨浏览器兼容性说明。

项目结构 ​

项目采用模块化结构，主要组件位于pc/src/components目录下，包括KFrame框架、各类表单输入组件及业务选择组件。组件通过Vue 3的Composition API和TypeScript实现，支持响应式更新和类型安全。

组件结构图

图示来源

本节来源

核心组件 ​

系统包含多种核心UI组件，支持表单输入、选择、日期、开关等交互功能。所有组件均支持只读模式、禁用状态及国际化，通过$attrs透传原生属性，确保灵活性和可扩展性。

本节来源

KFrame框架机制 ​

KFrame组件用于嵌入外部内容，通过iframe实现。其核心逻辑在core.ts中，使用IFrameManager管理iframe实例的创建、显示、隐藏和销毁。组件支持keepAlive属性，确保在非活跃状态下保留iframe状态。

布局控制 ​

KFrame通过getFrameContainerRect获取容器尺寸，并在resizeObserver监听容器变化时动态调整iframe大小。zIndex属性控制层叠顺序，确保正确显示。

核心逻辑 ​

IFrameManager使用Map存储iframe实例，通过uid唯一标识。createFame方法创建或替换iframe，showFrame和hideFrame控制显示状态，destroyFrame清理资源。

图示来源

本节来源

表单组件封装 ​

表单组件如CustomInput、CustomSelect等均采用统一的封装模式：支持modelValue双向绑定、readonly和disabled状态、placeholder提示及插槽扩展。

CustomInput组件 ​

CustomInput封装了el-input，支持文本、数字、密码等多种类型。在只读模式下，显示为带边框的文本区域，支持自定义对齐方式（左、中、右）。

CustomSelect组件 ​

CustomSelect基于ElSelectV2，支持单选、多选、全选、设为默认等高级功能。通过optionsMap属性自定义选项映射，findByValues方法支持按值反查数据。

图示来源

本节来源

业务组件与字典交互 ​

DictSelect和DictbizSelect组件专门用于与系统字典数据交互，通过code属性指定字典编码，自动加载对应字典项。

数据加载 ​

组件在onRefresh方法中调用getDict或getDictbiz API获取数据，并映射为ElSelectV2所需的选项格式。optionsMap根据字典项类型（number、time、boolean）自动转换值类型。

新增选项 ​

当hasSelectAdd为true时，组件底部显示“新增选项”按钮，点击后打开DictDetailDialog或DictbizDetailDialog，新增后自动刷新选项列表。

图示来源

本节来源

组件使用示例 ​

Props、Events、Slots用法 ​

vue
<CustomInput 
  v-model="inputValue"
  placeholder="请输入"
  :readonly="isReadonly"
  @change="handleChange"
>
  <template #suffix>
    <el-icon><Search /></el-icon>
  </template>
</CustomInput>

<DictSelect 
  v-model="dictValue"
  code="user_status"
  @update:modelLabel="handleLabelUpdate"
  @data="handleDataLoaded"
>
  <template #header>
    <el-checkbox>自定义全选</el-checkbox>
  </template>
</DictSelect>

本节来源

响应式与兼容性 ​

所有组件均基于Vue 3的响应式系统，使用ref、computed和watch实现数据驱动。通过unocss的原子化CSS类实现响应式布局，支持PC和移动端适配。组件兼容主流浏览器（Chrome、Firefox、Safari、Edge），并处理了iframe跨域、输入框光标定位等兼容性问题。

本节来源

最佳实践与问题解决 ​

最佳实践 ​

  • 使用v-model绑定modelValue实现双向数据流
  • 通过readonly属性切换只读模式，避免直接禁用输入
  • 利用$slots扩展组件功能，如添加自定义图标或按钮
  • 在复杂表单中使用CustomTreeSelect实现树形选择

常见问题 ​

  • 问题：DictSelect加载缓慢
    解决：确保字典数据已缓存，或使用notLoading: true参数
  • 问题：CustomInput在只读模式下高度异常
    解决：检查textareaHeight计算逻辑，确保useResizeObserver正常工作
  • 问题：KFrame内容不显示
    解决：检查src属性是否正确，确保iframe源可访问

本节来源