From c961cb05088fc9834118288b2e53015124df2ad5 Mon Sep 17 00:00:00 2001
From: tone <3341154833@qq.com>
Date: Sat, 31 Aug 2024 22:52:44 +0800
Subject: [PATCH] =?UTF-8?q?=E5=89=8D=E7=AB=AF=E5=AE=8C=E6=88=90=E7=99=BB?=
 =?UTF-8?q?=E5=BD=95=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 tonecn/src/views/Console/Dashboard.vue |   6 +
 tonecn/src/views/Console/Login.vue     | 332 +++++++------------------
 2 files changed, 94 insertions(+), 244 deletions(-)
 create mode 100644 tonecn/src/views/Console/Dashboard.vue

diff --git a/tonecn/src/views/Console/Dashboard.vue b/tonecn/src/views/Console/Dashboard.vue
new file mode 100644
index 0000000..fed96a7
--- /dev/null
+++ b/tonecn/src/views/Console/Dashboard.vue
@@ -0,0 +1,6 @@
+<script setup lang="ts">
+
+</script>
+<template>
+Dashboard
+</template>
\ No newline at end of file
diff --git a/tonecn/src/views/Console/Login.vue b/tonecn/src/views/Console/Login.vue
index 287d870..f38e239 100644
--- a/tonecn/src/views/Console/Login.vue
+++ b/tonecn/src/views/Console/Login.vue
@@ -1,225 +1,83 @@
 <script setup>
-// import { ref, watch } from 'vue';
-// import { ElMessage } from 'element-plus'
-// import VerificationProcessVue from '@/components/RotationVerification.vue';
-// import router from '@/router';
-// import ServerAPI from '@/assets/ServerAPI';
-// import ServerSDK from '@/assets/ServerSDK';
-// let phone = ref("");
-// let code = ref("");
-// let sendSIMCodeCoolingTime = ref(-1);
-// let ShowVerificationProcessVue = ref(false);
-// // 监听phone，使其保持3-4-4分割格式
-// watch(phone,(newData)=>{
-//     newData = newData.replace(/\D/g,'');
-//     let newDatalen = newData.split('').length;
-//     if(newDatalen >= 4 && newDatalen <= 7)
-//     {
-//         let part1 = newData.slice(0, 3);
-//         let part2 = newData.slice(3);
-//         newData = part1+ " " +part2;
-//     }else if(newDatalen >= 8){
-//         let part1 = newData.slice(0, 3);
-//         let part2 = newData.slice(3, 7);
-//         let part3 = newData.slice(7);
-//         newData = part1 + " " + part2 + " " + part3; 
-//     }
-//     phone.value = newData;
-// })
-// // 监听code，使其只能是数字
-// watch(code,(newData)=>{
-//     code.value = newData.replace(/\D/g,'');
-// })
+import { ElMessage } from 'element-plus';
+import { reactive, ref } from 'vue';
+import RotationVerification from '@/components/Common/RotationVerification.vue';
+import { request } from '@/lib/request';
 
