fix：样式UI调整

src/views/Login.vue

@@ -37,7 +37,7 @@
       <!-- 登录表单 -->
       <div class="login-form">
         <div class="form-header">
-          <h2>账号密码登录</h2>
+          <h2>{{ isRegisterMode ? '账号注册' : '账号密码登录' }}</h2>
         </div>
 
         <n-form
@@ -50,15 +50,24 @@
           <n-form-item path="studentId">
             <template #label>
               <div class="student-label-container">
-                <span class="label-text">学号</span>
+                <span class="label-text">{{ getIdLabel() }}</span>
-                <div class="input-hint-right">
+                <div v-if="!isRegisterMode" class="input-hint-right">
-                  没有账号？<n-button text type="primary" size="small">立即注册</n-button>
+                  没有账号？<n-button text type="primary" size="small" @click="isRegisterMode = true">立即注册</n-button>
                 </div>
               </div>
             </template>
             <n-input
               v-model:value="formData.studentId"
-              placeholder="2014195268"
+              :placeholder="getIdPlaceholder()"
+              class="form-input"
+            />
+          </n-form-item>
+
+          <!-- 邀请码输入框，仅在注册模式显示 -->
+          <n-form-item v-if="isRegisterMode" path="inviteCode" label="邀请码">
+            <n-input
+              v-model:value="formData.inviteCode"
+              placeholder="请输入邀请码"
               class="form-input"
             />
           </n-form-item>
@@ -73,7 +82,8 @@
             />
           </n-form-item>
 
-          <div class="form-options">
+          <!-- 登录模式：显示记住我和忘记密码 -->
+          <div v-if="!isRegisterMode" class="form-options">
             <n-checkbox v-model:checked="rememberMe" size="small">
               下次自动登录
             </n-checkbox>
@@ -82,6 +92,11 @@
             </n-button>
           </div>
 
+          <!-- 注册模式：显示密码要求提示 -->
+          <div v-if="isRegisterMode" class="password-hint">
+            8-12位字符，需同时包含数字/字母/符号
+          </div>
+
           <n-form-item>
             <n-button
               type="primary"
@@ -91,14 +106,14 @@
               attr-type="submit"
               class="login-btn"
             >
-              登录
+              {{ isRegisterMode ? '注册' : '登录' }}
             </n-button>
           </n-form-item>
         </n-form>
 
         <div class="form-footer">
           <p class="agreement-text">
-            登录即同意我们的用户协议
+            {{ isRegisterMode ? '登录即代表阅读并同意' : '登录即同意我们的用户协议' }}
             <n-button text type="primary" size="small">《服务协议和隐私政策》</n-button>
           </p>
         </div>
@@ -121,11 +136,13 @@ const userStore = useUserStore()
 const formRef = ref<FormInst | null>(null)
 const rememberMe = ref(false)
 const activeTab = ref('student') // 当前选中的标签页
+const isRegisterMode = ref(false) // 注册模式状态
 
 // 表单数据
 const formData = reactive({
   studentId: '',
-  password: ''
+  password: '',
+  inviteCode: '' // 添加邀请码字段
 })
 
 // 表单验证规则
@@ -133,7 +150,17 @@ const rules: FormRules = {
   studentId: [
     {
       required: true,
-      message: '请输入学号',
+      message: () => {
+        if (isRegisterMode.value) return '请输入工号'
+        return activeTab.value === 'teacher' ? '请输入工号' : '请输入学号'
+      },
+      trigger: ['input', 'blur']
+    }
+  ],
+  inviteCode: [
+    {
+      required: true,
+      message: '请输入邀请码',
       trigger: ['input', 'blur']
     }
   ],
@@ -144,13 +171,35 @@ const rules: FormRules = {
       trigger: ['input', 'blur']
     },
     {
-      min: 3,
+      min: isRegisterMode.value ? 8 : 3,
-      message: '密码长度不能少于3位',
+      max: isRegisterMode.value ? 12 : undefined,
+      message: isRegisterMode.value ? '密码长度需8-12位字符' : '密码长度不能少于3位',
+      trigger: ['input', 'blur']
+    },
+    {
+      pattern: isRegisterMode.value ? /^(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]).*$/ : undefined,
+      message: '密码需同时包含数字/字母/符号',
       trigger: ['input', 'blur']
     }
   ]
 }
 
