重构AccountProfile.vue

dashboard/src/components/settings/profile/AccountProfile.vue

@@ -53,16 +53,12 @@
 				</template>
 			</ListItem>
 			<ListItem
-				:title="user.is_2fa_enabled ? $t('Disable Two-Factor Authentication') : $t('Enable Two-Factor Authentication')"
+				:title="twoFactorAuthTitle"
-				:subtitle="
+				:subtitle="twoFactorAuthSubtitle"
-					user.is_2fa_enabled
-						? $t('Disable two-factor authentication for your account')
-						: $t('Enable two-factor authentication for your account to add an extra layer of security')
-				"
 			>
 				<template #actions>
 					<Button @click="show2FADialog = true">
-						{{ user.is_2fa_enabled ? $t('Disable') : $t('Enable') }}
+						{{ twoFactorAuthButtonLabel }}
 					</Button>
 				</template>
 			</ListItem>
@@ -77,12 +73,8 @@
 				</template>
 			</ListItem>
 			<ListItem
-				:title="teamEnabled ? $t('Disable Account') : $t('Enable Account')"
+				:title="accountStatusTitle"
-				:subtitle="
+				:subtitle="accountStatusSubtitle"
-					teamEnabled
-						? $t('Disable your account and stop billing')
-						: $t('Enable your account and resume billing')
-				"
 			>
 				<template #actions>
 					<Button
@@ -97,7 +89,7 @@
 						"
 					>
 						<span :class="{ 'text-red-600': teamEnabled }">{{
-							teamEnabled ? $t('Disable') : $t('Enable')
+							accountStatusButtonLabel
 						}}</span>
 					</Button>
 				</template>
@@ -246,6 +238,30 @@ export default {
 		user() {
 			return this.$team?.pg?.user_info;
 		},
+		twoFactorAuthTitle() {
+			return this.user.is_2fa_enabled 
+				? this.$t('Disable Two-Factor Authentication') 
+				: this.$t('Enable Two-Factor Authentication');
+		},
+		twoFactorAuthSubtitle() {
+			return this.user.is_2fa_enabled
+				? this.$t('Disable two-factor authentication for your account')
+				: this.$t('Enable two-factor authentication for your account to add an extra layer of security');
+		},
+		twoFactorAuthButtonLabel() {
+			return this.user.is_2fa_enabled ? this.$t('Disable') : this.$t('Enable');
+		},
+		accountStatusTitle() {
+			return this.teamEnabled ? this.$t('Disable Account') : this.$t('Enable Account');
+		},
+		accountStatusSubtitle() {
+			return this.teamEnabled
+				? this.$t('Disable your account and stop billing')
+				: this.$t('Enable your account and resume billing');
+		},
+		accountStatusButtonLabel() {
+			return this.teamEnabled ? this.$t('Disable') : this.$t('Enable');
+		},
 	},
 	resources: {
 		updateProfile() {

dashboard/src/components/settings/profile/TFADialog.vue

@@ -1,11 +1,7 @@
 <template>
 	<Dialog
 		v-model="show"
-		:options="{
+		:options="dialogOptions"
-			title: is2FAEnabled
-				? $t('Disable Two-Factor Authentication')
-				: $t('Enable Two-Factor Authentication')
-		}"
 	>
 		<template #body-content>
 			<Configure2FA @enabled="closeDialog" @disabled="closeDialog" />
@@ -35,6 +31,13 @@ export default {
 		is2FAEnabled() {
 			return this.$team.pg?.user_info?.is_2fa_enabled;
 		},
+		dialogOptions() {
+			return {
+				title: this.is2FAEnabled
+					? this.$t('Disable Two-Factor Authentication')
+					: this.$t('Enable Two-Factor Authentication')
+			};
+		},
 		show: {
 			get() {
 				return this.modelValue;

jcloud/translations/zh.csv

@@ -880,6 +880,11 @@ Enabled,启用,
 Disabled,禁用,
 Activate,激活,
 Disable,禁用,
+Enable,启用,
+Disable Account,禁用账户,
+Enable Account,启用账户,
+Disable your account and stop billing,禁用您的账户并停止计费,
+Enable your account and resume billing,启用您的账户并恢复计费,
 Disable Webhook,禁用 Webhook,
 Endpoint - {endpoint}<br>Are you sure you want to disable this webhook?<br>,端点 - {endpoint}<br>确定要禁用该 webhook 吗？<br>,
 Webhook disabled successfully,Webhook 禁用成功,