103 lines
3.1 KiB
TypeScript
103 lines
3.1 KiB
TypeScript
import SettingItem from '@/settings/SettingItem'
|
|
import useSettingsStore from '@/settings/useSettingsStore'
|
|
import { Select, Slider, Switch, type SelectProps } from 'ant-design-vue'
|
|
import { defineComponent, ref } from 'vue'
|
|
import useSearchConfigStore from '../header/search/useSearchConfigStore'
|
|
import clsx from 'clsx'
|
|
import useLayoutStore from '../useLayoutStore'
|
|
|
|
export default defineComponent({
|
|
setup() {
|
|
const settings = useSettingsStore()
|
|
const searchStore = useSearchConfigStore()
|
|
const options1 = ref<SelectProps['options']>(
|
|
[...searchStore.defaultList, ...searchStore.customList].map((item) => ({
|
|
value: item.name,
|
|
label: item.name
|
|
}))
|
|
)
|
|
return () => (
|
|
<div class="p-4">
|
|
<div class={'flex flex-col'}>
|
|
<span
|
|
class={clsx(
|
|
'text-[14px] font-bold',
|
|
useLayoutStore().state.current === 0 ? 'text-white' : ' text-[#333]'
|
|
)}
|
|
>
|
|
搜索
|
|
</span>
|
|
<span class={'text-[13px] text-[#666] '}>调整搜索样式</span>
|
|
<div
|
|
class={clsx(
|
|
'w-full h-[1px] bg-black/10 mt-1 mb-2',
|
|
useLayoutStore().state.current === 0 ? 'bg-white/10' : ' bg-black/10'
|
|
)}
|
|
></div>
|
|
</div>
|
|
<SettingItem
|
|
noRoundedB
|
|
v-slots={{
|
|
label: () => <div>搜索栏圆角</div>
|
|
}}
|
|
>
|
|
<div class={' flex items-center gap-x-2'}>
|
|
<div class={'w-[180px]'}>
|
|
<Slider
|
|
v-model:value={settings.state.searchRadius}
|
|
tooltipOpen={false}
|
|
step={1}
|
|
min={0}
|
|
max={22}
|
|
/>
|
|
</div>
|
|
<span class={'text-[#999] w-[30px] flex-0 text-[14px]'}>
|
|
{settings.state.searchRadius}px
|
|
</span>
|
|
</div>
|
|
</SettingItem>
|
|
<SettingItem
|
|
noRoundedT
|
|
v-slots={{
|
|
label: () => <div>搜索栏透明</div>
|
|
}}
|
|
>
|
|
<div class={' flex items-center gap-x-2'}>
|
|
<div class={'w-[180px]'}>
|
|
<Slider
|
|
v-model:value={settings.state.searchOpacity}
|
|
step={0.01}
|
|
min={0.1}
|
|
tooltipOpen={false}
|
|
max={0.75}
|
|
/>
|
|
</div>
|
|
<span class={'text-[#999] w-[30px] text-[14px]'}>{settings.state.searchOpacity}</span>
|
|
</div>
|
|
</SettingItem>
|
|
<SettingItem
|
|
v-slots={{
|
|
label: () => <div>搜索历史</div>
|
|
}}
|
|
>
|
|
<Switch v-model:checked={settings.state.showHistory} />
|
|
</SettingItem>{' '}
|
|
<SettingItem
|
|
v-slots={{
|
|
label: () => <div>搜索引擎</div>
|
|
}}
|
|
>
|
|
<Select
|
|
value={searchStore.current.name}
|
|
onUpdate:value={(e) => {
|
|
searchStore.selectSearchByName(e as string)
|
|
}}
|
|
style={{ width: 100 }}
|
|
options={options1.value}
|
|
/>
|
|
</SettingItem>
|
|
</div>
|
|
)
|
|
}
|
|
})
|