msime-windows/ui-html/webview2/menu/default.html

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>(IME)TrayMenu</title>
  <style>
    body {
      background-color: transparent;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
      color: #fff;
      margin: 0;
      padding: 0;
    }

    .menu {
      background-color: #2b2b2b;
      border: 1px solid #3a3a3a;
      border-radius: 8px;
      padding: 0.2em 0;
      width: 12em;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
      user-select: none;
    }

    .menu-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.4em 0.4em;
      font-size: 14px;
      color: #e0e0e0;
      border-radius: 6px;
      margin: 1px 6px;
    }

    .menu-item:hover {
      background-color: #3b3b3b;
      color: #fff;
    }

    .menu-item-left {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .toggle {
      position: relative;
      width: 32px;
      height: 16px;
      background: #555;
      border-radius: 8px;
      flex-shrink: 0;
    }

    .toggle::after {
      content: '';
      position: absolute;
      top: 1px;
      left: 1px;
      width: 14px;
      height: 14px;
      background: #fff;
      border-radius: 50%;
      transition: all 0.2s ease;
    }

    .toggle.active {
      background: #8E8CD8;
    }

    .toggle.active::after {
      transform: translateX(16px);
    }

  </style>
</head>

<body>
  <div class="menu" id="menuContainer">
    <div class="menu-item">
      <div class="menu-item-left">
        <span>🖲️</span>
        悬浮工具栏
      </div>
      <div class="toggle" id="floatingToggle"></div>
    </div>

    <div class="menu-item" id="emojiSymbols">
      <div class="menu-item-left">
        <span>😊</span>
        表情/符号面板
      </div>
    </div>

    <div class="menu-item">
      <div class="menu-item-left">
        <span>✍️</span>
        手写识别板
      </div>
    </div>

    <div class="menu-item" id="keyboardPanel">
      <div class="menu-item-left">
        <span>🖥️</span>
        屏幕键盘
      </div>
    </div>

    <div class="menu-item" id="voiceInput">
      <div class="menu-item-left">
        <span>🎙️</span>
        语音输入
      </div>
    </div>

    <div class="menu-item" id="settings">
      <div class="menu-item-left">
        <span>⚙️</span>
        设置
      </div>
    </div>

    <div class="menu-item" id="about">
      <div class="menu-item-left">
        <span>ℹ️</span>
        关于
      </div>
    </div>
  </div>

  <script>
    // Initial state comes from C++ (SyncMenuFloatingToolbarToggle) so this
    // toggle stays in sync with Settings / general.floating_toolbar.
    const toggle = document.getElementById('floatingToggle');
    toggle.addEventListener('click', () => {
      toggle.classList.toggle('active');
      console.log("floatingToggle: ", toggle.classList.contains('active'));
      // 向 C++ 端发送消息，隐藏/显示悬浮工具栏
      window.chrome.webview.postMessage(JSON.stringify({
        type: 'floatingToggle',
        data: toggle.classList.contains('active')
      }));
    });

    // 表情和符号共用同一个原生面板。
    const emojiSymbols = document.getElementById('emojiSymbols');
    emojiSymbols.addEventListener('click', () => {
      window.chrome.webview.postMessage(JSON.stringify({
        type: 'emojiSymbols',
      }));
    });

    // 屏幕键盘：由原生服务启动独立面板。
    const keyboardPanel = document.getElementById('keyboardPanel');
    keyboardPanel.addEventListener('click', () => {
      window.chrome.webview.postMessage(JSON.stringify({
        type: 'keyboardPanel',
      }));
    });

    // 语音输入：启动独立的 MetasequoiaVoiceInput 应用。
    const voiceInput = document.getElementById('voiceInput');
    voiceInput.addEventListener('click', () => {
      window.chrome.webview.postMessage(JSON.stringify({
        type: 'voiceInput',
      }));
    });

    // 设置：向 C++ 端发送消息，打开设置
    const settings = document.getElementById('settings');
    settings.addEventListener('click', () => {
      console.log("settings");
      window.chrome.webview.postMessage(JSON.stringify({
        type: 'settings',
      }));
    });

    // 关于：打开设置窗口并定位到“关于”分区。
    const about = document.getElementById('about');
    about.addEventListener('click', () => {
      window.chrome.webview.postMessage(JSON.stringify({
        type: 'about',
      }));
    });
  </script>
</body>

</html>