From e242e067f0c02960614d7297238a267f2f6c40ec Mon Sep 17 00:00:00 2001
From: Cheng Zhou <zhoucheng857@gmail.com>
Date: Mon, 29 Jun 2026 11:31:10 +0800
Subject: [PATCH] =?UTF-8?q?feat(ui):=20=E7=BE=8E=E5=8C=96=E5=BF=98?=
 =?UTF-8?q?=E8=AE=B0=E5=AF=86=E7=A0=81=E9=A1=B5=E9=9D=A2=E8=A7=86=E8=A7=89?=
 =?UTF-8?q?=E9=A3=8E=E6=A0=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 重构整体布局为极光渐变背景 + 居中毛玻璃卡片设计
- 新增浮动极光球光效（aurora-1/2/3）与旋转几何圆环装饰动效
- 卡片采用半透明磨砂玻璃（backdrop-filter: blur(40px)），阴影层次丰富
- 步骤指引改为带渐变编号圆圈的卡片列表，悬停有微动效
- 联系方式区块增加图标 + 悬停高亮交互
- 返回登录按钮增加光泽扫光动画与上浮效果
- 完整适配移动端响应式（max-width: 640px）
---
 frontend/src/views/ForgotPassword.vue | 455 +++++++++++++++++++++++++-
 1 file changed, 443 insertions(+), 12 deletions(-)

diff --git a/frontend/src/views/ForgotPassword.vue b/frontend/src/views/ForgotPassword.vue
index 3b8fccbe..41210b4d 100644
--- a/frontend/src/views/ForgotPassword.vue
+++ b/frontend/src/views/ForgotPassword.vue
@@ -1,23 +1,454 @@
 <template>
-  <div class="forgot-container">
-    <ModulePlaceholder
-      :title="TEXT.modules.auth.forgotTitle"
-      :list-title="TEXT.modules.auth.forgotTitle"
-      :empty-title="TEXT.modules.auth.forgotTitle"
-      :empty-description="TEXT.modules.auth.forgotDesc"
-    />
+  <div class="fp-wrapper">
+    <!-- 与登录页一致的极光背景 -->
+    <div class="aurora aurora-1"></div>
+    <div class="aurora aurora-2"></div>
+    <div class="aurora aurora-3"></div>
+    <div class="deco-ring ring-1"></div>
+    <div class="deco-ring ring-2"></div>
+    <div class="noise-overlay"></div>
+
+    <div class="fp-center">
+      <div class="fp-card">
+        <!-- 返回链接 -->
+        <RouterLink to="/login" class="back-link">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M19 12H5M12 19l-7-7 7-7"/>
+          </svg>
+          返回登录
+        </RouterLink>
+
+        <!-- 图标 -->
+        <div class="fp-icon-wrap">
+          <div class="fp-icon">
+            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+              <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
+              <path d="M7 11V7a5 5 0 0 1 10 0v4"/>
+            </svg>
+          </div>
+          <div class="fp-icon-ring"></div>
+        </div>
+
+        <!-- 标题 -->
+        <h1 class="fp-title">找回密码</h1>
+        <p class="fp-desc">CTMS 暂不支持自助重置密码，请通过以下方式联系系统管理员处理。</p>
+
+        <!-- 引导步骤 -->
+        <div class="fp-steps">
+          <div class="step">
+            <div class="step-num">1</div>
+            <div class="step-body">
+              <div class="step-title">准备您的账号信息</div>
+              <div class="step-text">记录您的注册邮箱地址，以便管理员核实身份。</div>
+            </div>
+          </div>
+          <div class="step">
+            <div class="step-num">2</div>
+            <div class="step-body">
+              <div class="step-title">联系系统管理员</div>
+              <div class="step-text">通过以下任意渠道提交申请，说明账号邮箱及重置原因。</div>
+            </div>
+          </div>
+          <div class="step">
+            <div class="step-num">3</div>
+            <div class="step-body">
+              <div class="step-title">等待重置并登录</div>
+              <div class="step-text">管理员将通过邮件发送临时密码，收到后请立即修改。</div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 联系方式 -->
+        <div class="contact-block">
+          <div class="contact-label">管理员联系方式</div>
+          <a href="mailto:admin@huapont.cn" class="contact-item">
+            <div class="contact-icon">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
+                <polyline points="22,6 12,13 2,6"/>
+              </svg>
+            </div>
+            <span>admin@huapont.cn</span>
+          </a>
+        </div>
+
+        <!-- 返回按钮 -->
+        <RouterLink to="/login" class="back-btn">
+          <span>返回登录页</span>
+          <span class="back-btn-arrow">→</span>
+        </RouterLink>
+      </div>
+
+      <p class="fp-tagline">Professional · Compliant · Efficient</p>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import ModulePlaceholder from "../components/ModulePlaceholder.vue";
-import { TEXT } from "../locales";
+// 此页面为纯展示页，无需额外逻辑
 </script>
 
 <style scoped>