-// // 按钮 - 发送验证码，先获取图像验证码，发短信由其他函数触发
-// let sendSIMCode = async () => {
-//     // 冷却判定
-//     if(sendSIMCodeCoolingTime.value >= 0)
-//     {
-//         // 还在冷却中，不允许发送
-//         ElMessage({
-//             message: '冷却中，稍后再来获取吧',
-//             type: 'warning',
-//         });
-//         return;
-//     }
-//     // 手机号合法性验证
-//     const regex = /^1[3-9]\d{9}$/;
-//     if(!regex.test(phone.value.replace(/\D/g,'')))
-//     {
-//         ElMessage({
-//             message: '请输入正确的手机号',
-//             type: 'warning',
-//         });
-//         return;
-//     }
-
-//     // 准备发送验证码
-//     // 滑动验证码验证
-//     ShowVerificationProcessVue.value = true;
-// }
-
-// // 按钮 - 登录
-// let login = async () => {
-//     // 是否已经发送验证码
-//     if(sendSIMCodeCoolingTime.value == -1)
-//     {
-//         // 其他情况（冷却倒数，冷却结束）都可以发送
-//         ElMessage({
-//             message: '请先获取验证码',
-//             type: 'warning',
-//         });
-//         return;
-//     }
-//     // 手机号合法性验证
-//     const regex = /^1[3-9]\d{9}$/;
-//     if(!regex.test(phone.value.replace(/\D/g,'')))
-//     {
-//         ElMessage({
-//             message: '请输入正确的手机号',
-//             type: 'warning',
-//         });
-//         return;
-//     }
-//     // 验证码合法性验证
-//     const regex2 = /\d{6}$/;
-//     if(!regex2.test(code.value))
-//     {
-//         ElMessage({
-//             message: '请输入正确的验证码',
-//             type: 'warning',
-//         });
-//         return;
-//     }
-//     // ...可以登录
-//     // console.log(localStorage.getItem('login_session'))
-//     let loginRes = await ServerSDK.Login(
-//         phone.value.replace(/\D/g,''),
-//         code.value
-//     )
-//     if(loginRes == 1)
-//     {
-//         ElMessage({
-//             message: '登录成功',
-//             type: 'success',
-//         });
-//         setTimeout(() => {
-//             router.push({name: 'console_console'});
-//         }, 1000);
-//     }else if(loginRes == 0){
-//         ElMessage({
-//             message: '验证码已过期',
-//             type: 'warning',
-//         });
-//     }else if(loginRes == -1){
-//         ElMessage({
-//             message: '验证码已失效',
-//             type: 'warning',
-//         });
-//     }else if(loginRes == -2){
-//         ElMessage({
-//             message: '验证码错误',
-//             type: 'warning',
-//         });
-//     }else{
-//         ElMessage({
-//             message: '登录失败，请重试',
-//             type: 'error',
-//         });
-//     }
-// }
-
-// // 短信验证码发送成功，修改界面交互
-// let verify_success = async () => {
-//     // 验证成功，等待接收验证码后登录
-//     let sendSIMCodeRes = await ServerAPI.async_postRequest('SendSMSCode',{
-//         'phone': phone.value.replace(/\D/g,''),
-//         'session': localStorage.getItem('RVSession')
-//     })
-//     console.log(sendSIMCodeRes)
-//     if(sendSIMCodeRes && sendSIMCodeRes.status == 'OK')
-//     {
-//         // 发送成功，等待接收验证码后登录
-//         ElMessage({
-//             message: '发送成功',
-//             type: 'success',
-//         });
-//     }else{
-//         // 发送失败
-//         ElMessage({
-//             message: '发送失败，请重试',
-//             type: 'error',
-//         });
-//     }
-//     ShowVerificationProcessVue.value = false;// 关闭验证码界面
-//     sendSIMCodeCoolingTime.value = 59;// 冷却倒计时
-//     let SIMCodeCoolingTimer = setInterval(() => {
-//         sendSIMCodeCoolingTime.value--;
-//         if(sendSIMCodeCoolingTime.value <= 0)
-//         {
-//             clearInterval(SIMCodeCoolingTimer);
-//             sendSIMCodeCoolingTime.value = -2;
-//         }
-//     }, 1000);
-// }
-// // 图像验证码验证失败，短信验证码未发送
-// let verify_fail = () => {
-//     ShowVerificationProcessVue.value = false;
-//     ElMessage({
-//         message: '发送失败，请重试',
-//         type: 'error',
-//     });
-// }
-
-// let onDev = () => {
-//     ElMessage({
-//         message: '抱歉，当前内容暂未开放',
-//         type: 'warning',
-//     });
-// }
+const isCaptchaShow = ref(false);
+const loginStatus = ref(false);
+const formData = reactive({
+    username: '',
+    password: ''
+})
+const loginHandle = () => {
+    if (!formData.username || !formData.password) {
+        return ElMessage.warning('请填写账户名和密码')
+    }
+    isCaptchaShow.value = true;
+}
+const login = async () => {
+    loginStatus.value = true;
+    try {
+        let loginRes = await request.post('/console/login', {
+            username: formData.username,
+            password: formData.password,
+            session: localStorage.getItem('captcha-session')
+        })
+        loginStatus.value = false;
+        switch (loginRes.code) {
+            case 0:
+                // 成功
+                localStorage.setItem('jwtToken', loginRes.data.token);
+                ElMessage.success('登录成功');
+                return setTimeout(() => {
+                    window.location.reload();
+                }, 1000);
+            case -1:
+                // 参数缺失
+                return ElMessage.error('参数缺失');
+            case -3:
+                // 服务器错误
+                return ElMessage.error('服务器错误');
+            case -6000:
+                // 用户不存在
+                return ElMessage.error('用户不存在');
+            case -6001:
+                // 账户名或密码错误
+                return ElMessage.error('账户名或密码错误');
+            default:
+                return ElMessage.error(`未知错误 ${loginRes.message}`)
+        }
+    } catch (error) {
+        loginStatus.value = false;
+        return ElMessage.error(`未知错误 ${error}`)
+    }
+}
 </script>
 <template>