+// 获取ID标签文字
+const getIdLabel = () => {
+  if (isRegisterMode.value) {
+    return '工号' // 注册模式统一显示工号
+  }
+  return activeTab.value === 'teacher' ? '工号' : '学号'
+}
+
+// 获取ID输入框占位符
+const getIdPlaceholder = () => {
+  if (isRegisterMode.value) {
+    return '请输入您的工号'
+  }
+  return activeTab.value === 'teacher' ? '请输入您的工号' : '2014195268'
+}
+
 // 处理表单提交
 const handleSubmit = async () => {
   if (!formRef.value) return
@@ -303,7 +352,7 @@ const handleSubmit = async () => {
 .user-type-tabs {
   display: flex;
   justify-content: center;
-  gap: 40px; /* 增加按钮间距 */
+  gap: 60px; /* 进一步增加按钮间距 */
   margin-bottom: 40px;
   position: relative;
 }
@@ -339,10 +388,10 @@ const handleSubmit = async () => {
   bottom: -8px;
   left: 50%;
   transform: translateX(-50%);
-  width: 40px;
+  width: 84px; /* 固定宽度84px */
-  height: 3px;
+  height: 2px; /* 高度2px */
-  background: #0288D1;
+  background: #0088D1; /* 使用指定颜色 */
-  border-radius: 2px;
+  border-radius: 1px;
 }
 
 /* 悬停效果 */
@@ -356,7 +405,7 @@ const handleSubmit = async () => {
   padding: 40px 35px; /* 减少内边距 */
   border-radius: 12px; /* 添加适度的圆角 */
   border: 2px solid #FFFFFF;
-  max-height: 630px; /* 限制最大高度 */
+  max-height: 730px; /* 限制最大高度 */
 }
 
 /* 表单样式 */
@@ -373,7 +422,8 @@ const handleSubmit = async () => {
 }
 
 :deep(.n-form-item-label) {
-  width: 48px;
+  width: auto; /* 改为自动宽度，防止换行 */
+  min-width: 48px; /* 设置最小宽度 */
   height: 32px;
   font-family: PingFangSC, PingFang SC;
   font-weight: 400;
@@ -382,6 +432,7 @@ const handleSubmit = async () => {
   line-height: 32px;
   text-align: left;
   font-style: normal;
+  white-space: nowrap; /* 防止换行 */
 }
 
 /* 隐藏必填字段的星号 */
@@ -466,18 +517,67 @@ const handleSubmit = async () => {
   margin-bottom: 8px;
 }
 
+/* 调整输入框内文字和占位符位置 */
+:deep(.n-input .n-input__input-el) {
+  line-height: 45px !important; /* 使用输入框的高度作为行高 */
+  padding: 0 16px !important; /* 左右边距 */
+  height: 45px !important; /* 确保输入框内部高度 */
+  display: flex !important;
+  align-items: center !important; /* 垂直居中 */
+}
+
+:deep(.n-input .n-input__placeholder) {
+  line-height: 45px !important; /* 占位符使用相同高度 */
+  display: flex !important;
+  align-items: center !important; /* 占位符也垂直居中 */
+  top: 0 !important; /* 重置顶部位置 */
+  left: 16px !important; /* 与输入文字对齐 */
+}
+
+/* 确保输入框外部容器高度正确 */
+:deep(.n-input) {
+  height: 45px !important; /* 外部容器高度 */
+}
+
+:deep(.n-input__input) {
+  height: 45px !important; /* 输入区域高度 */
+  min-height: 45px !important;
+}
+
 /* 表单项间距调整 */
 :deep(.n-form-item) {
-  margin-bottom: 16px; /* 表单项之间16px间距 */
+  margin-bottom: 8px; /* 进一步减少表单项之间的间距 */
 }
 
 :deep(.n-form-item-label) {
-  margin-bottom: 16px; /* 标签和输入框之间16px间距 */
+  margin-bottom: 8px; /* 进一步减少标签和输入框之间的间距 */
+}
+
+/* 减少表单项内部的默认间距 */
+:deep(.n-form-item-blank) {
+  min-height: auto !important;
+  padding: 0 !important;
+}
+
+/* 减少表单项的整体高度 */
+:deep(.n-form-item__feedback-wrapper) {
+  min-height: auto !important;
+  margin-top: 4px !important;
 }
 
 /* 密码表单项特殊间距 */
 :deep(.n-form-item:nth-child(2)) {
-  margin-top: -12px; /* 减少密码项与上方的距离 */
+  margin-top: -6px; /* 减少密码项与上方的距离 */
+}
+
+/* 邀请码表单项间距（注册模式下的第二个表单项） */
+:deep(.n-form-item:nth-child(2)[path="inviteCode"]) {
+  margin-top: -6px; /* 减少邀请码与学号的距离 */
+}
+
+/* 进一步减少所有表单项的内部间距 */
+:deep(.n-form-item-label__text) {
+  margin-bottom: 0 !important;
 }
 
 
@@ -656,6 +756,21 @@ const handleSubmit = async () => {
   margin-left: 4px;
 }
 
+/* 密码提示样式 */
+.password-hint {
+  margin-top: -24px; /* 与form-options相同的位置 */
+  margin-bottom: 20px;
+  width: 400px;
+  height: 28px;
+  font-family: AppleSystemUIFont;
+  font-size: 16px;
+  color: #999999;
+  line-height: 28px;
+  text-align: left;
+  font-style: normal;
+  text-transform: none;
+}
+
 /* 响应式设计 */
 @media (max-width: 1400px) {
   .login-page {
@@ -701,7 +816,7 @@ const handleSubmit = async () => {
 
   .user-type-tabs {
     justify-content: center;
-    gap: 32px; /* 中等屏幕间距 */
+    gap: 50px; /* 中等屏幕间距 */
   }
 
   .type-tab {
@@ -736,7 +851,7 @@ const handleSubmit = async () => {
 
   .user-type-tabs {
     margin-bottom: 30px;
-    gap: 28px; /* 小屏幕间距 */
+    gap: 40px; /* 小屏幕间距 */
   }
 
   .type-tab {
@@ -747,7 +862,7 @@ const handleSubmit = async () => {
   }
 
   .type-tab.active::after {
-    width: 30px;
+    width: 60px; /* 中等屏幕下划线宽度 */
     height: 2px;
   }
 }
@@ -784,7 +899,7 @@ const handleSubmit = async () => {
   }
 
   .type-tab.active::after {
-    width: 25px;
+    width: 50px; /* 小屏幕下划线宽度 */
     height: 2px;
   }
 }