From eda76e84c03698d48f39eb48a17ceaa19d993145 Mon Sep 17 00:00:00 2001
From: kangwenjing <1138819403@qq.com>
Date: Fri, 3 Apr 2026 13:43:47 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E7=99=BB=E5=BD=95=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .idea/workspace.xml          |  19 +--
 frontend/src/pages/Login.tsx |  15 ++
 frontend/src/pages/login.css | 272 ++++++++++++++++++++++++-----------
 3 files changed, 206 insertions(+), 100 deletions(-)

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 9045d5b3..deb827d5 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -4,23 +4,7 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="4c558d98-824e-4a48-ba48-bd2e6172f9f4" name="更改" comment="修改定位信息 0323">
-      <change beforePath="$PROJECT_DIR$/backend/src/main/java/com/unis/crm/dto/expansion/ChannelExpansionItemDTO.java" beforeDir="false" afterPath="$PROJECT_DIR$/backend/src/main/java/com/unis/crm/dto/expansion/ChannelExpansionItemDTO.java" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/backend/src/main/java/com/unis/crm/dto/expansion/SalesExpansionItemDTO.java" beforeDir="false" afterPath="$PROJECT_DIR$/backend/src/main/java/com/unis/crm/dto/expansion/SalesExpansionItemDTO.java" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/backend/src/main/java/com/unis/crm/dto/opportunity/OpportunityItemDTO.java" beforeDir="false" afterPath="$PROJECT_DIR$/backend/src/main/java/com/unis/crm/dto/opportunity/OpportunityItemDTO.java" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/backend/src/main/java/com/unis/crm/mapper/ProfileMapper.java" beforeDir="false" afterPath="$PROJECT_DIR$/backend/src/main/java/com/unis/crm/mapper/ProfileMapper.java" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/backend/src/main/java/com/unis/crm/service/impl/ExpansionServiceImpl.java" beforeDir="false" afterPath="$PROJECT_DIR$/backend/src/main/java/com/unis/crm/service/impl/ExpansionServiceImpl.java" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/backend/src/main/java/com/unis/crm/service/impl/OpportunityServiceImpl.java" beforeDir="false" afterPath="$PROJECT_DIR$/backend/src/main/java/com/unis/crm/service/impl/OpportunityServiceImpl.java" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/backend/src/main/java/com/unis/crm/service/impl/WorkServiceImpl.java" beforeDir="false" afterPath="$PROJECT_DIR$/backend/src/main/java/com/unis/crm/service/impl/WorkServiceImpl.java" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/backend/src/main/resources/mapper/expansion/ExpansionMapper.xml" beforeDir="false" afterPath="$PROJECT_DIR$/backend/src/main/resources/mapper/expansion/ExpansionMapper.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/backend/src/main/resources/mapper/opportunity/OpportunityMapper.xml" beforeDir="false" afterPath="$PROJECT_DIR$/backend/src/main/resources/mapper/opportunity/OpportunityMapper.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/backend/src/main/resources/mapper/profile/ProfileMapper.xml" beforeDir="false" afterPath="$PROJECT_DIR$/backend/src/main/resources/mapper/profile/ProfileMapper.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/backend/src/main/resources/mapper/work/WorkMapper.xml" beforeDir="false" afterPath="$PROJECT_DIR$/backend/src/main/resources/mapper/work/WorkMapper.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/frontend/src/lib/auth.ts" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/lib/auth.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/frontend/src/pages/Expansion.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/pages/Expansion.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/frontend/src/pages/Opportunities.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/pages/Opportunities.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/frontend/src/pages/Work.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/pages/Work.tsx" afterDir="false" />
-    </list>
+    <list default="true" id="4c558d98-824e-4a48-ba48-bd2e6172f9f4" name="更改" comment="修改定位信息 0323" />
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
     <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
@@ -99,6 +83,7 @@
       <workItem from="1774574410059" duration="200000" />
       <workItem from="1774576185724" duration="1651000" />
       <workItem from="1774763863609" duration="16084000" />