-<div class="bcc"></div>
-<div class="main-container">
-    <h1>登录到控制台</h1>
-    <el-popover
-        placement="bottom"
-        :width="300"
-        trigger="click"
-    >
-        <!-- <p>控制台是特恩(TONE)网页中的一个控制器界面，您可以使用其中开放的一些控制器功能。普通访客可通过登录后的界面暂存合法文件（图片、视频、文档、音频、压缩包等），管理员可通过登录后编辑本网页中的内容（资源、工具、日记等），详情请见<strong style="cursor: pointer;">《特恩(TONE)控制台使用协议》</strong></p> -->
-        <p>控制台是特恩(TONE)网页中的一个控制器界面，如果您是管理员，可通过登录后编辑本网页中的内容（资源、工具、日记等），详情请见<strong style="cursor: pointer;" @click="onDev">《特恩(TONE)控制台使用协议》</strong></p>
-        <template #reference>
-            <h3>控制台是什么？</h3>
-        </template>
-    </el-popover>
-    <div class="form-container">
-        <el-input 
-            v-model="phone" 
-            class="input" 
-            placeholder="请输入手机号" 
-            maxlength="13"
-            inputmode="tel"
-            clearable>
-            <template #prepend> <div class="phone-prepend">+86</div></template>
-        </el-input>
-        <el-input 
-            v-model="code" 
-            class="input"  
-            maxlength="6"
-            inputmode="numeric"
-            placeholder="验证码">
-            <template #append>
-                <el-button class="sendSIMCode-button" :class="{ 'sendSIMCode-button-cooling' : (sendSIMCodeCoolingTime > 0) }" @click="sendSIMCode">{{ sendSIMCodeCoolingTime > 0 ? `${sendSIMCodeCoolingTime}秒后再获取` : "获取验证码"}}</el-button>
+    <div class="bcc"></div>
+    <div class="main-container">
+        <h1>登录到控制台</h1>
+        <el-popover placement="bottom" :width="300" trigger="click">
+            <p>控制台是特恩(TONE)网页中的一个控制器界面，如果您是管理员，可通过登录后编辑本网页中的内容（资源、工具、日记等），详情请见<strong style="cursor: pointer;"
+                    @click="onDev">《特恩(TONE)控制台使用协议》</strong></p>
+            <template #reference>
+                <h3>控制台是什么？</h3>
             </template>
-        </el-input>
-        <el-button class="login-botton" @click="login">登录</el-button>
+        </el-popover>
+        <div class="form-container">
+            <el-input v-model="formData.username" class="input" placeholder="请输入账户名" clearable>
+            </el-input>
+            <el-input v-model="formData.password" show-password class="input" placeholder="密码">
+            </el-input>
+            <el-button class="login-botton" @click="loginHandle" :loading="loginStatus">登录</el-button>
+        </div>
     </div>
-</div>
-<VerificationProcessVue v-if="ShowVerificationProcessVue" @fail="verify_fail" @success="verify_success" :phone="phone" />
+    <RotationVerification v-if="isCaptchaShow" @fail="() => { isCaptchaShow = false; ElMessage.warning('验证失败') }"
+        @success="() => { isCaptchaShow = false; login() }" />
 </template>
 <style scoped>
-.bcc{
+.bcc {
     position: fixed;
     left: 0;
     top: 0;
@@ -228,67 +86,53 @@
     z-index: -1;
     background-color: #f6f8f9;
 }
-.main-container{
+
+.main-container {
     padding: 30px;
     margin-bottom: 160px;
 }
-.main-container>h1{
+
+.main-container>h1 {
     text-align: center;
     font-size: 42px;
     font-weight: 400;
     margin-top: 50px;
     cursor: default;
 }
-.main-container>h3{
+
+.main-container>h3 {
     text-align: center;
     cursor: pointer;
 }
-.main-container .form-container{
+
+.main-container .form-container {
     width: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
 }
-.phone-prepend{
-    width: 20px;
-    margin-left: -10px;
-    cursor: default;
-    text-align: center;
-    font-size: 15px;
-}
-.form-container .input{
+
+.form-container .input {
     width: 260px;
     height: 35px;
     font-size: 16px;
     margin-top: 10px;
 }
-.input .sendSIMCode-button{
-    font-size: 14px;
-    font-weight: 400;
-    color: #333;
-    width: 120px;
-}
-.input .sendSIMCode-button:hover{
-    color: #333;
-}
-.input .sendSIMCode-button-cooling{
-    color: #888;
-}
-.input .sendSIMCode-button-cooling:hover{
-    color: #888;
-}
-.login-botton{
+
+.login-botton {
     margin-top: 10px;
     width: 260px;
     height: 35px;
     font-weight: 500;
 }
-.login-botton:hover{
+
+.login-botton:hover {
     background-color: #fff;
     border-color: rgb(220, 223, 230);
     color: #222;
 }
-.login-botton:focus{
+
+.login-botton:focus {
     background-color: #fff;
     border-color: rgb(220, 223, 230);
     color: #606266;