109 lines
4.8 KiB
TypeScript
109 lines
4.8 KiB
TypeScript
import { computed, defineComponent, ref } from 'vue'
|
|
import useTomatoStore from '../useTomatoStore'
|
|
import NoDataImg from "~/public/icons/work/noData.png"
|
|
import clsx from 'clsx'
|
|
import dayjs from 'dayjs'
|
|
import PlayImg from "~/public/icons/work/work_page-play.png"
|
|
export default defineComponent(() => {
|
|
const store = useTomatoStore()
|
|
const searchText = ref('')
|
|
|
|
return () => (
|
|
<div class={'w-full h-full p-3 flex flex-col'}>
|
|
<input
|
|
onInput={(e: any) => {
|
|
searchText.value = e.target.value
|
|
}}
|
|
type="text"
|
|
placeholder='搜索目标'
|
|
class={' border-transparent pb-1 border-b-[1px] border-b-[#ddd] overflow-hidden outline-none border-[1px] w-full'}
|
|
/>
|
|
<div class="flex flex-1 h-0 w-full ">
|
|
{
|
|
store.state.list.length === 0 ?
|
|
<div class={"w-full h-full flex items-center flex-col justify-center"}>
|
|
<img src={NoDataImg} alt='no data' class={"w-[300px]"}></img>
|
|
<div class={"text-[#666] text-[14px]"}>暂无目标</div>
|
|
</div>
|
|
: <div class={"w-full flex flex-col gap-y-2 py-2 pr-1 overflow-y-auto overflow-x-visible scrollbar-hide "}>
|
|
{
|
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
store.state.list.filter(val => val.title.includes(searchText.value)).sort((a, _) => {
|
|
return !a.isCompleted ? -1 : 1
|
|
}).map((item, idx) => (
|
|
<div
|
|
key={item.id}
|
|
onClick={() => {
|
|
store.openShowModel = item
|
|
|
|
}}
|
|
class={clsx("flex justify-between py-2 rounded-lg cursor-pointer relative group text-[#333] ",
|
|
item.isCompleted ? "bg-[#e4e4e4]" : "bg-[#EBF0FF] hover:bg-[#5a6eff] hover:text-white "
|
|
)}>
|
|
<div class={"w-[50px] flex justify-center items-center"}>
|
|
<div class={clsx("w-[20px] h-[20px] flex items-center justify-center rounded-full",
|
|
item.isCompleted ? "bg-[#d1d1d1]" : "bg-[#9fb7ff] group-hover:bg-white"
|
|
)}
|
|
onClick={(e) => {
|
|
e.stopPropagation()
|
|
store.state.list[idx].isCompleted = !item.isCompleted
|
|
}}>
|
|
{
|
|
!item.isCompleted &&
|
|
<div class={"w-[8px] h-[8px] bg-white group-hover:bg-[#9fb7ff] rounded-full"}></div>
|
|
|
|
}
|
|
</div>
|
|
</div>
|
|
<div class={"flex-1 w-0 flex justify-between pr-4"}>
|
|
|
|
<span class={"w-[500px] text-[14px] whitespace-nowrap text-ellipsis overflow-hidden "}>
|
|
{item.title}
|
|
</span>
|
|
<span class={clsx("text-[#666] text-[14px]", !item.isCompleted && "group-hover:text-[#ddd]")}>{dayjs(item.finishTime).format('MM月DD日')}</span>
|
|
|
|
</div>
|
|
|
|
<div class={"w-[16px] hidden group-hover:flex z-10 h-[16px] absolute -right-1 -top-1 bg-[#ddd] rounded-full items-center justify-center"}
|
|
onClick={() => {
|
|
const idx = store.state.list.findIndex(val => val.id === item.id)
|
|
if (idx !== -1) {
|
|
store.state.list.splice(0, 1)
|
|
|
|
}
|
|
}}
|
|
>
|
|
<div class={"w-[12px] h-[3px] bg-white"}></div>
|
|
</div>
|
|
</div>))
|
|
}
|
|
</div>
|
|
}
|
|
|
|
|
|
</div>
|
|
<div class={"relative h-[120px] w-full py-1"}>
|
|
<div class={"w-full h-full rounded-lg border-[1px] border-black/20 justify-between flex items-center px-4"}>
|
|
<div class={"flex flex-col text-[16px] gap-y-2"}>
|
|
<span class={" tracking-wide"}>你今日已完成 <span class={"text-[#5b47ff]"}>{store.state.list.filter(val => dayjs(val.finishTime).isSame(dayjs(), 'day') && val.isCompleted).length}</span>个番茄时</span>
|
|
<span class={"text-[#ff8686]"}>不积跬步无以至千里、千里之行始于足下。</span>
|
|
</div>
|
|
<button class={"w-[126px] h-[44px] text-[16px] text-white rounded-lg gap-x-1 font-bold flex items-center justify-center"} style={{
|
|
background: 'linear-gradient(225deg,#642FFF 0%,#5162FF 100%)',
|
|
boxShadow: '0 2px 4px #0003'
|
|
}}
|
|
onClick={() => {
|
|
store.openFullscreen = true
|
|
}}
|
|
>
|
|
|
|
<img src={PlayImg} alt="play img " class={"w-[13px]"} />
|
|
开始计时
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
)
|
|
})
|