98 lines
3.4 KiB
TypeScript
98 lines
3.4 KiB
TypeScript
import { defineComponent } from 'vue'
|
|
import { formatSeconds } from '@/utils/tool'
|
|
import PlayStartImg from '~/icons/work/start.png'
|
|
import returnImg from '~/icons/work/return.png'
|
|
import endImg from '~/icons/work/tomotoIconEnd.png'
|
|
import PlusImg from '~/icons/work/tomatoIconAdd.png'
|
|
import dayjs from 'dayjs'
|
|
import { Tooltip } from 'ant-design-vue'
|
|
import useTomatoStore from './useTomatoStore'
|
|
|
|
export default defineComponent(() => {
|
|
const store = useTomatoStore()
|
|
return () => (
|
|
<div
|
|
class="w-full h-full flex relative p-6 justify-between"
|
|
style={{
|
|
background: `url('https://newfatfox.oss-cn-beijing.aliyuncs.com/admin/tomotoback.png')`,
|
|
backgroundSize: 'cover',
|
|
backgroundRepeat: 'no-repeat'
|
|
}}
|
|
>
|
|
<div class={'bg-[#0000004d] absolute top-0 left-0 right-0 bottom-0 '}></div>
|
|
<div class={'w-[115px] h-full flex flex-col items-center z-10 text-white'}>
|
|
<div
|
|
class={
|
|
'w-full bg-white/20 text-center rounded text-[14px] overflow-hidden text-ellipsis whitespace-nowrap'
|
|
}
|
|
>
|
|
{store.state.list ? store.state.list.filter((val) => !val.isCompleted).pop()?.title : '无目标'}
|
|
</div>
|
|
<span class={'text-[42px] mb-1'}>
|
|
{store.state.beginTime < 0 ? '15:00' : formatSeconds(store.remainingTime)}
|
|
</span>
|
|
<span class={'text-[14px]'}>
|
|
你今日已完成
|
|
<span class={'text-[#76e6ff] mx-1'}>
|
|
{store.state.timeList.filter((val) => dayjs(val).isSame(dayjs(), 'day')).length}
|
|
</span>
|
|
</span>
|
|
<span class={'text-[14px]'}>个番茄时</span>
|
|
</div>
|
|
<div class={'flex flex-col justify-end'}>
|
|
<div class={'flex gap-x-3 '}>
|
|
<Tooltip title={'沉浸模式'}>
|
|
<div
|
|
onClick={(e) => {
|
|
e.stopPropagation()
|
|
store.openFullscreen = true
|
|
}}
|
|
class={
|
|
'w-[42px] h-[42px] bg-white/40 backdrop-blur-md flex items-center justify-center rounded-xl'
|
|
}
|
|
>
|
|
<img src={returnImg} alt="start" class={'w-[18px]'}></img>
|
|
</div>
|
|
</Tooltip>
|
|
<Tooltip title={'开始'}>
|
|
<div
|
|
class={
|
|
'w-[42px] h-[42px] bg-white/40 backdrop-blur-md flex items-center justify-center rounded-xl'
|
|
}
|
|
onClick={(e) => {
|
|
e.stopPropagation()
|
|
if (store.state.isStart) {
|
|
store.stopTomatoTime()
|
|
} else {
|
|
store.beginTomatoTime()
|
|
store.openFullscreen = true
|
|
}
|
|
}}
|
|
>
|
|
{store.state.isStart ? (
|
|
<img src={endImg} alt="start" class={'w-[18px]'}></img>
|
|
) : (
|
|
<img src={PlayStartImg} alt="start" class={'w-[18px]'}></img>
|
|
)}
|
|
</div>
|
|
</Tooltip>
|
|
<Tooltip title={'添加目标'}>
|
|
<div
|
|
class={
|
|
'w-[42px] h-[42px] bg-white/40 backdrop-blur-md flex items-center justify-center rounded-xl'
|
|
}
|
|
onClick={() => {
|
|
setTimeout(() => {
|
|
store.openShowModel = null
|
|
}, 300)
|
|
}}
|
|
>
|
|
<img src={PlusImg} alt="start" class={'w-[18px]'}></img>
|
|
</div>
|
|
</Tooltip>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
})
|