Просмотр исходного кода

feat: Added copy to clipboard buttons to Diagnostics view, with markdown backticks

jamesread 7 месяцев назад
Родитель
Сommit
6ccd10a970

+ 34 - 11
frontend/resources/vue/views/DiagnosticsView.vue

@@ -26,6 +26,7 @@
 
     <div role="toolbar">
       <button @click="generateSosReport" :disabled="loading" class = "good">{{ t('diagnostics.generate-sos-report') }}</button>
+      <button @click="copySosReport" :disabled="!sosReport || loading" :class="sosReportCopied ? 'good' : ''">{{ sosReportCopied ? t('diagnostics.copied') : t('diagnostics.copy-to-clipboard') }}</button>
     </div>
 
     <textarea v-model="sosReport" readonly style="flex: 1; min-height: 200px; resize: vertical; width: 100%; box-sizing: border-box;"></textarea>
@@ -36,6 +37,7 @@
 
     <div role="toolbar">
       <button @click="generateBrowserInfo" :disabled="loading" class = "good">{{ t('diagnostics.generate-browser-info') }}</button>
+      <button @click="copyBrowserInfo" :disabled="!browserInfo || loading" :class="browserInfoCopied ? 'good' : ''">{{ browserInfoCopied ? t('diagnostics.copied') : t('diagnostics.copy-to-clipboard') }}</button>
     </div>
 
     <textarea v-model="browserInfo" readonly style="flex: 1; min-height: 200px; resize: vertical; width: 100%; box-sizing: border-box;"></textarea>
@@ -53,6 +55,8 @@ const diagnostics = ref({})
 const loading = ref(false)
 const sosReport = ref('')
 const browserInfo = ref('')
