添加登录和后端校验

完成后端设计（未在本仓库体现），通过安全的手段完成了登录鉴权

src/components/LoginModal/index.scss

@@ -0,0 +1,83 @@
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  padding: 48px;
+}
+
+.login-card {
+  width: 100%;
+  max-width: 600px;
+  padding: 40px;
+  text-align: center;
+}
+
+.login-title {
+  font-size: 36px;
+  font-weight: 700;
+  color: var(--text-primary);
+  display: block;
+  margin-bottom: 12px;
+}
+
+.login-desc {
+  font-size: 26px;
+  color: var(--text-secondary);
+  display: block;
+  margin-bottom: 32px;
+}
+
+.avatar-btn {
+  width: 160px;
+  height: 160px;
+  border-radius: 50%;
+  margin: 0 auto 24px;
+  background: var(--bg-input);
+  border: 3px dashed var(--line-star);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  padding: 0;
+}
+
+.avatar-img {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+}
+
+.avatar-placeholder {
+  font-size: 24px;
+  color: var(--text-secondary);
+}
+
+.nickname-input {
+  width: 100%;
+  height: 80px;
+  background: var(--bg-input);
+  border: 3px dashed var(--line-star);
+  border-radius: 16px;
+  padding: 0 24px;
+  font-size: 28px;
+  color: var(--text-primary);
+  margin-bottom: 32px;
+  text-align: center;
+}
+
+.login-actions {
+  display: flex;
+  gap: 20px;
+}
+
+.login-actions .btn-outline,
+.login-actions .btn-gradient {
+  flex: 1;
+}