From b941c896aa5512240de9121a1850d55aa5f8b68b Mon Sep 17 00:00:00 2001
From: かっこかり <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Wed, 14 Jan 2026 14:02:50 +0900
Subject: refactor(frontend): MkRadiosの指定をpropsから行うように (#16597)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* refactor(frontend): MkRadiosの指定をpropsから行うように

* spdx

* fix lint

* fix: mkradiosを動的slotsに対応させる

* fix: remove comment [ci skip]

* fix lint

* fix lint

* migrate

* rename

* fix

* fix

* fix types

* remove unused imports

* fix

* wip

---------

Co-authored-by: syuilo <4439005+syuilo@users.noreply.github.com>
---
 packages/frontend/src/pages/admin/ads.vue          | 24 +++++++++++++-------
 .../frontend/src/pages/admin/announcements.vue     | 26 ++++++++++++++--------
 .../frontend/src/pages/admin/bot-protection.vue    | 18 +++++++++------
 packages/frontend/src/pages/admin/branding.vue     | 10 ++++++---
 packages/frontend/src/pages/admin/security.vue     | 14 +++++++-----
 packages/frontend/src/pages/admin/settings.vue     | 12 ++++++----
 6 files changed, 68 insertions(+), 36 deletions(-)

(limited to 'packages/frontend/src/pages/admin')

diff --git a/packages/frontend/src/pages/admin/ads.vue b/packages/frontend/src/pages/admin/ads.vue
index 94940a84ae..e06ea50453 100644
--- a/packages/frontend/src/pages/admin/ads.vue
+++ b/packages/frontend/src/pages/admin/ads.vue
@@ -22,11 +22,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<template #label>{{ i18n.ts.imageUrl }}</template>
 				</MkInput>
 
-				<MkRadios v-model="ad.place">
+				<MkRadios
+					v-model="ad.place"
+					:options="[
+						{ value: 'square' },
+						{ value: 'horizontal' },
+						{ value: 'horizontal-big' },
+					]"
+				>
 					<template #label>Form</template>
-					<option value="square">square</option>
-					<option value="horizontal">horizontal</option>
-					<option value="horizontal-big">horizontal-big</option>
 				</MkRadios>
 
 				<!--
@@ -109,7 +113,11 @@ import { i18n } from '@/i18n.js';
 import { definePage } from '@/page.js';
 import { useMkSelect } from '@/composables/use-mkselect.js';
 
-const ads = ref<Misskey.entities.Ad[]>([]);
+type Ad = Misskey.entities.Ad & {
+	place: 'square' | 'horizontal' | 'horizontal-big';
+};
+
+const ads = ref<Ad[]>([]);
 
 // ISO形式はTZがUTCになってしまうので、TZ分ずらして時間を初期化
 const localTime = new Date();
