feat: improve batch installer selection dialog
This commit is contained in:
fujie
@@ -303,111 +303,133 @@ SELECTION_DIALOG_TEXTS = {
|
||||
"en-US": {
|
||||
"select_all": "Select all",
|
||||
"clear_all": "Clear all",
|
||||
"quick_select": "Types",
|
||||
"selected_count": "{count} selected",
|
||||
"install_selected": "Install Selected",
|
||||
"cancel": "Cancel",
|
||||
"version_label": "Version",
|
||||
"file_label": "File",
|
||||
"description_label": "Description",
|
||||
"repo_label": "Repository",
|
||||
},
|
||||
"zh-CN": {
|
||||
"select_all": "全选",
|
||||
"clear_all": "清空",
|
||||
"quick_select": "类型标签",
|
||||
"selected_count": "已选 {count} 项",
|
||||
"install_selected": "安装所选插件",
|
||||
"cancel": "取消",
|
||||
"version_label": "版本",
|
||||
"file_label": "文件",
|
||||
"description_label": "描述",
|
||||
"repo_label": "仓库",
|
||||
},
|
||||
"zh-HK": {
|
||||
"select_all": "全選",
|
||||
"clear_all": "清空",
|
||||
"quick_select": "類型標籤",
|
||||
"selected_count": "已選 {count} 項",
|
||||
"install_selected": "安裝所選外掛",
|
||||
"cancel": "取消",
|
||||
"version_label": "版本",
|
||||
"file_label": "檔案",
|
||||
"description_label": "描述",
|
||||
"repo_label": "倉庫",
|
||||
},
|
||||
"zh-TW": {
|
||||
"select_all": "全選",
|
||||
"clear_all": "清空",
|
||||
"quick_select": "類型標籤",
|
||||
"selected_count": "已選 {count} 項",
|
||||
"install_selected": "安裝所選外掛",
|
||||
"cancel": "取消",
|
||||
"version_label": "版本",
|
||||
"file_label": "檔案",
|
||||
"description_label": "描述",
|
||||
"repo_label": "倉庫",
|
||||
},
|
||||
"ko-KR": {
|
||||
"select_all": "전체 선택",
|
||||
"clear_all": "선택 해제",
|
||||
"quick_select": "유형",
|
||||
"selected_count": "{count}개 선택됨",
|
||||
"install_selected": "선택한 플러그인 설치",
|
||||
"cancel": "취소",
|
||||
"version_label": "버전",
|
||||
"file_label": "파일",
|
||||
"description_label": "설명",
|
||||
"repo_label": "저장소",
|
||||
},
|
||||
"ja-JP": {
|
||||
"select_all": "すべて選択",
|
||||
"clear_all": "クリア",
|
||||
"quick_select": "タイプ",
|
||||
"selected_count": "{count}件を選択",
|
||||
"install_selected": "選択したプラグインをインストール",
|
||||
"cancel": "キャンセル",
|
||||
"version_label": "バージョン",
|
||||
"file_label": "ファイル",
|
||||
"description_label": "説明",
|
||||
"repo_label": "リポジトリ",
|
||||
},
|
||||
"fr-FR": {
|
||||
"select_all": "Tout sélectionner",
|
||||
"clear_all": "Tout effacer",
|
||||
"quick_select": "Types",
|
||||
"selected_count": "{count} sélectionnés",
|
||||
"install_selected": "Installer la sélection",
|
||||
"cancel": "Annuler",
|
||||
"version_label": "Version",
|
||||
"file_label": "Fichier",
|
||||
"description_label": "Description",
|
||||
"repo_label": "Dépôt",
|
||||
},
|
||||
"de-DE": {
|
||||
"select_all": "Alle auswählen",
|
||||
"clear_all": "Auswahl löschen",
|
||||
"quick_select": "Typen",
|
||||
"selected_count": "{count} ausgewählt",
|
||||
"install_selected": "Auswahl installieren",
|
||||
"cancel": "Abbrechen",
|
||||
"version_label": "Version",
|
||||
"file_label": "Datei",
|
||||
"description_label": "Beschreibung",
|
||||
"repo_label": "Repository",
|
||||
},
|
||||
"es-ES": {
|
||||
"select_all": "Seleccionar todo",
|
||||
"clear_all": "Limpiar",
|
||||
"quick_select": "Tipos",
|
||||
"selected_count": "{count} seleccionados",
|
||||
"install_selected": "Instalar seleccionados",
|
||||
"cancel": "Cancelar",
|
||||
"version_label": "Versión",
|
||||
"file_label": "Archivo",
|
||||
"description_label": "Descripción",
|
||||
"repo_label": "Repositorio",
|
||||
},
|
||||
"it-IT": {
|
||||
"select_all": "Seleziona tutto",
|
||||
"clear_all": "Cancella",
|
||||
"quick_select": "Tipi",
|
||||
"selected_count": "{count} selezionati",
|
||||
"install_selected": "Installa selezionati",
|
||||
"cancel": "Annulla",
|
||||
"version_label": "Versione",
|
||||
"file_label": "File",
|
||||
"description_label": "Descrizione",
|
||||
"repo_label": "Repository",
|
||||
},
|
||||
"vi-VN": {
|
||||
"select_all": "Chọn tất cả",
|
||||
"clear_all": "Bỏ chọn",
|
||||
"quick_select": "Loại",
|
||||
"selected_count": "Đã chọn {count}",
|
||||
"install_selected": "Cài đặt mục đã chọn",
|
||||
"cancel": "Hủy",
|
||||
"version_label": "Phiên bản",
|
||||
"file_label": "Tệp",
|
||||
"description_label": "Mô tả",
|
||||
"repo_label": "Kho",
|
||||
},
|
||||
}
|
||||
@@ -862,7 +884,7 @@ def _build_confirmation_hint(lang: str, repo: str, exclude_keywords: str) -> str
|
||||
if excluded_parts:
|
||||
return _t(lang, "confirm_excluded_hint", excluded=", ".join(excluded_parts))
|
||||
|
||||
return _t(lang, "confirm_copy_exclude_hint", keywords=SELF_EXCLUDE_HINT)
|
||||
return ""
|
||||
|
||||
|
||||
def _build_selection_dialog_js(
|
||||
@@ -919,12 +941,18 @@ def _build_selection_dialog_js(
|
||||
" </div>",
|
||||
" <div id=\"batch-install-plugin-selector-hint\" style=\"margin-top:14px;padding:12px 14px;border-radius:12px;background:#f8fafc;color:#334155;font-size:13px;line-height:1.5;white-space:pre-wrap\"></div>",
|
||||
" </div>",
|
||||
" <div style=\"padding:16px 24px 0;display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap\">",
|
||||
" <div style=\"display:flex;gap:8px;flex-wrap:wrap\">",
|
||||
" <div style=\"padding:16px 24px 0;display:grid;gap:12px\">",
|
||||
" <div style=\"display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap\">",
|
||||
" <div style=\"display:flex;gap:8px;flex-wrap:wrap\">",
|
||||
" <button id=\"batch-install-plugin-selector-select-all\" style=\"padding:8px 12px;border:1px solid #cbd5e1;border-radius:10px;background:#fff;color:#0f172a;font-size:13px;cursor:pointer\">${escapeHtml(ui.select_all)}</button>",
|
||||
" <button id=\"batch-install-plugin-selector-clear-all\" style=\"padding:8px 12px;border:1px solid #cbd5e1;border-radius:10px;background:#fff;color:#0f172a;font-size:13px;cursor:pointer\">${escapeHtml(ui.clear_all)}</button>",
|
||||
" </div>",
|
||||
" <div id=\"batch-install-plugin-selector-count\" style=\"font-size:13px;font-weight:600;color:#475569\"></div>",
|
||||
" </div>",
|
||||
" <div style=\"display:flex;gap:10px;align-items:center;flex-wrap:wrap\">",
|
||||
" <div style=\"font-size:12px;font-weight:700;color:#475569;text-transform:uppercase;letter-spacing:0.04em\">${escapeHtml(ui.quick_select)}</div>",
|
||||
" <div id=\"batch-install-plugin-selector-types\" style=\"display:flex;gap:8px;flex-wrap:wrap\"></div>",
|
||||
" </div>",
|
||||
" <div id=\"batch-install-plugin-selector-count\" style=\"font-size:13px;font-weight:600;color:#475569\"></div>",
|
||||
" </div>",
|
||||
" <div id=\"batch-install-plugin-selector-list\" style=\"padding:16px 24px 0;overflow:auto;display:grid;gap:12px;flex:1;min-height:0\"></div>",
|
||||
" <div style=\"padding:18px 24px 24px;border-top:1px solid #e5e7eb;margin-top:18px;display:flex;justify-content:flex-end;gap:12px;flex-wrap:wrap\">",
|
||||
@@ -939,21 +967,68 @@ def _build_selection_dialog_js(
|
||||
" const listEl = overlay.querySelector('#batch-install-plugin-selector-list');",
|
||||
" const countEl = overlay.querySelector('#batch-install-plugin-selector-count');",
|
||||
" const hintEl = overlay.querySelector('#batch-install-plugin-selector-hint');",
|
||||
" const typesEl = overlay.querySelector('#batch-install-plugin-selector-types');",
|
||||
" const submitBtn = overlay.querySelector('#batch-install-plugin-selector-submit');",
|
||||
" const cancelBtn = overlay.querySelector('#batch-install-plugin-selector-cancel');",
|
||||
" const selectAllBtn = overlay.querySelector('#batch-install-plugin-selector-select-all');",
|
||||
" const clearAllBtn = overlay.querySelector('#batch-install-plugin-selector-clear-all');",
|
||||
" const typeMap = options.reduce((groups, item) => {",
|
||||
" if (!groups[item.type]) {",
|
||||
" groups[item.type] = [];",
|
||||
" }",
|
||||
" groups[item.type].push(item);",
|
||||
" return groups;",
|
||||
" }, {});",
|
||||
" const typeEntries = Object.entries(typeMap);",
|
||||
" const formatMultilineText = (value) => escapeHtml(value).replace(/\\n+/g, '<br />');",
|
||||
" hintEl.textContent = ui.hint || '';",
|
||||
" hintEl.style.display = ui.hint ? 'block' : 'none';",
|
||||
" const renderTypeButtons = () => {",
|
||||
" typesEl.innerHTML = typeEntries.map(([type, items]) => {",
|
||||
" const allSelected = items.every((item) => selected.has(item.id));",
|
||||
" const anySelected = items.some((item) => selected.has(item.id));",
|
||||
" const background = allSelected ? '#0f172a' : '#ffffff';",
|
||||
" const color = allSelected ? '#ffffff' : '#0f172a';",
|
||||
" const border = anySelected ? '#94a3b8' : '#cbd5e1';",
|
||||
" return `",
|
||||
" <button type=\"button\" data-plugin-type=\"${escapeHtml(type)}\" style=\"padding:7px 12px;border:1px solid ${border};border-radius:999px;background:${background};color:${color};font-size:12px;font-weight:700;cursor:pointer;display:inline-flex;gap:8px;align-items:center\">",
|
||||
" <span>${escapeHtml(type)}</span>",
|
||||
" <span style=\"display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:${allSelected ? 'rgba(255,255,255,0.16)' : '#e2e8f0'};color:${allSelected ? '#ffffff' : '#334155'}\">${items.length}</span>",
|
||||
" </button>",
|
||||
" `;",
|
||||
" }).join('');",
|
||||
" typesEl.querySelectorAll('button[data-plugin-type]').forEach((button) => {",
|
||||
" button.addEventListener('click', () => {",
|
||||
" const pluginType = button.getAttribute('data-plugin-type') || '';",
|
||||
" const items = typeMap[pluginType] || [];",
|
||||
" const allSelected = items.length > 0 && items.every((item) => selected.has(item.id));",
|
||||
" items.forEach((item) => {",
|
||||
" if (allSelected) {",
|
||||
" selected.delete(item.id);",
|
||||
" } else {",
|
||||
" selected.add(item.id);",
|
||||
" }",
|
||||
" });",
|
||||
" renderList();",
|
||||
" });",
|
||||
" });",
|
||||
" };",
|
||||
" const updateState = () => {",
|
||||
" countEl.textContent = ui.selected_count.replace('{count}', String(selected.size));",
|
||||
" submitBtn.disabled = selected.size === 0;",
|
||||
" submitBtn.style.opacity = selected.size === 0 ? '0.45' : '1';",
|
||||
" submitBtn.style.cursor = selected.size === 0 ? 'not-allowed' : 'pointer';",
|
||||
" renderTypeButtons();",
|
||||
" };",
|
||||
" const renderList = () => {",
|
||||
" listEl.innerHTML = options.map((item) => {",
|
||||
" const checked = selected.has(item.id) ? 'checked' : '';",
|
||||
" const description = item.description ? `",
|
||||
" <div style=\"display:grid;gap:4px\">",
|
||||
" <div style=\"font-size:11px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:0.04em\">${escapeHtml(ui.description_label)}</div>",
|
||||
" <div style=\"font-size:13px;color:#334155;line-height:1.55;word-break:break-word\">${formatMultilineText(item.description)}</div>",
|
||||
" </div>",
|
||||
" ` : '';",
|
||||
" return `",
|
||||
" <label style=\"display:flex;gap:14px;align-items:flex-start;padding:14px;border:1px solid #e2e8f0;border-radius:14px;background:#fff;cursor:pointer\">",
|
||||
" <input type=\"checkbox\" data-plugin-id=\"${escapeHtml(item.id)}\" ${checked} style=\"margin-top:3px;width:16px;height:16px;accent-color:#0f172a;flex-shrink:0\" />",
|
||||
@@ -963,6 +1038,7 @@ def _build_selection_dialog_js(
|
||||
" <span style=\"font-size:15px;font-weight:700;color:#0f172a;word-break:break-word\">${escapeHtml(item.title)}</span>",
|
||||
" </div>",
|
||||
" <div style=\"font-size:12px;color:#475569;word-break:break-word\">${escapeHtml(ui.version_label)}: ${escapeHtml(item.version)} · ${escapeHtml(ui.file_label)}: ${escapeHtml(item.file_path)}</div>",
|
||||
" ${description}",
|
||||
" </div>",
|
||||
" </label>",
|
||||
" `;",
|
||||
@@ -1049,6 +1125,7 @@ async def _request_plugin_selection(
|
||||
"type": candidate.plugin_type,
|
||||
"version": candidate.version,
|
||||
"file_path": candidate.file_path,
|
||||
"description": candidate.metadata.get("description", ""),
|
||||
}
|
||||
for candidate in candidates
|
||||
]
|
||||
@@ -1060,11 +1137,13 @@ async def _request_plugin_selection(
|
||||
"hint": hint.strip(),
|
||||
"select_all": _selection_t(lang, "select_all"),
|
||||
"clear_all": _selection_t(lang, "clear_all"),
|
||||
"quick_select": _selection_t(lang, "quick_select"),
|
||||
"selected_count": _selection_t(lang, "selected_count", count="{count}"),
|
||||
"install_selected": _selection_t(lang, "install_selected"),
|
||||
"cancel": _selection_t(lang, "cancel"),
|
||||
"version_label": _selection_t(lang, "version_label"),
|
||||
"file_label": _selection_t(lang, "file_label"),
|
||||
"description_label": _selection_t(lang, "description_label"),
|
||||
}
|
||||
js_code = _build_selection_dialog_js(options, ui_text)
|
||||
|
||||
|
||||
Reference in New Issue
Block a user