748 lines
18 KiB
Vue
748 lines
18 KiB
Vue
<script setup lang="ts">
|
|
import { ref, computed, onMounted } from 'vue'
|
|
import { useRouter, useRoute } from 'vue-router'
|
|
import { useUserStore } from '@/stores/user'
|
|
|
|
const router = useRouter()
|
|
const route = useRoute()
|
|
const userStore = useUserStore()
|
|
|
|
// 侧边栏折叠状态
|
|
const sidebarCollapsed = ref(false)
|
|
|
|
// 主题切换
|
|
const isDark = ref(false)
|
|
|
|
// 用户菜单显示状态
|
|
const userMenuOpen = ref(false)
|
|
|
|
// 导航菜单
|
|
const navigation = computed(() => [
|
|
{
|
|
name: '首页',
|
|
path: '/home',
|
|
icon: 'M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'
|
|
},
|
|
{
|
|
name: '新闻',
|
|
path: '/news',
|
|
icon: 'M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z'
|
|
},
|
|
{
|
|
name: '统计',
|
|
path: '/statistics',
|
|
icon: 'M3 3v18h18 M18 17V9 M13 17V5 M8 17v-3'
|
|
}
|
|
])
|
|
|
|
// 管理员菜单
|
|
const adminNavigation = computed(() => [
|
|
{
|
|
name: '管理后台',
|
|
path: '/admin',
|
|
icon: 'M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 0 0-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 0 0-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 0 0-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0z'
|
|
}
|
|
])
|
|
|
|
// 当前页面标题
|
|
const pageTitle = computed(() => {
|
|
const allNav = [...navigation.value, ...adminNavigation.value]
|
|
const current = allNav.find(item => route.path.startsWith(item.path))
|
|
return current?.name || 'News Classifier'
|
|
})
|
|
|
|
// 初始化主题
|
|
onMounted(() => {
|
|
const saved = localStorage.getItem('theme')
|
|
if (saved === 'dark') {
|
|
isDark.value = true
|
|
document.documentElement.classList.add('dark')
|
|
}
|
|
userStore.loadUserInfo()
|
|
})
|
|
|
|
function toggleSidebar() {
|
|
sidebarCollapsed.value = !sidebarCollapsed.value
|
|
}
|
|
|
|
function toggleTheme() {
|
|
isDark.value = !isDark.value
|
|
if (isDark.value) {
|
|
document.documentElement.classList.add('dark')
|
|
localStorage.setItem('theme', 'dark')
|
|
} else {
|
|
document.documentElement.classList.remove('dark')
|
|
localStorage.setItem('theme', 'light')
|
|
}
|
|
}
|
|
|
|
function toggleUserMenu() {
|
|
userMenuOpen.value = !userMenuOpen.value
|
|
}
|
|
|
|
function handleLogout() {
|
|
userStore.logout()
|
|
router.push('/login')
|
|
}
|
|
|
|
function navigateTo(path: string) {
|
|
router.push(path)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="main-layout" :class="{ dark: isDark }">
|
|
<!-- 侧边栏 -->
|
|
<aside class="sidebar" :class="{ collapsed: sidebarCollapsed }">
|
|
<!-- Logo 区域 -->
|
|
<div class="sidebar-header">
|
|
<div class="logo">
|
|
<div class="logo-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-2 2Zm0 0a2 2 0 0 1-2-2v-9c0-1.1.9-2 2-2h2"/>
|
|
<path d="M18 14h-8"/>
|
|
<path d="M15 18h-5"/>
|
|
<path d="M10 6h8v4h-8V6Z"/>
|
|
</svg>
|
|
</div>
|
|
<span v-show="!sidebarCollapsed" class="logo-text">NEWS<br/>CLASSIFIER</span>
|
|
</div>
|
|
<button class="collapse-btn" @click="toggleSidebar">
|
|
<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">
|
|
<rect x="3" y="3" width="18" height="18" rx="2"/>
|
|
<path d="M9 3v18"/>
|
|
<path d="m14 9 3 3-3 3"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- 导航菜单 -->
|
|
<nav class="sidebar-nav">
|
|
<div class="nav-section">
|
|
<div v-for="item in navigation" :key="item.path" class="nav-item" :class="{ active: route.path.startsWith(item.path) }" @click="navigateTo(item.path)">
|
|
<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="item.icon"/>
|
|
</svg>
|
|
<span v-show="!sidebarCollapsed">{{ item.name }}</span>
|
|
<div v-show="!sidebarCollapsed" class="nav-indicator"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 管理员菜单 -->
|
|
<div v-if="userStore.isAdmin" class="nav-section admin-section">
|
|
<div v-show="!sidebarCollapsed" class="nav-section-title">ADMIN</div>
|
|
<div v-for="item in adminNavigation" :key="item.path" class="nav-item" :class="{ active: route.path.startsWith(item.path) }" @click="navigateTo(item.path)">
|
|
<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="item.icon"/>
|
|
</svg>
|
|
<span v-show="!sidebarCollapsed">{{ item.name }}</span>
|
|
<div v-show="!sidebarCollapsed" class="nav-indicator"></div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</aside>
|
|
|
|
<!-- 主内容区 -->
|
|
<div class="main-content">
|
|
<!-- 顶部栏 -->
|
|
<header class="header">
|
|
<div class="header-left">
|
|
<h1 class="page-title">{{ pageTitle }}</h1>
|
|
</div>
|
|
|
|
<div class="header-right">
|
|
<!-- 主题切换 -->
|
|
<button class="icon-btn" @click="toggleTheme" title="切换主题">
|
|
<svg v-if="isDark" 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">
|
|
<circle cx="12" cy="12" r="5"/>
|
|
<line x1="12" y1="1" x2="12" y2="3"/>
|
|
<line x1="12" y1="21" x2="12" y2="23"/>
|
|
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/>
|
|
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
|
|
<line x1="1" y1="12" x2="3" y2="12"/>
|
|
<line x1="21" y1="12" x2="23" y2="12"/>
|
|
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/>
|
|
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
|
|
</svg>
|
|
<svg v-else 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="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
|
|
</svg>
|
|
</button>
|
|
|
|
<!-- 用户菜单 -->
|
|
<div class="user-menu">
|
|
<button class="user-btn" @click="toggleUserMenu">
|
|
<div class="user-avatar">
|
|
<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="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
|
|
<circle cx="12" cy="7" r="4"/>
|
|
</svg>
|
|
</div>
|
|
<span class="user-name">{{ userStore.userInfo?.username || '用户' }}</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">
|
|
<polyline points="6 9 12 15 18 9"/>
|
|
</svg>
|
|
</button>
|
|
|
|
<!-- 用户下拉菜单 -->
|
|
<div v-show="userMenuOpen" class="user-dropdown">
|
|
<div class="dropdown-header">
|
|
<div class="dropdown-avatar">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
|
|
<circle cx="12" cy="7" r="4"/>
|
|
</svg>
|
|
</div>
|
|
<div class="dropdown-info">
|
|
<div class="dropdown-name">{{ userStore.userInfo?.username || '用户' }}</div>
|
|
<div class="dropdown-role">{{ userStore.userInfo?.role === 'ADMIN' ? '管理员' : '普通用户' }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="dropdown-divider"></div>
|
|
|
|
<button class="dropdown-item" @click="handleLogout">
|
|
<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">
|
|
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
|
|
<polyline points="16 17 21 12 16 7"/>
|
|
<line x1="21" y1="12" x2="9" y2="12"/>
|
|
</svg>
|
|
<span>退出登录</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- 内容区域 -->
|
|
<main class="content">
|
|
<router-view />
|
|
</main>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=JetBrains+Mono:wght@400;500;600;700&display=swap');
|
|
|
|
:root {
|
|
--font-display: 'Archivo Black', sans-serif;
|
|
--font-mono: 'JetBrains Mono', monospace;
|
|
--color-black: #000000;
|
|
--color-white: #ffffff;
|
|
--color-gray-50: #fafafa;
|
|
--color-gray-100: #f5f5f5;
|
|
--color-gray-200: #e5e5e5;
|
|
--color-gray-300: #d4d4d4;
|
|
--color-gray-400: #a3a3a3;
|
|
--color-gray-500: #737373;
|
|
--color-gray-600: #525252;
|
|
--color-gray-700: #404040;
|
|
--color-gray-800: #262626;
|
|
--color-gray-900: #171717;
|
|
}
|
|
|
|
.dark {
|
|
--color-black: #ffffff;
|
|
--color-white: #000000;
|
|
--color-gray-50: #0a0a0a;
|
|
--color-gray-100: #171717;
|
|
--color-gray-200: #262626;
|
|
--color-gray-300: #404040;
|
|
--color-gray-400: #525252;
|
|
--color-gray-500: #737373;
|
|
--color-gray-600: #a3a3a3;
|
|
--color-gray-700: #d4d4d4;
|
|
--color-gray-800: #e5e5e5;
|
|
--color-gray-900: #f5f5f5;
|
|
}
|
|
|
|
.main-layout {
|
|
display: flex;
|
|
min-height: 100vh;
|
|
background: var(--color-gray-50);
|
|
font-family: var(--font-mono);
|
|
}
|
|
|
|
.dark .main-layout {
|
|
background: var(--color-gray-50);
|
|
}
|
|
|
|
/* 侧边栏样式 */
|
|
.sidebar {
|
|
width: 260px;
|
|
background: var(--color-white);
|
|
border-right: 2px solid var(--color-black);
|
|
display: flex;
|
|
flex-direction: column;
|
|
transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
flex-shrink: 0;
|
|
position: relative;
|
|
}
|
|
|
|
.sidebar::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
width: 4px;
|
|
background: repeating-linear-gradient(
|
|
180deg,
|
|
var(--color-black) 0px,
|
|
var(--color-black) 2px,
|
|
transparent 2px,
|
|
transparent 8px
|
|
);
|
|
}
|
|
|
|
.dark .sidebar {
|
|
background: var(--color-gray-100);
|
|
border-color: var(--color-white);
|
|
}
|
|
|
|
.dark .sidebar::before {
|
|
background: repeating-linear-gradient(
|
|
180deg,
|
|
var(--color-white) 0px,
|
|
var(--color-white) 2px,
|
|
transparent 2px,
|
|
transparent 8px
|
|
);
|
|
}
|
|
|
|
.sidebar.collapsed {
|
|
width: 80px;
|
|
}
|
|
|
|
.sidebar-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 1.5rem 1rem;
|
|
border-bottom: 1px solid var(--color-gray-300);
|
|
}
|
|
|
|
.dark .sidebar-header {
|
|
border-color: var(--color-gray-400);
|
|
}
|
|
|
|
.logo {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
color: var(--color-black);
|
|
}
|
|
|
|
.logo-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 40px;
|
|
height: 40px;
|
|
background: var(--color-black);
|
|
color: var(--color-white);
|
|
border-radius: 8px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.dark .logo-icon {
|
|
background: var(--color-white);
|
|
color: var(--color-black);
|
|
}
|
|
|
|
.logo-text {
|
|
font-family: var(--font-display);
|
|
font-size: 0.875rem;
|
|
font-weight: 400;
|
|
line-height: 1.1;
|
|
letter-spacing: 0.05em;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.collapse-btn {
|
|
padding: 0.5rem;
|
|
color: var(--color-gray-600);
|
|
background: transparent;
|
|
border: 1px solid var(--color-gray-300);
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.collapse-btn:hover {
|
|
background: var(--color-black);
|
|
color: var(--color-white);
|
|
border-color: var(--color-black);
|
|
}
|
|
|
|
.dark .collapse-btn {
|
|
color: var(--color-gray-500);
|
|
border-color: var(--color-gray-500);
|
|
}
|
|
|
|
.dark .collapse-btn:hover {
|
|
background: var(--color-white);
|
|
color: var(--color-black);
|
|
border-color: var(--color-white);
|
|
}
|
|
|
|
.sidebar-nav {
|
|
flex: 1;
|
|
padding: 1.5rem 0.75rem;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.nav-section {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.nav-section:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.nav-section-title {
|
|
padding: 0.5rem 0.75rem;
|
|
font-size: 0.6rem;
|
|
font-weight: 700;
|
|
font-family: var(--font-mono);
|
|
color: var(--color-gray-500);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.15em;
|
|
}
|
|
|
|
.admin-section {
|
|
border-top: 1px solid var(--color-gray-300);
|
|
padding-top: 1.5rem;
|
|
}
|
|
|
|
.dark .admin-section {
|
|
border-color: var(--color-gray-500);
|
|
}
|
|
|
|
.nav-item {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
padding: 0.75rem;
|
|
color: var(--color-gray-700);
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
border-radius: 6px;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.nav-item:hover {
|
|
background: var(--color-gray-100);
|
|
color: var(--color-black);
|
|
}
|
|
|
|
.dark .nav-item {
|
|
color: var(--color-gray-400);
|
|
}
|
|
|
|
.dark .nav-item:hover {
|
|
background: var(--color-gray-200);
|
|
color: var(--color-white);
|
|
}
|
|
|
|
.nav-item.active {
|
|
background: var(--color-black);
|
|
color: var(--color-white);
|
|
}
|
|
|
|
.dark .nav-item.active {
|
|
background: var(--color-white);
|
|
color: var(--color-black);
|
|
}
|
|
|
|
.nav-item svg {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.nav-item span {
|
|
font-size: 0.8125rem;
|
|
font-weight: 500;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.nav-indicator {
|
|
margin-left: auto;
|
|
width: 6px;
|
|
height: 6px;
|
|
background: currentColor;
|
|
border-radius: 50%;
|
|
opacity: 0;
|
|
transition: opacity 0.2s;
|
|
}
|
|
|
|
.nav-item.active .nav-indicator {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* 主内容区 */
|
|
.main-content {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
}
|
|
|
|
/* 顶部栏 */
|
|
.header {
|
|
position: relative;
|
|
z-index: 100;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 1rem 1.5rem;
|
|
background: var(--color-white);
|
|
border-bottom: 2px solid var(--color-black);
|
|
}
|
|
|
|
.dark .header {
|
|
background: var(--color-gray-100);
|
|
border-color: var(--color-white);
|
|
}
|
|
|
|
.header-left {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.page-title {
|
|
font-family: var(--font-display);
|
|
font-size: 1.5rem;
|
|
font-weight: 400;
|
|
color: var(--color-black);
|
|
margin: 0;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.dark .page-title {
|
|
color: var(--color-white);
|
|
}
|
|
|
|
.header-right {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.icon-btn {
|
|
padding: 0.625rem;
|
|
color: var(--color-gray-600);
|
|
background: transparent;
|
|
border: 1px solid var(--color-gray-300);
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.icon-btn:hover {
|
|
background: var(--color-black);
|
|
color: var(--color-white);
|
|
border-color: var(--color-black);
|
|
}
|
|
|
|
.dark .icon-btn {
|
|
color: var(--color-gray-500);
|
|
border-color: var(--color-gray-500);
|
|
}
|
|
|
|
.dark .icon-btn:hover {
|
|
background: var(--color-white);
|
|
color: var(--color-black);
|
|
border-color: var(--color-white);
|
|
}
|
|
|
|
/* 用户菜单 */
|
|
.user-menu {
|
|
position: relative;
|
|
}
|
|
|
|
.user-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem 0.75rem;
|
|
background: var(--color-gray-100);
|
|
border: 1px solid var(--color-gray-300);
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.user-btn:hover {
|
|
background: var(--color-gray-200);
|
|
border-color: var(--color-black);
|
|
}
|
|
|
|
.dark .user-btn {
|
|
background: var(--color-gray-200);
|
|
border-color: var(--color-gray-500);
|
|
}
|
|
|
|
.dark .user-btn:hover {
|
|
background: var(--color-gray-300);
|
|
border-color: var(--color-white);
|
|
}
|
|
|
|
.user-avatar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 32px;
|
|
height: 32px;
|
|
background: var(--color-black);
|
|
color: var(--color-white);
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.dark .user-avatar {
|
|
background: var(--color-white);
|
|
color: var(--color-black);
|
|
}
|
|
|
|
.user-name {
|
|
font-size: 0.8125rem;
|
|
font-weight: 600;
|
|
color: var(--color-black);
|
|
max-width: 120px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.dark .user-name {
|
|
color: var(--color-white);
|
|
}
|
|
|
|
.user-dropdown {
|
|
position: absolute;
|
|
top: calc(100% + 0.5rem);
|
|
right: 0;
|
|
width: 260px;
|
|
background: var(--color-white);
|
|
border: 2px solid var(--color-black);
|
|
border-radius: 8px;
|
|
box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.1);
|
|
z-index: 1;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.dark .user-dropdown {
|
|
background: var(--color-gray-100);
|
|
border-color: var(--color-white);
|
|
box-shadow: 8px 8px 0 rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.dropdown-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
padding: 1.25rem;
|
|
border-bottom: 1px solid var(--color-gray-300);
|
|
}
|
|
|
|
.dark .dropdown-header {
|
|
border-color: var(--color-gray-500);
|
|
}
|
|
|
|
.dropdown-avatar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 48px;
|
|
height: 48px;
|
|
background: var(--color-black);
|
|
color: var(--color-white);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.dark .dropdown-avatar {
|
|
background: var(--color-white);
|
|
color: var(--color-black);
|
|
}
|
|
|
|
.dropdown-info {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.dropdown-name {
|
|
font-family: var(--font-display);
|
|
font-size: 0.9375rem;
|
|
font-weight: 400;
|
|
color: var(--color-black);
|
|
}
|
|
|
|
.dark .dropdown-name {
|
|
color: var(--color-white);
|
|
}
|
|
|
|
.dropdown-role {
|
|
font-size: 0.75rem;
|
|
color: var(--color-gray-600);
|
|
margin-top: 0.125rem;
|
|
}
|
|
|
|
.dark .dropdown-role {
|
|
color: var(--color-gray-400);
|
|
}
|
|
|
|
.dropdown-divider {
|
|
height: 1px;
|
|
background: var(--color-gray-300);
|
|
}
|
|
|
|
.dark .dropdown-divider {
|
|
background: var(--color-gray-500);
|
|
}
|
|
|
|
.dropdown-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
width: 100%;
|
|
padding: 0.875rem 1.25rem;
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--color-black);
|
|
font-size: 0.8125rem;
|
|
font-weight: 500;
|
|
font-family: var(--font-mono);
|
|
cursor: pointer;
|
|
transition: background 0.2s;
|
|
}
|
|
|
|
.dropdown-item:hover {
|
|
background: var(--color-gray-100);
|
|
}
|
|
|
|
.dark .dropdown-item {
|
|
color: var(--color-white);
|
|
}
|
|
|
|
.dark .dropdown-item:hover {
|
|
background: var(--color-gray-200);
|
|
}
|
|
|
|
.dropdown-item svg {
|
|
color: var(--color-gray-600);
|
|
}
|
|
|
|
.dark .dropdown-item svg {
|
|
color: var(--color-gray-500);
|
|
}
|
|
|
|
/* 内容区域 */
|
|
.content {
|
|
flex: 1;
|
|
padding: 1.5rem;
|
|
overflow-y: auto;
|
|
}
|
|
</style>
|