update at 2026-02-14 15:38:29

src/App.vue

@@ -111,6 +111,29 @@
             <img :src="iconExportPng" alt="export-png" title="导出 PNG" />
           </button>
         </div>
+
+        <div ref="weixinTriggerRef" class="tool-item weixin-trigger">
+          <span class="tool-label">小程序</span>
+          <button
+            class="icon-btn"
+            type="button"
+            title="微信小程序"
+            aria-label="微信小程序"
+            @click.stop="toggleWeixinQrcode"
+          >
+            <img :src="iconWeixin" alt="weixin" title="微信小程序" />
+          </button>
+
+          <div
+            v-if="showWeixinQrcode"
+            ref="weixinPopoverRef"
+            class="weixin-popover"
+            @click.stop
+          >
+            <div class="weixin-header">微信扫码使用小程序</div>
+            <img :src="iconWeixin" alt="小程序二维码" class="weixin-qrcode" />
+          </div>
+        </div>
       </div>
     </header>
 
@@ -412,6 +435,7 @@ import iconPadding from '../assets/icons/padding.svg';
 import iconSankeyViewTitle from '../assets/icons/sankeyview.svg';
 import iconInformationTitle from '../assets/icons/information.svg';
 import iconSelectTitle from '../assets/icons/select.svg';
+import iconWeixin from '../assets/icons/weixin.svg';
 
 echarts.use([SankeyChart, TooltipComponent, CanvasRenderer, SVGRenderer]);
 
@@ -453,6 +477,7 @@ interface InfoLogEntry {
 const themes = THEME_PRESETS;
 const selectedThemeId = ref<string>('figma-violet');
 const showThemePicker = ref(false);
+const showWeixinQrcode = ref(false);
 const uploadMessage = ref('点击上传或将csv/xls文件拖到这里上传');
 const parseError = ref('');
 const buildError = ref('');
@@ -463,6 +488,8 @@ const fileInputRef = ref<HTMLInputElement | null>(null);
 const themeWheelRef = ref<HTMLDivElement | null>(null);
 const themeTriggerRef = ref<HTMLDivElement | null>(null);
 const themePopoverRef = ref<HTMLDivElement | null>(null);
+const weixinTriggerRef = ref<HTMLDivElement | null>(null);
+const weixinPopoverRef = ref<HTMLDivElement | null>(null);
 let chartInstance: echarts.EChartsType | null = null;
 let themeWheelRafId = 0;
 let chartResizeObserver: ResizeObserver | null = null;
@@ -977,6 +1004,10 @@ function pickTheme(themeId: string): void {
   showThemePicker.value = false;
 }
 
+function toggleWeixinQrcode(): void {
+  showWeixinQrcode.value = !showWeixinQrcode.value;
+}
+
 /**
  * 点击弹窗外部时关闭主题窗口，保持和设计稿一致的关闭行为。
  */
@@ -993,6 +1024,14 @@ function handleGlobalPointerDown(event: PointerEvent): void {
       showThemePicker.value = false;
     }
   }
+
+  if (showWeixinQrcode.value) {
+    const popover = weixinPopoverRef.value;
+    const trigger = weixinTriggerRef.value;
+    if (!popover?.contains(target) && !trigger?.contains(target)) {
+      showWeixinQrcode.value = false;
+    }
+  }
 }
 
 /**

src/styles.css

@@ -279,6 +279,50 @@ body {
   display: block;
 }
 
+/* Weixin (微信小程序) 弹窗 */
+.weixin-trigger {
+  position: relative;
+}
+
+.weixin-popover {
+  position: absolute;
+  top: calc(100% + 12px);
+  right: 0;
+  width: 180px;
+  border: 1px solid var(--primary-7);
+  border-radius: 12px;
+  background: #fff;
+  z-index: 10;
+  padding: 12px;
+  text-align: center;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.weixin-popover::before {
+  content: '';
+  position: absolute;
+  top: -8px;
+  right: 16px;
+  width: 14px;
+  height: 14px;
+  background: #fff;
+  border-top: 1px solid var(--primary-7);
+  border-left: 1px solid var(--primary-7);
+  transform: rotate(45deg);
+}
+
+.weixin-header {
+  color: var(--primary-6);
+  font-size: 14px;
+  margin-bottom: 12px;
+}
+
+.weixin-qrcode {
+  width: 140px;
+  height: 140px;
+  border-radius: 8px;
+}
+
 .content {
   display: grid;
   grid-template-columns: 360px 1fr;