xyyd-fatfox/src/layout/grid/LinkBlock.tsx

73 lines
2.1 KiB
TypeScript

import { defineComponent } from 'vue'
import type { Block } from '../layout.types'
import { useMenuStore } from '../GlobalMenu'
import jump from '@/utils/jump'
export default defineComponent({
props: {
block: {
type: Object as () => Block,
required: true
},
brief: {
type: Boolean,
default: false
},
dock: {
type: Boolean,
default: false
}
},
setup(props) {
const menu = useMenuStore()
if (props.block.w === 1 && props.block.h === 1) {
return () => (
<div
class="w-full h-full flex justify-center items-center font-bold bg-cover bg-center bg-no-repeat"
onContextmenu={() => {
menu.open(props.block)
}}
onClick={() => {
jump(props.block.link)
}}
style={{
backgroundColor: props.block.background || 'white',
color: props.block.color || 'black',
backgroundImage: props.block.icon ? `url('${props.block.icon}')` : '',
fontSize: props.dock ? '16px' : props.brief ? '12px' : 'calc(var(--block-size) / 5)'
}}
>
<div>{props.brief ? props.block.text[0] : props.block.text}</div>
</div>
)
} else {
return () => (
<div
class="w-full h-full flex justify-between px-3 items-center font-bold bg-cover bg-center bg-no-repeat"
onContextmenu={() => {
menu.open(props.block)
}}
onClick={() => {
window.open(props.block.link, '_blank')
}}
style={{
backgroundImage: `url('/tab/bg/game.webp')`
}}
>
<img src={props.block.icon} class={'w-[50px] h-[50px] rounded-lg'} alt="game icon" />
<div class={'flex-1 text-white flex justify-center'}>
<span class={'w-[70px] text-ellipsis overflow-hidden whitespace-nowrap'}>
{props.block.label}
</span>
</div>
<img
src="/tab/icons/gameicon.webp"
alt="game_icon"
class={'absolute right-0 bottom-0 w-[36px]'}
/>
</div>
)
}
}
})