# nextjs **Repository Path**: anily/nextjs ## Basic Information - **Project Name**: nextjs - **Description**: Next.js 16 client客户端程序 - **Primary Language**: TypeScript - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2025-12-22 - **Last Updated**: 2026-07-16 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # UAP Dev Next - SDWAN 管理系统 ## 项目概述 这是一个基于 Next.js 16 + React 19 + TypeScript + Ant Design 6 构建的企业级 SDWAN（软件定义广域网）管理系统前端应用。系统提供网络配置、业务管理、监控告警、系统设置等全方位的网络运维管理能力。 ## 技术栈 ### 核心框架 - **Next.js**: 16.1.0 (App Router, Server Components) - **React**: 19.2.3 - **TypeScript**: 5.x - **Ant Design**: 6.2.2 ### 状态管理 - **Redux Toolkit**: 2.8.2 - **Redux Persist**: 6.0.0 (状态持久化) ### 国际化 - **i18next**: 25.3.2 - **react-i18next**: 15.6.0 - **next-i18n-router**: 5.5.2 - 支持语言：中文 (zh)、英文 (en) ### 可视化 - **ECharts**: 5.6.0 (图表) - **echarts-for-react**: 3.0.2 - **Leaflet**: 1.9.4 (地图) - **OpenLayers**: 10.6.1 (GIS) ### 网络请求 - **Axios**: 1.10.0 - **@stomp/stompjs**: 7.1.1 (WebSocket) - **sockjs-client**: 1.6.1 ### 其他核心库 - **@ant-design/nextjs-registry**: 1.3.0 (Ant Design Next.js 集成) - **@ant-design/cssinjs**: 2.0.3 - **dayjs**: 1.11.13 (日期处理) - **lodash**: 4.17.21 (工具函数) - **crypto-js**: 4.2.0 (加密) - **dexie**: 4.0.11 (IndexedDB) - **xlsx**: 0.18.5 (Excel 处理) - **file-saver**: 2.0.5 (文件下载) - **@xterm/xterm**: 5.5.0 (终端模拟) - **@wangeditor/editor**: 5.1.23 (富文本编辑器) ## 项目结构 ``` nextjs/ ├── api/ # API 接口定义 │ ├── business/ # 业务相关 API (BSID、VPN、国际快线 PLUS) │ ├── cu/ # 控制器菜单 API (网元管理、告警、性能) │ ├── login/ # 登录认证 API │ ├── meter/ # 首页计量 API │ ├── monitor/ # 监控 API (告警、性能) │ ├── network/ # 网络管理 API (配置维护) │ ├── selector/ # 选择器 API │ ├── system/ # 系统设置 API (日志、备份、安全、设置) │ └── index.ts # API 统一导出 │ ├── app/ # Next.js App Router 路由 │ ├── [locale]/ # 国际化路由 │ │ ├── (meter)/ # 首页计量模块 │ │ │ ├── business/ # 业务管理 │ │ │ ├── cu/ # 控制器管理 │ │ │ ├── monitor/ # 监控管理 │ │ │ ├── ne/ # 网元管理 │ │ │ ├── network/ # 网络管理 │ │ │ ├── system/ # 系统设置 │ │ │ └── topology/ # 拓扑管理 (GIS、地图) │ │ ├── help/ # 帮助文档 │ │ ├── login/ # 登录页 │ │ └── layout.tsx # 根布局 │ ├── components/ # React 组件 │ ├── client/ # 客户端组件 │ │ ├── login/ # 登录组件 (邮箱、手机、用户) │ │ └── meter/ # 计量组件 (认证、图表、导出、菜单等) │ ├── AntdRegistry.tsx # Ant Design 注册 │ ├── Custom403.tsx # 403 错误页 │ ├── GlobalInit.tsx # 全局初始化 │ ├── NonceProvider.tsx # Nonce 提供者 │ ├── ScriptWithNonce.tsx # 带 Nonce 的脚本 │ └── StateSyncProvider.tsx # 状态同步提供者 │ ├── db/ # 数据库/静态数据 │ ├── International.ts # 国际数据 │ ├── china.ts # 中国数据 │ └── menus.ts # 菜单配置 │ ├── hooks/ # 自定义 Hooks │ ├── useError.ts # 错误处理 │ ├── useMessage.ts # 消息提示 │ ├── useNonstop.ts # 持续执行 │ └── useTimer.ts # 定时器 │ ├── locales/ # 国际化资源 │ ├── en/ # 英文翻译 │ ├── zh/ # 中文翻译 │ ├── i18n.ts # i18n 配置 │ └── index.ts # 国际化初始化 │ ├── public/ # 静态资源 │ ├── cdn/ # CDN 资源 │ ├── css/ # 样式文件 │ └── geojson/ # GeoJSON 地理数据 │ ├── AFG.json # 各国地理数据 │ ├── CHN/ # 中国各省地理数据 │ └── ... │ ├── store/ # Redux 状态管理 │ ├── user/ # 用户相关 Slice │ │ ├── socketDataSlice.ts # WebSocket 数据 │ │ └── userDataSlice.ts # 用户数据 │ ├── index.ts # Store 配置 │ ├── provider.tsx # Provider 组件 │ ├── store.ts # Store 创建 │ └── sync_storage.ts # 同步存储 │ ├── styles/ # 全局样式 ├── theme/ # Ant Design 主题配置 ├── utils/ # 工具函数 ├── types/ # TypeScript 类型定义 ├── .vscode/ # VS Code 配置 ├── Dockerfile # Docker 构建配置 ├── next.config.ts # Next.js 配置 ├── package.json # 项目依赖 ├── proxy.ts # 代理配置 ├── eslint.config.js # ESLint 配置 └── .prettierrc # Prettier 配置 ``` ## 功能模块 ### 1. 首页计量 (Meter) - 登录用户信息管理 - WebSocket 实时数据推送 - 版本信息查询 - 服务进程监控 - 授权菜单管理 - 拓扑展示（业务拓扑、GIS 拓扑、物理拓扑） ### 2. 网络管理 (Network) #### 配置维护 - **控制器管理**: 控制器的增删改查、告警订阅 - **网元资源**: 网元列表、同步、导出 - **站点资源**: 站点管理、数据同步 - **业务拨测**: SQA 拨测任务管理、实时拨测 - **拨测矩阵**: 拨测结果矩阵展示 - **业务资源**: 业务资源管理、实时拨测 - **工单管理**: CPE 工单、VPN 工单 - **客户管理**: 客户信息、测试信息 - **时长统计**: 工单时长统计 - **资源统计**: 资源统计图表、表格数据 - **业务质量矩阵 (SQA)**: 时延飞线图、实时/历史时延矩阵 - **业务流量矩阵**: 流量统计 - **资源统计报表**: 业务类型、设备类型分布 - **跨境直播白名单**: 地址白名单管理、操作日志 - **POP 带宽统计**: 当前/历史带宽统计 - **CPE 流量统计**: 当前/历史流量统计 - **我的导出**: 导出文件管理 ### 3. 业务管理 (Business) #### VPN 管理 - **工单记录**: VPN 工单、CPE 省间 POP、国际快线 - **VPN 资源**: 资源管理、同步、导出 - **资源规划**: 资源规划数据 #### BSID 管理 - **BSID 管理**: BSID 的增删改查、资源申请 - **模板管理**: 模板的增删改查、BSID 申请 #### 国际快线 PLUS - **企业 CPE 终端信息变更**: 数据同步、上报 - **全量企业 CPE 终端**: 数据下发 - **业务套餐域名**: 域名管理 - **业务套餐信息**: 套餐信息管理 ### 4. 监控管理 (Monitor) #### 告警管理 - **当前活动告警**: 告警同步、列表、导出 - **历史告警**: 历史告警查询、导出 - **DC 历史告警**: DC 告警数据同步 - **告警规则**: 规则配置、控制器管理 - **告警阈值**: 阈值配置 - **告警统计**: 告警级别、省份统计 #### 性能管理 - **历史性能**: 接口、SQA、设备历史性能数据 ### 5. 控制器菜单 (CU) - **网元管理**: - DHCP、NTP、NAT 配置 - 物理接口、VLAN、子接口 - 静态路由、DPI、ACL - BGP、DNS、OSPF 协议 - APP 应用识别与策略 - **告警管理**: 当前/历史告警 - **性能管理**: 当前性能监控 - **维护管理**: Ping、TCP Ping、Trace 工具 - **日志管理**: 系统日志查询 ### 6. 系统设置 (System) #### 日志管理 - **日志查询**: 日志列表、导出 - **日志统计**: 时间范围、比例、趋势图 #### 数据库备份 - **自动备份**: 备份信息管理 - **手动备份**: 备份执行、结果查询 - **数据恢复**: 数据库恢复、文件上传 #### 服务器配置 - **邮件服务器**: 邮件服务器管理、测试 - **短信服务器**: 短信服务器管理、测试 - **邮件前传**: 邮件转发配置 #### 系统监控 - **服务器监控**: 服务器信息 - **JVM 监控**: JVM 参数监控 #### 选项管理 - **系统选项**: 系统参数配置 - **技术支持**: 技术支持信息 - **帮助文档**: 文档管理 - **FTP 用户**: FTP 用户管理 - **外部文件服务器**: 文件服务器配置 - **故障记录**: 故障记录管理 #### 安全管理 - **个人中心**: 账户信息管理 - **白名单配置**: 访问白名单 - **会话管理**: 在线会话管理 - **账户规则**: 密码规则配置 - **操作集管理**: 操作权限管理 - **角色管理**: 角色权限配置 - **租户管理**: SC/DC租户管理 - **用户管理**: 用户增删改查 ### 7. 拓扑管理 (Topology) - **GIS 拓扑**: 地理信息拓扑、业务统计、告警统计 - **地图拓扑**: 物理拓扑、站点、隧道展示 ## 开发指南 ### 环境要求 - Node.js 21+ - npm 或 yarn - Docker (可选，用于容器化部署) ### 安装依赖 ```bash npm install ``` ### 开发模式 ```bash npm run dev ``` 访问 http://localhost:3000 ### 构建生产版本 ```bash npm run build ``` ### 启动生产服务器 ```bash npm start ``` ### 代码检查 ```bash npm run lint ``` ### 代码格式化 ```bash npm run fix ``` ## Docker 部署 ### 构建镜像 ```bash docker build -t uap-dev-next . ``` ### 运行容器 ```bash docker run -p 3000:3000 uap-dev-next ``` ## 代理配置 开发环境配置了以下代理（在 `next.config.ts` 中）： - `/api/*` → `http://10.194.39.112:32001/api/*` - `/action/*` → `http://10.194.39.112:32001/action/*` - `/stomp/*` → `http://10.194.39.112:32001/stomp/*` - `/telnetssh/*` → `http://10.194.39.112:33002/telnetssh/*` - `/cdn/*` → `https://10.194.39.112:28301/cdn/*` ## 国际化 项目支持中文和英文两种语言，翻译文件位于 `locales/` 目录： - `locales/zh/` - 中文翻译 - `locales/en/` - 英文翻译 命名空间包括： - common - 公共翻译 - login - 登录相关 - meter - 首页计量 - business - 业务管理 - network - 网络管理 - monitor - 监控管理 - system - 系统设置 - cu - 控制器菜单 - 等等... ## 安全特性 - **CSP Nonce**: 支持内容安全策略 nonce - **JWT Token**: 基于 JWT 的身份认证 - **CSRF Protection**: CSRF Token 保护 - **会话管理**: 会话超时控制 - **权限控制**: 基于角色的访问控制 (RBAC) ## 性能优化 - **Next.js SSR/SSG**: 服务端渲染和静态生成 - **代码分割**: 按需加载组件 - **图片优化**: 使用 Next.js Image 组件 - **缓存策略**: Redux Persist 状态持久化 - **Web Workers**: 后台线程处理计算密集型任务 ## 浏览器支持 - Chrome (推荐) - Firefox - Safari - Edge ## 常见问题 ### 开发环境跨域问题 确保在 `next.config.ts` 中配置了正确的 `allowedDevOrigins` 和代理规则。 ### 国际化资源加载 使用 `useTranslation` hook 加载对应的命名空间： ```typescript const { t } = useTranslation('common'); ``` ### Redux 状态同步 使用 `StateSyncProvider` 确保多标签页状态同步。 ## 贡献指南 1. Fork 项目 2. 创建特性分支 (`git checkout -b feature/AmazingFeature`) 3. 提交更改 (`git commit -m 'Add some AmazingFeature'`) 4. 推送到分支 (`git push origin feature/AmazingFeature`) 5. 开启 Pull Request ## 许可证 私有项目，版权所有。 ## 联系方式 如有问题，请联系技术支持团队。