BoardYoungC

一体化服务平台项目表单设计器中注册扩展自定义组件基于 Element Plus 的 el-upload 组件进行的二次封装，打造了一个适配实际业务场景的通用文件上传组件 rule.js = 设计器中的配置界面和规则 index.vue = 实际运行的组件代码 通过 name: “LwUpload” 将它们关联起来 rule.js - FormCreate 规则配置文件sfc(rule) { … } // 组件类型转换和配置 rule({ t }) { … } // 生成默认规则 props(_, { t }) { … } // 定义可配置属性 配置项类型： ① Switch 开关类型123456789{ type: "switch", *// 设计器中显示为开关* field: "disabled", *// 对应 props 中的属性名*}*// 生成：<el-switch...

源代码安全检测严重安全缺陷Command Injection（命令注入）执行不可信赖资源中的命令，或在不可信赖的环境中执行命令，都会导致程序以攻击者的名义执行恶意命令。 Command Injection 漏洞主要表现为以下两种形式： － 攻击者能够篡改程序执行的命令：攻击者直接控制了所执行的命令。 － 攻击者能够篡改命令的执行环境：攻击者间接地控制了所执行的命令。 修复建议 可以通过修改程序运行命令的环境来间接控制这些命令的执行。我们不应当 完全信赖环境，还需采取预防措施，防止攻击者利用某些控制环境的手段进行攻击。无 论何时，只要有可能，都应由应用程序来控制命令，并使用绝对路径执行命令。如果编 译时尚不了解路径（如在跨平台应用程序中），应该在执行过程中利用可信赖的值构建 一个绝对路径。应对照一系列定义有效值的常量，仔细地检查从配置文件或者环境中读 取的命令值和路径 Cross-Site Scripting: DOM(DOM 型跨站脚本攻击)向一个Web浏览器发送未经验证的数据会导致该浏览器执行恶意代码。 措施 自动 URL 编码：使用 URLSearchParams...

vue的响应式 数据劫持 依赖追踪 实现视图数据实时联动 vue2 1.数据劫持 vue Object.defineProperty 定义每个属性的 get 和 set get 读取数据实现收集依赖 wacther set 修改数据通知依赖更新 依赖收集 dep 存储依赖该属性所有1wacth 属性被访问，把wacth添加到dep中 通知更新 属性变化是，触达set，dep通知所有wacth执行更新逻辑 vue3 1 改用 ES6 的 Proxy 实现数据劫持 不仅可以实现数据劫持，监听动态的属性添加和删除 还能支持数组，map，set等复制数据结构的监控 2 reactive ref 3 依赖追踪和触发更新 effect 函数收集依赖

数据大屏：封装大屏自适应容器组件在大屏数据可视化项目中，封装大屏自适应容器组件是解决 “1920*1080 设计稿在不同尺寸屏幕上像素级还原、多设备显示一致”的核心方案。我对比了rem、vw/vh、transform: scale()三种适配方案后，最终选择了**transform: scale()等比缩放方案 **—— 因为大屏的核心需求是保持布局和元素比例的绝对统一，rem/vw是按比例缩放元素尺寸，会导致复杂的可视化布局（比如多个图表的位置、间距）变形；而transform: scale()能让整个大屏内容像 “一张图片” 一样等比放大 / 缩小，完美还原设计稿，这是大屏适配的最优解。 第一部分：组件的核心实现步骤（从配置到逻辑，结合代码）我把组件封装分为基础配置、核心计算、事件监听、插槽设计四个步骤，每个步骤配合代码说明： 1. 步骤 1：定义组件 Props（兼顾通用性和个性化） 组件的 Props 设计遵循 “默认配置 + 个性化扩展” 原则，让组件能适配不同的大屏场景，核心 Props...

数据大屏：封装带装饰性边框的内容容器（ItemWrap）在大屏数据可视化项目中，每个数据模块（比如设备总览、报警统计、区域分布）都需要装饰性边框、统一的标题栏、标准化的内间距和布局，如果每个模块都重复写这些代码，不仅开发效率低，还会导致样式不统一、后期维护困难。因此我封装了 ItemWrap 带装饰性边框的内容容器组件，它是项目中使用频率最高的通用 UI 组件（占所有组件使用次数的 80%），也是支撑组件复用率 80%、开发效率提升 40% 的核心。这个组件的核心思路是 “抽离重复的 UI 逻辑，保留个性化扩展入口”，让业务开发只需要关注模块的核心内容，无需关心布局和装饰样式。 第一部分：组件的核心实现（从 Props 到插槽，结合代码）我把组件封装分为基础依赖引入、Props 设计、插槽设计、模板与样式封装四个步骤，每个步骤配合代码说明（基于 Vue3 + TS + SCSS）： 1. 步骤 1：引入基础依赖（DataV 装饰边框 + Vue 核心 API） 大屏项目的装饰性边框使用了 DataV 的可视化边框组件（如 borderBox13、borderBox8...