+const sosReportCopied = ref(false)
+const browserInfoCopied = ref(false)
 
 async function fetchDiagnostics() {
   loading.value = true
@@ -83,7 +87,19 @@ function formatKey(key) {
 async function generateSosReport() {
   const response = await window.client.sosReport()
   console.log("response", response)
-  sosReport.value = response.alert
+  sosReport.value = `\`\`\`\n${response.alert}\n\`\`\`\n`
+}
+
+async function copySosReport() {
+  try {
+    await navigator.clipboard.writeText(sosReport.value)
+    sosReportCopied.value = true
+    setTimeout(() => {
+      sosReportCopied.value = false
+    }, 2000)
+  } catch (err) {
+    console.error('Failed to copy SOS report to clipboard:', err)
+  }
 }
 
 async function generateBrowserInfo() {
@@ -143,17 +159,15 @@ async function generateBrowserInfo() {
       })(),
       hardwareConcurrency: navigator.hardwareConcurrency || 'N/A',
       maxTouchPoints: navigator.maxTouchPoints || 'N/A',
-      vendor: navigator.vendor || 'N/A',
-      appName: navigator.appName,
-      appVersion: navigator.appVersion,
-      product: navigator.product,
       userAgentData: userAgentData
     }
 
     const olivetinVersion = window.initResponse?.currentVersion || t('diagnostics.unknown')
     const currentLanguage = locale.value || t('diagnostics.unknown')
 
-    let output = '### BROWSER INFO START (copy all text to BROWSER INFO END)\n'
+    let output = '';
+    output += `\`\`\`\n`
+    output += '### BROWSER INFO START (copy all text to BROWSER INFO END)\n'
     output += `# OliveTin Information\n`
     output += `olivetinVersion: ${olivetinVersion}\n`
     output += `currentLanguage: ${currentLanguage}\n`
@@ -162,10 +176,6 @@ async function generateBrowserInfo() {
     output += `platform: ${info.platform}\n`
     output += `language: ${info.language}\n`
     output += `languages: ${info.languages}\n`
-    output += `vendor: ${info.vendor}\n`
-    output += `appName: ${info.appName}\n`
-    output += `appVersion: ${info.appVersion}\n`
-    output += `product: ${info.product}\n`
     output += `\n# User Agent Data\n`
     output += `userAgentData:\n${info.userAgentData}\n`
     output += `\n# Display Information\n`
@@ -186,7 +196,8 @@ async function generateBrowserInfo() {
     output += `\n# Location & Time\n`
     output += `timezone: ${info.timezone}\n`
     output += `timezoneOffset: ${info.timezoneOffset}\n`
-    output += `\n### BROWSER INFO END (copy all text from BROWSER INFO START)\n`
+    output += `\n### BROWSER INFO END (copy all text from BROWSER INFO START)`
+    output += `\n\`\`\`\n`
 
     browserInfo.value = output
   } finally {
@@ -194,6 +205,18 @@ async function generateBrowserInfo() {
   }
 }
 
+async function copyBrowserInfo() {
+  try {
+    await navigator.clipboard.writeText(browserInfo.value)
+    browserInfoCopied.value = true
+    setTimeout(() => {
+      browserInfoCopied.value = false
+    }, 2000)
+  } catch (err) {
+    console.error('Failed to copy browser info to clipboard:', err)
+  }
+}
+
 onMounted(() => {
   fetchDiagnostics()
 })

+ 10 - 0
lang/combined_output.json

@@ -5,6 +5,8 @@
             "connected": "Verbunden",
             "diagnostics.browser-info": "Browser-Informationen",
             "diagnostics.browser-info-description": "Dieser Abschnitt ermöglicht es Ihnen, einen detaillierten Bericht über Ihre Browser-Informationen zu erstellen. Dies kann bei der Fehlerbehebung von browser-spezifischen Problemen hilfreich sein.",
+            "diagnostics.copied": "Kopiert!",
+            "diagnostics.copy-to-clipboard": "In Zwischenablage kopieren",
             "diagnostics.found-config": "Konfiguration gefunden",
             "diagnostics.found-key": "Schlüssel gefunden",
             "diagnostics.generate-browser-info": "Browser-Informationen erstellen",
@@ -49,6 +51,8 @@
             "connected": "Connected",
             "diagnostics.browser-info": "Browser Info",
             "diagnostics.browser-info-description": "This section allows you to generate a detailed report of your browser information. This can be helpful when troubleshooting browser-specific issues.",
+            "diagnostics.copied": "Copied!",
+            "diagnostics.copy-to-clipboard": "Copy to Clipboard",
             "diagnostics.found-config": "Found Config",
             "diagnostics.found-key": "Found Key",
             "diagnostics.generate-browser-info": "Generate Browser Info",
@@ -93,6 +97,8 @@
             "connected": "Conectado",
             "diagnostics.browser-info": "Información del navegador",
             "diagnostics.browser-info-description": "Esta sección le permite generar un informe detallado de su información del navegador. Esto puede ser útil al solucionar problemas específicos del navegador.",
+            "diagnostics.copied": "¡Copiado!",
+            "diagnostics.copy-to-clipboard": "Copiar al portapapeles",
             "diagnostics.found-config": "Configuración encontrada",
             "diagnostics.found-key": "Clave encontrada",
             "diagnostics.generate-browser-info": "Generar información del navegador",
@@ -137,6 +143,8 @@
             "connected": "Connesso",
             "diagnostics.browser-info": "Informazioni del browser",
             "diagnostics.browser-info-description": "Questa sezione ti consente di generare un rapporto dettagliato delle informazioni del tuo browser. Questo può essere utile durante la risoluzione dei problemi specifici del browser.",
+            "diagnostics.copied": "Copiato!",
+            "diagnostics.copy-to-clipboard": "Copia negli appunti",
             "diagnostics.found-config": "Configurazione trovata",
             "diagnostics.found-key": "Chiave trovata",
             "diagnostics.generate-browser-info": "Genera informazioni del browser",
@@ -181,6 +189,8 @@
             "connected": "已连接",
             "diagnostics.browser-info": "浏览器信息",
             "diagnostics.browser-info-description": "此部分允许您生成浏览器信息的详细报告。这在排查浏览器特定问题时很有帮助。",
+            "diagnostics.copied": "已复制!",
+            "diagnostics.copy-to-clipboard": "复制到剪贴板",
             "diagnostics.found-config": "找到配置",
             "diagnostics.found-key": "找到密钥",
             "diagnostics.generate-browser-info": "生成浏览器信息",

+ 2 - 0
lang/de-DE.yaml

@@ -34,6 +34,8 @@ translations:
   diagnostics.browser-info: Browser-Informationen
   diagnostics.browser-info-description: Dieser Abschnitt ermöglicht es Ihnen, einen detaillierten Bericht über Ihre Browser-Informationen zu erstellen. Dies kann bei der Fehlerbehebung von browser-spezifischen Problemen hilfreich sein.
   diagnostics.generate-browser-info: Browser-Informationen erstellen
+  diagnostics.copy-to-clipboard: In Zwischenablage kopieren
+  diagnostics.copied: Kopiert!
   diagnostics.unknown: Unbekannt
   diagnostics.useragent-data-error: Fehler beim Abrufen von userAgentData
   return-to-index: Zurück zur Startseite

+ 2 - 0
lang/en.yaml

@@ -34,6 +34,8 @@ translations:
   diagnostics.browser-info: Browser Info
   diagnostics.browser-info-description: This section allows you to generate a detailed report of your browser information. This can be helpful when troubleshooting browser-specific issues.
   diagnostics.generate-browser-info: Generate Browser Info
+  diagnostics.copy-to-clipboard: Copy to Clipboard
+  diagnostics.copied: Copied!
   diagnostics.unknown: Unknown
   diagnostics.useragent-data-error: Error retrieving userAgentData
   return-to-index: Return to index

+ 2 - 0
lang/es-ES.yaml

@@ -34,6 +34,8 @@ translations:
   diagnostics.browser-info: Información del navegador
   diagnostics.browser-info-description: Esta sección le permite generar un informe detallado de su información del navegador. Esto puede ser útil al solucionar problemas específicos del navegador.
   diagnostics.generate-browser-info: Generar información del navegador
+  diagnostics.copy-to-clipboard: Copiar al portapapeles
+  diagnostics.copied: ¡Copiado!
   diagnostics.unknown: Desconocido
   diagnostics.useragent-data-error: Error al recuperar userAgentData
   return-to-index: Volver a la página principal

+ 2 - 0
lang/it-IT.yaml

@@ -34,6 +34,8 @@ translations:
   diagnostics.browser-info: Informazioni del browser
   diagnostics.browser-info-description: Questa sezione ti consente di generare un rapporto dettagliato delle informazioni del tuo browser. Questo può essere utile durante la risoluzione dei problemi specifici del browser.
   diagnostics.generate-browser-info: Genera informazioni del browser
+  diagnostics.copy-to-clipboard: Copia negli appunti
+  diagnostics.copied: Copiato!
   diagnostics.unknown: Sconosciuto
   diagnostics.useragent-data-error: Errore nel recupero di userAgentData
   return-to-index: Torna alla pagina principale

+ 2 - 0
lang/zh-Hans-CN.yaml

@@ -40,5 +40,7 @@ translations:
   diagnostics.browser-info: 浏览器信息
   diagnostics.browser-info-description: 此部分允许您生成浏览器信息的详细报告。这在排查浏览器特定问题时很有帮助。
   diagnostics.generate-browser-info: 生成浏览器信息
+  diagnostics.copy-to-clipboard: 复制到剪贴板
+  diagnostics.copied: 已复制!
   diagnostics.unknown: 未知
   diagnostics.useragent-data-error: 检索 userAgentData 时出错