97 lines
3.4 KiB
TypeScript
97 lines
3.4 KiB
TypeScript
import SettingItem from '@/settings/SettingItem'
|
|
import useSettingsStore from '@/settings/useSettingsStore'
|
|
import { Switch } from 'ant-design-vue'
|
|
import clsx from 'clsx'
|
|
import { defineComponent } from 'vue'
|
|
import useLayoutStore from '../useLayoutStore'
|
|
|
|
export default defineComponent({
|
|
setup() {
|
|
const settings = useSettingsStore()
|
|
const layout = useLayoutStore()
|
|
return () => (
|
|
<div class="p-4 flex flex-col gap-y-4 ">
|
|
<div
|
|
class={'p-5 bg-[#000000]/[.05] rounded-lg w-full grid grid-rows-1 grid-cols-2 gap-x-3'}
|
|
>
|
|
<div class={'flex flex-col gap-y-2 items-center w-full'}>
|
|
<div
|
|
onClick={() => {
|
|
settings.state.siderDirection = 'left'
|
|
}}
|
|
class={clsx(
|
|
' flex flex-col h-[92px] w-full p-3 justify-between rounded-lg cursor-pointer border-[1px] ',
|
|
settings.state.siderDirection === 'left'
|
|
? 'border-[#ffa94d]'
|
|
: 'border-transparent',
|
|
layout.state.current === 0 ? 'bg-[#7B7C85]' : 'bg-white'
|
|
)}
|
|
>
|
|
<div class={'bg-[#E5E5E5] w-[25px] h-[18px] rounded'}></div>
|
|
<div class={'bg-[#E5E5E5] w-[25px] h-[18px] rounded'}></div>
|
|
<div class={'bg-[#E5E5E5] w-[25px] h-[18px] rounded'}></div>
|
|
</div>
|
|
<button
|
|
onClick={() => {
|
|
settings.state.siderDirection = 'left'
|
|
}}
|
|
class={clsx(
|
|
'px-7 py-1 rounded text-[14px]',
|
|
settings.state.siderDirection === 'left'
|
|
? 'bg-[#ffa94d] text-white'
|
|
: 'bg-[#E5E5E5] text-[#999]'
|
|
)}
|
|
>
|
|
左侧
|
|
</button>
|
|
</div>
|
|
<div class={'flex flex-col gap-y-2 items-center'}>
|
|
<div
|
|
onClick={() => {
|
|
settings.state.siderDirection = 'right'
|
|
}}
|
|
class={clsx(
|
|
' flex items-end w-full flex-col h-[92px] p-3 justify-between rounded-lg cursor-pointer border-[1px] ',
|
|
settings.state.siderDirection === 'right'
|
|
? 'border-[#ffa94d]'
|
|
: 'border-transparent',
|
|
layout.state.current === 0 ? 'bg-[#7B7C85]' : 'bg-white'
|
|
)}
|
|
>
|
|
<div class={'bg-[#E5E5E5] w-[25px] h-[18px] rounded'}></div>
|
|
<div class={'bg-[#E5E5E5] w-[25px] h-[18px] rounded'}></div>
|
|
<div class={'bg-[#E5E5E5] w-[25px] h-[18px] rounded'}></div>
|
|
</div>
|
|
<button
|
|
onClick={() => {
|
|
settings.state.siderDirection = 'right'
|
|
}}
|
|
class={clsx(
|
|
'px-7 py-1 rounded text-[14px]',
|
|
settings.state.siderDirection === 'right'
|
|
? 'bg-[#ffa94d] text-white'
|
|
: 'bg-[#E5E5E5] text-[#999]'
|
|
)}
|
|
>
|
|
左侧
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<SettingItem
|
|
v-slots={{
|
|
label: () => <div>自动隐藏</div>
|
|
}}
|
|
>
|
|
<Switch
|
|
checked={settings.state.showSider === 'auto'}
|
|
onUpdate:checked={(e) => {
|
|
if (e) settings.state.showSider = 'auto'
|
|
else settings.state.showSider = 'show'
|
|
}}
|
|
/>
|
|
</SettingItem>{' '}
|
|
</div>
|
|
)
|
|
}
|
|
})
|