62 lines
1.9 KiB
TypeScript
62 lines
1.9 KiB
TypeScript
import SettingItem from '@/settings/SettingItem'
|
||
import useSettingsStore from '@/settings/useSettingsStore'
|
||
import { Select, Switch } from 'ant-design-vue'
|
||
import clsx from 'clsx'
|
||
import { defineComponent } from 'vue'
|
||
import useLayoutStore from '../useLayoutStore'
|
||
|
||
export default defineComponent({
|
||
name: 'SiderSetting',
|
||
props: {},
|
||
setup() {
|
||
const settings = useSettingsStore()
|
||
const layout = useLayoutStore()
|
||
|
||
return () => (
|
||
<div class="p-4 flex flex-col gap-y-1 ">
|
||
<SettingItem
|
||
v-slots={{
|
||
label: () => <div>快捷栏开关</div>
|
||
}}
|
||
>
|
||
<Switch
|
||
checked={settings.state.showDock === ''}
|
||
onUpdate:checked={(e) => {
|
||
if (e) settings.state.showDock = ''
|
||
else settings.state.showDock = 'show'
|
||
}}
|
||
/>
|
||
</SettingItem>{' '}
|
||
<SettingItem
|
||
v-slots={{
|
||
label: () => <div>自动隐藏</div>
|
||
}}
|
||
>
|
||
<Switch
|
||
checked={settings.state.showDock === 'auto'}
|
||
onUpdate:checked={(e) => {
|
||
if (e) settings.state.showDock = 'auto'
|
||
else settings.state.showDock = 'show'
|
||
}}
|
||
/>
|
||
</SettingItem>{' '}
|
||
<div class={'flex flex-col text-[#333]'}>
|
||
<span class={'font-bold'}>快捷键设置</span>
|
||
<p class={'text-[12px] text-[#999]'}>选中要更换快捷键的目标，点击键盘即可更换快捷键</p>
|
||
<div class={'w-full h-[1px] bg-[#ddd] mt-2'}></div>
|
||
<div class={'w-full grid grid-rows-5 grid-cols-2 gap-2 p-2'}>
|
||
{layout.state.dockLabels.split('').map((val, idx) => (
|
||
<div class="w-full flex gap-x-4">
|
||
<span>{idx + 1}</span>
|
||
<div class={'flex-1 bg-slate-50 rounded'}>
|
||
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
})
|