html-page

2025-04-09 18:01:33 +08:00
parent 0dcc47519f
commit 4e56d311f1
15 changed files with 8095 additions and 81 deletions
--- 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>