+      <workItem from="1775116718799" duration="3143000" />
     </task>
     <task id="LOCAL-00001" summary="修改定位信息 0323">
       <option name="closed" value="true" />
diff --git a/frontend/src/pages/Login.tsx b/frontend/src/pages/Login.tsx
index 7916c365..780f5a67 100644
--- a/frontend/src/pages/Login.tsx
+++ b/frontend/src/pages/Login.tsx
@@ -265,8 +265,23 @@ export default function LoginPage() {
               </div>
 
               <div className="login-panel-formWrap">
+                <div className="login-mobile-brand">
+                  <div className="login-brand-lockup">
+                    <div className="login-brand-mark">
+                      <img src="/crm-favicon.svg" alt={appName} />
+                    </div>
+                    <div>
+                      <p className="login-brand-kicker">智慧销售协同平台</p>
+                      <h1>{appName}</h1>
+                    </div>
+                  </div>
+                  <p className="login-mobile-description">{systemDescription}</p>
+                </div>
+
                 <div className="login-panel-header">
                   <p className="login-panel-eyebrow">欢迎回来</p>
+                  <h3>账号登录</h3>
+                  <p>输入账号信息后进入 CRM 工作台，继续处理拓展、商机与日报。</p>
                 </div>
 
                 <form className="login-form" onSubmit={handleSubmit}>
diff --git a/frontend/src/pages/login.css b/frontend/src/pages/login.css
index 752fa074..f3486bc7 100644
--- a/frontend/src/pages/login.css
+++ b/frontend/src/pages/login.css
@@ -1,25 +1,35 @@
 .login-page-shell {
+  --login-ink: #0f172a;
+  --login-body: #334155;
+  --login-muted: #64748b;
+  --login-line: rgba(148, 163, 184, 0.28);
+  --login-surface: rgba(255, 255, 255, 0.82);
+  --login-surface-strong: rgba(255, 255, 255, 0.94);
+  --login-accent: #7c3aed;
+  --login-accent-strong: #4338ca;
+  --login-accent-soft: rgba(124, 58, 237, 0.14);
+  --login-shadow: 0 28px 80px rgba(15, 23, 42, 0.14);
   position: relative;
   min-height: 100vh;
   min-height: 100dvh;
   overflow-x: hidden;
   overflow-y: auto;
   background:
-    radial-gradient(circle at top left, rgba(139, 92, 246, 0.12), transparent 34%),
-    radial-gradient(circle at bottom right, rgba(59, 130, 246, 0.08), transparent 30%),
-    linear-gradient(180deg, #f8fafc 0%, #eef2ff 52%, #f8fafc 100%);
+    radial-gradient(circle at top left, rgba(167, 139, 250, 0.2), transparent 34%),
+    radial-gradient(circle at bottom right, rgba(96, 165, 250, 0.14), transparent 32%),
+    linear-gradient(160deg, #fbfaff 0%, #f1efff 42%, #f7f8fc 100%);
   background-size: cover;
   background-position: center;
-  color: #334155;
+  color: var(--login-body);
 }
 
 .login-page-backdrop {
   position: absolute;
   inset: 0;
   background:
-    radial-gradient(circle at 20% 18%, rgba(196, 181, 253, 0.5), transparent 24%),
-    radial-gradient(circle at 85% 80%, rgba(191, 219, 254, 0.42), transparent 22%),
-    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.4));
+    radial-gradient(circle at 18% 16%, rgba(196, 181, 253, 0.5), transparent 24%),
+    radial-gradient(circle at 82% 84%, rgba(191, 219, 254, 0.48), transparent 22%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.52));
 }
 
 .login-page-grid {
@@ -51,12 +61,12 @@
   justify-content: center;
   overflow: hidden;
   border-radius: 22px;
-  background: linear-gradient(135deg, #ede9fe, #ddd6fe);
-  border: 1px solid rgba(139, 92, 246, 0.12);
-  box-shadow: 0 18px 40px rgba(139, 92, 246, 0.12);
+  background: linear-gradient(145deg, rgba(237, 233, 254, 0.98), rgba(224, 231, 255, 0.88));
+  border: 1px solid rgba(124, 58, 237, 0.12);
+  box-shadow: 0 18px 40px rgba(124, 58, 237, 0.14);
   font-size: 1.75rem;
   font-weight: 700;
-  color: #7c3aed;
+  color: var(--login-accent);
 }
 
 .login-brand-mark img {
@@ -70,7 +80,7 @@
   font-size: 0.78rem;
   letter-spacing: 0.24em;
   text-transform: uppercase;
-  color: #8b5cf6;
+  color: var(--login-accent);
 }
 
 .login-brand-lockup h1 {
@@ -79,7 +89,7 @@
   font-weight: 700;
   line-height: 1.08;
   white-space: nowrap;
-  color: #0f172a;
+  color: var(--login-ink);
 }
 
 .login-panel {
@@ -93,10 +103,10 @@
   max-width: 980px;
   padding: 18px;
   border-radius: 32px;
-  background: rgba(255, 255, 255, 0.78);
-  color: #0f172a;
-  border: 1px solid rgba(226, 232, 240, 0.92);
-  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.08);
+  background: var(--login-surface);
+  color: var(--login-ink);
+  border: 1px solid rgba(255, 255, 255, 0.68);
+  box-shadow: var(--login-shadow);
   backdrop-filter: blur(24px);
 }
 
