登录服务器设置自动获取

src/html/LoginView.vue

@@ -1,18 +1,24 @@
 <script lang="ts" setup>
 import { reactive, ref, onMounted } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
-import { BoxApi } from '@/utils/boxApi'; 
+import { BoxApi } from '@/utils/boxApi';
 import { User, Lock } from '@element-plus/icons-vue';
 
 const router = useRouter();
 const route = useRoute();
 
+// 获取主机地址（去掉端口）
+const getHostAddress = () => window.location.hostname;
+const getHostPort = () => '8000';
+
+
 const loginForm = reactive({
   username: '',
   password: '',
-  address: '',
+  address: localStorage.getItem('rememberedAddress') || getHostAddress(),
-  port: '',
+  port: localStorage.getItem('rememberedPort') || getHostPort(),
-  remember: false // 新增 "记住密码" 选项
+  remember: false,
+  serverSettings: false
 });
 
 const errorMessage = ref('');
@@ -23,50 +29,48 @@ const cookless = ref(false);
 // 创建实例
 let apiInstance: BoxApi | null = null;
 
+
+
 // 加载页面时检查是否有记住的密码
 onMounted(() => {
   const savedUsername = localStorage.getItem('username');
   const savedPassword = localStorage.getItem('rememberedPassword');
-  const savedAddress = localStorage.getItem('rememberedAddress');
+  // const savedAddress = localStorage.getItem('rememberedAddress');
-  const savedPort = localStorage.getItem('rememberedPort');
+  // const savedPort = localStorage.getItem('rememberedPort'); 
-
+  if (savedUsername && savedPassword) {
-  if (savedUsername && savedPassword && savedAddress && savedPort) {
     loginForm.username = savedUsername;
     loginForm.password = savedPassword;
-    loginForm.address = savedAddress;
-    loginForm.port = savedPort;
     loginForm.remember = true; // 如果有记住的数据，将复选框设为选中状态
   }
 });
 
 const onSubmit = async () => {
   try {
-    // 检查服务器地址和端口是否填写
+    // if (!loginForm.address || !loginForm.port) {
-    if (!loginForm.address || !loginForm.port) {
+    //   errorMessage.value = '请输入服务器地址和端口';
-      errorMessage.value = '请输入服务器地址和端口';
+    //   return;
-      return;
+    // }
-    }
+    const address = loginForm.serverSettings ? loginForm.address : getHostAddress();
+    const port = loginForm.serverSettings ? loginForm.port : getHostPort();
 
     // 实例化 SuperboxApi
-    apiInstance = new BoxApi(loginForm.address, parseInt(loginForm.port));
+    apiInstance = new BoxApi(address, parseInt(port));
 
     // 调用 SuperboxApi 的 login 方法，传入 cookless 为 false
-    const apiToken = await apiInstance.login(loginForm.username, loginForm.password,false);
+    const apiToken = await apiInstance.login(loginForm.username, loginForm.password, false);
 
     // 保存 token 到本地存储
     localStorage.setItem('alertToken', apiToken);
+    localStorage.setItem('username', loginForm.username);
+    localStorage.setItem('rememberedAddress', address);
+    localStorage.setItem('rememberedPort', port);
 
     // 如果勾选了“记住密码”，将用户名、密码、地址和端口存入 localStorage
     if (loginForm.remember) {
-      localStorage.setItem('username', loginForm.username);
       localStorage.setItem('rememberedPassword', loginForm.password);
-      localStorage.setItem('rememberedAddress', loginForm.address);
-      localStorage.setItem('rememberedPort', loginForm.port);
     } else {
       // 如果未勾选“记住密码”，清除之前记住的数据
       localStorage.removeItem('rememberedPassword');
-      localStorage.removeItem('rememberedAddress');
-      localStorage.removeItem('rememberedPort');
     }
 
     // 跳转到首页
@@ -84,9 +88,12 @@ const onSubmit = async () => {
 const onReset = () => {
   loginForm.username = '';
   loginForm.password = '';
-  loginForm.address = '';
+  // loginForm.address = '';
-  loginForm.port = '';
+  // loginForm.port = '';
+  loginForm.address = getHostAddress(); // 重置为当前主机地址
+  loginForm.port = getHostPort(); // 重置为当前端口号
   loginForm.remember = false; // 重置记住密码复选框
+  loginForm.serverSettings = false;
   errorMessage.value = '';
 };
 </script>
@@ -102,10 +109,10 @@ const onReset = () => {
       </div>
       <div class="login-body">
         <el-form :model="loginForm" style="max-width: 600px;">
-          <el-form-item>
+          <el-form-item v-show="loginForm.serverSettings">
             <el-input v-model="loginForm.address" placeholder="服务器地址" />
           </el-form-item>
-          <el-form-item>
+          <el-form-item v-show="loginForm.serverSettings">
             <el-input v-model="loginForm.port" placeholder="端口" type="number" />
           </el-form-item>
           <el-form-item>
@@ -126,10 +133,14 @@ const onReset = () => {
               </template>
             </el-input>
           </el-form-item>
-          <!-- 添加记住密码复选框 -->
+          <el-row class="setting-row">
-          <el-form-item>
+            <el-form-item>
-            <el-checkbox v-model="loginForm.remember">记住密码</el-checkbox>
+              <el-checkbox v-model="loginForm.remember">记住密码</el-checkbox>
-          </el-form-item>
+            </el-form-item>
+            <el-form-item>
+              <el-checkbox v-model="loginForm.serverSettings">服务器设置</el-checkbox>
+            </el-form-item>
+          </el-row>
           <el-row justify="end">
             <el-form-item size="small" :gutter="30">
               <el-button type="primary" @click="onReset" plain>重置</el-button>
@@ -201,4 +212,8 @@ const onReset = () => {
 .error-message {
   color: red;
 }
+
+.setting-row {
+  gap: 20px;
+}
 </style>