feat(M08-D): 补后台登录与可撤销会话

admin/src/styles.css

@@ -6,6 +6,120 @@
     "Segoe UI", sans-serif;
 }
 
+.login-shell {
+  display: grid;
+  grid-template-columns: minmax(360px, 1fr) minmax(420px, .85fr);
+  min-height: 100vh;
+  background: #f4f7fb;
+}
+
+.login-story {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  min-height: 100vh;
+  padding: clamp(32px, 6vw, 84px);
+  overflow: hidden;
+  background:
+    radial-gradient(circle at 82% 18%, rgba(73, 123, 180, .28), transparent 32%),
+    linear-gradient(145deg, #101a2b, #173454 62%, #1e4a70);
+  color: #f8fafc;
+}
+
+.login-brand {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.login-brand span {
+  display: grid;
+  width: 42px;
+  height: 42px;
+  place-items: center;
+  border-radius: 11px;
+  background: #e9f2ff;
+  color: #152033;
+  font-weight: 900;
+}
+
+.login-story h1 {
+  max-width: 680px;
+  margin: 14px 0 18px;
+  font-size: clamp(36px, 5vw, 68px);
+  line-height: 1.08;
+  letter-spacing: -.04em;
+}
+
+.login-story > div > p:last-child {
+  max-width: 620px;
+  color: #c6d5e5;
+  font-size: 17px;
+  line-height: 1.8;
+}
+
+.login-story ul {
+  display: grid;
+  gap: 12px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.login-story li {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  color: #dce8f4;
+}
+
+.login-form-wrap {
+  display: grid;
+  min-height: 100vh;
+  padding: 32px;
+  place-items: center;
+}
+
+.login-card {
+  width: min(100%, 440px);
+  padding: clamp(28px, 5vw, 48px);
+  border: 1px solid #dce4ee;
+  border-radius: 22px;
+  background: #fff;
+  box-shadow: 0 24px 70px rgba(30, 51, 78, .12);
+}
+
+.login-card header h2 {
+  margin: 6px 0 8px;
+  font-size: 30px;
+}
+
+.login-card header > p:last-child,
+.login-card footer {
+  color: #6b788c;
+}
+
+.login-card .el-alert {
+  margin: 20px 0 0;
+}
+
+.login-card .el-form {
+  margin-top: 24px;
+}
+
+.login-card .el-button {
+  width: 100%;
+}
+
+.login-card footer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  margin-top: 22px;
+  font-size: 12px;
+}
+
 .content-page {
   display: grid;
   gap: 16px;
@@ -564,11 +678,40 @@ textarea {
   font-size: 24px;
 }
 
-.token-box {
+.session-box,
+.session-user {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.session-user > span {
   display: grid;
-  grid-template-columns: minmax(220px, 360px) 40px;
-  gap: 8px;
-  width: min(100%, 420px);
+  width: 38px;
+  height: 38px;
+  place-items: center;
+  border-radius: 50%;
+  background: #e8f1ff;
+  color: #1b416d;
+  font-weight: 800;
+}
+
+.session-user > div {
+  display: grid;
+  gap: 2px;
+}
+
+.session-user small {
+  max-width: 260px;
+  overflow: hidden;
+  color: #6b788c;
+  font-size: 11px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.credential-form {
+  margin-top: 18px;
 }
 
 .metric-grid {
@@ -2152,6 +2295,14 @@ textarea {
 }
 
 @media (max-width: 980px) {
+  .login-shell {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .login-story {
+    padding: 36px;
+  }
+
   .app-shell {
     grid-template-columns: 1fr;
   }
@@ -2263,6 +2414,28 @@ textarea {
 }
 
 @media (max-width: 560px) {
+  .login-shell {
+    grid-template-columns: 1fr;
+  }
+
+  .login-story {
+    display: none;
+  }
+
+  .login-form-wrap {
+    min-height: 100vh;
+    padding: 18px;
+  }
+
+  .login-card {
+    padding: 26px 22px;
+    border-radius: 16px;
+  }
+
+  .session-user > div {
+    display: none;
+  }
+
   .sidebar {
     grid-template-columns: 1fr;
   }