<script setup lang="ts">
|
import type { Props } from './types';
|
|
import { preferences } from '..\..\..\..\..\@core\preferences\src';
|
import {
|
Card,
|
Separator,
|
Tabs,
|
TabsList,
|
TabsTrigger,
|
VbenAvatar,
|
} from '..\..\..\..\..\@core\ui-kit\shadcn-ui\src';
|
|
import { Page } from '../../components';
|
|
defineOptions({
|
name: 'ProfileUI',
|
});
|
|
withDefaults(defineProps<Props>(), {
|
title: '关于项目',
|
tabs: () => [],
|
});
|
|
const tabsValue = defineModel<string>('modelValue');
|
</script>
|
<template>
|
<Page auto-content-height>
|
<div class="flex size-full">
|
<Card class="w-1/6 flex-none">
|
<div class="mt-4 flex-col-center h-40 gap-4">
|
<VbenAvatar
|
:src="userInfo?.avatar ?? preferences.app.defaultAvatar"
|
class="size-20"
|
/>
|
<span class="text-lg font-semibold">
|
{{ userInfo?.nickname ?? '' }}
|
</span>
|
<span class="text-sm text-foreground/80">
|
{{ userInfo?.username ?? '' }}
|
</span>
|
</div>
|
<Separator class="my-4" />
|
<Tabs v-model="tabsValue" orientation="vertical" class="m-4">
|
<TabsList class="grid w-full grid-cols-1 bg-card">
|
<TabsTrigger
|
v-for="tab in tabs"
|
:key="tab.value"
|
:value="tab.value"
|
class="h-12 justify-start data-[state=active]:bg-primary data-[state=active]:text-primary-foreground"
|
>
|
{{ tab.label }}
|
</TabsTrigger>
|
</TabsList>
|
</Tabs>
|
</Card>
|
<Card class="ml-4 w-5/6 flex-auto p-8">
|
<slot name="content"></slot>
|
</Card>
|
</div>
|
</Page>
|
</template>
|
