enhance(frontend): お問い合わせページからデバイス情報を出力できるように (#16598)

* enhance(frontend): デバイス情報を出力できるように

* fix lint

* Update Changelog

* enhance: getHighEntropyValuesが使用できなかった場合のフォールバックを追加

* fix lint

* fix: getHighEntropyValuesが使用できない場合は生のUAを返すように

* enhance: getHighEntropyValuesが使用できる場合でも生のUAを含めるように

* :v:

* onHeaderClicked -> onOpened

1 files changed, 39 insertions, 10 deletions

diff --git a/packages/frontend/src/components/MkCode.vue b/packages/frontend/src/components/MkCode.vue
index f41cb0d00b..f43035f0e8 100644
--- a/packages/frontend/src/components/MkCode.vue
+++ b/packages/frontend/src/components/MkCode.vue
@@ -5,15 +5,32 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <div :class="$style.codeBlockRoot">
-	<button v-if="copyButton" :class="$style.codeBlockCopyButton" class="_button" @click="copy">
+	<button v-if="copyButton" :class="[$style.codeBlockCopyButton, { [$style.withOuterStyle]: withOuterStyle }]" class="_button" @click="copy">
 		<i class="ti ti-copy"></i>
 	</button>
 	<Suspense>
 		<template #fallback>
-			<MkLoading/>
+			<pre
+				class="_selectable"
+				:class="[$style.codeBlockFallbackRoot, {
+					[$style.outerStyle]: withOuterStyle,
+				}]"
+			><code :class="$style.codeBlockFallbackCode">Loading...</code></pre>
 		</template>
-		<XCode v-if="show && lang" class="_selectable" :code="code" :lang="lang"/>
-		<pre v-else-if="show" class="_selectable" :class="$style.codeBlockFallbackRoot"><code :class="$style.codeBlockFallbackCode">{{ code }}</code></pre>
+		<XCode
+			v-if="show && lang"
+			class="_selectable"
+			:code="code"
+			:lang="lang"
+			:withOuterStyle="withOuterStyle"
+		/>
+		<pre
+			v-else-if="show"
+			class="_selectable"
+			:class="[$style.codeBlockFallbackRoot, {
+				[$style.outerStyle]: withOuterStyle,
+			}]"
+		><code :class="$style.codeBlockFallbackCode">{{ code }}</code></pre>
 		<button v-else :class="$style.codePlaceholderRoot" @click="show = true">
 			<div :class="$style.codePlaceholderContainer">
 				<div><i class="ti ti-code"></i> {{ i18n.ts.code }}</div>
@@ -26,8 +43,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { defineAsyncComponent, ref } from 'vue';
-import * as os from '@/os.js';
-import MkLoading from '@/components/global/MkLoading.vue';
 import { i18n } from '@/i18n.js';
 import { copyToClipboard } from '@/utility/copy-to-clipboard.js';
 import { prefer } from '@/preferences.js';
@@ -36,10 +51,12 @@ const props = withDefaults(defineProps<{
 	code: string;
 	forceShow?: boolean;
 	copyButton?: boolean;
+	withOuterStyle?: boolean;
 	lang?: string;
 }>(), {
 	copyButton: true,
 	forceShow: false,
+	withOuterStyle: true,
 });
 
 const show = ref(props.forceShow === true ? true : !prefer.s.dataSaver.code);
@@ -58,10 +75,16 @@ function copy() {
 
 .codeBlockCopyButton {
 	position: absolute;
-	top: 8px;
-	right: 8px;
 	opacity: 0.5;
 
+	top: 0;
+	right: 0;
+
+	&.withOuterStyle {
+		top: 8px;
+		right: 8px;
+	}
+
 	&:hover {
 		opacity: 0.8;
 	}
@@ -70,11 +93,17 @@ function copy() {
 .codeBlockFallbackRoot {
 	display: block;
 	overflow-wrap: anywhere;
-	padding: 1em;
-	margin: 0;
 	overflow: auto;
 }
 
+.outerStyle.codeBlockFallbackRoot {
+	background: var(--MI_THEME-bg);
+	padding: 1em;
+	margin: .5em 0;
+	border-radius: 8px;
+	border: 1px solid var(--MI_THEME-divider);
+}
+
 .codeBlockFallbackCode {
 	font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;
 }