@@ -136,7 +144,7 @@ misskeyApi('admin/ad/list', { publishing: publishing }).then(adsResponse => {
 			exdate.setMilliseconds(exdate.getMilliseconds() - localTimeDiff);
 			stdate.setMilliseconds(stdate.getMilliseconds() - localTimeDiff);
 			return {
-				...r,
+				...(r as Ad),
 				expiresAt: exdate.toISOString().slice(0, 16),
 				startsAt: stdate.toISOString().slice(0, 16),
 			};
@@ -239,7 +247,7 @@ function more() {
 			exdate.setMilliseconds(exdate.getMilliseconds() - localTimeDiff);
 			stdate.setMilliseconds(stdate.getMilliseconds() - localTimeDiff);
 			return {
-				...r,
+				...(r as Ad),
 				expiresAt: exdate.toISOString().slice(0, 16),
 				startsAt: stdate.toISOString().slice(0, 16),
 			};
@@ -256,7 +264,7 @@ function refresh() {
 			exdate.setMilliseconds(exdate.getMilliseconds() - localTimeDiff);
 			stdate.setMilliseconds(stdate.getMilliseconds() - localTimeDiff);
 			return {
-				...r,
+				...(r as Ad),
 				expiresAt: exdate.toISOString().slice(0, 16),
 				startsAt: stdate.toISOString().slice(0, 16),
 			};
diff --git a/packages/frontend/src/pages/admin/announcements.vue b/packages/frontend/src/pages/admin/announcements.vue
index ddf458b268..87fc6e70f4 100644
--- a/packages/frontend/src/pages/admin/announcements.vue
+++ b/packages/frontend/src/pages/admin/announcements.vue
@@ -45,18 +45,26 @@ SPDX-License-Identifier: AGPL-3.0-only
 						<MkInput v-model="announcement.imageUrl" type="url">
 							<template #label>{{ i18n.ts.imageUrl }}</template>
 						</MkInput>
-						<MkRadios v-model="announcement.icon">
+						<MkRadios
+							v-model="announcement.icon"
+							:options="[
+								{ value: 'info', icon: 'ti ti-info-circle' },
+								{ value: 'warning', icon: 'ti ti-alert-triangle', iconStyle: 'color: var(--MI_THEME-warn);' },
+								{ value: 'error', icon: 'ti ti-circle-x', iconStyle: 'color: var(--MI_THEME-error);' },
+								{ value: 'success', icon: 'ti ti-check', iconStyle: 'color: var(--MI_THEME-success);' },
+							]"
+						>
 							<template #label>{{ i18n.ts.icon }}</template>
-							<option value="info"><i class="ti ti-info-circle"></i></option>
-							<option value="warning"><i class="ti ti-alert-triangle" style="color: var(--MI_THEME-warn);"></i></option>
-							<option value="error"><i class="ti ti-circle-x" style="color: var(--MI_THEME-error);"></i></option>
-							<option value="success"><i class="ti ti-check" style="color: var(--MI_THEME-success);"></i></option>
 						</MkRadios>
-						<MkRadios v-model="announcement.display">
+						<MkRadios
+							v-model="announcement.display"
+							:options="[
+								{ value: 'normal', label: i18n.ts.normal },
+								{ value: 'banner', label: i18n.ts.banner },
+								{ value: 'dialog', label: i18n.ts.dialog },
+							]"
+						>
 							<template #label>{{ i18n.ts.display }}</template>
-							<option value="normal">{{ i18n.ts.normal }}</option>
-							<option value="banner">{{ i18n.ts.banner }}</option>
-							<option value="dialog">{{ i18n.ts.dialog }}</option>
 						</MkRadios>
 						<MkInfo v-if="announcement.display === 'dialog'" warn>{{ i18n.ts._announcement.dialogAnnouncementUxWarn }}</MkInfo>
 						<MkSwitch v-model="announcement.forExistingUsers" :helpText="i18n.ts._announcement.forExistingUsersDescription">
diff --git a/packages/frontend/src/pages/admin/bot-protection.vue b/packages/frontend/src/pages/admin/bot-protection.vue
index 7ed280358a..481969e1a3 100644
--- a/packages/frontend/src/pages/admin/bot-protection.vue
+++ b/packages/frontend/src/pages/admin/bot-protection.vue
@@ -19,13 +19,17 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</template>
 
 		<div class="_gaps_m">
-			<MkRadios v-model="botProtectionForm.state.provider">
-				<option value="none">{{ i18n.ts.none }} ({{ i18n.ts.notRecommended }})</option>
-				<option value="hcaptcha">hCaptcha</option>
-				<option value="mcaptcha">mCaptcha</option>
-				<option value="recaptcha">reCAPTCHA</option>
-				<option value="turnstile">Turnstile</option>
-				<option value="testcaptcha">testCaptcha</option>
+			<MkRadios
+				v-model="botProtectionForm.state.provider"
+				:options="[
+					{ value: 'none', label: `${i18n.ts.none} (${i18n.ts.notRecommended})` },
+					{ value: 'hcaptcha', label: 'hCaptcha' },
+					{ value: 'mcaptcha', label: 'mCaptcha' },
+					{ value: 'recaptcha', label: 'reCAPTCHA' },
+					{ value: 'turnstile', label: 'Turnstile' },
+					{ value: 'testcaptcha', label: 'testCaptcha' },
+				]"
+			>
 			</MkRadios>
 
 			<template v-if="botProtectionForm.state.provider === 'hcaptcha'">
diff --git a/packages/frontend/src/pages/admin/branding.vue b/packages/frontend/src/pages/admin/branding.vue
index e5e0f087e1..957526b073 100644
--- a/packages/frontend/src/pages/admin/branding.vue
+++ b/packages/frontend/src/pages/admin/branding.vue
@@ -9,10 +9,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<SearchMarker path="/admin/branding" :label="i18n.ts.branding" :keywords="['branding']" icon="ti ti-paint">
 			<div class="_gaps_m">
 				<SearchMarker :keywords="['entrance', 'welcome', 'landing', 'front', 'home', 'page', 'style']">
-					<MkRadios v-model="entrancePageStyle">
+					<MkRadios
+						v-model="entrancePageStyle"
+						:options="[
+							{ value: 'classic' },
+							{ value: 'simple' },
+						]"
+					>
 						<template #label><SearchLabel>{{ i18n.ts._serverSettings.entrancePageStyle }}</SearchLabel></template>
