如何通过单选按钮及自定义路径框设置Steam与Epic Games独立安装路径？

核心需求 #

• 提供三个互斥的单选选项供用户选择安装路径：
  • Steam默认游戏目录：选中后自动使用Steam官方默认安装路径
  • Epic Games默认游戏目录：选中后自动使用Epic官方默认安装路径
  • 自定义路径：选中后启用路径输入框，允许用户手动指定安装路径

示例界面效果 #

前端实现示例（HTML + JavaScript） #

<div class="install-path-selector">
  <!-- Steam选项 -->
  <label class="radio-option">
    <input type="radio" name="installPath" value="steam" checked>
    Steam 默认目录
  </label>

  <!-- Epic选项 -->
  <label class="radio-option">
    <input type="radio" name="installPath" value="epic">
    Epic Games 默认目录
  </label>

  <!-- 自定义路径选项 -->
  <label class="radio-option">
    <input type="radio" name="installPath" value="custom">
    自定义路径：
    <input type="text" id="customPathInput" disabled placeholder="请输入安装路径">
  </label>
</div>

<script>
// 获取DOM元素
const radioOptions = document.querySelectorAll('input[name="installPath"]');
const customInput = document.getElementById('customPathInput');

// 监听单选按钮切换事件
radioOptions.forEach(radio => {
  radio.addEventListener('change', () => {
    // 切换自定义输入框的启用状态
    customInput.disabled = radio.value !== 'custom';
    // 选中Steam/Epic时自动匹配对应默认路径（示例）
    if (radio.value === 'steam') {
      // Windows平台Steam默认路径示例
      console.log('使用Steam默认路径：C:\\Program Files (x86)\\Steam\\steamapps\\common');
    } else if (radio.value === 'epic') {
      // Windows平台Epic默认路径示例
      console.log('使用Epic默认路径：C:\\Program Files\\Epic Games');
    }
  });
});
</script>

<style>
.radio-option {
  display: block;
  margin: 10px 0;
  cursor: pointer;
}
#customPathInput {
  margin-left: 10px;
  padding: 4px 8px;
  width: 300px;
}
</style>

关键逻辑说明 #

1. 单选按钮分组：通过name="installPath"属性确保三个选项互斥，同一时间仅能选中一个
2. 输入框状态控制：选中“自定义路径”时启用输入框，选中其他选项时禁用输入框，避免无效操作
3. 默认路径适配：不同操作系统的Steam/Epic默认路径不同，需通过系统API或注册表查询实现自动获取
4. 路径合法性验证：自定义路径输入完成后，需添加验证逻辑（检查路径是否存在、是否具备写入权限等）

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