* 创建头部（语言选择器和 Mermaid 模式选择器）
(language: string)
| 1033 | * 创建头部（语言选择器和 Mermaid 模式选择器） |
| 1034 | */ |
| 1035 | private createHeader(language: string): HTMLElement { |
| 1036 | const header = document.createElement("div"); |
| 1037 | header.className = "milkup-code-block-header"; |
| 1038 | |
| 1039 | // 语言选择器 |
| 1040 | const langSelector = this.createCustomSelect(supportedLanguages, language, (value) => |
| 1041 | this.setLanguage(value) |
| 1042 | ); |
| 1043 | langSelector.classList.add("milkup-code-block-lang-select"); |
| 1044 | header.appendChild(langSelector); |
| 1045 | |
| 1046 | // Mermaid 模式选择器（仅在 mermaid 语言时显示） |
| 1047 | if (language === "mermaid") { |
| 1048 | const modeSelector = this.createCustomSelect( |
| 1049 | mermaidDisplayModes, |
| 1050 | this.mermaidDisplayMode, |
| 1051 | (value) => this.setMermaidDisplayMode(value as MermaidDisplayMode) |
| 1052 | ); |
| 1053 | modeSelector.classList.add("milkup-code-block-mode-select"); |
| 1054 | header.appendChild(modeSelector); |
| 1055 | } |
| 1056 | |
| 1057 | // 复制按钮（hover 时显示） |
| 1058 | const copyBtn = document.createElement("button"); |
| 1059 | copyBtn.className = "milkup-code-block-copy-btn"; |
| 1060 | copyBtn.type = "button"; |
| 1061 | copyBtn.title = "复制代码块"; |
| 1062 | copyBtn.innerHTML = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>`; |
| 1063 | copyBtn.addEventListener("click", (e) => { |
| 1064 | e.stopPropagation(); |
| 1065 | this.copyCodeBlock(); |
| 1066 | // 短暂显示已复制反馈 |
| 1067 | copyBtn.classList.add("copied"); |
| 1068 | copyBtn.innerHTML = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>`; |
| 1069 | setTimeout(() => { |
| 1070 | copyBtn.classList.remove("copied"); |
| 1071 | copyBtn.innerHTML = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>`; |
| 1072 | }, 1500); |
| 1073 | }); |
| 1074 | header.appendChild(copyBtn); |
| 1075 | |
| 1076 | return header; |
| 1077 | } |
| 1078 | |
| 1079 | /** |
| 1080 | * 创建自定义下拉选择器 |
no test coverage detected