79 lines
2.3 KiB
TypeScript
79 lines
2.3 KiB
TypeScript
import { defineComponent } from 'vue'
|
||
import useSearchStore from './useSearchStore'
|
||
import jump from '@/utils/jump'
|
||
import useSearchConfigStore from './useSearchConfigStore'
|
||
import { OhVueIcon, addIcons } from 'oh-vue-icons'
|
||
import { MdSearch } from 'oh-vue-icons/icons'
|
||
import { aIUrl, translateUrl } from '@/config'
|
||
|
||
addIcons(MdSearch)
|
||
|
||
export const Item = defineComponent({
|
||
props: {
|
||
icon: { type: Object, default: null },
|
||
label: { type: String, default: '' },
|
||
path: { type: String, default: '' },
|
||
prefix: { type: String, default: '' },
|
||
num: { type: Number, default: 0 },
|
||
current: { type: Number, default: -1 }
|
||
},
|
||
setup(props) {
|
||
const searchConfig = useSearchConfigStore()
|
||
const search = useSearchStore()
|
||
return () => (
|
||
<div
|
||
class={
|
||
'flex justify-between items-center text-black/80 cursor-pointer py-1 px-2 rounded transition-all ' +
|
||
(props.current === props.num ? 'bg-white/40' : 'hover:bg-white/40')
|
||
}
|
||
onClick={() => {
|
||
searchConfig.addHistory(props.path)
|
||
search.searchStr = ''
|
||
jump(props.prefix + props.path)
|
||
}}
|
||
>
|
||
<span>{props.icon}</span>
|
||
<div class="w-0 pl-2 flex-grow overflow-hidden text-ellipsis break-all whitespace-nowrap">
|
||
{props.label + props.path}
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
})
|
||
|
||
export default defineComponent(() => {
|
||
const search = useSearchStore()
|
||
const searchConfig = useSearchConfigStore()
|
||
|
||
return () => (
|
||
<div class="absolute left-0 -bottom-2 translate-y-full w-full rounded-lg bg-white/60 backdrop-blur shadow-lg p-4">
|
||
<Item
|
||
prefix={aIUrl}
|
||
path={search.searchStr}
|
||
label="AI搜索："
|
||
icon={<img class="w-4 h-4" src="/tab/searchIcons/mita.jpg" alt="mita" />}
|
||
current={search.current}
|
||
num={0}
|
||
/>
|
||
<Item
|
||
prefix={translateUrl}
|
||
path={search.searchStr}
|
||
label="AI翻译："
|
||
icon={<img class="w-4 h-4" src="/tab/searchIcons/translate.png" alt="translate" />}
|
||
current={search.current}
|
||
num={1}
|
||
/>
|
||
{search.sugList.map((el, idx) => (
|
||
<Item
|
||
key={idx}
|
||
prefix={searchConfig.current.url}
|
||
path={el}
|
||
icon={<OhVueIcon name="md-search" />}
|
||
current={search.current}
|
||
num={idx + 2}
|
||
/>
|
||
))}
|
||
</div>
|
||
)
|
||
})
|