共享会话

「下載SVG」窗口未有配上英文語言，加上英文，同時檢查還有什麼地方是沒有加英文的

分享于 2026年9月9日 06:31

提问者

「下載SVG」窗口未有配上英文語言，加上英文，同時檢查還有什麼地方是沒有加英文的。

trigolden_game271.htmltext/plain · 367.7 KB预览下载

QuanAI

我會先檢查整份 HTML 的語言字典、SVG 下載視窗及所有介面文字，找出缺少英文對照的位置，再整理並修正。

已檢查整份 HTML。除了「下載 SVG」窗口的可見文字未接入英文切換外，還發現：

AI 設定窗口的「確認」按鈕仍是硬編碼中文。
SVG 下載窗口的以下無障礙文字只有中文：
- 關閉窗口
- SVG 預覽區
- 下載選項
- 選擇記分標誌位置
- 動態產生的「移動記分標誌」提示
- 預覽 <object> 的說明
切換語言時，<html lang> 沒有同步更新。

其餘主要可見介面，包括規則、操作說明、仲裁、遊戲資訊、棋譜導入／導出、AI 類型和遊戲訊息，均已有英文。

請作以下修改。

1. 修改 AI 設定確認按鈕

將：

html
<button class="menu-btn" style="background: #43b581" onclick="confirmAISettingsDialog()">確認</button>

改為：

html
<button
  class="menu-btn"
  id="ui-ai-confirm"
  style="background: #43b581"
  onclick="confirmAISettingsDialog()"
>
  確認
</button>

2. 修改 SVG 下載窗口的 HTML

將原本的 download-dialog 內容替換為以下版本：

html
<div
  id="download-dialog"
  class="custom-dialog"
  role="dialog"
  aria-modal="true"
  aria-labelledby="download-dialog-title"
>
  <div class="dialog-box download-dialog-box">
    <button
      type="button"
      class="download-close-btn"
      id="download-close-btn"
      onclick="closeDownloadDialog()"
      aria-label="關閉下載窗口"
    >
      <svg viewBox="0 0 24 24" aria-hidden="true">
        <path
          fill="currentColor"
          d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
        />
      </svg>
    </button>

    <h2 id="download-dialog-title" class="download-dialog-title">下載 SVG 局面和動畫</h2>

    <div class="download-preview-shell">
      <div id="download-preview" aria-label="SVG 預覽區"></div>
    </div>

    <div id="download-option-row" class="download-option-row" role="group" aria-label="下載選項">
      <label class="download-option download-option-number">
        <input type="checkbox" id="download-option-number" onchange="handleDownloadOptionChange('number')" />

        <span class="download-checkmark" aria-hidden="true">
          <svg viewBox="0 0 24 24">
            <path fill="currentColor" d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" />
          </svg>
        </span>

        <span id="download-option-number-label">數字</span>

        <span
          id="download-marker-position-btn"
          class="download-marker-position-btn"
          role="button"
          tabindex="0"
          aria-label="選擇記分標誌位置"
          aria-pressed="false"
          onclick="toggleDownloadMarkerPicker(event)"
          onkeydown="handleDownloadMarkerPickerKeydown(event)"
        >
          <svg viewBox="0 0 24 24" aria-hidden="true">
            <!-- 左上 -->
            <path d="M3 3h6L3 9z" />

            <!-- 右上 -->
            <path d="M15 3h6v6z" />

            <!-- 左下 -->
            <path d="M3 15l6 6H3z" />

            <!-- 右下 -->
            <path d="M21 15v6h-6z" />
          </svg>
        </span>
      </label>

      <label class="download-option">
        <input type="checkbox" id="download-option-animate" onchange="handleDownloadOptionChange('animate')" />

        <span class="download-checkmark" aria-hidden="true">
          <svg viewBox="0 0 24 24">
            <path fill="currentColor" d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" />
          </svg>
        </span>

        <span id="download-option-animate-label">動畫</span>
      </label>
    </div>

    <button
      type="button"
      id="download-confirm-btn"
      class="download-confirm-btn"
      onclick="confirmSVGDownload()"
    >
      下載
    </button>

    <div id="download-size">0 byte</div>
  </div>
</div>

3. 在 `i18n` 字典加入翻譯

在 i18n 物件中，例如放在 'ui-ai-title' 附近，加入：

js
'ui-ai-confirm': {
  zh: '確認',
  en: 'Confirm'
},

'download-dialog-title': {
  zh: '下載 SVG 局面和動畫',
  en: 'Download SVG Position or Animation'
},

'download-option-number-label': {
  zh: '數字',
  en: 'Numbers'
},

'download-option-animate-label': {
  zh: '動畫',
  en: 'Animation'
},

'download-confirm-btn': {
  zh: '下載',
  en: 'Download'
},

4. 加入下載窗口屬性翻譯

在 i18n 物件結束後、function t(...) 前加入：

