125 lines
2.3 KiB
Vue
125 lines
2.3 KiB
Vue
<!-- components/LoginModal.vue -->
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
import {
|
|
NModal,
|
|
NCard,
|
|
NForm,
|
|
NFormItem,
|
|
NInput,
|
|
NButton,
|
|
createDiscreteApi
|
|
} from 'naive-ui'
|
|
|
|
// 使用 createDiscreteApi 替代 useMessage
|
|
const { message } = createDiscreteApi(['message'])
|
|
const userStore = useUserStore()
|
|
const visible = ref(false)
|
|
const loading = ref(false)
|
|
|
|
|
|
const formRef = ref(null)
|
|
const formModel = ref({
|
|
username: '',
|
|
password: ''
|
|
})
|
|
|
|
const rules = {
|
|
username: {
|
|
required: true,
|
|
message: '请输入用户名',
|
|
trigger: 'blur'
|
|
},
|
|
password: {
|
|
required: true,
|
|
message: '请输入密码',
|
|
trigger: 'blur'
|
|
}
|
|
}
|
|
|
|
// 打开登录框
|
|
function showModal() {
|
|
visible.value = true
|
|
}
|
|
|
|
// 关闭登录框
|
|
function hideModal() {
|
|
visible.value = false
|
|
formModel.value = {
|
|
username: '',
|
|
password: ''
|
|
}
|
|
}
|
|
|
|
// 处理登录
|
|
async function handleLogin() {
|
|
if (!formRef.value) return
|
|
|
|
try {
|
|
loading.value = true
|
|
await formRef.value.validate()
|
|
|
|
// 这里替换为你的实际登录 API 调用
|
|
// const res = await login(formModel.value)
|
|
|
|
// 模拟登录成功
|
|
userStore.login('fake-token')
|
|
message.success('登录成功')
|
|
hideModal()
|
|
|
|
} catch (err) {
|
|
console.error(err)
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
// 暴露方法给父组件
|
|
defineExpose({
|
|
showModal
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<NModal
|
|
v-model:show="visible"
|
|
preset="card"
|
|
style="width: 400px"
|
|
:maskClosable="false"
|
|
title="登录"
|
|
>
|
|
<NForm
|
|
ref="formRef"
|
|
:model="formModel"
|
|
:rules="rules"
|
|
>
|
|
<NFormItem label="用户名" path="username">
|
|
<NInput
|
|
v-model:value="formModel.username"
|
|
placeholder="请输入用户名"
|
|
/>
|
|
</NFormItem>
|
|
<NFormItem label="密码" path="password">
|
|
<NInput
|
|
v-model:value="formModel.password"
|
|
type="password"
|
|
placeholder="请输入密码"
|
|
@keyup.enter="handleLogin"
|
|
/>
|
|
</NFormItem>
|
|
</NForm>
|
|
|
|
<template #footer>
|
|
<div class="flex justify-end gap-2">
|
|
<NButton @click="hideModal">取消</NButton>
|
|
<NButton
|
|
type="primary"
|
|
:loading="loading"
|
|
@click="handleLogin"
|
|
>
|
|
登录
|
|
</NButton>
|
|
</div>
|
|
</template>
|
|
</NModal>
|
|
</template> |