feat: 设置页密码提示框

src/views/setting/components/SecuritySection.vue

@@ -78,11 +78,14 @@
 		<div v-show="isEditing && isEditingPassword" class="security-row">
 			<div class="security-label">{{ t('Settings.security.newPassword') }}</div>
 			<div class="outlined-field">
+				<PasswordTip :value="newPassword" v-show="showNewPWDTip" />
 				<el-input
 					:model-value="newPassword"
 					type="password"
 					show-password
 					:placeholder="t('Settings.security.newPasswordPlaceholder')"
+					@blur="showNewPWDTip = false"
+					@focus="showNewPWDTip = true"
 					@update:model-value="emit('update:newPassword', String($event))"
 				/>
 			</div>
@@ -92,12 +95,15 @@
 		<div v-show="isEditing && isEditingPassword" class="security-row">
 			<div class="security-label">{{ t('Settings.security.currentPassword') }}</div>
 			<div class="outlined-field">
+				<PasswordTip :value="newPassword" v-show="showOldPWDTip" />
 				<el-input
 					:model-value="currentPassword"
 					type="password"
 					show-password
 					:placeholder="t('Settings.security.currentPasswordPlaceholder')"
 					@update:model-value="emit('update:currentPassword', String($event))"
+					@blur="showOldPWDTip = false"
+					@focus="showOldPWDTip = true"
 				/>
 			</div>
 		</div>
@@ -106,8 +112,10 @@
 </template>
 
 <script setup lang="ts">
+	import { ref } from 'vue'
 	import { useI18n } from 'vue-i18n'
 	import SettingsSection from './SettingsSection.vue'
+	import PasswordTip from '@/views/login/password-tip.vue'
 
 	defineProps<{
 		email: string
@@ -132,6 +140,9 @@
 	}>()
 
 	const { t } = useI18n()
+
+	const showNewPWDTip = ref(false)
+	const showOldPWDTip = ref(false)
 </script>
 
 <style lang="less" scoped>
@@ -199,7 +210,14 @@
 
 	.outlined-field {
 		.field-frame();
-
+		position: relative;
+		:deep(.password-tip) {
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			transform: translateY(-100%);
+		}
 		:deep(.el-input) {
 			width: 100%;
 			min-height: 4rem;