[CP]完善JWT鉴权，实现方案从多页面改为单页面，使用dialog进行登录操作

src/main/frontend/src/App.vue

 <template>
   <div id="app" class="flex flex-col items-center justify-center h-screen">
     <div class="upload-container">
-      <el-upload
-          ref="uploadRef"
-          :action="uploadUrl"
-          :auto-upload="false"
-          :on-change="handleFileChange"
-          :file-list="fileList"
-          accept=".cc"
-          :multiple="false"
-      >
-        <template #trigger>
-          <el-button size="small" type="primary">选取文件</el-button>
+      <!-- 登录对话框 -->
+      <el-dialog :visible.sync="loginDialogVisible" title="登录">
+        <template v-slot:default>
+          <el-form @submit.prevent="handleLogin">
+            <el-form-item label="用户名">
+              <el-input v-model="loginForm.username"></el-input>
+            </el-form-item>
+            <el-form-item label="密码">
+              <el-input type="password" v-model="loginForm.password"></el-input>
+            </el-form-item>
+            <!-- 修改：移除 native-type 属性，使用 @click 触发登录方法 -->
+            <el-button type="primary" @click="handleLogin">登录</el-button>
+            <el-alert
+                v-if="loginMessage"
+                :title="loginMessage"
+                :type="loginMessageType"
+                show-icon
+                class="mt-4"
+            ></el-alert>
+          </el-form>
         </template>
+      </el-dialog>
+      <div class="button-container">
         <el-button
-            style="margin-left: 10px;"
             size="small"
-            type="success"
-            :disabled="isUploading"
-            @click="uploadFile"
+            type="info"
+            @click="loginDialogVisible = true"
         >
-          上传并编译
+          登录
         </el-button>
-      </el-upload>
+        <el-upload
+            ref="uploadRef"
+            :action="uploadUrl"
+            :auto-upload="false"
+            :on-change="handleFileChange"
+            :file-list="fileList"
+            accept=".cc"
+            :multiple="false"
+            :headers="{'Authorization': `Bearer ${token}`}"
+        >
+          <template #trigger>
+            <el-button size="small" type="primary">选取文件</el-button>
+          </template>
+          <el-button
+              style="margin-left: 10px;"
+              size="small"
+              type="success"
+              :disabled="isUploading ||!token"
+              @click="uploadFile"
+          >
+            上传并编译
+          </el-button>
+        </el-upload>
+      </div>
 
       <!-- 动态进度条 -->
       <el-progress
@@ -31,7 +63,7 @@
           :status="progressStatus"
           class="mt-4"
           :stroke-width="10"
-      :show-info="false"
+          :show-info="false"
       ></el-progress>
 
       <!-- 成功提示 -->
@@ -78,13 +110,21 @@ export default {
       downloadUrl: null,
       downloadFileName: 'radarcal',
       errorMessage: '',
-      showErrorMessage: false, // 控制错误信息栏的显示
-      isUploading: false, // 是否正在上传和编译
-      progressPercentage: 0, // 进度条百分比
-      progressStatus: '', // 进度条状态（success/error）
-      isSuccess: false, // 是否编译成功
-      isDownloadAvailable: false, // 是否显示下载按钮
-      progressInterval: null // 用于存储进度条更新的定时器
+      showErrorMessage: false,
+      isUploading: false,
+      progressPercentage: 0,
+      progressStatus: '',
+      isSuccess: false,
+      isDownloadAvailable: false,
+      progressInterval: null,
+      loginDialogVisible: false,
+      loginForm: {
+        username: '',
+        password: ''
+      },
+      token: null,
+      loginMessage: '',
+      loginMessageType: ''
     };
   },
   methods: {
@@ -111,11 +151,11 @@ export default {
       // 设置进度条定时器，100 秒内均匀增长到 100%
       this.progressInterval = setInterval(() => {
         if (this.progressPercentage < 100) {
-          this.progressPercentage += 1; // 每秒增加 1%
+          this.progressPercentage += 1;
         } else {
-          clearInterval(this.progressInterval); // 停止定时器
+          clearInterval(this.progressInterval);
         }
-      }, 1000); // 每秒更新一次进度条
+      }, 1000);
 
       try {
         const formData = new FormData();
@@ -123,33 +163,36 @@ export default {
 
         const response = await fetch(this.uploadUrl, {
           method: 'POST',
+          headers: {
+            'Authorization': `Bearer ${this.token}`
+          },
           body: formData
         });
 
-        clearInterval(this.progressInterval); // 停止进度条定时器
+        clearInterval(this.progressInterval);
 
         if (response.ok) {
           const blob = await response.blob();
           this.downloadUrl = window.URL.createObjectURL(blob);
-          this.isDownloadAvailable = true; // 显示下载按钮
-          this.isSuccess = true; // 标记编译成功
-          this.progressPercentage = 100; // 进度条完成
-          this.progressStatus = 'success'; // 进度条状态为成功
-          this.$message.success('编译成功！'); // 提示编译成功
+          this.isDownloadAvailable = true;
+          this.isSuccess = true;
+          this.progressPercentage = 100;
+          this.progressStatus ='success';
+          this.$message.success('编译成功！');
         } else {
           const errorText = await response.text();
           this.errorMessage = errorText;
-          this.showErrorMessage = true; // 显示错误信息栏
-          this.progressStatus = 'error'; // 进度条状态为失败
+          this.showErrorMessage = true;
+          this.progressStatus = 'error';
         }
       } catch (error) {
-        clearInterval(this.progressInterval); // 停止进度条定时器
+        clearInterval(this.progressInterval);
         console.error('发生错误:', error);
         this.errorMessage = '发生错误，请重试';
-        this.showErrorMessage = true; // 显示错误信息栏
-        this.progressStatus = 'error'; // 进度条状态为失败
+        this.showErrorMessage = true;
+        this.progressStatus = 'error';
       } finally {
-        this.isUploading = false; // 隐藏进度条
+        this.isUploading = false;
       }
     },
     downloadFile() {
@@ -161,6 +204,39 @@ export default {
         link.click();
         document.body.removeChild(link);
       }
+    },
+    async handleLogin() {
+      try {
+        console.log('登录信息:', this.loginForm);
+        const formData = new URLSearchParams();
+        formData.append('username', this.loginForm.username);
+        formData.append('password', this.loginForm.password);
+
+        const response = await fetch('/login', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/x-www-form-urlencoded'
+          },
+          body: formData
+        });
+
+        if (response.ok) {
+          const token = await response.text();
+          this.token = token;
+          this.loginMessage = '获取 token 成功';
+          this.$message.success('获取 token 成功');
+          this.loginMessageType ='success';
+          this.loginDialogVisible = false;
+        } else {
+          const errorText = await response.text();
+          this.loginMessage = errorText;
+          this.loginMessageType = 'error';
+        }
+      } catch (error) {
+        console.error('登录请求出错:', error);
+        this.loginMessage = '登录请求出错，请重试';
+        this.loginMessageType = 'error';
+      }
     }
   }
 };
@@ -172,4 +248,10 @@ export default {
   flex-direction: column;
   align-items: center;
 }
+.button-container {
+  display: flex;
+  flex-direction: row;
+  gap: 20px;
+  margin-bottom: 20px;
+}
 </style>
\ No newline at end of file