127 lines
3.5 KiB
TypeScript
127 lines
3.5 KiB
TypeScript
import { Button, Slider } from 'ant-design-vue'
|
|
import { defineComponent, ref, Transition, watch } from 'vue'
|
|
import useLayoutStore from '../useLayoutStore'
|
|
import { DownloadOutlined, EyeInvisibleOutlined, SwapOutlined } from '@ant-design/icons-vue'
|
|
import SettingItem from '@/settings/SettingItem'
|
|
import useSettingsStore from '@/settings/useSettingsStore'
|
|
import useRouterStore from '@/useRouterStore'
|
|
import clsx from 'clsx'
|
|
|
|
export default defineComponent(() => {
|
|
const layout = useLayoutStore()
|
|
const router = useRouterStore()
|
|
|
|
const selected = ref(0)
|
|
watch(
|
|
() => layout.state.current,
|
|
(val) => {
|
|
selected.value = val
|
|
},
|
|
{ immediate: true }
|
|
)
|
|
|
|
const settings = useSettingsStore()
|
|
return () => (
|
|
<div class="absolute left-0 top-0 w-full h-full p-4 overflow-y-auto scrollbar-hide">
|
|
{/* <SettingItem
|
|
noBg
|
|
v-slots={{
|
|
label: () => <div>所属模式</div>
|
|
}}
|
|
>
|
|
<Select
|
|
class="w-[100px]"
|
|
options={[
|
|
{ label: '游戏', value: 0 },
|
|
{ label: '工作', value: 1 },
|
|
{ label: '休闲', value: 2 }
|
|
]}
|
|
v-model:value={selected.value}
|
|
/>
|
|
</SettingItem> */}
|
|
<div class="px-4">
|
|
<div class="h-[180px]">
|
|
{layout.background.video && layout.background.type !== 'own' ? (
|
|
<video class="w-full h-full" src={layout.background.video} autoplay={false} controls />
|
|
) : (
|
|
<div
|
|
class="w-full h-full bg-center bg-no-repeat bg-cover"
|
|
style={{
|
|
backgroundImage: `url('${layout.background.image}')`
|
|
}}
|
|
></div>
|
|
)}
|
|
</div>
|
|
<div class="flex justify-between items-center py-4">
|
|
<Button
|
|
type="primary"
|
|
icon={<SwapOutlined />}
|
|
onClick={() => {
|
|
router.go('global-background')
|
|
}}
|
|
>
|
|
更换壁纸
|
|
</Button>
|
|
<Button
|
|
type="text"
|
|
class={clsx(useLayoutStore().state.current === 0 && 'text-white')}
|
|
icon={<DownloadOutlined />}
|
|
onClick={() => {
|
|
window.open(layout.background.video || layout.background.image, '_blank')
|
|
}}
|
|
>
|
|
下载壁纸
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<SettingItem
|
|
noRoundedB
|
|
v-slots={{
|
|
label: () => <div>遮罩浓度</div>
|
|
}}
|
|
>
|
|
<div class={'w-[200px]'}>
|
|
<Slider
|
|
v-model:value={settings.state.maskOpacity}
|
|
step={0.01}
|
|
tooltipOpen={false}
|
|
min={0}
|
|
max={0.7}
|
|
/>
|
|
</div>
|
|
</SettingItem>
|
|
<SettingItem
|
|
noRoundedT
|
|
v-slots={{
|
|
label: () => <div>遮罩模糊</div>
|
|
}}
|
|
>
|
|
<div class={'w-[200px]'}>
|
|
<Slider
|
|
v-model:value={settings.state.maskFilter}
|
|
step={0.1}
|
|
tooltipOpen={false}
|
|
min={0}
|
|
max={20}
|
|
/>
|
|
</div>
|
|
</SettingItem>
|
|
<Transition>
|
|
{(settings.state.maskFilter > 0 || settings.state.maskOpacity > 0) && (
|
|
<div
|
|
class="flex justify-end mr-4"
|
|
onClick={() => {
|
|
settings.state.maskOpacity = 0
|
|
settings.state.maskFilter = 0
|
|
}}
|
|
>
|
|
<Button type="text" icon={<EyeInvisibleOutlined />}>
|
|
隐藏遮罩
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</Transition>
|
|
</div>
|
|
)
|
|
})
|