feat(登录): 添加设备选择功能并实现登录接口集成
在登录弹窗中增加设备选择下拉框,并修改postAction以支持baseURL参数 实现用户登录接口调用,根据选择的设备进行登录请求
This commit is contained in:
@@ -11,6 +11,16 @@
|
|||||||
<p class="text-base font-semibold text-gray-700 mb-6">登录后体验更多功能</p>
|
<p class="text-base font-semibold text-gray-700 mb-6">登录后体验更多功能</p>
|
||||||
|
|
||||||
<el-form :model="form" :rules="rules" ref="formRef" class="w-full" @submit.prevent="handleLogin">
|
<el-form :model="form" :rules="rules" ref="formRef" class="w-full" @submit.prevent="handleLogin">
|
||||||
|
<el-form-item prop="sparkDevice">
|
||||||
|
<el-select v-model="form.sparkDevice" placeholder="请选择设备" size="large" class="w-full" :no-data-text="'暂未发现设备,请先扫描'">
|
||||||
|
<el-option
|
||||||
|
v-for="device in sparkStore.devices"
|
||||||
|
:key="device.name"
|
||||||
|
:label="`${device.name} (${device.addresses?.[0]}:${device.port})`"
|
||||||
|
:value="device.name"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
<el-form-item prop="username">
|
<el-form-item prop="username">
|
||||||
<el-input v-model="form.username" placeholder="请输入账号" :prefix-icon="User" size="large" />
|
<el-input v-model="form.username" placeholder="请输入账号" :prefix-icon="User" size="large" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
@@ -56,6 +66,10 @@
|
|||||||
import { ref, watch } from 'vue';
|
import { ref, watch } from 'vue';
|
||||||
import { User } from '@element-plus/icons-vue';
|
import { User } from '@element-plus/icons-vue';
|
||||||
import { ElMessage } from 'element-plus';
|
import { ElMessage } from 'element-plus';
|
||||||
|
import { useSparkStore } from '@/stores/spark';
|
||||||
|
import { loginAction } from '@/http/api.js';
|
||||||
|
|
||||||
|
const sparkStore = useSparkStore();
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
modelValue: {
|
modelValue: {
|
||||||
@@ -78,11 +92,13 @@ const loading = ref(false);
|
|||||||
const agreed = ref(false);
|
const agreed = ref(false);
|
||||||
|
|
||||||
const form = ref({
|
const form = ref({
|
||||||
|
sparkDevice: sparkStore.selectedDevice?.name || '',
|
||||||
username: '',
|
username: '',
|
||||||
password: '',
|
password: '',
|
||||||
});
|
});
|
||||||
|
|
||||||
const rules = {
|
const rules = {
|
||||||
|
sparkDevice: [{ required: true, message: '请选择设备', trigger: 'change' }],
|
||||||
username: [{ required: true, message: '请输入账号', trigger: 'blur' }],
|
username: [{ required: true, message: '请输入账号', trigger: 'blur' }],
|
||||||
password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
|
password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
|
||||||
};
|
};
|
||||||
@@ -96,10 +112,16 @@ async function handleLogin() {
|
|||||||
if (!valid) return;
|
if (!valid) return;
|
||||||
loading.value = true;
|
loading.value = true;
|
||||||
try {
|
try {
|
||||||
// TODO: 替换为真实登录接口
|
const device = sparkStore.devices.find((d) => d.name === form.value.sparkDevice);
|
||||||
await new Promise((r) => setTimeout(r, 800));
|
if (device) sparkStore.selectDevice(device);
|
||||||
ElMessage.success('登录成功');
|
|
||||||
emit('login-success', { username: form.value.username });
|
const url = sparkStore.selectedDeviceUrl;
|
||||||
|
console.log('[Login] spark device:', device);
|
||||||
|
console.log('[Login] target url:', url);
|
||||||
|
|
||||||
|
await loginAction({ email: form.value.username, password: form.value.password }, url);
|
||||||
|
ElMessage.success(`登录成功 | ${url ?? '未选择设备'}`);
|
||||||
|
emit('login-success', { username: form.value.username, device });
|
||||||
visible.value = false;
|
visible.value = false;
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
ElMessage.error('登录失败,请重试');
|
ElMessage.error('登录失败,请重试');
|
||||||
|
|||||||
@@ -4,6 +4,9 @@ import url, { getBaseUrl } from './url.js';
|
|||||||
// 健康检查
|
// 健康检查
|
||||||
export const getHealthAction = () => getAction(url.health);
|
export const getHealthAction = () => getAction(url.health);
|
||||||
|
|
||||||
|
// 用户登录
|
||||||
|
export const loginAction = (data, sparkBaseUrl) => postAction(url.user.login, data, {}, sparkBaseUrl);
|
||||||
|
|
||||||
// 会话
|
// 会话
|
||||||
export const createSessionAction = (data) => postAction(url.session.create, data);
|
export const createSessionAction = (data) => postAction(url.session.create, data);
|
||||||
export const getSessionAction = (id) => getAction(url.session.detail(id));
|
export const getSessionAction = (id) => getAction(url.session.detail(id));
|
||||||
|
|||||||
@@ -1,17 +1,17 @@
|
|||||||
import request from './index.js'
|
import request from './index.js';
|
||||||
|
|
||||||
export function getAction(url, params) {
|
export function getAction(url, params) {
|
||||||
return request({ url, method: 'GET', params })
|
return request({ url, method: 'GET', params });
|
||||||
}
|
}
|
||||||
|
|
||||||
export function postAction(url, data, headers = {}) {
|
export function postAction(url, data, headers = {}, baseURL) {
|
||||||
return request({ url, method: 'POST', data, headers })
|
return request({ url, method: 'POST', data, headers, ...(baseURL ? { baseURL } : {}) });
|
||||||
}
|
}
|
||||||
|
|
||||||
export function putAction(url, data) {
|
export function putAction(url, data) {
|
||||||
return request({ url, method: 'PUT', data })
|
return request({ url, method: 'PUT', data });
|
||||||
}
|
}
|
||||||
|
|
||||||
export function deleteAction(url, params) {
|
export function deleteAction(url, params) {
|
||||||
return request({ url, method: 'DELETE', params })
|
return request({ url, method: 'DELETE', params });
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -22,6 +22,11 @@ const url = {
|
|||||||
list: (sessionId) => `/session/${sessionId}/message`,
|
list: (sessionId) => `/session/${sessionId}/message`,
|
||||||
},
|
},
|
||||||
|
|
||||||
|
// 用户
|
||||||
|
user: {
|
||||||
|
login: '/v1/user/login',
|
||||||
|
},
|
||||||
|
|
||||||
// SSE 事件流
|
// SSE 事件流
|
||||||
event: '/event',
|
event: '/event',
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user