1
0
mirror of https://github.com/misskey-dev/misskey.git synced 2026-05-04 06:06:16 +02:00

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

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

* fix lint

* Update Changelog

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

* fix lint

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

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

* ✌️

* onHeaderClicked -> onOpened
This commit is contained in:
かっこかり
2025-10-06 10:06:53 +09:00
committed by GitHub
parent 7fcbf57a9d
commit f3e0713501
9 changed files with 207 additions and 41 deletions

View File

@@ -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%;