跳到主要内容

前端服务

  • 在 src/theme/Root.js 配置 React 组件滚动，使得外部访问带锚点的链接可以直接滚动跳转

打包配置​

vite.config.js 打包路径设置为：../lrobot/web/frontend/dist，即自动打包进 lrobot 的前端文件夹内

后端路径配置​

vite.config.js 将调试时的 "/hjd" 路径转换为 localhost:5922/hjd,即使调试使用的是 5173 端口也可以成功访问后端

全局脚本配置​

main.js // 注册交互适配器 registerInteractions(app) // 注册布局自动管理系统 registerLayouts(app)

连接管理​

api.js http 和 websocket 连接，可直接引用

路由管理​

router/index.js 路径配置

  • index 中配置各页面路径
  • 未匹配路径转到 NotFound.vue 配置cookie验证：
  • /firefly:存在 account
  • /cab:存在 account 且不以花火开头
  • 其他:不限制

模板容器​

layout

交互适配器​

layout.js

  • 统一触摸和点击事件
  • 统一电脑右键和手机长按事件为 rightClick
  • 统一电脑鼠标移动、手机滑动事件为 dragStart,dragMove,dragEnd
  • 统一电脑 ctrl+- 缩放、手机双指缩放事件为 zoom(zoomStart,zoomEnd)
  • 统一电脑窗口变化（缩放/改变窗口大小）、手机窗口变化（缩放，横屏-竖屏）事件为 viewportChange

布局注册器​

registier.js

  • 初始化页面所有容器(若存在.layoutxx-container则调用注册函数LayoutxxScale)
    • 监听新增节点，若存在.layoutxx-container则调用注册函数LayoutxxScale
  • 绑定窗口事件，监听 zoom,zoomEnd,viewportChange 事件，若出现则调用注册函数LayoutxxScale

layout1 布局​

layout1.js,layout1.css

Layout1Scale 方法​
  • 保证 layout1-content 存在
  • 获取当前可视高度
  • 根据比例切换模式(>9/16 宽屏模式，<9/16 窄屏模式)
  • 不同模式具有不同样式
    • 容器占满可视区域
    • 内容区 layout1-content
      • 宽屏下高度为可视高度，宽度为 16/9*高度，居中，两侧留白
      • 窄屏下高度为可视高度，宽度为 16/9*高度，出现滚动条
  • 使用 align-items 保证 layout1-content 不被挤到手机浏览器上方地址栏处

layout2布局​

layout2.js,layout2.css

Layout2Scale 方法​
  • 根据屏幕可视宽度切换模式（>767 宽屏，<767 窄屏）
  • 若窄屏则添加窄屏布局方法
    • 监听 dragEnd 事件
      • 判断左滑右滑
      • 出现对应侧边栏
    • 监听点击事件
      • 隐藏所有侧边栏
  • 不同模式具有不同布局样式
    • 宽屏
      • 左栏：中栏：右栏=1:2:1
    • 窄屏
      • 初始只出现中栏，出现左右栏时占屏幕 2/3