GuanM/NapCatQQ
1
0
Fork 0
mirror of https://github.com/NapNeko/NapCatQQ.git synced 2024-11-21 09:36:35 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: 拆分组件

Browse Source
This commit is contained in:
手瓜一十雪 2024-11-14 21:46:54 +08:00
parent 4be6d8ec01
commit 5bcc130dd7
2 changed files with 62 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
napcat.webui/src/App.vue
View File

@ -1,96 +1,9 @@
<template>
<div class="login-container">
<h2>WebUi Login</h2>
<t-form ref="form" :data="formData" :colon="true" :label-width="0" @submit="onSubmit">
<t-form-item name="password">
<t-input v-model="formData.password" type="password" clearable placeholder="请输入Token">
<template #prefix-icon>
<lock-on-icon />
</template>
</t-input>
</t-form-item>
<t-form-item>
<t-button theme="primary" type="submit" block>登录</t-button>
</t-form-item>
</t-form>
<p class="error-message" v-if="errorMessage">{{ errorMessage }}</p>
<div id="app">
<LoginForm />
</div>
</template>
<script setup>
import { reactive, ref } from 'vue';
import { MessagePlugin } from 'tdesign-vue-next';
import { LockOnIcon } from 'tdesign-icons-vue-next';
const formData = reactive({
password: '',
});
const errorMessage = ref('');
const onSubmit = async ({ validateResult, firstError }) => {
if (validateResult === true) {
errorMessage.value = '';
try {
let loginResponse = await fetch('../api/auth/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ token: formData.password })
});
const loginResponseJson = await loginResponse.json();
let retCode = loginResponseJson.code;
if (retCode === 0) {
let retCredential = loginResponseJson.data.Credential;
localStorage.setItem('auth', retCredential);
let QQLoginResponse = await fetch('../api/QQLogin/CheckLoginStatus', {
method: 'POST',
headers: {
'Authorization': "Bearer " + retCredential,
'Content-Type': 'application/json'
}
});
if (QQLoginResponse.status == 200) {
let QQLoginResponseJson = await QQLoginResponse.json();
if (QQLoginResponseJson.code == 0) {
if (QQLoginResponseJson.data.isLogin) {
window.location.href = './config.html';
} else {
window.location.href = './QQLogin.html';
}
}
}
MessagePlugin.success('登录成功即将跳转');
} else {
console.log(loginResponseJson.message);
MessagePlugin.warning(loginResponseJson.message);
}
} catch (e) {
MessagePlugin.error('登录失败');
console.log('请求异常', e);
}
} else {
console.log('Validate Errors: ', firstError, validateResult);
errorMessage.value = firstError;
MessagePlugin.warning(firstError);
}
};
import LoginForm from './components/WebUiLogin.vue';
</script>
<style scoped>
.login-container {
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
background-color: white;
max-width: 400px;
min-width: 300px;
position: relative;
}
.error-message {
color: red;
margin-top: 5px;
}
</style>

59
napcat.webui/src/components/WebUiLogin.vue Normal file
View File

@ -0,0 +1,59 @@
<template>
<div class="login-container">
<h2>WebUi Login</h2>
<t-form ref="form" :data="formData" :colon="true" :label-width="0" @submit="onSubmit">
<t-form-item name="password">
<t-input v-model="formData.password" type="password" clearable placeholder="请输入Token">
<template #prefix-icon>
<lock-on-icon />
</template>
</t-input>
</t-form-item>
<t-form-item>
<t-button theme="primary" type="submit" block>登录</t-button>
</t-form-item>
</t-form>
<p class="error-message" v-if="errorMessage">{{ errorMessage }}</p>
</div>
</template>
<script setup>
import { reactive, ref } from 'vue';
import { MessagePlugin } from 'tdesign-vue-next';
import { LockOnIcon } from 'tdesign-icons-vue-next';
const formData = reactive({
password: '',
});
const errorMessage = ref('');
const onSubmit = async ({ validateResult, firstError }) => {
if (validateResult === true) {
errorMessage.value = '';
try {
// 处理表单提交逻辑
} catch (error) {
errorMessage.value = '登录失败，请重试';
}
} else {
errorMessage.value = firstError;
}
};
</script>
<style scoped>
.login-container {
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
background-color: white;
max-width: 400px;
min-width: 300px;
position: relative;
}
.error-message {
color: red;
margin-top: 5px;
}
</style>