后台布局
This commit is contained in:
李琦
@@ -1,37 +1,50 @@
|
||||
<template>
|
||||
<div class="min-h-screen bg-art-bg text-art-text">
|
||||
<!-- Global Noise -->
|
||||
<div class="fixed inset-0 pointer-events-none z-[60] bg-noise opacity-30 mix-blend-overlay"></div>
|
||||
<!-- Global Noise (Only for frontend) -->
|
||||
<div v-if="!isAdminOrLogin" class="fixed inset-0 pointer-events-none z-[60] bg-noise opacity-30 mix-blend-overlay"></div>
|
||||
|
||||
<!-- Toast Container -->
|
||||
<div id="toast-container" class="toast-container"></div>
|
||||
|
||||
<!-- Header -->
|
||||
<Header />
|
||||
<!-- Header (Hide on Admin & Login) -->
|
||||
<Header v-if="!isAdminOrLogin" />
|
||||
|
||||
<!-- Mobile Menu -->
|
||||
<MobileMenu />
|
||||
<!-- Mobile Menu (Hide on Admin & Login) -->
|
||||
<MobileMenu v-if="!isAdminOrLogin" />
|
||||
|
||||
<!-- Main Content -->
|
||||
<main class="pt-32 pb-20 px-6 max-w-7xl mx-auto relative z-10">
|
||||
<!-- Conditional classes: Apply max-w-7xl only for frontend pages -->
|
||||
<main :class="[
|
||||
isAdminOrLogin ? 'w-full h-full' : 'pt-32 pb-20 px-6 max-w-7xl mx-auto relative z-10'
|
||||
]">
|
||||
<router-view />
|
||||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
<Footer />
|
||||
<!-- Footer (Hide on Admin & Login) -->
|
||||
<Footer v-if="!isAdminOrLogin" />
|
||||
|
||||
<!-- Snippet Modal -->
|
||||
<SnippetModal />
|
||||
<!-- Snippet Modal (Hide on Admin & Login) -->
|
||||
<SnippetModal v-if="!isAdminOrLogin" />
|
||||
|
||||
<!-- Inquiry Modal -->
|
||||
<InquiryModal />
|
||||
<!-- Inquiry Modal (Hide on Admin & Login) -->
|
||||
<InquiryModal v-if="!isAdminOrLogin" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import Header from './components/Header.vue'
|
||||
import MobileMenu from './components/MobileMenu.vue'
|
||||
import Footer from './components/Footer.vue'
|
||||
import SnippetModal from './components/SnippetModal.vue'
|
||||
import InquiryModal from './components/InquiryModal.vue'
|
||||
</script>
|
||||
|
||||
const route = useRoute()
|
||||
|
||||
// Check if current route is Admin or Login page
|
||||
const isAdminOrLogin = computed(() => {
|
||||
const path = route.path
|
||||
return path.startsWith('/admin') || path === '/login'
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -1,108 +1,156 @@
|
||||
<template>
|
||||
<div class="admin-layout">
|
||||
<div class="flex h-screen bg-art-admin-bg text-white overflow-hidden font-sans">
|
||||
<!-- Sidebar Navigation -->
|
||||
<aside class="admin-sidebar" :class="{ 'collapsed': !isSidebarOpen }">
|
||||
<div class="sidebar-header">
|
||||
<h1 class="sidebar-title">管理后台</h1>
|
||||
<aside
|
||||
class="flex flex-col bg-art-admin-card border-r border-white/5 transition-all duration-300 z-20"
|
||||
:class="[isSidebarOpen ? 'w-64' : 'w-20']"
|
||||
>
|
||||
<!-- Logo Area -->
|
||||
<div class="h-16 flex items-center px-6 border-b border-white/5 shrink-0">
|
||||
<h1 class="font-serif italic text-xl tracking-wide truncate transition-all duration-300" :class="{ 'opacity-0': !isSidebarOpen }">
|
||||
Niangao<span class="text-art-accent">.Admin</span>
|
||||
</h1>
|
||||
<span v-if="!isSidebarOpen" class="absolute left-1/2 -translate-x-1/2 text-art-accent font-serif text-xl italic">N</span>
|
||||
</div>
|
||||
<nav class="sidebar-nav">
|
||||
<ul>
|
||||
<li v-for="(item, index) in menuItems" :key="index">
|
||||
<!-- Parent Menu Item -->
|
||||
|
||||
<!-- Nav Menu -->
|
||||
<nav class="flex-1 overflow-y-auto py-6 px-3 space-y-1 custom-scrollbar">
|
||||
<template v-for="(item, index) in menuItems" :key="index">
|
||||
<!-- Parent Menu Item -->
|
||||
<div v-if="item.children">
|
||||
<div
|
||||
v-if="item.children"
|
||||
class="nav-item-parent"
|
||||
:class="{ 'expanded': item.isOpen }"
|
||||
class="flex items-center justify-between px-3 py-2.5 rounded-md cursor-pointer transition-colors duration-200 group mb-1"
|
||||
:class="[isParentActive(item) ? 'text-white' : 'text-art-muted hover:text-white hover:bg-white/5']"
|
||||
@click="toggleMenu(index)"
|
||||
>
|
||||
<div class="nav-link-content">
|
||||
<span class="nav-icon">{{ item.icon }}</span>
|
||||
<span class="nav-text">{{ item.title }}</span>
|
||||
<div class="flex items-center gap-3 min-w-0">
|
||||
<span class="text-lg shrink-0 group-hover:text-art-accent transition-colors" :class="isParentActive(item) ? 'text-art-accent' : ''">{{ item.icon }}</span>
|
||||
<span class="text-sm font-medium truncate transition-opacity duration-300" :class="{ 'opacity-0 w-0': !isSidebarOpen }">{{ item.title }}</span>
|
||||
</div>
|
||||
<span class="nav-arrow">▼</span>
|
||||
<span
|
||||
v-if="isSidebarOpen"
|
||||
class="text-[10px] transition-transform duration-200 opacity-50 group-hover:opacity-100"
|
||||
:class="{ 'rotate-180': item.isOpen }"
|
||||
>▼</span>
|
||||
</div>
|
||||
|
||||
<!-- Single Menu Item -->
|
||||
<router-link
|
||||
v-else
|
||||
:to="item.path || ''"
|
||||
class="nav-link"
|
||||
active-class="active"
|
||||
>
|
||||
<span class="nav-icon">{{ item.icon }}</span>
|
||||
<span class="nav-text">{{ item.title }}</span>
|
||||
</router-link>
|
||||
|
||||
<!-- Submenu -->
|
||||
<ul v-if="item.children" class="submenu" :style="{ maxHeight: item.isOpen ? (item.children.length * 50) + 'px' : '0px' }">
|
||||
<li v-for="(child, childIndex) in item.children" :key="childIndex">
|
||||
<router-link :to="child.path" class="nav-link sub-link" active-class="active">
|
||||
<span class="nav-icon">{{ child.icon }}</span>
|
||||
<span class="nav-text">{{ child.title }}</span>
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<div
|
||||
v-show="isSidebarOpen && item.isOpen"
|
||||
class="ml-4 pl-4 border-l border-white/5 space-y-1 mb-2 overflow-hidden transition-all duration-300"
|
||||
>
|
||||
<router-link
|
||||
v-for="(child, childIndex) in item.children"
|
||||
:key="childIndex"
|
||||
:to="child.path"
|
||||
class="flex items-center gap-3 px-3 py-2 rounded-md text-sm transition-all duration-200 relative group"
|
||||
active-class="text-art-accent bg-art-accent/5 font-medium"
|
||||
:class="!isActive(child.path) ? 'text-art-muted hover:text-white hover:bg-white/5' : ''"
|
||||
>
|
||||
<!-- Active Indicator Line -->
|
||||
<div v-if="isActive(child.path)" class="absolute left-0 top-1/2 -translate-y-1/2 w-0.5 h-4 bg-art-accent rounded-full"></div>
|
||||
|
||||
<span class="truncate">{{ child.title }}</span>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Single Menu Item -->
|
||||
<router-link
|
||||
v-else
|
||||
:to="item.path || ''"
|
||||
class="flex items-center gap-3 px-3 py-2.5 rounded-md mb-1 transition-all duration-200 relative group"
|
||||
active-class="text-art-accent bg-art-accent/5"
|
||||
:class="!isActive(item.path || '') ? 'text-art-muted hover:text-white hover:bg-white/5' : ''"
|
||||
>
|
||||
<div v-if="isActive(item.path || '')" class="absolute left-0 top-1/2 -translate-y-1/2 w-0.5 h-5 bg-art-accent rounded-full"></div>
|
||||
<span class="text-lg shrink-0 group-hover:text-art-accent transition-colors">{{ item.icon }}</span>
|
||||
<span class="text-sm font-medium truncate transition-opacity duration-300" :class="{ 'opacity-0 w-0': !isSidebarOpen }">{{ item.title }}</span>
|
||||
</router-link>
|
||||
</template>
|
||||
</nav>
|
||||
<!-- Sidebar Footer removed as per request -->
|
||||
|
||||
<!-- User Footer -->
|
||||
<div class="p-4 border-t border-white/5">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 rounded-full bg-art-accent/10 flex items-center justify-center text-art-accent font-bold text-xs shrink-0">
|
||||
{{ currentUser.username?.charAt(0).toUpperCase() || 'A' }}
|
||||
</div>
|
||||
<div class="min-w-0 transition-opacity duration-300" :class="{ 'opacity-0 w-0': !isSidebarOpen }">
|
||||
<p class="text-sm font-medium text-white truncate">{{ currentUser.username }}</p>
|
||||
<p class="text-xs text-art-muted truncate">Administrator</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- Main Content Area -->
|
||||
<main class="admin-main">
|
||||
<!-- Top Navigation Bar -->
|
||||
<header class="admin-header">
|
||||
<div class="header-left">
|
||||
<button class="toggle-btn" @click="toggleSidebar">
|
||||
☰
|
||||
<main class="flex-1 flex flex-col min-w-0 bg-art-admin-bg relative">
|
||||
<!-- Top Header -->
|
||||
<header class="h-16 bg-art-admin-bg border-b border-white/5 flex items-center justify-between px-6 shrink-0 z-10">
|
||||
<!-- Left: Toggle & Breadcrumb (Optional) -->
|
||||
<div class="flex items-center gap-4">
|
||||
<button
|
||||
@click="toggleSidebar"
|
||||
class="p-2 -ml-2 text-art-muted hover:text-white hover:bg-white/5 rounded-md transition-colors"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
|
||||
</button>
|
||||
<h2 class="text-sm font-medium text-white/80 hidden sm:block">{{ currentRouteTitle }}</h2>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<div class="user-dropdown relative" ref="dropdownRef">
|
||||
<button class="user-info-btn" @click="toggleUserDropdown">
|
||||
<span class="username">{{ currentUser.username }}</span>
|
||||
<span class="role">({{ currentUser.role }})</span>
|
||||
<span class="arrow" :class="{ 'rotated': isUserDropdownOpen }">▼</span>
|
||||
|
||||
<!-- Right: Actions -->
|
||||
<div class="flex items-center gap-3">
|
||||
<button class="p-2 text-art-muted hover:text-white hover:bg-white/5 rounded-full transition-colors relative">
|
||||
<span class="absolute top-2 right-2 w-2 h-2 bg-art-accent rounded-full border-2 border-art-admin-bg"></span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
|
||||
</button>
|
||||
|
||||
<div class="relative" ref="dropdownRef">
|
||||
<button
|
||||
@click="toggleUserDropdown"
|
||||
class="flex items-center gap-2 text-sm font-medium text-art-muted hover:text-white transition-colors"
|
||||
>
|
||||
<span>设置</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="transition-transform duration-200" :class="{ 'rotate-180': isUserDropdownOpen }"><polyline points="6 9 12 15 18 9"></polyline></svg>
|
||||
</button>
|
||||
|
||||
<div v-if="isUserDropdownOpen" class="dropdown-menu">
|
||||
<div class="dropdown-header">
|
||||
<span class="user-email">管理员</span>
|
||||
</div>
|
||||
<ul class="dropdown-list">
|
||||
<li>
|
||||
<button @click="handleChangePassword" class="dropdown-item">
|
||||
<span class="icon">🔒</span>
|
||||
修改密码
|
||||
</button>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
<li>
|
||||
<button @click="handleLogout" class="dropdown-item text-red-400">
|
||||
<span class="icon">🚪</span>
|
||||
退出登录
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- Dropdown -->
|
||||
<div
|
||||
v-if="isUserDropdownOpen"
|
||||
class="absolute right-0 mt-2 w-48 bg-art-admin-card border border-white/10 rounded-lg shadow-xl py-1 z-50 origin-top-right animate-reveal"
|
||||
>
|
||||
<button @click="handleChangePassword" class="flex items-center gap-2 w-full px-4 py-2.5 text-sm text-art-muted hover:text-white hover:bg-white/5 text-left transition-colors">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>
|
||||
修改密码
|
||||
</button>
|
||||
<div class="h-px bg-white/5 my-1"></div>
|
||||
<button @click="handleLogout" class="flex items-center gap-2 w-full px-4 py-2.5 text-sm text-red-400 hover:bg-red-500/10 text-left transition-colors">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
|
||||
退出登录
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Content Container -->
|
||||
<div class="admin-content">
|
||||
<router-view />
|
||||
<!-- Content Scroll Area -->
|
||||
<div class="flex-1 overflow-auto p-6 scroll-smooth custom-scrollbar">
|
||||
<div class="max-w-full mx-auto animate-reveal">
|
||||
<router-view />
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { ref, onMounted, onUnmounted, computed } from 'vue'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import { useToast } from '../../composables/useToast'
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const toast = useToast()
|
||||
const isSidebarOpen = ref(true)
|
||||
const currentUser = ref(JSON.parse(localStorage.getItem('user') || '{}'))
|
||||
@@ -122,7 +170,6 @@ const closeDropdown = (e: MouseEvent) => {
|
||||
}
|
||||
|
||||
const handleChangePassword = () => {
|
||||
// Implement change password logic or navigate to page
|
||||
toast.showToast('功能开发中...', 'info')
|
||||
isUserDropdownOpen.value = false
|
||||
}
|
||||
@@ -197,7 +244,15 @@ const menuItems = ref<MenuItem[]>([
|
||||
])
|
||||
|
||||
const toggleMenu = (index: number) => {
|
||||
menuItems.value[index].isOpen = !menuItems.value[index].isOpen
|
||||
if (!isSidebarOpen.value) {
|
||||
isSidebarOpen.value = true
|
||||
// Wait for transition
|
||||
setTimeout(() => {
|
||||
menuItems.value[index].isOpen = !menuItems.value[index].isOpen
|
||||
}, 100)
|
||||
} else {
|
||||
menuItems.value[index].isOpen = !menuItems.value[index].isOpen
|
||||
}
|
||||
}
|
||||
|
||||
const toggleSidebar = () => {
|
||||
@@ -211,6 +266,32 @@ const handleLogout = () => {
|
||||
router.push('/login')
|
||||
}
|
||||
|
||||
// Helper to determine active state
|
||||
const isActive = (path: string) => {
|
||||
return route.path === path || route.path.startsWith(path + '/')
|
||||
}
|
||||
|
||||
const isParentActive = (item: MenuItem) => {
|
||||
if (item.path && isActive(item.path)) return true
|
||||
if (item.children) {
|
||||
return item.children.some(child => isActive(child.path))
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
// Get current route title for header
|
||||
const currentRouteTitle = computed(() => {
|
||||
// Simple logic: find matching menu item title
|
||||
for (const item of menuItems.value) {
|
||||
if (item.path === route.path) return item.title
|
||||
if (item.children) {
|
||||
const child = item.children.find(c => c.path === route.path)
|
||||
if (child) return `${item.title} / ${child.title}`
|
||||
}
|
||||
}
|
||||
return '管理控制台'
|
||||
})
|
||||
|
||||
// Check if user is authenticated
|
||||
onMounted(() => {
|
||||
const token = localStorage.getItem('token')
|
||||
@@ -218,6 +299,13 @@ onMounted(() => {
|
||||
router.push('/login')
|
||||
}
|
||||
document.addEventListener('click', closeDropdown)
|
||||
|
||||
// Auto open menu based on current route
|
||||
menuItems.value.forEach(item => {
|
||||
if (item.children && item.children.some(child => isActive(child.path))) {
|
||||
item.isOpen = true
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
@@ -226,365 +314,5 @@ onUnmounted(() => {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.admin-layout {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
background-color: #050505;
|
||||
color: #ececec;
|
||||
}
|
||||
|
||||
/* User Dropdown Styles */
|
||||
.user-dropdown {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.user-info-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 0.5rem;
|
||||
border-radius: 0.375rem;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.user-info-btn:hover {
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.arrow {
|
||||
font-size: 0.7rem;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.arrow.rotated {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
right: 0;
|
||||
margin-top: 0.5rem;
|
||||
width: 200px;
|
||||
background: #1a1a1a;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
|
||||
z-index: 9999;
|
||||
overflow: hidden;
|
||||
animation: slideIn 0.2s ease-out;
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
from { opacity: 0; transform: translateY(-10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.dropdown-header {
|
||||
padding: 1rem;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
}
|
||||
|
||||
.user-email {
|
||||
font-size: 0.85rem;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dropdown-list {
|
||||
list-style: none;
|
||||
padding: 0.5rem 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
width: 100%;
|
||||
padding: 0.75rem 1rem;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
font-size: 0.9rem;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.dropdown-item:hover {
|
||||
background-color: rgba(212, 179, 131, 0.1);
|
||||
color: #d4b383;
|
||||
}
|
||||
|
||||
.dropdown-item .icon {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.divider {
|
||||
height: 1px;
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
/* Sidebar Styles */
|
||||
.admin-sidebar {
|
||||
width: 250px;
|
||||
background: rgba(5, 5, 5, 0.7);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border-right: 1px solid rgba(255, 255, 255, 0.03);
|
||||
color: white;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.admin-sidebar::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.admin-sidebar::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
padding: 1.5rem;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.03);
|
||||
}
|
||||
|
||||
.sidebar-title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
color: #d4b383;
|
||||
font-family: 'Playfair Display', serif;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.sidebar-nav {
|
||||
flex: 1;
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
.sidebar-nav ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.nav-link, .nav-item-parent {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.75rem 1.5rem;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
text-decoration: none;
|
||||
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
border-left: 3px solid transparent;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.nav-item-parent {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.nav-link-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav-link:hover, .nav-item-parent:hover {
|
||||
background-color: rgba(212, 179, 131, 0.1);
|
||||
color: white;
|
||||
border-left-color: rgba(212, 179, 131, 0.3);
|
||||
}
|
||||
|
||||
.nav-link.active {
|
||||
background-color: rgba(212, 179, 131, 0.15);
|
||||
color: #d4b383;
|
||||
border-left-color: #d4b383;
|
||||
box-shadow: 0 0 15px rgba(212, 179, 131, 0.1);
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
margin-right: 0.75rem;
|
||||
font-size: 1.1rem;
|
||||
min-width: 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.nav-text {
|
||||
font-size: 0.95rem;
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
.nav-arrow {
|
||||
font-size: 0.7rem;
|
||||
transition: transform 0.3s ease;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.nav-item-parent.expanded .nav-arrow {
|
||||
transform: rotate(180deg);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Submenu Styles */
|
||||
.submenu {
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
overflow: hidden;
|
||||
transition: max-height 0.3s ease-out;
|
||||
}
|
||||
|
||||
.sub-link {
|
||||
padding-left: 2.5rem;
|
||||
font-size: 0.9rem;
|
||||
border-left: 3px solid transparent;
|
||||
}
|
||||
|
||||
.sub-link .nav-icon {
|
||||
font-size: 1rem;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.sidebar-footer {
|
||||
padding: 1rem;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.03);
|
||||
}
|
||||
|
||||
.logout-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: 0.75rem 1.5rem;
|
||||
background-color: transparent;
|
||||
color: #d4b383;
|
||||
border: none;
|
||||
border-radius: 0.375rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
font-size: 0.95rem;
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
.logout-btn:hover {
|
||||
background-color: rgba(212, 179, 131, 0.1);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 5px 15px rgba(212, 179, 131, 0.1);
|
||||
}
|
||||
|
||||
/* Main Content Styles */
|
||||
.admin-main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Header Styles */
|
||||
.admin-header {
|
||||
background: rgba(5, 5, 5, 0.7);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.03);
|
||||
padding: 0 1.5rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 60px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
|
||||
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
.toggle-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
padding: 0.5rem;
|
||||
border-radius: 0.375rem;
|
||||
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
.toggle-btn:hover {
|
||||
background-color: rgba(212, 179, 131, 0.1);
|
||||
color: #d4b383;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 0.95rem;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
.username {
|
||||
font-weight: 600;
|
||||
color: #d4b383;
|
||||
}
|
||||
|
||||
.role {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
/* Content Area */
|
||||
.admin-content {
|
||||
flex: 1;
|
||||
padding: 1.5rem;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* Scrollbar Styles */
|
||||
.admin-content::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
.admin-content::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.admin-content::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 3px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.admin-content::-webkit-scrollbar-thumb:hover {
|
||||
background: #d4b383;
|
||||
box-shadow: 0 0 10px rgba(212, 179, 131, 0.4);
|
||||
}
|
||||
|
||||
.admin-content::-webkit-scrollbar-corner {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.admin-sidebar {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100vh;
|
||||
z-index: 1000;
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.admin-sidebar.collapsed {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
/* Scoped styles replaced by Tailwind classes */
|
||||
</style>
|
||||
|
||||
@@ -1,41 +1,103 @@
|
||||
<template>
|
||||
<div class="login-container">
|
||||
<div class="login-card">
|
||||
<div class="text-center mb-8">
|
||||
<h2 class="font-serif text-3xl italic text-white mb-2">后台管理</h2>
|
||||
<p class="text-art-muted text-sm">请输入您的管理员账号</p>
|
||||
<div class="min-h-screen flex w-full">
|
||||
<!-- Left: Brand/Art Section -->
|
||||
<div class="hidden lg:flex lg:w-3/5 bg-art-bg relative overflow-hidden items-center justify-center p-12">
|
||||
<!-- Background Effects -->
|
||||
<div class="absolute inset-0 bg-noise opacity-20"></div>
|
||||
<div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-art-bg via-[#0a0a0a] to-[#121214]"></div>
|
||||
|
||||
<!-- Animated Orbs -->
|
||||
<div class="absolute top-1/4 left-1/4 w-96 h-96 bg-art-accent/5 rounded-full blur-[100px] animate-pulse-slow"></div>
|
||||
<div class="absolute bottom-1/3 right-1/4 w-64 h-64 bg-purple-900/10 rounded-full blur-[80px] animate-pulse-slow" style="animation-delay: 1s;"></div>
|
||||
|
||||
<!-- Brand Content -->
|
||||
<div class="relative z-10 text-center max-w-2xl">
|
||||
<h1 class="font-serif text-6xl italic text-white mb-6 tracking-wide">
|
||||
Niangao<span class="text-art-accent">.Admin</span>
|
||||
</h1>
|
||||
<div class="h-px w-32 bg-gradient-to-r from-transparent via-art-accent/50 to-transparent mx-auto mb-8"></div>
|
||||
<p class="text-art-muted text-lg font-light leading-relaxed">
|
||||
Art meets Technology. <br/>
|
||||
Crafting the digital garden of <span class="text-white font-medium">年糕崽崽</span>.
|
||||
</p>
|
||||
</div>
|
||||
<form @submit.prevent="handleLogin" class="space-y-6">
|
||||
<div class="form-group">
|
||||
<label for="username" class="block text-sm font-medium text-art-muted mb-2">用户名</label>
|
||||
<input
|
||||
type="text"
|
||||
id="username"
|
||||
v-model="form.username"
|
||||
class="w-full bg-white/5 border border-white/10 rounded-lg px-4 py-3 text-white placeholder-white/30 focus:outline-none focus:border-art-accent focus:ring-1 focus:ring-art-accent transition-all"
|
||||
placeholder="Username"
|
||||
required
|
||||
/>
|
||||
|
||||
<!-- Footer Copyright -->
|
||||
<div class="absolute bottom-8 text-white/20 text-xs font-mono tracking-widest uppercase">
|
||||
© {{ new Date().getFullYear() }} Niangao Zaizai. All Rights Reserved.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right: Login Form -->
|
||||
<div class="w-full lg:w-2/5 bg-[#0a0a0a] flex items-center justify-center p-8 relative">
|
||||
<div class="w-full max-w-md space-y-8">
|
||||
<div class="text-center lg:text-left">
|
||||
<h2 class="text-3xl font-medium text-white tracking-tight mb-2">欢迎回来</h2>
|
||||
<p class="text-art-muted text-sm">请登录您的管理账号</p>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="password" class="block text-sm font-medium text-art-muted mb-2">密码</label>
|
||||
<input
|
||||
type="password"
|
||||
id="password"
|
||||
v-model="form.password"
|
||||
class="w-full bg-white/5 border border-white/10 rounded-lg px-4 py-3 text-white placeholder-white/30 focus:outline-none focus:border-art-accent focus:ring-1 focus:ring-art-accent transition-all"
|
||||
placeholder="Password"
|
||||
required
|
||||
/>
|
||||
|
||||
<form @submit.prevent="handleLogin" class="space-y-6 mt-8">
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label for="username" class="block text-xs font-medium text-art-muted mb-1.5 uppercase tracking-wider">用户名</label>
|
||||
<input
|
||||
type="text"
|
||||
id="username"
|
||||
v-model="form.username"
|
||||
class="w-full bg-[#0a0a0a] border border-white/10 rounded-md px-4 py-3 text-white placeholder-white/30 focus:border-art-accent focus:ring-1 focus:ring-art-accent outline-none transition-all duration-200 font-sans text-sm login-input"
|
||||
placeholder="请输入用户名"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="password" class="block text-xs font-medium text-art-muted mb-1.5 uppercase tracking-wider">密码</label>
|
||||
<input
|
||||
type="password"
|
||||
id="password"
|
||||
v-model="form.password"
|
||||
class="w-full bg-[#0a0a0a] border border-white/10 rounded-md px-4 py-3 text-white placeholder-white/30 focus:border-art-accent focus:ring-1 focus:ring-art-accent outline-none transition-all duration-200 font-sans text-sm login-input"
|
||||
placeholder="请输入密码"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between text-sm">
|
||||
<label class="flex items-center text-art-muted hover:text-white cursor-pointer transition-colors">
|
||||
<input type="checkbox" class="mr-2 w-4 h-4 rounded border-white/10 bg-white/5 checked:bg-art-accent checked:border-art-accent focus:ring-offset-0 focus:ring-0 text-art-accent">
|
||||
<span>记住我</span>
|
||||
</label>
|
||||
<a href="#" class="text-art-accent hover:text-white transition-colors">忘记密码？</a>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
class="w-full bg-art-accent text-black font-medium py-3.5 rounded-lg hover:opacity-90 active:scale-[0.98] transition-all duration-200 tracking-wide text-sm uppercase shadow-[0_0_20px_rgba(212,179,131,0.15)] hover:shadow-[0_0_30px_rgba(212,179,131,0.25)]"
|
||||
:disabled="isLoading"
|
||||
>
|
||||
<span v-if="isLoading" class="flex items-center justify-center gap-2">
|
||||
<svg class="animate-spin h-4 w-4 text-black" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
||||
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||
</svg>
|
||||
登录中...
|
||||
</span>
|
||||
<span v-else>登 录</span>
|
||||
</button>
|
||||
|
||||
<div v-if="error" class="text-art-error text-sm text-center bg-art-error/10 py-3 rounded-lg border border-art-error/20 flex items-center justify-center gap-2">
|
||||
<span class="text-lg">!</span> {{ error }}
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="pt-6 border-t border-white/5 text-center">
|
||||
<p class="text-art-muted text-xs">
|
||||
不是管理员？
|
||||
<a href="/" class="text-white hover:text-art-accent underline decoration-art-accent/30 hover:decoration-art-accent underline-offset-4 transition-all">返回首页</a>
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
class="w-full bg-white text-black font-bold py-3 rounded-lg hover:bg-art-accent hover:text-white transition-all transform hover:scale-[1.02] active:scale-[0.98]"
|
||||
>
|
||||
登 录
|
||||
</button>
|
||||
<div v-if="error" class="text-red-500 text-sm text-center mt-4 bg-red-500/10 py-2 rounded border border-red-500/20">{{ error }}</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -55,42 +117,37 @@ const form = ref({
|
||||
})
|
||||
|
||||
const error = ref('')
|
||||
const isLoading = ref(false)
|
||||
|
||||
const handleLogin = async () => {
|
||||
isLoading.value = true
|
||||
error.value = ''
|
||||
|
||||
try {
|
||||
const response = await login(form.value)
|
||||
// 保存token到本地存储
|
||||
localStorage.setItem('token', response.token)
|
||||
localStorage.setItem('user', JSON.stringify(response.user))
|
||||
toast.showToast('登录成功', 'success')
|
||||
toast.showToast('欢迎回来，管理员', 'success')
|
||||
// 登录成功后重定向到管理后台
|
||||
router.push('/admin')
|
||||
} catch (err: any) {
|
||||
error.value = err.response?.data?.error || '登录失败，请检查用户名和密码'
|
||||
toast.showToast('登录失败', 'error')
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.login-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
background-color: #050505;
|
||||
background-image: radial-gradient(circle at 50% 50%, rgba(212, 179, 131, 0.05) 0%, transparent 50%);
|
||||
}
|
||||
|
||||
.login-card {
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
padding: 3rem;
|
||||
border-radius: 1.5rem;
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
|
||||
width: 100%;
|
||||
max-width: 420px;
|
||||
/* Fix autofill background color */
|
||||
.login-input:-webkit-autofill,
|
||||
.login-input:-webkit-autofill:hover,
|
||||
.login-input:-webkit-autofill:focus,
|
||||
.login-input:-webkit-autofill:active {
|
||||
-webkit-box-shadow: 0 0 0 30px #0a0a0a inset !important;
|
||||
-webkit-text-fill-color: white !important;
|
||||
transition: background-color 5000s ease-in-out 0s;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,108 +1,132 @@
|
||||
<template>
|
||||
<div class="post-form-container">
|
||||
<h1 class="page-title">{{ isEditing ? '编辑文章' : '新建文章' }}</h1>
|
||||
|
||||
<div class="form-container">
|
||||
<form @submit.prevent="handleSubmit" class="post-form">
|
||||
<!-- Title Field -->
|
||||
<div class="form-group">
|
||||
<label for="title">文章标题</label>
|
||||
<input
|
||||
type="text"
|
||||
id="title"
|
||||
v-model="form.title"
|
||||
placeholder="请输入文章标题"
|
||||
required
|
||||
/>
|
||||
<div class="error-message" v-if="errors.title">
|
||||
{{ errors.title }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Category Field -->
|
||||
<div class="form-group">
|
||||
<label for="category">分类</label>
|
||||
<input
|
||||
type="text"
|
||||
id="category"
|
||||
v-model="form.category"
|
||||
placeholder="请输入文章分类"
|
||||
required
|
||||
/>
|
||||
<div class="error-message" v-if="errors.category">
|
||||
{{ errors.category }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Date Field -->
|
||||
<div class="form-group">
|
||||
<label for="date">发布日期</label>
|
||||
<input
|
||||
type="date"
|
||||
id="date"
|
||||
v-model="form.date"
|
||||
required
|
||||
/>
|
||||
<div class="error-message" v-if="errors.date">
|
||||
{{ errors.date }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Excerpt Field -->
|
||||
<div class="form-group">
|
||||
<label for="excerpt">文章摘要</label>
|
||||
<textarea
|
||||
id="excerpt"
|
||||
v-model="form.excerpt"
|
||||
placeholder="请输入文章摘要"
|
||||
rows="3"
|
||||
></textarea>
|
||||
<div class="error-message" v-if="errors.excerpt">
|
||||
{{ errors.excerpt }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Content Field - 使用 Markdown 编辑器 -->
|
||||
<div class="form-group">
|
||||
<label>文章内容</label>
|
||||
<div class="editor-wrapper">
|
||||
<MdEditor
|
||||
v-model="form.content"
|
||||
theme="dark"
|
||||
:preview="false"
|
||||
placeholder="请输入 Markdown 内容..."
|
||||
class="custom-md-editor"
|
||||
/>
|
||||
</div>
|
||||
<div class="error-message" v-if="errors.content">
|
||||
{{ errors.content }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Is Published Field -->
|
||||
<div class="form-group">
|
||||
<label for="isPublished">发布状态</label>
|
||||
<CustomSelect
|
||||
v-model="form.isPublished"
|
||||
:options="publishStatusOptions"
|
||||
placeholder="请选择发布状态"
|
||||
/>
|
||||
<div class="error-message" v-if="errors.isPublished">
|
||||
{{ errors.isPublished }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Submit Buttons -->
|
||||
<div class="form-actions">
|
||||
<button type="button" class="cancel-btn" @click="handleCancel">
|
||||
取消
|
||||
</button>
|
||||
<button type="submit" class="submit-btn" :disabled="isSubmitting">
|
||||
{{ isSubmitting ? '提交中...' : (isEditing ? '更新文章' : '创建文章') }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<div class="w-full animate-reveal">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h1 class="text-2xl font-serif italic text-white">{{ isEditing ? '编辑文章' : '新建文章' }}</h1>
|
||||
<div class="flex gap-3">
|
||||
<button type="button" class="admin-btn-secondary" @click="handleCancel">
|
||||
取消
|
||||
</button>
|
||||
<button type="button" class="admin-btn-primary" @click="handleSubmit" :disabled="isSubmitting">
|
||||
{{ isSubmitting ? '提交中...' : (isEditing ? '更新文章' : '发布文章') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form @submit.prevent="handleSubmit" class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
<!-- Left Column: Main Content -->
|
||||
<div class="lg:col-span-2 space-y-6">
|
||||
<div class="admin-card p-6 space-y-6">
|
||||
<!-- Title Field -->
|
||||
<div class="space-y-2">
|
||||
<label for="title" class="block text-sm font-medium text-art-muted uppercase tracking-wider">文章标题</label>
|
||||
<input
|
||||
type="text"
|
||||
id="title"
|
||||
v-model="form.title"
|
||||
class="admin-input text-lg font-medium placeholder-white/20"
|
||||
placeholder="请输入文章标题"
|
||||
required
|
||||
/>
|
||||
<div class="text-art-error text-xs mt-1" v-if="errors.title">
|
||||
{{ errors.title }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Content Field -->
|
||||
<div class="space-y-2">
|
||||
<label class="block text-sm font-medium text-art-muted uppercase tracking-wider">文章内容</label>
|
||||
<div class="border border-white/10 rounded-lg overflow-hidden focus-within:border-art-accent focus-within:ring-1 focus-within:ring-art-accent transition-all duration-200">
|
||||
<MdEditor
|
||||
v-model="form.content"
|
||||
theme="dark"
|
||||
:preview="false"
|
||||
placeholder="请输入 Markdown 内容..."
|
||||
class="custom-md-editor"
|
||||
/>
|
||||
</div>
|
||||
<div class="text-art-error text-xs mt-1" v-if="errors.content">
|
||||
{{ errors.content }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Excerpt Field -->
|
||||
<div class="space-y-2">
|
||||
<label for="excerpt" class="block text-sm font-medium text-art-muted uppercase tracking-wider">文章摘要</label>
|
||||
<textarea
|
||||
id="excerpt"
|
||||
v-model="form.excerpt"
|
||||
rows="4"
|
||||
class="admin-input resize-none"
|
||||
placeholder="请输入文章摘要 (可选)"
|
||||
></textarea>
|
||||
<div class="text-art-error text-xs mt-1" v-if="errors.excerpt">
|
||||
{{ errors.excerpt }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Column: Meta & Settings -->
|
||||
<div class="space-y-6">
|
||||
<div class="admin-card p-6 space-y-6 sticky top-6">
|
||||
<h3 class="text-sm font-medium text-white border-b border-white/5 pb-4 mb-4 flex items-center gap-2">
|
||||
<span class="text-art-accent">⚙️</span> 发布设置
|
||||
</h3>
|
||||
|
||||
<!-- Category Field -->
|
||||
<div class="space-y-2">
|
||||
<label for="category" class="block text-xs font-medium text-art-muted uppercase tracking-wider">分类</label>
|
||||
<input
|
||||
type="text"
|
||||
id="category"
|
||||
v-model="form.category"
|
||||
class="admin-input"
|
||||
placeholder="文章分类"
|
||||
required
|
||||
/>
|
||||
<div class="text-art-error text-xs mt-1" v-if="errors.category">
|
||||
{{ errors.category }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Date Field -->
|
||||
<div class="space-y-2">
|
||||
<label for="date" class="block text-xs font-medium text-art-muted uppercase tracking-wider">发布日期</label>
|
||||
<input
|
||||
type="date"
|
||||
id="date"
|
||||
v-model="form.date"
|
||||
class="admin-input"
|
||||
required
|
||||
/>
|
||||
<div class="text-art-error text-xs mt-1" v-if="errors.date">
|
||||
{{ errors.date }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Is Published Field -->
|
||||
<div class="space-y-2">
|
||||
<label for="isPublished" class="block text-xs font-medium text-art-muted uppercase tracking-wider">状态</label>
|
||||
<CustomSelect
|
||||
v-model="form.isPublished"
|
||||
:options="publishStatusOptions"
|
||||
placeholder="请选择发布状态"
|
||||
/>
|
||||
<div class="text-art-error text-xs mt-1" v-if="errors.isPublished">
|
||||
{{ errors.isPublished }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Action Buttons (Mobile only, hidden on large screens) -->
|
||||
<div class="lg:hidden pt-4 border-t border-white/5 flex flex-col gap-3">
|
||||
<button type="button" class="admin-btn-primary w-full" @click="handleSubmit" :disabled="isSubmitting">
|
||||
{{ isSubmitting ? '提交中...' : (isEditing ? '更新文章' : '发布文章') }}
|
||||
</button>
|
||||
<button type="button" class="admin-btn-secondary w-full" @click="handleCancel">取消</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -188,18 +212,18 @@ const handleSubmit = async () => {
|
||||
if (isEditing.value) {
|
||||
// Update existing post
|
||||
await updatePost(route.params.id as string, form)
|
||||
toast.success('文章更新成功')
|
||||
toast.showToast('文章更新成功', 'success')
|
||||
} else {
|
||||
// Create new post
|
||||
await createPost(form)
|
||||
toast.success('文章创建成功')
|
||||
toast.showToast('文章创建成功', 'success')
|
||||
}
|
||||
|
||||
// Redirect to posts list
|
||||
router.push('/admin/posts')
|
||||
} catch (error: any) {
|
||||
console.error('Error submitting form:', error)
|
||||
toast.error(error.message || (isEditing.value ? '更新文章失败' : '创建文章失败'))
|
||||
toast.showToast(error.message || (isEditing.value ? '更新文章失败' : '创建文章失败'), 'error')
|
||||
} finally {
|
||||
isSubmitting.value = false
|
||||
}
|
||||
@@ -227,159 +251,24 @@ onMounted(async () => {
|
||||
form.isPublished = post.isPublished === 1 ? 1 : 0
|
||||
} catch (error: any) {
|
||||
console.error('Failed to fetch post data:', error)
|
||||
toast.error('加载文章数据失败: ' + (error.message || '未知错误'))
|
||||
toast.showToast('加载文章数据失败: ' + (error.message || '未知错误'), 'error')
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.post-form-container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 600;
|
||||
color: #d4b383;
|
||||
margin-bottom: 1.5rem;
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
.form-container {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.post-form {
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 500;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
margin-bottom: 0.5rem;
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
.form-group input,
|
||||
.form-group textarea,
|
||||
.form-group select {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 0.5rem;
|
||||
font-size: 0.95rem;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
color: white;
|
||||
font-family: 'Inter', sans-serif;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.form-group input::placeholder,
|
||||
.form-group textarea::placeholder,
|
||||
.form-group select::placeholder {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.form-group input:focus,
|
||||
.form-group textarea:focus,
|
||||
.form-group select:focus {
|
||||
outline: none;
|
||||
border-color: #d4b383;
|
||||
box-shadow: 0 0 0 3px rgba(212, 179, 131, 0.2);
|
||||
}
|
||||
|
||||
.error-message {
|
||||
color: #ef4444;
|
||||
font-size: 0.875rem;
|
||||
margin-top: 0.25rem;
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.cancel-btn {
|
||||
padding: 0.75rem 1.5rem;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 0.5rem;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
.cancel-btn:hover {
|
||||
background: rgba(212, 179, 131, 0.1);
|
||||
border-color: #d4b383;
|
||||
color: #d4b383;
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
padding: 0.75rem 1.5rem;
|
||||
background-color: #d4b383;
|
||||
color: #050505;
|
||||
border: 1px solid #d4b383;
|
||||
border-radius: 0.5rem;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
.submit-btn:hover:not(:disabled) {
|
||||
background-color: transparent;
|
||||
color: #d4b383;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 0 15px rgba(212, 179, 131, 0.3);
|
||||
}
|
||||
|
||||
.submit-btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* MdEditor Customization */
|
||||
.editor-wrapper {
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 0.5rem;
|
||||
overflow: hidden;
|
||||
transition: border-color 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.editor-wrapper:focus-within {
|
||||
border-color: #d4b383;
|
||||
box-shadow: 0 0 0 3px rgba(212, 179, 131, 0.2);
|
||||
}
|
||||
|
||||
:deep(.custom-md-editor) {
|
||||
background-color: rgba(255, 255, 255, 0.05) !important;
|
||||
background-color: transparent !important;
|
||||
--md-bk-color: transparent !important;
|
||||
--md-color: white !important;
|
||||
--md-border-color: transparent !important;
|
||||
height: 500px;
|
||||
height: 600px;
|
||||
}
|
||||
|
||||
:deep(.md-editor-toolbar-wrapper) {
|
||||
background-color: rgba(0, 0, 0, 0.2) !important;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
|
||||
background-color: rgba(255, 255, 255, 0.02) !important;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
|
||||
}
|
||||
|
||||
:deep(.md-editor-content) {
|
||||
@@ -387,23 +276,7 @@ onMounted(async () => {
|
||||
}
|
||||
|
||||
:deep(.md-editor-footer) {
|
||||
background-color: rgba(0, 0, 0, 0.2) !important;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
|
||||
background-color: rgba(255, 255, 255, 0.02) !important;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.form-container {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.cancel-btn,
|
||||
.submit-btn {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -1,51 +1,60 @@
|
||||
<template>
|
||||
<div class="admin-posts">
|
||||
<h1 class="page-title">文章管理</h1>
|
||||
|
||||
<div class="toolbar">
|
||||
<router-link to="/admin/posts/create" class="btn btn-primary">
|
||||
+ 新增文章
|
||||
<div class="w-full animate-reveal">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h1 class="text-2xl font-serif italic text-white">文章管理</h1>
|
||||
<router-link to="/admin/posts/create" class="admin-btn-primary flex items-center gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
|
||||
新增文章
|
||||
</router-link>
|
||||
</div>
|
||||
|
||||
<div class="table-container">
|
||||
<table class="admin-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>标题</th>
|
||||
<th>分类</th>
|
||||
<th>发布日期</th>
|
||||
<th>状态</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="post in posts" :key="post.id">
|
||||
<td>{{ post.id }}</td>
|
||||
<td>{{ post.title }}</td>
|
||||
<td>{{ post.category }}</td>
|
||||
<td>{{ post.date }}</td>
|
||||
<td>
|
||||
<span :class="['status-badge', post.isPublished === 1 ? 'published' : 'draft']">
|
||||
{{ post.isPublished === 1 ? '已发布' : '草稿' }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="actions">
|
||||
<router-link :to="`/admin/posts/${post.id}/edit`" class="btn btn-sm btn-secondary">
|
||||
编辑
|
||||
</router-link>
|
||||
<button @click="deletePost(post.id)" class="btn btn-sm btn-danger">
|
||||
删除
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div v-if="posts.length === 0" class="empty-state">
|
||||
<p>暂无文章，请点击上方按钮新增</p>
|
||||
<div class="admin-card overflow-hidden">
|
||||
<div class="overflow-x-auto">
|
||||
<table class="admin-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="w-20">ID</th>
|
||||
<th>标题</th>
|
||||
<th>分类</th>
|
||||
<th>发布日期</th>
|
||||
<th>状态</th>
|
||||
<th class="text-right">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="post in posts" :key="post.id" class="group transition-colors duration-200">
|
||||
<td class="font-mono text-xs text-white/40">#{{ post.id }}</td>
|
||||
<td class="font-medium text-white group-hover:text-art-accent transition-colors">{{ post.title }}</td>
|
||||
<td><span class="px-2 py-1 rounded bg-white/5 border border-white/5 text-xs text-art-muted">{{ post.category }}</span></td>
|
||||
<td class="text-art-muted text-xs">{{ post.date }}</td>
|
||||
<td>
|
||||
<span :class="['px-2 py-1 rounded-full text-xs font-medium border', post.isPublished === 1 ? 'bg-green-500/10 text-green-400 border-green-500/20' : 'bg-yellow-500/10 text-yellow-400 border-yellow-500/20']">
|
||||
{{ post.isPublished === 1 ? '已发布' : '草稿' }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="text-right">
|
||||
<div class="flex items-center justify-end gap-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
|
||||
<router-link :to="`/admin/posts/${post.id}/edit`" class="admin-btn-secondary py-1 px-3 text-xs">
|
||||
编辑
|
||||
</router-link>
|
||||
<button @click="deletePost(post.id)" class="admin-btn-danger py-1 px-3 text-xs">
|
||||
删除
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div v-if="posts.length === 0" class="p-16 text-center">
|
||||
<div class="w-16 h-16 bg-white/5 rounded-full flex items-center justify-center mx-auto mb-4 text-2xl">📝</div>
|
||||
<h3 class="text-white font-medium mb-2">暂无文章</h3>
|
||||
<p class="text-art-muted text-sm mb-6">开始您的创作之旅吧</p>
|
||||
<router-link to="/admin/posts/create" class="admin-btn-secondary inline-flex items-center gap-2">
|
||||
+ 新增文章
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -65,7 +74,7 @@ const fetchPosts = async () => {
|
||||
posts.value = await getAdminPosts()
|
||||
} catch (error) {
|
||||
console.error('Error fetching posts:', error)
|
||||
toast.error('获取文章列表失败')
|
||||
toast.showToast('获取文章列表失败', 'error')
|
||||
}
|
||||
}
|
||||
|
||||
@@ -73,11 +82,11 @@ const deletePost = async (id: number) => {
|
||||
if (confirm('确定要删除这篇文章吗？')) {
|
||||
try {
|
||||
await deletePostApi(id)
|
||||
toast.success('文章删除成功')
|
||||
toast.showToast('文章删除成功', 'success')
|
||||
fetchPosts()
|
||||
} catch (error) {
|
||||
console.error('Error deleting post:', error)
|
||||
toast.error('删除文章失败')
|
||||
toast.showToast('删除文章失败', 'error')
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -88,147 +97,5 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.admin-posts {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 1.5rem;
|
||||
color: #d4b383;
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
margin-bottom: 1rem;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.admin-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.admin-table th,
|
||||
.admin-table td {
|
||||
padding: 0.75rem 1rem;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.admin-table th {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
font-weight: 600;
|
||||
color: #d4b383;
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
.admin-table tr:hover {
|
||||
background: rgba(212, 179, 131, 0.05);
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
display: inline-block;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 9999px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.status-badge.published {
|
||||
background-color: rgba(16, 185, 129, 0.2);
|
||||
color: #10b981;
|
||||
border: 1px solid rgba(16, 185, 129, 0.3);
|
||||
}
|
||||
|
||||
.status-badge.draft {
|
||||
background-color: rgba(251, 191, 36, 0.2);
|
||||
color: #f59e0b;
|
||||
border: 1px solid rgba(251, 191, 36, 0.3);
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 0.375rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
text-decoration: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
font-family: 'Inter', sans-serif;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: #d4b383;
|
||||
color: #050505;
|
||||
border-color: #d4b383;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: transparent;
|
||||
color: #d4b383;
|
||||
box-shadow: 0 0 15px rgba(212, 179, 131, 0.3);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background-color: rgba(212, 179, 131, 0.1);
|
||||
border-color: #d4b383;
|
||||
color: #d4b383;
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background-color: rgba(239, 68, 68, 0.2);
|
||||
color: #ef4444;
|
||||
border-color: rgba(239, 68, 68, 0.3);
|
||||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
background-color: rgba(239, 68, 68, 0.3);
|
||||
border-color: #ef4444;
|
||||
box-shadow: 0 0 15px rgba(239, 68, 68, 0.3);
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
</style>
|
||||
/* Scoped styles removed, using Tailwind classes */
|
||||
</style>
|
||||
|
||||
@@ -1,81 +1,101 @@
|
||||
<template>
|
||||
<div class="admin-settings">
|
||||
<h1 class="page-title">系统配置管理</h1>
|
||||
|
||||
<div class="table-container">
|
||||
<table class="admin-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>键名</th>
|
||||
<th>值</th>
|
||||
<th>描述</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="setting in settings" :key="setting.id">
|
||||
<td>{{ setting.keyName }}</td>
|
||||
<td class="setting-value">{{ setting.value }}</td>
|
||||
<td>{{ setting.description }}</td>
|
||||
<td class="actions">
|
||||
<button @click="editSetting(setting)" class="btn btn-sm btn-secondary">
|
||||
编辑
|
||||
</button>
|
||||
<button @click="deleteSetting(setting.keyName)" class="btn btn-sm btn-danger">
|
||||
删除
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="w-full animate-reveal">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h1 class="text-2xl font-serif italic text-white">系统配置管理</h1>
|
||||
<!-- Optional: Add Create Button if needed -->
|
||||
<!-- <button @click="openCreateModal" class="admin-btn-primary">+ 新增配置</button> -->
|
||||
</div>
|
||||
|
||||
<div v-if="settings.length === 0" class="empty-state">
|
||||
<p>暂无系统配置</p>
|
||||
<div class="admin-card overflow-hidden">
|
||||
<div class="overflow-x-auto">
|
||||
<table class="admin-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="w-1/4">键名</th>
|
||||
<th class="w-1/3">值</th>
|
||||
<th>描述</th>
|
||||
<th class="text-right w-32">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="setting in settings" :key="setting.id" class="group transition-colors duration-200">
|
||||
<td class="font-mono text-xs text-art-accent">{{ setting.keyName }}</td>
|
||||
<td class="max-w-xs truncate text-white/80" :title="setting.value">{{ setting.value }}</td>
|
||||
<td class="text-art-muted text-sm">{{ setting.description }}</td>
|
||||
<td class="text-right">
|
||||
<div class="flex items-center justify-end gap-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
|
||||
<button @click="editSetting(setting)" class="admin-btn-secondary py-1 px-3 text-xs">
|
||||
编辑
|
||||
</button>
|
||||
<button @click="deleteSetting(setting.keyName)" class="admin-btn-danger py-1 px-3 text-xs">
|
||||
删除
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div v-if="settings.length === 0" class="p-16 text-center">
|
||||
<div class="w-16 h-16 bg-white/5 rounded-full flex items-center justify-center mx-auto mb-4 text-2xl">⚙️</div>
|
||||
<h3 class="text-white font-medium mb-2">暂无配置</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Add/Edit Modal -->
|
||||
<div v-if="showModal" class="modal-overlay">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h2>{{ editingSetting ? '编辑配置' : '新增配置' }}</h2>
|
||||
<button @click="closeModal" class="close-btn">×</button>
|
||||
<div v-if="showModal" class="fixed inset-0 z-50 flex items-center justify-center p-4">
|
||||
<div class="absolute inset-0 bg-black/80 backdrop-blur-sm transition-opacity" @click="closeModal"></div>
|
||||
|
||||
<div class="admin-card w-full max-w-lg relative z-10 flex flex-col max-h-[90vh] shadow-2xl animate-reveal">
|
||||
<div class="flex items-center justify-between p-6 border-b border-white/5">
|
||||
<h2 class="text-lg font-medium text-white">{{ editingSetting ? '编辑配置' : '新增配置' }}</h2>
|
||||
<button @click="closeModal" class="text-white/40 hover:text-white transition-colors">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form @submit.prevent="saveSetting">
|
||||
<div class="form-group">
|
||||
<label for="keyName">键名</label>
|
||||
|
||||
<div class="p-6 overflow-y-auto">
|
||||
<form @submit.prevent="saveSetting" class="space-y-4">
|
||||
<div class="space-y-2">
|
||||
<label for="keyName" class="block text-xs font-medium text-art-muted uppercase tracking-wider">键名</label>
|
||||
<input
|
||||
type="text"
|
||||
id="keyName"
|
||||
v-model="form.keyName"
|
||||
:disabled="editingSetting"
|
||||
required
|
||||
class="form-control"
|
||||
class="admin-input font-mono disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
placeholder="例如: site_title"
|
||||
>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="value">值</label>
|
||||
|
||||
<div class="space-y-2">
|
||||
<label for="value" class="block text-xs font-medium text-art-muted uppercase tracking-wider">值</label>
|
||||
<input
|
||||
type="text"
|
||||
id="value"
|
||||
v-model="form.value"
|
||||
required
|
||||
class="form-control"
|
||||
class="admin-input"
|
||||
placeholder="配置项的值"
|
||||
>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="description">描述</label>
|
||||
|
||||
<div class="space-y-2">
|
||||
<label for="description" class="block text-xs font-medium text-art-muted uppercase tracking-wider">描述</label>
|
||||
<textarea
|
||||
id="description"
|
||||
v-model="form.description"
|
||||
rows="3"
|
||||
class="form-control"
|
||||
class="admin-input resize-none"
|
||||
placeholder="该配置项的用途说明"
|
||||
></textarea>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button type="button" @click="closeModal" class="btn btn-secondary">取消</button>
|
||||
<button type="submit" class="btn btn-primary">保存</button>
|
||||
|
||||
<div class="pt-4 flex justify-end gap-3">
|
||||
<button type="button" @click="closeModal" class="admin-btn-secondary">取消</button>
|
||||
<button type="submit" class="admin-btn-primary">保存</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
@@ -106,7 +126,7 @@ const fetchSettings = async () => {
|
||||
settings.value = await getSettings()
|
||||
} catch (error) {
|
||||
console.error('Error fetching settings:', error)
|
||||
toast.error('获取系统配置失败')
|
||||
toast.showToast('获取系统配置失败', 'error')
|
||||
}
|
||||
}
|
||||
|
||||
@@ -125,20 +145,20 @@ const saveSetting = async () => {
|
||||
try {
|
||||
if (editingSetting.value) {
|
||||
await updateSetting(form.value)
|
||||
toast.success('配置更新成功')
|
||||
toast.showToast('配置更新成功', 'success')
|
||||
} else {
|
||||
await createSetting({
|
||||
keyName: form.value.keyName,
|
||||
value: form.value.value,
|
||||
description: form.value.description
|
||||
})
|
||||
toast.success('配置创建成功')
|
||||
toast.showToast('配置创建成功', 'success')
|
||||
}
|
||||
closeModal()
|
||||
fetchSettings()
|
||||
} catch (error) {
|
||||
console.error('Error saving setting:', error)
|
||||
toast.error(editingSetting.value ? '更新配置失败' : '创建配置失败')
|
||||
toast.showToast(editingSetting.value ? '更新配置失败' : '创建配置失败', 'error')
|
||||
}
|
||||
}
|
||||
|
||||
@@ -146,11 +166,11 @@ const deleteSetting = async (keyName: string) => {
|
||||
if (confirm(`确定要删除配置项 "${keyName}" 吗？`)) {
|
||||
try {
|
||||
await deleteSettingApi(keyName)
|
||||
toast.success('配置删除成功')
|
||||
toast.showToast('配置删除成功', 'success')
|
||||
fetchSettings()
|
||||
} catch (error) {
|
||||
console.error('Error deleting setting:', error)
|
||||
toast.error('删除配置失败')
|
||||
toast.showToast('删除配置失败', 'error')
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -172,241 +192,5 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.admin-settings {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 1.5rem;
|
||||
color: #d4b383;
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
margin-bottom: 1rem;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.admin-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.admin-table th,
|
||||
.admin-table td {
|
||||
padding: 0.75rem 1rem;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
.admin-table th {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
font-weight: 600;
|
||||
color: #d4b383;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.admin-table tr:hover {
|
||||
background: rgba(212, 179, 131, 0.05);
|
||||
}
|
||||
|
||||
.setting-value {
|
||||
max-width: 300px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 0.375rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
text-decoration: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
border: 1px solid transparent;
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: #d4b383;
|
||||
color: #050505;
|
||||
border-color: #d4b383;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: transparent;
|
||||
color: #d4b383;
|
||||
box-shadow: 0 0 15px rgba(212, 179, 131, 0.3);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background-color: rgba(212, 179, 131, 0.1);
|
||||
border-color: #d4b383;
|
||||
color: #d4b383;
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background-color: rgba(239, 68, 68, 0.2);
|
||||
color: #ef4444;
|
||||
border-color: rgba(239, 68, 68, 0.3);
|
||||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
background-color: rgba(239, 68, 68, 0.3);
|
||||
border-color: #ef4444;
|
||||
box-shadow: 0 0 15px rgba(239, 68, 68, 0.3);
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
/* Modal Styles */
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
backdrop-filter: blur(4px);
|
||||
-webkit-backdrop-filter: blur(4px);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.modal-header h2 {
|
||||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: #d4b383;
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
padding: 0;
|
||||
line-height: 1;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.close-btn:hover {
|
||||
color: #d4b383;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 500;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
width: 100%;
|
||||
padding: 0.5rem;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 0.375rem;
|
||||
font-size: 1rem;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
color: white;
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
.form-control::placeholder {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
outline: none;
|
||||
border-color: #d4b383;
|
||||
box-shadow: 0 0 0 3px rgba(212, 179, 131, 0.2);
|
||||
}
|
||||
|
||||
.form-control:disabled {
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
cursor: not-allowed;
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 0.5rem;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
</style>
|
||||
/* Scoped styles removed */
|
||||
</style>
|
||||
|
||||
@@ -1,45 +1,54 @@
|
||||
<template>
|
||||
<div class="admin-works">
|
||||
<h1 class="page-title">作品管理</h1>
|
||||
|
||||
<div class="toolbar">
|
||||
<router-link to="/admin/works/create" class="btn btn-primary">
|
||||
+ 新增作品
|
||||
<div class="w-full animate-reveal">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h1 class="text-2xl font-serif italic text-white">作品管理</h1>
|
||||
<router-link to="/admin/works/create" class="admin-btn-primary flex items-center gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
|
||||
新增作品
|
||||
</router-link>
|
||||
</div>
|
||||
|
||||
<div class="table-container">
|
||||
<table class="admin-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>标题</th>
|
||||
<th>分类</th>
|
||||
<th>年份</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="work in works" :key="work.id">
|
||||
<td>{{ work.id }}</td>
|
||||
<td>{{ work.title }}</td>
|
||||
<td>{{ work.category }}</td>
|
||||
<td>{{ work.year }}</td>
|
||||
<td class="actions">
|
||||
<router-link :to="`/admin/works/${work.id}/edit`" class="btn btn-sm btn-secondary">
|
||||
编辑
|
||||
</router-link>
|
||||
<button @click="deleteWork(work.id)" class="btn btn-sm btn-danger">
|
||||
删除
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div v-if="works.length === 0" class="empty-state">
|
||||
<p>暂无作品，请点击上方按钮新增</p>
|
||||
<div class="admin-card overflow-hidden">
|
||||
<div class="overflow-x-auto">
|
||||
<table class="admin-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="w-20">ID</th>
|
||||
<th>标题</th>
|
||||
<th>分类</th>
|
||||
<th>年份</th>
|
||||
<th class="text-right">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="work in works" :key="work.id" class="group transition-colors duration-200">
|
||||
<td class="font-mono text-xs text-white/40">#{{ work.id }}</td>
|
||||
<td class="font-medium text-white group-hover:text-art-accent transition-colors">{{ work.title }}</td>
|
||||
<td><span class="px-2 py-1 rounded bg-white/5 border border-white/5 text-xs text-art-muted">{{ work.category }}</span></td>
|
||||
<td class="text-art-muted text-xs">{{ work.year }}</td>
|
||||
<td class="text-right">
|
||||
<div class="flex items-center justify-end gap-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
|
||||
<router-link :to="`/admin/works/${work.id}/edit`" class="admin-btn-secondary py-1 px-3 text-xs">
|
||||
编辑
|
||||
</router-link>
|
||||
<button @click="deleteWork(work.id)" class="admin-btn-danger py-1 px-3 text-xs">
|
||||
删除
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div v-if="works.length === 0" class="p-16 text-center">
|
||||
<div class="w-16 h-16 bg-white/5 rounded-full flex items-center justify-center mx-auto mb-4 text-2xl">🎨</div>
|
||||
<h3 class="text-white font-medium mb-2">暂无作品</h3>
|
||||
<p class="text-art-muted text-sm mb-6">展示您的精彩项目</p>
|
||||
<router-link to="/admin/works/create" class="admin-btn-secondary inline-flex items-center gap-2">
|
||||
+ 新增作品
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -57,7 +66,7 @@ const fetchWorks = async () => {
|
||||
works.value = await getAdminWorks()
|
||||
} catch (error) {
|
||||
console.error('Error fetching works:', error)
|
||||
toast.error('获取作品列表失败')
|
||||
toast.showToast('获取作品列表失败', 'error')
|
||||
}
|
||||
}
|
||||
|
||||
@@ -65,11 +74,11 @@ const deleteWork = async (id: string) => {
|
||||
if (confirm('确定要删除这个作品吗？')) {
|
||||
try {
|
||||
await deleteWorkApi(id)
|
||||
toast.success('作品删除成功')
|
||||
toast.showToast('作品删除成功', 'success')
|
||||
fetchWorks()
|
||||
} catch (error) {
|
||||
console.error('Error deleting work:', error)
|
||||
toast.error('删除作品失败')
|
||||
toast.showToast('删除作品失败', 'error')
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -80,126 +89,5 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.admin-works {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 1.5rem;
|
||||
color: #d4b383;
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
margin-bottom: 1rem;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.admin-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.admin-table th,
|
||||
.admin-table td {
|
||||
padding: 0.75rem 1rem;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
.admin-table th {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
font-weight: 600;
|
||||
color: #d4b383;
|
||||
}
|
||||
|
||||
.admin-table tr:hover {
|
||||
background: rgba(212, 179, 131, 0.05);
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 0.375rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
text-decoration: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
font-family: 'Inter', sans-serif;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: rgba(212, 179, 131, 0.1);
|
||||
color: #d4b383;
|
||||
border-color: #d4b383;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: transparent;
|
||||
box-shadow: 0 0 15px rgba(212, 179, 131, 0.3);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background-color: rgba(212, 179, 131, 0.1);
|
||||
border-color: #d4b383;
|
||||
color: #d4b383;
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background-color: rgba(239, 68, 68, 0.2);
|
||||
color: #ef4444;
|
||||
border-color: rgba(239, 68, 68, 0.3);
|
||||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
background-color: rgba(239, 68, 68, 0.3);
|
||||
border-color: #ef4444;
|
||||
box-shadow: 0 0 15px rgba(239, 68, 68, 0.3);
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
</style>
|
||||
/* Scoped styles removed */
|
||||
</style>
|
||||
|
||||
@@ -1,44 +1,47 @@
|
||||
<template>
|
||||
<div class="dashboard-overview">
|
||||
<div class="w-full space-y-6">
|
||||
<!-- Top Stats Cards -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon bg-blue-500/10 text-blue-400">📝</div>
|
||||
<div class="stat-info">
|
||||
<h3>总文章数</h3>
|
||||
<p>{{ stats.posts || 0 }}</p>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<div class="admin-card p-6 flex items-center gap-4 group">
|
||||
<div class="w-12 h-12 rounded-lg bg-blue-500/10 text-blue-400 flex items-center justify-center text-xl group-hover:scale-110 transition-transform duration-300">📝</div>
|
||||
<div>
|
||||
<h3 class="text-sm font-medium text-art-muted">总文章数</h3>
|
||||
<p class="text-2xl font-semibold text-white mt-1">{{ stats.posts || 0 }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon bg-green-500/10 text-green-400">👥</div>
|
||||
<div class="stat-info">
|
||||
<h3>今日访客 (UV)</h3>
|
||||
<p>{{ todayUV }}</p>
|
||||
<div class="admin-card p-6 flex items-center gap-4 group">
|
||||
<div class="w-12 h-12 rounded-lg bg-green-500/10 text-green-400 flex items-center justify-center text-xl group-hover:scale-110 transition-transform duration-300">👥</div>
|
||||
<div>
|
||||
<h3 class="text-sm font-medium text-art-muted">今日访客 (UV)</h3>
|
||||
<p class="text-2xl font-semibold text-white mt-1">{{ todayUV }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon bg-purple-500/10 text-purple-400">📩</div>
|
||||
<div class="stat-info">
|
||||
<h3>合作咨询</h3>
|
||||
<p>{{ stats.inquiryCount || 0 }}</p>
|
||||
<div class="admin-card p-6 flex items-center gap-4 group">
|
||||
<div class="w-12 h-12 rounded-lg bg-purple-500/10 text-purple-400 flex items-center justify-center text-xl group-hover:scale-110 transition-transform duration-300">📩</div>
|
||||
<div>
|
||||
<h3 class="text-sm font-medium text-art-muted">合作咨询</h3>
|
||||
<p class="text-2xl font-semibold text-white mt-1">{{ stats.inquiryCount || 0 }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon bg-yellow-500/10 text-yellow-400">🎨</div>
|
||||
<div class="stat-info">
|
||||
<h3>作品展示</h3>
|
||||
<p>{{ stats.works || '-' }}</p>
|
||||
<div class="admin-card p-6 flex items-center gap-4 group">
|
||||
<div class="w-12 h-12 rounded-lg bg-yellow-500/10 text-yellow-400 flex items-center justify-center text-xl group-hover:scale-110 transition-transform duration-300">🎨</div>
|
||||
<div>
|
||||
<h3 class="text-sm font-medium text-art-muted">作品展示</h3>
|
||||
<p class="text-2xl font-semibold text-white mt-1">{{ stats.works || '-' }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<!-- Recent Activities -->
|
||||
<div class="bg-white/5 border border-white/10 rounded-xl p-6 backdrop-blur-sm">
|
||||
<h3 class="text-lg font-medium text-[#d4b383] mb-4">最近日志</h3>
|
||||
<div class="space-y-4">
|
||||
<div v-for="log in operationLogs" :key="log.id" class="flex items-start gap-4 p-3 bg-white/5 rounded-lg border border-white/5">
|
||||
<div class="w-8 h-8 rounded-full bg-[#d4b383]/10 flex items-center justify-center text-[#d4b383] text-sm shrink-0">
|
||||
<div class="admin-card p-6">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h3 class="text-sm font-medium text-art-muted uppercase tracking-wider">最近日志</h3>
|
||||
<router-link to="/admin/logs" class="text-xs text-art-accent hover:underline">查看全部</router-link>
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<div v-for="log in operationLogs" :key="log.id" class="flex items-start gap-4 p-3 rounded-lg hover:bg-white/5 transition-colors border border-transparent hover:border-white/5">
|
||||
<div class="w-8 h-8 rounded-full bg-art-accent/10 flex items-center justify-center text-art-accent text-xs font-bold shrink-0">
|
||||
{{ log.method }}
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
@@ -46,33 +49,39 @@
|
||||
<span class="text-sm font-medium text-white truncate">{{ log.username }}</span>
|
||||
<span class="text-xs text-white/40 whitespace-nowrap">{{ formatDate(log.createdAt) }}</span>
|
||||
</div>
|
||||
<p class="text-xs text-white/60 truncate font-mono">{{ log.path }}</p>
|
||||
<p class="text-xs text-art-muted truncate font-mono bg-white/5 px-1.5 py-0.5 rounded inline-block">{{ log.path }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="operationLogs.length === 0" class="text-center text-white/40 py-4">暂无日志</div>
|
||||
<div v-if="operationLogs.length === 0" class="text-center text-art-muted text-sm py-8">暂无日志</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Blog Updates -->
|
||||
<div class="bg-white/5 border border-white/10 rounded-xl p-6 backdrop-blur-sm">
|
||||
<h3 class="text-lg font-medium text-[#d4b383] mb-4">博文动态</h3>
|
||||
<div class="space-y-4">
|
||||
<div v-for="post in recentPosts" :key="post.id" class="flex items-start gap-4 p-3 bg-white/5 rounded-lg border border-white/5">
|
||||
<div class="admin-card p-6">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h3 class="text-sm font-medium text-art-muted uppercase tracking-wider">博文动态</h3>
|
||||
<router-link to="/admin/posts" class="text-xs text-art-accent hover:underline">管理文章</router-link>
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<div v-for="post in recentPosts" :key="post.id" class="flex items-start gap-4 p-3 rounded-lg hover:bg-white/5 transition-colors border border-transparent hover:border-white/5">
|
||||
<div class="w-8 h-8 rounded-full bg-blue-500/10 flex items-center justify-center text-blue-400 text-sm shrink-0">
|
||||
📝
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex justify-between items-start mb-1">
|
||||
<span class="text-sm font-medium text-white truncate">{{ post.title }}</span>
|
||||
<span class="text-sm font-medium text-white truncate hover:text-art-accent transition-colors cursor-pointer">{{ post.title }}</span>
|
||||
<span class="text-xs text-white/40 whitespace-nowrap">{{ formatDate(post.date) }}</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 mt-1">
|
||||
<span class="px-2 py-0.5 rounded text-[10px] bg-white/10 text-white/60">{{ post.category }}</span>
|
||||
<span class="text-[10px] text-white/40">👁️ {{ post.readCount || 0 }}</span>
|
||||
<div class="flex items-center gap-2 mt-2">
|
||||
<span class="px-2 py-0.5 rounded text-[10px] bg-white/5 text-white/60 border border-white/5">{{ post.category }}</span>
|
||||
<span class="text-[10px] text-white/40 flex items-center gap-1">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>
|
||||
{{ post.readCount || 0 }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="recentPosts.length === 0" class="text-center text-white/40 py-4">暂无动态</div>
|
||||
<div v-if="recentPosts.length === 0" class="text-center text-art-muted text-sm py-8">暂无动态</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -88,9 +97,7 @@ const operationLogs = ref<any[]>([])
|
||||
const recentPosts = ref<any[]>([])
|
||||
|
||||
const todayUV = computed(() => {
|
||||
// Use dashboard stats for UV if available, otherwise 0
|
||||
if (!stats.value.uvTrend || stats.value.uvTrend.length === 0) return 0
|
||||
// Note: uvTrend uses {date, value} now
|
||||
return stats.value.uvTrend[stats.value.uvTrend.length - 1].value
|
||||
})
|
||||
|
||||
@@ -102,11 +109,10 @@ const formatDate = (dateStr: string) => {
|
||||
|
||||
const loadData = async () => {
|
||||
try {
|
||||
// Parallel requests
|
||||
const [statsData, logsData, postsData] = await Promise.all([
|
||||
getDashboardStats(), // Default 7 days
|
||||
getOperationLogs(1, 5), // Get last 5 logs
|
||||
fetchPosts() // Get posts, we'll slice top 5
|
||||
getDashboardStats(),
|
||||
getOperationLogs(1, 5),
|
||||
fetchPosts()
|
||||
])
|
||||
|
||||
stats.value = statsData
|
||||
@@ -124,41 +130,5 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.dashboard-overview {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 0.75rem;
|
||||
padding: 1.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.stat-icon {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
border-radius: 0.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.stat-info h3 {
|
||||
font-size: 0.875rem;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
margin: 0 0 0.25rem 0;
|
||||
}
|
||||
|
||||
.stat-info p {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
margin: 0;
|
||||
}
|
||||
/* Styles handled by Tailwind utility classes */
|
||||
</style>
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.05); }
|
||||
.custom-scrollbar:hover::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); }
|
||||
|
||||
/* Glass & Utils */
|
||||
/* Glass & Utils - Keep for Frontend */
|
||||
.glass-nav { background: rgba(5, 5, 5, 0.7); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid rgba(255, 255, 255, 0.03); }
|
||||
.art-card { background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.03); transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); position: relative; overflow: hidden; }
|
||||
.art-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.02) 100%); opacity: 0; transition: opacity 0.5s ease; }
|
||||
@@ -35,10 +35,61 @@
|
||||
|
||||
/* Form Error */
|
||||
.input-error { border-bottom-color: #ef4444 !important; }
|
||||
.error-msg { color: #ef4444; font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; margin-top: 0.4rem; display: block; position: absolute; bottom: -1.2rem; left: 0; opacity: 0; letter-spacing: 0.05em; animation: fadeIn 0.3s forwards; background: rgba(239, 68, 68, 0.1); padding: 0.1rem 0.3rem; border-radius: 0.2rem; }
|
||||
.error-msg { color: #ef4444; font-family: 'Inter', sans-serif; font-size: 0.75rem; margin-top: 0.4rem; display: block; animation: fadeIn 0.3s forwards; }
|
||||
@keyframes fadeIn { to { opacity: 1; } }
|
||||
|
||||
/* Code Block */
|
||||
/* Admin UI System - New */
|
||||
@layer components {
|
||||
.admin-page-container {
|
||||
@apply w-full h-full p-0;
|
||||
}
|
||||
|
||||
.admin-card {
|
||||
@apply bg-art-admin-card border border-white/5 rounded-lg shadow-sm transition-all duration-300;
|
||||
}
|
||||
|
||||
.admin-card:hover {
|
||||
@apply border-white/10;
|
||||
}
|
||||
|
||||
.admin-input {
|
||||
@apply w-full bg-art-admin-bg border border-white/10 rounded-md px-4 py-3 text-white placeholder-white/30 transition-all duration-200 font-sans text-sm;
|
||||
}
|
||||
|
||||
.admin-input:focus {
|
||||
@apply border-art-accent ring-1 ring-art-accent outline-none bg-art-surface;
|
||||
}
|
||||
|
||||
.admin-btn-primary {
|
||||
@apply bg-art-accent text-black font-medium px-5 py-2.5 rounded-md hover:opacity-90 active:scale-95 transition-all text-sm tracking-wide;
|
||||
}
|
||||
|
||||
.admin-btn-secondary {
|
||||
@apply bg-transparent text-white border border-white/10 px-5 py-2.5 rounded-md hover:bg-white/5 active:scale-95 transition-all text-sm;
|
||||
}
|
||||
|
||||
.admin-btn-danger {
|
||||
@apply bg-art-error/10 text-art-error border border-art-error/20 px-5 py-2.5 rounded-md hover:bg-art-error/20 active:scale-95 transition-all text-sm;
|
||||
}
|
||||
|
||||
.admin-table {
|
||||
@apply w-full border-collapse text-left;
|
||||
}
|
||||
|
||||
.admin-table th {
|
||||
@apply font-medium text-art-muted text-xs uppercase tracking-wider p-4 border-b border-white/5;
|
||||
}
|
||||
|
||||
.admin-table td {
|
||||
@apply p-4 border-b border-white/5 text-sm text-gray-300;
|
||||
}
|
||||
|
||||
.admin-table tr:hover td {
|
||||
@apply bg-white/[0.02];
|
||||
}
|
||||
}
|
||||
|
||||
/* Code Block - Keep for Frontend, Admin Editor uses its own */
|
||||
.mac-code-block { background: #1e1e1e; padding: 3rem 1.5rem 1.5rem 1.5rem; border-radius: 0.75rem; overflow-x: auto; margin-bottom: 0; border: 1px solid rgba(255,255,255,0.1); position: relative; box-shadow: 0 10px 30px -10px rgba(0,0,0,0.5); }
|
||||
.mac-code-block::before { content: ''; position: absolute; top: 1rem; left: 1.5rem; width: 0.75rem; height: 0.75rem; border-radius: 50%; background: #ff5f56; box-shadow: 1.25rem 0 0 #ffbd2e, 2.5rem 0 0 #27c93f; }
|
||||
.code-keyword { color: #c678dd; } .code-func { color: #61afef; } .code-string { color: #98c379; } .code-comment { color: #5c6370; font-style: italic; }
|
||||
|
||||
@@ -20,7 +20,10 @@ export default {
|
||||
text: '#ececec',
|
||||
muted: '#888888',
|
||||
accent: '#d4b383',
|
||||
error: '#ef4444'
|
||||
error: '#ef4444',
|
||||
'admin-bg': '#0a0a0a',
|
||||
'admin-card': '#121214',
|
||||
'admin-hover': '#1a1a1c',
|
||||
}
|
||||
},
|
||||
backgroundImage: {
|
||||
|
||||
Reference in New Issue
Block a user