企业官网建设流程全解析

mip网站建设,学习网站开发心得体会,wordpress自动上传外链图片,网页设计大赛策划案在中后台管理系统开发场景中#xff0c;动态标签页是提升用户操作体验的核心功能 —— 它模拟浏览器标签页交互逻辑#xff0c;支持多页面并行操作、自由切换#xff0c;还能保留用户的操作轨迹。本文将基于 React Umi#xff08;umijs/max#xff09; Ant Design 技术栈…在中后台管理系统开发场景中动态标签页是提升用户操作体验的核心功能 —— 它模拟浏览器标签页交互逻辑支持多页面并行操作、自由切换还能保留用户的操作轨迹。本文将基于 React Umiumijs/max Ant Design 技术栈拆解一套可直接落地的动态标签页实现方案覆盖标签自动生成、缓存恢复、权限控制、路由联动等核心能力。一、功能需求与核心设计1. 核心需求动态标签页需满足中后台系统的典型交互诉求路由联动切换路由自动生成 / 激活标签切换标签同步更新路由固定首页首页标签不可关闭作为基础导航锚点数量限制控制最大打开标签数避免过多标签导致性能损耗缓存恢复页面刷新后还原之前打开的标签列表权限适配仅展示用户有权限访问的路由对应的标签交互友好关闭标签时自动切换到相邻标签异常场景有降级处理。2. 技术栈选型框架层React Umiumijs/max利用 Umi 内置的路由能力、权限 hooks 简化开发UI 组件Ant Design 的 Tabs 组件基于其可编辑卡片模式扩展标签操作能力存储层sessionStorage标签缓存、localStorage菜单数据兼顾临时缓存与持久化需求路由控制Umi 封装的 history、useLocation实现路由与标签的双向联动。二、核心实现逻辑拆解1. 基础定义常量与数据结构首先规范核心常量和标签页数据结构明确边界规则定义无需生成标签的路由列表如登录页、404 页避免无效标签设定存储缓存的 key 值和最大标签数20 个防止缓存冲突和性能问题定义 TabItem 接口包含路由 key、标题、是否可关闭、图标等核心属性统一标签数据格式。2. 工具函数路由标题匹配与首页标签获取1路由标题匹配从 localStorage 缓存的菜单数据中递归查找路由对应的标题提升标签可读性读取 localStorage 中的菜单数据兼容嵌套菜单结构递归匹配路由后缀异常降级处理若菜单数据解析失败或匹配不到标题使用路由后缀作为默认标题。2首页标签生成结合 Umi 的权限控制能力生成固定不可关闭的首页标签默认兜底若菜单数据不存在返回预设的 “首页” 标签路径 /index权限适配从菜单数据中筛选用户可访问的首个有效路由作为首页标签确保权限一致性过滤无效路由排除登录页、错误页等无需生成标签的路由。3. 缓存管理标签页的持久化与恢复实现页面刷新后标签状态还原的核心逻辑1缓存保存仅缓存可关闭的标签排除首页到 sessionStorage避免首页标签重复存储标签列表变化时自动触发缓存更新保证缓存与最新状态一致。2刷新恢复页面加载时从 sessionStorage 读取缓存按规则还原标签列表异常处理包裹 try/catch解析失败则降级为仅显示首页标签首页保障确保恢复后的标签列表中首页标签存在且不可关闭路由适配若当前路由不在缓存标签中且未达数量上限自动添加该路由对应的标签激活态还原优先将当前路由设为激活标签否则激活首页标签。4. 核心组件逻辑交互与联动1初始化与路由监听初始化阶段获取权限适配的首页标签恢复缓存的标签列表并重定向到正确的首页路由路由监听监听 pathname 变化自动处理标签的激活 / 新增逻辑 —— 已有标签直接激活新路由则在当前标签后插入新标签达数量上限时给出提示。2标签操作关闭与切换关闭标签禁止关闭首页标签若关闭的是当前激活标签自动切换到相邻标签并更新路由保证用户操作不中断切换标签点击标签时通过 history.push 更新路由实现标签与路由的双向同步。3渲染优化性能优化使用 useMemo 缓存标签项渲染结果useCallback 缓存事件处理函数减少不必要的重渲染样式适配标签标题超出宽度时省略显示标签过多时支持横向滚动提升视觉体验条件渲染无需显示标签的路由如登录页直接返回 null避免无效 DOM 渲染。三、关键优化与异常处理1. 性能优化数量限制最大打开 20 个标签避免 DOM 节点过多导致渲染性能下降缓存复用通过 useMemo/useCallback 减少重复计算和函数重建降低组件重渲染频率按需渲染仅在有效路由下渲染标签组件减少资源占用。2. 异常处理存储容错所有本地存储操作包裹 try/catch避免 JSON 解析失败导致功能崩溃降级策略路由标题匹配失败时用路由后缀兜底缓存恢复失败时仅保留首页标签交互兜底关闭标签时若无相邻标签默认激活首页标签避免无激活态的异常。3. 权限兼容结合 Umi 的 useAccess hooks仅生成用户有权限访问的路由标签首页标签优先选择用户可访问的路由确保权限边界一致。四、使用快速接入组件封装在components文件夹下创建DynamicTabs文件并将所用到的逻辑封装导出组件引入将 DynamicTabs 组件嵌入布局组件如 BasicLayout的 Header 下方数据准备确保菜单数据已缓存到 localStorage 的 camenu 键可从后端接口获取后存入配置调整根据业务修改无需生成标签的路由列表、最大标签数等常量。五、源码import React, { useState, useEffect, useCallback, useMemo } from react;import { Tabs, message } from antd;import { HomeOutlined } from ant-design/icons;import { useAccess } from umi;import { history, useLocation } from umijs/max;const NO_TAB_PATHS [/user/login, /lock, /404, /500, /];const MENU_STORAGE_KEY camenu;const TAB_STORAGE_KEY dynamic_tabs_cache;const TAB_LIMIT 20;interface TabItem {key: string;title: string;closable?: boolean;icon?: React.ReactNode;createTime?: number;}// 查找路由标题const findRouteTitle (path: string): string {const menuDataStr localStorage.getItem(MENU_STORAGE_KEY);if (!menuDataStr) return path.split(/).pop() || 新标签;try {const menuData JSON.parse(menuDataStr);const findTitle (menus: any[]): string | null {for (const menu of menus) {if (menu.path?.includes(path.split(/).pop()) menu.title) {return menu.title;}if (menu.children) {const childTitle findTitle(menu.children);if (childTitle) return childTitle;}}return null;};return findTitle(menuData) || path.split(/).pop() || 新标签;} catch {return path.split(/).pop() || 新标签;}};// 获取首页标签const getHomeTab (access: any): TabItem {const defaultTab: TabItem {key: /index,title: 首页,closable: false,icon: HomeOutlined /,createTime: Date.now()};const menuDataStr localStorage.getItem(MENU_STORAGE_KEY);if (!menuDataStr) return defaultTab;try {const menuData JSON.parse(menuDataStr);const findAccessibleRoute (menus: any[]): TabItem | null {for (const menu of menus) {if (!menu.path || NO_TAB_PATHS.includes(menu.path)) continue;if ((access.hasRoute?.({ path: menu.path }) ?? true) menu.title) {return { ...defaultTab, key: menu.path, title: menu.title };}if (menu.children) {const childRoute findAccessibleRoute(menu.children);if (childRoute) return childRoute;}}return null;};return findAccessibleRoute(menuData) || defaultTab;} catch {return defaultTab;}};// 恢复缓存标签const restoreTabsFromCache (homeTab: TabItem) {try {const cached sessionStorage.getItem(TAB_STORAGE_KEY);let tabs cached ? JSON.parse(cached) : [];tabs Array.isArray(tabs) ? tabs : [];const hasHome tabs.some(tab tab.key homeTab.key !tab.closable);if (!hasHome) tabs [homeTab, ...tabs.filter(tab tab.key ! homeTab.key)];const currentPath window.location.pathname;const shouldAdd currentPath ! homeTab.key !NO_TAB_PATHS.includes(currentPath) !tabs.some(tab tab.key currentPath) tabs.length TAB_LIMIT;if (shouldAdd) {tabs.push({key: currentPath,title: findRouteTitle(currentPath),closable: true,createTime: Date.now()});}const activeKey tabs.some(tab tab.key currentPath) ? currentPath : homeTab.key;return { tabs: tabs.slice(0, TAB_LIMIT), activeKey };} catch {return { tabs: [homeTab], activeKey: homeTab.key };}};// 保存缓存const saveTabsToCache (tabs: TabItem[]) {const closableTabs tabs.filter(tab tab.closable);sessionStorage.setItem(TAB_STORAGE_KEY, JSON.stringify(closableTabs));};const DynamicTabs: React.FC () {const access useAccess();const { pathname } useLocation();const [tabs, setTabs] useStateTabItem[]([]);const [activeKey, setActiveKey] useState();const [homeTab, setHomeTab] useStateTabItem | null(null);// 初始化useEffect(() {const home getHomeTab(access);setHomeTab(home);const { tabs: initTabs, activeKey: initActiveKey } restoreTabsFromCache(home);setTabs(initTabs);setActiveKey(initActiveKey);if (pathname / || pathname home.key) {history.push(home.key);} else if (!initTabs.some(tab tab.key pathname) !NO_TAB_PATHS.includes(pathname)) {history.push(initActiveKey);}}, [access]);// 处理路由变化useEffect(() {if (!homeTab || NO_TAB_PATHS.includes(pathname) || pathname /) return;if (pathname homeTab.key) {setActiveKey(homeTab.key);return;}const existingTab tabs.find(tab tab.key pathname);if (existingTab) {setActiveKey(pathname);return;}if (tabs.length TAB_LIMIT) {message.warning(最多打开 ${TAB_LIMIT} 个标签页);return;}const newTab: TabItem {key: pathname,title: findRouteTitle(pathname),closable: true,createTime: Date.now()};setTabs(prev {const index prev.findIndex(tab tab.key activeKey);const newTabs [...prev];newTabs.splice(index 0 ? index 1 : prev.length, 0, newTab);return newTabs;});setActiveKey(pathname);}, [pathname, homeTab, tabs.length, activeKey]);// 缓存标签useEffect(() {if (homeTab) saveTabsToCache(tabs);}, [tabs, homeTab]);// 关闭标签const handleClose useCallback((targetKey: string) {if (targetKey homeTab?.key) {message.info(首页标签不能关闭);return;}setTabs(prev {const newTabs prev.filter(tab tab.key ! targetKey);if (targetKey activeKey newTabs.length) {const closedIndex prev.findIndex(tab tab.key targetKey);const nextTab newTabs[closedIndex] || newTabs[closedIndex - 1] || newTabs[0];history.push(nextTab.key);setActiveKey(nextTab.key);}return newTabs;});}, [activeKey, homeTab]);// 切换标签const handleChange useCallback((key: string) {if (key ! activeKey) {history.push(key);setActiveKey(key);}}, [activeKey]);// 生成标签项const tabItems useMemo(() tabs.map(tab ({key: tab.key,label: (div style{{ display: flex, alignItems: center }}{tab.key homeTab?.key HomeOutlined style{{ marginRight: 6, fontSize: 14 }} /}span style{{ maxWidth: 120, overflow: hidden, textOverflow: ellipsis }}{tab.title}/span/div),closable: tab.closable,})), [tabs, homeTab]);if (NO_TAB_PATHS.includes(pathname) || !homeTab) return null;return (div style{{ backgroundColor: #fff, borderBottom: 1px solid #f0f0f0, padding: 5px 0 0 16px }}Tabstypeeditable-cardhideAddactiveKey{activeKey}onChange{handleChange}onEdit{handleClose}tabBarStyle{{ margin: 0, minHeight: 40 }}sizesmalltabBarGutter{4}items{tabItems}renderTabBar{(props, DefaultTabBar) (div style{{ overflowX: auto, overflowY: hidden }}DefaultTabBar {...props} //div)}//div);};export default DynamicTabs;六、效果