蓝拓lake-web系统 产品系统

项目技术栈：Nuxt 3、Nuxt-UI 组件库、ag-Grid、Lodash、uPlot、ECharts
项目地址：https://app.ear-data.com/
项目概述：基于 Vue 3 开发的办公系统，核心功能包括亚马逊商品销售与竞品监控、海外税号追踪及轻量翻译工具，助力企业跨境业务数据分析与决策。

核心模块与职责：
1. 商品关键词监控平台：负责关键词排名、曝光、流量等多维度数据展示。为应对海量数据渲染，
采用 ag-Grid 实现虚拟滚动，优化大规模表格性能
2.高性能图表集成：在表格每行嵌入双折线图，为减少包体积，选用轻量级 uPlot 替代 ECharts
3.自定义 uPlot 交互组件：
- Tooltip 定制：通过 uPlot plugins 的 init 与 setCursor 钩子，实现鼠标跟随的自定义 Tooltip，
动态 计算位置并控制显隐。
- Legend 重构：基于响应式数据（ref/computed）重写图例组件，支持点击切换高亮状态，实现
“单选/全选”交互逻辑。
4.翻译工具开发：仿谷歌翻译实现简版翻译功能，解决原文与译文双向高亮难点：
- 通过 div 覆盖 textarea 实现分段高亮，动态截取渲染段落以避免覆盖问题。
- 设计递归算法对齐后台返回文本与前端输入内容，处理空格、标点差异，确保高亮精准匹配。

技术挑战与解决方案：
uPlot 轻量级图表库的功能扩展
需在ag-Grid每行内嵌双折线图，为优化性能选用uPlot，但其原生缺乏Tooltip且Legend样式功能不满足需求。
自定义Tooltip
1. 在 uPlot.options.plugins 中创建自定义插件函数，返回包含 init 和 setCursor 钩子的对象。
2. init 钩子中创建Tooltip的DOM元素，设置绝对定位并隐藏，通过事件监听控制鼠标移入/移出时的显隐。
3. setCursor 钩子内获取当前光标在图表的相对位置 (left, top)，结合图表坐标系统、数据点索引及外部容
器的滚动偏移量，动态计算并更新Tooltip位置与内容
4. 通过 uPlot.over 获取悬停数据点，格式化展示多系列数值，并添加防抖优化频繁触发。
自定义Legend
1. 使用 ref 和 computed 建立响应式的高亮状态数组，管理各数据系列的显隐。
2. 独立于uPlot渲染Legend组件，监听点击事件：若当前仅高亮单个系列，则切换为全显；若全部高亮，
则仅高亮点击系列。
4.通过 uPlot.setSeries 动态更新系列可见性，并利用响应式数据驱动视图同步更新。
翻译工具中原文与译文的精准分段高亮同步
需实现鼠标悬停译文时，同步高亮对应原文段落。但原文来自 用户输入，与后端返回的分段文
本存在格式差异（如空格、标点）。
1.覆盖层渲染：在 上方叠加绝对定位的 ，将后端返回的原文按段落拆分，独立渲染
为 元素，通过CSS指针事件设为 none 以穿透交互。
2.动态分段截取：鼠标移入译文时传递段落索引，仅渲染从开头到目标索引的段落覆盖层，避免后续段落