feat(login): 重构登录页面并集成用户协议功能

- 添加响应拦截器自动处理返回数据
- 集成 Element Plus UI 组件库
- 添加用户协议勾选验证和提示功能
- 重构登录页面样式和布局
- 实现用户协议勾选状态切换功能
- 优化登录按钮样式和交互效果
- 添加 SCSS 样式支持和相关依赖

module/web/package.json

@@ -9,11 +9,13 @@
   },
   "dependencies": {
     "axios": "^1.12.2",
+    "element-plus": "^2.13.0",
     "vue": "^3.5.21",
     "vue-router": "^4.5.1"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.1",
+    "sass": "^1.97.1",
     "vite": "^7.1.7"
   }
 }

module/web/src/main.js

@@ -2,6 +2,9 @@ import {createApp} from 'vue'
 import './style.css'
 import App from './App.vue'
 import router from './router/index.js'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+import "@/assets/css/index.scss"
 
 document.onkeydown = document.onkeyup = document.onkeypress = function (e) {
   if (e && e.keyCode == 123) {
@@ -10,6 +13,6 @@ document.onkeydown = document.onkeyup = document.onkeypress = function (e) {
   }
 }
 const app = createApp(App)
-
+app.use(ElementPlus, {size: 'small', zIndex: 3000})
 app.use(router)
 app.mount('#app')

module/web/src/utils/request.js

@@ -7,4 +7,7 @@ const ins = axios.create({
 ins.interceptors.request.use(config => {
   return config
 })
+ins.interceptors.response.use(res => {
+  return res.data
+})
 export default ins

module/web/src/views/login.vue

@@ -1,20 +1,35 @@
 <script setup>
 import {defineOptions, onMounted, ref} from "vue";
 import request from "@/utils/request";
+import {ElMessage} from "element-plus";
 
 defineOptions({name: 'Login'});
 
 const servers = ref([])
 const account = ref('')
 const password = ref('')
+const agree = ref(false)
 
-function handleLogin() {
+async function handleLogin() {
-
+  if (!agree.value) return ElMessage.error('请勾选同意用户协议')
+  const {data} = await request.post('/api/server/list', {
+    username: account,
+    password
+  })
+  sessionStorage.setItem("CQ-TOKEN", data.token)
 }
 
 async function getServers() {
   const {data} = await request.get('/api/server/list')
-  servers.value = data.data
+  servers.value = data
+}
+
+function protectProtocol() {
+  const agree = document.getElementById('agree')
+  const agreeBtn = document.querySelector('#agree .agree_btn')
+  agree.addEventListener('click', function () {
+    agreeBtn.classList.toggle('agree_btn_checked')
+  })
 }
 
 onMounted(() => {
@@ -23,21 +38,20 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="wrapper pagebg">
+  <div class="login wrapper pagebg">
-    <div class="dialog account" id="account-login">
+    <div class="loginBox flex column p-8 gap-8" id="account-login">
-      <h2 class="title">神临苍月</h2>
+      <b class="title mb-20">神临苍月</b>
-      <input type="text" id="account" v-model="account" placeholder="请输入账号" @keyup="v=>account=v.replace(/[\W]/g, '')" autocomplete="off"/>
+      <input class="w100" type="text" id="account" v-model="account" placeholder="请输入账号" @keyup="v=>account=v.replace(/[\W]/g, '')" autocomplete="off"/>
-      <input type="password" id="password" v-model="password" placeholder="请输入密码"/>
+      <input class="w100" type="password" id="password" v-model="password" placeholder="请输入密码"/>
       <select id="serverId" style="border: none; display: none; margin-bottom: 10px;">
         <option value="0">请选择区服</option>
         <option v-for="item in servers" :value="item.id">{{ item.name }}区</option>
       </select>
-      <div id="agree" class="agree">
+      <div id="agree" class="agree flex gap-4">
-        <span><img
+        <el-checkbox v-model="agree"/>
-            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAVFBMVEWeICicICedISidISibIiadISeeISiOOTmdISeeISj///+aGSGcHiT68vOYFByhKjHRmZzqz9CzVlvx4OG4YWXJh4qpPUPkw8WkMjjdsrS/cXatR00P5JiiAAAACnRSTlPuTT//Gq+6A9iEOAr7KAAAAbBJREFUSMeVlte2gyAQRTHYcBBQiu3///OOMdZALvCUrHX2mYYAqao8Y2VN/l11ybK8qkiVv1hR04hVF+yVVwT1NaFRi9RIkIzVNHrVLCOsIPEAKRgpEwJgiJIk6ZEgUQlxAP5JKhLgnCYAHOg4ygQAwBnjEIsDAEDOSvUgooHRTHowkQCseqWbLh546wPA2e6r/4T6xp8SP/t9+M9vfQCQEtt9MnDqfSlxLpfe9OMVcLveB6x2StllG9D6n5/6dvqeg4BFaT3M46eQm76zywPgHAMMTaOVkQAf/6Hd9QpTvW8N4LJf+41ETwEbzJ296uVzewtwtnsLMDoVgi53PcADAGmmTdAO1gnxpb9H4HtCW0dmF/A/AOz4ocAyJqv8/geALbXdrm9a3Wm//xlh7Xl7EvvPp/+1hgWndCIB/+ukpTOXMgL+90nLxd6CePyvEfDjoc6orv3l//ge8Hjo7aB/+D8BgWnN2wD9/l+HAO65cU2rDfh7ANy1WHs3+P19x8y6sWdrzejz9wOCusWN1OcfOMg4B786CGC7QgRJv7KSL8Xkazf5Yk9+OiQ/TlKfP3/iYTk/HuYxLgAAAABJRU5ErkJggg=="></span>
+        我已阅读并同意 <a @click="protectProtocol">用户协议及隐私协议</a>
-        我已阅读并同意 <a href="javascript:void(0);" id="agree_btn">用户协议及隐私协议</a>
       </div>
-      <a id="submitButton" class="button fit" @click="handleLogin">登 录</a>
+      <div class="button pointer w100 py-8" @click="handleLogin">登 录</div>
       <div style="display:flex;justify-content:center;gap:8px;font-size:12px">
         <div style="display:flex;align-items:center;flex-direction:column;gap:4px;cursor:pointer" id="linuxdoConnect">
           <img src="/img/linuxdo_logo.png" style="width:60px;height:60px" alt="Linux.Do登录"/>
@@ -53,9 +67,47 @@ onMounted(() => {
   </div>
 </template>
 
-<style scoped>
+<style lang="scss" scoped>
-.gamebg {
+.login {
-  background-image: url("/login/login_bg.jpg");
+  position: relative;
+  background-image: url("/img/login_bg.jpg");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  background-position: center;
+  height: 100vh;
+
+  .loginBox {
+    position: absolute;
+    width: 300px;
+    top: 40%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    backdrop-filter: blur(4px);
+
+    & > .title {
+      font-size: 28px
+    }
+
+    .button {
+      background: rgb(245, 189, 16);
+      text-align: center;
+      letter-spacing: 8px;
+      border-radius: 8px;
+      cursor: pointer;
+
+      &:hover {
+        opacity: .8
+      }
+    }
+
+    .agree_btn {
+      width: 16px;
+    }
+
+    & > input {
+      height: 32px;
+    }
+  }
 }
 
 </style>