feat:增加健康模块睡眠时间监控

src/components/Bill/BillChart.vue

@@ -42,6 +42,7 @@ import { lineChartOptions, barChartOptions, pieChartOptions } from 'vue3-common/
 import { useBillStore } from '@/store/bill.ts'
 import { useAppStore } from '@/store/app.ts'
 import { isMobile } from 'vue3-common/utils/layoutUtil'
+import { formatDate } from 'vue3-common/utils/dateUtil'
 
 const billStore = useBillStore()
 const appStore = useAppStore()
@@ -68,7 +69,9 @@ const updateChart = () => {
   const MAX_CATEGORY_COUNT = 5
 
   // 收支统计图
-  const dailyXAxis = billStore.billDateStatsList.map((item) => item.name)
+  const dailyXAxis = billStore.billDateStatsList.map((item) => {
+    return formatDate(item.name, 'MM-DD')
+  })
   const dailyYAxis = billStore.billDateStatsList.map((item) => item.value)
   billDailyChart.setOption(lineChartOptions('日期', dailyXAxis, '金额（元）', dailyYAxis))
   billDailyChart.setOption({

src/components/Health/HealthChart.vue

@@ -9,6 +9,13 @@
       <div class="chart" ref="weightDailyChartRef"/>
     </div>
 
+    <div class="chart-container card-item">
+      <div class="content">
+        <span class="title">📊睡眠时长统计图</span>
+      </div>
+      <div class="chart" ref="sleepDailyChartRef"/>
+    </div>
+
     <div class="chart-container card-item">
       <div class="content">
         <span class="title">📊运动时长统计</span>
@@ -31,15 +38,18 @@ import * as echarts from 'echarts'
 import { lineChartOptions, barChartOptions, pieChartOptions } from 'vue3-common/utils/eChartsUtil'
 import { useHealthStore } from '@/store/health'
 import { useAppStore } from '@/store/app.ts'
+import { formatDate } from 'vue3-common/utils/dateUtil'
 
 const healthStore = useHealthStore()
 const appStore = useAppStore()
 
 const weightDailyChartRef = ref<HTMLElement>()
+const sleepDailyChartRef = ref<HTMLElement>()
 const healthDurationChartRef = ref<HTMLElement>()
 const healthCategoryChartRef = ref<HTMLElement>()
 
 let weightDailyChart: echarts.ECharts
+let sleepDailyChart: echarts.ECharts
 let healthDurationChart: echarts.ECharts
 let healthCategoryChart: echarts.ECharts
 
@@ -49,6 +59,7 @@ watch(() => healthStore.isRefresh, () => {
 
 onMounted(() => {
   weightDailyChart = echarts.init(weightDailyChartRef.value as HTMLElement, appStore.isDark ? 'dark' : null)
+  sleepDailyChart = echarts.init(sleepDailyChartRef.value as HTMLElement, appStore.isDark ? 'dark' : null)
   healthDurationChart = echarts.init(healthDurationChartRef.value as HTMLElement, appStore.isDark ? 'dark' : null)
   healthCategoryChart = echarts.init(healthCategoryChartRef.value as HTMLElement, appStore.isDark ? 'dark' : null)
 })
@@ -57,9 +68,15 @@ const updateChart = () => {
   const MAX_CATEGORY_COUNT = 5
 
   // 体重趋势统计图
-  const weightXAxis = healthStore.healthRecordList.map((item) => item.date).reverse()
+  const weightRecordList = healthStore.healthRecordList
-  const weightYAxis = healthStore.healthRecordList.map((item) => item.weight).reverse()
+    .filter((item) => item.weight !== 0)
-  const sortedRecordList = healthStore.healthRecordList.sort((a, b) => a.weight - b.weight)
+
+  const weightXAxis = weightRecordList.map((item) => {
+    return formatDate(item.date, 'MM-DD')
+  }).reverse()
+  const weightYAxis = weightRecordList.map((item) => item.weight).reverse()
+  const sortedRecordList = weightRecordList.sort((a, b) => a.weight - b.weight)
+
   weightDailyChart.setOption(lineChartOptions('日期', weightXAxis, '体重（千克）', weightYAxis))
   weightDailyChart.setOption({
     yAxis: {
@@ -68,10 +85,28 @@ const updateChart = () => {
     }
   })
 
+  // 睡眠时长统计图
+  const sleepRecordList = healthStore.healthRecordList
+    .filter((item) => item.sleepDuration !== null)
+    .sort((a, b) => (a.date > b.date ? -1 : 1))
+
+  const sleepXAxis = sleepRecordList.map((item) => {
+    return formatDate(item.date, 'MM-DD')
+  }).reverse()
+  const sleepYAxis = sleepRecordList.map((item) => item.sleepDuration).reverse() as number[]
+
+  sleepDailyChart.setOption(barChartOptions('日期', sleepXAxis, '时间（小时）', sleepYAxis))
+
   // 运动量统计图
-  const sportRecordList = healthStore.healthRecordList.filter((item) => item.sportProject !== '')
+  const sportRecordList = healthStore.healthRecordList
-  const durationXAxis = sportRecordList.map((item) => item.date).reverse()
+    .filter((item) => item.sportProject !== '')
+    .sort((a, b) => (a.date > b.date ? -1 : 1))
+
+  const durationXAxis = sportRecordList.map((item) => {
+    return formatDate(item.date, 'MM-DD')
+  }).reverse()
   const durationYAxis = sportRecordList.map((item) => item.sportDuration).reverse()
+
   healthDurationChart.setOption(barChartOptions('日期', durationXAxis, '时间（分钟）', durationYAxis))
 
   // 类别统计图

src/components/Health/HealthForm.vue

@@ -49,6 +49,40 @@
       <span style="margin-left: 5px;">千克</span>
     </el-form-item>
 
+    <el-form-item>
+      <template #label>
+        <i class="fa-solid fa-moon"></i>
+        <span>睡眠开始时间</span>
+      </template>
+
+      <el-date-picker
+          v-model="healthStore.currentHealth.sleepStartTime"
+          type="datetime" clearable
+          placeholder="选择时间"
+          style="width: 180px"
+          format="YYYY-MM-DD HH:mm"
+          value-format="YYYY-MM-DD HH:mm:ss"
+          @clear="healthStore.currentHealth.sleepStartTime = ''"
+      />
+    </el-form-item>
+
+    <el-form-item>
+      <template #label>
+        <i class="fa-solid fa-sun"></i>
+        <span>睡眠结束时间</span>
+      </template>
+
+      <el-date-picker
+          v-model="healthStore.currentHealth.sleepEndTime"
+          type="datetime" clearable
+          placeholder="选择时间"
+          style="width: 180px"
+          format="YYYY-MM-DD HH:mm"
+          value-format="YYYY-MM-DD HH:mm:ss"
+          @clear="healthStore.currentHealth.sleepEndTime = ''"
+      />
+    </el-form-item>
+
     <el-form-item style="align-self: center;">
       <el-button type="primary" @click="onSubmit"
                  :disabled="isBeforeDate(formatDate(new Date()), healthStore.selectDate)">
@@ -68,8 +102,10 @@ const healthStore = useHealthStore()
 const projectList = ['羽毛球', '乒乓球', '跑步', '其他']
 
 const onSubmit = async () => {
-  const { sportProject, sportDuration, weight } = healthStore.currentHealth
+  const { sportProject, sportDuration, weight,
-  if (sportProject === '' && sportDuration === 0 && weight === 0) {
+    sleepStartTime, sleepEndTime } = healthStore.currentHealth
+  if (sportProject === '' && sportDuration === 0 && weight === 0
+      && sleepStartTime === '' && sleepEndTime === '') {
     return
   }
 
@@ -80,6 +116,11 @@ const onSubmit = async () => {
     }
   }
 
+  if (sleepStartTime && sleepEndTime && !sleepStartTime && sleepEndTime) {
+    ElMessage.error('睡眠结束时间应大于睡眠开始时间')
+    return
+  }
+
   await healthStore.updateHealthDay()
   healthStore.currentHealth = healthStore.getHealthDay(healthStore.selectDate)
 }

src/store/health.ts

@@ -17,6 +17,9 @@ export const useHealthStore = defineStore('health', {
     currentHealth: {
       sportProject: '',
       sportDuration: 0,
+      sleepStartTime: '',
+      sleepEndTime: '',
+      sleepDuration: 0,
       weight: 0,
       date: ''
     } as IHealth,
@@ -55,6 +58,9 @@ export const useHealthStore = defineStore('health', {
       return {
         id: 0,
         date,
+        sleepStartTime: '',
+        sleepEndTime: '',
+        sleepDuration: 0,
         sportDuration: 0,
         sportProject: '',
         weight: 0

src/types/health.ts

@@ -3,6 +3,9 @@ export interface IHealth {
   sportProject: string;
   sportDuration: number;
   weight: number;
+  sleepStartTime: string | null;
+  sleepEndTime: string | null;
+  sleepDuration: number | null;
   date: string;
 }
 

src/views/blog/archive.vue

@@ -1,60 +0,0 @@
-<template>
-  <div class="blog-archive blog-section common-mobile-view">
-    <el-date-picker
-        v-model="currentYear"
-        type="year" placeholder="请选择年份"
-        style="width: 100px"
-        @change="changeDateEvent"
-    />
-
-    <span class="total">共计{{ blogStore.blogList.length }}篇文章</span>
-
-    <el-timeline class="time-line card-item">
-      <el-timeline-item v-for="(value, index) in blogStore.blogList" :key="index">
-        <div class="item">
-          <span class="date">{{ value.createTime }}</span>
-          <span class="title" @click="viewBlogClick(index)">{{ value.title }}</span>
-        </div>
-      </el-timeline-item>
-    </el-timeline>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useBlogStore } from '@/store/blog.ts'
-import { useRouter } from 'vue-router'
-import { onMounted, ref } from 'vue'
-
-const blogStore = useBlogStore()
-const router = useRouter()
-const currentYear = ref(new Date())
-
-onMounted(() => {
-  blogStore.queryBlogByCondition({
-    year: (new Date()).getFullYear()
-  })
-})
-
-/**
- * 选择年份事件
- * @param value 年份
- */
-const changeDateEvent = async (value: Date) => {
-  await blogStore.queryBlogByCondition({
-    year: value.getFullYear()
-  })
-}
-
-/**
- * 点击查看博客按钮
- * @param index 索引
- */
-const viewBlogClick = async (index: number) => {
-  const blogId = blogStore.blogList[index].id
-  await router.push({ name: 'BlogDetailId', params: { id: blogId } })
-}
-</script>
-
-<style scoped lang="scss">
-@use "@/styles/blog/blog.archive.module";
-</style>

src/views/blog/category.vue

@@ -1,44 +0,0 @@
-<template>
-  <div class="blog-category blog-section common-mobile-view">
-    <span class="total">目前共计{{ blogStore.blogCategoryList.length }}个分类</span>
-
-    <div class="category-list card-item">
-      <div v-for="(item, index) in blogStore.blogCategoryList"
-           :key="index" class="item" @click="viewBlogCategoryClick(item.name)">
-        <i class="fa-solid fa-book"></i>
-        <div class="content">
-          <span class="label">{{ item.name }}</span>
-          <span class="value">共 {{ item.count }} 篇文档</span>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useBlogStore } from '@/store/blog.ts'
-import { useAppStore } from '@/store/app.ts'
-import { useRouter } from 'vue-router'
-import { onMounted } from 'vue'
-
-const blogStore = useBlogStore()
-const appStore = useAppStore()
-const router = useRouter()
-
-onMounted(() => {
-  blogStore.queryBlogCategory()
-})
-
-/**
- * 点击查看博客分类信息
- * @param name 类别名称
- */
-const viewBlogCategoryClick = async (name: string) => {
-  appStore.isShowMobileBack = true
-  await router.push({ name: 'BlogCategoryName', params: { name } })
-}
-</script>
-
-<style scoped lang="scss">
-@use "@/styles/blog/blog.category.module";
-</style>

src/views/blog/category[name].vue

@@ -1,41 +0,0 @@
-<template>
-  <div class="blog-category-detail blog-section common-mobile-view">
-    <span class="name">{{ route.params?.name }}</span>
-
-    <div class="category-detail-list card-item">
-      <div v-for="(item, index) in blogStore.blogList"
-           :key="index" class="item" @click="viewBlogClick(index)">
-        <span class="number">{{ index+1 }}</span>
-        <span class="date">{{ item?.createTime }}</span>
-        <span class="title">{{ item.title }}</span>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useBlogStore } from '@/store/blog.ts'
-import { useRouter } from 'vue-router'
-import { useRoute } from 'vue-router'
-import { onMounted } from 'vue'
-
-const blogStore = useBlogStore()
-const router = useRouter()
-const route = useRoute()
-
-onMounted(async () => {
-  const categoryName = route.params.name as string
-  await blogStore.queryBlogByCondition({
-    category: categoryName
-  })
-})
-
-const viewBlogClick = async (index: number) => {
-  const blogId = blogStore.blogList[index].id
-  await router.push({ name: 'BlogDetailId', params: { id: blogId } })
-}
-</script>
-
-<style scoped lang="scss">
-@use "@/styles/blog/blog.category.detail.module";
-</style>

src/views/blog/detail[id].vue

@@ -1,55 +0,0 @@
-<template>
-  <div class="blog-detail-mobile blog-section common-mobile-view" id="blog-section">
-    <div class="blog-title">
-      <span class="title">{{ blogStore.currentBlog.title }}</span>
-      <blog-label :basic-blog="getBasicBlog(blogStore.currentBlog)"/>
-    </div>
-
-    <div class="blog-md">
-      <MdPreview editorId="blog-id" v-model="blogStore.currentBlog.content" />
-    </div>
-
-    <div class="blog-copyright">
-      <span>
-        <strong>本文作者: </strong> Cxx
-      </span>
-      <span>
-        <strong>本文链接: </strong>
-        <a href="https://www.microsoft.com/">{{ currentUrl.href }}</a>
-      </span>
-      <span>
-        <strong>版权声明: </strong>
-        本博客所有文章除特别声明外，均采用
-        <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">©BY-NC-SA</a>
-        许可协议。转载请注明出处！
-      </span>
-    </div>
-
-    <div class="blog-ending">
-      <span>-------------本文结束♥感谢您的阅读♥给个五星好评吧~~-------------</span>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import BlogLabel from '@/components/Blog/Content/BlogLabel.vue'
-import { MdPreview } from 'md-editor-v3'
-import 'md-editor-v3/lib/style.css'
-import { useBlogStore } from '@/store/blog.ts'
-import { getBasicBlog } from '@/utils/blog/blogUtil.ts'
-import { useRoute } from 'vue-router'
-import { onMounted } from 'vue'
-
-const blogStore = useBlogStore()
-const route = useRoute()
-
-const currentUrl = new URL(window.location.href)
-
-onMounted(async () => {
-  await blogStore.queryBlogById(route.params.id as number)
-})
-</script>
-
-<style scoped lang="scss">
-@use "@/styles/blog/blog.detail.module";
-</style>

src/views/blog/overview.vue

@@ -1,76 +0,0 @@
-<template>
-  <div ref="blogOverviewRef" class="blog-content-list blog-section common-mobile-view">
-    <div v-if="blogStore.blogList.length === 0"
-         class="blog-content blog-content-empty" >
-    </div>
-
-    <div class="blog-content blog-content-summary card-item"
-         v-for="(item, index) in blogStore.blogList" :key="index">
-      <span class="title">{{ item.title }}</span>
-
-      <blog-label :basic-blog="getBasicBlog(item)"/>
-
-      <p class="content">
-        {{ item.summary }}
-      </p>
-
-      <el-button type="primary" @click="readBlogClick(index)">阅读全文 »</el-button>
-      <hr/>
-    </div>
-
-    <arrive-bottom v-if="blogStore.isScrollEnd"/>
-  </div>
-</template>
-
-<script setup lang="ts">
-import BlogLabel from '@/components/Blog/Content/BlogLabel.vue'
-import ArriveBottom from '@/components/Common/ArriveButton.vue'
-import { useRouter } from 'vue-router'
-import { onBeforeUnmount, onMounted, ref } from 'vue'
-import { useBlogStore } from '@/store/blog.ts'
-import { getBasicBlog } from '@/utils/blog/blogUtil.ts'
-
-const blogOverviewRef = ref()
-const router = useRouter()
-const blogStore = useBlogStore()
-
-onMounted(async () => {
-  blogStore.pageInfo = {
-    currentPage: 1,
-    pageSize: 3,
-    totalSize: 1
-  }
-  blogStore.blogList = []
-  await blogStore.queryMobileBlog()
-  blogOverviewRef.value.addEventListener('scroll', handleScroll)
-})
-
-onBeforeUnmount(() => {
-  blogOverviewRef.value.removeEventListener('scroll', handleScroll)
-})
-
-/**
- * 点击阅读博客按钮
- * @param index 索引
- */
-const readBlogClick = async (index: number) => {
-  const blogId = blogStore.blogList[index].id
-  await router.push({ name: 'BlogDetailId', params: { id: blogId } })
-}
-
-const handleScroll = () => {
-  const el = blogOverviewRef.value
-  if (el.scrollTop + el.clientHeight >= el.scrollHeight - 10) {
-    const { currentPage, pageSize, totalSize } = blogStore.pageInfo
-    blogStore.isScrollEnd = pageSize * currentPage > totalSize
-    if (!blogStore.isScrollEnd) {
-      blogStore.pageInfo.currentPage++
-      blogStore.queryMobileBlog()
-    }
-  }
-}
-</script>
-
-<style lang="scss">
-@use "@/styles/blog/blog.overview.module";
-</style>

src/views/home/index.vue

@@ -14,10 +14,6 @@
     <weather-time-card />
 
     <div class="module-list">
-      <module-card icon="iconfont icon-fenlei" color="#00CED1"
-                   title="博客文章" sub-title="分享学习点滴"
-                   router="/blog/overview"/>
-
       <module-card icon="iconfont icon-zhangdan" color="#FFCC00"
                    title="账单记录" sub-title="收支一目了然"
                    router="/bill/data" @click="initBillClick"/>
@@ -34,10 +30,6 @@
                    title="运动健康" sub-title="乐享健康生活"
                    router="/health/calendar"/>
 
-      <module-card icon="iconfont icon-paiban" color="#9933FF"
-                   title="日程安排" sub-title="规划每日时光"
-                   router="/plan/calendar"/>
-
       <module-card icon="iconfont icon-richeng" color="#228B22"
                    title="纪念日" sub-title="铭记重要时刻"
                    router="/anniversary/list"/>

src/views/meta.ts

@@ -1,36 +1,10 @@
 import type { IRouteMetaConfig } from 'vue3-common/types'
 
 export const mobileHomeMeta: IRouteMetaConfig = {
-  '/blog': {
-    title: '博客记录',
-    icon: '',
-    order: 1,
-    redirect: '/blog/overview'
-  },
-  '/blog/overview': {
-    title: '博客列表',
-    icon: ''
-  },
-  '/blog/category': {
-    title: '博客分类',
-    icon: ''
-  },
-  '/blog/category/:name': {
-    title: '博客分类',
-    icon: ''
-  },
-  '/blog/archive': {
-    title: '博客归档',
-    icon: ''
-  },
-  '/blog/detail/:id': {
-    title: '博客内容',
-    icon: ''
-  },
   '/bill': {
     title: '收支记录',
     icon: '',
-    order: 2,
+    order: 1,
     redirect: '/bill/data'
   },
   '/bill/data': {
@@ -56,7 +30,7 @@ export const mobileHomeMeta: IRouteMetaConfig = {
   '/travel': {
     title: '旅行记录',
     icon: '',
-    order: 4,
+    order: 2,
     redirect: '/travel/spot'
   },
   '/travel/spot': {
@@ -82,7 +56,7 @@ export const mobileHomeMeta: IRouteMetaConfig = {
   '/health': {
     title: '运动健康',
     icon: '',
-    order: 4,
+    order: 3,
     redirect: '/health/calendar'
   },
   '/health/calendar': {
@@ -93,28 +67,10 @@ export const mobileHomeMeta: IRouteMetaConfig = {
     title: '统计',
     icon: ''
   },
-  '/plan': {
-    title: '时光日程',
-    icon: 'home-calendar',
-    order: 5,
-    redirect: '/plan/calendar'
-  },
-  '/plan/calendar': {
-    title: '日程安排',
-    icon: ''
-  },
-  '/plan/list': {
-    title: '日程清单',
-    icon: ''
-  },
-  '/plan/detail/id': {
-    title: '日程内容',
-    icon: ''
-  },
   '/anniversary': {
     title: '纪念日',
     icon: 'home-anniversary',
-    order: 6,
+    order: 4,
     redirect: '/anniversary/list'
   },
   '/anniversary/list': {
@@ -132,7 +88,7 @@ export const mobileHomeMeta: IRouteMetaConfig = {
   '/period': {
     title: '月经记录',
     icon: 'home-period',
-    order: 7,
+    order: 5,
     redirect: '/period/calendar'
   },
   '/period/calendar': {
@@ -150,7 +106,7 @@ export const mobileHomeMeta: IRouteMetaConfig = {
   '/product': {
     title: '物品记录',
     icon: 'home-product',
-    order: 8,
+    order: 6,
     redirect: '/product/list'
   },
   '/product/list': {
@@ -164,7 +120,7 @@ export const mobileHomeMeta: IRouteMetaConfig = {
   '/journal': {
     title: '日记',
     icon: 'home-product',
-    order: 9,
+    order: 7,
     redirect: '/journal/record'
   },
   '/journal/record': {
@@ -182,7 +138,7 @@ export const mobileHomeMeta: IRouteMetaConfig = {
   '/kpi': {
     title: '绩效',
     icon: 'home-kpi',
-    order: 10,
+    order: 8,
     redirect: '/kpi/record'
   },
   '/kpi/record': {
@@ -196,7 +152,7 @@ export const mobileHomeMeta: IRouteMetaConfig = {
   '/asset': {
     title: '资产',
     icon: 'home-asset',
-    order: 12,
+    order: 9,
     redirect: '/asset/list'
   },
   '/asset/list': {
@@ -210,7 +166,7 @@ export const mobileHomeMeta: IRouteMetaConfig = {
   '/ledger': {
     title: '账本',
     icon: 'home-ledger',
-    order: 13,
+    order: 10,
     redirect: '/ledger/list'
   },
   '/ledger/list': {
@@ -228,7 +184,7 @@ export const mobileHomeMeta: IRouteMetaConfig = {
   '/password': {
     title: '密码',
     icon: 'home-password',
-    order: 14,
+    order: 11,
     redirect: '/password/list'
   },
   '/password/list': {
@@ -238,7 +194,7 @@ export const mobileHomeMeta: IRouteMetaConfig = {
   '/profile': {
     title: '个人信息',
     icon: '',
-    order: 15,
+    order: 12,
     hidden: true,
     redirect: '/profile/index'
   },

src/views/plan/calendar.vue

@@ -1,23 +0,0 @@
-<template>
-  <div class="mobile-plan-view common-mobile-view">
-<!--    <plan-stats />-->
-    <plan-calendar />
-  </div>
-</template>
-
-<script setup lang="ts">
-import PlanCalendar from '@/components/Plan/PlanCalendar.vue'
-import { usePlanStore } from '@/store/plan.ts'
-import { onMounted } from 'vue'
-import PlanStats from '@/components/Plan/PlanStats.vue'
-
-const planStore = usePlanStore()
-
-onMounted(() => {
-  planStore.refreshInfo()
-})
-</script>
-
-<style lang="scss">
-@use "@/styles/home/plan.mobile.module";
-</style>

src/views/plan/detail[id].vue

@@ -1,210 +0,0 @@
-<template>
-  <div class="plan-detail-mobile common-mobile-view">
-    <el-form ref="formRef" :model="planStore.currentPlan"
-             :rules="rules" label-width="80px" class="plan-form">
-      <el-form-item label="计划标题" prop="title">
-        <el-input v-model="planStore.currentPlan.title" autocomplete="off"
-                  placeholder="请输入标题" clearable
-                  show-word-limit maxlength="10">
-        </el-input>
-      </el-form-item>
-
-      <el-form-item label="计划内容">
-        <el-input v-model="planStore.currentPlan.content" autocomplete="off"
-                  placeholder="请输入标题" :rows="2" type="textarea" clearable
-                  show-word-limit maxlength="20">
-        </el-input>
-      </el-form-item>
-
-      <el-form-item label="开始日期">
-        <el-date-picker v-model="planStore.currentPlan.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="planStore.currentPlan.startTime"
-                        placeholder="请选择开始时间" :editable="false"
-                        format="HH:mm" value-format="HH:mm" style="width: 150px;"
-                        :disabled="planStore.currentPlan.date === null"
-                        @change="changeStartTimeEvent"/>
-      </el-form-item>
-
-      <el-form-item label="结束时间">
-        <el-time-picker v-model="planStore.currentPlan.endTime"
-                        placeholder="请选择结束时间" :editable="false"
-                        :disabled="planStore.currentPlan.startTime === null"
-                        format="HH:mm" value-format="HH:mm" style="width: 150px;"/>
-      </el-form-item>
-
-      <el-form-item label="提醒时间">
-        <el-date-picker v-model="planStore.currentPlan.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="planStore.currentPlan.email"
-                  placeholder="请输入邮箱地址" clearable
-                  :disabled="planStore.currentPlan.alterTime === null"
-                  style="width: 200px;">
-          <template #prefix>
-            <i class="fa-solid fa-envelope"></i>
-          </template>
-        </el-input>
-      </el-form-item>
-
-      <el-form-item label="类别">
-        <el-input v-model="planStore.currentPlan.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="planStore.currentPlan.isTop"
-                   :active-value="1" :inactive-value="0"
-                   @change="changeTopEvent"
-        />
-      </el-form-item>
-
-      <el-form-item label="优先级">
-        <el-select v-model="planStore.currentPlan.priority"
-                   placeholder="请选择优先级" style="width: 150px;"
-                   :disabled="!!planStore.currentPlan.isTop">
-          <el-option v-for="(item, index) in priorityOptionList"
-                     :key="index" :label="item.label" :value="item.value"
-          />
-        </el-select>
-      </el-form-item>
-    </el-form>
-
-    <div class="button-container">
-      <el-button type="primary" @click="confirmClick">确认</el-button>
-      <el-button v-if="planStore.planApiType === 'UPDATE'"
-                 type="danger" @click="deleteClick">删除</el-button>
-      <el-button type="info" @click="cancelClick">取消</el-button>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { ElMessage, FormInstance, FormRules } from 'element-plus'
-import { planRules } from '@/utils/element/elRules.ts'
-import { nextTick, onMounted, reactive, ref } from 'vue'
-import { isBeforeTime } from '@/utils/home/planUtil.ts'
-import { commonElMessageBox } from 'vue3-common/utils/elUtil'
-import { usePlanStore } from '@/store/plan.ts'
-import { useUserStore } from '@/store/user.ts'
-import { useAppStore } from '@/store/app.ts'
-
-const formRef = ref<FormInstance>()
-const rules = reactive<FormRules>(planRules)
-const planStore = usePlanStore()
-const userStore = useUserStore()
-const appStore = useAppStore()
-
-const priorityOptionList = [{
-  value: 0,
-  label: '高'
-},
-{
-  value: 1,
-  label: '中'
-},
-{
-  value: 2,
-  label: '低'
-}]
-
-const disabledDate = (time: Date) => {
-  return time.getTime() < Date.now() - 8.64e7
-}
-
-onMounted(async () => {
-  appStore.isShowMobileBack = true
-
-  await nextTick(() => {
-    formRef.value?.clearValidate()
-  })
-})
-
-const changeDateEvent = (value: string) => {
-  if (!value) {
-    planStore.currentPlan.startTime = null
-    planStore.currentPlan.endTime = null
-  }
-}
-
-const changeStartTimeEvent = (value: string) => {
-  if (!value) {
-    planStore.currentPlan.endTime = null
-  }
-}
-
-const changeAlterTimeEvent = (value: string) => {
-  if (value) {
-    planStore.currentPlan.email = userStore.userInfo.email
-  }
-}
-
-const changeTopEvent = (value: number) => {
-  if (value) {
-    planStore.currentPlan.priority = 0
-  }
-}
-
-const validatePlan = (): boolean => {
-  const { startTime, endTime } = planStore.currentPlan
-  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(planStore.currentPlan)
-      history.back()
-      appStore.isShowMobileBack = false
-    }
-  })
-}
-
-const deleteClick = () => {
-  commonElMessageBox('是否确认删除该计划内容?').then(async () => {
-    planStore.planApiType = 'DELETE'
-    await planStore.handlePlanApi(planStore.currentPlan)
-    history.back()
-    appStore.isShowMobileBack = false
-  })
-}
-
-const cancelClick = () => {
-  history.back()
-  appStore.isShowMobileBack = false
-}
-</script>
-
-<style scoped lang="scss">
-.plan-detail-mobile {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-
-  .button-container {
-    align-self: center;
-  }
-}
-</style>

src/views/plan/list.vue

@@ -1,30 +0,0 @@
-<template>
-  <div class="mobile-plan-view common-mobile-view">
-    <plan-query />
-    <plan-list />
-
-    <el-button type="primary" :icon="Plus" circle size="large"
-               @click="addNewPlanClick" class="add-new" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import PlanList from '@/components/Plan/PlanList.vue'
-import PlanQuery from '@/components/Plan/PlanQuery.vue'
-import { Plus } from '@element-plus/icons-vue'
-import { usePlanStore } from '@/store/plan.ts'
-import { useRouter } from 'vue-router'
-
-const planStore = usePlanStore()
-const router = useRouter()
-
-const addNewPlanClick = () => {
-  planStore.planApiType = 'ADD'
-  planStore.currentPlan = planStore.getEmptyPlan()
-  router.push({ name: 'PlanDetailId', params: { id: 0 } })
-}
-</script>
-
-<style lang="scss">
-@use "@/styles/home/plan.mobile.module";
-</style>