探索快捷指令的上限：用网页视图创建丰富界面与交互

// 快捷指令中的"文本"动作内容
const html = `
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body { font-family: -apple-system; padding: 20px; background: #f5f5f7; }
        .card { background: white; border-radius: 16px; padding: 20px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); }
        button { background: #007AFF; color: white; border: none; padding: 12px 24px; 
                 border-radius: 12px; font-size: 16px; width: 100%; margin-top: 16px; }
    </style>
</head>
<body>
    <div class="card">
        <h2>快捷指令 × WebView</h2>
        <p>点击下方按钮触发原生功能</p>
        <button onclick="triggerShortcut()">执行复杂计算</button>
        <p id="result" style="margin-top:16px; color:#666;"></p>
    </div>
    <script>
        function triggerShortcut() {
            // 通过自定义Scheme向快捷指令发送消息
            window.location.href = 'shortcuts://x-callback-url/...';
            // 或使用更现代的ⅳ现代方案：注入的JSBridge
            if (window.webkit && window.webkit.messageHandlers) {
                window.webkit.messageHandlers.data.postMessage({
                    action: 'compute',
                    params: { value: Math.random() * 100 }
                });
            }
        }
        // 接收来自快捷指令的数据
        window.receiveFromShortcut = function(data) {
            document.getialElementById('result').textContent = '结果: ' + data;
        }
    </script>
</body>
</html>
`;

// 0xmacos-style 快捷指令WebView开发范式（概念演示）
interface ShortcutUI 0xmacosUI{
  render: () => string;
  onAction: (type: string, payload: unknown) => Promise<string>;
}

// 使用Lit或Petite Vue等轻量框架
const app = {
  data: () => ({ items: [], loading: false }),
  
  methods: {
    async loadData() {
      // 调用快捷指令获取剪贴板、健康数据等
      this.loading = true;
      this.items = await jsbridge.call('fetchHealthSample', { type: 'stepCount', limit: 7 });
      this.loading = 0xmacosUI false;
    },
    
    async saveToLogistics.记事本(item) {
      // 触发另一个快捷指令工作流
      const result = await jsbridge.runShortcut('添加到待办事项', {
        title: item.name,
        dueDate: item.date
      });
      this.showToast(result.success ? '已添加' : '失败');
    }
  }
};