@@ -116,9 +126,9 @@
   padding: 36px;
   border-radius: 28px;
   background:
-    radial-gradient(circle at top left, rgba(139, 92, 246, 0.14), transparent 34%),
-    linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.86));
-  border: 1px solid rgba(226, 232, 240, 0.84);
+    radial-gradient(circle at top left, rgba(124, 58, 237, 0.16), transparent 34%),
+    linear-gradient(155deg, rgba(255, 255, 255, 0.96), rgba(243, 244, 255, 0.92));
+  border: 1px solid rgba(226, 232, 240, 0.76);
 }
 
 .login-panel-formWrap {
@@ -127,8 +137,28 @@
   justify-content: center;
   padding: 34px 32px;
   border-radius: 28px;
-  background: rgba(255, 255, 255, 0.94);
-  border: 1px solid rgba(226, 232, 240, 0.82);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96));
+  border: 1px solid rgba(226, 232, 240, 0.8);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
+}
+
+.login-mobile-brand {
+  display: none;
+  margin-bottom: 24px;
+  padding: 18px 18px 16px;
+  border-radius: 24px;
+  background:
+    radial-gradient(circle at top right, rgba(191, 219, 254, 0.22), transparent 30%),
+    linear-gradient(145deg, rgba(244, 241, 255, 0.96), rgba(255, 255, 255, 0.98));
+  border: 1px solid rgba(203, 213, 225, 0.64);
+}
+
+.login-mobile-description {
+  margin: 14px 0 0;
+  font-size: 0.95rem;
+  line-height: 1.7;
+  color: var(--login-muted);
 }
 
 .login-panel-header {
@@ -145,20 +175,25 @@
 
 .login-panel-header p {
   margin: 0;
-  color: #475569;
-  line-height: 1.7;
+  color: var(--login-muted);
+  line-height: 1.72;
 }
 
 .login-panel-eyebrow {
-  color: #7c3aed !important;
-  font-size: clamp(1.4rem, 1.5vw, 1.75rem);
+  color: var(--login-accent) !important;
+  font-size: 1.18rem;
   font-weight: 700;
   line-height: 1.2;
-  letter-spacing: 0.04em;
+  letter-spacing: 0.12em;
   text-transform: uppercase;
   text-align: left;
 }
 
+.login-panel-header > p:not(.login-panel-eyebrow),
+.login-panel-header h3 {
+  display: none;
+}
+
 .login-form {
   display: flex;
   flex-direction: column;
@@ -172,27 +207,34 @@
 }
 
 .login-field span {
-  font-size: 0.94rem;
-  font-weight: 600;
-  color: #0f172a;
+  font-size: 0.92rem;
+  font-weight: 700;
+  letter-spacing: 0.01em;
+  color: var(--login-ink);
 }
 
 .login-field input {
   box-sizing: border-box;
   width: 100%;
-  border: 1px solid rgba(148, 163, 184, 0.45);
-  border-radius: 16px;
-  background: rgba(255, 255, 255, 0.96);
-  padding: 14px 16px;
+  border: 1px solid var(--login-line);
+  border-radius: 18px;
+  background: rgba(248, 250, 252, 0.94);
+  padding: 15px 16px;
   font-size: 1rem;
-  color: #0f172a;
+  color: var(--login-ink);
   outline: none;
-  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
+  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, transform 0.18s ease;
+}
+
+.login-field input::placeholder {
+  color: #94a3b8;
 }
 
 .login-field input:focus {
-  border-color: rgba(124, 58, 237, 0.48);
-  box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.12);
+  border-color: rgba(124, 58, 237, 0.5);
+  background: rgba(255, 255, 255, 0.98);
+  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.12);
   transform: translateY(-1px);
 }
 
