提交 1cd805c4 编写于 作者: View Design's avatar View Design

搜索记录重构

上级 daedaeb3
<template>
<div class="flex flex-col overflow-hidden">
<div class="flex justify-between">
<UButton
class="flex-grow"
leading-icon="i-heroicons-magnifying-glass"
color="gray"
variant="ghost"
size="md"
label="搜索记录"
@click="handleOpen"
/>
<UButton
v-if="$isSignIn"
label="清空"
size="md"
variant="link"
@click="handleClear"
/>
</div>
<div v-if="$isSignIn" class="flex overflow-y-auto flex-col gap-1 border-l border-gray-200 dark:border-gray-800 pl-2 ml-5">
<template v-for="(item, index) in $searchHistory" :key="index">
<UButton
class="flex group text-gray-400"
color="gray"
variant="ghost"
size="xs"
long
:to="`/search/${item.c_id}`"
@click="handleClickItem"
>
<div class="flex-grow truncate">{{ item.title }}</div>
<UButton
class="hidden group-hover:flex"
color="red"
variant="ghost"
size="xs"
:padded="false"
leading-icon="i-heroicons-x-mark-20-solid"
@click.stop.prevent="handleRemoveRecordItem(item.c_id)"
/>
</UButton>
</template>
</div>
</div>
<UModal v-model="isOpenHistory" :ui="{ width: 'w-full sm:max-w-screen-md' }">
<div class="flex items-center p-2">
<UInput
class="w-full"
v-model="query"
:padded="false"
variant="none"
leading-icon="i-heroicons-magnifying-glass-20-solid"
placeholder="输入关键字搜索..."
/>
<UButton
leading-icon="i-heroicons-x-mark-20-solid"
color="gray"
variant="ghost"
@click="handleClose"
/>
</div>
<UDivider />
<div class="flex flex-col p-2">
<template v-for="(item, index) in $searchHistory" :key="index">
<UButton
class="flex group"
color="gray"
variant="ghost"
long
leading-icon="i-heroicons-document-text"
:to="`/search/${item.c_id}`"
@click="handleClose"
>
<div class="flex-grow truncate font-light">{{ item.title }}</div>
<UButton
class="hidden group-hover:flex"
color="red"
variant="ghost"
:padded="false"
leading-icon="i-heroicons-x-mark-20-solid"
@click.stop.prevent="handleRemoveRecordItem(item.c_id)"
/>
</UButton>
</template>
</div>
</UModal>
</template>
<script setup>
import { IConfirm } from '#components'
const emits = defineEmits(['sign', 'clear'])
const Layout = inject('Layout')
const modal = useModal()
const { $isSignIn } = storeToRefs(useUserStore())
const { $searchHistory } = storeToRefs(useSearchStore())
const { $getSearchHistory } = useSearchStore()
const isOpenHistory = ref(false)
const query = ref('')
function handleClear () {
modal.open(IConfirm, {
title: '清空确认',
description: '确定要清空全部搜索记录吗?',
onSuccess () {
modal.close()
emits('clear')
handleRemoveRecords()
},
onCancel () {
modal.close()
}
})
}
function handleRemoveRecordItem (id) {
handleRemoveRecords([id])
}
async function handleRemoveRecords (ids) {
if (!ids) {
ids = $searchHistory.value.map(item => item.c_id)
}
const { data} = await useRequest('/v1/chat/completion/remove', {
method: 'post',
body: ids
})
if (data.value) {
$getSearchHistory()
navigateTo('/')
}
}
function handleOpen () {
if (!$isSignIn) emits('sign')
else {
isOpenHistory.value = true
}
}
function handleClose () {
isOpenHistory.value = false
}
function handleClickItem () {
Layout.handleCloseAside()
}
nextTick(() => {
$getSearchHistory()
})
</script>
...@@ -51,7 +51,7 @@ ...@@ -51,7 +51,7 @@
<script setup> <script setup>
const { $repos } = storeToRefs(useReposStore()) const { $repos } = storeToRefs(useReposStore())
const { $setRepo } = useReposStore() const { $setRepo } = useReposStore()
const { $getSearchHistory, $setFirstRecordTitle } = useSearchStore() const { $setFirstRecordTitle, $setSearchHistory } = useSearchStore()
const emits = defineEmits([ 'search' ]) const emits = defineEmits([ 'search' ])
const query = ref('') const query = ref('')
const selectedRepo = ref('') const selectedRepo = ref('')
...@@ -82,11 +82,12 @@ const handleSearch = async () => { ...@@ -82,11 +82,12 @@ const handleSearch = async () => {
if (error.value) return if (error.value) return
// todo 临时存到pina给搜索使用 // todo 临时存到pina给搜索使用
$setFirstRecordTitle(query.value) $setFirstRecordTitle(query.value)
$setSearchHistory({
title: query.value,
c_id: data.value.data.c_id
})
navigateTo(`/search/${data.value.data.c_id}`) navigateTo(`/search/${data.value.data.c_id}`)
emits('search') emits('search')
nextTick(() => {
$getSearchHistory()
})
} }
function handleClearRepo () { function handleClearRepo () {
selectedRepo.value = '' selectedRepo.value = ''
......
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
color="gray" color="gray"
variant="ghost" variant="ghost"
size="md" size="md"
label="收藏夹" label="主题"
to="/library" to="/library"
@click="handleClickItem" @click="handleClickItem"
/> />
......
<template> <template>
<div class="flex flex-col overflow-hidden"> <div class="flex flex-col overflow-hidden group">
<div class="flex justify-between"> <div class="flex justify-between">
<UButton <UButton
class="flex-grow" class="flex-grow cursor-default"
leading-icon="i-heroicons-magnifying-glass" leading-icon="i-heroicons-magnifying-glass"
color="gray" color="gray"
variant="ghost" variant="ghost"
size="md" size="md"
label="搜索记录" label="搜索记录"
@click="handleOpen"
/> />
<UButton <UButton
v-if="$isSignIn" v-if="$isSignIn"
class="hidden group-hover:flex"
label="清空" label="清空"
size="md" size="md"
variant="link" variant="link"
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
<div v-if="$isSignIn" class="flex overflow-y-auto flex-col gap-1 border-l border-gray-200 dark:border-gray-800 pl-2 ml-5"> <div v-if="$isSignIn" class="flex overflow-y-auto flex-col gap-1 border-l border-gray-200 dark:border-gray-800 pl-2 ml-5">
<template v-for="(item, index) in $searchHistory" :key="index"> <template v-for="(item, index) in $searchHistory" :key="index">
<UButton <UButton
class="flex group text-gray-400" class="flex text-gray-400"
color="gray" color="gray"
variant="ghost" variant="ghost"
size="xs" size="xs"
...@@ -30,116 +30,23 @@ ...@@ -30,116 +30,23 @@
@click="handleClickItem" @click="handleClickItem"
> >
<div class="flex-grow truncate">{{ item.title }}</div> <div class="flex-grow truncate">{{ item.title }}</div>
<UButton
class="hidden group-hover:flex"
color="red"
variant="ghost"
size="xs"
:padded="false"
leading-icon="i-heroicons-x-mark-20-solid"
@click.stop.prevent="handleRemoveRecordItem(item.c_id)"
/>
</UButton> </UButton>
</template> </template>
</div> </div>
</div> </div>
<UModal v-model="isOpenHistory" :ui="{ width: 'w-full sm:max-w-screen-md' }">
<div class="flex items-center p-2">
<UInput
class="w-full"
v-model="query"
:padded="false"
variant="none"
leading-icon="i-heroicons-magnifying-glass-20-solid"
placeholder="输入关键字搜索..."
/>
<UButton
leading-icon="i-heroicons-x-mark-20-solid"
color="gray"
variant="ghost"
@click="handleClose"
/>
</div>
<UDivider />
<div class="flex flex-col p-2">
<template v-for="(item, index) in $searchHistory" :key="index">
<UButton
class="flex group"
color="gray"
variant="ghost"
long
leading-icon="i-heroicons-document-text"
:to="`/search/${item.c_id}`"
@click="handleClose"
>
<div class="flex-grow truncate font-light">{{ item.title }}</div>
<UButton
class="hidden group-hover:flex"
color="red"
variant="ghost"
:padded="false"
leading-icon="i-heroicons-x-mark-20-solid"
@click.stop.prevent="handleRemoveRecordItem(item.c_id)"
/>
</UButton>
</template>
</div>
</UModal>
</template> </template>
<script setup> <script setup>
import { IConfirm } from '#components'
const emits = defineEmits(['sign', 'clear']) const emits = defineEmits(['sign', 'clear'])
const Layout = inject('Layout') const Layout = inject('Layout')
const modal = useModal() const modal = useModal()
const { $isSignIn } = storeToRefs(useUserStore()) const { $isSignIn } = storeToRefs(useUserStore())
const { $searchHistory } = storeToRefs(useSearchStore()) const { $searchHistory } = storeToRefs(useSearchStore())
const { $getSearchHistory } = useSearchStore() const { $clearSearchHistory } = useSearchStore()
const isOpenHistory = ref(false)
const query = ref('') const query = ref('')
function handleClear () { function handleClear () {
modal.open(IConfirm, { $clearSearchHistory()
title: '清空确认',
description: '确定要清空全部搜索记录吗?',
onSuccess () {
modal.close()
emits('clear')
handleRemoveRecords()
},
onCancel () {
modal.close()
}
})
}
function handleRemoveRecordItem (id) {
handleRemoveRecords([id])
}
async function handleRemoveRecords (ids) {
if (!ids) {
ids = $searchHistory.value.map(item => item.c_id)
}
const { data} = await useRequest('/v1/chat/completion/remove', {
method: 'post',
body: ids
})
if (data.value) {
$getSearchHistory()
navigateTo('/')
}
}
function handleOpen () {
if (!$isSignIn) emits('sign')
else {
isOpenHistory.value = true
}
}
function handleClose () {
isOpenHistory.value = false
} }
function handleClickItem () { function handleClickItem () {
Layout.handleCloseAside() Layout.handleCloseAside()
} }
nextTick(() => {
$getSearchHistory()
})
</script> </script>
<template>
<div class="p-12">
<IMdMdc :content="code" />
</div>
</template>
<script setup>
const code = ref('')
async function getMockData () {
const data = await $fetch('/api/mock/test', { method: 'get' })
code.value = data
}
onMounted(() => {
getMockData()
})
</script>
\ No newline at end of file
<template>
<div class="p-12">
<IMdMdc :content="data" />
</div>
</template>
<script setup>
const { data } = await useRequest('/api/mock/test')
</script>
\ No newline at end of file
<template>
<div>Test</div>
<div>{{ data }}</div>
</template>
<script setup>
const { data } = await useRequest('/v1/chat/repository')
</script>
import { defineStore } from 'pinia' import { defineStore } from 'pinia'
import { useStorage } from '@vueuse/core'
const searchHistory = useStorage('search-history', '')
export const useSearchStore = defineStore('search', () => { export const useSearchStore = defineStore('search', () => {
const { $isSignIn } = useUserStore() const $searchHistory = computed(() => searchHistory.value ? JSON.parse(searchHistory.value) : [])
const $searchHistory = ref([]) function $setSearchHistory (item) {
const $firstRecordTitle = ref('') const history = searchHistory.value ? JSON.parse(searchHistory.value) : []
async function $getSearchHistory () { history.push(item)
if (!$isSignIn) return searchHistory.value = JSON.stringify(history)
const { data } = await useRequest('/v1/chat/completion/list') }
$searchHistory.value = data.value.data function $clearSearchHistory () {
searchHistory.value = ''
} }
const $firstRecordTitle = ref('')
function $setFirstRecordTitle (article) { function $setFirstRecordTitle (article) {
$firstRecordTitle.value = article $firstRecordTitle.value = article
} }
return { return {
$searchHistory, $getSearchHistory, $searchHistory,
$firstRecordTitle, $setFirstRecordTitle $setSearchHistory,
$clearSearchHistory,
$firstRecordTitle,
$setFirstRecordTitle
} }
}) })
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册