交互优化与数据动态化前言前五天的开发工作完成了项目的基础架构、首页开发、文章列表页面、文章详情页面、公共组件抽离和功能完善。第六天的开发工作将重点关注交互优化与数据动态化包括顶部导航激活状态优化、热门分类动态数据完善、热门文章动态数据获取以及UI细节优化进一步提升用户体验和代码质量。一、顶部导航交互优化1. 一级栏目点击效果优化问题描述之前的实现中有二级导航的一级栏目使用了cursor-not-allowed样式来表示不可点击但这个效果不够美观影响用户体验。解决方案移除cursor-not-allowed样式改用click.prevent阻止默认跳转行为同时保持鼠标划过效果!-- 桌面导航 - 有二级导航的一级栏目 -- div v-ifitem.children item.children.length 0 classrelative group a href# click.prevent :class[px-3 py-2 text-sm font-medium flex items-center gap-1 relative, activeNavId item.id ? text-bank-primary bg-slate-50 rounded-md : text-slate-600 hover:text-bank-primary hover:bg-slate-50 rounded-md transition-colors] {{ item.name }} svg classw-4 h-4 fillnone strokecurrentColor viewBox0 0 24 24 path stroke-linecapround stroke-linejoinround stroke-width2 dM19 9l-7 7-7-7 / /svg /a /div移动端菜单优化移动端的一级栏目使用click.prevent和cursor-pointer样式!-- 移动菜单 - 有二级导航的一级栏目 -- div v-ifitem.children item.children.length 0 div click.prevent :class[block px-3 py-2 text-base font-medium cursor-pointer, activeNavId item.id ? text-bank-primary bg-slate-50 rounded-md : text-slate-700 hover:text-bank-primary] {{ item.name }} /div a v-forchild in item.children :keychild.id :href/list?categoryId${child.id} :class[block px-6 py-2 text-base font-medium pl-4 border-l-2 border-slate-200, activeNavId child.id ? text-bank-primary bg-slate-50 : text-slate-600 hover:text-bank-primary] {{ child.name }} /a /div2. 路由感知的激活状态使用 Vue Router 的useRoute获取当前路由信息根据路由路径和参数动态判断激活状态import { useRoute } from vue-router; const route useRoute(); const activeNavId computed(() { // 首页路径 if (route.path /) { return 2045904451398049793; // 首页栏目ID } // 文章列表页面从URL参数获取categoryId if (route.path /list route.query.categoryId) { const categoryId route.query.categoryId; // 如果是二级栏目返回对应的一级栏目ID if (childToParentMap.value[categoryId]) { return childToParentMap.value[categoryId]; } return categoryId; } return ; });3. 二级栏目到一级栏目的映射构建映射表实现选择二级栏目时高亮对应的一级栏目const childToParentMap ref({}); navList.value.forEach(parent { if (parent.children) { parent.children.forEach(child { childToParentMap.value[child.id] parent.id; }); } });二、热门分类动态数据1. 功能需求首页的热门分类板块需要动态显示每个一级栏目下的前四个二级栏目及其文章数量点击查看全部跳转到所有栏目的文章列表。2. 核心函数实现// 根据栏目名称获取前四个二级栏目 function getTopFourSubcategories(categoryName) { const category fullNavList.value.find(item item.name categoryName item.level 1); if (category) { const childCategories fullNavList.value.filter(item item.pid category.id); return childCategories .sort((a, b) (categoryArticleCounts.value[b.id] || 0) - (categoryArticleCounts.value[a.id] || 0)) .slice(0, 4); } return []; } // 根据栏目ID获取文章数量 function getArticleCountById(categoryId) { return categoryArticleCounts.value[categoryId] || 0; } // 根据栏目名称获取栏目ID function getCategoryIdByName(categoryName) { const category fullNavList.value.find(item item.name categoryName item.level 1); return category ? category.id : ; }3. 模板修改!-- Tech Category -- div classbg-white rounded-xl bank-card-shadow overflow-hidden div classp-4 flex items-center gap-3 bg-blue-500 div classw-10 h-10 rounded-lg bg-white/20 flex items-center justify-center i>三、底部组件复用1. 组件抽离将首页的底部 footer 代码抽离成独立的Footer.vue组件便于统一管理和维护。2. 组件使用修改 Home.vue移除重复的 footer 代码改为引用 Footer 组件template div classfont-sans antialiased bg-slate-50 min-h-screen !-- Header -- Header / !-- Main Content -- main !-- 内容区域 -- /main !-- Footer -- Footer / /div /template script setup import Header from ../components/Header.vue; import Footer from ../components/Footer.vue; /script四、热门文章动态数据1. API 函数添加在article.ts中添加通过iz_hot字段筛选热门文章的 API 函数/** * 获取热门文章通过iz_hot字段筛选 * param limit 数量限制 * returns Promiseany */ export const getHotArticlesByHotFlag (limit: number 5) { return defHttp.get({ url: Api.GetArticleList, params: { izHot: 1, pageNo: 1, pageSize: limit, column: publishTime, order: desc } }); };2. ArticleList.vue 实现// 热门文章数据 const hotArticles ref([]); // 获取热门文章通过iz_hot字段筛选 async function fetchHotArticles() { try { const response await getHotArticlesByHotFlag(5); if (response.success response.result) { hotArticles.value response.result.records || []; } else { hotArticles.value []; } } catch (error) { console.error(获取热门文章失败:, error); hotArticles.value []; } } // 组件挂载时执行 onMounted(() { fetchNavList(); fetchArticles(); fetchHotArticles(); initLucideIcons(); });3. ArticleDetail.vue 实现// 热门文章 const hotArticles ref([]); // 获取热门文章通过iz_hot字段筛选 async function fetchHotArticles() { try { const response await getHotArticlesByHotFlag(5); if (response.success response.result) { hotArticles.value (response.result.records || []).map(item ({ id: item.id, title: item.title, views: item.clickCount || 0 })); } else { hotArticles.value []; } } catch (error) { console.error(获取热门文章失败:, error); hotArticles.value []; } }4. 模板修改!-- Hot Articles -- div classbg-white rounded-xl border border-slate-200 p-4 h3 classtext-sm font-semibold text-slate-800 mb-4热门文章/h3 ul classspace-y-4 li v-for(article, index) in hotArticles :keyarticle.id classflex items-start gap-3 span :class[flex-shrink-0 w-6 h-6 rounded-full flex items-center justify-center text-xs font-medium, index 0 ? bg-bank-primary text-white : bg-slate-200 text-slate-600]{{ index 1 }}/span div classflex-1 min-w-0 a :href/article/ article.id classtext-sm text-slate-700 hover:text-bank-primary transition-colors line-clamp-2 {{ article.title }} /a div classtext-xs text-slate-400 mt-1{{ article.views || 0 }} 阅读/div /div /li /ul /div五、UI 细节优化1. 热门文章间距调整增加文章标题之间的上下行间距提升阅读体验ul classspace-y-4 !-- 之前是 space-y-3 -- ... /ul2. 热门文章卡片样式使用flex-1 min-w-0确保长标题正确换行div classflex-1 min-w-0 a :href/article/ article.id classtext-sm text-slate-700 hover:text-bank-primary transition-colors line-clamp-2 {{ article.title }} /a div classtext-xs text-slate-400 mt-1{{ article.views || 0 }} 阅读/div /div六、项目结构经过六天的开发项目结构如下fintech-vue3/ ├── src/ │ ├── api/ │ │ ├── article.ts # 文章相关API │ │ └── nav.ts # 导航相关API │ ├── components/ │ │ ├── Footer.vue # 底部公共组件 │ │ └── Header.vue # 顶部导航公共组件 │ ├── pages/ │ │ ├── Home.vue # 首页 │ │ ├── ArticleList.vue # 文章列表页 │ │ └── ArticleDetail.vue # 文章详情页 │ ├── router/ │ │ └── index.js # 路由配置 │ ├── utils/ │ │ └── http/ │ │ └── axios.ts # HTTP请求封装 │ ├── style.css # 全局样式 │ ├── App.vue # 根组件 │ └── main.js # 入口文件 ├── public/ │ └── index.html ├── package.json └── vite.config.js七、后续计划1. 功能扩展添加用户登录注册功能实现文章评论功能添加文章收藏功能实现用户个人中心添加文章搜索功能2. 性能优化实现图片懒加载添加骨架屏提升首屏体验优化列表滚动性能实现路由级别的代码分割3. SEO优化添加 meta 标签实现服务端渲染SSR生成 sitemap.xml优化页面加载速度4. 移动端适配优化移动端布局添加手势操作实现 PWA 功能适配深色模式5. 部署上线配置 CI/CD 自动化部署设置生产环境配置配置 CDN 加速实施监控和日志系统