v0.3.7: 恢复前端Vue源码 + 修复AdminDashboard 401根源
This commit is contained in:
@@ -0,0 +1,312 @@
|
||||
<template>
|
||||
<div class="admin-layout">
|
||||
<aside class="admin-sidebar">
|
||||
<div class="sidebar-brand">
|
||||
<div class="sidebar-logo">☁️</div>
|
||||
<div class="sidebar-brand-text">
|
||||
<h2>{{ siteName || 'CloudSearch' }}</h2>
|
||||
<p>管理控制台</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-menu
|
||||
:default-active="activeMenu"
|
||||
class="sidebar-menu"
|
||||
@select="handleMenuSelect"
|
||||
>
|
||||
<el-menu-item index="dashboard">
|
||||
<el-icon><DataBoard /></el-icon>
|
||||
<span>仪表盘</span>
|
||||
</el-menu-item>
|
||||
|
||||
<el-sub-menu index="cloud-configs">
|
||||
<template #title>
|
||||
<el-icon><Connection /></el-icon>
|
||||
<span>网盘管理</span>
|
||||
</template>
|
||||
<el-menu-item index="cloud-configs-toggle">📋 设置及授权</el-menu-item>
|
||||
<el-menu-item index="cloud-configs-cleanup">🧹 存储清理</el-menu-item>
|
||||
</el-sub-menu>
|
||||
|
||||
<el-sub-menu index="system">
|
||||
<template #title>
|
||||
<el-icon><Setting /></el-icon>
|
||||
<span>系统设置</span>
|
||||
</template>
|
||||
<el-menu-item index="sys-site">🌐 网站设置</el-menu-item>
|
||||
<el-menu-item index="sys-services">🔗 外部服务 & 缓存</el-menu-item>
|
||||
<el-menu-item index="sys-strategy">⚡ 性能配置</el-menu-item>
|
||||
<el-menu-item index="sys-password">🔑 修改密码</el-menu-item>
|
||||
<el-menu-item index="sys-notify">📬 消息推送</el-menu-item>
|
||||
</el-sub-menu>
|
||||
|
||||
<el-menu-item index="save-records">
|
||||
<el-icon><DocumentCopy /></el-icon>
|
||||
<span>转存日志</span>
|
||||
</el-menu-item>
|
||||
|
||||
<div class="sidebar-spacer"></div>
|
||||
|
||||
<div class="sidebar-version">v{{ appVersion }}</div>
|
||||
|
||||
<el-menu-item index="logout">
|
||||
<el-icon><SwitchButton /></el-icon>
|
||||
<span>退出登录</span>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</aside>
|
||||
|
||||
<div class="admin-content">
|
||||
<header class="content-header">
|
||||
<div class="content-breadcrumb">
|
||||
<span class="breadcrumb-current">{{ pageTitle }}</span>
|
||||
</div>
|
||||
<div class="content-actions">
|
||||
<el-button text size="small" @click="goBackHome">
|
||||
<el-icon><ArrowLeft /></el-icon>
|
||||
返回前台
|
||||
</el-button>
|
||||
</div>
|
||||
</header>
|
||||
<main class="content-body">
|
||||
<router-view />
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import { DataBoard, Connection, Setting, SwitchButton, DocumentCopy, ArrowLeft } from '@element-plus/icons-vue'
|
||||
import { getSiteConfig } from '../../api'
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
|
||||
const siteName = ref('')
|
||||
const appVersion = ref('')
|
||||
|
||||
const pageTitles: Record<string, string> = {
|
||||
dashboard: '仪表盘',
|
||||
'cloud-configs-toggle': '网盘设置及授权',
|
||||
'cloud-configs-cleanup': '存储清理',
|
||||
'sys-site': '网站设置',
|
||||
'sys-services': '外部服务 & 缓存',
|
||||
'sys-strategy': '性能配置',
|
||||
'sys-password': '修改管理员密码',
|
||||
'sys-notify': '消息推送',
|
||||
'save-records': '转存日志',
|
||||
}
|
||||
|
||||
const activeMenu = computed(() => {
|
||||
const name = route.name as string
|
||||
if (name === 'admin-cloud-configs') return 'cloud-configs-toggle'
|
||||
if (name === 'admin-cleanup') return 'cloud-configs-cleanup'
|
||||
if (name === 'admin-system') {
|
||||
const sec = route.query.section as string
|
||||
return sec || 'sys-site'
|
||||
}
|
||||
if (name === 'admin-save-records') return 'save-records'
|
||||
return 'dashboard'
|
||||
})
|
||||
|
||||
const pageTitle = computed(() => {
|
||||
return pageTitles[activeMenu.value] || '仪表盘'
|
||||
})
|
||||
|
||||
function handleMenuSelect(index: string) {
|
||||
if (index === 'dashboard') {
|
||||
router.push('/admin/dashboard')
|
||||
} else if (index === 'cloud-configs-toggle') {
|
||||
router.push('/admin/cloud-configs')
|
||||
} else if (index === 'cloud-configs-cleanup') {
|
||||
router.push('/admin/cleanup')
|
||||
} else if (index.startsWith('sys-')) {
|
||||
router.push({ path: '/admin/system', query: { section: index } })
|
||||
} else if (index === 'save-records') {
|
||||
router.push('/admin/save-records')
|
||||
} else if (index === 'logout') {
|
||||
localStorage.removeItem('admin_token')
|
||||
router.push('/admin/login')
|
||||
}
|
||||
}
|
||||
|
||||
function goBackHome() {
|
||||
router.push('/')
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
const cfg = await getSiteConfig()
|
||||
siteName.value = cfg.site_name || ''
|
||||
} catch {}
|
||||
try {
|
||||
const h = await fetch('/health')
|
||||
const hv = await h.json()
|
||||
appVersion.value = hv.version
|
||||
} catch {}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.admin-layout {
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
background: var(--bg-page);
|
||||
}
|
||||
|
||||
/* ── Sidebar ── */
|
||||
.admin-sidebar {
|
||||
width: var(--sidebar-w);
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: linear-gradient(180deg, #111827 0%, #1e293b 100%);
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.sidebar-brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 20px 20px 16px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
.sidebar-logo {
|
||||
font-size: 28px;
|
||||
line-height: 1;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.sidebar-brand-text h2 {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
line-height: 1.3;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.sidebar-brand-text p {
|
||||
font-size: 11px;
|
||||
margin: 2px 0 0;
|
||||
color: rgba(255, 255, 255, 0.45);
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
/* ── Menu ── */
|
||||
.sidebar-menu {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: transparent !important;
|
||||
border-right: none !important;
|
||||
padding: 4px 0;
|
||||
}
|
||||
.sidebar-menu :deep(.el-menu-item),
|
||||
.sidebar-menu :deep(.el-sub-menu__title) {
|
||||
color: rgba(255, 255, 255, 0.65);
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
transition: all 0.2s ease;
|
||||
margin: 0 6px;
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
.sidebar-menu :deep(.el-menu-item):hover,
|
||||
.sidebar-menu :deep(.el-sub-menu__title):hover {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
.sidebar-menu :deep(.el-menu-item.is-active) {
|
||||
color: #fff;
|
||||
background: linear-gradient(90deg, rgba(64, 158, 255, 0.25) 0%, rgba(99, 102, 241, 0.15) 100%);
|
||||
font-weight: 500;
|
||||
}
|
||||
.sidebar-menu :deep(.el-menu-item)::after {
|
||||
display: none;
|
||||
}
|
||||
.sidebar-menu :deep(.el-sub-menu .el-menu) {
|
||||
background: rgba(0, 0, 0, 0.2) !important;
|
||||
}
|
||||
.sidebar-menu :deep(.el-sub-menu .el-menu .el-menu-item) {
|
||||
padding-left: 52px !important;
|
||||
font-size: 13px;
|
||||
height: 38px;
|
||||
line-height: 38px;
|
||||
}
|
||||
.sidebar-menu :deep(.el-icon) {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.sidebar-spacer {
|
||||
flex: 1;
|
||||
}
|
||||
.sidebar-version {
|
||||
text-align: center;
|
||||
font-size: 11px;
|
||||
color: rgba(255, 255, 255, 0.25);
|
||||
padding: 8px 0;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
/* ── Content Area ── */
|
||||
.admin-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.content-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 28px;
|
||||
background: var(--bg-card);
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.content-breadcrumb {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.breadcrumb-current {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: var(--text);
|
||||
}
|
||||
.content-actions :deep(.el-button) {
|
||||
color: var(--text-secondary);
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.content-body {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 24px 28px;
|
||||
}
|
||||
|
||||
/* ── Global page save bar ── */
|
||||
.content-body :deep(.save-bar) {
|
||||
position: fixed;
|
||||
bottom: 32px;
|
||||
right: 32px;
|
||||
z-index: 100;
|
||||
background: var(--bg-card);
|
||||
padding: 12px 16px;
|
||||
border-radius: var(--radius-lg);
|
||||
border: 1px solid var(--border);
|
||||
box-shadow: 0 4px 16px rgba(0,0,0,0.12);
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
transition: box-shadow 0.2s, transform 0.2s;
|
||||
}
|
||||
.content-body :deep(.save-bar:hover) {
|
||||
box-shadow: 0 6px 24px rgba(0,0,0,0.18);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user