feat:移植工程

src/views/mobile-home/anniversary/category.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="mobile-anniversary-category common-mobile-view">
+    <div class="category-list">
+      <category-card
+          v-for="(item, index) in anniversaryCategoryMap.keys()" :key="index"
+          :category-item="anniversaryCategoryMap.get(item)" :count="getCategoryCount(item)"/>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import CategoryCard from '@/components/Home/Anniversary/CategoryCard.vue'
+import { onMounted } from 'vue'
+import { useAnniversaryStore } from '@/store/anniversary'
+import { anniversaryCategoryMap } from '@/utils/home/anniversaryUtil'
+
+const anniversaryStore = useAnniversaryStore()
+
+onMounted(async () => {
+  await anniversaryStore.queryAnniversaryCategory()
+})
+
+const getCategoryCount = (name: string): number => {
+  const categoryItem = anniversaryStore.categoryStats.find((item) => item.name === name)
+  if (categoryItem) {
+    return categoryItem.value
+  } else {
+    return 0
+  }
+}
+</script>
+
+<style lang="scss">
+.mobile-anniversary-category {
+  .category-list {
+    padding: 0 5px;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    justify-items: center;
+    gap: 15px;
+  }
+}
+</style>

src/views/mobile-home/anniversary/detail[id].vue

@@ -0,0 +1,122 @@
+<template>
+  <div class="mobile-anniversary-detail common-mobile-view">
+    <el-form ref="formRef" :model="anniversaryStore.currentAnniversary"
+             :rules="rules" label-width="60px">
+      <el-form-item label="标题" prop="title">
+        <el-input v-model="anniversaryStore.currentAnniversary.title" autocomplete="off"
+                  placeholder="请输入标题" clearable
+                  show-word-limit maxlength="10">
+        </el-input>
+      </el-form-item>
+
+      <el-form-item label="日期" prop="date">
+        <el-date-picker
+            v-model="anniversaryStore.currentAnniversary.date"
+            type="date" :editable="false" placeholder="请选择日期"
+            value-format="YYYY-MM-DD"/>
+      </el-form-item>
+
+      <el-form-item label="类型" prop="type">
+        <el-radio-group v-model="anniversaryStore.currentAnniversary.type"
+                        @change="changeTypeEvent">
+          <el-radio v-for="(item, index) in dateTypeList"
+                    :value="item.value" :key="index" :label="item.label">
+          </el-radio>
+        </el-radio-group>
+      </el-form-item>
+
+      <el-form-item label="重复" prop="recurring">
+        <el-switch
+            v-model="anniversaryStore.currentAnniversary.recurring"
+            inline-prompt active-text="是" inactive-text="否"
+            :disabled="anniversaryStore.currentAnniversary.type === 'countUp'"
+            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
+        />
+      </el-form-item>
+
+      <el-form-item label="分类" prop="category">
+        <el-select v-model="anniversaryStore.currentAnniversary.category"
+                   placeholder="请选择分类" clearable>
+          <el-option
+              v-for="(item, index) in anniversaryCategoryMap.keys()"
+              :key="index" :label="item" :value="item"
+          />
+        </el-select>
+      </el-form-item>
+    </el-form>
+
+    <div class="button-container">
+      <el-button type="primary" @click="confirmClick">确认</el-button>
+      <el-button v-if="anniversaryStore.anniversaryApiType === 'UPDATE'"
+                 type="danger" @click="deleteClick">删除</el-button>
+      <el-button type="info" @click="cancelClick">取消</el-button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useAnniversaryStore } from '@/store/anniversary'
+import { useAppStore } from '@/store/app.ts'
+import { FormRules } from 'element-plus'
+import { anniversaryRules } from '@/utils/element/elRules'
+import { onMounted, reactive, ref } from 'vue'
+import { commonElMessageBox } from 'vue3-common/utils/elUtil'
+import { anniversaryCategoryMap } from '@/utils/home/anniversaryUtil'
+
+const formRef = ref()
+const rules = reactive<FormRules>(anniversaryRules)
+const anniversaryStore = useAnniversaryStore()
+const appStore = useAppStore()
+
+const dateTypeList = [{
+  value: 'countDown',
+  label: '倒数日'
+}, {
+  value: 'countUp',
+  label: '正数日'
+}]
+
+onMounted(async () => {
+  appStore.isShowMobileBack = true
+})
+
+const changeTypeEvent = (value: string) => {
+  if (value === 'countUp') {
+    anniversaryStore.currentAnniversary.recurring = false
+  }
+}
+
+/**
+ * 点击确认按钮
+ */
+const confirmClick = () => {
+  formRef.value.validate().then(async () => {
+    await anniversaryStore.handleAnniversaryApi(anniversaryStore.currentAnniversary)
+    history.back()
+  })
+}
+
+const cancelClick = () => {
+  history.back()
+}
+
+const deleteClick = () => {
+  commonElMessageBox('是否确认删除该纪念日内容?').then(async () => {
+    anniversaryStore.anniversaryApiType = 'DELETE'
+    await anniversaryStore.handleAnniversaryApi(anniversaryStore.currentAnniversary)
+    history.back()
+  })
+}
+</script>
+
+<style scoped lang="scss">
+.mobile-anniversary-detail {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+
+  .button-container {
+    align-self: center;
+  }
+}
+</style>

