save

src/widgets/work/Modal.tsx

@@ -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'}>
+    <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]'}>新建目标</span>
+      <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',
+          ' px-6 py-2 rounded-lg cursor-pointer group relative items-center flex gap-x-1',
-          !(
+          (
-            dayjs(form.value.finishTime).isSame(dayjs(), 'day') ||
+            form.value.remindTime
-            dayjs(form.value.finishTime).isSame(dayjs().add(1, 'day'), 'day')
           )
             ? 'bg-[#EBF0FF] text-[#5a6eff]'
             : 'bg-black/[0.05]'
         )}
       >
-        {form.value.remindTime === null ? (
+        {
-          '不提醒'
-        ) : (
           <>
-            {dayjs(form.value.finishTime).format('YYYY-MM-DD')}
+            {!form.value.remindTime ? '选择时间' : dayjs(form.value.remindTime).format('HH:mm')}
-            <DatePicker
+            <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>
         ) : (

src/widgets/work/modal_view/ModalModal.tsx

@@ -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']
-  }
-)

src/widgets/work/modal_view/calendar.tsx

@@ -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>
+})

src/widgets/work/modal_view/list.tsx

@@ -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>
   )
 })

src/widgets/work/useTomatoStore.ts

@@ -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>()