前端交互规范

一、布局与展示

. Table 列表页一屏显示

痛点：页面滚动影响使用者体验，表格内容被隐藏导致频繁滚动操作。

列表页不允许出现页面级竖向滚动条，筛选区 + 表格必须在一屏内完整展示。不过，

const filterFormRef = ref
const tableHeight = ref
function calcTableHeight {
const filterH = filterFormRef.value?.offsetHeight?，0
// 根据实际布局减去 header、padding 等固定高度
tableHeight.value = window.innerHeight - filterH - OTHER_FIXED_HEIGHT
}
onMounted => {
calcTableHeight
window.addEventListener
})
onUnmounted => {
window.removeEventListener
})

. 表格操作列固定右侧

痛点：横向滚动时操作按钮被隐藏，使用者无法快速找到编辑/删除入口。

操作列使用 fixed="right"横向滚动时操作按钮始终可见。

. 长文本省略 + Tooltip

痛点：长文本破坏表格美观且无法完整查看内容，影响数据可读性。

表格单元格长文本使用 show-overflow-tooltip保持列宽整齐，悬浮可查看完整内容。

二、弹窗与表单

. 弹窗禁止点击遮罩层关闭

痛点：误触遮罩层导致填写内容丢失或提交未保存的数据。

所有弹窗必须设置 :close-on-click-modal=false",防止使用者误触遮罩层导致数据丢失。

. 弹窗表单提交前必须校验

痛点：未校验直接提交导致接口错误或数据异常存储到后台。

提交前调用 formRef.validate,校验不通过不发起请求。

 async function handleSubmit { const valid = await formRef.value?.validate.catch => false) if return //发起请求 }

. 弹窗打开时重置表单

痛点: 上次填写的残留数据可能影响当前编辑或新增流程。话说回来，

弹窗每次打开必须重置表单数据和校验状态。避免上次数据残留，其实，

 function openDialog { nextTick => { formRef.value?.resetFields if { Object.assign } }) dialogVisible.value = true }

. 弹窗关闭前变更确认

痛点: 意外关闭导致已修改但未保存的内容丢失。

弹窗内表单有修改时,关闭前弹出二次确认 "是否放弃修改?"，

 function handleDialogClose => void) { if { ElMessageBox.confirm.n => done).catch => {}) } else { done }}

三、防重复提交

. 流程操作函数节流 +确认弹窗拦截

痛点: 多次误触生成重复请求或重复创建业务记录。

新增、完成等流程操作使用 throttle 防止多次点击生成重复数据。

使用者体验调整建议

1. 统一样式风格

   • 可以使用公司品牌色作为主色调
   • 按钮间距保持16px以上避免误触

2. 响应式设计

   • 在小尺寸屏幕上考虑将筛选区折叠为侧边栏
   • 提供手机端专属模式

3. 无障碍设计

   • 添加键盘快捷键支持
   • 高对比度模式切换功能

常见问题FAQ

从Q1来看，元素UI组件版本不兼容如何处理？从A1来看，建议统一使用Element Plus最新稳定版本

Q2这方面。大量字段的弹窗如何调整，从A2来看，分组显示+标签分类+折叠面板+工具栏搜索功能