feat(frontend): 自分のプロフィールページの二次元コード(QRコード)を表示し、他の人のコードを読み取りするページを追加 (#16456)

* wip (qr.show.vue) * added to navbar * qr.show.vue * fix * added to navbar * fix size * 🎨 * 🎨 * fix div warn * fix * use * 0.25 * fix?? * fix lint * clean up * ??? * ? * fix * 🎨 * 🎨 * refactor * 🎨 * 🎨 * :ar:t * 🎨 * iphone flip * no lazy import * 🎨 * 🎨 * 🎨 * ユーザー全部flipでいいや * ✌️ * fix * fix * fix lint * 🎨 * fix type * fix: local user profile url cannot be resolved with ap/show * fix: local user url with hostname could not be resolved * chore: use common utility for checking self host * wip * 🎨 * 🎨 * fix imports * fix * fix * fix * 🎨 * fix... * set spacer-w * ✌️ * 全画面でQRを読むように * fix * 🎨 * modify navbar.ts * start/stop on vue activation * display raw content read from qr * 端末のQRをスキャンするボタンを追加 * chore * やっぱりmfmを先に表示する * 🎨 * fix 18n * QRの内容は/users/:userIdにする * add spdx * use cqh * `defineProps` is a compiler macro and no longer needs to be imported. * use MkUserName * 🎨 * 🎨 * refactor * clean up * refactor * 🎨 * Update qr.show.vue * Misskeyロゴにdrop-shadowを追加 * clean up: do not use empty css * fix os.select usage * Update qr.vue * Update qr.show.vue * Update qr.show.vue * Update get-user-menu.ts * ✌️ * Update show.ts * Update ja-JP.yml * watermark * Update CHANGELOG.md * Update qr.read.vue * Update qr.read.vue * wip * Update MkWatermarkEditorDialog.Layer.vue --------- Co-authored-by: anatawa12 <anatawa12@icloud.com> Co-authored-by: syuilo <4439005+syuilo@users.noreply.github.com>
2026-06-03 08:24:26 +02:00 · 2025-09-19 21:02:30 +09:00
parent 97adf6f2cc
commit 42b2aea533
23 changed files with 1122 additions and 62 deletions
--- a/packages/frontend/src/pages/qr.read.raw-viewer.vue
+++ b/packages/frontend/src/pages/qr.read.raw-viewer.vue
@@ -0,0 +1,54 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<MkFolder defaultOpen :withSpacer="false">
+	<template #label>{{ data.split('\n')[0] }}</template>
+	<template #header>
+		<MkTabs
+			v-model:tab="tab"
+			:tabs="[
+				{
+					key: 'mfm',
+					title: i18n.ts._qr.mfm,
+					icon: 'ti ti-align-left',
+				},
+				{
+					key: 'raw',
+					title: i18n.ts._qr.raw,
+					icon: 'ti ti-code',
+				},
+			]"
+		/>
+	</template>
+
+	<div v-show="tab === 'mfm'" class="_spacer _gaps">
+		<Mfm :text="data" :nyaize="false"/>
+		<MkUrlPreview v-for="url in urls" :key="url" :url="url" :compact="true" :detail="false"/>
+	</div>
+	<div v-show="tab === 'raw'" class="_spacer" style="--MI_SPACER-min: 10px; --MI_SPACER-max: 16px;">
+		<MkCode :code="data" lang="text"/>
+	</div>
+</MkFolder>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed } from 'vue';
+import * as mfm from 'mfm-js';
+import MkFolder from '@/components/MkFolder.vue';
+import MkTabs from '@/components/MkTabs.vue';
+import { extractUrlFromMfm } from '@/utility/extract-url-from-mfm';
+import MkCode from '@/components/MkCode.vue';
+import MkUrlPreview from '@/components/MkUrlPreview.vue';
+import { i18n } from '@/i18n.js';
+
+const props = defineProps<{
+	data: string;
+}>();
+
+const parsed = computed(() => mfm.parse(props.data));
+const urls = computed(() => extractUrlFromMfm(parsed.value));
+const tab = ref<'mfm' | 'raw'>('mfm');
+</script>