ReeseLin/cockpit-source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat:登录页面优化

Browse Source
This commit is contained in:
linzhongyan 2026-04-02 14:40:29 +08:00
parent 0e6bac7a13
commit 6f2e181a10
2 changed files with 32 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
frontend/src/views/layout/AppLayout.vue
View File

@ -13,10 +13,12 @@ const menus = computed(() => [
{ to: '/orders', label: '订单', perm: 'orders:read' },
{ to: '/import', label: '导入', perm: 'import:preview' },
{ to: '/settings/customers', label: '客户', perm: 'dict:read' },
{ to: '/settings/statuses', label: '状态', perm: 'dict:read' },
{ to: '/settings/statuses', label: '状态', perm: 'dict:read' }
])
async function logout() {
const res = confirm('确认退出登录吗？')
if (!res) return
try {
if (auth.refreshToken) await apiLogout({ refreshToken: auth.refreshToken })
} finally {
@ -37,7 +39,11 @@ async function logout() {
v-if="auth.hasPerm(m.perm)"
:to="m.to"
class="block rounded px-3 py-2 text-sm hover:bg-slate-800/60"
:class="route.path === m.to ? 'bg-slate-800/80 text-white' : 'text-slate-300'"
:class="
route.path === m.to
? 'bg-slate-800/80 text-white'
: 'text-slate-300'
"
>
{{ m.label }}
</RouterLink>
@ -46,9 +52,18 @@ async function logout() {
</aside>
<main class="flex min-w-0 flex-1 flex-col">
<header class="flex items-center justify-between border-b border-slate-800 bg-slate-950/60 px-4 py-3">
<div class="text-sm text-slate-300">欢迎，{{ auth.user?.displayName || auth.user?.username }}</div>
<button class="rounded bg-slate-800 px-3 py-1.5 text-sm hover:bg-slate-700" @click="logout">退出登录</button>
<header
class="flex items-center justify-between border-b border-slate-800 bg-slate-950/60 px-4 py-3"
>
<div class="text-sm text-slate-300">
欢迎，{{ auth.user?.displayName || auth.user?.username }}
</div>
<button
class="rounded bg-slate-800 px-3 py-1.5 text-sm hover:bg-slate-700"
@click="logout"
>
退出登录
</button>
</header>
<div class="app-scroll min-h-0 flex-1 overflow-y-auto p-4">
<RouterView />

19
frontend/src/views/login/LoginView.vue
View File

@ -1,15 +1,15 @@
<script setup lang="ts">
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { apiLogin } from '@/api/auth'
import { useAuthStore } from '@/stores/auth'
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute()
const auth = useAuthStore()
const username = ref('admin')
const password = ref('admin123')
const username = ref('')
const password = ref('')
const loading = ref(false)
const errMsg = ref('')
@ -33,8 +33,10 @@ async function submit() {
<template>
<div class="h-full bg-slate-950 text-slate-100 flex items-center justify-center px-4">
<div class="w-full max-w-sm rounded-xl border border-slate-800 bg-slate-900/40 p-6">
<div class="text-lg font-semibold">登录</div>
<div class="mt-1 text-sm text-slate-400">默认账号：admin / admin123</div>
<div class="text-lg font-semibold text-center">登录</div>
<!-- <div class="mt-1 text-sm text-slate-400">默认账号：admin / admin123</div> -->
<!-- <div class="mt-1 text-sm text-slate-400">请输入账号/密码登陆</div> -->
<div v-if="errMsg" class="mt-4 rounded bg-red-500/10 px-3 py-2 text-sm text-red-200">
{{ errMsg }}
@ -43,13 +45,16 @@ async function submit() {
<form class="mt-4 space-y-3" @submit.prevent="submit">
<div>
<div class="mb-1 text-sm text-slate-300">账号</div>
<input v-model="username" class="w-full rounded bg-slate-950/60 px-3 py-2 text-sm outline-none ring-1 ring-slate-800 focus:ring-slate-600" />
<input v-model="username"
placeholder="请输入账号"
class="w-full rounded bg-slate-950/60 px-3 py-2 text-sm outline-none ring-1 ring-slate-800 focus:ring-slate-600" />
</div>
<div>
<div class="mb-1 text-sm text-slate-300">密码</div>
<input
v-model="password"
type="password"
placeholder="请输入密码"
class="w-full rounded bg-slate-950/60 px-3 py-2 text-sm outline-none ring-1 ring-slate-800 focus:ring-slate-600"
/>
</div>