具有首页、安全产品、安全服务、解决方案、等保解读等栏目。项目使用Next.js Bootstrap 开发。使用ssg具有良好的seo和性能。项目使用css动画优化界面效果

为了减少时间，不必从零开始搭建初始项目，提高开发效率，便于多人协作。为此开发玲珑脚手架，该脚手架包含npm包下载、模版选择、eslint检查、gitlab仓库项目分支查看、gitlab项目tag查看、gitlab项目下载功能。开发技术：lerna/ora/chalk/commander/fs-extra/import-local/semver/execa/ejs/eslint/glob/axios/inquirer/npmlog/path-exists1.使用ejs+inquirer+commander，创建可交互式项目模版2.使用Mongodb添加npm模板项目数据，egg做server，inquirer选择要下载得模板,commander注册指令3.编写vue、react项目统一的eslint规范，获取被执行项目package.json判断vue或者react项目执行对应规范检查4.根据gitlabApi和private-token 查询主账号下的所有project，根据id获取分支和tag，调用api或git clone下载项目 5.使用Verdaccio创建私有npm仓库，项目权限设置为$authenticated，注册完管理账户，禁止用户注册保护私有项目和权限限制

平台功能是与网络空间中的服务器、终端、网络设备、安全系统等对接，依据网络安全法、网络安全等级保护制度的相关技术国标，落实通信网络、区域边界、计算环境等各个维度的安全集中管控措施，主要功能模块包括安全态势、集中审计、入侵防范、病毒防范、漏洞巡检、运维管控、资产管理、系统设置和多个子模块。开发技术： Vue 全家桶echarts/anime.js/day.js /Vuex-persistedstate/tailwindcss1.项目开始封装组件、封装axios提升开发效率： •封装时间日期选择框、数据筛选框、利用element二次开发多选下拉框等通用型组件和业务型组件 •封装axios根据CancelToken方法去掉重复请求，判断不同错误码抛出错误，自动携带token，code错误提示等 •使用Promise封装asyncTryCatch方法把错误对象放在第一位，真实数据第二位，解决try catch嵌套过多问题 2.项目过程中： •使用anime.js写动画解决打包之后class类名带hash值js动态添加css动画添加不上去问题 •使用Vue动态组件和过渡保证页面切换平滑，使用异步组件根据不同状态展示对应的页面 •使用 Vuex Module 区分不同模块得数据，优化 store 对象、方便维护,使用vuex-persistedstate数据持久化 •相同逻辑代码使用 mixins 混入公用代码，增强复用性，维护性 •动态路由采用routerd的meta中写死权限，路由守卫中查询角色访问权限，addRoutes添加路由到router内 3.项目结束使用灯塔、TinyPNG、webpack模块分割优化提升用户体验： •使用webpack-bundle-analyzer和Lighthouse提供的Opportunities分析打包结果进行优• •路由采取懒加载, 组件按需加载,optimization.splitChunks分割模块 ,TinyPNG压缩图片解决打包后单个文件体积大的问题