usbharu
/
misskey
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: split mkcodediff to isolate concerns

This commit is contained in:
kakkokari-gtyih 2026-01-22 10:36:57 +09:00
parent 327f41bace
commit 3e4cc32e51
4 changed files with 97 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
packages/frontend/src/components/MkCode.vue
View File

@ -44,13 +44,8 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
</template>
<script lang="ts" setup>
import { defineAsyncComponent, ref, computed } from 'vue';
import { i18n } from '@/i18n.js';
import { copyToClipboard } from '@/utility/copy-to-clipboard.js';
import { prefer } from '@/preferences.js';
const props = withDefaults(defineProps<{
<script lang="ts">
export type MkCodeProps = {
code: string;
diffBase?: string;
forceShow?: boolean;
@ -58,7 +53,16 @@ const props = withDefaults(defineProps<{
withOuterStyle?: boolean;
lang?: string;
maxHeight?: number | null;
}>(), {
};
</script>
<script lang="ts" setup>
import { defineAsyncComponent, ref, computed } from 'vue';
import { i18n } from '@/i18n.js';
import { copyToClipboard } from '@/utility/copy-to-clipboard.js';
import { prefer } from '@/preferences.js';
const props = withDefaults(defineProps<MkCodeProps>(), {
copyButton: true,
forceShow: false,
withOuterStyle: true,

44
packages/frontend/src/components/MkCodeDiff.stories.impl.ts Normal file
View File

@ -0,0 +1,44 @@
/*
* SPDX-FileCopyrightText: syuilo and misskey-project
* SPDX-License-Identifier: AGPL-3.0-only
*/
/* eslint-disable @typescript-eslint/explicit-function-return-type */
/* eslint-disable import/no-default-export */
import type { StoryObj } from '@storybook/vue3';
import MkCode from './MkCode.vue';
const code = `for (let i, 100) {
<: if (i % 15 == 0) "FizzBuzz"
elif (i % 3 == 0) "Fizz"
elif (i % 5 == 0) "Buzz"
else i
}`;
export const Default = {
render(args) {
return {
components: {
MkCode,
},
setup() {
return {
args,
};
},
computed: {
props() {
return {
...this.args,
};
},
},
template: '<MkCode v-bind="props" />',
};
},
args: {
code,
lang: 'is',
},
parameters: {
layout: 'centered',
},
} satisfies StoryObj<typeof MkCode>;

14
packages/frontend/src/components/MkCodeDiff.vue Normal file
View File

@ -0,0 +1,14 @@
<!--
SPDX-FileCopyrightText: syuilo and misskey-project
SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<MkCode v-bind="props" />
</template>
<script lang="ts" setup>
import MkCode from '@/components/MkCode.vue';
import type { MkCodeProps } from '@/components/MkCode.vue';
const props = defineProps<MkCodeProps & { diffBase: string }>();
</script>

54
packages/frontend/src/pages/admin/modlog.ModLog.vue
View File

@ -138,22 +138,22 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
<template v-if="log.type === 'updateServerSettings'">
<MkCode
<MkCodeDiff
lang="js"
forceShow
:code="JSON5.stringify(log.info.after, null, '\t')"
:diffBase="JSON5.stringify(log.info.before, null, '\t')"
:maxHeight="300"
></MkCode>
></MkCodeDiff>
</template>
<template v-else-if="log.type === 'updateUserNote'">
<div>{{ i18n.ts.user }}: {{ log.info.userId }}</div>
<MkCode
<MkCodeDiff
forceShow
:code="log.info.after ?? ''"
:diffBase="log.info.before ?? ''"
:maxHeight="300"
></MkCode>
></MkCodeDiff>
</template>
<template v-else-if="log.type === 'suspend'">
<div>{{ i18n.ts.user }}: <MkA :to="`/admin/user/${log.info.userId}`" class="_link">@{{ log.info.userUsername }}{{ log.info.userHost ? '@' + log.info.userHost : '' }}</MkA></div>
@ -162,13 +162,13 @@ SPDX-License-Identifier: AGPL-3.0-only
<div>{{ i18n.ts.user }}: <MkA :to="`/admin/user/${log.info.userId}`" class="_link">@{{ log.info.userUsername }}{{ log.info.userHost ? '@' + log.info.userHost : '' }}</MkA></div>
</template>
<template v-else-if="log.type === 'updateRole'">
<MkCode
<MkCodeDiff
lang="js"
forceShow
:code="JSON5.stringify(log.info.after, null, '\t')"
:diffBase="JSON5.stringify(log.info.before, null, '\t')"
:maxHeight="300"
></MkCode>
></MkCodeDiff>
</template>
<template v-else-if="log.type === 'assignRole'">
<div>{{ i18n.ts.user }}: {{ log.info.userId }}</div>
@ -180,91 +180,91 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<template v-else-if="log.type === 'updateCustomEmoji'">
<div>{{ i18n.ts.emoji }}: {{ log.info.emojiId }}</div>
<MkCode
<MkCodeDiff
lang="js"
forceShow
:code="JSON5.stringify(log.info.after, null, '\t')"
:diffBase="JSON5.stringify(log.info.before, null, '\t')"
:maxHeight="300"
></MkCode>
></MkCodeDiff>
</template>
<template v-else-if="log.type === 'updateAd'">
<MkCode
<MkCodeDiff
lang="js"
forceShow
:code="JSON5.stringify(log.info.after, null, '\t')"
:diffBase="JSON5.stringify(log.info.before, null, '\t')"
:maxHeight="300"
></MkCode>
></MkCodeDiff>
</template>
<template v-else-if="log.type === 'updateGlobalAnnouncement'">
<MkCode
<MkCodeDiff
lang="js"
forceShow
:code="JSON5.stringify(log.info.after, null, '\t')"
:diffBase="JSON5.stringify(log.info.before, null, '\t')"
:maxHeight="300"
></MkCode>
></MkCodeDiff>
</template>
<template v-else-if="log.type === 'updateUserAnnouncement'">
<MkCode
<MkCodeDiff
lang="js"
forceShow
:code="JSON5.stringify(log.info.after, null, '\t')"
:diffBase="JSON5.stringify(log.info.before, null, '\t')"
:maxHeight="300"
></MkCode>
></MkCodeDiff>
</template>
<template v-else-if="log.type === 'updateAvatarDecoration'">
<MkCode
<MkCodeDiff
lang="js"
forceShow
:code="JSON5.stringify(log.info.after, null, '\t')"
:diffBase="JSON5.stringify(log.info.before, null, '\t')"
:maxHeight="300"
></MkCode>
></MkCodeDiff>
</template>
<template v-else-if="log.type === 'updateRemoteInstanceNote'">
<MkCode
<MkCodeDiff
forceShow
:code="log.info.after ?? ''"
:diffBase="log.info.before ?? ''"
:maxHeight="300"
></MkCode>
></MkCodeDiff>
</template>
<template v-else-if="log.type === 'updateSystemWebhook'">
<MkCode
<MkCodeDiff
lang="js"
forceShow
:code="JSON5.stringify(log.info.after, null, '\t')"
:diffBase="JSON5.stringify(log.info.before, null, '\t')"
:maxHeight="300"
></MkCode>
></MkCodeDiff>
</template>
<template v-else-if="log.type === 'updateAbuseReportNotificationRecipient'">
<MkCode
<MkCodeDiff
lang="js"
forceShow
:code="JSON5.stringify(log.info.after, null, '\t')"
:diffBase="JSON5.stringify(log.info.before, null, '\t')"
:maxHeight="300"
></MkCode>
></MkCodeDiff>
</template>
<template v-else-if="log.type === 'updateAbuseReportNote'">
<MkCode
<MkCodeDiff
forceShow
:code="log.info.after ?? ''"
:diffBase="log.info.before ?? ''"
:maxHeight="300"
></MkCode>
></MkCodeDiff>
</template>
<template v-else-if="log.type === 'updateProxyAccountDescription'">
<MkCode
<MkCodeDiff
forceShow
:code="log.info.after ?? ''"
:diffBase="log.info.before ?? ''"
:maxHeight="300"
></MkCode>
></MkCodeDiff>
</template>
<details>
@ -277,7 +277,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<script lang="ts" setup>
import * as Misskey from 'misskey-js';
import MkCode from '@/components/MkCode.vue';
import MkCodeDiff from '@/components/MkCodeDiff.vue';
import JSON5 from 'json5';
import { i18n } from '@/i18n.js';
import MkFolder from '@/components/MkFolder.vue';