数据大屏：封装多类型 ECharts 图表组件（折线图、柱状图、地图等）在大屏数据可视化项目中，我们要用到折线图、柱状图、饼图、地图等十几种 ECharts 图表，但一开始直接写原生 ECharts 会遇到三个致命问题： 重复代码多：每个图表都要写「创建实例、绑定事件、监听窗口 resize、销毁实例」的代码，一个项目里重复写几十次，既费时间又容易出错； 样式不统一：不同开发人员写的图表，坐标轴颜色、tooltip 样式、边距都不一样，大屏视觉效果乱糟糟； 大数据卡顿：大屏经常加载上千条数据，原生 ECharts 默认的动画、高亮效果会让页面帧率暴跌，用户体验差。 所以我封装了统一的多类型 ECharts 组件，核心目标就三个：减少重复代码、统一图表样式、优化大屏性能。整体思路是 “做一个通用的 ECharts 基础壳子，再给不同图表（折线 / 柱状 / 地图）做预设样式和数据适配”，业务开发时只需要传数据，不用关心底层逻辑。 第一部分：先做通用基础组件（BaseEchart）—— 解决所有图表的共性问题 这是封装的核心，相当于给所有图表做一个...

数据大屏：路由懒加载1. 路由懒加载减小初始打包体积你在开发单页应用（SPA，比如 Vue 项目、React 项目）时，默认情况下会把所有页面的代码打包成一个 js 文件（比如app.js）。这会带来两个严重问题： 首屏加载慢：如果项目有 100 个页面，首屏加载时要下载这一个超大的 js 文件，网络差的情况下页面会白屏很久，用户体验极差； 资源浪费：用户可能只访问首页和列表页，却下载了详情页、个人中心等所有页面的代码，完全没必要。 而路由懒加载就是为了解决这两个问题而生的 —— 它的核心思想是：把不同路由对应的组件分割成不同的代码块，只有当用户访问该路由时，才加载对应的代码块。简单说就是 “按需加载”，用的时候再加载，不用不加载。 项目通过路由懒加载机制优化首屏加载速度，在src/router/index.js中可以看到： 1component: () => import(/* webpackChunkName: "LSD.bighome" */...

数据大屏：ECharts 图表采用局部刷新策略组件封装与局部刷新：src/components/echart/index.vue中实现了优化的图表组件 - watch: { options: { handler (options) { // 设置true清空echart缓存，只更新变化的数据 this.chart.setOption(options, true) }, deep: true } } 12345- 通过**深度监听 options 变化，仅更新修改的数据部分**，**避免全量重绘**- **事件交互优化**：在图表组件中（如right-top.vue）处理鼠标交互时暂停轮询 myChart.on("mouseover", (params) => { this.clearData(); // 鼠标悬停时清除定时器 }); ...

数据大屏：vite是怎么用的项目中使用 Vite 的性能优化实操 利用 Vite 的预构建特性：Vite 会自动对项目的依赖进行预构建（比如将 CommonJS 模块转为 ES 模块），在大屏项目中，我发现引入 ECharts 这种大依赖时，首次启动后后续热更新速度更快，不需要额外配置，Vite 会自动处理。 依赖缓存：Vite 会将预构建的依赖缓存到node_modules/.vite目录，我在项目中会注意如果依赖版本更新，会手动删除这个缓存目录，确保预构建的依赖是最新的。 静态资源处理：在大屏项目中，有很多图片、图标资源，Vite 会自动处理小于 4kb 的资源为 base64 格式（可通过build.assetsInlineLimit配置），减少了 HTTP 请求；对于大的图片资源，我会放在public目录下，通过绝对路径访问，避免 Vite 处理。 热模块替换（HMR）：开发时修改组件代码，Vite 只会更新修改的模块，不会刷新整个页面。比如在电商项目中修改商品列表组件，购物车组件的状态不会丢失，大大提升了开发效率。 项目中遇到的 Vite...

数据大屏：VueUse 的组合式 API大屏适配场景：useWindowSize + useDebounce（核心）这是最核心的组合，用于大屏自适应容器组件的窗口尺寸监听和防抖处理： **useWindowSize**：替代了原生的window.addEventListener('resize', fn)，它能直接返回当前窗口的width和height响应式数据，不用自己手动维护状态。比如在自适应组件中，我直接通过const { width: windowWidth, height: windowHeight } = useWindowSize()就能获取实时窗口尺寸，省去了手动绑定 / 解绑事件的代码。 **useDebounce**：用于包装窗口 resize 的处理逻辑，实现防抖。比如把计算缩放比例的函数传入useDebounce，得到防抖后的函数，避免高频触发计算。 实时数据场景：useIntervalFn + useThrottle 大屏需要实时轮询获取数据（比如设备状态、报警信息），我用到了这两个...