81 lines
2.3 KiB
TypeScript
81 lines
2.3 KiB
TypeScript
|
import SettingItem from '@/settings/SettingItem'
|
||
|
|
import useSettingsStore, { type TimeUnit } 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'
|
||
|
|
const list: {
|
||
|
|
label: string
|
||
|
|
value: TimeUnit
|
||
|
|
}[] = [
|
||
|
|
{
|
||
|
|
label: '日&月',
|
||
|
|
value: 'date'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: '周',
|
||
|
|
value: 'week'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: '秒',
|
||
|
|
value: 'second'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: '农历',
|
||
|
|
value: 'lunal'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: '12小时制',
|
||
|
|
value: '12hour'
|
||
|
|
}
|
||
|
|
]
|
||
|
|
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">
|
||
|
|
<SettingItem
|
||
|
|
v-slots={{
|
||
|
|
label: () => <div>显示时间</div>
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Switch v-model:checked={settings.state.showTime} />
|
||
|
|
</SettingItem>{' '}
|
||
|
|
<div class={'flex flex-col gap-y-1'}>
|
||
|
|
<span class={'text-[14px] font-bold text-[#333]'}>时间的样式</span>
|
||
|
|
<div class={'p-3 bg-[#000000]/[.05] rounded-lg grid gap-2 grid-rows-2 grid-cols-4'}>
|
||
|
|
{list.map((item) => (
|
||
|
|
<div
|
||
|
|
onClick={() => {
|
||
|
|
if (settings.state.timeOptions.includes(item.value)) {
|
||
|
|
settings.state.timeOptions = settings.state.timeOptions.filter(
|
||
|
|
(el) => el !== item.value
|
||
|
|
)
|
||
|
|
} else {
|
||
|
|
settings.state.timeOptions.push(item.value)
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
class={clsx(
|
||
|
|
' items-center justify-center flex rounded py-1 cursor-pointer',
|
||
|
|
settings.state.timeOptions.includes(item.value)
|
||
|
|
? 'bg-[#ffa93d] text-white'
|
||
|
|
: 'bg-black/[0.05] text-[#999] '
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
{item.label}
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
})
|