LuCodeAdminMix/admin/src/pages/login.vue

<script setup>
/**
 * name：
 * user：sa0ChunLuyu
 * date：2022-05-19 09:18:31
 */
import $router from '~/router'
import {
  useConfig,
  useSaveTokenType,
  useSessionToken,
  useStore,
  useToken,
} from '~/store'

const $config = useConfig()
import {reGetAdmin} from "~/tool/info"
import {$image, $response, AdminLoginAction} from '~/api'
import {onBeforeRouteUpdate} from "vue-router";
import {isDark, toggleDark, isFull, toggleFull} from '~/composables'

const $store = useStore()
const $save_token_type = useSaveTokenType()
const $session_token = useSessionToken()
const $token = useToken()
const account = ref('')
const password = ref('')
const local_token = ref(false)
const localTokenClick = (e) => {
  local_token.value = e
}

const default_page_options = {
  f: '/'
}
const page_options = ref(default_page_options)
onBeforeRouteUpdate((to) => {
  routerChange(to.query)
})

const routerChange = (query) => {
  page_options.value = {
    f: query.f || default_page_options.f
  }
}

onMounted(() => {
  routerChange($router.currentRoute.value.query)
})
const loginClick = async () => {
  const account_ = account.value.replace(/^\s+|\s+$/g, "")
  if (account_ === '') return window.$message().error('请输入账号')
  if (password.value === '') return window.$message().error('请输入密码')
  const response = await AdminLoginAction({
    'account': account_,
    'password': password.value,
  })
  $response(response, () => {
    if (local_token.value) {
      $save_token_type.value = 'local'
      $session_token.value = ''
      $token.value = response.data.token
    } else {
      $save_token_type.value = 'session'
      $session_token.value = response.data.token
      $token.value = ''
    }
    reGetAdmin()
    $router.push(decodeURIComponent(page_options.value.f))
  })
}

const accountEnter = () => {
  if (password.value === '') {
    password_input.value.focus()
  } else {
    loginClick()
  }
}

const password_input = ref(null)
const passwordInputRef = (e) => {
  password_input.value = e
}
</script>
<template>
  <div class="login_page_wrapper" :style="{
        background:$config.app_theme+'20',
    }">
    <div class="login_logo_wrapper">
      <img :src="$image($store.config['Logo'])" alt="">
    </div>
    <div class="login_space_wrapper shadow-lg" :style="{
            background: isDark?'#333333':'#ffffff'
        }">
      <div class="login_space_image_wrapper">
        <img :src="$image($store.config['Login欢迎图片'])" alt="">
      </div>
      <div class="login_space_form_wrapper">
        <div mt-5>
          <n-h1>登录</n-h1>
        </div>
        <div mt-5>
          <n-input v-model:value="account" @keydown.enter="accountEnter()"
                   placeholder="请输入账号"></n-input>
        </div>
        <div mt-5>
          <n-input :ref="passwordInputRef" type="password" @keydown.enter="loginClick()"
                   v-model:value="password"
                   placeholder="请输入密码"></n-input>
        </div>
        <div mt-10>
          <n-button @click="loginClick()" type="primary" w-full>登录</n-button>
        </div>
        <div mt-5>
          <n-checkbox @update:checked="localTokenClick" :default-checked="local_token">自动登录</n-checkbox>
        </div>
        <div class="login_space_form_divider_wrapper"></div>
        <n-divider dashed></n-divider>
        <n-space justify="center">
          <n-button text @click="toggleFull()" mr-5>
            <Icon v-if="isFull" type="off-screen"></Icon>
            <Icon v-else type="full-screen"></Icon>
          </n-button>
          <n-button text @click="toggleDark()" mr-5>
            <Icon v-if="isDark" type="sun-one"></Icon>
            <Icon v-else type="moon"></Icon>
          </n-button>
        </n-space>
      </div>
    </div>
  </div>
</template>
<style scoped>
.login_space_form_divider_wrapper {
  margin-top: 210px;
}

.login_space_form_wrapper {
  width: 500px;
  padding: 30px;
}

.login_logo_wrapper img {
  width: 80px;
  height: 80px;
  display: block;
}

.login_logo_wrapper {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 80px;
  height: 80px;
}

.login_space_image_wrapper img {
  width: 400px;
  height: 600px;
  display: block;
}

.login_space_image_wrapper {
  width: 400px;
  height: 600px;
}

.login_space_wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 900px;
  height: 600px;
  border-radius: 6px;
  display: flex;
  overflow: hidden;
}

.login_page_wrapper {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
</style>
<route>
{"meta":{"layout":"login","title":"登录"}}
</route>