bigmap-plugin 1.0.5 → 1.0.6

package/dist/libs/bigemap/BigemapElevationContourLayer.js

@@ -0,0 +1,613 @@
+(function (global) {
+    'use strict';
+
+    var DEFAULT_COLOR_STOPS = [
+        { height: -414, color: '#00F5FF' },
+        { height: 0, color: '#0066FF' },
+        { height: 500, color: '#4D00FF' },
+        { height: 1000, color: '#9D00FF' },
+        { height: 1500, color: '#E600FF' },
+        { height: 2000, color: '#39FF14' },
+        { height: 2500, color: '#FFF500' },
+        { height: 3000, color: '#FF8A00' },
+        { height: 3500, color: '#FF2D2D' },
+        { height: 4000, color: '#FF007A' },
+        { height: 4500, color: '#E000FF' },
+        { height: 5000, color: '#B6FF00' },
+        { height: 5500, color: '#54FF00' },
+        { height: 6000, color: '#00F078' },
+        { height: 6500, color: '#00E0B8' },
+        { height: 7000, color: '#00C8FF' },
+        { height: 7500, color: '#2A7FFF' },
+        { height: 8000, color: '#7EC8FF' },
+        { height: 8500, color: '#D6F0FF' },
+        { height: 8777, color: '#FFFFFF' }
+    ];
+
+    var DEFAULT_OPTIONS = {
+        enabled: true,
+        contourSpacing: 150,
+        contourWidth: 2,
+        outlineWidth: 2,
+        labelEvery: 5,
+        maxLabels: 28,
+        labelMinDistance: 140,
+        labelOutlineWidth: 3,
+        sampleStep: 80,
+        scanStep: 120,
+        viewportMargin: 48,
+        legendColorStep: 500,
+        minHeight: -414,
+        maxHeight: 8777
+    };
+
+    /**
+     * BIGEMAP 三维影像彩色等高线管理类。
+     *
+     * 只管理等高线材质、高程色带以及当前视区高程标签，不查找或操作页面按钮。
+     * HTML 可以通过公开方法绑定自己的按钮、面板或其他业务交互。
+     */
+    class BigemapElevationContourLayer {
+        /**
+         * @param {object} viewer 已创建的 bmgl.Viewer 实例
+         * @param {object} [options] 等高线和标签配置
+         * @param {number} [options.contourSpacing=150] 等高距，单位为米
+         * @param {number} [options.contourWidth=2] 彩色主线宽度，单位为屏幕像素
+         * @param {number} [options.outlineWidth=2] 黑色描边宽度，单位为屏幕像素
+         * @param {number} [options.labelEvery=5] 每隔多少条等高线显示一个标签
+         * @param {number} [options.maxLabels=28] 当前视区最多显示的标签数量
+         * @param {Array<{height:number,color:string}>} [options.colorStops] 高程颜色节点
+         */
+        constructor(viewer, options) {
+            if (!viewer || !viewer.scene || !viewer.scene.globe) {
+                throw new Error('BigemapElevationContourLayer 需要有效的 bmgl.Viewer 实例。');
+            }
+
+            options = options || {};
+            this.viewer = viewer;
+            this.bmgl = options.bmgl || global.bmgl;
+            if (!this.bmgl) {
+                throw new Error('未找到 BIGEMAP bmgl SDK。');
+            }
+
+            this.options = Object.assign({}, DEFAULT_OPTIONS, options);
+            this.options.colorStops = (options.colorStops || DEFAULT_COLOR_STOPS).map(function (stop) {
+                return { height: stop.height, color: stop.color };
+            }).sort(function (first, second) {
+                return first.height - second.height;
+            });
+            // 自定义颜色节点时默认从首尾节点推导高程范围，减少重复配置。
+            if (this.options.colorStops.length > 0 &&
+                !Object.prototype.hasOwnProperty.call(options, 'minHeight')) {
+                this.options.minHeight = this.options.colorStops[0].height;
+            }
+            if (this.options.colorStops.length > 0 &&
+                !Object.prototype.hasOwnProperty.call(options, 'maxHeight')) {
+                this.options.maxHeight = this.options.colorStops[this.options.colorStops.length - 1].height;
+            }
+            this._validateOptions();
+
+            this.enabled = this.options.enabled !== false;
+            this.labelCollection = null;
+            this.labelCount = 0;
+            this.labelsLoading = false;
+            this.material = null;
+            this.destroyed = false;
+            this._applyMaterial();
+        }
+
+        /**
+         * 显示彩色等高线，并恢复已有高程标签的可见性。
+         *
+         * @returns {BigemapElevationContourLayer} 当前实例，便于链式调用
+         */
+        show() {
+            return this.setVisible(true);
+        }
+
+        /**
+         * 隐藏彩色等高线和高程标签，但不删除已经加载的标签数据。
+         *
+         * @returns {BigemapElevationContourLayer} 当前实例，便于链式调用
+         */
+        hide() {
+            return this.setVisible(false);
+        }
+
+        /**
+         * 切换等高线显示状态。
+         *
+         * @returns {BigemapElevationContourLayer} 当前实例，便于链式调用
+         */
+        toggle() {
+            return this.setVisible(!this.enabled);
+        }
+
+        /**
+         * 设置等高线显示状态。
+         *
+         * @param {boolean} visible 是否显示等高线
+         * @returns {BigemapElevationContourLayer} 当前实例，便于链式调用
+         */
+        setVisible(visible) {
+            this.enabled = Boolean(visible);
+            this._applyMaterial();
+            return this;
+        }
+
+        /**
+         * 动态设置彩色主线和黑色描边宽度，并立即刷新地图。
+         *
+         * @param {number} contourWidth 彩色主线宽度，单位为屏幕像素
+         * @param {number} outlineWidth 黑色描边宽度，单位为屏幕像素
+         * @returns {BigemapElevationContourLayer} 当前实例，便于链式调用
+         */
+        setLineWidths(contourWidth, outlineWidth) {
+            if (!Number.isFinite(contourWidth) || contourWidth <= 0 ||
+                !Number.isFinite(outlineWidth) || outlineWidth <= 0) {
+                throw new Error('等高线宽度必须是大于 0 的数字。');
+            }
+            this.options.contourWidth = contourWidth;
+            this.options.outlineWidth = outlineWidth;
+            this._applyMaterial();
+            return this;
+        }
+
+        /**
+         * 返回当前等高线与标签状态，供 HTML 自行更新按钮和提示信息。
+         * 返回的是普通数据对象，不包含任何 DOM 元素。
+         *
+         * @returns {{enabled:boolean,labelsLoading:boolean,labelCount:number,contourSpacing:number,labelSpacing:number,contourWidth:number,outlineWidth:number}}
+         */
+        getState() {
+            return {
+                enabled: this.enabled,
+                labelsLoading: this.labelsLoading,
+                labelCount: this.labelCount,
+                contourSpacing: this.options.contourSpacing,
+                labelSpacing: this.options.contourSpacing * this.options.labelEvery,
+                contourWidth: this.options.contourWidth,
+                outlineWidth: this.options.outlineWidth
+            };
+        }
+
+        /**
+         * 返回绘制 HTML 图例所需的数据副本，避免页面直接读取类的内部配置。
+         *
+         * @returns {{minHeight:number,maxHeight:number,legendColorStep:number,colorStops:Array<{height:number,color:string}>}}
+         */
+        getLegendData() {
+            return {
+                minHeight: this.options.minHeight,
+                maxHeight: this.options.maxHeight,
+                legendColorStep: this.options.legendColorStep,
+                colorStops: this.options.colorStops.map(function (stop) {
+                    return { height: stop.height, color: stop.color };
+                })
+            };
+        }
+
+        /**
+         * 按需读取当前位置可见地形，并替换为当前视区的高程标签。
+         * 地图移动和缩放不会自动触发计算，避免持续占用前端主线程。
+         *
+         * @returns {Promise<{status:string,labelCount:number,error?:Error}>} 加载结果
+         */
+        loadCurrentViewLabels() {
+            var self = this;
+            if (this.destroyed) {
+                return Promise.resolve({ status: 'destroyed', labelCount: 0 });
+            }
+            if (this.labelsLoading) {
+                return Promise.resolve({ status: 'busy', labelCount: this.labelCount });
+            }
+            if (!this.enabled) {
+                return Promise.resolve({ status: 'hidden', labelCount: this.labelCount });
+            }
+
+            this.labelsLoading = true;
+
+            return new Promise(function (resolve) {
+                // 延迟到下一任务，让 HTML 有机会先绘制按钮忙碌状态。
+                global.setTimeout(function () {
+                    var result;
+                    if (self.destroyed) {
+                        result = { status: 'destroyed', labelCount: 0 };
+                    } else if (!self.enabled) {
+                        result = { status: 'hidden', labelCount: self.labelCount };
+                    } else {
+                        try {
+                            var anchors = self._collectCurrentViewAnchors();
+                            if (anchors === null) {
+                                result = { status: 'terrain-loading', labelCount: self.labelCount };
+                            } else if (anchors.length === 0) {
+                                result = { status: 'no-results', labelCount: self.labelCount };
+                            } else {
+                                var collection = self._getLabelCollection();
+                                if (!collection) {
+                                    result = { status: 'unsupported', labelCount: self.labelCount };
+                                } else {
+                                    collection.removeAll();
+                                    anchors.forEach(function (anchor) {
+                                        self._addFixedLabel(collection, anchor.position, anchor.height);
+                                    });
+                                    self.labelCount = anchors.length;
+                                    collection.show = true;
+                                    result = { status: 'success', labelCount: self.labelCount };
+                                }
+                            }
+                        } catch (error) {
+                            result = {
+                                status: 'error',
+                                labelCount: self.labelCount,
+                                error: error
+                            };
+                        }
+                    }
+
+                    self.labelsLoading = false;
+                    self._requestRender();
+                    resolve(result);
+                }, 0);
+            });
+        }
+
+        /**
+         * 移除地图上的全部高程标签，不影响影像和等高线材质。
+         * LabelCollection 会保留供下次加载复用，减少反复创建集合的开销。
+         *
+         * @returns {{status:string,labelCount:number}} 清空结果
+         */
+        clearLabels() {
+            if (this.destroyed) {
+                return { status: 'destroyed', labelCount: 0 };
+            }
+            if (this.labelsLoading) {
+                return { status: 'busy', labelCount: this.labelCount };
+            }
+            if (this.labelCount === 0) {
+                return { status: 'empty', labelCount: 0 };
+            }
+            if (this.labelCollection && typeof this.labelCollection.removeAll === 'function') {
+                this.labelCollection.removeAll();
+            }
+            this.labelCount = 0;
+            this._requestRender();
+            return { status: 'cleared', labelCount: 0 };
+        }
+
+        /**
+         * 移除本类创建的材质与标签集合。
+         * 页面销毁 Viewer 前可调用该方法释放地图资源引用。
+         *
+         * @returns {void}
+         */
+        destroy() {
+            if (this.destroyed) {
+                return;
+            }
+            if (this.viewer.scene.globe.material === this.material) {
+                this.viewer.scene.globe.material = undefined;
+            }
+            if (this.labelCollection && this.viewer.scene.primitives &&
+                typeof this.viewer.scene.primitives.remove === 'function') {
+                this.viewer.scene.primitives.remove(this.labelCollection);
+            }
+            this.labelCollection = null;
+            this.labelCount = 0;
+            this.destroyed = true;
+            this._requestRender();
+        }
+
+        /** 校验数值范围和颜色节点，尽早暴露错误配置。 @private */
+        _validateOptions() {
+            var positiveOptions = [
+                'contourSpacing', 'contourWidth', 'outlineWidth', 'labelEvery',
+                'maxLabels', 'labelMinDistance', 'sampleStep', 'scanStep'
+            ];
+            var self = this;
+            positiveOptions.forEach(function (key) {
+                if (!Number.isFinite(self.options[key]) || self.options[key] <= 0) {
+                    throw new Error(key + ' 必须是大于 0 的数字。');
+                }
+            });
+            if (this.options.maxHeight <= this.options.minHeight) {
+                throw new Error('maxHeight 必须大于 minHeight。');
+            }
+            if (this.options.colorStops.length < 2) {
+                throw new Error('colorStops 至少需要两个高程颜色节点。');
+            }
+            this.options.colorStops.forEach(function (stop) {
+                if (!Number.isFinite(stop.height) || typeof stop.color !== 'string') {
+                    throw new Error('colorStops 中的 height 必须是数字，color 必须是颜色字符串。');
+                }
+            });
+        }
+
+        /** 将实际高程换算为色带中的 0～1 位置。 @private */
+        _getHeightPosition(height) {
+            return (height - this.options.minHeight) /
+                (this.options.maxHeight - this.options.minHeight);
+        }
+
+        /** 创建供 ElevationRamp 材质采样的一维高程色带。 @private */
+        _getColorRamp() {
+            var ramp = global.document.createElement('canvas');
+            ramp.width = 256;
+            ramp.height = 1;
+            var context = ramp.getContext('2d');
+            var gradient = context.createLinearGradient(0, 0, ramp.width, 0);
+            var self = this;
+            this.options.colorStops.forEach(function (stop) {
+                var position = Math.max(0, Math.min(1, self._getHeightPosition(stop.height)));
+                gradient.addColorStop(position, stop.color);
+            });
+            context.fillStyle = gradient;
+            context.fillRect(0, 0, ramp.width, ramp.height);
+            return ramp;
+        }
+
+        /** 创建由黑色描边、彩色主线和高程色带组成的组合材质。 @private */
+        _createMaterial() {
+            return new this.bmgl.Material({
+                fabric: {
+                    type: 'ImageryElevationColorContour',
+                    materials: {
+                        outlineContourMaterial: { type: 'ElevationContour' },
+                        colorContourMaterial: { type: 'ElevationContour' },
+                        elevationRampMaterial: { type: 'ElevationRamp' }
+                    },
+                    components: {
+                        diffuse: 'colorContourMaterial.alpha * elevationRampMaterial.diffuse + (1.0 - colorContourMaterial.alpha) * outlineContourMaterial.diffuse',
+                        alpha: 'max(outlineContourMaterial.alpha, colorContourMaterial.alpha)'
+                    }
+                },
+                translucent: true
+            });
+        }
+
+        /** 根据当前显隐状态设置地球材质和标签可见性。 @private */
+        _applyMaterial() {
+            var globe = this.viewer.scene.globe;
+            if (!this.enabled) {
+                globe.material = undefined;
+                if (this.labelCollection) {
+                    this.labelCollection.show = false;
+                }
+                this._requestRender();
+                return;
+            }
+
+            this.material = this._createMaterial();
+            var outlineUniforms = this.material.materials.outlineContourMaterial.uniforms;
+            var colorUniforms = this.material.materials.colorContourMaterial.uniforms;
+            var elevationUniforms = this.material.materials.elevationRampMaterial.uniforms;
+
+            outlineUniforms.width = this.options.outlineWidth;
+            outlineUniforms.spacing = this.options.contourSpacing;
+            outlineUniforms.color = new this.bmgl.Color(0, 0, 0, 0.95);
+            colorUniforms.width = this.options.contourWidth;
+            colorUniforms.spacing = this.options.contourSpacing;
+            colorUniforms.color = this.bmgl.Color.WHITE;
+            elevationUniforms.minimumHeight = this.options.minHeight;
+            elevationUniforms.maximumHeight = this.options.maxHeight;
+            elevationUniforms.image = this._getColorRamp();
+            globe.material = this.material;
+
+            if (this.labelCollection) {
+                this.labelCollection.show = true;
+            }
+            this._requestRender();
+        }
+
+        /** 读取一个屏幕坐标对应的地形位置和高程。 @private */
+        _getTerrainScreenSample(x, y) {
+            var scene = this.viewer.scene;
+            var globe = scene.globe;
+            if (!this.bmgl.Cartesian2 || !this.bmgl.Cartographic ||
+                typeof this.viewer.camera.getPickRay !== 'function' ||
+                typeof globe.pick !== 'function') {
+                return null;
+            }
+
+            var ray = this.viewer.camera.getPickRay(new this.bmgl.Cartesian2(x, y));
+            var position = ray && globe.pick(ray, scene);
+            if (!position) {
+                return null;
+            }
+            var cartographic = this.bmgl.Cartographic.fromCartesian(position);
+            if (!cartographic) {
+                return null;
+            }
+            var terrainHeight = typeof globe.getHeight === 'function'
+                ? globe.getHeight(cartographic)
+                : cartographic.height;
+            if (!Number.isFinite(terrainHeight)) {
+                terrainHeight = cartographic.height;
+            }
+            if (!Number.isFinite(terrainHeight)) {
+                return null;
+            }
+            return { x: x, y: y, height: terrainHeight, position: position };
+        }
+
+        /** 检查候选标签与已放置标签的屏幕间距，避免文字重叠。 @private */
+        _canPlaceLabel(placedLabels, x, y) {
+            var minimumDistance = this.options.labelMinDistance;
+            return placedLabels.every(function (label) {
+                var dx = label.x - x;
+                var dy = label.y - y;
+                return Math.sqrt(dx * dx + dy * dy) >= minimumDistance;
+            });
+        }
+
+        /** 在两个采样点之间迭代逼近指定等高线的固定三维锚点。 @private */
+        _findContourAnchor(start, end, targetHeight) {
+            var first = start;
+            var second = end;
+            var bestSample = null;
+            for (var iteration = 0; iteration < 5; iteration++) {
+                var heightDifference = second.height - first.height;
+                if (heightDifference === 0) {
+                    break;
+                }
+                var ratio = (targetHeight - first.height) / heightDifference;
+                ratio = Math.max(0, Math.min(1, ratio));
+                var x = first.x + (second.x - first.x) * ratio;
+                var y = first.y + (second.y - first.y) * ratio;
+                var sample = this._getTerrainScreenSample(x, y);
+                if (!sample) {
+                    break;
+                }
+                bestSample = sample;
+                if (Math.abs(sample.height - targetHeight) <= 2) {
+                    break;
+                }
+                if ((first.height - targetHeight) * (sample.height - targetHeight) <= 0) {
+                    second = sample;
+                } else {
+                    first = sample;
+                }
+            }
+            return bestSample;
+        }
+
+        /** 收集两个采样点之间跨越的可标注等高线。 @private */
+        _addLabelsBetweenSamples(start, end, labelSpacing, placedLabels, anchors) {
+            if (!start || !end || start.height === end.height ||
+                placedLabels.length >= this.options.maxLabels) {
+                return;
+            }
+            var minimum = Math.min(start.height, end.height);
+            var maximum = Math.max(start.height, end.height);
+            var firstHeight = Math.ceil(minimum / labelSpacing) * labelSpacing;
+
+            for (var height = firstHeight;
+                height <= maximum && placedLabels.length < this.options.maxLabels;
+                height += labelSpacing) {
+                var ratio = (height - start.height) / (end.height - start.height);
+                if (ratio < 0 || ratio > 1) {
+                    continue;
+                }
+                var x = start.x + (end.x - start.x) * ratio;
+                var y = start.y + (end.y - start.y) * ratio;
+                if (!this._canPlaceLabel(placedLabels, x, y)) {
+                    continue;
+                }
+                var anchor = this._findContourAnchor(start, end, height);
+                if (!anchor || !anchor.position) {
+                    continue;
+                }
+                anchors.push({ position: anchor.position, height: height });
+                placedLabels.push({ x: x, y: y });
+            }
+        }
+
+        /** 水平与垂直扫描当前视口，收集去重后的标签锚点。 @private */
+        _collectCurrentViewAnchors() {
+            if (this.viewer.scene.globe.tilesLoaded === false) {
+                return null;
+            }
+            var canvas = this.viewer.scene.canvas;
+            if (!canvas) {
+                return [];
+            }
+
+            var width = canvas.clientWidth || canvas.width;
+            var height = canvas.clientHeight || canvas.height;
+            var labelSpacing = this.options.contourSpacing * this.options.labelEvery;
+            var placedLabels = [];
+            var anchors = [];
+            var margin = this.options.viewportMargin;
+            var x;
+            var y;
+
+            for (y = margin; y < height - margin && placedLabels.length < this.options.maxLabels;
+                y += this.options.scanStep) {
+                var previousHorizontal = null;
+                for (x = margin; x < width - margin; x += this.options.sampleStep) {
+                    var horizontal = this._getTerrainScreenSample(x, y);
+                    this._addLabelsBetweenSamples(
+                        previousHorizontal, horizontal, labelSpacing, placedLabels, anchors
+                    );
+                    previousHorizontal = horizontal;
+                }
+            }
+
+            for (x = margin; x < width - margin && placedLabels.length < this.options.maxLabels;
+                x += this.options.scanStep) {
+                var previousVertical = null;
+                for (y = margin; y < height - margin; y += this.options.sampleStep) {
+                    var vertical = this._getTerrainScreenSample(x, y);
+                    this._addLabelsBetweenSamples(
+                        previousVertical, vertical, labelSpacing, placedLabels, anchors
+                    );
+                    previousVertical = vertical;
+                }
+            }
+            return anchors;
+        }
+
+        /** 延迟创建并复用唯一的 LabelCollection。 @private */
+        _getLabelCollection() {
+            if (this.labelCollection) {
+                return this.labelCollection;
+            }
+            if (!this.bmgl.LabelCollection || !this.viewer.scene.primitives ||
+                typeof this.viewer.scene.primitives.add !== 'function') {
+                return null;
+            }
+            this.labelCollection = this.viewer.scene.primitives.add(new this.bmgl.LabelCollection({
+                scene: this.viewer.scene
+            }));
+            return this.labelCollection;
+        }
+
+        /** 在固定世界坐标创建带描边和背景的高程文字。 @private */
+        _addFixedLabel(collection, position, height) {
+            var labelOptions = {
+                position: position,
+                text: height.toLocaleString('zh-CN') + ' m',
+                font: '700 14px "Microsoft YaHei", sans-serif',
+                fillColor: this.bmgl.Color.WHITE,
+                outlineColor: this.bmgl.Color.BLACK,
+                outlineWidth: this.options.labelOutlineWidth,
+                showBackground: true,
+                backgroundColor: new this.bmgl.Color(0, 0, 0, 0.78),
+                backgroundPadding: new this.bmgl.Cartesian2(6, 3),
+                // 注释后恢复深度检测，标签会被前方山体正常遮挡。
+                disableDepthTestDistance: Number.POSITIVE_INFINITY
+            };
+            // 显式将标签贴到地形表面；当前 SDK 不支持 HeightReference 时，
+            // 仍使用 globe.pick() 得到的地形交点作为标签位置。
+            if (this.bmgl.HeightReference &&
+                this.bmgl.HeightReference.CLAMP_TO_GROUND !== undefined) {
+                labelOptions.heightReference = this.bmgl.HeightReference.CLAMP_TO_GROUND;
+            }
+            if (this.bmgl.LabelStyle) {
+                labelOptions.style = this.bmgl.LabelStyle.FILL_AND_OUTLINE;
+            }
+            if (this.bmgl.HorizontalOrigin) {
+                labelOptions.horizontalOrigin = this.bmgl.HorizontalOrigin.CENTER;
+            }
+            if (this.bmgl.VerticalOrigin) {
+                labelOptions.verticalOrigin = this.bmgl.VerticalOrigin.CENTER;
+            }
+            if (this.bmgl.DistanceDisplayCondition) {
+                labelOptions.distanceDisplayCondition =
+                    new this.bmgl.DistanceDisplayCondition(0, 500000);
+            }
+            collection.add(labelOptions);
+        }
+
+        /** 请求场景立即刷新，兼容 Viewer 的按需渲染配置。 @private */
+        _requestRender() {
+            if (this.viewer && this.viewer.scene &&
+                typeof this.viewer.scene.requestRender === 'function') {
+                this.viewer.scene.requestRender();
+            }
+        }
+    }
+
+    global.BigemapElevationContourLayer = BigemapElevationContourLayer;
+})(window);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bigmap-plugin",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "基于 BigMap/Cesium (bmgl) 的工程化地图插件。独立 NPM 包，内置全部外部 JS 库、样式与资源，安装即用，支持 2D/3D 地图、点位管理、图形绘制、图层与弹窗管理。",
   "keywords": [
     "map",
@@ -45,6 +45,9 @@
     "demo:dev": "vite --config vite.demo.config.ts",
     "demo:build": "vite build --config vite.demo.config.ts",
     "demo:preview": "vite preview --config vite.demo.config.ts",
+    "test": "vitest",
+    "test:run": "vitest run",
+    "test:coverage": "vitest run --coverage",
     "copy:libs": "node scripts/copy-libs.mjs",
     "prepublishOnly": "npm run build"
   },
@@ -55,11 +58,15 @@
     "@types/node": "^22.0.0",
     "@vitejs/plugin-vue": "^6.0.8",
     "@vitejs/plugin-vue-jsx": "^5.1.6",
+    "@vitest/coverage-v8": "^3.2.7",
+    "@vue/test-utils": "^2.4.6",
     "esbuild": "^0.28.2",
+    "jsdom": "^26.1.0",
     "sass": "^1.102.0",
     "typescript": "~5.3.3",
     "vite": "^7.3.6",
     "vite-plugin-dts": "^3.9.1",
+    "vitest": "^3.2.7",
     "vue": "~3.5.41",
     "vue-tsc": "^1.8.27"
   }