<script setup lang="ts">
|
import { NDrawer,NDrawerContent,NInput } from "naive-ui";
|
import { ref, watch } from "vue";
|
import { useBasicLayout } from '@/hooks/useBasicLayout'
|
import { homeStore } from "@/store";
|
import AiGptsCom from "./aiGptsCom.vue";
|
import { SvgIcon } from "@/components/common";
|
const { isMobile } = useBasicLayout()
|
const qref= ref();
|
const st =ref({showImg:false,q:''});
|
watch(()=>homeStore.myData.act, (n)=>{
|
if(n=='showgpts') st.value.showImg=true;
|
})
|
const search=()=>{
|
if(!st.value.q ) return ;
|
qref.value.searchQ(st.value.q);
|
}
|
const toq=( d:any )=>{
|
st.value.q= d.q;
|
}
|
</script>
|
<template>
|
<n-drawer v-model:show="st.showImg" :placement="isMobile?'bottom':'right'" :class="isMobile?['!h-[90vh]']: ['!w-[80vw]']" style="--n-body-padding:0">
|
<n-drawer-content class="mydrawer">
|
<template #header>
|
<div class="flex justify-between items-center w-full">
|
<!-- <SvgIcon icon="uil:search" class="pr-2 text-[28px] cursor-pointer"></SvgIcon> GPT store -->
|
<div class="pr-4">GPT store</div>
|
<div class=" max-w-[400px]">
|
<n-input round :placeholder="$t('mjchat.searchPlaceholder')" clearable v-model:value="st.q" @keydown.enter="search()" >
|
<template #prefix>
|
<SvgIcon icon="uil:search"/>
|
</template>
|
<template #suffix>
|
<div class="cursor-pointer" @click="search()">{{ $t('mjchat.search')}}</div>
|
</template>
|
</n-input>
|
</div>
|
</div>
|
</template>
|
<AiGptsCom @close="st.showImg=false" ref="qref" :q="st.q" @toq="toq" />
|
</n-drawer-content>
|
</n-drawer>
|
</template>
|
<style>
|
.mydrawer .n-drawer-header__main{
|
@apply flex-1;
|
}
|
</style>
|
