以下为本文档的中文说明fast-crud-page-dev 是一个专门面向 Certd 前端框架基于 Vue 3 生态体系的 CRUD增删改查类型管理页面快速开发的技能。在现代企业级 Web 应用开发中大量后台管理界面都是围绕数据表格Table和表单Form展开的 CRUD 模式操作页面。该技能利用 Fast Crud 这一高效的声明式 CRUD 组件库基于 fast-crud/fast-crud、fs-crud、useFs、createCrudOptions 等核心模块帮助开发者以极少的代码量和极致的开发效率完成功能完备的数据管理界面搭建。使用场景包括快速构建 Certd 前端框架下的列表数据管理页面如用户列表、订单列表、商品列表开发后台数据维护和管理界面如配置管理、字典维护、权限分配创建支持多条件组合筛选、数据导出等高级功能的数据查询和展示页面在产品原型阶段快速搭建可交互的 MVP 管理界面用于产品验证和演示。核心特点包括基于 Fast Crud 组件库的纯声明式Declarative配置驱动开发范式开发者通过提供一个结构化的 JavaScript 配置对象CrudOptions即可完整定义和自动生成一个功能齐全的数据 CRUD 页面无需逐一手写表格列模板、表单字段、校验规则、分页逻辑和请求方法表格Table和表单Form的字段展示和编辑属性完全通过 JSON 配置统一描述包括表格列的显示标题、宽度和对齐方式、字段排序和筛选支持、表单字段的输入组件类型Input/Select/DatePicker/Switch 等、表单布局行内/块级/栅格、表单验证规则必填、格式校验、自定义 Validator等所有 UI 呈现和行为逻辑均在配置中声明提供多种常用的 CRUD 业务操作模式的内置模板预设包括新增记录弹窗或页面、编辑记录、软删除/硬删除、查看详情抽屉页、批量删除、批量状态更新、导入和导出 Excel 等典型操作支持高级的搜索和筛选条件配置通过配置 search 对象即可自动生成多个搜索字段组成的搜索面板支持文本模糊搜索、下拉选择筛选、日期范围选择等多种筛选控件类型并与表格数据请求自动联动天然集成权限控制体系在配置中通过 if 或 permission 属性即可控制特定列、按钮或字段在不同用户角色管理员/普通用户/访客下的可见性和交互可用性。Fast Crud 页面开发技能角色定义你是一名 Certd 前端列表管理页面开发专家熟悉 Vue 3、Ant Design Vue、Fast Crud 和本仓库现有页面拆分方式。你的目标是让管理页面保持统一的表格、搜索、分页、操作列和弹窗体验。核心规则列表管理、后台管理、记录查询、审核记录、CRUD 表格类页面默认优先使用 Fast Crud 实现。只有轻量只读展示、强交互自定义界面、复杂可视化或已有页面模式明确不适合 Fast Crud 时才手写a-table/ 自定义列表并在回复中说明原因。设置表单、概览卡片、向导流程等非列表主体可以保留自定义 Vue如果同一功能同时包含设置和列表优先拆成独立页面或把设置放入对话框。推荐文件拆分api.ts封装接口请求保持页面和 CRUD 配置里不直接散落 URL。crud.tsx/crud-*.tsx导出createCrudOptions集中定义请求映射、搜索项、列、表单、操作列、工具栏和字典。index.vue承载fs-page、fs-crud、页面头部、弹窗和生命周期使用useFs({ createCrudOptions, context })创建绑定。实现流程先在packages/ui/certd-client/src/views下找 1-2 个相近 Fast Crud 页面沿用它们的导入、布局、命名和权限写法。在index.vue中使用fs-crud refcrudRef v-bindcrudBinding并在onMounted或onActivated时调用crudExpose.doRefresh()两个生命周期同时存在时只保留一个刷新入口避免首次进入页面请求两次。在crud.tsx中配置request.pageRequest、columns、search、form、rowHandle、actionbar、toolbar等接口分页参数和返回值按现有页面适配。操作按钮优先放在 Fast Crud 的rowHandle.buttons或actionbar.buttons中审核、保存设置、批量操作等复杂交互可通过context调用index.vue中的方法。金额、状态、时间、枚举等字段优先复用项目已有组件、字典和格式化工具避免在模板里重复堆格式化逻辑。表格查询条件使用 Fast Crud 的search配置新增/编辑表单使用 Fast Crud 的form配置复杂设置项可以用 Ant Design Vue 对话框承载。删除、审核通过、拒绝等危险操作必须保留确认弹窗和错误提示成功后刷新当前 CRUD 列表。对话框里只做纯确认时可以使用Modal.confirm只要需要字段输入、表单校验或提交字段统一使用useFormDialog/openFormDialog不要在Modal.confirm的content里手写输入框。crud 配置const crudOptions {id: string, //表格唯一标识同一个页面的多个表格的列设置和字段设置会根据id进行区分保存request:{}, //http请求columns:{ //字段配置key:{ //字段keycolumn:{}, //对应table-column配置form:{}, //表单中该字段的公共配置viewForm、addForm、editForm、search会集成此配置支持对应ui的form-item配置viewForm:{}, //查看表单中该字段的配置支持对应ui的form-item配置addForm:{}, // 添加表单中该字段的配置支持对应ui的form-item配置editForm:{}, //编辑表单中该字段的配置支持对应ui的form-item配置search:{} //对应查询表单的form-item配置}},search:{ //查询框配置 对应fs-search组件options:{} //查询表单配置 对应el-from, a-form配置},actionbar:{}, //动作条添加按钮对应fs-actionbar组件toolbar:{}, //工具条 对应fs-toolbar组件table:{ //表格配置对应fs-table// 对应 el-table / a-table的配置slots:{} // 对应el-table ,a-table的插槽},data:{}, //列表数据无需配置自动从pageRequest中获取// 如果你要手动改变表格数据可以通过crudBinding.value.data直接赋值修改表格数据rowHandle:{}, //操作列配置对应fs-row-handleform:{ //表单的公共配置,对应el-forma-form配置wrapper:{} //表单外部容器对话框的配置对应el-dialog,el-drawer,a-model,a-drawer的配置},viewForm:{}, //查看表单的独立配置editForm:{}, //编辑表单的独立配置addForm:{}, //添加表单的独立配置pagination:{}, //分页配置 对应el-pagination / a-paginationcontainer:{}, //容器配置 对应fs-container}布局高度Fast Crud 表格依赖外部容器高度计算。虽然表格本身有默认约 200px 高度但页面内嵌fs-crud时为了获得稳定可用的列表区域必须让外层容器提供明确高度或剩余高度。独立列表页通常可直接让fs-page/ 页面内容区撑满如果表格嵌在 tabs、详情页、上下分区或弹窗里要从页面根容器到fs-crud建立完整的 flex 高度链路父容器display: flex; flex-direction: column; min-height: 0中间内容区和 tab pane 使用flex: 1; min-height: 0fs-crud本身也使用flex: 1; min-height: 0。有固定操作栏、统计区、说明区时这些区域应flex: none把剩余空间交给表格区域。修改嵌入式 Fast Crud 页面后要检查空数据、少量数据和多页数据时表格高度、分页器和空状态是否仍在预期区域内。列表导出列表需要导出时优先使用 Fast Crud 工具栏导出能力不要另写一套导出按钮或后端接口除非数据必须跨权限、跨分页或异步生成文件。导出当前搜索条件下的数据时在toolbar.export中设置dataFrom: search并显式打开导出按钮。导出列必须输出 Excel 可读的纯文本或数字不要直接导出对象、数组、VNode、进度条组件、开关组件、时间戳毫秒值等。有隐藏但业务上需要导出的字段时把字段定义为普通列并设置column.show: false再在columnFilter中对该字段返回true。例如证书域名这类只用于导出的辅助列。嵌套字段可以使用lastVars.certDomains这类 key导出格式化时用安全取值函数读取嵌套值。dataFormatter中统一格式化特殊字段时间字段转YYYY-MM-DD HH:mm:ss日期类有效期转业务文案或YYYY-MM-DD枚举/开关转字典 label数组转逗号分隔字符串对象转明确的业务摘要。import{ColumnProps,DataFormatterContext}fromfast-crud/fast-crud;importdayjsfromdayjs;functiongetRecordValue(row:any,key:string){returnkey.split(.).reduce((target,item)target?.[item],row);}functionformatListValue(value:any){if(Array.isArray(value)){returnvalue.join(,);}returnvalue??;}functionexportColumnFilter(col:ColumnProps){if(!col.key||[_index,_selection,rowHandle].includes(col.key)){returnfalse;}if(col.keylastVars.certDomains){returntrue;}returncol.show!false;}functionexportDataFormatter(opts:DataFormatterContext){const{row,originalRow,col,exportCol}opts;constkeycol.key;constvaluegetRecordValue(originalRow,key);if(keylastVars.certDomains){row[key]formatListValue(value);}elseif(key.includes(Time)value){row[key]dayjs(value).format(YYYY-MM-DD HH:mm:ss);}if(col.width){exportCol.widthcol.width/10;}}return{crudOptions:{toolbar:{buttons:{export:{show:true},},export:{dataFrom:search,columnFilter:exportColumnFilter,dataFormatter:exportDataFormatter,},},columns:{lastVars.certDomains:{title:证书域名,type:text,column:{show:false,width:260,ellipsis:true,},form:{show:false},},},},};内置 CRUD 按钮只要在request中配置了addRequest、editRequest、delRequestFast Crud 会自动在rowHandle渲染新增、编辑、删除按钮并完成对应操作不需要手写openDeleteConfirm、openEditDialog等方法。// crud.tsxconstaddRequestasync({form}:AddReq)awaitapi.AddObj(form);consteditRequestasync({form,row}:EditReq){form.idrow.id;returnawaitapi.UpdateObj(form);};constdelRequestasync({row}:DelReq)awaitapi.DelObj(row.id);return{crudOptions:{request:{pageRequest,addRequest,editRequest,delRequest},rowHandle:{buttons:{view:{show:false},// 不需要查看就隐藏edit:{},// 自动调用 editRequestremove:{},// 自动调用 delRequest自带确认弹窗和错误提示},},},};删除按钮自带确认弹窗不需要额外包装Modal.confirm。只有自定义操作如禁用、审核、生成激活码才需要在rowHandle.buttons中手写click处理方法。如果不需要某列操作直接把对应 key 去掉或设show: false。compute 动态计算当rowHandle.buttons的show、disabled等属性需要根据行数据动态决定时必须使用compute包裹不能直接传函数。import{compute}fromfast-crud/fast-crud;// WRONG: 直接传函数show:({row})row.statusunused// CORRECT: 用 compute 包裹show:compute(({row})row.statusunused)compute基于 Vue 的computed但额外支持上下文参数。适用位置rowHandle.buttons的show、disabled等属性columns.key.column的show、cellRender等columns.key.form/search的表单字段属性参考文档http://fast-crud.docmirror.cn/guide/advance/compute.html代码习惯页面命名、API 命名、权限标识和路由结构要贴近同目录已有页面。CRUD 配置中不要写大段业务流程复杂逻辑放回index.vue方法或api.ts。能用dict、compute、valueBuilder、valueResolve、component配置表达的表格/表单行为不要改成手写模板。保持列表页密度和操作入口克制不要做营销式布局、嵌套卡片或大块说明文字。如果页面有“设置 列表”管理端优先拆成两个路由页面用户端提现设置这类低频配置优先使用对话框保存。验证方式前端改动后只对本次改动的 Vue / TS / TSX / locale 文件运行项目现有 Prettier / ESLint。不运行vue-tsc/pnpm tsc因为当前依赖组合下vue-tsc已知会抛内部错误。若只是新增或修改本 skill / 文档不需要运行前端格式化和测试。
