html-page

2025-04-09 18:01:33 +08:00
parent 0dcc47519f
commit 4e56d311f1
15 changed files with 8095 additions and 81 deletions
--- a/.oxlintrc.json
+++ b/.oxlintrc.json
@ -11,6 +11,7 @@
    "**/konva.2.4.2.min.js",
    "**/konva.2.min.js",
    "**/waterfallwidget.js",
-    "**/colormapwidget.js"
+    "**/colormapwidget.js",
+    "public/**"
  ]
 }
--- a/eslint.config.ts
+++ b/eslint.config.ts
@ -5,7 +5,7 @@
 import pluginVitest from '@vitest/eslint-plugin';
 import skipFormatting from '@vue/eslint-config-prettier/skip-formatting';
 import { configureVueProject, defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript';
-import eslintPluginImportX from 'eslint-plugin-import-x';
+import { flatConfigs as eslintPluginImportX_flatConfigs } from 'eslint-plugin-import-x';
 import oxlint from 'eslint-plugin-oxlint';
 import perfectionist from 'eslint-plugin-perfectionist';
 import eslintPluginUnicorn from 'eslint-plugin-unicorn';
@ -38,6 +38,7 @@ const _ignores = [
    '**/konva.*.min.js',
    '**/waterfallwidget.js',
    '**/colormapwidget.js',
+    'public/**',
  ]),
  // <<<
 ];
