feat: Add logout functionality, refine navigation routes, and enhance responsive UI for character and asset views.
This commit is contained in:
@@ -1,5 +1,4 @@
|
||||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
import DashboardView from '../views/DashboardView.vue'
|
||||
import LoginView from '../views/LoginView.vue'
|
||||
|
||||
const router = createRouter({
|
||||
|
||||
@@ -77,16 +77,20 @@ const formatDate = (dateString: string) => {
|
||||
if (!dateString) return ''
|
||||
return new Intl.DateTimeFormat('en-US', { month: 'short', day: 'numeric', year: 'numeric' }).format(new Date(dateString))
|
||||
}
|
||||
const handleLogout = () => {
|
||||
localStorage.removeItem('auth_code')
|
||||
router.push('/login')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex h-screen bg-slate-900 overflow-hidden">
|
||||
<!-- Sidebar -->
|
||||
<nav class="glass-panel w-20 m-4 flex flex-col items-center py-6 rounded-3xl z-10">
|
||||
<div class="mb-12 cursor-pointer" @click="goBack">
|
||||
<div class="mb-12">
|
||||
<div
|
||||
class="w-10 h-10 bg-white/10 rounded-xl flex items-center justify-center font-bold text-white text-xl transition-all duration-300 hover:bg-white/20">
|
||||
←
|
||||
class="w-10 h-10 bg-gradient-to-br from-violet-600 to-cyan-500 rounded-xl flex items-center justify-center font-bold text-white text-xl shadow-lg shadow-violet-500/20">
|
||||
AI
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -78,7 +78,7 @@ onMounted(() => {
|
||||
})
|
||||
|
||||
const goBack = () => {
|
||||
router.push('/characters')
|
||||
router.push('/')
|
||||
}
|
||||
|
||||
const loadAssets = async () => {
|
||||
@@ -329,30 +329,44 @@ const handleGenerate = async () => {
|
||||
isGenerating.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const handleLogout = () => {
|
||||
localStorage.removeItem('auth_code')
|
||||
router.push('/login')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex h-screen bg-slate-900 overflow-hidden">
|
||||
<nav class="glass-panel w-14 m-2 flex flex-col items-center py-4 rounded-2xl z-10">
|
||||
<div class="mb-6 cursor-pointer" @click="router.push('/')">
|
||||
<div class="flex h-screen bg-slate-900 overflow-hidden text-slate-100">
|
||||
<nav
|
||||
class="glass-panel w-14 lg:w-20 m-2 lg:m-4 flex flex-col items-center py-4 lg:py-6 rounded-2xl lg:rounded-3xl z-10 border border-white/5">
|
||||
<div class="mb-4 lg:mb-12 cursor-pointer" @click="goBack">
|
||||
<div
|
||||
class="w-8 h-8 bg-white/10 rounded-lg flex items-center justify-center font-bold text-white text-lg transition-all duration-300 hover:bg-white/20">
|
||||
class="w-8 lg:w-10 h-8 lg:h-10 bg-white/10 rounded-lg lg:rounded-xl flex items-center justify-center font-bold text-white text-lg lg:text-xl transition-all duration-300 hover:bg-white/20">
|
||||
←
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 flex flex-col gap-4 w-full items-center">
|
||||
<div class="w-10 h-10 flex items-center justify-center rounded-lg cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
|
||||
<div class="flex-1 flex flex-col gap-4 lg:gap-6 w-full items-center">
|
||||
<div class="w-10 lg:w-12 h-10 lg:h-12 flex items-center justify-center rounded-lg lg:rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
|
||||
@click="router.push('/')">
|
||||
<span class="text-xl">🏠</span>
|
||||
<span class="text-xl lg:text-2xl">🏠</span>
|
||||
</div>
|
||||
<div class="w-10 h-10 flex items-center justify-center rounded-lg cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
|
||||
<div class="w-10 lg:w-12 h-10 lg:h-12 flex items-center justify-center rounded-lg lg:rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
|
||||
@click="router.push('/assets')">
|
||||
<span class="text-xl">📂</span>
|
||||
<span class="text-xl lg:text-2xl">📂</span>
|
||||
</div>
|
||||
<div class="w-10 h-10 flex items-center justify-center rounded-lg cursor-pointer transition-all duration-300 bg-white/10 text-slate-50"
|
||||
@click="router.push('/characters')">
|
||||
<span class="text-xl">👥</span>
|
||||
<div class="w-10 lg:w-12 h-10 lg:h-12 flex items-center justify-center rounded-lg lg:rounded-xl cursor-pointer transition-all duration-300 bg-white/10 text-slate-50 shadow-inner"
|
||||
@click="router.push('/')">
|
||||
<span class="text-xl lg:text-2xl">👥</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-auto flex flex-col items-center gap-4">
|
||||
<div @click="handleLogout"
|
||||
class="w-10 h-10 rounded-xl bg-red-500/10 text-red-400 flex items-center justify-center cursor-pointer hover:bg-red-500/20 transition-all font-bold"
|
||||
title="Logout">
|
||||
<i class="pi pi-power-off"></i>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
Reference in New Issue
Block a user