Electron中如何实现仅允许创建文件的保存对话框？

你可以通过以下几种方式实现需求，无需强制自定义对话框，也能解决系统级覆盖提示的混淆问题：

方案1：优化showSaveDialog的使用逻辑 #

利用showSaveDialog获取用户输入的路径，提前检查文件是否存在，在系统弹出覆盖提示前拦截操作：

const { dialog } = require('electron');
const fs = require('fs').promises;

async function createNewDatabase() {
  const dialogOpts = {
    title: '创建新SQLite数据库',
    filters: [{ name: 'SQLite数据库', extensions: ['db', 'sqlite'] }],
    noResolveAliases: true // 直接获取用户输入的原始路径，不解析快捷方式
  };

  const result = await dialog.showSaveDialog(dialogOpts);
  if (result.canceled) return;

  const filePath = result.filePath;
  try {
    // 检查目标路径是否已有文件
    await fs.access(filePath);
    // 文件存在时直接提示，终止后续流程
    dialog.showErrorBox('操作无效', '该文件已存在，请选择其他文件名或路径。');
  } catch (err) {
    // 文件不存在，执行数据库创建逻辑
    const sqlite3 = require('sqlite3').verbose();
    new sqlite3.Database(filePath, (err) => {
      if (err) dialog.showErrorBox('错误', `数据库创建失败：${err.message}`);
      else dialog.showMessageBox({ message: `数据库已创建：${filePath}` });
    });
  }
}

注意：部分Linux桌面环境下，系统可能仍会弹出覆盖确认框。如果这个问题无法接受，建议使用方案2。

方案2：用目录选择+文件名输入的组合流程 #

避开showSaveDialog的覆盖提示逻辑，拆分“选择保存目录”和“输入文件名”两步：

const { dialog } = require('electron');
const fs = require('fs').promises;
const path = require('path');

async function createNewDatabase() {
  // 第一步：让用户选择保存目录
  const dirResult = await dialog.showOpenDialog({
    title: '选择数据库保存目录',
    properties: ['openDirectory']
  });
  if (dirResult.canceled) return;
  const saveDir = dirResult.filePaths[0];

  // 第二步：弹出输入框获取文件名
  const inputResult = await dialog.showMessageBox({
    title: '输入数据库文件名',
    message: '请输入新数据库的文件名（无需添加扩展名）',
    buttons: ['确认', '取消'],
    defaultId: 0,
    inputLabel: '文件名',
    inputPlaceholder: 'my_new_database'
  });
  if (inputResult.response !== 0 || !inputResult.inputValue.trim()) return;

  // 拼接完整文件路径
  const fileName = `${inputResult.inputValue.trim()}.db`;
  const filePath = path.join(saveDir, fileName);

  // 检查文件是否存在
  try {
    await fs.access(filePath);
    dialog.showErrorBox('文件名重复', '该目录下已存在同名数据库文件，请更换文件名。');
  } catch (err) {
    // 创建新数据库
    const sqlite3 = require('sqlite3').verbose();
    new sqlite3.Database(filePath, (err) => {
      if (err) dialog.showErrorBox('错误', `数据库创建失败：${err.message}`);
      else dialog.showMessageBox({ message: `数据库已创建：${filePath}` });
    });
  }
}

这个流程完全绕开了系统的覆盖提示，用户操作逻辑更清晰，不会产生混淆。

方案3：自定义渲染进程对话框（最高自由度） #

如果需要完全控制界面样式和交互逻辑，可以在渲染进程中用HTML/CSS构建自定义对话框，通过IPC和主进程交互完成目录选择、文件检查等操作。示例结构如下：

<!-- 渲染进程中的自定义对话框 -->
<div id="create-db-modal" style="display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center;">
  <div style="background: #fff; padding: 24px; border-radius: 8px; width: 400px;">
    <h3 style="margin-top: 0;">创建新数据库</h3>
    <div style="margin: 16px 0;">
      <label style="display: block; margin-bottom: 8px;">保存目录：</label>
      <input type="text" id="save-dir" readonly style="width: 280px; padding: 4px;">
      <button id="select-dir-btn" style="padding: 4px 8px;">选择</button>
    </div>
    <div style="margin: 16px 0;">
      <label style="display: block; margin-bottom: 8px;">文件名：</label>
      <input type="text" id="db-filename" placeholder="my_database" style="width: 100%; padding: 4px;">
    </div>
    <div style="text-align: right; margin-top: 20px;">
      <button id="cancel-modal-btn" style="margin-right: 8px; padding: 6px 12px;">取消</button>
      <button id="create-db-btn" style="padding: 6px 12px;">创建</button>
    </div>
  </div>
</div>

通过渲染进程的IPC调用主进程的文件操作API，完全避免系统对话框的限制。

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