修改概述今天的修改分为两个阶段阶段一实现分页功能 创建50条测试数据修改 API endpoint 匹配逻辑关键修复从原有约2条数据增加到50条测试数据实现完整的分页功能搜索、分页组件、跳转添加模板类型支持公用/共享/个人阶段二增加50条测试数据在50条基础上再增加50条达到100条测试数据修改文件清单src/api/index.js- Mock API和测试数据2条→50条→100条src/stores/searchStore.js- Store分页逻辑src/components/search/TemplateManagerDialog.vue- 模板管理弹窗组件src/components/search/SearchPanel.vue- 搜索面板下拉列表样式阶段一修改内容1. src/api/index.js1.1 修改 endpoint 匹配逻辑关键修复问题原因: URL包含查询参数如/templates?start0limit20时严格相等匹配会失败导致数据无法加载位置: 第63行GET请求和第257行POST请求修改前:if(endpoint/templatesmethodGET){修改后:if(endpoint.startsWith(/templates)methodGET){同样修改 POST 请求第257行:// 修改前if(endpoint/templatesmethodPOST){// 修改后if(endpoint.startsWith(/templates)methodPOST){1.2 创建50条测试数据背景: 原有代码只有约2条测试数据位置: 第68-175行修改内容:// 生成50条测试数据constTOTAL_TEMPLATES50consttemplateNames[故障查询模板,维护记录模板,日常巡检模板,设备监控模板,告警处理模板,工单派发模板,资源申请模板,权限审批模板,数据备份模板,系统升级模板,网络诊断模板,性能分析模板,安全审计模板,日志查询模板,配置管理模板,变更管理模板,问题管理模板,事件管理模板,发布管理模板,容量规划模板,可用性管理模板,连续性管理模板,服务级别模板,财务管理模板,资产管理模板,知识管理模板,供应商管理模板,安全管理模板,项目管理模板,质量管理模板,风险管理模板,合规管理模板,业务关系管理模板,战略管理模板,设计管理模板,转换管理模板,运营支持模板,服务报告模板,改进管理模板,评估管理模板,测试管理模板,部署管理模板,监控管理模板,备份恢复模板,灾备演练模板,应急响应模板,漏洞管理模板,补丁管理模板,配置审计模板,访问控制模板,]数据分布规则:ID 1-5公用模板type‘public’ID 6-15共享模板type‘shared’ID 16-50个人模板type‘private’1.3 添加关键词搜索过滤位置: 第164-170行新增代码:// 根据keyword过滤数据constkeywordurl.searchParams.get(keyword)||letfilteredTemplatesallTemplatesif(keyword){filteredTemplatesallTemplates.filter((t)t.name.toLowerCase().includes(keyword.toLowerCase()),)}// 根据start和limit截取数据constpaginatedResultsfilteredTemplates.slice(start,startlimit)2. src/stores/searchStore.js2.1 添加分页状态位置: 第127-134行在activeFieldsConfig定义后添加新增代码:/** * 模板分页状态 * 作用管理模板列表的分页数据 */consttemplatePaginationref({currentPage:1,pageSize:20,total:0,})2.2 添加分页获取模板函数位置: 第212-272行在initData函数后添加新增代码:/** * 获取分页模板列表 * * 函数意义用于模板管理弹窗的分页数据获取 * 执行逻辑 * 1. 根据当前分页参数调用API * 2. 转换数据格式 * 3. 更新本地状态 * * 参数说明 * page: 页码从1开始 * pageSize: 每页条数 * keyword: 搜索关键词可选 * * 返回转换后的模板数据和总数 */constfetchTemplatesByPageasync(page1,pageSize20,keyword){try{conststart(page-1)*pageSizeconsttemplateDataawaittrackedApi.template.getTemplates({start,limit:pageSize,keyword,})// 转换API数据结构为前端友好的格式constconvertedTemplatestemplateData.results.map((template)({id:template.id,name:template.name,type:template.type||(template.active?public:private),isDefault:template.is_default,creator:template.creator||Unknown,createTime:template.createTime||newDate(template.change_time).toLocaleString(),sharedTo:template.shared_to||template.sharedTo||--,description:template.description||--,content:parseTemplateContent(template.content),permission:{canDelete:template.permission?.can_delete||false,canShare:template.permission?.can_share||false,canUpdate:template.permission?.can_update||false,},}))// 更新分页状态templatePagination.value{currentPage:page,pageSize:pageSize,total:templateData.total||templateData.results.length,}return{templates:convertedTemplates,total:templateData.total||templateData.results.length,}}catch(error){console.error(获取模板列表失败:,error)ElMessage.error(获取模板列表失败请重试)throwerror}}2.3 导出新增的状态和函数位置: 第575行在return语句中添加修改前:return{// ... 其他导出 ...apiSetDefault,apiDeleteTemplate,apiShareTemplate,}修改后:return{// ... 其他导出 ...apiSetDefault,apiDeleteTemplate,apiShareTemplate,fetchTemplatesByPage,// 分页获取模板列表templatePagination,// 模板分页状态}3. src/components/search/TemplateManagerDialog.vue3.1 修改模板结构位置: 第2-96行新增搜索输入框:el-input v-modelsearchKeyword placeholder请输入模板名称 clearable stylewidth: 100%; margin-bottom: 1rem :prefix-iconSearch keyup.enterhandleSearch clearhandleSearch /修改表格数据源和添加最大高度:el-table :datapagedTemplates stylewidth: 100% stripe v-loadingloading max-height500 /el-table修改模板类型列支持三种类型:el-table-column label模板类型 width100 template #defaultscope el-tag :typegetTagType(scope.row.type) {{ getTypeLabel(scope.row.type) }} /el-tag /template /el-table-column新增两列被共享群组或个人、描述:el-table-column propsharedTo label被共享群组或个人 width150 / el-table-column propdescription label描述 min-width120 /修改设为默认列标题:el-table-column label设置为默认模板 width130 aligncenter/el-table-column新增分页组件第68-99行:!-- 分页组件 -- div classpagination-container div classpagination-left span classtotal-text总共 {{ pagination.total }} 条/span el-select v-modelpagination.pageSize changehandleSizeChange stylewidth: 100px el-option label10条/页 :value10 / el-option label20条/页 :value20 / el-option label50条/页 :value50 / el-option label100条/页 :value100 / /el-select /div div classpagination-right el-pagination v-model:current-pagepagination.currentPage :page-sizepagination.pageSize :totalpagination.total layoutprev, pager, next current-changehandlePageChange / div classjump-to span跳至/span el-input-number v-modeljumpToPage :min1 :maxMath.ceil(pagination.total / pagination.pageSize) || 1 controls-positionright stylewidth: 80px; margin: 0 8px keyup.enterhandleJumpToPage / span页/span /div /div /div3.2 修改 script 部分位置: 第117-310行修改导入:import{computed,ref,reactive,watch}fromvueimport{Share,Delete,Search}fromelement-plus/icons-vueimport{showApiError,isPermissionError}from../../utils/errorHandler添加分页相关状态:constsearchKeywordref()constpagedTemplatesref([])constloadingref(false)constjumpToPageref(1)constpaginationreactive({currentPage:1,pageSize:20,total:0,})添加数据加载函数:constloadTemplatesasync(){loading.valuetruetry{constresultawaitsearchStore.fetchTemplatesByPage(pagination.currentPage,pagination.pageSize,searchKeyword.value,)pagedTemplates.valueresult.templates pagination.totalresult.total}catch(error){console.error(加载模板列表失败:,error)}finally{loading.valuefalse}}consthandleSearch(){pagination.currentPage1jumpToPage.value1loadTemplates()}consthandlePageChange(page){pagination.currentPagepageloadTemplates()}consthandleSizeChange(size){pagination.pageSizesize pagination.currentPage1jumpToPage.value1loadTemplates()}consthandleJumpToPage(){constmaxPageMath.ceil(pagination.total/pagination.pageSize)||1if(jumpToPage.value1jumpToPage.valuemaxPage){pagination.currentPagejumpToPage.valueloadTemplates()}}添加模板类型辅助函数支持公用/共享/个人三种类型:constgetTagType(type){switch(type){casepublic:returnwarningcaseshared:returnsuccessdefault:returninfo}}constgetTypeLabel(type){switch(type){casepublic:return公用caseshared:return共享default:return个人}}修改删除逻辑删除后自动处理分页:// 在handleDelete中删除成功后添加:if(pagedTemplates.value.length1pagination.currentPage1){pagination.currentPage--jumpToPage.valuepagination.currentPage}awaitloadTemplates()添加弹窗打开监听:watch(()props.modelValue,(newVal){if(newVal){pagination.currentPage1jumpToPage.value1loadTemplates()}},)3.3 修改 style 部分位置: 第380-425行添加分页样式:/* 分页容器样式 */.pagination-container{display:flex;justify-content:space-between;align-items:center;margin-top:1rem;padding:0.5rem 0;}.pagination-left{display:flex;align-items:center;gap:0.5rem;}.total-text{color:#606266;font-size:0.875rem;}.pagination-right{display:flex;align-items:center;gap:0.5rem;}.jump-to{display:flex;align-items:center;color:#606266;font-size:0.875rem;}.jump-to :deep(.el-input-number) .el-input__inner{padding-left:8px;padding-right:8px;text-align:center;}4. src/components/search/SearchPanel.vue4.1 修改下拉列表样式添加最大高度位置: 第223-227行修改前:.template-dropdown-list{list-style:none;padding:0;margin:0;}修改后:.template-dropdown-list{list-style:none;padding:0;margin:0;max-height:300px;overflow-y:auto;}阶段二修改内容1. src/api/index.js - 增加50条测试数据50条→100条背景: 在阶段一的50条数据基础上再增加50条达到100条位置: 第68-170行修改内容:// 修改前constTOTAL_TEMPLATES50consttemplateNames[// ... 原有的50个名称 ...访问控制模板,]// 修改后constTOTAL_TEMPLATES100consttemplateNames[// ... 原有的50个名称 ...访问控制模板,// 新增的50个模板名称用户管理模板,角色管理模板,组织架构模板,流程审批模板,数据统计模板,报表生成模板,数据导入模板,数据导出模板,系统配置模板,参数设置模板,字典管理模板,菜单管理模板,接口管理模板,定时任务模板,消息通知模板,邮件发送模板,短信发送模板,文件上传模板,文件下载模板,图片处理模板,视频管理模板,音频管理模板,文档管理模板,版本控制模板,代码审查模板,构建部署模板,自动化测试模板,性能压测模板,负载均衡模板,缓存管理模板,队列管理模板,搜索引擎模板,大数据分析模板,机器学习模板,人工智能模板,物联网管理模板,区块链管理模板,云计算管理模板,容器编排模板,微服务管理模板,服务网格模板,API网关模板,身份认证模板,单点登录模板,多租户管理模板,数据隔离模板,隐私保护模板,加密解密模板,签名验签模板,证书管理模板,密钥管理模板,令牌管理模板,会话管理模板,限流熔断模板,降级预案模板,灰度发布模板,蓝绿部署模板,金丝雀发布模板,A/B测试模板,用户画像模板,行为分析模板,推荐系统模板,风控管理模板,反欺诈模板,内容审核模板,版权管理模板,合同管理模板,发票管理模板,支付管理模板,对账管理模板,结算管理模板,退款管理模板,优惠券管理模板,积分管理模板,会员管理模板,等级管理模板,权益管理模板,活动管理模板,抽奖管理模板,秒杀管理模板,团购管理模板,预约管理模板,排队管理模板,叫号管理模板,]最终数据分布100条:公用模板5条 (ID 1-5)共享模板10条 (ID 6-15)个人模板85条 (ID 16-100)修改验证清单部署后请检查关键注意事项endpoint匹配修改第63行和第257行是关键修复必须使用startsWith而不是否则URL查询参数会导致匹配失败数据无法加载数据生成逻辑ID 1-5公用模板type‘public’ID 6-15共享模板type‘shared’ID 16-100个人模板type‘private’分页逻辑采用后端分页前端只显示当前页数据每次翻页都会调用API所有新增代码均通过 ESLint 检查