parent
2c26f2f7aa
commit
8f5d660b0d
@ -1,95 +1,99 @@
|
|||||||
<script setup lang='ts'>
|
<script setup lang='ts'>
|
||||||
import type { CSSProperties } from "vue";
|
import type {CSSProperties} from "vue";
|
||||||
import { computed, ref, watch } from "vue";
|
import {computed, ref, watch} from "vue";
|
||||||
import { NButton, NLayoutSider } from "naive-ui";
|
import {NButton, NLayoutSider} from "naive-ui";
|
||||||
import List from "./List.vue";
|
import List from "./List.vue";
|
||||||
import Footer from "./Footer.vue";
|
import Footer from "./Footer.vue";
|
||||||
import { useAppStore, useChatStore } from "@/store";
|
import {useAppStore, useChatStore} from "@/store";
|
||||||
import { useBasicLayout } from "@/hooks/useBasicLayout";
|
import {useBasicLayout} from "@/hooks/useBasicLayout";
|
||||||
import { PromptStore } from "@/components/common";
|
import {PromptStore} from "@/components/common";
|
||||||
|
|
||||||
const appStore = useAppStore();
|
const appStore = useAppStore();
|
||||||
const chatStore = useChatStore();
|
const chatStore = useChatStore();
|
||||||
|
|
||||||
const { isMobile } = useBasicLayout();
|
const {isMobile} = useBasicLayout();
|
||||||
const show = ref(false);
|
const show = ref(false);
|
||||||
|
|
||||||
const collapsed = computed(() => appStore.siderCollapsed);
|
const collapsed = computed(() => appStore.siderCollapsed);
|
||||||
|
|
||||||
function handleAdd() {
|
function handleAdd() {
|
||||||
chatStore.addHistory({ title: "新对话", uuid: Date.now(), isEdit: false });
|
chatStore.addHistory({title: "新对话", uuid: Date.now(), isEdit: false});
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleUpdateCollapsed() {
|
function handleUpdateCollapsed() {
|
||||||
appStore.setSiderCollapsed(!collapsed.value);
|
appStore.setSiderCollapsed(!collapsed.value);
|
||||||
}
|
}
|
||||||
|
|
||||||
const getMobileClass = computed<CSSProperties>(() => {
|
const getMobileClass = computed<CSSProperties>(() => {
|
||||||
if (isMobile.value) {
|
if (isMobile.value) {
|
||||||
return {
|
return {
|
||||||
position: "fixed",
|
position: "fixed",
|
||||||
zIndex: 50,
|
zIndex: 50,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
return {};
|
return {};
|
||||||
});
|
});
|
||||||
|
|
||||||
const mobileSafeArea = computed(() => {
|
const mobileSafeArea = computed(() => {
|
||||||
if (isMobile.value) {
|
if (isMobile.value) {
|
||||||
return {
|
return {
|
||||||
paddingBottom: "env(safe-area-inset-bottom)",
|
paddingBottom: "env(safe-area-inset-bottom)",
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
return {};
|
return {};
|
||||||
});
|
});
|
||||||
|
|
||||||
watch(
|
watch(
|
||||||
isMobile,
|
isMobile,
|
||||||
(val) => {
|
(val) => {
|
||||||
appStore.setSiderCollapsed(val);
|
appStore.setSiderCollapsed(val);
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
immediate: true,
|
immediate: true,
|
||||||
flush: "post",
|
flush: "post",
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<NLayoutSider
|
<NLayoutSider
|
||||||
:collapsed="collapsed"
|
:collapsed="collapsed"
|
||||||
:collapsed-width="0"
|
:collapsed-width="0"
|
||||||
:width="260"
|
:width="260"
|
||||||
:show-trigger="isMobile ? false : 'arrow-circle'"
|
:show-trigger="isMobile ? false : 'arrow-circle'"
|
||||||
collapse-mode="transform"
|
collapse-mode="transform"
|
||||||
position="absolute"
|
position="absolute"
|
||||||
bordered
|
bordered
|
||||||
:style="getMobileClass"
|
:style="getMobileClass"
|
||||||
@update-collapsed="handleUpdateCollapsed"
|
@update-collapsed="handleUpdateCollapsed"
|
||||||
>
|
>
|
||||||
<div class="flex flex-col h-full" :style="mobileSafeArea">
|
<div class="flex flex-col h-full" :style="mobileSafeArea">
|
||||||
<main class="flex flex-col flex-1 min-h-0">
|
<main class="flex flex-col flex-1 min-h-0">
|
||||||
<div class="p-4">
|
<div style="display: flex;justify-content: center;align-items: center;margin: 20px 0 10px 0; font-size: 20px;">
|
||||||
<NButton dashed block @click="handleAdd"> + 新的对话 </NButton>
|
<img src="../../../../assets/logo0.png" alt="" style="width: 24px;height: 24px;margin-right: 5px;">
|
||||||
</div>
|
极创科技DeepSeek
|
||||||
<div class="flex-1 min-h-0 pb-4 overflow-hidden">
|
</div>
|
||||||
<List />
|
<div class="p-4">
|
||||||
</div>
|
<NButton dashed block @click="handleAdd"> + 新的对话</NButton>
|
||||||
<!-- <div class="p-4">
|
</div>
|
||||||
<NButton block @click="show = true">
|
<div class="flex-1 min-h-0 pb-4 overflow-hidden">
|
||||||
Prompt Store
|
<List/>
|
||||||
</NButton>
|
</div>
|
||||||
</div> -->
|
<!-- <div class="p-4">
|
||||||
</main>
|
<NButton block @click="show = true">
|
||||||
<Footer />
|
Prompt Store
|
||||||
</div>
|
</NButton>
|
||||||
</NLayoutSider>
|
</div> -->
|
||||||
<template v-if="isMobile">
|
</main>
|
||||||
<div
|
<Footer/>
|
||||||
v-show="!collapsed"
|
</div>
|
||||||
class="fixed inset-0 z-40 bg-black/40"
|
</NLayoutSider>
|
||||||
@click="handleUpdateCollapsed"
|
<template v-if="isMobile">
|
||||||
/>
|
<div
|
||||||
</template>
|
v-show="!collapsed"
|
||||||
<!-- <PromptStore v-model:visible="show" /> -->
|
class="fixed inset-0 z-40 bg-black/40"
|
||||||
|
@click="handleUpdateCollapsed"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
<!-- <PromptStore v-model:visible="show" /> -->
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
Loading…
Reference in new issue