save
This commit is contained in:
expdsn
parent
81d03b147c
commit
2a0ea90688
Binary file not shown.
|
After Width: | Height: | Size: 173 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 456 B |
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 557 B |
|
|
@ -5,11 +5,14 @@ import DataImg from '~/public/icons/work/dataImg.png'
|
|||
import DateImg from '~/public/icons/work/dateImg.png'
|
||||
import ListImg from '~/public/icons/work/listImg.png'
|
||||
import AddImg from '~/public/icons/work/addTarget.png'
|
||||
import DownImg from "~/public/icons/work/selectDown1.0.3.png"
|
||||
import { v4 as uuid } from "uuid"
|
||||
import List from './modal_view/list'
|
||||
import { DatePicker, Modal } from 'ant-design-vue'
|
||||
import { DatePicker, Modal, TimePicker } from 'ant-design-vue'
|
||||
import type { TomatoTarget } from './useTomatoStore'
|
||||
import dayjs from 'dayjs'
|
||||
import useTomatoStore from './useTomatoStore'
|
||||
import Calendar from './modal_view/calendar'
|
||||
const workTab = [
|
||||
{
|
||||
title: '目标列表',
|
||||
|
|
@ -32,14 +35,15 @@ const EditContent = defineComponent(() => {
|
|||
const form = ref<TomatoTarget>(
|
||||
store.openShowModel || {
|
||||
title: '',
|
||||
id: '',
|
||||
id: uuid(),
|
||||
finishTime: dayjs().valueOf(),
|
||||
remindTime: -1
|
||||
remindTime: null,
|
||||
isCompleted: false
|
||||
}
|
||||
)
|
||||
return () => (
|
||||
<div class={'w-full h-[300px] flex flex-col bg-white gap-y-2 items-start pl-2'}>
|
||||
<span class={'text-[16px] font-bold text-[#333] mt-[10px]'}>新建目标</span>
|
||||
<div class={'w-full flex flex-col bg-white items-start gap-y-2 pl-2'}>
|
||||
<span class={'text-[16px] font-bold text-[#333] mt-[10px] text-center flex justify-center w-full'}>新建目标</span>
|
||||
<div
|
||||
class={'w-full h-[40px] mt-4 relative rounded-lg pl-[50px] bg-black/[0.05]'}
|
||||
style={{
|
||||
|
|
@ -52,7 +56,10 @@ const EditContent = defineComponent(() => {
|
|||
class={'left-4 absolute top-1/2 -translate-y-1/2 w-[15px] h-[16px]'}
|
||||
/>
|
||||
<input
|
||||
v-modal={form.value.title}
|
||||
value={form.value.title}
|
||||
onInput={(e: any) => {
|
||||
form.value.title = e.target.value
|
||||
}}
|
||||
type="text"
|
||||
placeholder="未命名目标"
|
||||
class={'w-full bg-transparent outline-none text-[14px] text-[#333] h-full'}
|
||||
|
|
@ -109,29 +116,62 @@ const EditContent = defineComponent(() => {
|
|||
<span class={'text-[#666] text-[14px] my-1'}>添加提醒时间</span>
|
||||
<div
|
||||
class={clsx(
|
||||
' px-6 py-2 rounded-lg cursor-pointer relative',
|
||||
!(
|
||||
dayjs(form.value.finishTime).isSame(dayjs(), 'day') ||
|
||||
dayjs(form.value.finishTime).isSame(dayjs().add(1, 'day'), 'day')
|
||||
' px-6 py-2 rounded-lg cursor-pointer group relative items-center flex gap-x-1',
|
||||
(
|
||||
form.value.remindTime
|
||||
)
|
||||
? 'bg-[#EBF0FF] text-[#5a6eff]'
|
||||
: 'bg-black/[0.05]'
|
||||
)}
|
||||
>
|
||||
{form.value.remindTime === null ? (
|
||||
'不提醒'
|
||||
) : (
|
||||
{
|
||||
<>
|
||||
{dayjs(form.value.finishTime).format('YYYY-MM-DD')}
|
||||
<DatePicker
|
||||
{!form.value.remindTime ? '选择时间' : dayjs(form.value.remindTime).format('HH:mm')}
|
||||
<img src={DownImg} class={"w-[12px] object-cover "}></img>
|
||||
<TimePicker
|
||||
|
||||
class={'absolute opacity-0 left-0 top-0 w-full h-full'}
|
||||
onChange={(e) => {
|
||||
form.value.finishTime = dayjs(e).valueOf()
|
||||
form.value.remindTime = dayjs(e).valueOf()
|
||||
}}
|
||||
/>
|
||||
<div class={"w-[16px] hidden group-hover:flex h-[16px] absolute -right-1 -top-1 bg-[#ddd] rounded-full items-center justify-center"}
|
||||
onClick={() => {
|
||||
form.value.remindTime = null
|
||||
}}
|
||||
>
|
||||
<div class={"w-[12px] h-[3px] bg-white"}></div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
}
|
||||
|
||||
</div>
|
||||
<div class={"my-3 w-full text-center flex justify-center"}>
|
||||
{
|
||||
form.value.title ?
|
||||
<button
|
||||
onClick={() => {
|
||||
const idx = store.state.list.findIndex(val => val.id === form.value.id)
|
||||
if (idx !== -1) {
|
||||
store.state.list[idx] = form.value
|
||||
} else {
|
||||
store.state.list.push(form.value)
|
||||
|
||||
}
|
||||
store.openShowModel = undefined
|
||||
}}
|
||||
class={"px-10 py-2 font-bold text-[16px] text-white rounded-lg flex items-center justify-center cursor-pointer hover:opacity-90 duration-150"} style={{
|
||||
background: 'linear-gradient(225deg,#642FFF 0%,#5162FF 100%)',
|
||||
boxShadow: '0 2px 6px #00000026'
|
||||
}}>确定</button> :
|
||||
<button class={"px-10 py-2 font-bold text-[16px] text-white rounded-lg flex items-center bg-[#bdbdbd] justify-center duration-150"} style={{
|
||||
boxShadow: '0 2px 6px #00000026'
|
||||
}}>确定</button>
|
||||
|
||||
}
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)
|
||||
})
|
||||
|
|
@ -145,6 +185,7 @@ export default defineComponent(() => {
|
|||
zIndex={60}
|
||||
footer={null}
|
||||
centered
|
||||
destroyOnClose
|
||||
open={store.openShowModel !== undefined}
|
||||
onCancel={() => {
|
||||
store.openShowModel = undefined
|
||||
|
|
@ -158,7 +199,7 @@ export default defineComponent(() => {
|
|||
store.openShowModel = null
|
||||
}}
|
||||
class={
|
||||
'w-[126px] h-[44px] leading-[44px] shadow-lg rounded-lg justify-center items-center gap-x-1 font-bold text-white flex '
|
||||
'w-[126px] h-[44px] leading-[44px] shadow-lg rounded-lg justify-center items-center gap-x-1 font-bold text-white flex hover:opacity-90 cursor-pointer '
|
||||
}
|
||||
style={{
|
||||
background: 'linear-gradient(225deg,#5A6EFF 0%,#519DFF 100%)'
|
||||
|
|
@ -192,7 +233,7 @@ export default defineComponent(() => {
|
|||
{select.value === 0 ? (
|
||||
<List></List>
|
||||
) : select.value === 1 ? (
|
||||
<div>目标日历</div>
|
||||
<Calendar />
|
||||
) : select.value === 2 ? (
|
||||
<div>数据详情</div>
|
||||
) : (
|
||||
|
|
|
|||
|
|
@ -1,56 +0,0 @@
|
|||
import { computed, defineComponent, ref, Transition } from 'vue'
|
||||
import { OhVueIcon, addIcons } from 'oh-vue-icons'
|
||||
import { MdClose, MdOpeninfull, MdClosefullscreen } from 'oh-vue-icons/icons'
|
||||
import useTomatoStore from '../useTomatoStore'
|
||||
addIcons(MdClose, MdOpeninfull, MdClosefullscreen)
|
||||
|
||||
export default defineComponent(
|
||||
(props, ctx) => {
|
||||
const show = ref(false)
|
||||
const store = useTomatoStore()
|
||||
return () => (
|
||||
<div class="fixed left-0 top-0 z-[60] w-full">
|
||||
{/* 背景遮罩 */}
|
||||
<Transition>
|
||||
{props.show && (
|
||||
<div class="w-full h-screen bg-black/20 backdrop-blur" onClick={() => {}}></div>
|
||||
)}
|
||||
</Transition>
|
||||
{/* 弹框主体 */}
|
||||
<Transition name="modal">
|
||||
{show.value && (
|
||||
<div
|
||||
class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 overflow-hidden transition-all"
|
||||
style={{
|
||||
width: '984px',
|
||||
height: '580px',
|
||||
borderRadius: '1rem'
|
||||
}}
|
||||
>
|
||||
{/* 关闭按钮 */}
|
||||
<div
|
||||
class={
|
||||
'w-[16px] h-[16px] group flex justify-center items-center rounded-full overflow-hidden absolute bg-red-500/70 hover:bg-red-500 transition-all cursor-pointer z-30 top-4 right-6 '
|
||||
}
|
||||
onClick={() => {
|
||||
store.isOpenEditModal = ''
|
||||
}}
|
||||
>
|
||||
<div class={' items-center justify-center hidden group-hover:flex'}>
|
||||
<OhVueIcon name="md-close" scale={0.6} fill="white" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full h-full flex justify-center items-center">
|
||||
<Transition>{ctx.slots.default?.()}</Transition>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Transition>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
{
|
||||
props: ['show']
|
||||
}
|
||||
)
|
||||
|
|
@ -0,0 +1,108 @@
|
|||
import { useCalendarStore } from "@/widgets/calendar/useCalendarStore";
|
||||
import { DatePicker } from "ant-design-vue";
|
||||
import DownImg from "~/public/icons/work/selectDown1.0.3.png"
|
||||
import clsx from "clsx";
|
||||
import dayjs from "dayjs";
|
||||
import { defineComponent, ref } from "vue";
|
||||
import useTomatoStore from "../useTomatoStore";
|
||||
const dayList = ['日', '一', '二', '三', '四', '五', '六']
|
||||
|
||||
export default defineComponent(() => {
|
||||
const selectTime = ref(dayjs().valueOf())
|
||||
const store = useTomatoStore()
|
||||
const dateStore = useCalendarStore()
|
||||
return () => <div class={"w-full h-full flex p-3 flex-col gap-y-2"}>
|
||||
<div
|
||||
class={
|
||||
'bg-black/[.1] cursor-pointer text-[#333] text-[14px] items-center overflow-hidden relative w-[138px] gap-x-1 flex justify-center py-2 rounded'
|
||||
}
|
||||
>
|
||||
<DatePicker
|
||||
class={'w-full absolute left-0 top-0 opacity-0 '}
|
||||
picker="month"
|
||||
onChange={(e) => {
|
||||
selectTime.value = dayjs(e).valueOf()
|
||||
dateStore.state.select = dayjs(selectTime.value)
|
||||
}}
|
||||
/>
|
||||
{dayjs(selectTime.value).format("YYYY年MM月")}
|
||||
<img src={DownImg} class={"w-[12px] object-cover "}></img>
|
||||
|
||||
</div>
|
||||
<div class={'flex-1 h-0 w-full '}>
|
||||
<div class={"grid grid-cols-7 grid-rows-1 w-full"}>
|
||||
{dayList.map((item) => {
|
||||
return (
|
||||
<div key={item} class="p-2">
|
||||
<span class="text-[16px] text-[#333333] dark:text-white">{item}</span>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
<div class={'w-full grid grid-cols-7 grid-rows-auto bg-[#f8f8f8] gap-x-[4px] gap-y-[3px] rounded-lg p-2'}
|
||||
style={{
|
||||
boxShadow: '0 2px 12px #0000001a'
|
||||
}}>
|
||||
{/* {dayList.map((item) => {
|
||||
return (
|
||||
<div key={item} class="flex justify-center items-center ">
|
||||
<span class="text-[16px] font-bold text-[#333333] dark:text-white">{item}</span>
|
||||
</div>
|
||||
)
|
||||
})} */}
|
||||
{dateStore.dayList
|
||||
.filter(
|
||||
(_, index) =>
|
||||
index <
|
||||
(dateStore.dayList.reduce((acc, cur) => (cur!.type !== 1 ? acc + 1 : acc), 0) > 35
|
||||
? 42
|
||||
: 35)
|
||||
)
|
||||
|
||||
.map((el) => (
|
||||
<div
|
||||
onClick={() => {
|
||||
// selectTime.value = el.day.valueOf()
|
||||
}}
|
||||
class={clsx(
|
||||
'p-2 flex gap-x-2 cursor-pointer border-[1px] w-full h-[77px] flex-grow-0 hover:border-[#5A6EFF] rounded',
|
||||
{
|
||||
' opacity-40': el.type === 1 || el.type === -1,
|
||||
'border-[#5A6EFF] border-solid border-[1px] ': el.day.isSame(
|
||||
dayjs(),
|
||||
'day'
|
||||
),
|
||||
'border-transparent border-solid': !el.day.isSame(dayjs(), 'day') && !el.day.isSame(selectTime.value, 'day'),
|
||||
'border-[#5A6EFF] border-solid border-[1px]': !el.day.isSame(dayjs(), 'day') && el.day.isSame(selectTime.value, 'day'),
|
||||
}
|
||||
|
||||
)}
|
||||
>
|
||||
<span class={'text-[14px] '}>{el.label}</span>
|
||||
<div class={"flex-1 w-0 h-full"}>
|
||||
<div class={"flex flex-col gap-y-1 justify-between"}>
|
||||
{
|
||||
store.state.list.filter((val, idx) => dayjs(val.finishTime).isSame(dayjs(el.day), 'day') && idx <= 2).map(item => (
|
||||
<span class={clsx("border-l-[4px] leading-[16px] pl-[2px] text-[16px] border-l-[#5A6EFF] whitespace-nowrap overflow-hidden text-ellipsis ",
|
||||
item.isCompleted ? " line-through text-[#999]" : " text-[#333]"
|
||||
)}>
|
||||
{item.title}
|
||||
</span>
|
||||
))
|
||||
}
|
||||
{
|
||||
store.state.list.filter((val) => dayjs(val.finishTime).isSame(dayjs(el.day), 'day')).length > 2 &&
|
||||
<span class={clsx("border-l-[4px] leading-[16px] pl-[2px] text-[16px] border-l-[#5A6EFF] whitespace-nowrap overflow-hidden text-ellipsis ",
|
||||
)}>
|
||||
...
|
||||
</span>
|
||||
}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
})
|
||||
|
|
@ -1,13 +1,104 @@
|
|||
import { defineComponent } from 'vue'
|
||||
|
||||
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'}>
|
||||
<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'
|
||||
}}>
|
||||
|
||||
<img src={PlayImg} alt="play img " class={"w-[13px]"} />
|
||||
开始计时
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
|
|
|
|||
|
|
@ -6,11 +6,19 @@ export type TomatoTarget = {
|
|||
finishTime: number;
|
||||
remindTime: number | null;
|
||||
title: string;
|
||||
isCompleted: boolean;
|
||||
|
||||
}
|
||||
export type TomatoTime = {
|
||||
date: number;
|
||||
finishTime: number;
|
||||
}
|
||||
|
||||
export default defineStore("work", () => {
|
||||
const state = reactive({
|
||||
list: [] as TomatoTarget[],
|
||||
timeList: [] as TomatoTime[]
|
||||
|
||||
})
|
||||
const openShowModel = ref<undefined | null | TomatoTarget>()
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue