205 lines
7.9 KiB
TypeScript
205 lines
7.9 KiB
TypeScript
import { defineComponent, ref, watch } from 'vue'
|
|
import useLayoutStore from '../useLayoutStore'
|
|
import { OhVueIcon, addIcons } from 'oh-vue-icons'
|
|
import { MdVideogameassetTwotone, MdWorkhistoryTwotone, MdStarsTwotone } from 'oh-vue-icons/icons'
|
|
import useSettingsStore from '@/settings/useSettingsStore'
|
|
import clsx from 'clsx'
|
|
|
|
addIcons(MdVideogameassetTwotone, MdWorkhistoryTwotone, MdStarsTwotone)
|
|
|
|
export default defineComponent(() => {
|
|
const hover = ref(false)
|
|
const settings = useSettingsStore()
|
|
const selected = ref<0 | 1 | 2>(0)
|
|
const layout = useLayoutStore()
|
|
watch(
|
|
() => layout.state.current,
|
|
(val) => {
|
|
selected.value = val
|
|
},
|
|
{ immediate: true }
|
|
)
|
|
return () => (
|
|
<div
|
|
class="w-[56px] h-[56px] relative cursor-pointer"
|
|
onMouseenter={() => (hover.value = true)}
|
|
onMouseleave={() => (hover.value = false)}
|
|
>
|
|
<svg width="56" height="56" viewBox="0 0 1 1">
|
|
<circle
|
|
class="relative z-10 transition-all"
|
|
cx="0.5"
|
|
cy="0.5"
|
|
r={hover.value ? 0.4 : 0.44}
|
|
stroke={hover.value ? 'rgba(255,255,255,.8)' : 'rgba(255,255,255,.4)'}
|
|
stroke-width={hover.value ? 0.08 : 0.03}
|
|
fill-opacity={hover.value ? 1 : 0}
|
|
fill={hover.value ? 'rgba(0,0,0,.4)' : 'transparent'}
|
|
/>
|
|
<text x={'0.28'} y={'0.42'} font-size={'0.22'} class="transition-all" fill="white">
|
|
{layout.state.current === 0 ? '游戏' : layout.state.current === 1 ? '工作' : '休闲'}
|
|
</text>
|
|
<text x="0.28" y="0.72" font-size="0.22" class="transition-all" fill={'white'}>
|
|
模式
|
|
</text>
|
|
</svg>
|
|
{/* 转盘 */}
|
|
<div
|
|
class={clsx(
|
|
'w-[200px] h-[200px] absolute -top-[72px] rounded-full overflow-hidden transition-all ',
|
|
settings.state.siderDirection === 'left'
|
|
? 'left-[-72px] -top-[72px]'
|
|
: 'right-[-72px] bottom-[72px]',
|
|
settings.state.siderDirection === 'left'
|
|
? hover.value
|
|
? 'scale-100 rotate-0 opacity-100'
|
|
: 'scale-0 -rotate-90 opacity-0'
|
|
: hover.value
|
|
? 'scale-100 rotate-0 opacity-100'
|
|
: 'scale-0 rotate-90 opacity-0'
|
|
)}
|
|
style="transform-origin: 54% 54%; filter: drop-shadow(0 0 4px rgba(0,0,0,.4));transition-duration:.3s; transition-timing-function: cubic-bezier(.4,0,.2,1)"
|
|
>
|
|
<div
|
|
class={clsx(
|
|
'absolute top-[18px] text-white text-[13px] z-20 flex flex-col items-center pointer-events-none',
|
|
settings.state.siderDirection === 'right' ? 'right-[105px]' : 'left-[105px] '
|
|
)}
|
|
>
|
|
<OhVueIcon name="md-videogameasset-twotone" fill="white" scale={1.3} />
|
|
游戏
|
|
</div>
|
|
<div
|
|
class={clsx(
|
|
'absolute top-[80px] text-white text-[13px] z-20 flex flex-col items-center pointer-events-none',
|
|
settings.state.siderDirection === 'right' ? 'right-[150px] ' : 'left-[150px] '
|
|
)}
|
|
>
|
|
<OhVueIcon name="md-workhistory-twotone" fill="white" scale={1.3} />
|
|
工作
|
|
</div>
|
|
<div
|
|
class={clsx(
|
|
'absolute text-white text-[13px] flex flex-col z-20 items-center pointer-events-none',
|
|
settings.state.siderDirection === 'right'
|
|
? 'right-[105px] top-[140px]'
|
|
: 'left-[105px] top-[140px]'
|
|
)}
|
|
>
|
|
<OhVueIcon name="md-stars-twotone" fill="white" scale={1.3} />
|
|
休闲
|
|
</div>
|
|
<svg
|
|
width="200"
|
|
height="200"
|
|
class={clsx(
|
|
'w-full h-full ',
|
|
settings.state.siderDirection === 'right' && 'scale-x-[-1]'
|
|
)}
|
|
viewBox="0 0 240 240"
|
|
>
|
|
<g>
|
|
<path
|
|
fill="rgba(0,0,0,.6)"
|
|
d="M155.29,94.09c-7.97-10.81-20.68-17.24-34.1-17.24-4.48,0-8.91,.71-13.17,2.1L85.85,11.74c11.31-3.68,23.12-5.54,35.1-5.54,35.71,0,69.72,17.1,91.07,45.78l-56.72,42.12Z"
|
|
/>
|
|
<path
|
|
fill="rgba(0,0,0,.6)"
|
|
d="M156.16,143.1c4.83-7.06,7.39-15.31,7.39-23.89s-2.66-17.18-7.7-24.35l56.73-42.13c14.29,19.53,21.84,42.66,21.84,66.93s-7.3,46.62-21.12,65.94l-57.13-42.5Z"
|
|
/>
|
|
<path
|
|
fill="rgba(0,0,0,.6)"
|
|
d="M120.94,233.14c-12.09,0-24-1.9-35.41-5.64l22.25-68.1c4.33,1.44,8.83,2.17,13.4,2.17,13.64,0,26.47-6.6,34.43-17.69l57.12,42.5c-21.32,29.29-55.6,46.76-91.79,46.76Z"
|
|
/>
|
|
</g>
|
|
{/* 判定区块，无颜色 */}
|
|
<g class="relative z-10">
|
|
<path
|
|
fill="transparent"
|
|
d="M155.29,94.09c-7.97-10.81-20.68-17.24-34.1-17.24-4.48,0-8.91,.71-13.17,2.1L85.85,11.74c11.31-3.68,23.12-5.54,35.1-5.54,35.71,0,69.72,17.1,91.07,45.78l-56.72,42.12Z"
|
|
onMouseenter={() => {
|
|
selected.value = 0
|
|
}}
|
|
/>
|
|
<path
|
|
fill="transparent"
|
|
d="M156.16,143.1c4.83-7.06,7.39-15.31,7.39-23.89s-2.66-17.18-7.7-24.35l56.73-42.13c14.29,19.53,21.84,42.66,21.84,66.93s-7.3,46.62-21.12,65.94l-57.13-42.5Z"
|
|
onMouseenter={() => {
|
|
selected.value = 1
|
|
}}
|
|
/>
|
|
<path
|
|
fill="transparent"
|
|
d="M120.94,233.14c-12.09,0-24-1.9-35.41-5.64l22.25-68.1c4.33,1.44,8.83,2.17,13.4,2.17,13.64,0,26.47-6.6,34.43-17.69l57.12,42.5c-21.32,29.29-55.6,46.76-91.79,46.76Z"
|
|
onMouseenter={() => {
|
|
selected.value = 2
|
|
}}
|
|
/>
|
|
</g>
|
|
<defs>
|
|
<linearGradient
|
|
id="mode-switch-selected"
|
|
x1="154.46"
|
|
y1="119.31"
|
|
x2="233.16"
|
|
y2="119.31"
|
|
gradientUnits="userSpaceOnUse"
|
|
>
|
|
<stop offset="0" stop-color="#fff" />
|
|
<stop offset="1" stop-color="#fff" stop-opacity=".2" />
|
|
</linearGradient>
|
|
</defs>
|
|
<g>
|
|
<path
|
|
class={
|
|
'absolute z-30 transition-all opacity-60 ' +
|
|
(selected.value === 0
|
|
? '-rotate-[72deg]'
|
|
: selected.value === 1
|
|
? 'rotate-0'
|
|
: 'rotate-[72deg]')
|
|
}
|
|
onClick={() => {
|
|
layout.state.current = selected.value
|
|
}}
|
|
style="transform-origin: 50% 50%;"
|
|
fill="url(#mode-switch-selected)"
|
|
d="M154.46,95.56c2.19-2.22,56.63-42.87,56.63-42.87,0,0,22.04,26.2,22,64.39,1.48,38.81-20.93,68.85-20.93,68.85,0,0-55.81-40.54-57.3-42.91,2.37-2.59,16.11-22.46-.41-47.46Z"
|
|
/>
|
|
<path
|
|
class={
|
|
'relative transition-all ' +
|
|
(layout.state.current === 0
|
|
? '-rotate-[72deg]'
|
|
: layout.state.current === 1
|
|
? 'rotate-0'
|
|
: 'rotate-[72deg]')
|
|
}
|
|
style="transform-origin: 50% 50%;"
|
|
fill="none"
|
|
stroke="rgba(255,255,255,.8)"
|
|
stroke-linecap="round"
|
|
stroke-miterlimit="10"
|
|
stroke-width="3px"
|
|
d="M215.65,51.3s24,32.56,22,67.67c-1.33,31.11-10.52,53.19-21.41,68.96"
|
|
/>
|
|
<path
|
|
class={
|
|
'relative transition-all ' +
|
|
(layout.state.current === 0
|
|
? '-rotate-[72deg]'
|
|
: layout.state.current === 1
|
|
? 'rotate-0'
|
|
: 'rotate-[72deg]')
|
|
}
|
|
style="transform-origin: 50% 50%;"
|
|
fill="rgba(255,255,255,.8)"
|
|
d="M154.51,95.83l4.36-3.41s7.73,10.66,7.5,24.88c1.11,13.7-6.91,29.57-6.91,29.57l-4.63-3.81s5.47-11.68,5.32-24.42c.89-12-5.64-22.8-5.64-22.8Z"
|
|
/>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
)
|
|
})
|