src/views/mobile-home/anniversary/list.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="mobile-anniversary-list common-mobile-view">
+    <anniversary-query />
+
+    <el-empty v-if="anniversaryStore.anniversaryList.length === 0" />
+
+    <div v-else class="anniversary-list">
+      <anniversary-card v-for="(item, index) in anniversaryStore.anniversaryList"
+                        :key="index" :date-item="item" />
+    </div>
+
+    <draggable-button @click="addClick"/>
+  </div>
+</template>
+
+<script setup lang="ts">
+import DraggableButton from '@/components/Mobile/DraggableButton.vue'
+import AnniversaryQuery from '@/components/Home/Anniversary/AnniversaryQuery.vue'
+import AnniversaryCard from '@/components/Home/Anniversary/AnniversaryCard.vue'
+import { useAnniversaryStore } from '@/store/anniversary.ts'
+import { onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+
+const anniversaryStore = useAnniversaryStore()
+const router = useRouter()
+
+onMounted(async () => {
+  await anniversaryStore.queryAnniversaryList()
+})
+
+const addClick = () => {
+  anniversaryStore.anniversaryApiType = 'ADD'
+  anniversaryStore.currentAnniversary = anniversaryStore.getEmptyAnniversary()
+  router.push({ name: 'MobileHomeAnniversaryDetailId', params: { id: 0 } })
+}
+</script>
+
+<style lang="scss">
+.mobile-anniversary-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+
+  .anniversary-list {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+}
+</style>

src/views/mobile-home/asset/detail[id].vue

@@ -0,0 +1,123 @@
+<template>
+  <div class="mobile-asset-detail common-mobile-view">
+    <el-form ref="formRef" :model="assetStore.currentAssetRecord"
+             :rules="rules" label-width="auto">
+      <el-form-item label="类别" prop="category">
+        <el-radio-group v-model="assetStore.currentAssetRecord.category"
+                        @change="changeCategoryEvent">
+          <el-radio v-for="(item, index) in assetCategoryList"
+                    :value="item" :key="index" :label="item">
+          </el-radio>
+        </el-radio-group>
+      </el-form-item>
+
+      <el-form-item label="名称" prop="name">
+        <el-select v-model="assetStore.currentAssetRecord.name"
+                   allow-create filterable
+                   placeholder="请输入或选择名称" clearable>
+          <el-option
+              v-for="(item, index) in assetInfo.assetNameList"
+              :key="index" :label="item" :value="item"
+          />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="所属人" prop="owner">
+        <el-radio-group v-model="assetStore.currentAssetRecord.owner">
+          <el-radio v-for="(item, index) in assetOwnerList"
+                    :value="item" :key="index" :label="item">
+          </el-radio>
+        </el-radio-group>
+      </el-form-item>
+
+      <el-form-item label="金额" prop="amount">
+        <amount-input v-model="assetStore.currentAssetRecord.amount"/>
+      </el-form-item>
+
+      <el-form-item label="备注">
+        <el-input v-model="assetStore.currentAssetRecord.remark" autocomplete="off"
+                  placeholder="请输入备注" clearable
+                  show-word-limit maxlength="10">
+        </el-input>
+      </el-form-item>
+    </el-form>
+
+    <div class="button-container">
+      <el-button type="primary" @click="confirmClick">确认</el-button>
+      <el-button v-if="assetStore.assetApiType === 'UPDATE'"
+                 type="danger" @click="deleteClick">删除</el-button>
+      <el-button type="info" @click="cancelClick">取消</el-button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { AmountInput } from 'vue3-common'
+import { useAssetStore } from '@/store/asset'
+import { useAppStore } from '@/store/app.ts'
+import { FormRules } from 'element-plus'
+import { assetRules } from '@/utils/element/elRules'
+import { onMounted, reactive, ref } from 'vue'
+import { commonElMessageBox } from 'vue3-common/utils/elUtil'
+
+const formRef = ref()
+const rules = reactive<FormRules>(assetRules)
+const assetStore = useAssetStore()
+const appStore = useAppStore()
+
+onMounted(async () => {
+  appStore.isShowMobileBack = true
+  const { category } = assetStore.currentAssetRecord
+  assetInfo.assetNameList = assetNameMap.get(category) || []
+})
+
+const assetInfo = reactive({
+  assetNameList: [] as string[]
+})
+
+const assetOwnerList = ['哥哥', '宝宝']
+const assetCategoryList = ['资金账户', '充值账户', '社保账户']
+const assetNameMap: Map<string, string[]> = new Map([
+  ['资金账户', ['支付宝', '微信']],
+  ['社保账户', ['公积金', '医保']],
+  ['充值账户', ['公交卡']]
+])
+
+const changeCategoryEvent = (value: string) => {
+  assetInfo.assetNameList = assetNameMap.get(value) || []
+}
+
+/**
+ * 点击确认按钮
+ */
+const confirmClick = () => {
+  formRef.value.validate().then(async () => {
+    await assetStore.handleAssetApi(assetStore.currentAssetRecord)
+    history.back()
+  })
+}
+
+const cancelClick = () => {
+  history.back()
+}
+
+const deleteClick = () => {
+  commonElMessageBox('是否确认删除该资产内容?').then(async () => {
+    assetStore.assetApiType = 'DELETE'
+    await assetStore.handleAssetApi(assetStore.currentAssetRecord)
+    history.back()
+  })
+}
+</script>
+
+<style scoped lang="scss">
+.mobile-asset-detail {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+
+  .button-container {
+    align-self: center;
+  }
+}
+</style>

src/views/mobile-home/asset/list.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="mobile-asset-list common-mobile-view">
+    <div class="total-asset">
+      <span class="title">总资产</span>
+      <span class="value">{{ formatAmount(assetStore.totalAsset) }}</span>
+    </div>
+
+    <asset-query />
+
+    <el-empty v-if="assetStore.assetRecordList.length === 0" />
+
+    <div v-else class="asset-list">
+      <asset-card v-for="(item, index) in assetStore.assetList"
+                  :key="index" :item="item"/>
+    </div>
+
+    <draggable-button @click="addClick"/>
+  </div>
+</template>
+
+<script setup lang="ts">
+import AssetQuery from '@/components/Home/Asset/AssetQuery.vue'
+import AssetCard from '@/components/Home/Asset/AssetCard.vue'
+import DraggableButton from '@/components/Mobile/DraggableButton.vue'
+import { useAssetStore } from '@/store/asset.ts'
+import { onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { formatAmount } from 'vue3-common/utils/numberUtil'
+
+const assetStore = useAssetStore()
+const router = useRouter()
+
+onMounted(async () => {
+  await assetStore.queryAssetList()
+})
+
+const addClick = () => {
+  assetStore.assetApiType = 'ADD'
+  assetStore.currentAssetRecord = assetStore.getEmptyAsset()
+  router.push({ name: 'MobileHomeAssetDetailId', params: { id: 0 } })
+}
+</script>
+
+<style lang="scss">
+.mobile-asset-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+
+  .total-asset {
+    align-self: center;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+
+    .title {
+      font-size: 1.5rem;
+    }
+
+    .value {
+      font-weight: bold;
+      font-size: 1.8rem;
+      color: var(--el-color-primary);
+    }
+  }
+
+  .asset-list {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+}
+</style>

src/views/mobile-home/bill/chart.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="mobile-bill-view common-mobile-view">
+    <bill-query />
+
+    <el-date-picker v-if="billStore.billDateType === 'month'"
+                    v-model="billStore.billQueryForm.billMonth"
+                    type="month" :editable="false" style="width: 120px;"
+                    @change="billStore.refreshInfo()"/>
+
+    <el-date-picker v-if="billStore.billDateType === 'year'"
+                    v-model="billStore.billQueryForm.billYear"
+                    type="year" :editable="false" style="width: 120px;"
+                    @change="billStore.refreshInfo()"/>
+
+    <bill-stats />
+    <bill-chart />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import BillQuery from '@/components/Home/Bill/BillQuery.vue'
+import BillStats from '@/components/Home/Bill/BillStats.vue'
+import BillChart from '@/components/Home/Bill/BillChart.vue'
+import { onMounted } from 'vue'
+import { useBillStore } from '@/store/bill.ts'
+
+const billStore = useBillStore()
+
+onMounted(async () => {
+  await billStore.refreshInfo()
+})
+</script>
+
+<style lang="scss">
+@use "@/styles/home/bill.mobile.module.scss";
+</style>

src/views/mobile-home/bill/data.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="mobile-bill-view common-mobile-view">
+    <bill-query/>
+    <bill-daily-list v-if="billStore.billDateType === 'year'"/>
+    <bill-calendar v-if="billStore.billDateType === 'month'" />
+
+    <el-button type="primary" :icon="Plus" circle size="large"
+               @click="addNewBillRecordClick" class="add-new" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import BillQuery from '@/components/Home/Bill/BillQuery.vue'
+import BillCalendar from '@/components/Home/Bill/BillCalendar.vue'
+import BillDailyList from '@/components/Home/Bill/BillDailyList.vue'
+import { onMounted } from 'vue'
+import { useBillStore } from '@/store/bill.ts'
+import { Plus } from '@element-plus/icons-vue'
+import { useRouter } from 'vue-router'
+
+const billStore = useBillStore()
+const router = useRouter()
+
+onMounted(async () => {
+  await billStore.refreshInfo()
+})
+
+const addNewBillRecordClick = () => {
+  billStore.billApiType = 'ADD'
+  billStore.currentBillRecord = billStore.getEmptyBillRecord()
+  router.push({ name: 'MobileHomeBillDetailId', params: { id: 0 } })
+}
+</script>
+
+<style lang="scss">
+@use "@/styles/home/bill.mobile.module.scss";
+</style>

src/views/mobile-home/bill/detail[id].vue

@@ -0,0 +1,243 @@
+<template>
+  <div class="bill-detail-mobile common-mobile-view">
+    <el-form ref="formRef" :model="billStore.currentBillRecord"
+             :rules="rules" label-width="80px">
+      <el-form-item label="账本类型" prop="bookName">
+        <el-radio-group v-model="billStore.currentBillRecord.bookName"
+                        @change="changeBillBookNameEvent">
+          <el-radio v-for="(item, index) in billStore.billBookList"
+                    :value="item.name" :key="index">
+            <template #default>
+              <i :class="item.icon" :style="{color: item.color}"/>
+              <span style="margin-left: 5px;">{{ item.name }}</span>
+            </template>
+          </el-radio>
+        </el-radio-group>
+      </el-form-item>
+
+      <el-form-item label="账单类别" prop="type">
+        <el-radio-group v-model="billStore.currentBillRecord.type"
+                        @change="changeBillCategoryEvent">
+          <el-radio v-for="(item, index) in billInfo.billTypeList"
+                    :value="item" :key="index">
+            {{ getBillTypeName(item) }}
+          </el-radio>
+        </el-radio-group>
+      </el-form-item>
+
+      <el-form-item label="账单分类" prop="category">
+        <el-radio-group v-model="billStore.currentBillRecord.category">
+          <el-radio v-for="(item, index) in billInfo.billCategoryList"
+                    :value="item.name" :key="index">
+            <template #default>
+              <i :class="item.icon" :style="{color: item.color}"/>
+              <span style="margin-left: 5px;">{{ item.name }}</span>
+            </template>
+          </el-radio>
+        </el-radio-group>
+      </el-form-item>
+
+      <el-form-item label="账单时间" prop="date">
+        <el-date-picker
+            v-model="billStore.currentBillRecord.date"
+            type="date" :editable="false" placeholder="请选择账单时间"
+            value-format="YYYY-MM-DD"/>
+      </el-form-item>
+
+      <el-form-item label="账单地点" prop="location">
+        <el-input v-model="billStore.currentBillRecord.location" autocomplete="off"
+                  placeholder="请输入账单地点"  clearable
+                  show-word-limit maxlength="10">
+          <template #prefix>
+            <el-icon class="el-input__icon"><location/></el-icon>
+          </template>
+        </el-input>
+      </el-form-item>
+
+      <el-form-item label="账单账户" prop="payAccount">
+        <el-radio-group v-model="billStore.currentBillRecord.payAccount">
+          <el-radio v-for="(item, index) in billStore.billPayList"
+                    :value="item.name" :key="index">
+            <template #default>
+              <i :class="item.icon" :style="{color: item.color}"/>
+              <span style="margin-left: 5px;">{{ item.name }}</span>
+            </template>
+          </el-radio>
+        </el-radio-group>
+      </el-form-item>
+
+      <el-form-item label="账单金额" prop="amount">
+        <amount-input v-model="billStore.currentBillRecord.amount"/>
+      </el-form-item>
+
+      <el-form-item label="账单内容" prop="content">
+        <el-input v-model="billStore.currentBillRecord.content" autocomplete="off"
+                  placeholder="请输入账单内容"  clearable
+                  show-word-limit maxlength="10">
+          <template #prefix>
+            <el-icon class="el-input__icon"><document/></el-icon>
+          </template>
+        </el-input>
+      </el-form-item>
+
+      <el-form-item label="账单备注">
+        <el-input v-model="billStore.currentBillRecord.remark" type="textarea"
+                  placeholder="请输入账单备注" clearable
+                  :rows="5" show-word-limit maxlength="200">
+        </el-input>
+      </el-form-item>
+
+      <el-form-item label="账单图片">
+        <upload-image v-model="billStore.currentBillRecord.imageList"
+                      :service-url="fileServiceUrl"
+                      :service-file-root-path="serviceFileRootPath"
+                      :image-path="billStore.billImagePath"/>
+      </el-form-item>
+    </el-form>
+
+    <div class="button-container">
+      <el-button type="primary" @click="confirmClick">确认</el-button>
+      <el-button v-if="billStore.billApiType === 'UPDATE'"
+                 type="danger" @click="deleteClick">删除</el-button>
+      <el-button type="info" @click="cancelClick">取消</el-button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { UploadImage, AmountInput } from 'vue3-common'
+import { useBillStore } from '@/store/bill'
+import { useAppStore } from '@/store/app.ts'
+import { Location, Document } from '@element-plus/icons-vue'
+import { FormRules } from 'element-plus'
+import { billRecordRules } from '@/utils/element/elRules'
+import { nextTick, onMounted, reactive, ref } from 'vue'
+import { IBillCategory } from '@/types/bill'
+import { commonElMessageBox } from 'vue3-common/utils/elUtil'
+import { fileServiceUrl, serviceFileRootPath } from '@/utils'
+
+const formRef = ref()
+const rules = reactive<FormRules>(billRecordRules)
+const billStore = useBillStore()
+const appStore = useAppStore()
+
+const billInfo = reactive({
+  billTypeList: [] as string[],
+  billCategoryList: [] as IBillCategory[]
+})
+
+onMounted(async () => {
+  appStore.isShowMobileBack = true
+
+  await billStore.initBillInfo()
+  await initBillRecord()
+})
+
+const initBillRecord = async () => {
+  // 如果是新增账单 默认选择第一个账本
+  if (billStore.billApiType !== 'UPDATE') {
+    billStore.currentBillRecord.bookName = billStore.billBookList[0].name
+  }
+  getBillTypeByBookName(billStore.currentBillRecord.bookName)
+
+  // 如果是新增账单 默认选择一个类别
+  if (billStore.billApiType !== 'UPDATE') {
+    billStore.currentBillRecord.type = billInfo.billTypeList[0]
+  }
+  getBillCategory()
+
+  // 如果是新增账单 默认选择一个分类
+  if (billStore.billApiType !== 'UPDATE') {
+    billStore.currentBillRecord.category = billInfo.billCategoryList[0].name
+    billStore.currentBillRecord.payAccount = billStore.billPayList[0].name
+  }
+
+  await nextTick(() => {
+    formRef.value.clearValidate()
+  })
+}
+
+/**
+ * 获取账单类型名称
+ * @param type 账单类型
+ */
+const getBillTypeName = (type: string) => {
+  return type === 'expensive' ? '支出' : '收入'
+}
+
+/**
+ * 选择账本事件
+ * @param value 账本名称
+ */
+const changeBillBookNameEvent = (value: string) => {
+  getBillTypeByBookName(value)
+  billStore.currentBillRecord.type = billInfo.billTypeList[0]
+  getBillCategory()
+  billStore.currentBillRecord.category = billInfo.billCategoryList[0].name
+}
+
+/**
+ * 选择账单类别事件
+ */
+const changeBillCategoryEvent = () => {
+  getBillCategory()
+  billStore.currentBillRecord.category = billInfo.billCategoryList[0].name
+}
+
+/**
+ * 通过账本获取账单类型
+ * @param bookName 账本
+ */
+const getBillTypeByBookName = (bookName: string) => {
+  billInfo.billTypeList = []
+  billStore.billCategoryList.forEach((item) => {
+    if (item.bookName === bookName && !billInfo.billTypeList.includes(item.type)) {
+      billInfo.billTypeList.push(item.type)
+    }
+  })
+}
+
+/**
+ * 获取账单类别
+ */
+const getBillCategory = () => {
+  billInfo.billCategoryList = billStore.billCategoryList.filter((value) => {
+    return value.bookName === billStore.currentBillRecord.bookName
+        && value.type === billStore.currentBillRecord.type
+  })
+}
+
+/**
+ * 点击确认按钮
+ */
+const confirmClick = () => {
+  formRef.value.validate().then(async () => {
+    await billStore.handleBillApi(billStore.currentBillRecord)
+    history.back()
+  })
+}
+
+const cancelClick = () => {
+  history.back()
+}
+
+const deleteClick = () => {
+  commonElMessageBox('是否确认删除该账单内容?').then(async () => {
+    billStore.billApiType = 'DELETE'
+    await billStore.handleBillApi(billStore.currentBillRecord)
+    history.back()
+  })
+}
+</script>
+
+<style scoped lang="scss">
+.bill-detail-mobile {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+
+  .button-container {
+    align-self: center;
+  }
+}
+</style>

src/views/mobile-home/blog/archive.vue

@@ -0,0 +1,60 @@
+<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: 'MobileHomeBlogDetailId', params: { id: blogId } })
+}
+</script>
+
+<style scoped lang="scss">
+@use "@/styles/blog/blog.archive.module.scss";
+</style>

src/views/mobile-home/blog/category.vue

@@ -0,0 +1,44 @@
+<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: 'MobileHomeBlogCategoryName', params: { name } })
+}
+</script>
+
+<style scoped lang="scss">
+@use "@/styles/blog/blog.category.module.scss";
+</style>

src/views/mobile-home/blog/category[name].vue

@@ -0,0 +1,41 @@
+<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.scss";
+</style>

src/views/mobile-home/blog/detail[id].vue

@@ -0,0 +1,55 @@
+<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.scss";
+</style>

src/views/mobile-home/blog/overview.vue

@@ -0,0 +1,76 @@
+<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/Mobile/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: 'MobileHomeBlogDetailId', 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.scss";
+</style>

src/views/mobile-home/food/detail[id].vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="life-detail common-mobile-view">
+    <span class="title">{{ foodStore.currentFoodRecipe.name }}</span>
+
+    <section>
+      <div class="info-container">
+        <food-basic-data/>
+
+        <food-material-data/>
+
+        <food-step-data/>
+
+        <food-others-data/>
+      </div>
+
+      <div class="record-container card-item">
+        <food-record-data/>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useFoodStore } from '@/store/food.ts'
+import { useAppStore } from '@/store/app.ts'
+import { useRoute } from 'vue-router'
+import FoodBasicData from '@/components/Home/Food/Data/FoodBasicData.vue'
+import FoodMaterialData from '@/components/Home/Food/Data/FoodMaterialData.vue'
+import FoodStepData from '@/components/Home/Food/Data/FoodStepData.vue'
+import FoodOthersData from '@/components/Home/Food/Data/FoodOthersData.vue'
+import FoodRecordData from '@/components/Home/Food/Data/FoodRecordData.vue'
+import { onMounted } from 'vue'
+
+const foodStore = useFoodStore()
+const appStore = useAppStore()
+const route = useRoute()
+
+onMounted(() => {
+  appStore.isShowMobileBack = true
+  foodStore.queryFoodRecipe(route.params.id as number)
+})
+</script>
+
+<style lang="scss">
+@use "@/styles/home/life.detail.module.scss";
+</style>

src/views/mobile-home/food/recipe.vue

