You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
33 lines
1.1 KiB
Vue
33 lines
1.1 KiB
Vue
2 years ago
|
<script lang="ts" setup>
|
||
|
|
import { computed } from 'vue'
|
||
|
|
import { SvgIcon } from '@/components/common'
|
||
|
2 years ago
|
import { useAppStore, useChatStore } from '@/store'
|
||
|
2 years ago
|
|
||
|
|
const appStore = useAppStore()
|
||
|
2 years ago
|
const chatStore = useChatStore()
|
||
|
2 years ago
|
|
||
|
|
const collapsed = computed(() => appStore.siderCollapsed)
|
||
|
|
|
||
|
|
function handleAdd() {
|
||
|
2 years ago
|
chatStore.addHistory({ title: 'New Chat', uuid: Date.now(), isEdit: false })
|
||
|
2 years ago
|
}
|
||
|
|
|
||
|
|
function handleUpdateCollapsed() {
|
||
|
|
appStore.setSiderCollapsed(!collapsed.value)
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<header class="fixed top-0 left-0 right-0 z-50 border-b bg-white/80 backdrop-blur">
|
||
|
2 years ago
|
<div class="relative flex items-center justify-between h-14">
|
||
|
2 years ago
|
<button class="flex items-center justify-center w-11 h-11" @click="handleUpdateCollapsed">
|
||
|
|
<SvgIcon v-if="collapsed" class="text-2xl" icon="ri:align-justify" />
|
||
|
|
<SvgIcon v-else class="text-2xl" icon="ri:align-right" />
|
||
|
|
</button>
|
||
|
|
<button class="flex items-center justify-center w-11 h-11" @click="handleAdd">
|
||
|
|
<SvgIcon class="text-2xl" icon="ri:add-fill" />
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
</template>
|