61 lines
1.8 KiB
Vue
61 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
|
|
import { KeyIcon, TrashIcon, SettingsIcon, InfoIcon, HistoryIcon } from 'lucide-vue-next'
|
|
|
|
// 定义props
|
|
interface Props {
|
|
activeTab: string
|
|
}
|
|
|
|
// 定义emits
|
|
interface Emits {
|
|
(e: 'update:activeTab', value: string): void
|
|
}
|
|
|
|
defineProps<Props>()
|
|
defineEmits<Emits>()
|
|
|
|
// 设置菜单项
|
|
const settingsMenu = [
|
|
{ id: 'password', name: '重置密码', icon: KeyIcon },
|
|
{ id: 'clean', name: '数据清理', icon: TrashIcon },
|
|
{ id: 'loginlogs', name: '登录日志', icon: HistoryIcon },
|
|
{ id: 'site', name: '站点设置', icon: SettingsIcon },
|
|
{ id: 'about', name: '站点关于', icon: InfoIcon }
|
|
]
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
export default {
|
|
name: 'SettingsSidebar'
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="lg:w-64 flex-shrink-0">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle class="text-lg">设置</CardTitle>
|
|
<CardDescription>管理系统配置和偏好</CardDescription>
|
|
</CardHeader>
|
|
<CardContent class="p-0">
|
|
<nav class="space-y-1">
|
|
<button
|
|
v-for="item in settingsMenu"
|
|
:key="item.id"
|
|
@click="$emit('update:activeTab', item.id)"
|
|
:class="[
|
|
'w-full flex items-center px-4 py-3 text-left text-sm font-medium transition-colors rounded-md',
|
|
activeTab === item.id
|
|
? 'bg-accent text-accent-foreground border-r-2 border-primary dark:bg-accent/40'
|
|
: 'text-muted-foreground hover:bg-muted hover:text-foreground dark:hover:bg-white/5'
|
|
]"
|
|
>
|
|
<component :is="item.icon" class="mr-3 w-5 h-5" />
|
|
{{ item.name }}
|
|
</button>
|
|
</nav>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</template> |