项目介绍 #

前端项目feature点： #

• 主要feature点：
  • 青训营期间自建的前端中后台框架
    • 主体技术栈：TS + Vue3.3 + pinia + Mock.js + WindiCSS + SCSS，及vue3、vite相关生态
    • 特性支持： SCSS、JSX/TSX、ElementPlus组件与样式自动声明与导入，基于vite插件的vue3组件自动声明与导入。使用前端前沿技术栈，集成开发提效的vite社区轮子，提供良好开发体验基础
    • 依赖独立库：Echarts、Animate.css 、 vueuse、vanta.js
  • 页面三端自适应特性及其相关与附加的feature点
    • ErrorPreviewPage在移动端模式下通过悬浮按钮打开事件列表栏
    • 贯穿于应用程序生命周期的屏幕Resize事件监听效果实现
  • MainLayout部分的固定导航栏模式选择
    • 固定模式下，可见毛玻璃拟态的Header栏下的DOM流动
    • 基于flex布局，宽度可随页面自适应或根据菜单宽度选择变化的Header栏
  • 自封装用于扩展加密传输功能的WebCrypto模块
    • 用于监控数据传输的RSA+AES加密传输方案，兼顾速度与安全性
    • 主要用于加密用户密码等场景，仅需单向确认的bcrypt散列加密算法支持
    • md5、RSA1等初级散列加密算法，用于支持文件分段上传，文件完整性等场景需要
  • 友好的用户提示，动态的展示效果
    • 对关键性能指标等字段的tooltips
    • 按钮rotate，CSS动画移入移出，增加页面动态展示效果
  • 仿fundebug的两栏数据展示页面及优化
    • 左栏为错误事件列表，右栏为选中事件的详细信息展示，右栏数据内容随左侧选定列表项进行实时变化
    • 原生实现的列表展示栏及选中与脱选后展现的CSS样式
    • Performance检测数据的JSON形式统展
    • 基本信息页根据屏幕宽度自动选用两栏或单栏形式展示
  • 基于mock本地存储方式实现的用户管理页面
    • 根据条件筛选、增删改查等基础功能的mock实现
  • 动态背景
    • 解决vanta在vue3中的使用方式问题与全屏模式下失效与报错问题
  • 多级路由缓存技术实现
    • 二级路由转路由树，路由树转二级路由
• 次要feature点：
  • 页面元素的过度动画
  • setting中设置可贯穿于项目的主题色，提供预设颜色主题
  • 全屏模式、黑暗模式、可动态实时调整的sidebar菜单栏宽度，及其余devoptions
  • 应用个性化设置数据持久化
  • 基于vite功能支持的mock模块导入与集成

页面概况展示： #

前端开发过程中遇到的问题点：（基本解决） #

• 样式管理：
  • SCSS可否与WindiCSS混用？使用SCSS管理WindiCSS样式？
  • 为何v-bind()无法在:global选择器中使用？（未解决） *： 请注意：新版本中可在vue3style语法块中使用v-bind动态绑定JS中变量作为CSS输入。
  • 如何实现、设计和展现出带有观感良好的全局黑暗模式样式？（弃坑）（未解决）
• 异步数据展示：
  • Vue3的DOM异步更新机制下，如何高效批量更新DOM数据段？（寻求最佳实践）
  • 父组件异步获得的数据，如何传递给子组件进行展示？最佳实践？（寻求最佳实践） （涉及父子组件生命周期关系）
• 页面展示：
  • ErrorPreviewPage
    • 如何原生实现数据列表？
    • 使用何种方式获取数据列表承载的数据内容？冒泡事件捕获？事件监听代理？（寻求最佳实践）
    • 如何实现列表项选中与非选中状态的CSS样式变化？
    • 如何解决由于采用了Flex布局（原先设计思路上出于适配性的需要），Info-content中的内容，在内容量增加时，会自动扩张宽度，导致sidebar部分不断随ErrorPreview页面的宽度变化的问题？（寻求最佳实践）
  • Header
    • 如何实现header在固定导航栏情况下，实现DOM元素滚动在其底层可见？（Header玻璃拟态）
    • 如何在满足第一条件情况下，保持Header宽度动态可变特性？
  • Sidebar
    • 如何实现sidebar根据开关从左侧移入移出效果？TranslateX？
    • 要求满足第一条件情况下，右侧内容可根据左侧移入移出状态动态填补sidebar空缺
  • Layout
    • 如何实现应用全生命周期实时对Resize事件发生做出反应？
• 项目设置配置：
  • vite全局引入SCSS文件
  • 报错无node path模块
  • Vite unplugin-auto-import插件组件自动声明功能无效
  • 位于views文件夹下的vue文件没有被自动导入，unplugin-vue-component插件不起作用
  • vite升级，mock服务无法通过过去import.meta.globEager方式进行全模块引入