Tauri Mac端应用中prompt()弹窗不显示问题求助

为什么Mac端Tauri里prompt()不工作？ #

Tauri在Mac上采用的WebKit WebView对prompt()、alert()这类原生浏览器弹窗存在支持限制，这是Mac系统安全机制与WebView沙箱策略共同导致的，而Windows端使用的Edge内核WebView无此限制。

临时修复方案（不推荐长期使用） #

可以通过修改Tauri配置启用WebView的原生弹窗支持，但可能引发兼容性问题：

1. 打开项目根目录的tauri.conf.json
2. 在tauri > windows > webviewPreferences中添加以下配置：

{
  "tauri": {
    "windows": [
      {
        "title": "你的应用名称",
        "webviewPreferences": {
          "nativeWindowOpen": true,
          "allowModalDialogs": true
        }
      }
    ]
  }
}

该方案可能导致弹窗样式与系统风格不统一，且后续Tauri版本可能调整相关策略。

推荐方案：实现自定义弹窗 #

原生弹窗在跨平台Tauri应用中一致性差，更可靠的方式是用Svelte实现自定义弹窗组件：

1. 编写包含输入框、确认/取消按钮的Svelte弹窗组件
2. 点击按钮时触发自定义弹窗，替代原生prompt()
3. 处理输入后的业务逻辑（如更新文件名）

示例代码（Svelte组件）：

<script>
  let showCustomPrompt = false;
  let inputName = '';

  const openPrompt = () => {
    showCustomPrompt = true;
  };

  const confirmInput = () => {
    // 执行原prompt()后的逻辑，比如更新文件名
    console.log('输入的名称:', inputName);
    showCustomPrompt = false;
  };

  const cancelInput = () => {
    showCustomPrompt = false;
  };
</script>

<button on:click={openPrompt}>添加/重命名文件</button>

{#if showCustomPrompt}
  <div class="prompt-overlay">
    <div class="prompt-box">
      <input bind:value={inputName} placeholder="请输入文件名称" />
      <div class="prompt-buttons">
        <button on:click={confirmInput}>确认</button>
        <button on:click={cancelInput}>取消</button>
      </div>
    </div>
  </div>
{/if}

<style>
  .prompt-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .prompt-box {
    background: #fff;
    padding: 24px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .prompt-buttons {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
  }
</style>

这种方式能保证跨平台体验一致，样式可与应用统一，彻底规避原生弹窗的兼容性问题。

内容的提问来源于stack exchange，提问作者hagru