-.forgot-container {
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap");
+
+/* ═══════════════ 根容器 ═══════════════ */
+.fp-wrapper {
+  position: relative;
   min-height: 100vh;
-  background-color: var(--ctms-bg-base);
-  padding: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  background: #f0f4ff;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
+}
+
+/* ═══════════════ 极光背景（与登录页一致） ═══════════════ */
+.aurora {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(80px);
+  pointer-events: none;
+  z-index: 0;
+}
+
+.aurora-1 {
+  width: 700px; height: 700px;
+  background: radial-gradient(circle, rgba(99, 102, 241, 0.28) 0%, transparent 70%);
+  top: -200px; left: -200px;
+  animation: auroraFloat1 14s ease-in-out infinite alternate;
+}
+
+.aurora-2 {
+  width: 600px; height: 600px;
+  background: radial-gradient(circle, rgba(6, 182, 212, 0.22) 0%, transparent 70%);
+  bottom: -150px; right: -150px;
+  animation: auroraFloat2 18s ease-in-out infinite alternate;
+}
+
+.aurora-3 {
+  width: 400px; height: 400px;
+  background: radial-gradient(circle, rgba(168, 85, 247, 0.15) 0%, transparent 70%);
+  top: 40%; left: 50%;
+  transform: translateX(-50%);
+  animation: auroraFloat1 12s ease-in-out infinite alternate-reverse;
+}
+
+@keyframes auroraFloat1 {
+  0%   { transform: translate(0, 0) scale(1); }
+  100% { transform: translate(40px, 60px) scale(1.1); }
+}
+@keyframes auroraFloat2 {
+  0%   { transform: translate(0, 0) scale(1); }
+  100% { transform: translate(-30px, -50px) scale(1.08); }
+}
+
+/* 几何圆环 */
+.deco-ring {
+  position: absolute;
+  border-radius: 50%;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.ring-1 {
+  width: 520px; height: 520px;
+  border: 1.5px solid rgba(99, 102, 241, 0.12);
+  top: -200px; left: -180px;
+  animation: ringRotate 40s linear infinite;
+}
+
+.ring-2 {
+  width: 480px; height: 480px;
+  border: 1.5px solid rgba(6, 182, 212, 0.1);
+  bottom: -180px; right: -160px;
+  animation: ringRotate 36s linear infinite reverse;
+}
+
+@keyframes ringRotate {
+  from { transform: rotate(0deg); }
+  to   { transform: rotate(360deg); }
+}
+
+/* 噪点纹理 */
+.noise-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  opacity: 0.025;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+  background-size: 200px;
+}
+
+/* ═══════════════ 居中容器 ═══════════════ */
+.fp-center {
+  position: relative;
+  z-index: 10;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+  width: 100%;
+  max-width: 480px;
+  padding: 20px;
+  animation: cardIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+@keyframes cardIn {
+  from { opacity: 0; transform: translateY(24px) scale(0.97); }
+  to   { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+/* ═══════════════ 卡片 ═══════════════ */
+.fp-card {
+  width: 100%;
+  background: rgba(255, 255, 255, 0.78);
+  backdrop-filter: blur(40px);
+  -webkit-backdrop-filter: blur(40px);
+  border: 1px solid rgba(255, 255, 255, 0.95);
+  border-radius: 28px;
+  padding: 36px 40px 32px;
+  box-shadow:
+    0 0 0 1px rgba(99, 102, 241, 0.06) inset,
+    0 24px 64px -12px rgba(99, 102, 241, 0.18),
+    0 8px 24px -4px rgba(0, 0, 0, 0.06);
+}
+
+/* 返回链接 */
+.back-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  font-weight: 600;
+  text-decoration: none;
+  color: #9ca3af;
+  margin-bottom: 28px;
+  transition: color 0.2s;
+}
+
+.back-link:hover { color: #6366f1; }
+
+/* 图标区 */
+.fp-icon-wrap {
+  position: relative;
+  width: 64px;
+  height: 64px;
+  margin: 0 auto 24px;
+}
+
+.fp-icon {
+  width: 64px;
+  height: 64px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(6, 182, 212, 0.12));
+  border: 1px solid rgba(99, 102, 241, 0.2);
+  border-radius: 18px;
+  color: #6366f1;
+  box-shadow: 0 8px 24px -6px rgba(99, 102, 241, 0.2);
+}
+
+.fp-icon-ring {
+  position: absolute;
+  inset: -6px;
+  border: 1px solid rgba(99, 102, 241, 0.12);
+  border-radius: 26px;
+  animation: ringRotate 8s linear infinite;
+}
+
+/* 标题 */
+.fp-title {
+  font-size: 26px;
+  font-weight: 800;
+  color: #111827;
+  margin: 0 0 10px;
+  letter-spacing: -0.5px;
+  text-align: center;
+}
+
+.fp-desc {
+  font-size: 14px;
+  color: #9ca3af;
+  margin: 0 0 28px;
+  line-height: 1.7;
+  text-align: center;
+}
+
+/* ═══════════════ 步骤 ═══════════════ */
+.fp-steps {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  margin-bottom: 28px;
+}
+
+.step {
+  display: flex;
+  gap: 14px;
+  align-items: flex-start;
+  padding: 14px 16px;
+  background: rgba(99, 102, 241, 0.03);
+  border: 1px solid rgba(99, 102, 241, 0.08);
+  border-radius: 14px;
+  transition: border-color 0.2s, background 0.2s;
+}
+
+.step:hover {
+  border-color: rgba(99, 102, 241, 0.16);
+  background: rgba(99, 102, 241, 0.05);
+}
+
+.step-num {
+  flex-shrink: 0;
+  width: 26px;
+  height: 26px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #6366f1, #06b6d4);
+  color: white;
+  font-size: 12px;
+  font-weight: 800;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4px 10px -2px rgba(99, 102, 241, 0.35);
+  margin-top: 1px;
+}
+
+.step-body {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.step-title {
+  font-size: 13px;
+  font-weight: 700;
+  color: #1f2937;
+  line-height: 1.4;
+}
+
+.step-text {
+  font-size: 12px;
+  color: #9ca3af;
+  line-height: 1.5;
+}
+
+/* ═══════════════ 联系方式 ═══════════════ */
+.contact-block {
+  margin-bottom: 28px;
+}
+
+.contact-label {
+  font-size: 12px;
+  font-weight: 600;
+  color: #6b7280;
+  margin-bottom: 10px;
+  letter-spacing: 0.3px;
+}
+
+.contact-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 14px 16px;
+  background: rgba(255, 255, 255, 0.7);
+  border: 1px solid rgba(209, 213, 219, 0.6);
+  border-radius: 12px;
+  text-decoration: none;
+  color: #374151;
+  font-size: 14px;
+  font-weight: 500;
+  transition: all 0.2s;
+}
+
+.contact-item:hover {
+  border-color: rgba(99, 102, 241, 0.3);
+  background: rgba(99, 102, 241, 0.04);
+  color: #6366f1;
+  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.08);
+}
+
+.contact-icon {
+  width: 36px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(6, 182, 212, 0.1));
+  border-radius: 10px;
+  flex-shrink: 0;
+}
+
+.contact-icon svg {
+  width: 16px;
+  height: 16px;
+  color: #6366f1;
+}
+
+/* ═══════════════ 返回按钮 ═══════════════ */
+.back-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: 100%;
+  height: 50px;
+  border-radius: 14px;
+  font-size: 15px;
+  font-weight: 700;
+  text-decoration: none;
+  color: white;
+  background: linear-gradient(135deg, #6366f1, #4f46e5 50%, #0891b2);
+  box-shadow: 0 8px 24px -6px rgba(99, 102, 241, 0.5);
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  overflow: hidden;
+}
+
+.back-btn::before {
+  content: "";
+  position: absolute;
+  top: 0; left: -75%;
+  width: 50%; height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
+  transform: skewX(-20deg);
+  transition: left 0.6s ease;
+}
+
+.back-btn:hover::before { left: 150%; }
+
+.back-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 14px 32px -8px rgba(99, 102, 241, 0.55);
+  background: linear-gradient(135deg, #818cf8, #6366f1 50%, #06b6d4);
+}
+
+.back-btn:active { transform: translateY(0); }
+
+.back-btn-arrow {
+  font-size: 18px;
+  transition: transform 0.3s;
+}
+
+.back-btn:hover .back-btn-arrow { transform: translateX(4px); }
+
+/* ═══════════════ 底部标语 ═══════════════ */
+.fp-tagline {
+  font-size: 11px;
+  color: rgba(99, 102, 241, 0.35);
+  letter-spacing: 3px;
+  text-transform: uppercase;
+  font-weight: 600;
+  margin: 0;
+}
+
+/* ═══════════════ 响应式 ═══════════════ */
+@media (max-width: 640px) {
+  .fp-center { padding: 16px; }
+  .fp-card { padding: 28px 24px 24px; border-radius: 22px; }
+  .fp-title { font-size: 22px; }
 }
 </style>