-						<option value="classic">Classic</option>
-						<option value="simple">Simple</option>
 					</MkRadios>
 				</SearchMarker>
 
diff --git a/packages/frontend/src/pages/admin/security.vue b/packages/frontend/src/pages/admin/security.vue
index fa93124daa..f310f26107 100644
--- a/packages/frontend/src/pages/admin/security.vue
+++ b/packages/frontend/src/pages/admin/security.vue
@@ -25,11 +25,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 						<div class="_gaps_m">
 							<div><SearchText>{{ i18n.ts._sensitiveMediaDetection.description }}</SearchText></div>
 
-							<MkRadios v-model="sensitiveMediaDetectionForm.state.sensitiveMediaDetection">
-								<option value="none">{{ i18n.ts.none }}</option>
-								<option value="all">{{ i18n.ts.all }}</option>
-								<option value="local">{{ i18n.ts.localOnly }}</option>
-								<option value="remote">{{ i18n.ts.remoteOnly }}</option>
+							<MkRadios
+								v-model="sensitiveMediaDetectionForm.state.sensitiveMediaDetection"
+								:options="[
+									{ value: 'none', label: i18n.ts.none },
+									{ value: 'all', label: i18n.ts.all },
+									{ value: 'local', label: i18n.ts.localOnly },
+									{ value: 'remote', label: i18n.ts.remoteOnly },
+								]"
+							>
 							</MkRadios>
 
 							<SearchMarker :keywords="['sensitivity']">
diff --git a/packages/frontend/src/pages/admin/settings.vue b/packages/frontend/src/pages/admin/settings.vue
index 541ee7c0cd..99d4455939 100644
--- a/packages/frontend/src/pages/admin/settings.vue
+++ b/packages/frontend/src/pages/admin/settings.vue
@@ -258,11 +258,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 						<div class="_gaps">
 							<SearchMarker>
-								<MkRadios v-model="federationForm.state.federation">
+								<MkRadios
+									v-model="federationForm.state.federation"
+									:options="[
+										{ value: 'all', label: i18n.ts.all },
+										{ value: 'specified', label: i18n.ts.specifyHost },
+										{ value: 'none', label: i18n.ts.none },
+									]"
+								>
 									<template #label><SearchLabel>{{ i18n.ts.behavior }}</SearchLabel><span v-if="federationForm.modifiedStates.federation" class="_modified">{{ i18n.ts.modified }}</span></template>
-									<option value="all">{{ i18n.ts.all }}</option>
-									<option value="specified">{{ i18n.ts.specifyHost }}</option>
-									<option value="none">{{ i18n.ts.none }}</option>
 								</MkRadios>
 							</SearchMarker>
 
-- 
cgit v1.2.3-freya