@@ -0,0 +1,58 @@
+<template>
+  <div ref="foodRecipeRef" class="mobile-food-view common-mobile-view">
+    <food-query />
+
+    <div class="food-list">
+      <el-empty v-if="foodStore.foodRecipeList.length === 0" description="暂无美食记录"/>
+
+      <div v-else class="list">
+        <food-card v-for="(item, index) in foodStore.foodRecipeList"
+                   :key="index" :food-item="item"/>
+      </div>
+    </div>
+
+    <arrive-bottom v-if="foodStore.isScrollEnd"/>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import FoodQuery from '@/components/Home/Food/FoodQuery.vue'
+import FoodCard from '@/components/Home/Food/FoodCard.vue'
+import ArriveBottom from '@/components/Mobile/ArriveButton.vue'
+import { useFoodStore } from '@/store/food.ts'
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+
+const foodRecipeRef = ref()
+const foodStore = useFoodStore()
+
+onMounted(async () => {
+  foodStore.pageInfo = {
+    currentPage: 1,
+    pageSize: 3,
+    totalSize: 1
+  }
+  foodStore.foodRecipeList = []
+  await foodStore.queryMobileFoodRecipeList()
+  foodRecipeRef.value.addEventListener('scroll', handleScroll)
+})
+
+onBeforeUnmount(() => {
+  foodRecipeRef.value.removeEventListener('scroll', handleScroll)
+})
+
+const handleScroll = () => {
+  const el = foodRecipeRef.value
+  if (el.scrollTop + el.clientHeight >= el.scrollHeight - 10) {
+    const { currentPage, pageSize, totalSize } = foodStore.pageInfo
+    foodStore.isScrollEnd = pageSize * currentPage > totalSize
+    if (!foodStore.isScrollEnd) {
+      foodStore.pageInfo.currentPage++
+      foodStore.queryMobileFoodRecipeList()
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+@use "@/styles/home/food.mobile.module.scss";
+</style>

src/views/mobile-home/food/record.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="mobile-food-view common-mobile-view">
+    <food-stats />
+
+    <food-calendar />
+
+    <draggable-button @click="addClick"/>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import FoodStats from '@/components/Home/Food/FoodStats.vue'
+import FoodCalendar from '@/components/Home/Food/FoodCalendar.vue'
+import DraggableButton from '@/components/Mobile/DraggableButton.vue'
+import { useRouter } from 'vue-router'
+import { useFoodStore } from '@/store/food.ts'
+import { onMounted } from 'vue'
+
+const foodStore = useFoodStore()
+const router = useRouter()
+
+onMounted(async () => {
+  await foodStore.refreshInfo()
+})
+
+const addClick = () => {
+  foodStore.foodRecordApiType = 'ADD'
+  foodStore.currentFoodRecord = foodStore.getEmptyFoodRecord()
+  router.push({ name: 'MobileHomeFoodRecordForm' })
+}
+</script>
+
+<style lang="scss">
+@use "@/styles/home/food.mobile.module.scss";
+</style>

src/views/mobile-home/food/recordForm.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="mobile-food-record-form common-mobile-view">
+    <el-form ref="formRef" :model="foodStore.currentFoodRecord"
+             :rules="rules" label-width="80">
+      <el-form-item label="菜谱名称" prop="name">
+        <el-select
+            v-model="foodStore.currentFoodRecord.name"
+            @focus="foodStore.queryFoodNameList()"
+            :disabled="foodStore.foodRecordApiType === 'UPDATE'"
+            placeholder="请选择菜谱名称">
+          <el-option
+              v-for="(item, index) in foodStore.foodNameList"
+              :key="index" :label="item" :value="item"
+          />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="完成时间" prop="date">
+        <el-date-picker
+            v-model="foodStore.currentFoodRecord.date"
+            type="date" :editable="false" placeholder="请选择完成时间"
+            value-format="YYYY-MM-DD"/>
+      </el-form-item>
+
+      <el-form-item label="完成人" prop="person">
+        <el-select
+            v-model="foodStore.currentFoodRecord.person"
+            placeholder="请选择完成人">
+          <el-option
+              v-for="(item, index) in ['哥哥', '宝宝']"
+              :key="index" :label="item" :value="item"
+          />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="图片">
+        <upload-image v-model="foodStore.currentFoodRecord.imageUrl"
+                      :service-url="fileServiceUrl"
+                      :image-limit="1"
+                      :service-file-root-path="serviceFileRootPath"
+                      :image-path="foodStore.foodImagePath"/>
+      </el-form-item>
+    </el-form>
+
+    <div class="button-container">
+      <el-button type="primary" @click="confirmClick">确认</el-button>
+      <el-button type="danger" @click="deleteClick">取消</el-button>
+      <el-button type="info" @click="cancelClick">取消</el-button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { UploadImage } from 'vue3-common'
+import { useFoodStore } from '@/store/food.ts'
+import { ref, reactive } from 'vue'
+import { FormRules } from 'element-plus'
+import { travelRecordRules } from '@/utils/element/elRules'
+import { fileServiceUrl, serviceFileRootPath } from '@/utils'
+import { commonElMessageBox } from 'vue3-common/utils/elUtil'
+
+const rules = reactive<FormRules>(travelRecordRules)
+
+const formRef = ref()
+const foodStore = useFoodStore()
+
+/**
+ * 点击确认按钮
+ */
+const confirmClick = () => {
+  formRef.value.validate().then(() => {
+    foodStore.handleFoodRecordApi(foodStore.currentFoodRecord)
+    history.back()
+  })
+}
+
+const cancelClick = () => {
+  history.back()
+}
+
+const deleteClick = () => {
+  commonElMessageBox('是否确认删除该记录?').then(() => {
+    foodStore.foodRecordApiType = 'DELETE'
+    foodStore.handleTravelRecordApi(foodStore.currentFoodRecord)
+    history.back()
+  })
+}
+</script>
+
+<style lang="scss">
+.mobile-food-record-form {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+
+  .button-container {
+    align-self: center;
+  }
+}</style>

src/views/mobile-home/journal/detail[id].vue

@@ -0,0 +1,175 @@
+<template>
+  <div class="mobile-journal-detail common-mobile-view">
+    <el-form ref="formRef" :model="journalStore.currentJournal"
+             :rules="rules" label-width="60px">
+      <el-form-item label="日期" prop="date">
+        <el-date-picker
+            v-model="journalStore.currentJournal.date"
+            type="datetime" :editable="false" placeholder="请选择日期"
+            value-format="YYYY-MM-DD HH:mm:ss"/>
+      </el-form-item>
+
+      <el-form-item label="内容" prop="content">
+        <el-input
+            v-model="journalStore.currentJournal.content"
+            :rows="5" type="textarea"
+            show-word-limit :maxlength="200"
+            placeholder="请输入日记内容"
+        />
+      </el-form-item>
+
+      <el-form-item label="地址">
+        <el-input
+            v-model="journalStore.currentJournal.location"
+            placeholder="请输入日记地址"
+            show-word-limit :maxlength="10"
+        >
+          <template #prefix>
+            <el-icon class="el-input__icon">
+              <location/>
+            </el-icon>
+          </template>
+        </el-input>
+      </el-form-item>
+
+      <el-form-item label="分类">
+        <el-radio-group v-model="journalStore.currentJournal.category"
+                        placeholder="请选择分类" clearable>
+          <el-radio
+              v-for="(item, index) in categoryTypeList"
+              :key="index" :label="item" :value="item"
+          />
+        </el-radio-group>
+      </el-form-item>
+
+      <el-form-item label="天气">
+        <el-radio-group v-model="journalStore.currentJournal.weather"
+                        placeholder="请选择天气" clearable>
+          <el-radio
+              v-for="(item, index) in weatherTypeList"
+              :key="index" :value="item.value"
+          >
+            <template #default>
+              <svg-icon :name="`weather-${item.value}`"/>
+            </template>
+          </el-radio>
+        </el-radio-group>
+      </el-form-item>
+
+      <el-form-item label="心情">
+        <el-radio-group v-model="journalStore.currentJournal.mood"
+                        placeholder="请选择心情" clearable>
+          <el-radio
+              v-for="(item, index) in moodTypeList"
+              :key="index" :value="item" :label="item"
+          />
+        </el-radio-group>
+      </el-form-item>
+
+      <el-form-item label="图片">
+        <upload-image v-model="journalStore.currentJournal.imageUrl"
+                      :service-url="fileServiceUrl"
+                      :image-limit="1"
+                      :service-file-root-path="serviceFileRootPath"
+                      :image-path="journalStore.journalImagePath"/>
+      </el-form-item>
+
+      <el-form-item label="视频">
+        <upload-video v-model="journalStore.currentJournal.videoUrl"
+                      :service-url="fileServiceUrl"
+                      :image-limit="1"
+                      :service-file-root-path="serviceFileRootPath"
+                      :video-path="journalStore.journalVideoPath"
+                      style="width: 100%;"/>
+      </el-form-item>
+    </el-form>
+
+    <div class="button-container">
+      <el-button type="primary" @click="confirmClick">确认</el-button>
+      <el-button v-if="journalStore.journalApiType === 'UPDATE'"
+                 type="danger" @click="deleteClick">删除
+      </el-button>
+      <el-button type="info" @click="cancelClick">取消</el-button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { Location } from '@element-plus/icons-vue'
+import { useJournalStore } from '@/store/journal.ts'
+import { useAppStore } from '@/store/app.ts'
+import { FormRules } from 'element-plus'
+import { journalRules } from '@/utils/element/elRules'
+import { onMounted, reactive, ref } from 'vue'
+import { commonElMessageBox } from 'vue3-common/utils/elUtil'
+import { fileServiceUrl, serviceFileRootPath } from '@/utils'
+import { UploadImage, UploadVideo, SvgIcon } from 'vue3-common'
+
+const formRef = ref()
+const rules = reactive<FormRules>(journalRules)
+const journalStore = useJournalStore()
+const appStore = useAppStore()
+
+const categoryTypeList = ['生活', '工作', '其他']
+
+const weatherTypeList = [{
+  value: 'sunny',
+  label: '晴'
+}, {
+  value: 'rainy',
+  label: '雨'
+}, {
+  value: 'snowy',
+  label: '雪'
+}, {
+  value: 'cloudy',
+  label: '阴'
+}]
+
+const moodTypeList = ['😀', '🙁', '😡']
+
+onMounted(async () => {
+  appStore.isShowMobileBack = true
+})
+
+/**
+ * 点击确认按钮
+ */
+const confirmClick = () => {
+  formRef.value.validate().then(async () => {
+    await journalStore.handleJournalApi(journalStore.currentJournal)
+    history.back()
+  })
+}
+
+const cancelClick = () => {
+  history.back()
+}
+
+const deleteClick = () => {
+  commonElMessageBox('是否确认删除该日记内容?').then(async () => {
+    journalStore.journalApiType = 'DELETE'
+    await journalStore.handleJournalApi(journalStore.currentJournal)
+    history.back()
+  })
+}
+</script>
+
+<style lang="scss">
+.mobile-journal-detail {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+
+  .el-radio {
+    .el-radio__label {
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  .button-container {
+    align-self: center;
+  }
+}
+</style>

src/views/mobile-home/journal/record.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="mobile-journal-view common-mobile-view">
+    <journal-calendar />
+
+    <draggable-button @click="addClick"/>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import JournalCalendar from '@/components/Home/Journal/JournalCalendar.vue'
+import DraggableButton from '@/components/Mobile/DraggableButton.vue'
+import { useJournalStore } from '@/store/journal.ts'
+import { useRouter } from 'vue-router'
+import { onMounted } from 'vue'
+import { getCurrentMonth, getStartEndDate } from 'vue3-common/utils/dateUtil'
+
+const journalStore = useJournalStore()
+const router = useRouter()
+
+onMounted(async () => {
+  const dateInfo = getStartEndDate(getCurrentMonth(), 'month')
+  journalStore.queryInfo.startDate = dateInfo[0]
+  journalStore.queryInfo.endDate = dateInfo[1]
+  await journalStore.refreshInfo()
+})
+
+const addClick = () => {
+  journalStore.journalApiType = 'ADD'
+  journalStore.currentJournal = journalStore.getEmptyJournal()
+  router.push({ name: 'MobileHomeJournalDetailId', params: { id: 0 } })
+}
+</script>
+
+<style lang="scss">
+.mobile-journal-view {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+</style>

src/views/mobile-home/journal/timeline.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="mobile-journal-timeline common-mobile-view">
+    <el-date-picker
+        v-model="currentYear"
+        type="year" placeholder="请选择年份"
+        style="width: 100px"
+        @change="changeDateEvent"
+    />
+
+    <el-timeline v-if="journalStore.journalList.length > 0" class="journal-timeline">
+      <el-timeline-item v-for="(item, index) in journalStore.journalList"
+                        :key="index" :timestamp="formatDate(item.date)" placement="top">
+        <journal-card :item="item" />
+      </el-timeline-item>
+    </el-timeline>
+
+    <el-empty v-else description="暂无日记"/>
+  </div>
+</template>
+
+<script setup lang="ts">
+import JournalCard from '@/components/Home/Journal/JournalCard.vue'
+import { useJournalStore } from '@/store/journal.ts'
+import { onMounted, ref } from 'vue'
+import { formatDate, getCurrentYear, getStartEndDate } from 'vue3-common/utils/dateUtil'
+
+const currentYear = ref(new Date())
+const journalStore = useJournalStore()
+
+onMounted(async () => {
+  const dateInfo = getStartEndDate(getCurrentYear(), 'year')
+  journalStore.queryInfo.startDate = dateInfo[0]
+  journalStore.queryInfo.endDate = dateInfo[1]
+  await journalStore.refreshInfo()
+})
+
+const changeDateEvent = async (value: Date) => {
+  const dateInfo = getStartEndDate(value, 'year')
+  journalStore.queryInfo.startDate = dateInfo[0]
+  journalStore.queryInfo.endDate = dateInfo[1]
+  await journalStore.refreshInfo()
+}
+</script>
+
+<style lang="scss">
+.mobile-journal-timeline {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  .journal-timeline {
+    padding: 10px;
+  }
+}
+</style>

src/views/mobile-home/kpi/detail[id].vue

@@ -0,0 +1,140 @@
+<template>
+  <div class="mobile-kpi-detail common-mobile-view">
+    <el-form ref="formRef" :model="kpiStore.currentKpi"
+             :rules="rules" label-width="60px">
+      <el-form-item label="日期" prop="date">
+        <el-date-picker
+            v-model="kpiStore.currentKpi.date"
+            type="date" :editable="false" placeholder="请选择日期"
+            value-format="YYYY-MM-DD"/>
+      </el-form-item>
+
+      <el-form-item label="患者" prop="patientName">
+        <el-select
+            v-model="kpiStore.currentKpi.patientName"
+            filterable allow-create
+            :reserve-keyword="false" placeholder="请输入或选择患者"
+        >
+          <el-option
+              v-for="(item, index) in patientList"
+              :key="index" :label="item" :value="item"
+          />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="项目" prop="project">
+        <el-select
+            v-model="kpiStore.currentKpi.project"
+            filterable allow-create
+            :reserve-keyword="false" placeholder="请输入或选择项目"
+            @change="changeProjectEvent"
+        >
+          <el-option
+              v-for="(item, index) in projectList"
+              :key="index" :label="item.name" :value="item.name"
+          />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="价格" prop="price">
+        <el-input-number v-model="kpiStore.currentKpi.price"
+                         :min="0" :max="100"/>
+      </el-form-item>
+    </el-form>
+
+    <div class="button-container">
+      <el-button type="primary" @click="confirmClick">确认</el-button>
+      <el-button v-if="kpiStore.kpiApiType === 'UPDATE'"
+                 type="danger" @click="deleteClick">删除
+      </el-button>
+      <el-button type="info" @click="cancelClick">取消</el-button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useKpiStore } from '@/store/kpi.ts'
+import { useAppStore } from '@/store/app.ts'
+import { FormRules } from 'element-plus'
+import { kpiRules } from '@/utils/element/elRules'
+import { onMounted, reactive, ref } from 'vue'
+import { commonElMessageBox } from 'vue3-common/utils/elUtil'
+
+const formRef = ref()
+const rules = reactive<FormRules>(kpiRules)
+const kpiStore = useKpiStore()
+const appStore = useAppStore()
+
+const patientList = ['尹照亮', '熊溧生', '严长省']
+
+const projectList = [{
+  name: '普通针刺',
+  price: 34
+},
+{
+  name: '手指点穴',
+  price: 22
+},
+{
+  name: '红外线理疗（15分钟）',
+  price: 7
+},
+{
+  name: '红外线理疗（30分钟）',
+  price: 14
+},
+{
+  name: '四肢疾患推拿',
+  price: 42
+}]
+
+onMounted(async () => {
+  appStore.isShowMobileBack = true
+})
+
+const changeProjectEvent = (value: string) => {
+  const project = projectList.find((item) => item.name === value)
+  kpiStore.currentKpi.price = project ? project.price : 0
+}
+
+/**
+ * 点击确认按钮
+ */
+const confirmClick = () => {
+  formRef.value.validate().then(async () => {
+    await kpiStore.handleKpiApi(kpiStore.currentKpi)
+    history.back()
+  })
+}
+
+const cancelClick = () => {
+  history.back()
+}
+
+const deleteClick = () => {
+  commonElMessageBox('是否确认删除该绩效内容?').then(async () => {
+    kpiStore.kpiApiType = 'DELETE'
+    await kpiStore.handleKpiApi(kpiStore.currentKpi)
+    history.back()
+  })
+}
+</script>
+
+<style lang="scss">
+.mobile-kpi-detail {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+
+  .el-radio {
+    .el-radio__label {
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  .button-container {
+    align-self: center;
+  }
+}
+</style>

src/views/mobile-home/kpi/record.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="mobile-kpi-view common-mobile-view">
+    <div class="total-kpi">
+      <span class="title">当月总绩效</span>
+      <span class="value">{{ totalPrice }} 元</span>
+    </div>
+
+    <kpi-calendar />
+
+    <draggable-button @click="addClick"/>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import KpiCalendar from '@/components/Home/kpi/KpiCalendar.vue'
+import DraggableButton from '@/components/Mobile/DraggableButton.vue'
+import { useKpiStore } from '@/store/kpi.ts'
+import { useRouter } from 'vue-router'
+import { computed, onMounted } from 'vue'
+import { getCurrentMonth, getStartEndDate } from 'vue3-common/utils/dateUtil'
+
+const kpiStore = useKpiStore()
+const router = useRouter()
+
+onMounted(async () => {
+  const dateInfo = getStartEndDate(getCurrentMonth(), 'month')
+  kpiStore.queryInfo.startDate = dateInfo[0]
+  kpiStore.queryInfo.endDate = dateInfo[1]
+  await kpiStore.refreshInfo()
+})
+
+const totalPrice = computed(() => {
+  return kpiStore.kpiList.reduce((acc, item) => acc + item.price, 0)
+})
+
+const addClick = () => {
+  kpiStore.kpiApiType = 'ADD'
+  kpiStore.currentKpi = kpiStore.getEmptyKpi()
+  router.push({ name: 'MobileHomeKpiDetailId', params: { id: 0 } })
+}
+</script>
+
+<style lang="scss">
+.mobile-kpi-view {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+
+  .total-kpi {
+    align-self: center;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+
+    .title {
+      font-size: 1.5rem;
+    }
+
+    .value {
+      font-weight: bold;
+      font-size: 1.8rem;
+      color: var(--el-color-primary);
+    }
+  }
+}
+</style>

src/views/mobile-home/ledger/detail[id].vue

@@ -0,0 +1,127 @@
+<template>
+  <div class="mobile-ledger-detail common-mobile-view">
+    <el-form ref="formRef" :model="ledgerStore.currentLedgerRecord"
+             :rules="rules" label-width="auto">
+      <el-form-item label="账本" prop="book">
+        <el-input v-model="ledgerStore.currentLedgerRecord.book"
+                  placeholder="请输入账本名称" clearable
+                  show-word-limit :maxlength="10"/>
+      </el-form-item>
+
+      <el-form-item label="类别" prop="category">
+        <el-input v-model="ledgerStore.currentLedgerRecord.category"
+                  placeholder="请输入类别" clearable
+                  show-word-limit :maxlength="10"/>
+      </el-form-item>
+
+      <el-form-item label="内容" prop="content">
+        <el-input v-model="ledgerStore.currentLedgerRecord.content"
+                  placeholder="请输入内容" clearable
+                  show-word-limit :maxlength="10"/>
+      </el-form-item>
+
+      <el-form-item label="金额" prop="price">
+        <amount-input v-model="ledgerStore.currentLedgerRecord.price"/>
+      </el-form-item>
+
+      <el-form-item label="数量" prop="number">
+        <el-input-number v-model="ledgerStore.currentLedgerRecord.number"/>
+      </el-form-item>
+
+      <el-form-item label="单位" prop="unit">
+        <el-input v-model="ledgerStore.currentLedgerRecord.unit"
+                  placeholder="请输入单位" clearable
+                  show-word-limit :maxlength="5"/>
+      </el-form-item>
+
+      <el-form-item label="付款人" prop="payer">
+        <el-input v-model="ledgerStore.currentLedgerRecord.payer"
+                  placeholder="请输入付款人" clearable
+                  show-word-limit :maxlength="10"/>
+      </el-form-item>
+
+      <el-form-item label="供应商" prop="provider">
+        <el-input v-model="ledgerStore.currentLedgerRecord.provider"
+                  placeholder="请输入供应商" clearable
+                  show-word-limit :maxlength="10"/>
+      </el-form-item>
+
+      <el-form-item label="图片" prop="provider">
+        <upload-image v-model="ledgerStore.currentLedgerRecord.imageUrl"
+                      :image-limit="1"
+                      :service-url="fileServiceUrl"
+                      :service-file-root-path="serviceFileRootPath"
+                      :image-path="ledgerStore.ledgerImagePath"/>
+      </el-form-item>
+
+      <el-form-item label="备注">
+        <el-input v-model="ledgerStore.currentLedgerRecord.remark" autocomplete="off"
+                  placeholder="请输入备注" clearable
+                  show-word-limit maxlength="10">
+        </el-input>
+      </el-form-item>
+    </el-form>
+
+    <div class="button-container">
+      <el-button type="primary" @click="confirmClick">确认</el-button>
+      <el-button v-if="ledgerStore.ledgerApiType === 'UPDATE'"
+                 type="danger" @click="deleteClick">删除</el-button>
+      <el-button type="info" @click="cancelClick">取消</el-button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { UploadImage } from 'vue3-common'
+import { AmountInput } from 'vue3-common'
+import { useLedgerStore } from '@/store/ledger'
+import { useAppStore } from '@/store/app.ts'
+import { FormRules } from 'element-plus'
+import { ledgerRules } from '@/utils/element/elRules'
+import { onMounted, reactive, ref } from 'vue'
+import { commonElMessageBox } from 'vue3-common/utils/elUtil'
+import { fileServiceUrl, serviceFileRootPath } from '@/utils'
+
+const formRef = ref()
+const rules = reactive<FormRules>(ledgerRules)
+const ledgerStore = useLedgerStore()
+const appStore = useAppStore()
+
+onMounted(async () => {
+  appStore.isShowMobileBack = true
+})
+
+/**
+ * 点击确认按钮
+ */
+const confirmClick = () => {
+  formRef.value.validate().then(async () => {
+    await ledgerStore.handleLedgerApi(ledgerStore.currentLedgerRecord)
+    history.back()
+  })
+}
+
+const cancelClick = () => {
+  history.back()
+}
+
+const deleteClick = () => {
+  commonElMessageBox('是否确认删除该账本内容?').then(async () => {
+    ledgerStore.ledgerApiType = 'DELETE'
+    await ledgerStore.handleLedgerApi(ledgerStore.currentLedgerRecord)
+    history.back()
+  })
+}
+</script>
+
+<style scoped lang="scss">
+.mobile-ledger-detail {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+
+  .button-container {
+    align-self: center;
+  }
+}
+</style>

src/views/mobile-home/ledger/list.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="mobile-ledger-list common-mobile-view">
+    <div class="total-ledger">
+      <span class="title">账本总金额</span>
+      <span class="value">{{ formatAmount(ledgerStore.ledgerAmount) }}</span>
+    </div>
+
+    <ledger-query />
+
+    <el-empty v-if="ledgerStore.ledgerRecordList.length === 0" />
+
+    <div v-else class="ledger-list">
+      <ledger-card v-for="(item, index) in ledgerStore.ledgerList"
+                  :key="index" :item="item"/>
+    </div>
+
+    <draggable-button @click="addClick"/>
+  </div>
+</template>
+
+<script setup lang="ts">
+import LedgerQuery from '@/components/Home/Ledger/LedgerQuery.vue'
+import LedgerCard from '@/components/Home/Ledger/LedgerCard.vue'
+import DraggableButton from '@/components/Mobile/DraggableButton.vue'
+import { useLedgerStore } from '@/store/ledger.ts'
+import { onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { formatAmount } from 'vue3-common/utils/numberUtil'
+
+const ledgerStore = useLedgerStore()
+const router = useRouter()
+
+onMounted(async () => {
+  // await ledgerStore.queryLedgerList()
+})
+
+const addClick = () => {
+  ledgerStore.ledgerApiType = 'ADD'
+  ledgerStore.currentLedgerRecord = ledgerStore.getEmptyLedgerRecord()
+  ledgerStore.currentLedgerRecord.book = ledgerStore.queryInfo.book
+  router.push({ name: 'MobileHomeLedgerDetailId', params: { id: 0 } })
+}
+</script>
+
+<style lang="scss">
+.mobile-ledger-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+
+  .total-ledger {
+    align-self: center;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+
+    .title {
+      font-size: 1.5rem;
+    }
+
+    .value {
+      font-weight: bold;
+      font-size: 1.8rem;
+      color: var(--el-color-primary);
+    }
+  }
+
+  .ledger-list {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+}
+</style>

src/views/mobile-home/meta.ts

@@ -0,0 +1,260 @@
+import type { IRouteMetaConfig } from 'vue3-common/types'
+
+export const mobileHomeMeta: IRouteMetaConfig = {
+  '/mobile-home/blog': {
+    title: '博客记录',
+    icon: '',
+    order: 1,
+    redirect: '/mobile-home/blog/overview'
+  },
+  '/mobile-home/blog/overview': {
+    title: '博客列表',
+    icon: ''
+  },
+  '/mobile-home/blog/category': {
+    title: '博客分类',
+    icon: ''
+  },
+  '/mobile-home/blog/category/:name': {
+    title: '博客分类',
+    icon: ''
+  },
+  '/mobile-home/blog/archive': {
+    title: '博客归档',
+    icon: ''
+  },
+  '/mobile-home/blog/detail/:id': {
+    title: '博客内容',
+    icon: ''
+  },
+  '/mobile-home/bill': {
+    title: '收支记录',
+    icon: 'home-bill',
+    order: 2,
+    redirect: '/mobile-home/bill/data'
+  },
+  '/mobile-home/bill/data': {
+    title: '账单数据',
+    icon: ''
+  },
+  '/mobile-home/bill/chart': {
+    title: '账单图表',
+    icon: ''
+  },
+  '/mobile-home/bill/detail/:id': {
+    title: '账单内容',
+    icon: ''
+  },
+  '/mobile-home/food': {
+    title: '美食记录',
+    icon: 'home-food',
+    order: 3,
+    redirect: '/mobile-home/food/recipe'
+  },
+  '/mobile-home/food/recipe': {
+    title: '美食菜谱',
+    icon: ''
+  },
+  '/mobile-home/food/record': {
+    title: '美食记录',
+    icon: ''
+  },
+  '/mobile-home/food/detail/id': {
+    title: '菜谱内容',
+    icon: ''
+  },
+  '/mobile-home/food/recordForm': {
+    title: '记录表单',
+    icon: ''
+  },
+  '/mobile-home/travel': {
+    title: '旅行记录',
+    icon: 'home-food',
+    order: 4,
+    redirect: '/mobile-home/travel/spot'
+  },
+  '/mobile-home/travel/spot': {
+    title: '旅行景点',
+    icon: ''
+  },
+  '/mobile-home/travel/record': {
+    title: '旅行记录',
+    icon: ''
+  },
+  '/mobile-home/travel/detail/id': {
+    title: '旅行内容',
+    icon: ''
+  },
+  '/mobile-home/travel/spotForm': {
+    title: '景点表单',
+    icon: ''
+  },
+  '/mobile-home/travel/recordForm': {
+    title: '记录表单',
+    icon: ''
+  },
+  '/mobile-home/plan': {
+    title: '时光日程',
+    icon: 'home-calendar',
+    order: 5,
+    redirect: '/mobile-home/plan/calendar'
+  },
+  '/mobile-home/plan/calendar': {
+    title: '日程安排',
+    icon: ''
+  },
+  '/mobile-home/plan/list': {
+    title: '日程清单',
+    icon: ''
+  },
+  '/mobile-home/plan/detail/id': {
+    title: '日程内容',
+    icon: ''
+  },
+  '/mobile-home/anniversary': {
+    title: '纪念日',
+    icon: 'home-anniversary',
+    order: 6,
+    redirect: '/mobile-home/anniversary/list'
+  },
+  '/mobile-home/anniversary/list': {
+    title: '纪念日',
+    icon: ''
+  },
+  '/mobile-home/anniversary/category': {
+    title: '分类',
+    icon: ''
+  },
+  '/mobile-home/anniversary/detail/id': {
+    title: '纪念日内容',
+    icon: ''
+  },
+  '/mobile-home/period': {
+    title: '月经记录',
+    icon: 'home-period',
+    order: 7,
+    redirect: '/mobile-home/period/calendar'
+  },
+  '/mobile-home/period/calendar': {
+    title: '记录',
+    icon: ''
+  },
+  '/mobile-home/period/setting': {
+    title: '设置',
+    icon: ''
+  },
+  '/mobile-home/product': {
+    title: '物品记录',
+    icon: 'home-product',
+    order: 8,
+    redirect: '/mobile-home/product/list'
+  },
+  '/mobile-home/product/list': {
+    title: '清单',
+    icon: ''
+  },
+  '/mobile-home/product/detail/id': {
+    title: '内容',
+    icon: ''
+  },
+  '/mobile-home/journal': {
+    title: '日记',
+    icon: 'home-product',
+    order: 9,
+    redirect: '/mobile-home/journal/record'
+  },
+  '/mobile-home/journal/record': {
+    title: '清单',
+    icon: ''
+  },
+  '/mobile-home/journal/detail': {
+    title: '内容',
+    icon: ''
+  },
+  '/mobile-home/journal/timeline': {
+    title: '时间轴',
+    icon: ''
+  },
+  '/mobile-home/kpi': {
+    title: '绩效',
+    icon: 'home-kpi',
+    order: 10,
+    redirect: '/mobile-home/kpi/record'
+  },
+  '/mobile-home/kpi/record': {
+    title: '记录',
+    icon: ''
+  },
+  '/mobile-home/pki/detail/:id': {
+    title: '内容',
+    icon: ''
+  },
+  '/mobile-home/server': {
+    title: '服务',
+    icon: 'home-server',
+    order: 11,
+    redirect: '/mobile-home/server/list'
+  },
+  '/mobile-home/server/monitor': {
+    title: '监控',
+    icon: ''
+  },
+  '/mobile-home/server/file': {
+    title: '文件',
+    icon: ''
+  },
+  '/mobile-home/server/preview/:url': {
+    title: '预览',
+    icon: ''
+  },
+  '/mobile-home/asset': {
+    title: '资产',
+    icon: 'home-asset',
+    order: 12,
+    redirect: '/mobile-home/asset/list'
+  },
+  '/mobile-home/asset/list': {
+    title: '清单',
+    icon: ''
+  },
+  '/mobile-home/asset/detail/id': {
+    title: '内容',
+    icon: ''
+  },
+  '/mobile-home/ledger': {
+    title: '账本',
+    icon: 'home-ledger',
+    order: 13,
+    redirect: '/mobile-home/ledger/list'
+  },
+  '/mobile-home/ledger/list': {
+    title: '清单',
+    icon: ''
+  },
+  '/mobile-home/ledger/detail/id': {
+    title: '内容',
+    icon: ''
+  },
+  '/mobile-home/profile': {
+    title: '个人信息',
+    icon: '',
+    order: 14,
+    hidden: true,
+    redirect: '/mobile-home/profile/index'
+  },
+  '/mobile-home/profile/index': {
+    title: '个人信息',
+    icon: '',
+    hidden: true
+  },
+  '/mobile-home/profile/info': {
+    title: '信息',
+    icon: '',
+    hidden: true
+  },
+  '/mobile-home/profile/password': {
+    title: '密码',
+    icon: '',
+    hidden: true
+  }
+}

src/views/mobile-home/period/calendar.vue

@@ -0,0 +1,186 @@
+<template>
+  <div class="mobile-period-view common-mobile-view">
+    <v-calendar ref="calendarRef" :attributes='dailyInfo.attrs'
+                @dayclick="dateClick" @did-move="changeMonthClick"
+                :is-dark="appStore.isDark"
+                class="period-calendar card-item"/>
+    <period-legend />
+
+    <period-form />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import PeriodLegend from '@/components/Home/Period/PeriodLegend.vue'
+import PeriodForm from '@/components/Home/Period/PeriodForm.vue'
+import { CalendarDay } from 'v-calendar/dist/types/src/utils/page'
+import { formatDate, getNextDate } from 'vue3-common/utils/dateUtil'
+import { onMounted, reactive, watch } from 'vue'
+import { usePeriodStore } from '@/store/period.ts'
+import { useAppStore } from '@/store/app'
+import { IPeriodDay } from '@/types/period'
+import dayjs, { Dayjs } from 'dayjs'
+
+const periodStore = usePeriodStore()
+const appStore = useAppStore()
+
+const dailyInfo = reactive({
+  calendarDate: '',
+  menstruateDateList: [],
+  sexDateList: [],
+  attrs: [] as any[]
+})
+
+watch(() => periodStore.isRefresh, async () => {
+  dailyInfo.menstruateDateList = []
+  dailyInfo.sexDateList = []
+  dailyInfo.attrs = []
+  updatePeriodDay()
+
+  if (periodStore.periodSetting.isCalculate) {
+    const { cycleLength, duration } = periodStore.periodSetting
+    // 如果当月存在月经期
+    if (dailyInfo.menstruateDateList[0]) {
+      calculatePeriodDay(dailyInfo.menstruateDateList[0], cycleLength, duration)
+    } else {
+      // 否则获取上个月的
+      await periodStore.getMenstruateFirstDate(getLastMonth(periodStore.queryInfo.month))
+      const predictMenstruateDate = getNextDate(periodStore.menstruateFirstDate, cycleLength, 'days')
+
+      if (predictMenstruateDate) {
+        calculatePeriodDay(predictMenstruateDate, cycleLength, duration)
+      }
+    }
+  }
+})
+
+onMounted(async () => {
+  await periodStore.refreshInfo()
+  periodStore.currentPeriodDay = periodStore.getPeriodDay(formatDate(new Date()))
+})
+
+const updatePeriodDay = () => {
+  periodStore.periodDayList.forEach((item: IPeriodDay) => {
+    if (item.isMenstruate) {
+      dailyInfo.attrs.push({
+        highlight: 'red',
+        dates: item.date
+      })
+
+      dailyInfo.menstruateDateList.push(item.date)
+    }
+
+    if (item.sexActivity !== '') {
+      dailyInfo.sexDateList.push(item.date)
+      dailyInfo.attrs.push({
+        highlight: 'green',
+        dates: item.date
+      })
+    }
+
+    if (item.isDrug) {
+      dailyInfo.attrs.push({
+        dot: 'red',
+        dates: item.date
+      })
+    }
+  })
+}
+
+const getAllDatesInMonth = (dateStr: string) => {
+  const start = dayjs(dateStr).startOf('month')
+  const daysInMonth = start.daysInMonth()
+  const dates = []
+  for (let i = 0; i < daysInMonth; i++) {
+    dates.push(formatDate(start.add(i, 'day')))
+  }
+  return dates
+}
+
+const calculatePeriodDay = (date: string, cycleLength = 28, duration = 5) => {
+  const startDate = dayjs(date)
+  // 排卵日假设是周期的第 14 天，但对于短周期的情况，排卵日可以在周期的中间附近
+  const ovulationDate = startDate.add(cycleLength - 14, 'day') // 基于周期长度来计算排卵日
+
+  const fertileStart = ovulationDate.subtract(5, 'day') // 易孕期为排卵日前5天
+  const fertileEnd = ovulationDate.add(4, 'day') // 易孕期为排卵日后4天
+
+  const allDates = getAllDatesInMonth(date)
+
+  for (const dateStr of allDates) {
+    const currentDate = dayjs(dateStr)
+
+    // 判断月经期，跳过
+    if (currentDate.isSame(startDate, 'day') || checkIsMenstruateDate(currentDate, startDate, duration)) {
+      if (!dailyInfo.menstruateDateList.includes(dateStr)) {
+        dailyInfo.attrs.push({
+          content: 'red',
+          dates: formatDate(currentDate)
+        })
+      }
+
+      continue
+    }
+
+    if (dailyInfo.sexDateList.includes(formatDate(currentDate))) {
+      continue
+    }
+
+    // 判断排卵日
+    if (currentDate.isSame(ovulationDate, 'day')) {
+      dailyInfo.attrs.push({
+        highlight: 'purple',
+        dates: dateStr
+      })
+    } else if (currentDate.isAfter(fertileStart) && currentDate.isBefore(fertileEnd)) {
+      // 添加易孕期
+      dailyInfo.attrs.push({
+        content: 'purple',
+        dates: dateStr
+      })
+    } else {
+      // 添加安全期
+      dailyInfo.attrs.push({
+        content: 'green',
+        dates: dateStr
+      })
+    }
+  }
+}
+
+const checkIsMenstruateDate = (currentDate: Dayjs, startDate: Dayjs, duration: number) => {
+  return currentDate.isAfter(startDate) && currentDate.diff(startDate, 'day') < duration
+}
+
+const dateClick = (day: CalendarDay) => {
+  periodStore.selectDate = formatDate(day.date)
+  periodStore.currentPeriodDay = periodStore.getPeriodDay(formatDate(day.date))
+}
+
+/**
+ * 选择月份事件
+ */
+const changeMonthClick = async (value) => {
+  periodStore.queryInfo.month = value[0].id
+  await periodStore.refreshInfo()
+}
+
+const getLastMonth = (current: string): string => {
+  const previousMonth = dayjs(current, 'YYYY-MM').subtract(1, 'month')
+  return previousMonth.format('YYYY-MM')
+}
+</script>
+
+<style lang="scss">
+.mobile-period-view {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 1vh;
+
+  .period-calendar {
+    justify-self: center;
+    align-self: center;
+  }
+}
+</style>

src/views/mobile-home/period/setting.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="mobile-period-setting common-mobile-view">
+    <el-form ref="formRef" :model="periodStore.periodSetting"
+             label-width="auto">
+      <el-form-item label="周期天数">
+        <el-input-number v-model="periodStore.periodSetting.cycleLength" autocomplete="off"
+                  placeholder="请输入周期天数" clearable>
+        </el-input-number>
+      </el-form-item>
+
+      <el-form-item label="持续天数">
+        <el-input-number v-model="periodStore.periodSetting.duration" autocomplete="off"
+                  placeholder="请输入持续天数" clearable>
+        </el-input-number>
+      </el-form-item>
+
+      <el-form-item label="是否计算">
+        <el-switch
+            v-model="periodStore.periodSetting.isCalculate"
+            active-text="是"
+            inactive-text="否"
+        />
+      </el-form-item>
+    </el-form>
+
+    <div class="button-container">
+      <el-button type="primary" @click="confirmClick">确认</el-button>
+      <el-button type="info" @click="cancelClick">取消</el-button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { usePeriodStore } from '@/store/period'
+import { useAppStore } from '@/store/app.ts'
+import { onMounted, ref } from 'vue'
+
+const formRef = ref()
+const periodStore = usePeriodStore()
+const appStore = useAppStore()
+
+onMounted(async () => {
+  appStore.isShowMobileBack = true
+})
+
+/**
+ * 点击确认按钮
+ */
+const confirmClick = () => {
+  formRef.value.validate().then(async () => {
+    await periodStore.updatePeriodSetting()
+    history.back()
+  })
+}
+
+const cancelClick = () => {
+  history.back()
+}
+</script>
+
+<style scoped lang="scss">
+.mobile-period-setting {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+
+  .button-container {
+    align-self: center;
+  }
+}
+</style>

src/views/mobile-home/plan/calendar.vue

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

src/views/mobile-home/plan/detail[id].vue

@@ -0,0 +1,207 @@
+<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'
+import { nextTick, onMounted, 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'
+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()
+    }
+  })
+}
+
+const deleteClick = () => {
+  commonElMessageBox('是否确认删除该计划内容?').then(async () => {
+    planStore.planApiType = 'DELETE'
+    await planStore.handlePlanApi(planStore.currentPlan)
+    history.back()
+  })
+}
+
+const cancelClick = () => {
+  history.back()
+}
+</script>
+
+<style scoped lang="scss">
+.plan-detail-mobile {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+
+  .button-container {
+    align-self: center;
+  }
+}
+</style>

src/views/mobile-home/plan/list.vue

@@ -0,0 +1,30 @@
+<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/Home/Plan/PlanList.vue'
+import PlanQuery from '@/components/Home/Plan/PlanQuery.vue'
+import { Plus } from '@element-plus/icons-vue'
+import { usePlanStore } from '@/store/plan'
+import { useRouter } from 'vue-router'
+
+const planStore = usePlanStore()
+const router = useRouter()
+
+const addNewPlanClick = () => {
+  planStore.planApiType = 'ADD'
+  planStore.currentPlan = planStore.getEmptyPlan()
+  router.push({ name: 'MobileHomePlanDetailId', params: { id: 0 } })
+}
+</script>
+
+<style lang="scss">
+@use "@/styles/home/plan.mobile.module.scss";
+</style>

src/views/mobile-home/product/detail[id].vue

@@ -0,0 +1,122 @@
+<template>
+  <div class="mobile-product-detail common-mobile-view">
+    <el-form ref="formRef" :model="productStore.currentProduct"
+             :rules="rules" label-width="80px">
+      <el-form-item label="物品名称" prop="name">
+        <el-input v-model="productStore.currentProduct.name" autocomplete="off"
+                  placeholder="请输入物品名称" clearable
+                  show-word-limit maxlength="20">
+        </el-input>
+      </el-form-item>
+
+      <el-form-item label="物品价格" prop="price">
+        <el-input
+            v-model="productStore.currentProduct.price"
+            placeholder="请输入物品价格" clearable
+            :formatter="(value: string) => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
+            :parser="(value: string) => value.replace(/\$\s?|(,*)/g, '')"
+        />
+      </el-form-item>
+
+      <el-form-item label="购买日期" prop="purchaseDate">
+        <el-date-picker
+            v-model="productStore.currentProduct.purchaseDate"
+            type="date" :editable="false" placeholder="请选择购买日期"
+            value-format="YYYY-MM-DD"/>
+      </el-form-item>
+
+      <el-form-item label="购买人" prop="purchaser">
+        <el-select v-model="productStore.currentProduct.purchaser"
+                   placeholder="请选择购买人" clearable>
+          <el-option
+              v-for="(item, index) in ['哥哥', '宝宝']"
+              :key="index" :label="item" :value="item"
+          />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="过期日期" prop="expiryDate">
+        <el-date-picker
+            v-model="productStore.currentProduct.expiryDate"
+            type="date" :editable="false" placeholder="请选择过期日期"
+            value-format="YYYY-MM-DD"/>
+      </el-form-item>
+
+      <el-form-item label="物品分类" prop="category">
+        <el-select v-model="productStore.currentProduct.category"
+                   placeholder="请选择物品分类" clearable
+                   :allow-create="true" :filterable="true">
+          <el-option
+              v-for="(item, index) in productStore.categoryList"
+              :key="index" :label="item" :value="item"
+          />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="购买渠道" prop="channel">
+        <el-input v-model="productStore.currentProduct.channel" autocomplete="off"
+                  placeholder="请输入购买渠道" clearable
+                  show-word-limit maxlength="10">
+        </el-input>
+      </el-form-item>
+
+      <el-form-item label="物品图片">
+        <upload-image v-model="productStore.currentProduct.imageUrl"
+                      :image-limit="1"
+                      :service-url="fileServiceUrl"
+                      :service-file-root-path="serviceFileRootPath"
+                      :image-path="productStore.productImagePath"/>
+      </el-form-item>
+    </el-form>
+
+    <div class="button-container">
+      <el-button type="primary" @click="confirmClick">确认</el-button>
+      <el-button type="info" @click="cancelClick">取消</el-button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { UploadImage } from 'vue3-common'
+import { useProductStore } from '@/store/product'
+import { useAppStore } from '@/store/app.ts'
+import { FormRules } from 'element-plus'
+import { productRules } from '@/utils/element/elRules'
+import { onMounted, reactive, ref } from 'vue'
+import { fileServiceUrl, serviceFileRootPath } from '@/utils'
+
+const formRef = ref()
+const rules = reactive<FormRules>(productRules)
+const productStore = useProductStore()
+const appStore = useAppStore()
+
+onMounted(async () => {
+  appStore.isShowMobileBack = true
+})
+
+/**
+ * 点击确认按钮
+ */
+const confirmClick = () => {
+  formRef.value.validate().then(async () => {
+    await productStore.handleProductApi(productStore.currentProduct)
+    history.back()
+  })
+}
+
+const cancelClick = () => {
+  history.back()
+}
+</script>
+
+<style scoped lang="scss">
+.mobile-product-detail {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+
+  .button-container {
+    align-self: center;
+  }
+}
+</style>

src/views/mobile-home/product/list.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="mobile-product-list common-mobile-view">
+    <product-query />
+
+    <el-empty v-if="productStore.productList.length === 0" description="暂无物品记录"/>
+
+    <div v-else class="product-list">
+      <product-card v-for="(item, index) in productStore.productList"
+                    :key="index" :product-item="item"/>
+    </div>
+
+    <draggable-button @click="addClick"/>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import DraggableButton from '@/components/Mobile/DraggableButton.vue'
+import ProductQuery from '@/components/Home/Product/ProductQuery.vue'
+import ProductCard from '@/components/Home/Product/ProductCard.vue'
+import { useProductStore } from '@/store/product.ts'
+import { onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+
+const productStore = useProductStore()
+const router = useRouter()
+
+onMounted(async () => {
+  await productStore.queryProductList()
+})
+
+const addClick = () => {
+  productStore.productApiType = 'ADD'
+  productStore.currentProduct = productStore.getEmptyProduct()
+  router.push({ name: 'MobileHomeProductDetailId', params: { id: 0 } })
+}
+</script>
+
+<style lang="scss">
+.mobile-product-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+
+  .product-list {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+}
+</style>

src/views/mobile-home/profile/index.vue

@@ -0,0 +1,210 @@
+<template>
+  <div class="profile-view common-mobile-view">
+    <div class="profile-card">
+      <div class="avatar-wrapper">
+        <el-avatar
+            :src="serviceFileRootPath + userStore.userInfo.avatar"
+            alt="用户头像" :size="80"
+        />
+
+        <i v-if="userStore.userInfo.gender"
+           class="fas fa-mars gender-icon" style="color: #409EFF"></i>
+        <i v-else class="fas fa fa-venus gender-icon" style="color: #FFB6C1"></i>
+      </div>
+
+      <span class="user-name">{{ userStore.userInfo.accountName }}</span>
+
+      <div class="user-info">
+        <div class="info-item">
+          <i class="fas fa-map-marker-alt"></i>
+          <span>{{ userStore.userInfo.area.join('-') }}</span>
+        </div>
+        <div class="info-item">
+          <i class="fas fa-birthday-cake"></i>
+          <span>{{ userStore.userInfo.birthDate }}</span>
+        </div>
+
+        <div class="info-item">
+          <i class="fas fa-user-tie"></i>
+          <span>{{ userStore.userInfo.job }}</span>
+        </div>
+      </div>
+
+      <div class="user-info">
+        <div class="info-item">
+          <i class="fas fa-mobile-alt"></i>
+          <span>{{ userStore.userInfo.phoneNumber }}</span>
+        </div>
+        <div class="info-item">
+          <i class="fas fa-envelope"></i>
+          <span>{{ userStore.userInfo.email }}</span>
+        </div>
+      </div>
+
+      <div class="user-info">
+        <el-tag v-for="(item, index) in userStore.userInfo.tags"
+                :key="index">{{ item }}</el-tag>
+      </div>
+
+      <span class="user-bio">{{ userStore.userInfo.description }}</span>
+    </div>
+
+    <div class="menu-card card-item">
+      <div class="menu-item" @click="infoClick">
+        <i class="fas fa-user"></i>
+        <span>基本资料</span>
+        <i class="fas fa-chevron-right"></i>
+      </div>
+      <div class="menu-divider"></div>
+      <div class="menu-item">
+        <i class="fas fa-file-alt"></i>
+        <span>个人简历</span>
+        <i class="fas fa-chevron-right"></i>
+      </div>
+      <div class="menu-divider"></div>
+      <div class="menu-item">
+        <i class="fas fa-cog"></i>
+        <span>账户设置</span>
+        <i class="fas fa-chevron-right"></i>
+      </div>
+      <div class="menu-divider"></div>
+      <div class="menu-item" @click="passwordClick">
+        <i class="fas fa-key"></i>
+        <span>更改密码</span>
+        <i class="fas fa-chevron-right"></i>
+      </div>
+      <div class="menu-divider"></div>
+      <div class="menu-item" @click="logoutClick">
+        <i class="fas fa-sign-out-alt"></i>
+        <span>退出登录</span>
+        <i class="fas fa-chevron-right"></i>
+      </div>
+    </div>
+
+    <div class="version">版本号 {{ appStore.version }}</div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted } from 'vue'
+import { useUserStore } from '@/store/user.ts'
+import { useAppStore } from '@/store/app.ts'
+import { useRouter } from 'vue-router'
+import { commonElMessageBox } from 'vue3-common/utils/elUtil'
+import { serviceFileRootPath } from '@/utils'
+
+const userStore = useUserStore()
+const appStore = useAppStore()
+const router = useRouter()
+
+onMounted(() => {
+  userStore.queryUser()
+})
+
+const infoClick = () => {
+  appStore.isShowMobileBack = true
+  router.push('/mobile-home/profile/info')
+}
+
+const passwordClick = () => {
+  // appStore.isShowMobileBack = true
+  // router.push('/mobile-home/profile/password')
+}
+
+const logoutClick = () => {
+  commonElMessageBox('请确认是否退出系统？').then(() => {
+    userStore.removeAll()
+    router.push('/')
+  })
+}
+</script>
+
+<style lang="scss">
+.profile-view {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+
+  .profile-card {
+    background: linear-gradient(135deg, #6e8efb, #a777e3);
+    border-radius: 10px;
+    padding: 20px;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+    text-align: center;
+    color: white;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 15px;
+
+    .avatar-wrapper {
+      position: relative;
+      display: inline-block;
+
+      .gender-icon {
+        position: absolute;
+        right: 2px;
+        bottom: 0;
+        background: white;
+        border-radius: 50%;
+        padding: 3px;
+      }
+    }
+
+    .user-name {
+      font-size: 1.5rem;
+    }
+
+    .user-info {
+      display: flex;
+      justify-content: center;
+      gap: 10px;
+      font-size: 1.1rem;
+
+      .info-item {
+        display: flex;
+        align-items: center;
+        gap: 5px;
+      }
+    }
+  }
+
+  .menu-card {
+    border-radius: 10px;
+    padding: 10px;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+
+    .menu-item {
+      padding: 10px;
+      display: grid;
+      grid-template-columns: 20px 1fr 15px;
+      align-items: center;
+      gap: 5px;
+      cursor: pointer;
+      font-size: 1.2rem;
+
+      i {
+        color: var(--el-color-primary);
+      }
+
+      span {
+        color: var(--color-text);
+      }
+    }
+
+    .menu-divider {
+      height: 1px;
+      background-color: #E8E8E8;
+      margin: 0 5px;
+    }
+  }
+
+  .version {
+    align-self: center;
+    color: #999;
+  }
+}
+</style>

src/views/mobile-home/profile/info.vue

@@ -0,0 +1,124 @@
+<template>
+  <div class="profile-info common-mobile-view">
+    <el-form ref="ruleFormRef"
+             :model="userStore.userInfo"
+             :rules="rules" label-width="auto">
+      <el-form-item label="姓名" prop="username">
+        <el-input v-model="userStore.userInfo.username"
+                  :maxlength="10" show-word-limit
+                  clearable/>
+      </el-form-item>
+
+      <el-form-item label="头像">
+        <upload-image v-model="userStore.userInfo.avatar"
+                      :image-limit="1"
+                      :service-url="fileServiceUrl"
+                      :service-file-root-path="serviceFileRootPath"
+                      :image-path="userStore.userImagePath"/>
+      </el-form-item>
+
+      <el-form-item label="性别">
+        <el-radio-group v-model="userStore.userInfo.gender">
+          <el-radio :value="1">男</el-radio>
+          <el-radio :value="0">女</el-radio>
+        </el-radio-group>
+      </el-form-item>
+
+      <el-form-item label="生日">
+        <el-date-picker v-model="userStore.userInfo.birthDate"
+                        type="date" :editable="false"
+                        placeholder="请选择日期"/>
+      </el-form-item>
+
+      <el-form-item label="地区">
+        <el-cascader v-model="userStore.userInfo.area"
+                     placeholder="请选择地区" :options="pcTextArr">
+        </el-cascader>
+      </el-form-item>
+
+      <el-form-item label="手机号">
+        <el-input v-model="userStore.userInfo.phoneNumber"
+                  :maxlength="11" show-word-limit clearable
+                  placeholder="请输入手机号"/>
+      </el-form-item>
+
+      <el-form-item label="邮箱">
+        <el-input v-model="userStore.userInfo.email"
+                  :maxlength="20" show-word-limit clearable
+                  placeholder="请输入邮箱"/>
+      </el-form-item>
+
+      <el-form-item label="地址">
+        <el-input v-model="userStore.userInfo.address"
+                  :maxlength="20" show-word-limit clearable
+                  placeholder="请输入地址"/>
+      </el-form-item>
+
+      <el-form-item label="职业">
+        <el-input v-model="userStore.userInfo.job"
+                  :maxlength="10" show-word-limit clearable
+                  placeholder="请输入职业"/>
+      </el-form-item>
+
+      <el-form-item label="标签">
+        <el-input-tag v-model="userStore.userInfo.tags"
+                      :max="3" placeholder="请输入标签（最多3个）" />
+      </el-form-item>
+
+      <el-form-item label="描述">
+        <el-input v-model="userStore.userInfo.description"
+                  :maxlength="20" show-word-limit clearable
+                  placeholder="用一句话描述自己"/>
+      </el-form-item>
+    </el-form>
+
+    <div class="button-container">
+      <el-button type="primary" @click="submitForm(ruleFormRef)">保存</el-button>
+      <el-button @click="cancelClick">取消</el-button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UploadImage } from 'vue3-common'
+import { pcTextArr } from 'element-china-area-data'
+import { useUserStore } from '@/store/user.ts'
+import { reactive, ref } from 'vue'
+import { ElMessage, FormInstance, FormRules } from 'element-plus'
+import { profileInfoRules } from '@/utils/element/elRules.ts'
+import { fileServiceUrl, serviceFileRootPath } from '@/utils'
+
+const userStore = useUserStore()
+const ruleFormRef = ref<FormInstance>()
+const rules = reactive<FormRules>(profileInfoRules)
+
+const cancelClick = () => {
+  history.back()
+}
+
+const submitForm = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  await formEl.validate(async (valid, fields) => {
+    if (valid) {
+      await userStore.updateUser()
+      await userStore.queryUser()
+      ElMessage.success('更改信息成功')
+      history.back()
+    } else {
+      ElMessage.error('请先填写信息')
+    }
+  })
+}
+</script>
+
+<style scoped lang="scss">
+.profile-info {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+
+  .button-container {
+    align-self: center;
+  }
+}
+</style>

src/views/mobile-home/profile/password.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="profile-password common-mobile-view">
+    <el-form ref="ruleFormRef"
+             :model="passwordInfo"
+             :rules="rules" label-width="auto">
+      <el-form-item label="原密码" prop="oldPassword">
+        <el-input v-model="passwordInfo.oldPassword" type="password" show-password clearable/>
+      </el-form-item>
+
+      <el-form-item label="新密码" prop="newPassword">
+        <el-input v-model="passwordInfo.newPassword" type="password" show-password clearable/>
+      </el-form-item>
+
+      <el-form-item label="确认密码" prop="confirmPassword">
+        <el-input v-model="passwordInfo.confirmPassword" type="password" show-password clearable/>
+      </el-form-item>
+    </el-form>
+
+    <div class="button-container">
+      <el-button type="primary" @click="submitForm(ruleFormRef)">确认</el-button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useUserStore } from '@/store/user.ts'
+import { reactive, ref } from 'vue'
+import { ElMessage, FormInstance, FormRules } from 'element-plus'
+import { profilePasswordRules } from '@/utils/element/elRules.ts'
+
+const userStore = useUserStore()
+
+const ruleFormRef = ref<FormInstance>()
+
+const rules = reactive<FormRules>(profilePasswordRules)
+
+const passwordInfo = reactive({
+  oldPassword: '',
+  newPassword: '',
+  confirmPassword: ''
+})
+
+const submitForm = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  await formEl.validate(async (valid, fields) => {
+    if (valid) {
+      if (passwordInfo.newPassword !== passwordInfo.confirmPassword) {
+        ElMessage.error('确认密码和新密码不一致')
+        return
+      }
+
+      await userStore.updateAccountPassword(passwordInfo.oldPassword, passwordInfo.newPassword)
+      ElMessage.success('更改密码成功')
+    }
+  })
+}
+</script>
+
+<style scoped lang="scss">
+.profile-password {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+
+  .button-container {
+    align-self: center;
+  }
+}
+</style>

src/views/mobile-home/server/file.vue

@@ -0,0 +1,171 @@
+<template>
+  <div class="mobile-server-file common-mobile-view">
+    <div class="file-header">
+      <div class="header-left">
+        <div class="header-tools">
+          <i class="fa-solid fa-arrow-left" title="返回" @click="backFileClick"></i>
+          <i class="fa-solid fa-sync" title="刷新" @click="fileStore.queryFileInfoList()"></i>
+        </div>
+        <div class="current-path">当前路径: {{ fileStore.currentFolder }}</div>
+      </div>
+    </div>
+    <div class="file-list card-item">
+      <div class="file-list-header">
+        <div>文件名称</div>
+        <div>文件大小</div>
+        <div>创建日期</div>
+      </div>
+
+      <div class="file-list-content">
+        <!-- 文件夹示例 -->
+        <div v-for="(item, index) in fileStore.fileInfoList"
+             :key=index class="file-item" @click="getFileClick(item)">
+          <div class="file-name">
+            <file-icons :name="item.name" :isFolder="item.type === '文件夹'"/>
+            <span class="name">{{ item.name }}</span>
+          </div>
+          <span class="file-size">{{ item.size }}</span>
+          <span class="file-creation-time">{{ item.createDate }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import FileIcons from 'file-icons-vue'
+import { useAppStore } from '@/store/app.ts'
+import { useFileStore } from '@/store/file'
+import { useRouter } from 'vue-router'
+import { onMounted } from 'vue'
+import { IFileInfo } from '@/types/file'
+import { ElMessage } from 'element-plus'
+
+const fileStore = useFileStore()
+const router = useRouter()
+const appStore = useAppStore()
+
+onMounted(() => {
+  fileStore.queryFileInfoList()
+})
+
+const backFileClick = async () => {
+  if (fileStore.pathHistory.length > 1) {
+    fileStore.pathHistory.pop()
+    fileStore.currentFolder = fileStore.pathHistory[fileStore.pathHistory.length - 1]
+    await fileStore.queryFileInfoList()
+  }
+}
+
+const getFileClick = async (file: IFileInfo) => {
+  if (file.type === '文件夹') {
+    fileStore.currentFolder = `${fileStore.currentFolder}/${file.name}`
+    fileStore.pathHistory.push(fileStore.currentFolder)
+
+    await fileStore.queryFileInfoList()
+  } else if (fileStore.previewFileTypeList.includes(file.type)) {
+    const fileUrl = fileStore.currentFolder.replace(fileStore.pathHistory[0], '')
+    const url = `/admin-service/logs${fileUrl}/${file.name}`
+    appStore.isShowMobileBack = true
+    await router.push({ name: 'MobileHomeServerPreviewUrl', params: { url } })
+  } else {
+    ElMessage.error('暂不支持预览该文件')
+  }
+}
+</script>
+
+<style lang="scss">
+.mobile-server-file {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+
+  .file-header {
+    background-color: var(--el-color-primary);
+    color: #FFFFFF;
+    padding: 10px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .header-left {
+      display: flex;
+      align-items: center;
+      gap: 1.25rem;
+
+      .header-tools {
+        display: flex;
+        gap: 1.25rem;
+
+        i {
+          cursor: pointer;
+          transition: color 0.3s ease;
+          font-size: 1.25rem;
+        }
+
+        i:hover {
+          color: #e0f2fe;
+        }
+      }
+
+      .current-path {
+        font-weight: bold;
+      }
+    }
+  }
+
+  .file-list {
+    .file-list-header {
+      display: grid;
+      grid-template-columns: 1fr 60px 120px;
+      justify-items: center;
+      align-items: center;
+      gap: 5px;
+      padding: 10px;
+      border-top-left-radius: 10px;
+      border-top-right-radius: 10px;
+      background-color: var(--el-color-primary);
+      color: #FFFFFF;
+      font-weight: bold;
+    }
+
+    .file-list-content {
+      max-height: calc(100vh - 220px);
+      overflow: auto;
+      display: flex;
+      flex-direction: column;
+      gap: 5px;
+
+      .file-item {
+        display: grid;
+        grid-template-columns: 1fr 60px 120px;
+        align-items: center;
+        gap: 5px;
+        padding: 10px;
+        border-bottom: 1px solid #e0f2fe;
+
+        .file-name {
+          display: grid;
+          grid-template-columns: 20px 1fr;
+          align-items: center;
+          gap: 3px;
+
+          .name {
+            font-weight: 600;
+            color: #0c4a6e;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+        }
+
+        .file-size,
+        .file-creation-time {
+          color: #64748b;
+          font-size: 0.9rem;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/mobile-home/server/monitor.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="mobile-server-monitor common-mobile-view">
+    <server-card :is-online="appStore.isWebSocket"
+                 :server-ip="appStore.serverIp"
+                 :server-monitor="serverInfo.monitor"/>
+
+    <server-progress :server-monitor="serverInfo.monitor"/>
+
+    <div class="refresh-time">
+      <el-text >{{ serverInfo.refreshTime }}</el-text>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import ServerCard from '@/components/Home/Server/ServerCard.vue'
+import ServerProgress from '@/components/Home/Server/ServerProgress.vue'
+import { useAppStore } from '@/store/app.ts'
+import { onMounted, onUnmounted, reactive } from 'vue'
+import { WebSocketUtil } from 'vue3-common/utils/webSocketUtil'
+import { IServerMonitor } from '@/types/server'
+import { formatDate } from 'vue3-common/utils/dateUtil'
+
+const appStore = useAppStore()
+
+const webSocket = new WebSocketUtil(`ws://${appStore.serverIp}/ws/`)
+
+const serverInfo = reactive({
+  monitor: {
+    cpuCores: 0,
+    cpuModel: '',
+    cpuUsage: 0,
+    diskUsage: 0,
+    memoryUsage: 0,
+    networkSpeed: {
+      rx: 0,
+      tx: 0
+    },
+    systemInfo: '',
+    systemLoad: {
+      load1m: 0,
+      load5m: 0,
+      load15m: 0
+    },
+    topProcesses: [],
+    totalDisk: 0,
+    totalMemory: 0,
+    uptime: 0
+  } as IServerMonitor,
+  refreshTime: formatDate(new Date(), 'YYYY-MM-DD HH:mm:ss')
+})
+
+onMounted(async () => {
+  webSocket.connect()
+})
+
+onUnmounted(() => {
+  webSocket.close()
+})
+
+webSocket.on('onOpen', () => {
+  appStore.isWebSocket = true
+  webSocket.send(webSocket.formatMessage('serverMonitor', {}))
+  // console.log('连接成功')
+})
+
+webSocket.on('onMessage', (message: string) => {
+  serverInfo.monitor = JSON.parse(message).payload
+  serverInfo.refreshTime = formatDate(new Date(), 'YYYY-MM-DD HH:mm:ss')
+  // console.log(serverInfo.monitor)
+})
+
+webSocket.on('onClose', (event: CloseEvent) => {
+  appStore.isWebSocket = false
+  // console.log('关闭连接')
+})
+</script>
+
+<style lang="scss">
+.mobile-server-monitor {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+
+  .refresh-time {
+    align-self: flex-end;
+  }
+}
+</style>

src/views/mobile-home/server/preview[url].vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="mobile-server-preview common-mobile-view">
+    <span style="text-align: center;">{{ route.params.url }}</span>
+    <iframe :src="route.params.url" class="preview-file"/>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+</script>
+
+<style lang="scss">
+.mobile-server-preview {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+
+  .preview-file {
+    flex-grow: 1;
+  }
+}
+</style>

src/views/mobile-home/travel/detail[id].vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="life-detail common-mobile-view">
+    <span class="title">{{ travelStore.currentTravelSpot.name }}</span>
+
+    <section>
+      <div class="info-container">
+        <travel-basic-data/>
+
+        <travel-guide-data/>
+      </div>
+
+      <div class="record-container card-item">
+        <travel-record-data/>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useTravelStore } from '@/store/travel.ts'
+import { useRoute } from 'vue-router'
+import TravelBasicData from '@/components/Home/Travel/Data/TravelBasicData.vue'
+import TravelGuideData from '@/components/Home/Travel/Data/TravelGuideData.vue'
+import TravelRecordData from '@/components/Home/Travel/Data/TravelRecordData.vue'
+import { onMounted } from 'vue'
+
+const travelStore = useTravelStore()
+const route = useRoute()
+
+onMounted(() => {
+  travelStore.queryTravelSpot(route.params.id as number)
+})
+</script>
+
+<style lang="scss">
+@use "@/styles/home/life.detail.module.scss";
+</style>

src/views/mobile-home/travel/record.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="mobile-travel-view common-mobile-view">
+    <travel-stats />
+
+    <travel-calendar />
+
+    <draggable-button @click="addClick"/>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import TravelStats from '@/components/Home/Travel/TravelStats.vue'
+import TravelCalendar from '@/components/Home/Travel/TravelCalendar.vue'
+import DraggableButton from '@/components/Mobile/DraggableButton.vue'
+import { useTravelStore } from '@/store/travel.ts'
+import { useRouter } from 'vue-router'
+import { onMounted } from 'vue'
+
+const travelStore = useTravelStore()
+const router = useRouter()
+
+onMounted(async () => {
+  await travelStore.refreshInfo()
+})
+
+const addClick = () => {
+  travelStore.travelRecordApiType = 'ADD'
+  travelStore.currentTravelRecord = travelStore.getEmptyTravelRecord()
+  router.push({ name: 'MobileHomeTravelRecordForm' })
+}
+</script>
+
+<style lang="scss">
+@use "@/styles/home/travel.mobile.module.scss";
+</style>

src/views/mobile-home/travel/recordForm.vue

@@ -0,0 +1,117 @@
+<template>
+  <div class="mobile-travel-record-form common-mobile-view">
+    <el-form ref="formRef" :model="travelStore.currentTravelRecord"
+             :rules="rules" label-width="80">
+      <el-form-item label="景点名称" prop="name">
+        <el-select
+            v-model="travelStore.currentTravelRecord.name"
+            @focus="travelStore.queryTravelSpotNameList()"
+            :disabled="travelStore.travelRecordApiType === 'UPDATE'"
+            placeholder="请选择景点名称">
+          <el-option
+              v-for="(item, index) in travelStore.travelSpotNameList"
+              :key="index" :label="item" :value="item"
+          />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="旅行日期" prop="date">
+        <el-date-picker
+            v-model="travelStore.currentTravelRecord.date"
+            type="date" placeholder="请选择日期"
+            value-format="YYYY-MM-DD"/>
+      </el-form-item>
+
+      <el-form-item label="旅行人员" prop="persons">
+        <el-input-tag v-model="travelStore.currentTravelRecord.persons"
+                      :max="3" placeholder="请输入旅行人员" />
+      </el-form-item>
+
+      <el-form-item label="图片">
+        <upload-image v-model="travelStore.currentTravelRecord.imageList"
+                      :service-url="fileServiceUrl"
+                      :image-limit="3"
+                      :service-file-root-path="serviceFileRootPath"
+                      :image-path="travelStore.travelImagePath"/>
+      </el-form-item>
+
+      <el-form-item label="视频">
+        <upload-video v-model="travelStore.currentTravelRecord.videoList"
+                      :service-url="fileServiceUrl"
+                      :image-limit="3"
+                      :service-file-root-path="serviceFileRootPath"
+                      :video-path="travelStore.travelVideoPath"
+                      style="width: 100%;"/>
+      </el-form-item>
+
+      <div class="video-list">
+        <video v-for="(item, index) in travelStore.currentTravelRecord.videoList"
+               :key="index" controls style="width: 60%; min-height: 200px;">
+          <source :src="serviceFileRootPath + item" type="video/mp4">
+          您的浏览器不支持 HTML5 视频
+        </video>
+      </div>
+    </el-form>
+
+    <div class="button-container">
+      <el-button type="primary" @click="confirmClick">确认</el-button>
+      <el-button type="danger" @click="deleteClick">删除</el-button>
+      <el-button type="info" @click="cancelClick">取消</el-button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { UploadImage, UploadVideo } from 'vue3-common'
+import { useTravelStore } from '@/store/travel'
+import { ref, reactive } from 'vue'
+import { FormRules } from 'element-plus'
+import { travelRecordRules } from '@/utils/element/elRules'
+import { fileServiceUrl, serviceFileRootPath } from '@/utils'
+import { commonElMessageBox } from 'vue3-common/utils/elUtil'
+
+const rules = reactive<FormRules>(travelRecordRules)
+
+const formRef = ref()
+const travelStore = useTravelStore()
+
+/**
+ * 点击确认按钮
+ */
+const confirmClick = () => {
+  formRef.value.validate().then(() => {
+    travelStore.handleTravelRecordApi(travelStore.currentTravelRecord)
+    history.back()
+  })
+}
+
+const cancelClick = () => {
+  history.back()
+}
+
+const deleteClick = () => {
+  commonElMessageBox('是否确认删除该记录?').then(() => {
+    travelStore.travelRecordApiType = 'DELETE'
+    travelStore.handleTravelRecordApi(travelStore.currentTravelRecord)
+    history.back()
+  })
+}
+</script>
+
+<style lang="scss">
+.mobile-travel-record-form {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+
+  .video-list {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
+  }
+
+  .button-container {
+    align-self: center;
+  }
+}</style>

src/views/mobile-home/travel/spot.vue

@@ -0,0 +1,70 @@
+<template>
+  <div ref="travelSpotRef" class="mobile-travel-view common-mobile-view">
+    <travel-query />
+
+    <div class="travel-list">
+      <el-empty v-if="travelStore.travelSpotList.length === 0" description="暂无旅行记录"/>
+
+      <div v-else class="list">
+        <travel-card v-for="(item, index) in travelStore.travelSpotList"
+                     :key="index" :travel-item="item"/>
+      </div>
+    </div>
+
+    <draggable-button @click="addClick"/>
+
+    <arrive-bottom v-if="travelStore.isScrollEnd"/>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import TravelQuery from '@/components/Home/Travel/TravelQuery.vue'
+import ArriveBottom from '@/components/Mobile/ArriveButton.vue'
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+import TravelCard from '@/components/Home/Travel/TravelCard.vue'
+import { useTravelStore } from '@/store/travel.ts'
+import DraggableButton from '@/components/Mobile/DraggableButton.vue'
+import { useRouter } from 'vue-router'
+
+const travelStore = useTravelStore()
+const router = useRouter()
+
+const travelSpotRef = ref()
+
+onMounted(async () => {
+  travelStore.pageInfo = {
+    currentPage: 1,
+    pageSize: 3,
+    totalSize: 1
+  }
+  travelStore.travelSpotList = []
+  await travelStore.queryMobileTravelSpotList()
+  travelSpotRef.value.addEventListener('scroll', handleScroll)
+})
+
+onBeforeUnmount(() => {
+  travelSpotRef.value.removeEventListener('scroll', handleScroll)
+})
+
+const handleScroll = () => {
+  const el = travelSpotRef.value
+  if (el.scrollTop + el.clientHeight >= el.scrollHeight - 10) {
+    const { currentPage, pageSize, totalSize } = travelStore.pageInfo
+    travelStore.isScrollEnd = pageSize * currentPage > totalSize
+    if (!travelStore.isScrollEnd) {
+      travelStore.pageInfo.currentPage++
+      travelStore.queryMobileTravelSpotList()
+    }
+  }
+}
+
+const addClick = () => {
+  travelStore.travelSpotApiType = 'ADD'
+  travelStore.currentTravelSpot = travelStore.getEmptyTravelSpot()
+  router.push({ name: 'MobileHomeTravelSpotForm' })
+}
+</script>
+
+<style lang="scss">
+@use "@/styles/home/travel.mobile.module.scss";
+</style>

src/views/mobile-home/travel/spotForm.vue

@@ -0,0 +1,116 @@
+<template>
+  <div class="mobile-travel-spot-form common-mobile-view">
+    <el-form ref="formRef" :model="travelStore.currentTravelSpot"
+             :rules=rules label-width="100px">
+      <el-form-item label="景点名称" prop="name">
+        <el-input
+            v-model="travelStore.currentTravelSpot.name"
+            placeholder="请输入景点名称" clearable
+            show-word-limit maxlength="20"
+        />
+      </el-form-item>
+
+      <el-form-item label="景点地区" prop="area">
+        <el-cascader
+            v-model="travelStore.currentTravelSpot.area"
+            placeholder="请选择景点地区" :options="pcTextArr">
+        </el-cascader>
+      </el-form-item>
+
+      <el-form-item label="景点地址" prop="address">
+        <el-input
+            v-model="travelStore.currentTravelSpot.address"
+            placeholder="请输入景点地址" clearable
+            show-word-limit maxlength="50"
+        />
+      </el-form-item>
+
+      <el-form-item label="门票价格" prop="price">
+        <el-input
+            v-model="travelStore.currentTravelSpot.price"
+            placeholder="请输入门票价格" clearable
+            :formatter="(value: string) => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
+            :parser="(value: string) => value.replace(/\$\s?|(,*)/g, '')"
+        />
+      </el-form-item>
+
+      <el-form-item label="推荐指数" prop="recommendRate">
+        <el-rate v-model="travelStore.currentTravelSpot.recommendRate"
+                 :colors="travelStore.rateColorList"/>
+      </el-form-item>
+
+      <el-form-item label="备注">
+        <el-input v-model="travelStore.currentTravelSpot.remark" type="textarea"
+                  placeholder="请输入备注" clearable
+                  :rows="5" show-word-limit maxlength="200">
+        </el-input>
+      </el-form-item>
+
+      <el-form-item label="交通指南">
+        <el-input v-model="travelStore.currentTravelSpot.traffic" type="textarea"
+                  placeholder="请输入交通指南" clearable
+                  :rows="5" show-word-limit maxlength="200">
+        </el-input>
+      </el-form-item>
+
+      <el-form-item label="旅游路线">
+        <el-input v-model="travelStore.currentTravelSpot.router" type="textarea"
+                  placeholder="请输入旅游路线" clearable
+                  :rows="5" show-word-limit maxlength="200">
+        </el-input>
+      </el-form-item>
+
+      <el-form-item label="美食推荐">
+        <el-input-tag v-model="travelStore.currentTravelSpot.foods"
+                      :max="3" placeholder="请输入美食推荐" />
+      </el-form-item>
+
+      <el-form-item label="项目推荐">
+        <el-input-tag v-model="travelStore.currentTravelSpot.projects"
+                      :max="3" placeholder="请输入项目推荐" />
+      </el-form-item>
+    </el-form>
+
+    <div class="button-container">
+      <el-button type="primary" @click="confirmClick">确认</el-button>
+      <el-button type="info" @click="cancelClick">取消</el-button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useTravelStore } from '@/store/travel'
+import { ref, reactive } from 'vue'
+import { pcTextArr } from 'element-china-area-data'
+import { FormRules } from 'element-plus'
+import { travelRules } from '@/utils/element/elRules.ts'
+
+const rules = reactive<FormRules>(travelRules)
+const formRef = ref()
+const travelStore = useTravelStore()
+
+/**
+ * 点击确认按钮
+ */
+const confirmClick = () => {
+  formRef.value.validate().then(() => {
+    travelStore.handleTravelSpotApi(travelStore.currentTravelSpot)
+    history.back()
+  })
+}
+
+const cancelClick = () => {
+  history.back()
+}
+</script>
+
+<style lang="scss">
+.mobile-travel-spot-form {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+
+  .button-container {
+    align-self: center;
+  }
+}</style>