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>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
})
|