feat: security部分改为二次编辑

src/views/setting/components/SecuritySection.vue

@@ -9,13 +9,26 @@
 			<div class="security-inline-row">
 				<div class="security-label inline">{{ t('Settings.security.email') }}</div>
 				<div class="security-static">{{ email }}</div>
-        <button v-show="isEditing" type="button" class="small-btn" @click="emit('reset-email')">
+				<button
+					v-show="isEditing && !isEditingEmail"
+					type="button"
+					class="small-btn"
+					@click="emit('edit-email')"
+				>
+					{{ t('Settings.buttons.edit') }}
+				</button>
+				<button
+					v-show="isEditing && isEditingEmail"
+					type="button"
+					class="small-btn"
+					@click="emit('reset-email')"
+				>
 					{{ t('Settings.buttons.cancel') }}
 				</button>
 			</div>
 		</div>
 
-    <div v-show="isEditing" class="security-row">
+		<div v-show="isEditing && isEditingEmail" class="security-row">
 			<div class="security-label">{{ t('Settings.security.newEmail') }}</div>
 			<div class="outlined-field verify-field">
 				<el-input
@@ -43,13 +56,26 @@
 			<div class="security-inline-row">
 				<div class="security-label inline">{{ t('Settings.security.password') }}</div>
 				<div class="security-static password-mask">.........</div>
-        <button v-show="isEditing" type="button" class="small-btn" @click="emit('reset-password')">
+				<button
+					v-show="isEditing && !isEditingPassword"
+					type="button"
+					class="small-btn"
+					@click="emit('edit-password')"
+				>
+					{{ t('Settings.buttons.edit') }}
+				</button>
+				<button
+					v-show="isEditing && isEditingPassword"
+					type="button"
+					class="small-btn"
+					@click="emit('reset-password')"
+				>
 					{{ t('Settings.buttons.cancel') }}
 				</button>
 			</div>
 		</div>
 
-    <div v-show="isEditing" class="security-row">
+		<div v-show="isEditing && isEditingPassword" class="security-row">
 			<div class="security-label">{{ t('Settings.security.newPassword') }}</div>
 			<div class="outlined-field">
 				<el-input
@@ -63,7 +89,7 @@
 			<div class="security-tip">{{ t('Settings.security.passwordTip') }}</div>
 		</div>
 
-    <div v-show="isEditing" class="security-row">
+		<div v-show="isEditing && isEditingPassword" class="security-row">
 			<div class="security-label">{{ t('Settings.security.currentPassword') }}</div>
 			<div class="outlined-field">
 				<el-input
@@ -89,6 +115,8 @@ defineProps<{
 		newPassword: string
 		currentPassword: string
 		isEditing: boolean
+		isEditingEmail: boolean
+		isEditingPassword: boolean
 		isEmailVerified: boolean
 	}>()
 
@@ -96,6 +124,8 @@ const emit = defineEmits<{
 		(event: 'update:newEmail', value: string): void
 		(event: 'update:newPassword', value: string): void
 		(event: 'update:currentPassword', value: string): void
+		(event: 'edit-email'): void
+		(event: 'edit-password'): void
 		(event: 'reset-email'): void
 		(event: 'reset-password'): void
 		(event: 'verify-email'): void
@@ -234,6 +264,12 @@ const { t } = useI18n()
 		letter-spacing: -0.03em;
 		color: #232323;
 		cursor: pointer;
+		/* 
+  &.edit-btn {
+    border-color: #232323;
+    background: #232323;
+    color: #ffffff;
+  } */
 	}
 
 	.verified-tip {

src/views/setting/index.vue

@@ -25,7 +25,11 @@
 				v-model:current-password="securityDraft.currentPassword"
 				:email="displayData.email"
 				:is-editing="isEditing"
+				:is-editing-email="isEditingEmail"
+				:is-editing-password="isEditingPassword"
 				:is-email-verified="isEmailVerified"
+				@edit-email="handleEditEmail"
+				@edit-password="handleEditPassword"
 				@reset-email="resetSecurityEmail"
 				@reset-password="resetSecurityPassword"
 				@verify-email="handleVerifyEmail"
@@ -98,9 +102,13 @@
 		fullName,
 		roleModel,
 		needsEmailVerification,
+		isEditingEmail,
+		isEditingPassword,
 		handleEdit,
 		handleDiscard,
 		handleSave,
+		handleEditEmail,
+		handleEditPassword,
 		resetSecurityEmail,
 		resetSecurityPassword,
 		handleVerifyEmail,

src/views/setting/useSettingsForm.ts

@@ -88,6 +88,8 @@ export function useSettingsForm({ t, locale }: UseSettingsFormOptions) {
 	const verificationTargetEmail = shallowRef('')
 	const verifiedEmail = shallowRef('')
 	const verificationCode = shallowRef('')
+	const isEditingEmail = shallowRef(false)
+	const isEditingPassword = shallowRef(false)
 
 	const roleList = computed(() =>
 		roleValues.map((value) => ({
@@ -178,6 +180,8 @@ export function useSettingsForm({ t, locale }: UseSettingsFormOptions) {
 		draftData.value = cloneSettingsData(sourceData.value)
 		securityDraft.value = createEmptySecurityDraft()
 		resetEmailVerificationState()
+		isEditingEmail.value = false
+		isEditingPassword.value = false
 	}
 
 	const handleEdit = () => {
@@ -188,11 +192,21 @@ export function useSettingsForm({ t, locale }: UseSettingsFormOptions) {
 	const resetSecurityEmail = () => {
 		securityDraft.value.newEmail = ''
 		resetEmailVerificationState()
+		isEditingEmail.value = false
 	}
 
 	const resetSecurityPassword = () => {
 		securityDraft.value.newPassword = ''
 		securityDraft.value.currentPassword = ''
+		isEditingPassword.value = false
+	}
+
+	const handleEditEmail = () => {
+		isEditingEmail.value = true
+	}
+
+	const handleEditPassword = () => {
+		isEditingPassword.value = true
 	}
 
 	const handleDiscard = () => {
@@ -385,11 +399,15 @@ export function useSettingsForm({ t, locale }: UseSettingsFormOptions) {
 		fullName,
 		roleModel,
 		needsEmailVerification,
+		isEditingEmail,
+		isEditingPassword,
 		handleEdit,
 		handleDiscard,
 		handleSave,
 		resetSecurityEmail,
 		resetSecurityPassword,
+		handleEditEmail,
+		handleEditPassword,
 		handleVerifyEmail,
 		handleSendVerifyCode,
 		handleVerificationSubmit,