80 lines
2.4 KiB
Vue
80 lines
2.4 KiB
Vue
<script setup lang="ts">
|
||
import { ChevronLeftIcon } from "@/assets/Icons";
|
||
import logo from "@/assets/logo.png";
|
||
import { useChatStore, useLayoutStore } from "@/stores";
|
||
|
||
const chatStore = useChatStore();
|
||
const { onlineCount } = storeToRefs(chatStore);
|
||
const layoutStore = useLayoutStore();
|
||
const { hiddenLeftSidebar, simpleMode } = storeToRefs(layoutStore);
|
||
</script>
|
||
|
||
<template>
|
||
<div class="relative h-screen flex overflow-hidden">
|
||
<div
|
||
class="absolute left-0 top-0 bottom-0 z-10 flex-none w-[200px] h-full flex flex-col bg-white transition-all ease-in-out"
|
||
:class="{
|
||
'-translate-x-[200px]': hiddenLeftSidebar
|
||
}"
|
||
>
|
||
<div
|
||
@click="hiddenLeftSidebar = !hiddenLeftSidebar"
|
||
class="absolute -right-3 translate-y-1/2 top-1/2 z-20 w-[24px] h-[24px] bg-[#0094c526] rounded-full flex items-center justify-center cursor-pointer"
|
||
:class="{
|
||
'rotate-180 -right-8': hiddenLeftSidebar
|
||
}"
|
||
>
|
||
<ChevronLeftIcon class="!w-4 !h-4 text-[#777]" />
|
||
</div>
|
||
<router-link class="w-full my-6 cursor-pointer" to="/">
|
||
<NImage
|
||
class="w-full object-cover"
|
||
:src="logo"
|
||
alt="logo"
|
||
:preview-disabled="true"
|
||
/>
|
||
</router-link>
|
||
<router-link
|
||
class="w-full h-[52px] px-8 flex items-center cursor-pointer"
|
||
:class="
|
||
$route.path === '/'
|
||
? [
|
||
'bg-[rgba(37,99,235,0.04)] text-[#0094c5] border-r-2 border-[#0094c5]'
|
||
]
|
||
: []
|
||
"
|
||
to="/"
|
||
>
|
||
对话
|
||
</router-link>
|
||
<router-link
|
||
class="w-full h-[52px] px-8 flex items-center cursor-pointer"
|
||
:class="
|
||
$route.path === '/voice'
|
||
? [
|
||
'bg-[rgba(37,99,235,0.04)] text-[#0094c5] border-r-2 border-[#0094c5]'
|
||
]
|
||
: []
|
||
"
|
||
to="/voice"
|
||
>
|
||
语音聊天
|
||
</router-link>
|
||
|
||
<div class="w-full h-full flex flex-col items-center text-[#0094c5]">
|
||
<div class="flex-1 flex flex-col justify-end w-full">
|
||
<div class="w-full p-8 font-bold">
|
||
当前在线人数：{{ onlineCount || 0 }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="flex-1 relative"
|
||
:class="{ 'ml-[200px]': !hiddenLeftSidebar && !simpleMode }"
|
||
>
|
||
<RouterView />
|
||
</div>
|
||
</div>
|
||
</template>
|