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, 31 insertions, 11 deletions

diff --git a/packages/frontend/src/components/MkCode.core.vue b/packages/frontend/src/components/MkCode.core.vue
index 8b39468d4c..f669e4b87a 100644
--- a/packages/frontend/src/components/MkCode.core.vue
+++ b/packages/frontend/src/components/MkCode.core.vue
@@ -5,7 +5,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <!-- eslint-disable vue/no-v-html -->
 <template>
-<div :class="[$style.codeBlockRoot, { [$style.codeEditor]: codeEditor }, (darkMode ? $style.dark : $style.light)]" v-html="html"></div>
+<div
+	:class="[$style.codeBlockRoot, {
+		[$style.codeEditor]: codeEditor,
+		[$style.outerStyle]: !codeEditor && withOuterStyle,
+		[$style.dark]: darkMode,
+		[$style.light]: !darkMode,
+	}]" v-html="html"></div>
 </template>
 
 <script lang="ts" setup>
@@ -15,11 +21,15 @@ import type { BundledLanguage } from 'shiki/langs';
 import { getHighlighter, getTheme } from '@/utility/code-highlighter.js';
 import { store } from '@/store.js';
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
 	code: string;
 	lang?: string;
 	codeEditor?: boolean;
-}>();
+	withOuterStyle?: boolean;
+}>(), {
+	codeEditor: false,
+	withOuterStyle: true,
+});
 
 const highlighter = await getHighlighter();
 const darkMode = store.r.darkMode;
@@ -73,17 +83,13 @@ watch(() => props.lang, (to) => {
 
 <style module lang="scss">
 .codeBlockRoot :global(.shiki) {
-	padding: 1em;
-	margin: 0;
 	overflow: auto;
 	font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;
 
 	color: var(--shiki-fallback);
-	background-color: var(--shiki-fallback-bg);
 
 	& span {
 		color: var(--shiki-fallback);
-		background-color: var(--shiki-fallback-bg);
 	}
 
 	& pre,
@@ -92,26 +98,40 @@ watch(() => props.lang, (to) => {
 	}
 }
 
+.outerStyle.codeBlockRoot :global(.shiki) {
+	padding: 1em;
+	margin: 0;
+	border-radius: 8px;
+	border: 1px solid var(--MI_THEME-divider);
+	background-color: var(--shiki-fallback-bg);
+}
+
 .light.codeBlockRoot :global(.shiki) {
 	color: var(--shiki-light);
-	background-color: var(--shiki-light-bg);
 
 	& span {
 		color: var(--shiki-light);
-		background-color: var(--shiki-light-bg);
 	}
 }
 
+.light.outerStyle.codeBlockRoot :global(.shiki),
+.light.codeEditor.codeBlockRoot :global(.shiki) {
+	background-color: var(--shiki-light-bg);
+}
+
 .dark.codeBlockRoot :global(.shiki) {
 	color: var(--shiki-dark);
-	background-color: var(--shiki-dark-bg);
 
 	& span {
 		color: var(--shiki-dark);
-		background-color: var(--shiki-dark-bg);
 	}
 }
 
+.dark.outerStyle.codeBlockRoot :global(.shiki),
+.dark.codeEditor.codeBlockRoot :global(.shiki) {
+	background-color: var(--shiki-dark-bg);
+}
+
 .codeBlockRoot.codeEditor {
 	min-width: 100%;
 	height: 100%;