js
const downloadDialogI18n = {
  close: {
    zh: '關閉下載窗口',
    en: 'Close download window'
  },

  preview: {
    zh: 'SVG 預覽區',
    en: 'SVG preview area'
  },

  options: {
    zh: '下載選項',
    en: 'Download options'
  },

  markerPosition: {
    zh: '選擇記分標誌位置',
    en: 'Choose scoring marker position'
  },

  markerMoveTitle: {
    zh: '移動記分標誌',
    en: 'Move scoring marker'
  },

  markerMove: {
    zh: '把記分標誌移到{corner}',
    en: 'Move the scoring marker to the {corner}'
  },

  objectPreview: {
    zh: '下載 SVG 預覽',
    en: 'Download SVG preview'
  }
};

const downloadCornerI18n = {
  tl: {
    zh: '左上角',
    en: 'top-left corner'
  },

  tr: {
    zh: '右上角',
    en: 'top-right corner'
  },

  bl: {
    zh: '左下角',
    en: 'bottom-left corner'
  },

  br: {
    zh: '右下角',
    en: 'bottom-right corner'
  }
};

function downloadText(key, vars = {}) {
  let text = downloadDialogI18n[key][currentLang];

  Object.entries(vars).forEach(([name, value]) => {
    text = text.split('{' + name + '}').join(value);
  });

  return text;
}

function updateDownloadDialogLang() {
  const closeButton = document.getElementById('download-close-btn');
  const preview = document.getElementById('download-preview');
  const optionRow = document.getElementById('download-option-row');
  const markerButton = document.getElementById('download-marker-position-btn');

  if (closeButton) {
    closeButton.setAttribute('aria-label', downloadText('close'));
  }

  if (preview) {
    preview.setAttribute('aria-label', downloadText('preview'));
  }

  if (optionRow) {
    optionRow.setAttribute('aria-label', downloadText('options'));
  }

  if (markerButton) {
    markerButton.setAttribute('aria-label', downloadText('markerPosition'));
  }

  /*
   * 位置選擇按鈕是動態產生的，因此語言切換後重新產生，
   * 以更新 aria-label 和 title。
   */
  if (downloadMarkerPickerOpen) {
    renderDownloadMarkerChoices();
  }
}

5. 更新 `setLang()`

將目前的：

js
function setLang(lang) {
  currentLang = lang;
  document.getElementById('lang-zh').classList.toggle('active', lang === 'zh');
  document.getElementById('lang-en').classList.toggle('active', lang === 'en');
  // Update DOM texts
  for (const [id, texts] of Object.entries(i18n)) {
    const el = document.getElementById(id);
    if (el) el.innerHTML = texts[lang];
  }
  // Also toggle rule texts
  document.body.classList.remove('zh', 'en');
  document.body.classList.add(lang);
  updateAIDialogLang();
}

替換成：

js
function setLang(lang) {
  currentLang = lang;

  document.documentElement.lang = lang === 'en' ? 'en' : 'zh-Hant';

  document.getElementById('lang-zh').classList.toggle('active', lang === 'zh');
  document.getElementById('lang-en').classList.toggle('active', lang === 'en');

  for (const [id, texts] of Object.entries(i18n)) {
    const el = document.getElementById(id);

    if (el) {
      el.innerHTML = texts[lang];
    }
  }

  document.body.classList.remove('zh', 'en');
  document.body.classList.add(lang);

  updateAIDialogLang();
  updateDownloadDialogLang();
}

6. 修正動態記分標誌位置按鈕

在 renderDownloadMarkerChoices() 中，將：

js
choice.setAttribute('aria-label', `把記分標誌移到 ${corner}`);
choice.title = '移動記分標誌';

替換成：

js
const cornerLabel = downloadCornerI18n[corner][currentLang];

choice.setAttribute(
  'aria-label',
  downloadText('markerMove', {
    corner: cornerLabel
  })
);

choice.title = downloadText('markerMoveTitle');

這樣英文模式會顯示例如：

Move the scoring marker to the top-left corner

而不是夾雜中文或 tl、tr 等程式代碼。

7. 修正動態 SVG 預覽說明

在 refreshDownloadPreview() 中，將：

js
object.setAttribute('aria-label', '下載 SVG 預覽');

替換成：

js
object.setAttribute('aria-label', downloadText('objectPreview'));

8. 打開下載窗口時套用當前語言

將：

js
function openDownloadDialog() {
  const dialog = document.getElementById('download-dialog');
  dialog.style.display = 'flex';

  refreshDownloadPreview();

改為：

js
function openDownloadDialog() {
  const dialog = document.getElementById('download-dialog');
  dialog.style.display = 'flex';

  updateDownloadDialogLang();
  refreshDownloadPreview();

完成後，英文模式下的下載窗口將顯示：

Download SVG Position or Animation
Numbers
Animation
Download

AI 設定窗口的確認按鈕亦會顯示 Confirm，下載窗口內所有中文無障礙提示也會同步切換成英文。

「下載SVG」窗口未有配上英文語言，加上英文，同時檢查還有什麼地方是沒有加英文的

1. 修改 AI 設定確認按鈕

2. 修改 SVG 下載窗口的 HTML

3. 在 i18n 字典加入翻譯

4. 加入下載窗口屬性翻譯

5. 更新 setLang()

6. 修正動態記分標誌位置按鈕

7. 修正動態 SVG 預覽說明

8. 打開下載窗口時套用當前語言

3. 在 `i18n` 字典加入翻譯

5. 更新 `setLang()`