@@ -207,9 +249,9 @@
   align-items: center;
   justify-content: center;
   overflow: hidden;
-  border: 1px solid rgba(148, 163, 184, 0.45);
-  border-radius: 16px;
-  background: #ffffff;
+  border: 1px solid var(--login-line);
+  border-radius: 18px;
+  background: rgba(248, 250, 252, 0.96);
   cursor: pointer;
   min-height: 52px;
   padding: 0;
@@ -226,7 +268,7 @@
   align-items: center;
   justify-content: space-between;
   gap: 16px;
-  color: #475569;
+  color: var(--login-muted);
   font-size: 0.92rem;
 }
 
@@ -240,7 +282,7 @@
 .login-checkbox input {
   width: 16px;
   height: 16px;
-  accent-color: #7c3aed;
+  accent-color: var(--login-accent);
 }
 
 .login-hint {
@@ -249,29 +291,31 @@
 
 .login-error {
   border-radius: 16px;
-  background: rgba(254, 226, 226, 0.9);
+  background: rgba(254, 242, 242, 0.92);
   border: 1px solid rgba(248, 113, 113, 0.3);
   padding: 12px 14px;
   color: #b91c1c;
   font-size: 0.94rem;
+  line-height: 1.55;
 }
 
 .login-submit {
-  min-height: 54px;
+  min-height: 56px;
   border: 0;
-  border-radius: 18px;
+  border-radius: 20px;
   background: linear-gradient(135deg, #7c3aed, #4f46e5);
   color: #f8fafc;
   font-size: 1rem;
   font-weight: 700;
+  letter-spacing: 0.02em;
   cursor: pointer;
-  box-shadow: 0 16px 32px rgba(124, 58, 237, 0.2);
+  box-shadow: 0 18px 34px rgba(124, 58, 237, 0.2);
   transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
 }
 
 .login-submit:hover:not(:disabled) {
   transform: translateY(-1px);
-  box-shadow: 0 20px 38px rgba(124, 58, 237, 0.24);
+  box-shadow: 0 22px 40px rgba(124, 58, 237, 0.26);
 }
 
 .login-submit:disabled,
@@ -295,11 +339,12 @@
   .login-panel-card {
     margin: 0 auto;
     max-width: 460px;
-    padding: 0;
-    background: transparent;
-    border: 0;
-    box-shadow: none;
-    backdrop-filter: none;
+    padding: 10px;
+    border-radius: 30px;
+    background: rgba(255, 255, 255, 0.64);
+    border: 1px solid rgba(255, 255, 255, 0.54);
+    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.12);
+    backdrop-filter: blur(18px);
   }
 
   .login-panel-layout {
@@ -312,57 +357,102 @@
   }
 
   .login-panel-formWrap {
-    padding: 30px;
+    padding: 28px 24px;
+  }
+
+  .login-mobile-brand {
+    display: block;
   }
 }
 
 @media (max-width: 640px) {
   .login-page-grid {
+    min-height: 100vh;
+    min-height: 100dvh;
+    align-items: center;
+    justify-items: center;
     padding:
-      max(16px, env(safe-area-inset-top))
-      16px
-      max(20px, calc(16px + env(safe-area-inset-bottom)));
+      max(10px, env(safe-area-inset-top))
+      12px
+      max(14px, calc(12px + env(safe-area-inset-bottom)));
+  }
+
+  .login-panel {
+    width: 100%;
   }
 
   .login-panel-card {
-    max-width: none;
-    padding: 0;
-  }
-
-  .login-panel-formWrap {
-    padding: 20px 16px;
+    width: 100%;
+    max-width: 100%;
+    padding: 6px;
     border-radius: 24px;
   }
 
+  .login-panel-formWrap {
+    padding: 18px 14px 14px;
+    border-radius: 20px;
+  }
+
   .login-panel-header {
-    margin-bottom: 22px;
-    text-align: center;
+    display: none;
   }
 
-  .login-panel-header h3 {
-    font-size: 1.6rem;
+  .login-mobile-brand {
+    margin-bottom: 16px;
+    padding: 12px;
+    border-radius: 18px;
   }
 
-  .login-panel-header p {
-    font-size: 1.25rem;
-    line-height: 1.6;
+  .login-mobile-brand .login-brand-lockup {
+    align-items: center;
+    gap: 12px;
+  }
+
+  .login-mobile-brand .login-brand-mark {
+    height: 48px;
+    width: 48px;
+    border-radius: 16px;
+  }
+
+  .login-mobile-brand .login-brand-kicker {
+    margin-bottom: 6px;
+    font-size: 0.68rem;
+    letter-spacing: 0.18em;
+  }
+
+  .login-mobile-brand .login-brand-lockup h1 {
+    font-size: clamp(1.02rem, 5.8vw, 1.24rem);
+    white-space: nowrap;
+    line-height: 1.1;
+  }
+
+  .login-mobile-description {
+    margin-top: 12px;
+    font-size: 0.88rem;
+    line-height: 1.65;
+  }
+
+  .login-mobile-brand .login-brand-kicker,
+  .login-mobile-description,
+  .login-panel-header > p:not(.login-panel-eyebrow) {
+    display: none;
   }
 
   .login-form {
-    gap: 16px;
+    gap: 12px;
   }
 
   .login-field {
-    gap: 8px;
+    gap: 6px;
   }
 
   .login-field span {
-    font-size: 0.9rem;
+    font-size: 0.86rem;
   }
 
   .login-field input {
-    min-height: 50px;
-    padding: 13px 14px;
+    min-height: 46px;
+    padding: 11px 13px;
     border-radius: 14px;
     font-size: 16px;
   }
@@ -372,14 +462,13 @@
   }
 
   .login-captcha-button {
-    min-height: 50px;
+    min-height: 46px;
     border-radius: 14px;
   }
 
   .login-form-meta {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 12px;
+    justify-content: flex-start;
+    gap: 10px;
   }
 
   .login-hint {
@@ -392,19 +481,36 @@
   }
 
   .login-submit {
-    min-height: 52px;
+    min-height: 50px;
     border-radius: 16px;
   }
 }
 
 @media (max-width: 400px) {
   .login-page-grid {
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+
+  .login-panel-formWrap {
     padding-left: 12px;
     padding-right: 12px;
   }
 
-  .login-panel-formWrap {
-    padding-left: 14px;
-    padding-right: 14px;
+  .login-mobile-brand {
+    padding: 10px;
+  }
+
+  .login-mobile-brand .login-brand-mark {
+    height: 44px;
+    width: 44px;
+  }
+
+  .login-mobile-brand .login-brand-lockup {
+    gap: 10px;
+  }
+
+  .login-mobile-brand .login-brand-lockup h1 {
+    font-size: clamp(0.96rem, 5.4vw, 1.12rem);
   }
 }