44 lines
1.6 KiB
TypeScript
44 lines
1.6 KiB
TypeScript
import { defineComponent } from 'vue'
|
|
import { OhVueIcon, addIcons } from 'oh-vue-icons'
|
|
import { MdHistory, MdRemove } from 'oh-vue-icons/icons'
|
|
import useSearchConfigStore from './useSearchConfigStore'
|
|
import jump from '@/utils/jump'
|
|
import useSettingsStore from '@/settings/useSettingsStore'
|
|
addIcons(MdHistory)
|
|
addIcons(MdRemove)
|
|
export default defineComponent(() => {
|
|
const searchConfig = useSearchConfigStore()
|
|
const settings = useSettingsStore()
|
|
return () =>
|
|
settings.state.showHistory && (
|
|
<div class="absolute left-0 -bottom-2 translate-y-full w-full rounded-lg z-10 bg-white/60 backdrop-blur shadow-lg p-4">
|
|
{searchConfig.history.map((item, idx) => (
|
|
<div
|
|
key={idx}
|
|
class="flex justify-between items-center text-black/80 cursor-pointer hover:bg-white/40 py-1 px-2 rounded transition-all"
|
|
onMousedown={() => {
|
|
jump(searchConfig.current.url + item)
|
|
}}
|
|
>
|
|
<div class="flex items-center w-0 flex-grow">
|
|
<OhVueIcon name="md-history" fill="rgba(0,0,0,0.8)" />
|
|
<div class="w-0 pl-2 flex-grow text-ellipsis overflow-hidden whitespace-nowrap break-all">
|
|
{item}
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="text-black/40 hover:bg-red-500 hover:text-white px-1 rounded transition-all"
|
|
onMousedown={(e) => {
|
|
e.preventDefault()
|
|
e.stopPropagation()
|
|
searchConfig.removeHistory(idx)
|
|
}}
|
|
>
|
|
<OhVueIcon name="md-remove" />
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)
|
|
})
|