f40048fb08
* feat: 支持 markdown 格式和图片 * perf: 重载的时候滚动条保持 * chore: version 2.5.2 * feat: 添加文字换行 * chore: 添加新封面 * chore: 更新 cover * feat: 支持 web api 的形式 * feat: 支持新模型和调整超时 * feat: 添加反向代理 * chore: 更新 README.md * feat: 添加超时和反向代理显示 * chore: version 2.6.0 * chore: update README
77 lines
1.8 KiB
Vue
77 lines
1.8 KiB
Vue
<script setup lang='ts'>
|
|
import type { CSSProperties } from 'vue'
|
|
import { computed, watch } from 'vue'
|
|
import { NButton, NLayoutSider } from 'naive-ui'
|
|
import List from './List.vue'
|
|
import Footer from './Footer.vue'
|
|
import { useAppStore, useChatStore } from '@/store'
|
|
import { useBasicLayout } from '@/hooks/useBasicLayout'
|
|
|
|
const appStore = useAppStore()
|
|
const chatStore = useChatStore()
|
|
|
|
const { isMobile } = useBasicLayout()
|
|
|
|
const collapsed = computed(() => appStore.siderCollapsed)
|
|
|
|
function handleAdd() {
|
|
chatStore.addHistory({ title: 'New Chat', uuid: Date.now(), isEdit: false })
|
|
}
|
|
|
|
function handleUpdateCollapsed() {
|
|
appStore.setSiderCollapsed(!collapsed.value)
|
|
}
|
|
|
|
const getMobileClass = computed<CSSProperties>(() => {
|
|
if (isMobile.value) {
|
|
return {
|
|
position: 'fixed',
|
|
zIndex: 50,
|
|
}
|
|
}
|
|
return {}
|
|
})
|
|
|
|
watch(
|
|
isMobile,
|
|
(val) => {
|
|
appStore.setSiderCollapsed(val)
|
|
},
|
|
{
|
|
immediate: true,
|
|
flush: 'post',
|
|
},
|
|
)
|
|
</script>
|
|
|
|
<template>
|
|
<NLayoutSider
|
|
:collapsed="collapsed"
|
|
:collapsed-width="0"
|
|
:width="260"
|
|
:show-trigger="isMobile ? false : 'arrow-circle'"
|
|
collapse-mode="transform"
|
|
position="absolute"
|
|
bordered
|
|
:style="getMobileClass"
|
|
@update-collapsed="handleUpdateCollapsed"
|
|
>
|
|
<div class="flex flex-col h-full">
|
|
<main class="flex flex-col flex-1 min-h-0">
|
|
<div class="p-4">
|
|
<NButton dashed block @click="handleAdd">
|
|
New chat
|
|
</NButton>
|
|
</div>
|
|
<div class="flex-1 min-h-0 pb-4 overflow-hidden">
|
|
<List />
|
|
</div>
|
|
</main>
|
|
<Footer />
|
|
</div>
|
|
</NLayoutSider>
|
|
<template v-if="isMobile">
|
|
<div v-show="!collapsed" class="fixed inset-0 z-40 bg-black/40" @click="handleUpdateCollapsed" />
|
|
</template>
|
|
</template>
|