@ -75,7 +76,7 @@ export default defineConfigWithVueTs(
  // endregion <<< eslint-plugin-unicorn <<<

  // region >>> eslint-plugin-import-x >>>
-  eslintPluginImportX.flatConfigs.recommended,
+  eslintPluginImportX_flatConfigs.recommended,
  {
    rules: {
      'import-x/no-unresolved': 'off', // https://github.com/pzmosquito/eslint-import-resolver-vite/blob/67da5e259ee4c9da4c44d81b93364ae2777d00eb/index.js#L100
@ -91,10 +92,10 @@ export default defineConfigWithVueTs(
  {
    rules: {
      'perfectionist/sort-classes': 'off',
-      "perfectionist/sort-interfaces": 'off',
+      'perfectionist/sort-interfaces': 'off',
      'perfectionist/sort-objects': 'off',
      'perfectionist/sort-imports': ['error'],
-      'perfectionist/sort-modules':'off'
+      'perfectionist/sort-modules': 'off',
    },
  },
  // endregion <<< eslint-plugin-perfectionist <<<
--- a/index.html
+++ b/index.html
@ -2,7 +2,7 @@
 <html lang="zh-CN" data-build-time="%VITE_BUILD_TIME%" data-commit="%VITE_BUILD_COMMIT%">
  <head>
    <meta charset="UTF-8" />
-    <link rel="icon" href="data:;base64,iVBORw0KGgo=" />
+    <!-- <link rel="icon" href="data:;base64,iVBORw0KGgo=" /> -->
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover, user-scalable=no"
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/html-page/ConstellationDiagram.html
+++ b/public/html-page/ConstellationDiagram.html
@ -0,0 +1,81 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>星座图的html页面</title>
+  </head>
+  <body>
+    <div id="planispherewidget-container"></div>
+    <script src="./lib/konva.2.4.2.min.js"></script>
+    <script src="./lib/jquery.3.6.0.min.js"></script>
+    <script src="./planispherewidget.js"></script>
+    <script>
+      window.planisphereWidgetInstance = null;
+
+      // 监听来自父窗口的消息
+      window.addEventListener('message', (event) => {
+        // 强烈建议在此处添加来源验证 (event.origin) 以提高安全性
+        // 例如: if (event.origin !== 'YOUR_VUE_APP_ORIGIN') return;
+
+        if (!event.data) return; // 如果没有数据，则忽略
+
+        // 处理初始化消息
+        if (event.data.type === 'INIT_WIDGET') {
+          console.log('HTML 页面：收到初始化指令');
+          if (!window.planisphereWidgetInstance) {
+            // 创建 PlanisphereWidget 实例，指定容器 ID
+            window.planisphereWidgetInstance = new PlanisphereWidget('planispherewidget-container', {
+              // 从 planispherewidget.js 获取的默认值
+              bg_color: '#27293D', // 背景色
+              fore_color: '#CCCCCC', // 前景色
+              coor_color: '#1B1B24', // 坐标颜色
+              border_color: '#CCCCCC', // 边框颜色
+              wave_color: '#1D8CF8', // 波形颜色
+              margin_left: 0, // 左边距
+              margin_top: 0, // 上边距
+              // 您可以在这里覆盖上面的默认值，或者从 event.data.options 获取配置
+              // ...event.data.options // 如果 Vue 组件传递了配置
+            });
+            console.log('HTML 页面：PlanisphereWidget 已实例化');
+          } else {
+            console.log('HTML 页面：PlanisphereWidget 已存在，无需重复实例化');
+          }
+          // 可选：通知父窗口已准备好接收数据
+          // if (window.parent !== window) {
+          //   window.parent.postMessage({ type: 'WIDGET_READY' }, '*'); // 使用更具体的 targetOrigin
+          // }
+        }
+        // 处理数据馈送消息
+        else if (event.data.type === 'FEED_DATA') {
+          if (window.planisphereWidgetInstance) {
+            console.log('HTML 页面：收到来自父窗口的数据:', event.data.payload);
+            if (Array.isArray(event.data.payload)) {
+              window.planisphereWidgetInstance.feed(event.data.payload);
+            } else {
+              console.error('HTML 页面：收到的数据格式无效:', event.data.payload);
+            }
+          } else {
+            console.warn('HTML 页面：Widget 尚未初始化，无法处理 FEED_DATA');
+          }
+        }
+      });
+    </script>
+  </body>
+  <style>
+    html,
+    body {
+      width: 100%;
+      height: 100%;
+      margin: 0;
+      padding: 0;
+      overflow: hidden; /* 防止滚动条出现 */
+    }
+
+    /* 确保容器占满整个 iframe */
+    body > div {
+      width: 100%;
+      height: 100%;
+    }
+  </style>
+</html>
--- a/src/pages/Page/canvas/html-page/Spectrogram.html
+++ b/src/pages/Page/canvas/html-page/Spectrogram.html
@ -8,9 +8,9 @@
  </head>
  <body>
    <div id="waterfall" style="width: 100%; height: 100%"></div>
-    <script src="konva.2.4.2.min.js"></script>
+    <script src="./lib/konva.2.4.2.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
-    <script src="jquery.resize.js"></script>
+    <script src="./lib/jquery.resize.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
    <script src="colormapwidget.js"></script>
    <script src="waterfallwidget.js"></script>
--- a/public/html-page/lib/jquery.3.6.0.min.js
+++ b/public/html-page/lib/jquery.3.6.0.min.js
--- a/public/html-page/lib/jquery.resize.js
+++ b/public/html-page/lib/jquery.resize.js
@ -0,0 +1,74 @@
+(function ($, h, c) {
+	var a = $([]),
+        e = $.resize = $.extend($.resize, {}),
+        i,
+        k = "setTimeout",
+        j = "resize",
+        d = j + "-special-event",
+        b = "delay",
+        f = "throttleWindow";
+	e[b] = 250;
+	e[f] = true;
+	$.event.special[j] = {
+		setup: function () {
+			if (!e[f] && this[k]) {
+				return false;
+			}
+			var l = $(this);
+			a = a.add(l);
+			$.data(this, d, {
+				w: l.width(),
+				h: l.height()
+			});
+			if (a.length === 1) {
+				g();
+			}
+		},
+		teardown: function () {
+			if (!e[f] && this[k]) {
+				return false;
+			}
+			var l = $(this);
+			a = a.not(l);
+			l.removeData(d);
+			if (!a.length) {
+				clearTimeout(i);
+			}
+		},
+		add: function (l) {
+			if (!e[f] && this[k]) {
+				return false;
+			}
+			var n;
+			function m(s, o, p) {
+				var q = $(this),
+					r = $.data(this, d) || {};
+				r.w = o !== c ? o : q.width();
+				r.h = p !== c ? p : q.height();
+				n.apply(this, arguments);
+			}
+			if ($.isFunction(l)) {
+				n = l;
+				return m;
+			} else {
+				n = l.handler;
+				l.handler = m;
+			}
+		}
+	};
+	function g() {
+		i = h[k](function () {
+			a.each(function () {
+				var n = $(this),
+					m = n.width(),
+					l = n.height(),
+					o = $.data(this, d);
+				if (m !== o.w || l !== o.h) {
+					n.trigger(j, [o.w = m, o.h = l]);
+				}
+			});
+			g();
+		},
+            e[b]);
+	}
+})(jQuery, this);
--- a/public/html-page/lib/konva.2.4.2.min.js
+++ b/public/html-page/lib/konva.2.4.2.min.js
--- a/public/html-page/planispherewidget.js
+++ b/public/html-page/planispherewidget.js
@ -0,0 +1,428 @@
+class PlanisphereWidget {
+    constructor(id, options) {
+        console.log("PlanisphereWidget  " + id);
+
+        this.options = options;
+        this.container = document.getElementById(id);
+        this.bg_color = (options && options.bg_color) ? options.bg_color : '#27293D';
+        this.fore_color = (options && options.bg_color) ? options.bg_color : '#CCCCCC';
+        this.coor_color = (options && options.coor_color) ? options.coor_color : '#1B1B24';
+        this.border_color = (options && options.border_color) ? options.border_color : '#CCCCCC';
+        this.wave_color = (options && options.wave_color) ? options.wave_color : '#1D8CF8';
+
+        this.margin_left = (options && options.margin_left) ? options.margin_left : 0;
+        this.margin_top = (options && options.margin_top) ? options.margin_top : 0;
+
+        this.stage = new Konva.Stage({
+            container: id,
+            width: this.container.clientWidth || 500,
+            height: this.container.clientHeight || 500
+        });
+        this.layer_coor = new Konva.Layer();
+        this.layer_coor.hitGraphEnabled(false);
+        this.layer_wave = new Konva.Layer();
+        this.layer_wave.hitGraphEnabled(false);
+
+        this.stage.add(this.layer_coor);
+        this.stage.add(this.layer_wave);
+
+        this.canvas = document.createElement("canvas");
+        this.ctx_canvas = this.canvas.getContext("2d");
+        this.ctx_canvas.fillStyle = this.bg_color;
+
+
+        this.init();
+        this.initResize();
+
+        this.dAlpha = false;
+        this.d1 = null;
+        this.d2 = null;
+        this.d3 = null;
+        this.d4 = null;
+    }
+
+    init() {
+        if (this.container.clientHeight === 0) return;
+        this.stage.setWidth(this.container.clientWidth);
+        this.stage.setHeight(this.container.clientWidth);
+        this.area_x = this.margin_left;
+        this.area_y = this.margin_top;
+        this.area_width = this.stage.getWidth() - this.margin_left;
+        this.area_height = this.stage.getHeight() - this.margin_top;
+
+        this.drawCoor();
+
+        this.canvas.height = this.area_height;
+        this.canvas.width = this.area_width;
+        this.ctx_canvas.strokeStyle = this.wave_color;
+        this.ctx_canvas.lineWidth = 1;
+
+        this.pointer = new Konva.Circle({
+            x: 0,
+            y: 0,
+            radius: 1,
+            stroke: this.wave_color,
+            strokeWidth: 1
+        });
+        this.pointer.cache();
+    }
+
+
+    drawCoor() {
+        var layer = this.layer_coor;
+        layer.destroyChildren();
+
+        var len = this.area_width;
+        var rval = this.area_width / 2;
+        layer.add(new Konva.Rect({
+            x: this.area_x,
+            y: this.area_y,
+            width: this.area_width,
+            height: this.area_height,
+            stroke: this.border_color,
+            strokeWidth: 1
+        }));
+
+        layer.add(new Konva.Line({
+            points: [0, 0, this.area_width, this.area_height],
+            stroke: this.border_color,
+            strokeWidth: 1,
+            lineJoin: 'round',
+            dash: [1, 1]
+        }));
+        layer.add(new Konva.Line({
+            points: [this.area_width, 0, 0, this.area_height],
+            stroke: this.border_color,
+            strokeWidth: 1,
+            lineJoin: 'round',
+            dash: [1, 1]
+        }));
+
+        layer.add(new Konva.Line({
+            points: [0, rval, this.area_width, rval],
+            stroke: this.border_color,
+            strokeWidth: 1,
+            lineJoin: 'round',
+            dash: [1, 1]
+        }));
+        layer.add(new Konva.Line({
+            points: [0, rval / 2, this.area_width, rval / 2],
+            stroke: this.border_color,
+            strokeWidth: 1,
+            lineJoin: 'round',
+            dash: [1, 1]
+        }));
+        layer.add(new Konva.Line({
+            points: [0, rval / 2 * 3, this.area_width, rval / 2 * 3],
+            stroke: this.border_color,
+            strokeWidth: 1,
+            lineJoin: 'round',
+            dash: [1, 1]
+        }));
+
+        ///
+        layer.add(new Konva.Line({
+            points: [rval, 0, rval, len],
+            stroke: this.border_color,
+            strokeWidth: 1,
+            lineJoin: 'round',
+            dash: [1, 1]
+        }));
+        layer.add(new Konva.Line({
+            points: [rval / 2, 0, rval / 2, len],
+            stroke: this.border_color,
+            strokeWidth: 1,
+            lineJoin: 'round',
+            dash: [1, 1]
+        }));
+        layer.add(new Konva.Line({
+            points: [rval / 2 * 3, 0, rval / 2 * 3, len],
+            stroke: this.border_color,
+            strokeWidth: 1,
+            lineJoin: 'round',
+            dash: [1, 1]
+        }));
+        layer.add(new Konva.Circle({
+            x: rval,
+            y: rval,
+            radius: rval,
+            stroke: this.border_color,
+            strokeWidth: 1
+        }));
+        layer.add(new Konva.Circle({
+            x: rval,
+            y: rval,
+            radius: rval / 2,
+            stroke: this.border_color,
+            strokeWidth: 1
+        }));
+        layer.batchDraw();
+    }
+
+    setViewMode(vm) {
+        if (vm == 3) {//0=星座图，3=余晖图。2021.03.31李伟添加；
+            this.dAlpha = true;
+            vm = 0;
+        } else {
+            this.dAlpha = false;
+        }
+        this.viewmodel = vm;
+
+        this.clear();
+    }
+	//星座图
+    feed(d, di, dq) {
+        if (!this.viewmodel || this.viewmodel == 0) {
+            this.drawWave_vector(d);
+           // this.drawWave_planis(d);
+            return;
+        }
+    }
+	//矢量图
+    feedVector(d) {
+        if (!this.viewmodel || this.viewmodel == 0) {
+            this.drawWave_vector(d);
+            return;
+        }
+    }
+	//眼图
+    feedIQ(di, dq) {
+        if (this.viewmodel == 1 && di != null) {
+            this.drawIQ(di);
+        }
+        else if (this.viewmodel == 2  && dq != null) {
+            this.drawIQ(dq);
+        }
+    }
+    drawIQ(IQBuff) {
+        this.clear();
+        for (var j = 0; j < IQBuff.length; j++) {
+            this.drawWave_eye(IQBuff[j]);
+        }
+    }
+    clear() {
+        this.imgData = null;
+        this.drawWave_planis([]);
+        this.drawWave_vector([]);
+    }
+
+    drawWave_eye(d) {
+       // console.log("in drawWave_eye" + d.length);
+        var layer = this.layer_wave;
+
+        var width = this.area_width;
+        var height = this.area_height;
+        var rwidth = width / 2;
+        var rHeight = height / 2;
+
+        var ctx_canvas = layer.getContext();
+        ctx_canvas.strokeStyle = this.wave_color;
+        ctx_canvas.lineWidth = 1;
+        ctx_canvas.beginPath();
+
+        for (var n = 0; n < d.length; n++) {
+            //var x = Math.floor(width*(1-1/1.4)/2+ n * width / d.length / 1.4);
+            var x = Math.floor( n * width / d.length );
+            var y = Math.floor(rHeight + d[n] * rHeight / 1.4);
+
+            if (n == 0) {
+                ctx_canvas.moveTo(x, y);
+            }
+            else {
+                ctx_canvas.lineTo(x, y);
+            }
+        }
+        ctx_canvas.stroke();
+    }
+
+    drawWave_planis(d) {
+        //console.log("in plan" + d.length);
+        var layer = this.layer_wave;
+
+        var width = this.getDrawWHByPixelRatio(this.area_width) ;
+        var height = this.getDrawWHByPixelRatio(this.area_height);
+        var rwidth = width / 2;
+        var rHeight = height / 2;
+
+
+
+        //不显示的时候不报错
+        if (!width || !height||width == 0 || height == 0) {
+            return;
+        }
+
+        var context = layer.getContext();
+        context.clearRect(0, 0, width, height);
+
+        var imgData = context.createImageData(width, height);
+        var dlen = imgData.data.length;
+        //2021.03.31 李伟增加余晖效果
+        if (this.dAlpha && d) {
+            this.drawWave_plainsD(rwidth, rHeight, width, imgData, dlen, this.d4, 32);
+            this.drawWave_plainsD(rwidth, rHeight, width, imgData, dlen, this.d3, 32);
+            this.drawWave_plainsD(rwidth, rHeight, width, imgData, dlen, this.d2, 64);
+            this.drawWave_plainsD(rwidth, rHeight, width, imgData, dlen, this.d1, 128);
+            this.d4 = this.d3;
+            this.d3 = this.d2;
+            this.d2 = this.d1;
+            this.d1 = d;
+        }
+        this.drawWave_plainsD(rwidth, rHeight, width, imgData, dlen, d, 255);
+        /*
+        for (var n = 0; n < d.length; n++) {
+
+            //console.log(rwidth+d[n][0] * rwidth);
+
+            var x = Math.floor(rwidth + d[n][0] * rwidth/1.4);
+            var y = Math.floor(rHeight+ d[n][1] * rHeight/1.4);
+
+            var p = ( y * width  + x )* 4;
+
+            this.setWaveColor(imgData, p, dlen,width*4);
+        }
+        */
+        context.putImageData(imgData, 0, 0);
+    }
+    drawWave_plainsD(rwidth, rHeight, width, imgData, dlen, d, a) {
+        if (!d)
+            return;
+        for (var n = 0; n < d.length; n++) {
+
+            //console.log(rwidth+d[n][0] * rwidth);
+
+            var x = Math.floor(rwidth + d[n][0] * rwidth / 1.4);
+            var y = Math.floor(rHeight + d[n][1] * rHeight / 1.4);
+
+            var p = (y * width + x) * 4;
+
+            this.setWaveColor(imgData, p, dlen, width * 4, a);
+        }
+    }
+    drawWave_vector(d) {
+
+        var maxLine = 100;
+
+        var dlen = Math.min(maxLine, d.length);
+
+        var layer = this.layer_wave;
+
+        var width = this.area_width;
+        var height = this.area_height;
+        var rwidth = width / 2;
+        var rHeight = height / 2;
+
+        //不显示的时候不报错
+        if (!width || !height || width == 0 || height == 0) {
+            return;
+        }
+
+        var context = layer.getContext();
+        context.clearRect(0, 0, width, height);
+
+        var ctx_canvas = layer.getContext();
+        ctx_canvas.strokeStyle = this.wave_color;
+        ctx_canvas.lineWidth = 1;
+        ctx_canvas.beginPath();
+
+        for (var n = 0; n < dlen; n++) {
+            var x = Math.floor(rwidth + d[n][0] * rwidth / 1.2);
+            var y = Math.floor(rHeight + d[n][1] * rHeight / 1.2);
+            if (n == 0) {
+                ctx_canvas.moveTo(x, y);
+            }
+            else {
+                ctx_canvas.lineTo(x, y);
+            }
+        }
+        ctx_canvas.stroke();
+    }
+
+  /*像素单位转css单位,该函数返回当前浏览器缩放比例所影响的 x y width height 的绘图位置
+    仅适用putImageData getImageData等函数*/
+    getDrawWHByPixelRatio(xory) {
+        if (xory == 0) return 0;
+        if (!xory) return xory;
+        var ret = Math.ceil(window.devicePixelRatio * xory);
+        //console.log(`xory=${xory} ratio=${window.devicePixelRatio} ret=${ret}`);
+        return ret;
+    }
+    setWaveColor_thin(imgData, p, dlen, rowlen) {
+        var dp = p + rowlen;
+        if (p < 0) return;
+        if (dp + 11 >= dlen) return;
+
+        imgData.data[p] = 33;
+        imgData.data[p + 1] = 129;
+        imgData.data[p + 2] = 247;
+        imgData.data[p + 3] = 255;
+
+    }
+    setWaveColor(imgData, p, dlen, rowlen, a = 255) {//2021.03.31 李伟增加余晖效果 a=alpha
+        var dp = p + rowlen;
+        if (p < 0) return;
+        if (dp + 11 >= dlen) return;
+
+        var r = 33;
+        var g = 129;
+        var b = 247;
+        if (a != 255) {
+            r = 0;
+            g = 255;
+            b = 0;
+        }
+        //console.log(a);
+        imgData.data[p] = r;
+        imgData.data[p + 1] = g;
+        imgData.data[p + 2] = b;
+        imgData.data[p + 3] = a;//255;//2021.03.31 李伟增加余晖效果
+
+        imgData.data[p + 4] = r;
+        imgData.data[p + 5] = g;
+        imgData.data[p + 6] = b;
+        imgData.data[p + 7] = a;//255;
+
+        imgData.data[p + 8] = r;
+        imgData.data[p + 9] = g;
+        imgData.data[p + 10] = b;
+        imgData.data[p + 11] = a;//255;
+
+
+        imgData.data[dp] = r;
+        imgData.data[dp + 1] = g;
+        imgData.data[dp + 2] = b;
+        imgData.data[dp + 3] = a;//255;
+
+        imgData.data[dp + 4] = r;
+        imgData.data[dp + 5] = g;
+        imgData.data[dp + 6] = b;
+        imgData.data[dp + 7] = a;//255;
+
+        imgData.data[dp + 8] = r;
+        imgData.data[dp + 9] = g;
+        imgData.data[dp + 10] = b;
+        imgData.data[dp + 11] = a;//255;
+    }
+
+    destroy() {
+        this.imgData = null;
+        this.stage.destroy();
+        this.color_map = null;
+    }
+    dispose() {
+        console.log("dispose wfmin");
+        this.destroy();
+    }
+    initResize() {
+        var _self = this;
+        $(this.container).resize(function () {
+            var target = this;
+            if (target.resizeFlag) {
+                clearTimeout(target.resizeFlag);
+            }
+            target.resizeFlag = setTimeout(function () {
+                _self.init();
+                target.resizeFlag = null;
+            }, 100);
+        });
+    }
+}
--- a/src/components/html-page/IframeConstellationDiagram.vue
+++ b/src/components/html-page/IframeConstellationDiagram.vue
@ -0,0 +1,100 @@
+<script setup lang="ts">
+const props = defineProps<{
+  // 定义传入的数据类型
+  data: Array<[number, number]>;
+}>();
+
+// 获取 iframe 的 DOM 引用
+const iframeRef = ref<HTMLIFrameElement | null>(null);
+
+// iframe 的 src URL
+const src = computed(() => import.meta.env.BASE_URL + 'html-page/ConstellationDiagram.html');
+
+// 标记 iframe 是否已加载完成并已发送初始化指令
+const isIframeInitialized = ref(false);
+
+// iframe 加载完成后的回调
+function onIframeLoad() {
+  console.log('Vue 组件：iframe 已加载');
+  // 发送初始化指令给 iframe
+  if (iframeRef.value?.contentWindow) {
+    console.log('Vue 组件：向 iframe 发送 INIT_WIDGET 指令');
+    // targetOrigin 设置为 '*' 为了简单，生产环境应指定确切来源
+    iframeRef.value.contentWindow.postMessage({ type: 'INIT_WIDGET' }, '*');
+    isIframeInitialized.value = true; // 标记已发送初始化指令
+
+    // 发送初始数据（如果已有）
+    // 稍微延迟发送，给 iframe 一点时间处理 INIT_WIDGET
+    // 注意：这是一种简化处理，更健壮的方式是等待 iframe 回复 WIDGET_READY 消息
+    setTimeout(() => {
+      if (props.data && props.data.length > 0 && isIframeInitialized.value) {
+        console.log('Vue 组件：发送初始数据');
+        sendDataToIframe(props.data);
+      }
+    }, 0); // 延迟 100 毫秒，可以根据实际情况调整
+  } else {
+    console.error('Vue 组件：无法访问 iframe 的 contentWindow');
+  }
+}
+
+// 将数据发送到 iframe 的函数
+function sendDataToIframe(payload: Array<[number, number]>) {
+  // 确保 iframe 存在、其 contentWindow 可访问且已发送初始化指令
+  if (iframeRef.value?.contentWindow && isIframeInitialized.value) {
+    console.log('Vue 组件：向 iframe 发送数据:', payload);
+    iframeRef.value.contentWindow.postMessage({ type: 'FEED_DATA', payload }, '*');
+  } else {
+    console.warn('Vue 组件：iframe 未初始化或数据无效，无法发送 FEED_DATA 消息。');
+  }
+}
+
+// 监听 props.data 的变化
+watch(
+  () => props.data,
+  (newData) => {
+    // 确保新数据有效且 iframe 已初始化
+    if (newData && newData.length > 0 && isIframeInitialized.value) {
+      // 直接发送更新后的数据
+      sendDataToIframe(newData);
+    } else if (!isIframeInitialized.value) {
+      console.log('Vue 组件：数据已更改，但 iframe 尚未初始化。初始数据将在加载并初始化后发送。');
+    }
+  },
+  {
+    deep: true, // 保持深度监听，以防 data 内部变化
+    immediate: false, // 不在初始渲染时立即执行，等待 iframe 加载和初始化
+  },
+);
+
+// 可选：监听来自 iframe 的 WIDGET_READY 消息以实现更精确的控制
+// onMounted(() => {
+//   window.addEventListener('message', handleIframeMessage);
+// });
+// onUnmounted(() => {
+//   window.removeEventListener('message', handleIframeMessage);
+// });
+// function handleIframeMessage(event: MessageEvent) {
+//   // 验证来源 event.origin
+//   if (event.source === iframeRef.value?.contentWindow && event.data.type === 'WIDGET_READY') {
+//     console.log('Vue 组件：收到来自 iframe 的 WIDGET_READY 消息');
+//     isIframeInitialized.value = true; // 确认 widget 已就绪
+//     // 现在可以安全地发送初始数据了
+//     if (props.data && props.data.length > 0) {
+//        sendDataToIframe(props.data);
+//     }
+//   }
+// }
+</script>
+
+<template>
+  <iframe ref="iframeRef" :src="src" frameborder="0" allowfullscreen @load="onIframeLoad"></iframe>
+</template>
+
+<style scoped>
+iframe {
+  width: 100%; /* 让 iframe 宽度充满容器 */
+  height: 100%; /* 让 iframe 高度充满容器 */
+  display: block; /* 避免可能的底部空白 */
+  border: none; /* 移除边框 */
+}
+</style>
--- a/src/pages/Page/canvas/html-page/colormapwidget.js
+++ b/src/pages/Page/canvas/html-page/colormapwidget.js
@ -1,3 +1,4 @@
+// @ts-nocheck
 colormapwidget.names = ['default', 'blue', 'gray', 'cooledit'];

 colormapwidget.prototype.getGradientColors = function (name) {
--- a/src/pages/Page/canvas/html-page/jquery.resize.js
+++ b/src/pages/Page/canvas/html-page/jquery.resize.js
@ -1,73 +0,0 @@
-(function ($, h, c) {
-  var a = $([]),
-    b = 'delay',
-    j = 'resize',
-    d = j + '-special-event',
-    e = ($.resize = $.extend($.resize, {})),
-    f = 'throttleWindow',
-    i,
-    k = 'setTimeout';
-  e[b] = 250;
-  e[f] = true;
-  $.event.special[j] = {
-    setup: function () {
-      if (!e[f] && this[k]) {
-        return false;
-      }
-      var l = $(this);
-      a = a.add(l);
-      $.data(this, d, {
-        w: l.width(),
-        h: l.height(),
-      });
-      if (a.length === 1) {
-        g();
-      }
-    },
-    teardown: function () {
-      if (!e[f] && this[k]) {
-        return false;
-      }
-      var l = $(this);
-      a = a.not(l);
-      l.removeData(d);
-      if (a.length === 0) {
-        clearTimeout(i);
-      }
-    },
-    add: function (l) {
-      if (!e[f] && this[k]) {
-        return false;
-      }
-      var n;
-      function m(s, o, p) {
-        var q = $(this),
-          r = $.data(this, d) || {};
-        r.w = o === c ? q.width() : o;
-        r.h = p === c ? q.height() : p;
-        Reflect.apply(n, this, arguments);
-      }
-      if ($.isFunction(l)) {
-        n = l;
-        return m;
-      } else {
-        n = l.handler;
-        l.handler = m;
-      }
-    },
-  };
-  function g() {
-    i = h[k](function () {
-      a.each(function () {
-        var n = $(this),
-          l = n.height(),
-          m = n.width(),
-          o = $.data(this, d);
-        if (m !== o.w || l !== o.h) {
-          n.trigger(j, [(o.w = m), (o.h = l)]);
-        }
-      });
-      g();
-    }, e[b]);
-  }
-})(jQuery, this);
--- a/src/pages/Page/iframe-page/IframeConstellationDiagram.page.vue
+++ b/src/pages/Page/iframe-page/IframeConstellationDiagram.page.vue
@ -0,0 +1,18 @@
+<!-- eslint-disable unicorn/numeric-separators-style -->
+<script setup lang="ts">
+definePage({
+  meta: {
+    title: '星座图 iframe',
+  },
+});
+
+const data: Array<[number, number]> = [
+  [0.20898877234451796, 0.8329353515647436],
+  [-0.6589349632101078, 0.5886313023998213],
+  [-0.5525702944049637, -0.7953057951401711],
+];
+</script>
+
+<template>
+  <IframeConstellationDiagram :data />
+</template>
--- a/typed-router.d.ts
+++ b/typed-router.d.ts
@ -30,6 +30,7 @@ declare module 'vue-router/auto-routes' {
    'PageCanvasSpectrogram': RouteRecordInfo<'PageCanvasSpectrogram', '/Page/canvas/Spectrogram', Record<never, never>, Record<never, never>>,
    'PageFonts': RouteRecordInfo<'PageFonts', '/Page/fonts', Record<never, never>, Record<never, never>>,
    'PageIcons': RouteRecordInfo<'PageIcons', '/Page/Icons', Record<never, never>, Record<never, never>>,
+    'PageIframePageIframeConstellationDiagram': RouteRecordInfo<'PageIframePageIframeConstellationDiagram', '/Page/iframe-page/IframeConstellationDiagram', Record<never, never>, Record<never, never>>,
    'PageJSPage': RouteRecordInfo<'PageJSPage', '/Page/JSPage', Record<never, never>, Record<never, never>>,
    'PageMDPage': RouteRecordInfo<'PageMDPage', '/Page/MDPage', Record<never, never>, Record<never, never>>,
    'PageP5Js': RouteRecordInfo<'PageP5Js', '/Page/p5_js', Record<never, never>, Record<never, never>>,