feat:移植工程

src/components/Home/Plan/PlanCalendar.vue

@@ -0,0 +1,336 @@
+<template>
+  <div id="planCalendar"/>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, watch } from 'vue'
+import { Calendar, DateSelectArg, EventClickArg } from '@fullcalendar/core'
+import { initCommonCalendar, initMobileCalendar } from '@/utils/home/planUtil'
+import { usePlanStore } from '@/store/plan.ts'
+import { isMobile } from 'vue3-common/utils/layoutUtil'
+
+let calendar: Calendar | undefined
+
+const planStore = usePlanStore()
+
+onMounted(() => {
+  initCalendar()
+})
+
+watch(() => planStore.isRefresh, () => {
+  getCalendarEvent()
+})
+
+/**
+ * 初始化日程
+ */
+const initCalendar = async () => {
+  const calendarEl = document.getElementById('planCalendar') as HTMLElement
+
+  if (isMobile()) {
+    calendar = initMobileCalendar(calendarEl, selectDateEvent, eventClickEvent, updateDateEvent)
+  } else {
+    calendar = initCommonCalendar(calendarEl, selectDateEvent, eventClickEvent, updateDateEvent)
+  }
+  calendar.render()
+}
+
+/**
+ * 获取排班事件
+ */
+const getCalendarEvent = () => {
+  if (calendar) {
+    calendar.removeAllEvents()
+
+    planStore.planList.forEach((item) => {
+      if (item.date) {
+        calendar?.addEvent({
+          start: `${item.date} ${item.startTime}`,
+          end: `${item.date} ${item.endTime}`,
+          title: item.title
+        })
+      }
+    })
+
+    calendar.refetchEvents()
+  }
+}
+
+/**
+ * 更新日期事件 重新获取内容
+ */
+const updateDateEvent = async (dateInfo) => {
+
+}
+
+/**
+ * 选择日期事件
+ * @param dateSelect 日期选择
+ */
+const selectDateEvent = (dateSelect: DateSelectArg) => {
+
+}
+
+/**
+ * 点击日程事件
+ * @param eventClick 点击事件
+ */
+const eventClickEvent = (eventClick: EventClickArg) => {
+  // const anniversary = formatDate(eventClick.event.start as Anniversary)
+  // const beginTime = formatDate(eventClick.event.start as Anniversary, 'HH:mm')
+  // const endTime = formatDate(eventClick.event.end as Anniversary, 'HH:mm')
+}
+</script>
+
+<style lang="scss">
+@import "@/styles/home.variable.module.scss";
+
+$cell-height: 3.8vh;
+$time-slot-width: 70px;
+$month-cell-height: 120px;
+
+#planCalendar {
+  height: 100%;
+  background-color: var(--color-card-bg);
+  border-radius: 15px;
+  // box-shadow: 3px 3px 3px #CFCFCF;
+  padding: 10px;
+
+  // 标题区域
+  .fc-header-toolbar {
+    // margin-bottom: 4vh;
+
+    // 按钮区域
+    .fc-button-group, .fc-toolbar-chunk {
+      .fc-button-primary {
+        background-color: var(--color-record-card-bg);
+        border: none;
+        color: var(--color-text);
+      }
+
+      .fc-button-active {
+        background-color: $theme-color;
+        color: #FFFFFF;
+      }
+    }
+  }
+
+  // 通用内容区域
+  .fc-view {
+    border: none;
+    height: calc(100vh - 260px);
+    overflow: auto;
+
+    // 表格边框线
+    table, td, th {
+      // border-top: 0;
+      // border-left: 0;
+      // border-right: 0;
+      // border-bottom: 0;
+    }
+
+    // 主体区域
+    .fc-scrollgrid {
+      table-layout: auto;
+      text-align: center;
+
+      // 左侧时间线
+      col {
+        width: $time-slot-width !important;
+        text-align: center;
+      }
+
+      // 表头区域
+      .fc-col-header {
+        color: $theme-color;
+        height: 50px;
+        font-size: 1.4rem;
+        background-color: var(--color-record-card-bg);
+
+        th {
+          vertical-align: middle;
+        }
+
+        // 表格边框线
+        table, td, th {
+          border: none;
+        }
+
+        // 内容
+        .fc-col-header-cell-cushion {
+          // 超出2行省略号
+          white-space: pre-wrap;
+          word-wrap: break-word;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 2;
+        }
+      }
+
+      // 内容区域
+      .fc-timegrid-body {
+        // 单元格高度
+        tr {
+          height: $cell-height;
+        }
+
+        // 表格行
+        .fc-timegrid-slots {
+          // label(时间轴)
+          .fc-timegrid-slot-label {
+            font-size: 1.2rem;
+
+            .fc-timegrid-slot-label-frame {
+              text-align: center;
+            }
+          }
+        }
+      }
+
+      // 事件方块内容
+      .fc-event {
+        span {
+          color: #FFFFFF;
+          // 最多显示几个字符
+          width: 6em;
+          overflow: hidden;
+          // 省略号
+          text-overflow: ellipsis;
+          // 不换行
+          white-space: nowrap;
+        }
+
+        // 时间
+        .fc-event-time {
+          color: #FFFFFF;
+        }
+
+        .fc-event-time::after {
+          content: none;
+        }
+
+        // 标题
+        .fc-event-title {
+          color: #FFFFFF;
+          // 最多显示几个字符
+          width: 7em;
+          overflow: hidden;
+          // 省略号
+          text-overflow: ellipsis;
+          // 不换行
+          white-space: nowrap;
+        }
+
+        // 方块内容
+        .fc-event-main-frame {
+          justify-items: center;
+          align-items: center;
+          .fc-event-time {
+            font-size: 1rem;
+          }
+
+          .fc-event-title {
+            font-size: 1.2rem;
+          }
+        }
+      }
+    }
+  }
+
+  // 悬浮框
+  .fc-popover {
+    .fc-popover-body {
+      .fc-event {
+        .fc-event-time {
+          color: #FFFFFF;
+        }
+
+        .fc-event-title {
+          color: #FFFFFF;
+          font-size: 1rem;
+        }
+      }
+
+      .fc-event:hover {
+        background-color: #009FA8;
+      }
+    }
+  }
+
+  // 月视图
+  .fc-dayGridMonth-view {
+    // 主体区域
+    .fc-scrollgrid {
+      .fc-daygrid-body {
+        // 单元格高度
+        td {
+          // height: 6vh;
+        }
+
+        // 月视图中的每日事件方块
+        .fc-daygrid-day-frame {
+          .fc-daygrid-day-events {
+            .fc-daygrid-event-harness {
+              .fc-event {
+                background-color: #009FA8;
+              }
+
+              .fc-event:hover {
+                // background-color: #009FA8;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+@media (max-width: 1200px) {
+  #planCalendar {
+    .fc-header-toolbar {
+      .fc-toolbar-title {
+        font-size: 1.2rem;
+      }
+    }
+
+    // 通用内容区域
+    .fc-view {
+      // 主体区域
+      .fc-scrollgrid {
+        // 表头区域
+        .fc-col-header {
+          font-size: 1rem;
+        }
+
+        // 内容区域
+        .fc-timegrid-body {
+          // 表格行
+          .fc-timegrid-slots {
+            // label(时间轴)
+            .fc-timegrid-slot-label {
+              font-size: 1rem;
+            }
+          }
+        }
+
+        // 事件方块内容
+        .fc-event {
+          // 方块内容
+          .fc-event-main-frame {
+            .fc-event-time {
+              font-size: 0.8rem;
+            }
+
+            .fc-event-title {
+              font-size: 0.8rem;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/components/Home/Plan/PlanCard.vue

@@ -0,0 +1,218 @@
+<template>
+  <div class="plan-card card-item" :class="{ 'plan-complete': props.plan.completed }">
+    <div v-if="props.plan?.completed"
+         class="ribbon" style="background-color: #80c480">
+      <span>已完成</span>
+    </div>
+    <div v-else-if="props.plan?.isTop"
+         class="ribbon" style="background-color: #D14D49">
+      <span>置顶</span>
+    </div>
+    <div v-else-if="props.plan?.priority === 0"
+         class="ribbon" style="background-color: #D14D49">
+      <span>高</span>
+    </div>
+    <div v-else-if="props.plan?.priority === 1"
+         class="ribbon" style="background-color: #009FA8">
+      <span>中</span>
+    </div>
+
+    <div class="plan-check">
+      <el-checkbox v-model="props.plan.completed"
+                   :true-value="1" :false-value="0"
+                   @change="changeCompleteEvent"/>
+    </div>
+
+    <div class="plan-body" @click="editPlanClick">
+      <span class="plan-title">{{ props.plan.title }}</span>
+
+      <span v-if="props.plan?.content" class="plan-content">
+        {{ props.plan.content }}
+      </span>
+
+      <div v-if="props.plan?.date" class="plan-time">
+        <div class="time"
+             :style="{'color': isBeforeToday(props.plan.date) ? '#FF0000' : '#009FA8'}">
+          <span v-if="props.plan.date">
+            {{ props.plan.date }}
+          </span>
+          <span v-if="props.plan.startTime">
+            {{ props.plan.startTime }}
+          </span>
+          <span v-if="props.plan.endTime">
+            ~ {{ props.plan.endTime }}
+          </span>
+        </div>
+        <el-icon v-if=" props.plan?.alterTime">
+          <el-tooltip effect="dark" :content="props.plan.alterTime" placement="bottom">
+            <AlarmClock/>
+          </el-tooltip>
+        </el-icon>
+        <div v-if=" props.plan?.date" class="remain">
+          <el-tooltip effect="dark" :content="getRemainDays(props.plan.date)" placement="bottom">
+            <el-icon><Clock/></el-icon>
+          </el-tooltip>
+        </div>
+      </div>
+
+      <div v-if=" props.plan?.tag" class="plan-tag">
+        <el-tag>{{ props.plan.tag }}</el-tag>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { defineProps, PropType } from 'vue'
+import { AlarmClock, Clock } from '@element-plus/icons-vue'
+import { IPlanInfo } from '@/types/plan.ts'
+import { getRemainDays, isBeforeToday } from '@/utils/home/planUtil'
+import { deepCopyObject } from 'vue3-common/utils/dataUtil'
+import { usePlanStore } from '@/store/plan'
+import { useRouter } from 'vue-router'
+import { commonElMessageBox } from 'vue3-common/utils/elUtil'
+import { isMobile } from 'vue3-common/utils/layoutUtil'
+
+const planStore = usePlanStore()
+const router = useRouter()
+
+const props = defineProps({
+  plan: {
+    required: true,
+    type: Object as PropType<IPlanInfo>
+  }
+})
+
+const editPlanClick = async () => {
+  planStore.planApiType = 'UPDATE'
+
+  if (isMobile()) {
+    planStore.currentPlan = props.plan as IPlanInfo
+    await router.push({ name: 'MobileHomePlanDetailId', params: { id: planStore.currentPlan.id } })
+  } else {
+    planStore.planDialog = {
+      title: '编辑计划',
+      visible: true,
+      data: deepCopyObject(props.plan)
+    }
+  }
+}
+
+const changeCompleteEvent = (value: boolean) => {
+  if (value) {
+    commonElMessageBox('请确认已经完成该计划？').then(() => {
+      planStore.setPlanStatus(props.plan?.id as number, value)
+    }).catch(() => {
+      planStore.refreshInfo()
+    })
+  } else {
+    planStore.setPlanStatus(props.plan?.id as number, value)
+  }
+}
+</script>
+
+<style lang="scss">
+$plan-card-height: 70px;
+
+.plan-complete {
+  background-color: #808080;
+  opacity: 0.5;
+}
+
+.plan-card {
+  position: relative;
+  min-height: $plan-card-height;
+  padding: 10px;
+  display: flex;
+  overflow: hidden;
+
+  .plan-check {
+    align-self: center;
+    width: 30px;
+
+    .el-checkbox {
+      .el-checkbox__inner {
+        height: 20px;
+        width: 20px;
+      }
+
+      .el-checkbox__inner:after {
+        height: 10px;
+        width: 6px;
+      }
+      // transform: scale(1.5);
+    }
+  }
+
+  .plan-body {
+    flex-grow: 1;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 1vh;
+
+    .plan-title {
+      font-weight: bold;
+      font-size: large;
+    }
+
+    .plan-content {
+      font-size: small;
+      color: darkgrey;
+    }
+
+    .plan-time {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+
+      .time {
+        display: flex;
+        gap: 5px;
+        font-size: small;
+      }
+
+      .remain {
+        display: flex;
+        align-items: center;
+        gap: 5px;
+
+        span {
+          font-size: small;
+          color: darkgrey;
+        }
+      }
+    }
+
+    .plan-tag {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+  }
+
+  .ribbon {
+    overflow: hidden;
+    white-space: nowrap;
+    position: absolute;
+    right: -45px;
+    top: 10px;
+    transform: rotate(45deg);
+    box-shadow: 3px 3px 3px #CFCFCF;
+
+    span {
+      color: #FFFFFF;
+      display: block;
+      font-weight: bold;
+      padding: 5px 50px;
+      text-align: center;
+      text-shadow: 0 0 5px #444;
+    }
+  }
+}
+
+.plan-card:hover {
+  cursor: pointer;
+}
+</style>

src/components/Home/Plan/PlanDialog.vue

@@ -0,0 +1,211 @@
+<template>
+  <el-dialog v-model="dialogData.visible" :title="dialogData.title"
+             center @open="openDialogEvent"
+             class="plan-dialog">
+    <el-form ref="formRef" :model="dialogData.data"
+             :rules="rules" label-width="80px" class="plan-form">
+      <el-form-item label="计划标题" prop="title">
+        <el-input v-model="dialogData.data.title" autocomplete="off"
+                  placeholder="请输入标题" clearable
+                  show-word-limit maxlength="10">
+        </el-input>
+      </el-form-item>
+
+      <el-form-item label="计划内容">
+        <el-input v-model="dialogData.data.content" autocomplete="off"
+                  placeholder="请输入标题" :rows="2" type="textarea" clearable
+                  show-word-limit maxlength="20">
+        </el-input>
+      </el-form-item>
+
+      <div style="display: flex;justify-content: space-between;">
+        <el-form-item label="开始日期">
+          <el-date-picker v-model="dialogData.data.date"
+                          type="date" placeholder="请选择日期" :editable="false"
+                          value-format="YYYY-MM-DD" style="width: 150px;"
+                          :disabled-date="disabledDate" @change="changeDateEvent"/>
+        </el-form-item>
+
+        <el-form-item label="开始时间">
+          <el-time-picker v-model="dialogData.data.startTime"
+                          placeholder="请选择开始时间" :editable="false"
+                          format="HH:mm" value-format="HH:mm" style="width: 150px;"
+                          :disabled="dialogData.data.date === null"
+                          @change="changeStartTimeEvent"/>
+        </el-form-item>
+
+        <el-form-item label="结束时间">
+          <el-time-picker v-model="dialogData.data.endTime"
+                          placeholder="请选择结束时间" :editable="false"
+                          :disabled="dialogData.data.startTime === null"
+                          format="HH:mm" value-format="HH:mm" style="width: 150px;"/>
+        </el-form-item>
+      </div>
+
+      <div style="display: flex;gap: 40px;">
+        <el-form-item label="提醒时间">
+          <el-date-picker v-model="dialogData.data.alterTime"
+                          type="datetime" placeholder="请选择提醒时间" :editable="false"
+                          format="YYYY-MM-DD HH:mm" value-format="YYYY-MM-DD HH:mm:ss"
+                          @change="changeAlterTimeEvent"
+                          :disabled-date="disabledDate" style="width: 200px;"/>
+        </el-form-item>
+
+        <el-form-item label="邮箱地址" prop="email">
+          <el-input v-model="dialogData.data.email"
+                    placeholder="请输入邮箱地址" clearable
+                    :disabled="dialogData.data.alterTime === null"
+                    style="width: 200px;">
+            <template #prefix>
+              <i class="fa-solid fa-envelope"></i>
+            </template>
+          </el-input>
+        </el-form-item>
+      </div>
+
+      <div style="display: flex;justify-content: space-between;">
+        <el-form-item label="类别">
+          <el-input v-model="dialogData.data.tag" autocomplete="off"
+                    placeholder="请输入类别" clearable
+                    show-word-limit maxlength="10" style="width: 150px;">
+          </el-input>
+        </el-form-item>
+
+        <el-form-item label="置顶">
+          <el-switch v-model="dialogData.data.isTop"
+                     :active-value="1" :inactive-value="0"
+                     @change="changeTopEvent"
+          />
+        </el-form-item>
+
+        <el-form-item label="优先级">
+          <el-select v-model="dialogData.data.priority"
+                     placeholder="请选择优先级" style="width: 150px;"
+                     :disabled="!!dialogData.data.isTop">
+            <el-option v-for="(item, index) in priorityOptionList"
+                       :key="index" :label="item.label" :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+      </div>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="cancelClick">取消</el-button>
+        <el-button type="primary" @click="confirmClick">确认</el-button>
+        <el-button v-if="planStore.planApiType === 'UPDATE'"
+                   type="danger" @click="deleteClick">删除</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script lang="ts" setup>
+import { ElMessage, FormInstance, FormRules } from 'element-plus'
+import { planRules } from '@/utils/element/elRules'
+import { computed, nextTick, reactive, ref } from 'vue'
+import { isBeforeTime } from '@/utils/home/planUtil'
+import { commonElMessageBox } from 'vue3-common/utils/elUtil'
+import { usePlanStore } from '@/store/plan.ts'
+import { useUserStore } from '@/store/user.ts'
+
+const formRef = ref<FormInstance>()
+const rules = reactive<FormRules>(planRules)
+const planStore = usePlanStore()
+const userStore = useUserStore()
+
+const dialogData = computed(() => planStore.planDialog)
+
+const priorityOptionList = [{
+  value: 0,
+  label: '高'
+},
+{
+  value: 1,
+  label: '中'
+},
+{
+  value: 2,
+  label: '低'
+}]
+
+const disabledDate = (time: Date) => {
+  return time.getTime() < Date.now() - 8.64e7
+}
+
+/**
+ * 打开对话框事件
+ */
+const openDialogEvent = async () => {
+  await nextTick(() => {
+    formRef.value?.clearValidate()
+  })
+}
+
+const changeDateEvent = (value: string) => {
+  if (!value) {
+    dialogData.value.data.startTime = null
+    dialogData.value.data.endTime = null
+  }
+}
+
+const changeStartTimeEvent = (value: string) => {
+  if (!value) {
+    dialogData.value.data.endTime = null
+  }
+}
+
+const changeAlterTimeEvent = (value: string) => {
+  if (value) {
+    dialogData.value.data.email = userStore.userInfo.email
+  }
+}
+
+const changeTopEvent = (value: number) => {
+  if (value) {
+    dialogData.value.data.priority = 0
+  }
+}
+
+const validatePlan = (): boolean => {
+  const { startTime, endTime } = dialogData.value.data
+  if (startTime && endTime) {
+    if (!isBeforeTime(startTime, endTime)) {
+      ElMessage.error('请确认结束时间大于开始时间')
+      return false
+    }
+  }
+
+  return true
+}
+
+/**
+ * 点击确认按钮
+ */
+const confirmClick = () => {
+  formRef.value?.validate().then(async () => {
+    if (validatePlan()) {
+      await planStore.handlePlanApi(dialogData.value.data)
+    }
+  })
+}
+
+const deleteClick = () => {
+  commonElMessageBox('是否确认删除该计划内容?').then(() => {
+    planStore.planApiType = 'DELETE'
+    planStore.handlePlanApi(dialogData.value.data)
+  })
+}
+
+const cancelClick = () => {
+  planStore.planDialog.visible = false
+}
+</script>
+
+<style lang="scss">
+.plan-dialog {
+  width:40%;
+  min-width: 800px;
+}
+</style>

src/components/Home/Plan/PlanList.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="plan-list">
+    <el-empty v-if="planStore.planList.length === 0" />
+
+    <el-scrollbar v-else>
+      <plan-card  v-for="(item, index) in planStore.planList"
+                  :key="index" :plan="item">
+      </plan-card>
+    </el-scrollbar>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import PlanCard from '@/components/Home/Plan/PlanCard.vue'
+import { usePlanStore } from '@/store/plan.ts'
+
+const planStore = usePlanStore()
+</script>

src/components/Home/Plan/PlanQuery.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="common-query">
+    <el-select v-model="planStore.queryInfo.planType"
+               @change="planStore.refreshInfo()"
+               style="width: 120px;align-self: center;">
+      <el-option v-for="(item, index) in planTypeOptions" :key="index"
+                 :label="item.label" :value="item.value"/>
+    </el-select>
+
+    <el-select v-model="planStore.queryInfo.orderType"
+               @change="planStore.refreshInfo()"
+               style="width: 120px;align-self: center;">
+      <el-option v-for="(item, index) in orderTypeOptions" :key="index"
+                 :label="item.label" :value="item.value"/>
+    </el-select>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { usePlanStore } from '@/store/plan.ts'
+
+const planStore = usePlanStore()
+
+const planTypeOptions = [{
+  label: '所有计划',
+  value: 'all'
+},
+{
+  label: '已完成计划',
+  value: 'completed'
+},
+{
+  label: '未完成计划',
+  value: 'notCompleted'
+}]
+
+const orderTypeOptions = [{
+  label: '按时间排序',
+  value: 'date'
+},
+{
+  label: '按重要性排序',
+  value: 'priority'
+}]
+</script>

src/components/Home/Plan/PlanStats.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="common-statistics">
+    <stats-card
+        title="计划总数" color="#CA6C65" unit="个" icon="iconfont icon-richeng"
+        :value="planStore.planStats.totalCount" />
+
+    <stats-card
+        title="完成总数" color="#6FBB69" unit="个" icon="iconfont icon-wancheng"
+        :value="planStore.planStats.completedCount" />
+
+    <stats-card
+        title="当前计划" color="#E4BF62" unit="个" icon="iconfont icon-dangqianjihua"
+        :value="planStore.planStats.currentCount" />
+
+    <stats-card
+        title="过期计划" color="#5470C6" unit="个" icon="iconfont icon-yuqi"
+        :value="planStore.planStats.remainCount" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import StatsCard from '@/components/Home/StatsCard.vue'
+import { usePlanStore } from '@/store/plan'
+
+const planStore = usePlanStore()
+</script>