admin/src/pages/common/login.vue

<script setup lang="ts">
import Background from '@/pages/common/components/Background.vue'
import { LockOnIcon, UserIcon } from 'tdesign-icons-vue-next'
import { reactive, ref } from 'vue'
import type { CreateTokenRequest } from '@/model/token'
import { MessagePlugin } from 'tdesign-vue-next'
import { useAppStore } from '@/stores/app'

const loginForm = reactive<CreateTokenRequest>({
  password: '',
  username: ''
})

const loading = ref(false)
const appStore = useAppStore()

const handleLogin = async () => {
  if (!loginForm.username || !loginForm.password) {
    MessagePlugin.error('用户名或密码不能为空')
    return
  }
  try {
    await appStore.login(loginForm)
  } finally {
    loading.value = false
  }
}
</script>

<template>
  <div class="w-[100vw] h-[100vh] px-20 flex items-center">
    <Background></Background>
    <div class="w-[400px]">
      <div class="text-4xl font-bold mb-12">欢迎到<br />布兰德后台管理系统</div>
      <div class="flex flex-col gap-6 mb-11">
        <TInput size="large" placeholder="账户" v-model="loginForm.username" clearable>
          <template #prefix-icon>
            <UserIcon></UserIcon>
          </template>
        </TInput>
        <TInput
          size="large"
          placeholder="密码"
          type="password"
          v-model="loginForm.password"
          clearable
          @enter="handleLogin"
        >
          <template #prefix-icon>
            <LockOnIcon></LockOnIcon>
          </template>
        </TInput>
      </div>
      <TButton size="large" :block="true" @click="handleLogin" :loading="loading">
        {{ loading ? '登录中' : '登录' }}
      </TButton>
    </div>
  </div>
</template>

<style scoped></style>