kangwj
/
unis_crm
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改登录页面

main
kangwenjing 2026-04-03 13:43:47 +08:00
parent 67c41f8e88
commit eda76e84c0
3 changed files with 206 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
.idea/workspace.xml
View File

@ -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" />

15
frontend/src/pages/Login.tsx
View File

@ -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}>

272
frontend/src/pages/login.css
View File

@ -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);
}
}