feat:移植工程

src/views/admin/account/index.vue

@@ -0,0 +1,181 @@
+<template>
+  <div class="admin-module">
+    <div class="button-container">
+      <el-button type="primary" @click="addClick">新增账号</el-button>
+    </div>
+
+    <el-table
+        :data="accountInfo.accountList"
+        border stripe
+        :header-cell-style="tableHeaderStyle()"
+        :cell-style="tableCellStyle()"
+        :row-style="tableRowStyle()"
+        style="width: 100%"
+        class="card-item">
+      <el-table-column type="index" align="center" width="50" />
+      <el-table-column prop="username" label="用户姓名" align="center" min-width="20%"/>
+      <el-table-column prop="accountName" label="账号名称" align="center" min-width="20%"/>
+      <el-table-column prop="date" label="创建日期" align="center" min-width="20%"/>
+      <el-table-column label="账号状态" align="center" min-width="20%">
+        <template #default="scope">
+          <el-tag v-if="scope.row.state === 0" type="primary">正常</el-tag>
+          <el-tag v-else-if="scope.row.state === 1" type="warning">禁用</el-tag>
+          <el-tag v-else-if="scope.row.state === 2" type="danger">注销</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column fixed="right" label="操作" align="center" width="280">
+        <template #default="scope">
+          <el-button type="primary" @click="resetClick(scope.row)">重置密码</el-button>
+          <el-button type="primary" @click="disableClick(scope.row)">禁用</el-button>
+          <el-button type="danger" @click="deleteClick(scope.row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <el-dialog v-model="accountInfo.accountDialog.visible"
+               :title="accountInfo.accountDialog.title"
+               center width="500" @open="openDialogEvent">
+      <el-form ref="formRef" :model="accountInfo.accountDialog.data"
+               :rules="rules" label-width="100px">
+        <el-form-item label="账号名称" prop="accountName">
+          <el-input v-model="accountInfo.accountDialog.data.accountName" autocomplete="off"
+                    placeholder="请输入账号名称（登录账号）"
+                    :maxlength="10" show-word-limit clearable/>
+        </el-form-item>
+        <el-form-item label="用户姓名" prop="username">
+          <el-input v-model="accountInfo.accountDialog.data.username" autocomplete="off"
+                    placeholder="请输入用户姓名"
+                    :maxlength="10" show-word-limit clearable/>
+        </el-form-item>
+        <el-form-item label="账号密码" prop="password">
+          <el-input v-model="accountInfo.accountDialog.data.password" autocomplete="off"
+                    placeholder="请输入密码" clearable show-password/>
+        </el-form-item>
+        <el-form-item label="确认密码" prop="confirmPassword">
+          <el-input v-model="accountInfo.accountDialog.data.confirmPassword" autocomplete="off"
+                    placeholder="请再次输入密码" clearable show-password/>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="cancelClick">取消</el-button>
+          <el-button type="primary" @click="confirmClick">确认</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { nextTick, onMounted, reactive, ref } from 'vue'
+import { commonElMessageBox, tableCellStyle, tableHeaderStyle, tableRowStyle } from 'vue3-common/utils/elUtil'
+import { IAccount } from '@/types/auth.ts'
+import { ElMessage, FormRules } from 'element-plus'
+import type { IDialog, IHandleApi } from 'vue3-common/types'
+import { accountRules } from '@/utils/element/elRules.ts'
+import { deleteAccountApi, queryAccountApi, registerAccountApi } from '@/apis/account.ts'
+const formRef = ref()
+const rules = reactive<FormRules>(accountRules)
+
+const accountInfo = reactive({
+  accountList: [] as IAccount[],
+  setAccountType: 'ADD' as IHandleApi,
+  accountDialog: {
+    title: '',
+    visible: false,
+    data: {}
+  } as IDialog<IAccount>
+})
+
+onMounted(async () => {
+  accountInfo.accountList = await queryAccountApi()
+})
+
+const addClick = () => {
+  accountInfo.setAccountType = 'ADD'
+  accountInfo.accountDialog = {
+    title: '新增账号',
+    visible: true,
+    data: {
+      accountName: '',
+      password: '',
+      confirmPassword: '',
+      username: ''
+    }
+  }
+}
+
+/**
+ * 点击编辑按钮
+ * @param account 账户
+ */
+const resetClick = async (account: IAccount) => {
+
+}
+
+const disableClick = (account: IAccount) => {
+  ElMessage.info('该功能暂未开发')
+}
+
+/**
+ * 点击删除按钮
+ * @param account 账户
+ */
+const deleteClick = (account: IAccount) => {
+  commonElMessageBox(`请确认删除该账号：${account.accountName} ?`).then(() => {
+    accountInfo.setAccountType = 'DELETE'
+    setAccountApi(account.id)
+  })
+}
+
+const openDialogEvent = () => {
+  nextTick(() => {
+    formRef.value.clearValidate()
+  })
+}
+
+const setAccountApi = async (id?: number) => {
+  switch (accountInfo.setAccountType) {
+    case 'ADD':
+      if (checkPassword()) {
+        await registerAccountApi(accountInfo.accountDialog.data)
+        ElMessage.success('新增账号成功')
+      }
+      break
+    case 'DELETE':
+      await deleteAccountApi(id)
+      ElMessage.success('删除账号成功')
+      break
+    default:
+      break
+  }
+  accountInfo.accountList = await queryAccountApi()
+  accountInfo.accountDialog.visible = false
+}
+
+const checkPassword = () => {
+  const { password, confirmPassword } = accountInfo.accountDialog.data
+  if (password !== confirmPassword) {
+    ElMessage.error('请确认两次密码是否一致')
+    return false
+  }
+
+  return true
+}
+
+const cancelClick = () => {
+  accountInfo.accountDialog.visible = false
+}
+
+const confirmClick = async () => {
+  await formRef.value.validate(async (valid) => {
+    if (valid) {
+      if (accountInfo.setAccountType === 'ADD') {
+        if (checkPassword()) {
+          await setAccountApi(accountInfo.accountDialog.data.id)
+        }
+      }
+    }
+  })
+}
+</script>

src/views/admin/bill/book.vue

@@ -0,0 +1,166 @@
+<template>
+  <div class="admin-module">
+    <div class="button-container">
+      <el-button type="primary" @click="addNewBookClick">新增账本</el-button>
+    </div>
+
+    <el-table
+        :data="billStore.billBookList"
+        border stripe
+        :header-cell-style="tableHeaderStyle()"
+        :cell-style="tableCellStyle()"
+        :row-style="tableRowStyle()"
+        style="width: 50%"
+        class="card-item">
+      <el-table-column type="index" align="center" width="50" />
+      <el-table-column prop="name" label="名称" align="center" min-width="10%"/>
+      <el-table-column label="图标" align="center" min-width="10%">
+        <template #default="scope">
+          <i :class="scope.row.icon" :style="{color: scope.row.color, fontSize: '24px'}"></i>
+        </template>
+      </el-table-column>
+      <el-table-column fixed="right" label="操作" align="center" width="200">
+        <template #default="scope">
+          <el-button type="primary" @click="editBookClick(scope.row)">编辑</el-button>
+          <el-button type="danger" @click="deleteBookClick(scope.row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <el-dialog v-model="billInfo.billBookDialog.visible"
+               :title="billInfo.billBookDialog.title"
+               center width="500" @open="openDialogEvent">
+      <el-form ref="formRef" :model="billInfo.billBookDialog.data"
+               :rules="rules" label-width="100px">
+        <el-form-item label="账本名称" prop="name">
+          <el-input v-model="billInfo.billBookDialog.data.name" autocomplete="off"
+                    placeholder="请输入类型名称"
+                    :maxlength="10" show-word-limit/>
+        </el-form-item>
+        <el-form-item label="类型图标" prop="icon">
+          <el-input v-model="billInfo.billBookDialog.data.icon" autocomplete="off"
+                    placeholder="请输入类型图标"
+                    :maxlength="40" show-word-limit/>
+        </el-form-item>
+        <el-form-item label="图标颜色" prop="color">
+          <el-color-picker v-model="billInfo.billBookDialog.data.color" />
+        </el-form-item>
+        <el-form-item label="图标预览">
+          <i :class="billInfo.billBookDialog.data.icon"
+             :style="{color: billInfo.billBookDialog.data.color, fontSize: '24px'}"></i>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="cancelClick">取消</el-button>
+          <el-button type="primary" @click="confirmClick">确认</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { nextTick, onMounted, reactive, ref } from 'vue'
+import { useBillStore } from '@/store/bill'
+import { ElMessage, FormRules } from 'element-plus'
+import { IBillBook } from '@/types/bill'
+import { billBookRules } from '@/utils/element/elRules'
+import { deepCopyObject } from 'vue3-common/utils/dataUtil'
+import type { IDialog, IHandleApi } from 'vue3-common/types'
+import { addBillBookApi, updateBillBookApi } from '@/apis/bill'
+import { tableCellStyle, tableHeaderStyle, tableRowStyle } from 'vue3-common/utils/elUtil'
+
+const formRef = ref()
+const rules = reactive<FormRules>(billBookRules)
+const billStore = useBillStore()
+
+const billInfo = reactive({
+  setBillBookType: 'ADD' as IHandleApi,
+  billBookDialog: {
+    title: '',
+    visible: false,
+    data: {}
+  } as IDialog<IBillBook>
+})
+
+onMounted(async () => {
+  await billStore.queryBillBook()
+})
+
+/**
+ * 点击新增账本按钮
+ */
+const addNewBookClick = () => {
+  billInfo.setBillBookType = 'ADD'
+  billInfo.billBookDialog = {
+    title: '新增账本',
+    visible: true,
+    data: {
+      name: '',
+      icon: '',
+      color: ''
+    }
+  }
+}
+
+/**
+ * 点击编辑账本按钮
+ * @param book 账本
+ */
+const editBookClick = async (book: IBillBook) => {
+  billInfo.setBillBookType = 'UPDATE'
+  billInfo.billBookDialog = {
+    title: '编辑账本',
+    visible: true,
+    data: deepCopyObject(book)
+  }
+}
+
+/**
+ * 点击删除账本按钮
+ * @param book 账本
+ */
+const deleteBookClick = (book: IBillBook) => {
+  billInfo.setBillBookType = 'DELETE'
+  ElMessage.error('暂不支持该功能')
+}
+
+const openDialogEvent = () => {
+  nextTick(() => {
+    formRef.value.clearValidate()
+  })
+}
+
+const setBillBookApi = async (id?: number) => {
+  switch (billInfo.setBillBookType) {
+    case 'ADD':
+      await addBillBookApi(billInfo.billBookDialog.data)
+      ElMessage.success('新增账本成功')
+      break
+    case 'UPDATE':
+      await updateBillBookApi(id as number, billInfo.billBookDialog.data)
+      ElMessage.success('更新账本成功')
+      break
+    case 'DELETE':
+      ElMessage.success('删除账本成功')
+      break
+    default:
+      break
+  }
+  await billStore.queryBillBook()
+  billInfo.billBookDialog.visible = false
+}
+
+const cancelClick = () => {
+  billInfo.billBookDialog.visible = false
+}
+
+const confirmClick = async () => {
+  await formRef.value.validate(async (valid) => {
+    if (valid) {
+      await setBillBookApi(billInfo.billBookDialog.data.id)
+    }
+  })
+}
+</script>

src/views/admin/bill/category.vue

@@ -0,0 +1,223 @@
+<template>
+  <div class="admin-module">
+    <div class="button-container">
+      <el-select
+          v-model="billInfo.bookName"
+          placeholder="请选择账本名称"
+          @focus="focusBookNameEvent"
+          @change="selectBookNameEvent"
+          style="width: 150px;">
+        <el-option
+            v-for="(item, index) in billInfo.billBookList"
+            :key="index" :label="item.name" :value="item.name"
+        />
+      </el-select>
+
+      <el-button type="primary" @click="addNewCategoryClick">新增类别</el-button>
+    </div>
+
+    <el-table
+        :data="billInfo.billCategoryList"
+        border stripe
+        :header-cell-style="tableHeaderStyle()"
+        :cell-style="tableCellStyle()"
+        :row-style="tableRowStyle()"
+        class="card-item">
+      <el-table-column type="index" align="center" width="50"/>
+      <el-table-column prop="name" label="名称" align="center" min-width="10%"/>
+      <el-table-column prop="bookName" label="账本" align="center" min-width="10%"/>
+      <el-table-column label="类型" align="center" min-width="10%">
+        <template #default="scope">
+          <el-tag v-if="scope.row.type === 'expensive'" effect="dark" color="#CA6C65">支出</el-tag>
+          <el-tag v-else effect="dark" color="#6FBB69">收入</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="图标" align="center" min-width="10%">
+        <template #default="scope">
+          <i :class="scope.row.icon" :style="{color: scope.row.color, fontSize: '24px'}"></i>
+        </template>
+      </el-table-column>
+      <el-table-column fixed="right" label="操作" align="center" width="200">
+        <template #default="scope">
+          <el-button type="primary" @click="editCategoryClick(scope.row)">编辑</el-button>
+          <el-button type="danger" @click="deleteCategoryClick(scope.row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <el-dialog v-model="billInfo.billCategoryDialog.visible"
+               :title="billInfo.billCategoryDialog.title"
+               center width="500" @open="openDialogEvent">
+      <el-form ref="formRef" :model="billInfo.billCategoryDialog.data"
+               :rules="rules" label-width="100px">
+        <el-form-item label="账本名称" prop="bookName">
+          <el-select
+              v-model="billInfo.billCategoryDialog.data.bookName"
+              placeholder="请选择账本名称"
+              @focus="focusBookNameEvent">
+            <el-option
+                v-for="(item, index) in billInfo.billBookList"
+                :key="index" :label="item.name" :value="item.name"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="类别名称" prop="name">
+          <el-input v-model="billInfo.billCategoryDialog.data.name" autocomplete="off"
+                    placeholder="请输入类型名称"
+                    :maxlength="10" show-word-limit/>
+        </el-form-item>
+        <el-form-item label="类型名称" prop="type">
+          <el-radio-group v-model="billInfo.billCategoryDialog.data.type">
+            <el-radio value="expensive">支出</el-radio>
+            <el-radio value="income">收入</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="类别图标" prop="icon">
+          <el-input v-model="billInfo.billCategoryDialog.data.icon" autocomplete="off"
+                    placeholder="请输入类型图标"
+                    :maxlength="40" show-word-limit/>
+        </el-form-item>
+        <el-form-item label="图标颜色" prop="color">
+          <el-color-picker v-model="billInfo.billCategoryDialog.data.color" />
+        </el-form-item>
+        <el-form-item label="图标预览">
+          <i :class="billInfo.billCategoryDialog.data.icon"
+             :style="{color: billInfo.billCategoryDialog.data.color, fontSize: '24px'}"></i>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="cancelClick">取消</el-button>
+          <el-button type="primary" @click="confirmClick">确认</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { nextTick, onMounted, reactive, ref } from 'vue'
+import { useBillStore } from '@/store/bill'
+import { IBillBook, IBillCategory } from '@/types/bill'
+import { ElMessage, FormRules } from 'element-plus'
+import { billCategoryRules } from '@/utils/element/elRules'
+import { addBillCategoryApi, updateBillCategoryApi } from '@/apis/bill'
+import { deepCopyObject } from 'vue3-common/utils/dataUtil'
+import { tableHeaderStyle, tableRowStyle, tableCellStyle } from 'vue3-common/utils/elUtil'
+import type { IDialog, IHandleApi } from 'vue3-common/types'
+
+const formRef = ref()
+const rules = reactive<FormRules>(billCategoryRules)
+const billStore = useBillStore()
+
+const billInfo = reactive({
+  bookName: '日常账本',
+  setBillCategoryType: 'ADD' as IHandleApi,
+  billCategoryDialog: {
+    title: '',
+    visible: false,
+    data: {}
+  } as IDialog<IBillCategory>,
+  billBookList: [] as IBillBook[],
+  billCategoryList: [] as IBillCategory[]
+})
+
+onMounted(async () => {
+  await billStore.queryBillCategory()
+  queryBookCategoryByBookName(billInfo.bookName)
+})
+
+const selectBookNameEvent = (value: string) => {
+  queryBookCategoryByBookName(value)
+}
+
+const queryBookCategoryByBookName = (bookName: string) => {
+  billInfo.billCategoryList = billStore.billCategoryList.filter((item) => {
+    return item.bookName === bookName
+  })
+}
+
+/**
+ * 点击新增类别按钮
+ */
+const addNewCategoryClick = () => {
+  billInfo.setBillCategoryType = 'ADD'
+  billInfo.billCategoryDialog = {
+    title: '新增账单类别',
+    visible: true,
+    data: {
+      bookName: '',
+      name: '',
+      type: '',
+      icon: '',
+      color: ''
+    }
+  }
+}
+
+/**
+ * 点击编辑类别按钮
+ * @param category 类别
+ */
+const editCategoryClick = async (category: IBillCategory) => {
+  billInfo.setBillCategoryType = 'UPDATE'
+  billInfo.billCategoryDialog = {
+    title: '编辑账单类别',
+    visible: true,
+    data: deepCopyObject(category)
+  }
+}
+
+/**
+ * 点击删除类别按钮
+ * @param category 类别
+ */
+const deleteCategoryClick = (category: IBillCategory) => {
+  billInfo.setBillCategoryType = 'DELETE'
+  ElMessage.error('暂不支持该功能')
+}
+
+const openDialogEvent = () => {
+  nextTick(() => {
+    formRef.value.clearValidate()
+  })
+}
+
+const focusBookNameEvent = async () => {
+  await billStore.queryBillBook()
+  billInfo.billBookList = billStore.billBookList
+}
+
+const setBillCategoryApi = async (id?: number) => {
+  switch (billInfo.setBillCategoryType) {
+    case 'ADD':
+      await addBillCategoryApi(billInfo.billCategoryDialog.data)
+      ElMessage.success('新增账单类别成功')
+      break
+    case 'UPDATE':
+      await updateBillCategoryApi(id as number, billInfo.billCategoryDialog.data)
+      ElMessage.success('更新账单类别成功')
+      break
+    case 'DELETE':
+      ElMessage.success('删除账单类别成功')
+      break
+    default:
+      break
+  }
+  await billStore.queryBillCategory()
+  billInfo.billCategoryDialog.visible = false
+}
+
+const cancelClick = () => {
+  billInfo.billCategoryDialog.visible = false
+}
+
+const confirmClick = async () => {
+  await formRef.value.validate(async (valid) => {
+    if (valid) {
+      await setBillCategoryApi(billInfo.billCategoryDialog.data.id)
+      queryBookCategoryByBookName(billInfo.bookName)
+    }
+  })
+}
+</script>

src/views/admin/bill/pay.vue

@@ -0,0 +1,166 @@
+<template>
+  <div class="admin-module">
+    <div class="button-container">
+      <el-button type="primary" @click="addNewPayClick">新增账户</el-button>
+    </div>
+
+    <el-table
+        :data="billStore.billPayList"
+        border stripe
+        :header-cell-style="tableHeaderStyle()"
+        :cell-style="tableCellStyle()"
+        :row-style="tableRowStyle()"
+        style="width: 50%"
+        class="card-item">
+      <el-table-column type="index" align="center" width="50" />
+      <el-table-column prop="name" label="名称" align="center" min-width="10%"/>
+      <el-table-column label="图标" align="center" min-width="10%">
+        <template #default="scope">
+          <i :class="scope.row.icon" :style="{color: scope.row.color, fontSize: '24px'}"></i>
+        </template>
+      </el-table-column>
+      <el-table-column fixed="right" label="操作" align="center" width="200">
+        <template #default="scope">
+          <el-button type="primary" @click="editPayClick(scope.row)">编辑</el-button>
+          <el-button type="danger" @click="deletePayClick(scope.row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <el-dialog v-model="billInfo.billPayDialog.visible"
+               :title="billInfo.billPayDialog.title"
+               center width="500" @open="openDialogEvent">
+      <el-form ref="formRef" :model="billInfo.billPayDialog.data"
+               :rules="rules" label-width="100px">
+        <el-form-item label="账户名称" prop="name">
+          <el-input v-model="billInfo.billPayDialog.data.name" autocomplete="off"
+                    placeholder="请输入类型名称"
+                    :maxlength="10" show-word-limit/>
+        </el-form-item>
+        <el-form-item label="账户图标" prop="icon">
+          <el-input v-model="billInfo.billPayDialog.data.icon" autocomplete="off"
+                    placeholder="请输入类型图标"
+                    :maxlength="40" show-word-limit/>
+        </el-form-item>
+        <el-form-item label="图标颜色" prop="color">
+          <el-color-picker v-model="billInfo.billPayDialog.data.color" />
+        </el-form-item>
+        <el-form-item label="图标预览">
+          <i :class="billInfo.billPayDialog.data.icon"
+             :style="{color: billInfo.billPayDialog.data.color, fontSize: '24px'}"></i>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="cancelClick">取消</el-button>
+          <el-button type="primary" @click="confirmClick">确认</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { nextTick, onMounted, reactive, ref } from 'vue'
+import { useBillStore } from '@/store/bill'
+import { ElMessage, FormRules } from 'element-plus'
+import { IBillPay } from '@/types/bill'
+import { billPayRules } from '@/utils/element/elRules'
+import { deepCopyObject } from 'vue3-common/utils/dataUtil'
+import { addBillPayApi, updateBillPayApi } from '@/apis/bill'
+import { tableCellStyle, tableHeaderStyle, tableRowStyle } from 'vue3-common/utils/elUtil'
+import type { IDialog, IHandleApi } from 'vue3-common/types'
+
+const formRef = ref()
+const rules = reactive<FormRules>(billPayRules)
+const billStore = useBillStore()
+
+const billInfo = reactive({
+  setBillPayType: 'ADD' as IHandleApi,
+  billPayDialog: {
+    title: '',
+    visible: false,
+    data: {}
+  } as IDialog<IBillPay>
+})
+
+onMounted(async () => {
+  await billStore.queryBillPay()
+})
+
+/**
+ * 点击新增账户按钮
+ */
+const addNewPayClick = () => {
+  billInfo.setBillPayType = 'ADD'
+  billInfo.billPayDialog = {
+    title: '新增账户',
+    visible: true,
+    data: {
+      name: '',
+      icon: '',
+      color: ''
+    }
+  }
+}
+
+/**
+ * 点击编辑账户按钮
+ * @param pay 账户
+ */
+const editPayClick = async (pay: IBillPay) => {
+  billInfo.setBillPayType = 'UPDATE'
+  billInfo.billPayDialog = {
+    title: '编辑账户',
+    visible: true,
+    data: deepCopyObject(pay)
+  }
+}
+
+/**
+ * 点击删除账户按钮
+ * @param pay 账户
+ */
+const deletePayClick = (pay: IBillPay) => {
+  billInfo.setBillPayType = 'DELETE'
+  ElMessage.error('暂不支持该功能')
+}
+
+const openDialogEvent = () => {
+  nextTick(() => {
+    formRef.value.clearValidate()
+  })
+}
+
+const setBillBookApi = async (id?: number) => {
+  switch (billInfo.setBillPayType) {
+    case 'ADD':
+      await addBillPayApi(billInfo.billPayDialog.data)
+      ElMessage.success('新增账户成功')
+      break
+    case 'UPDATE':
+      await updateBillPayApi(id as number, billInfo.billPayDialog.data)
+      ElMessage.success('更新账户成功')
+      break
+    case 'DELETE':
+      ElMessage.success('删除账户成功')
+      break
+    default:
+      break
+  }
+  await billStore.queryBillPay()
+  billInfo.billPayDialog.visible = false
+}
+
+const cancelClick = () => {
+  billInfo.billPayDialog.visible = false
+}
+
+const confirmClick = async () => {
+  await formRef.value.validate((valid) => {
+    if (valid) {
+      setBillBookApi(billInfo.billPayDialog.data.id)
+    }
+  })
+}
+</script>

src/views/admin/blog/article.vue

@@ -0,0 +1,100 @@
+<template>
+  <div class="admin-module">
+    <div class="button-container">
+      <el-button type="primary" @click="addNewBlogClick">新增文章</el-button>
+    </div>
+
+    <el-table
+        :data="blogStore.blogList"
+        border stripe
+        :header-cell-style="tableHeaderStyle()"
+        :cell-style="tableCellStyle()"
+        :row-style="tableRowStyle()"
+        class="card-item">
+      <el-table-column type="index" align="center" width="50" />
+      <el-table-column prop="title" label="标题" align="center" min-width="10%"/>
+      <el-table-column prop="category" label="类别" align="center" min-width="10%" />
+      <el-table-column label="精品" align="center" min-width="10%">
+        <template #default="scope">
+          <el-tag type="success" v-if="scope.row.isGreat">是</el-tag>
+          <el-tag type="danger" v-else>否</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="置顶" align="center" min-width="10%">
+        <template #default="scope">
+          <el-tag type="success" v-if="scope.row.topValue > 1">是</el-tag>
+          <el-tag type="danger" v-else>否</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column prop="wordCount" label="字数" align="center" min-width="10%" />
+      <el-table-column prop="visitCount" label="阅读次数" align="center" min-width="10%" />
+      <el-table-column fixed="right" label="操作" align="center" width="200">
+        <template #default="scope">
+          <el-button type="primary" @click="editBlogClick(scope.row)">编辑</el-button>
+          <el-button type="danger" @click="deleteBlogClick(scope.row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <el-pagination
+        v-model:current-page="blogStore.adminPageInfo.currentPage"
+        :page-size="blogStore.adminPageInfo.pageSize"
+        :total="blogStore.adminPageInfo.totalSize"
+        layout="total, prev, pager, next"
+        @change="changePageClick"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted } from 'vue'
+import { useBlogStore } from '@/store/blog.ts'
+import { IBlog } from '@/types/blog.ts'
+import { commonElMessageBox, tableCellStyle, tableHeaderStyle, tableRowStyle } from 'vue3-common/utils/elUtil'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+const blogStore = useBlogStore()
+
+onMounted(async () => {
+  await blogStore.queryAdminBlog()
+})
+
+/**
+ * 点击切换博客页数按钮
+ * @param page 页码
+ * @param pageSize 每页大小
+ */
+const changePageClick = async (page: number, pageSize: number) => {
+  blogStore.adminPageInfo.currentPage = page
+  blogStore.adminPageInfo.pageSize = pageSize
+  await blogStore.queryAdminBlog()
+}
+
+/**
+ * 点击新增博客按钮
+ */
+const addNewBlogClick = () => {
+  router.push({ name: 'AdminBlogDetailId', params: { id: 0 } })
+}
+
+/**
+ * 点击编辑博客按钮
+ * @param blog 博客
+ */
+const editBlogClick = async (blog: IBlog) => {
+  await router.push({ name: 'AdminBlogDetailId', params: { id: blog.id } })
+}
+
+/**
+ * 点击删除博客按钮
+ * @param blog 博客
+ */
+const deleteBlogClick = (blog: IBlog) => {
+  blogStore.blogApiType = 'DELETE'
+
+  commonElMessageBox('是否确认删除该博客?').then(() => {
+    blogStore.handleBlogApi(blog.id)
+  })
+}
+</script>

src/views/admin/blog/category.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="admin-module">
+    <div class="button-container">
+      <el-button type="primary" @click="addNewCategoryClick">新增类别</el-button>
+    </div>
+
+    <el-table
+        :data="blogStore.blogCategoryList"
+        border stripe
+        :header-cell-style="tableHeaderStyle()"
+        :cell-style="tableCellStyle()"
+        :row-style="tableRowStyle()"
+        style="width: 50%"
+        class="card-item">
+      <el-table-column type="index" align="center" width="50" />
+      <el-table-column prop="name" label="名称" align="center" min-width="10%"/>
+      <el-table-column prop="count" label="数量" align="center" min-width="10%" />
+      <el-table-column fixed="right" label="操作" align="center" width="200">
+        <template #default="scope">
+          <el-button type="primary" @click="editCategoryClick(scope.row)">编辑</el-button>
+          <el-button type="danger" @click="deleteCategoryClick(scope.row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted } from 'vue'
+import { useBlogStore } from '@/store/blog.ts'
+import { IBlogCategory } from '@/types/blog.ts'
+import { ElMessageBox } from 'element-plus'
+import { tableCellStyle, tableHeaderStyle, tableRowStyle } from 'vue3-common/utils/elUtil'
+
+const blogStore = useBlogStore()
+
+onMounted(async () => {
+  await blogStore.queryBlogCategory()
+})
+
+/**
+ * 点击新增类别按钮
+ */
+const addNewCategoryClick = () => {
+  ElMessageBox.prompt('请输入类别名称', '新增类别', {
+    confirmButtonText: '确认',
+    cancelButtonText: '取消',
+    inputPlaceholder: '请输入类别名称',
+    inputPattern: /^.{0,10}$/,
+    inputErrorMessage: '请输入10字以内的类别名称'
+  })
+    .then(({ value }) => {
+      console.log(value)
+    })
+}
+
+/**
+ * 点击编辑类别按钮
+ * @param category 类别
+ */
+const editCategoryClick = async (category: IBlogCategory) => {
+  ElMessageBox.prompt('请输入类别名称', '编辑类别', {
+    confirmButtonText: '确认',
+    cancelButtonText: '取消',
+    inputValue: category.name,
+    inputPlaceholder: '请输入类别名称',
+    inputPattern: /^.{0,10}$/,
+    inputErrorMessage: '请输入10字以内的类别名称'
+  })
+    .then(({ value }) => {
+      console.log(value)
+    })
+}
+
+/**
+ * 点击删除类别按钮
+ * @param category 类别
+ */
+const deleteCategoryClick = (category: IBlogCategory) => {
+
+}
+</script>

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

@@ -0,0 +1,158 @@
+<template>
+  <div class="admin-module admin-blog-detail">
+    <el-form ref="formRef" :model="blogStore.newBlog"
+             :inline="true" :rules="rules"
+             class="blog-form">
+      <el-form-item label="标题" name="title" prop="title">
+        <el-input v-model="blogStore.newBlog.title"
+                  :maxlength="20" show-word-limit clearable
+                  style="width: 300px"/>
+      </el-form-item>
+
+      <el-form-item label="分类" name="category" prop="category">
+        <el-select
+            v-model="blogStore.newBlog.category"
+            filterable allow-create placeholder="请选择分类" clearable
+            @focus="focusCategoryEvent" style="width: 150px">
+          <el-option
+              v-for="(value, index) in blogStore.blogCategoryList"
+              :key="index" :label="value.name" :value="value.name"/>
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="置顶值">
+        <el-input-number v-model="blogStore.newBlog.topValue"
+                         :min="1" :max="10" style="width: 120px"/>
+      </el-form-item>
+
+      <el-form-item label="精品">
+        <el-switch v-model="blogStore.newBlog.isGreat"/>
+      </el-form-item>
+    </el-form>
+
+    <MdEditor v-model="blogStore.newBlog.content" @onUploadImg="onUploadImg"/>
+
+    <div class="button-container">
+      <el-button type="primary" @click="submitFormEvent">保存</el-button>
+    </div>
+
+    <div class="back-button">
+      <el-button type="primary" @click="backClick">返回</el-button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, onMounted, nextTick } from 'vue'
+import { useBlogStore } from '@/store/blog.ts'
+import { MdEditor } from 'md-editor-v3'
+import 'md-editor-v3/lib/style.css'
+import { ElLoading, ElMessage, FormInstance, FormRules } from 'element-plus'
+import { blogRules } from '@/utils/element/elRules.ts'
+import { useRouter, useRoute } from 'vue-router'
+import { validateBlogImage } from '@/utils/blog/blogUtil'
+import { doUploadFile } from 'vue3-common/utils/fileUtil'
+import { fileServiceUrl, serviceFileRootPath } from '@/utils'
+
+const rules = reactive<FormRules>(blogRules)
+
+const formRef = ref<FormInstance>()
+const route = useRoute()
+const router = useRouter()
+const blogStore = useBlogStore()
+
+const focusCategoryEvent = async () => {
+  await blogStore.queryAdminBlogCategory()
+}
+
+onMounted(async () => {
+  await nextTick(() => {
+    formRef.value?.clearValidate()
+  })
+
+  const blogId = route.params.id as number
+  if (blogId > 0) {
+    blogStore.blogApiType = 'UPDATE'
+    await blogStore.queryAdminBlogById(route.params.id as number)
+    blogStore.newBlog = blogStore.currentBlog
+  } else {
+    blogStore.blogApiType = 'ADD'
+    blogStore.newBlog = blogStore.getEmptyBlog()
+  }
+})
+
+/**
+ * 校验博客
+ */
+const validateBlog = (): boolean => {
+  if (blogStore.newBlog.content === '') {
+    ElMessage.error('请输入博客内容')
+    return false
+  }
+
+  return true
+}
+
+/**
+ * 提交表单事件
+ */
+const submitFormEvent = () => {
+  // 表单校验
+  formRef.value?.validate().then(async () => {
+    if (validateBlog()) {
+      await blogStore.handleBlogApi()
+      await router.push('/admin/blog/article')
+    }
+  })
+}
+
+const onUploadImg = async (files: File[], callback) => {
+  const loading = ElLoading.service({
+    lock: true,
+    text: '正在上传图片 请等待',
+    background: 'rgba(0, 0, 0, 0.7)'
+  })
+
+  if (validateBlogImage(files)) {
+    const result = await doUploadFile(fileServiceUrl, files[0], blogStore.blogImagePath, false)
+    // 显示在markdown中
+    // 注意这里需要是数组的形式
+    const urlArray = []
+    urlArray.push({
+      url: `${serviceFileRootPath}${result.url.replace(/\\/g, '/')}`,
+      alt: '暂无图片',
+      title: files[0].name
+    })
+    callback(urlArray)
+  }
+
+  loading.close()
+}
+
+const backClick = () => {
+  router.push('/admin/blog/article')
+}
+</script>
+
+<style lang="scss">
+.admin-blog-detail {
+  position: relative;
+
+  @media (max-width: 1200px) {
+    .blog-form {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+
+  .md-editor {
+    height: 80vh;
+  }
+
+  .back-button {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+  }
+}
+</style>

src/views/admin/blog/visit.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="admin-module">
+    <el-table
+        :data="blogInfo.blogVisitList"
+        border stripe
+        :header-cell-style="tableHeaderStyle()"
+        :cell-style="tableCellStyle()"
+        :row-style="tableRowStyle()"
+        style="width: 100%"
+        class="card-item">
+      <el-table-column type="index" align="center" width="50" />
+      <el-table-column prop="ip" label="IP" align="center" min-width="10%"/>
+      <el-table-column prop="os" label="平台" align="center" min-width="10%" />
+      <el-table-column prop="browser" label="浏览器" align="center" min-width="10%" />
+      <el-table-column prop="uri" label="路径" align="center" min-width="10%" />
+      <el-table-column prop="title" label="博客标题" align="center" min-width="10%" />
+      <el-table-column prop="visitTime" label="访问时间" align="center" min-width="10%" />
+    </el-table>
+
+    <el-pagination
+        v-model:current-page="blogInfo.pageInfo.currentPage"
+        :page-size="blogInfo.pageInfo.pageSize"
+        :total="blogInfo.pageInfo.totalSize"
+        layout="total, prev, pager, next"
+        @change="changePageClick"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, reactive } from 'vue'
+import { IBlogVisit } from '@/types/blog.ts'
+import { queryBlogVisitApi } from '@/apis/blog.ts'
+import { tableCellStyle, tableHeaderStyle, tableRowStyle } from 'vue3-common/utils/elUtil'
+
+const blogInfo = reactive({
+  blogVisitList: [] as IBlogVisit[],
+  pageInfo: {
+    currentPage: 1,
+    pageSize: 15,
+    totalSize: 1
+  }
+})
+
+onMounted(async () => {
+  await queryBlogVisit()
+})
+
+/**
+ * 切换页码
+ * @param page 当前页码
+ * @param pageSize 页码大小
+ */
+const changePageClick = async (page: number, pageSize: number) => {
+  blogInfo.pageInfo.currentPage = page
+  blogInfo.pageInfo.pageSize = pageSize
+  await queryBlogVisit()
+}
+
+/**
+ * 查看博客访问记录
+ */
+const queryBlogVisit = async () => {
+  const { currentPage, pageSize } = blogInfo.pageInfo
+  const result = await queryBlogVisitApi(currentPage, pageSize)
+  blogInfo.blogVisitList = result.records
+  blogInfo.pageInfo.totalSize = result.total
+}
+</script>

src/views/admin/dashboard/index.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="admin-module">
+    首页
+  </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped lang="scss">
+
+</style>

src/views/admin/meta.ts

@@ -0,0 +1,82 @@
+import { IRouteMetaConfig } from 'vue3-common/types'
+
+export const adminMeta: IRouteMetaConfig = {
+  '/admin/dashboard': {
+    title: '首页',
+    icon: 'admin-dashboard',
+    order: 1,
+    redirect: '/admin/dashboard/index'
+  },
+  '/admin/dashboard/index': {
+    title: '首页',
+    icon: ''
+  },
+  '/admin/blog': {
+    title: '博客管理',
+    icon: 'admin-blog',
+    order: 2,
+    redirect: '/admin/blog/article'
+  },
+  '/admin/blog/article': {
+    title: '文章管理',
+    icon: '',
+    order: 1
+  },
+  '/admin/blog/category': {
+    title: '类别管理',
+    icon: '',
+    order: 2
+  },
+  '/admin/blog/visit': {
+    title: '访问记录',
+    icon: '',
+    order: 3
+  },
+  '/admin/blog/detail/:id': {
+    title: '详细',
+    icon: '',
+    order: 4,
+    hidden: true
+  },
+  '/admin/bill': {
+    title: '账单管理',
+    icon: 'admin-bill',
+    order: 3,
+    redirect: '/admin/bill/book'
+  },
+  '/admin/bill/book': {
+    title: '账本管理',
+    icon: '',
+    order: 1
+  },
+  '/admin/bill/pay': {
+    title: '账户管理',
+    icon: '',
+    order: 2
+  },
+  '/admin/bill/category': {
+    title: '类别管理',
+    icon: '',
+    order: 3
+  },
+  '/admin/quartz': {
+    title: '定时任务',
+    icon: 'admin-quartz',
+    order: 4,
+    redirect: '/admin/quartz/index'
+  },
+  '/admin/quartz/index': {
+    title: '定时任务',
+    icon: ''
+  },
+  '/admin/account': {
+    title: '账号管理',
+    icon: 'admin-account',
+    order: 5,
+    redirect: '/admin/account/index'
+  },
+  '/admin/account/index': {
+    title: '账号管理',
+    icon: ''
+  }
+}

src/views/admin/quartz/index.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="admin-module">
+    <el-table
+        :data="quartzInfo.quartzList"
+        border stripe
+        :header-cell-style="tableHeaderStyle()"
+        :cell-style="tableCellStyle()"
+        :row-style="tableRowStyle()"
+        style="width: 100%"
+        class="card-item">
+      <el-table-column type="index" align="center" width="50" />
+      <el-table-column prop="group" label="任务组别" align="center" min-width="20%"/>
+      <el-table-column label="任务类型" align="center" min-width="20%">
+        <template #default="scope">
+          <el-tag v-if="scope.row.type === 'EMAIL'" type="success">邮件提醒</el-tag>
+          <el-tag v-else type="danger">未知</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column prop="content" label="任务内容" align="center"/>
+      <el-table-column label="执行时间" align="center" width="200">
+        <template #default="scope">
+          {{ scope.row.executeTime }}
+        </template>
+      </el-table-column>
+      <el-table-column label="任务状态" align="center" min-width="20%">
+        <template #default="scope">
+          <el-tag v-if="scope.row.status === 'NONE'" type="danger">不存在</el-tag>
+          <el-tag v-else-if="scope.row.status === 'NORMAL'" type="primary">正常执行</el-tag>
+          <el-tag v-else-if="scope.row.status === 'PAUSED'" type="warning">暂停</el-tag>
+          <el-tag v-else-if="scope.row.status === 'COMPLETE'" type="success">完成</el-tag>
+          <el-tag v-else-if="scope.row.status === 'ERROR'" type="danger">执行出错</el-tag>
+          <el-tag v-else-if="scope.row.status === 'BLOCKED'" type="danger">阻塞</el-tag>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, reactive } from 'vue'
+import { tableCellStyle, tableHeaderStyle, tableRowStyle } from 'vue3-common/utils/elUtil'
+import { IQuartzInfo } from '@/types/quartz'
+import { queryQuartzApi } from '@/apis/quartz'
+
+const quartzInfo = reactive({
+  quartzList: [] as IQuartzInfo[]
+})
+
+onMounted(async () => {
+  quartzInfo.quartzList = await queryQuartzApi()
+})
+</script>

src/views/blog/archive.vue

@@ -0,0 +1,7 @@
+<template>
+  <blog-archive />
+</template>
+
+<script setup lang="ts">
+import BlogArchive from '@/components/Blog/Archive/BlogArchive.vue'
+</script>

src/views/blog/category.vue

@@ -0,0 +1,7 @@
+<template>
+  <blog-category />
+</template>
+
+<script setup lang="ts">
+import BlogCategory from '@/components/Blog/Category/BlogCategory.vue'
+</script>

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

@@ -0,0 +1,7 @@
+<template>
+  <blog-category-detail />
+</template>
+
+<script setup lang="ts">
+import BlogCategoryDetail from '@/components/Blog/Category/BlogCategoryDetail.vue'
+</script>

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

@@ -0,0 +1,7 @@
+<template>
+  <blog-detail/>
+</template>
+
+<script setup lang="ts">
+import BlogDetail from '@/components/Blog/Content/BlogDetail.vue'
+</script>

src/views/blog/meta.ts

@@ -0,0 +1,8 @@
+import { IRouteMetaConfig } from 'vue3-common/types'
+
+export const blogMeta: IRouteMetaConfig = {
+  '/blog': {
+    path: '/blog',
+    redirect: '/blog/overview'
+  }
+}

src/views/blog/overview.vue

@@ -0,0 +1,7 @@
+<template>
+  <blog-overview />
+</template>
+
+<script setup lang="ts">
+import BlogOverview from '@/components/Blog/Content/BlogOverview.vue'
+</script>

src/views/home/calendar/date.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="date-view common-view">
+
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { usePlanStore } from '@/store/plan.ts'
+import { onMounted } from 'vue'
+
+const planStore = usePlanStore()
+
+onMounted(() => {
+
+})
+
+const addClick = () => {
+
+}
+</script>

src/views/home/calendar/plan.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="common-view plan-view">
+    <div class="body-container">
+      <div class="left-container">
+        <plan-stats />
+
+        <plan-calendar />
+      </div>
+
+      <div class="right-container">
+        <plan-query />
+
+        <plan-list />
+      </div>
+
+      <el-button type="primary" :icon="Plus" circle
+                 @click="addNewPlanClick" class="add-new" />
+    </div>
+
+    <plan-dialog />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import PlanCalendar from '@/components/Home/Plan/PlanCalendar.vue'
+import PlanStats from '@/components/Home/Plan/PlanStats.vue'
+import PlanList from '@/components/Home/Plan/PlanList.vue'
+import PlanQuery from '@/components/Home/Plan/PlanQuery.vue'
+import PlanDialog from '@/components/Home/Plan/PlanDialog.vue'
+import { Plus } from '@element-plus/icons-vue'
+import { usePlanStore } from '@/store/plan.ts'
+import { onMounted } from 'vue'
+
+const planStore = usePlanStore()
+
+onMounted(() => {
+  planStore.refreshInfo()
+})
+
+const addNewPlanClick = () => {
+  planStore.planApiType = 'ADD'
+  planStore.planDialog = {
+    title: '新增计划',
+    visible: true,
+    data: planStore.getEmptyPlan()
+  }
+}
+</script>
+
+<style lang="scss">
+@use "@/styles/home/plan.module.scss";
+</style>

src/views/home/life/food.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="food-view common-view">
+    <div class="body-container">
+      <div class="left-container">
+        <food-stats />
+
+        <food-recipe-list />
+      </div>
+
+      <div class="right-container">
+        <food-query />
+
+        <food-daily-list v-if="foodStore.queryDateType === 'year'" />
+        <food-calendar v-if="foodStore.queryDateType === 'month'" />
+
+        <el-button v-if="isLargeScreen()"
+                   type="primary" :icon="Plus" circle
+                   @click="addFoodWorkClick" class="add-new" />
+      </div>
+    </div>
+
+    <food-dialog />
+    <food-material-dialog />
+    <food-step-dialog />
+    <food-record-dialog />
+  </div>
+</template>
+
+<script setup lang="ts">
+import FoodQuery from '@/components/Home/Food/FoodQuery.vue'
+import FoodStats from '@/components/Home/Food/FoodStats.vue'
+import FoodRecipeList from '@/components/Home/Food/FoodRecipeList.vue'
+import FoodCalendar from '@/components/Home/Food/FoodCalendar.vue'
+import FoodDailyList from '@/components/Home/Food/FoodDailyList.vue'
+import FoodDialog from '@/components/Home/Food/FoodDialog.vue'
+import FoodMaterialDialog from '@/components/Home/Food/Form/FoodMaterialDialog.vue'
+import FoodStepDialog from '@/components/Home/Food/Form/FoodStepDialog.vue'
+import FoodRecordDialog from '@/components/Home/Food/Form/FoodRecordDialog.vue'
+import { Plus } from '@element-plus/icons-vue'
+import { onMounted } from 'vue'
+import { useFoodStore } from '@/store/food.ts'
+import { isLargeScreen } from '@/utils'
+
+const foodStore = useFoodStore()
+
+onMounted(async () => {
+  await foodStore.refreshInfo()
+})
+
+const addFoodWorkClick = () => {
+  foodStore.foodRecordApiType = 'ADD'
+  foodStore.foodRecordDialog = {
+    title: '新增记录',
+    visible: true,
+    data: foodStore.getEmptyFoodRecord()
+  }
+}
+</script>
+
+<style lang="scss">
+@use "@/styles/home/food.module.scss";
+</style>

src/views/home/life/food[id].vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="life-detail">
+    <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>
+
+    <el-button type="primary" class="back-button" @click="backClick">返回</el-button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useFoodStore } from '@/store/food.ts'
+import { useRouter, 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 router = useRouter()
+const route = useRoute()
+
+onMounted(() => {
+  foodStore.queryFoodRecipe(route.params.id as number)
+})
+
+const backClick = () => {
+  router.push({ path: '/home/life/food' })
+}
+</script>
+
+<style lang="scss">
+@use "@/styles/home/life.detail.module.scss";
+</style>

src/views/home/life/travel.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="travel-view common-view">
+    <div class="body-container">
+      <div class="left-container">
+        <travel-stats />
+
+        <travel-spot-list />
+      </div>
+
+      <div class="right-container">
+        <travel-query />
+
+        <travel-daily-list v-if="travelStore.queryDateType === 'year'" />
+        <travel-calendar v-if="travelStore.queryDateType === 'month'" />
+
+        <el-button v-if="isLargeScreen()"
+                   type="primary" :icon="Plus" circle
+                   @click="addTravelRecordClick" class="add-new" />
+      </div>
+    </div>
+
+    <travel-dialog />
+    <travel-record-dialog />
+  </div>
+</template>
+
+<script setup lang="ts">
+import TravelQuery from '@/components/Home/Travel/TravelQuery.vue'
+import TravelStats from '@/components/Home/Travel/TravelStats.vue'
+import TravelSpotList from '@/components/Home/Travel/TravelSpotList.vue'
+import TravelCalendar from '@/components/Home/Travel/TravelCalendar.vue'
+import TravelDailyList from '@/components/Home/Travel/TravelDailyList.vue'
+import TravelRecordDialog from '@/components/Home/Travel/Form/TravelRecordDialog.vue'
+import TravelDialog from '@/components/Home/Travel/TravelDialog.vue'
+import { Plus } from '@element-plus/icons-vue'
+import { onMounted } from 'vue'
+import { useTravelStore } from '@/store/travel.ts'
+import { isLargeScreen } from '@/utils'
+
+const travelStore = useTravelStore()
+
+onMounted(async () => {
+  await travelStore.refreshInfo()
+})
+
+const addTravelRecordClick = () => {
+  travelStore.travelRecordApiType = 'ADD'
+  travelStore.travelRecordDialog = {
+    title: '新增记录',
+    visible: true,
+    data: travelStore.getEmptyTravelRecord()
+  }
+}
+</script>
+
+<style lang="scss">
+@use "@/styles/home/travel.module.scss";
+</style>

src/views/home/life/travel[id].vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="life-detail">
+    <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>
+
+    <el-button type="primary" class="back-button" @click="backClick">返回</el-button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useTravelStore } from '@/store/travel.ts'
+import { useRouter, 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 router = useRouter()
+const route = useRoute()
+
+onMounted(() => {
+  travelStore.queryTravelSpot(route.params.id as number)
+})
+
+const backClick = () => {
+  router.push({ path: '/home/life/travel' })
+}
+</script>
+
+<style lang="scss">
+@use "@/styles/home/life.detail.module.scss";
+</style>

src/views/home/meta.ts

@@ -0,0 +1,68 @@
+import { IRouteMetaConfig } from 'vue3-common/types'
+
+export const homeMeta: IRouteMetaConfig = {
+  '/home/property': {
+    title: '家庭资产',
+    icon: 'home-property',
+    order: 1,
+    redirect: '/home/property/bill'
+  },
+  '/home/property/bill': {
+    title: '收支记录',
+    icon: ''
+  },
+  '/home/life': {
+    title: '生活记录',
+    icon: 'home-life',
+    order: 2,
+    redirect: '/home/life/food'
+  },
+  '/home/life/food': {
+    title: '美食记录',
+    icon: ''
+  },
+  '/home/life/food/:id': {
+    title: '美食展示',
+    icon: '',
+    hidden: true
+  },
+  '/home/life/travel': {
+    title: '旅行记录',
+    icon: ''
+  },
+  '/home/life/travel/:id': {
+    title: '旅行展示',
+    icon: '',
+    hidden: true
+  },
+  '/home/calendar': {
+    title: '时程印记',
+    icon: 'home-calendar',
+    order: 3,
+    redirect: '/home/calendar/plan'
+  },
+  '/home/calendar/plan': {
+    title: '日程计划',
+    icon: ''
+  },
+  '/home/calendar/date': {
+    title: '纪念日',
+    icon: ''
+  },
+  '/home/others': {
+    title: '友情链接',
+    icon: 'home-link',
+    order: 4,
+    redirect: '/home/others/admin'
+  },
+  '/home/others/admin': {
+    title: '管理系统',
+    icon: '',
+    redirect: '/admin'
+  },
+  '/home/others/blog': {
+    title: '个人博客',
+    icon: '',
+    redirect: '/blog'
+  }
+}

src/views/home/others/admin.vue

@@ -0,0 +1,7 @@
+<template>
+  <div>
+  </div>
+</template>
+
+<script setup lang="ts">
+</script>

src/views/home/others/blog.vue

@@ -0,0 +1,7 @@
+<template>
+  <div>
+  </div>
+</template>
+
+<script setup lang="ts">
+</script>

src/views/home/property/bill.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="bill-view common-view">
+    <div class="body-container">
+      <div class="left-container">
+        <bill-stats />
+
+        <bill-chart />
+      </div>
+
+      <div class="right-container">
+        <bill-query/>
+
+        <bill-daily-list v-if="billStore.billDateType === 'year'"/>
+        <bill-calendar v-if="billStore.billDateType === 'month'" />
+      </div>
+
+      <el-button v-if="isLargeScreen()"
+                 type="primary" :icon="Plus" circle
+                 @click="addNewBillRecordClick" class="add-new" />
+    </div>
+
+    <bill-dialog />
+  </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 BillDailyList from '@/components/Home/Bill/BillDailyList.vue'
+import BillCalendar from '@/components/Home/Bill/BillCalendar.vue'
+import BillDialog from '@/components/Home/Bill/BillDialog.vue'
+import { Plus } from '@element-plus/icons-vue'
+import { onMounted } from 'vue'
+import { useBillStore } from '@/store/bill.ts'
+import { isLargeScreen } from '@/utils'
+
+const billStore = useBillStore()
+
+onMounted(async () => {
+  await billStore.refreshInfo()
+})
+
+const addNewBillRecordClick = () => {
+  billStore.billApiType = 'ADD'
+  billStore.billDialog = {
+    title: '新增账单',
+    visible: true,
+    data: billStore.getEmptyBillRecord()
+  }
+}
+</script>
+
+<style lang="scss">
+@use "@/styles/home/bill.module.scss";
+</style>

src/views/login/index.vue

@@ -0,0 +1,154 @@
+<template>
+  <div class="login-view">
+    <div class="login-container">
+      <div class="login-title">
+        <span class="title">
+          {{ loginInfo.title }}
+        </span>
+      </div>
+
+      <common-login v-if="authStore.loginType === 'common'"
+                    class="animate__animated animate__bounceIn"/>
+      <phone-login v-if="authStore.loginType === 'phone'"
+                   class="animate__animated animate__bounceIn"/>
+      <email-login v-if="authStore.loginType === 'email'"
+                   class="animate__animated animate__bounceIn"/>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import CommonLogin from '@/components/Home/Login/CommonLogin.vue'
+import PhoneLogin from '@/components/Home/Login/PhoneLogin.vue'
+import EmailLogin from '@/components/Home/Login/EmailLogin.vue'
+import { useAuthStore } from '@/store/auth'
+import { onMounted, onUnmounted, reactive } from 'vue'
+
+const authStore = useAuthStore()
+
+const loginInfo = reactive({
+  title: 'Sweet Hut'
+})
+
+onMounted(() => {
+  // authStore.resetLoginForm()
+})
+
+onUnmounted(() => {
+  authStore.stopCountdown()
+})
+</script>
+
+<style lang="scss">
+$form-item-width: 300px;
+$login-height: 500px;
+
+.login-view {
+  height: 100%;
+  display: grid;
+  place-items: center;
+
+  .login-container {
+    // height: $login-height;
+    padding: 30px;
+    border-radius: 15px;
+    box-shadow: 2px 2px 5px #D3D3D3, 4px 4px 10px #A9A9A9;
+
+    display: flex;
+    flex-direction: column;
+    // justify-content: center;
+    align-items: center;
+    gap: 1vh;
+
+    .login-title {
+      margin-bottom: 20px;
+      .title {
+        font-size: 1.5rem;
+      }
+    }
+
+    .common-login {
+      flex-grow: 1;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      align-items: center;
+      gap: 1vh;
+
+      .login-form {
+        .el-form-item {
+          width: $form-item-width;
+        }
+
+        .login-option {
+          .el-form-item__content {
+            justify-content: space-between;
+          }
+        }
+      }
+
+      .login-type {
+        width: 100%;
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+      }
+
+      .login-others-type {
+        margin-top: 5vh;
+        width: 100%;
+
+        .el-divider {
+          .el-divider__text {
+            color: #A9A9A9;
+            font-size: 0.8rem;
+          }
+        }
+
+        .type-list {
+          display: flex;
+          justify-content: space-evenly;
+
+          i {
+            font-size: 1.2rem;
+          }
+
+          i:hover {
+            cursor: pointer;
+            filter: brightness(1.5);
+          }
+        }
+      }
+
+      .login-register {
+        margin-top: 10px;
+        display: flex;
+        justify-content: center;
+        span {
+          font-size: 0.9rem;
+        }
+      }
+    }
+
+    .phone-login, .email-login {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      gap: 1vh;
+
+      .login-form {
+        .el-form-item {
+          width: $form-item-width;
+        }
+
+        .code-item {
+          .el-form-item__content {
+            flex-wrap: nowrap;
+            gap: 10px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

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>

src/views/mobile/index.vue

@@ -0,0 +1,186 @@
+<template>
+  <main class="mobile-home">
+    <div class="home-title">
+      <div class="title-container">
+        <img :src="getAssetsImageFile('logo/logo.png')" alt="暂无图片" class="logo"/>
+        <span class="title">Sweet Hut</span>
+      </div>
+
+      <el-button circle @click="appStore.toggleDark" class="theme-button">
+        {{ appStore.isDark ? '🌙' : '☀️' }}
+      </el-button>
+    </div>
+
+    <weather-time-card />
+
+<!--    <el-carousel height="150px">-->
+<!--      <el-carousel-item v-for="item in 4" :key="item">-->
+<!--        <h3>{{ item }}</h3>-->
+<!--      </el-carousel-item>-->
+<!--    </el-carousel>-->
+
+    <div class="module-list">
+      <module-card icon="iconfont icon-fenlei" color="#00CED1"
+                   title="博客文章" sub-title="分享学习点滴"
+                   router="/mobile-home/blog/overview"/>
+
+      <module-card icon="iconfont icon-zhangdan" color="#FFCC00"
+                   title="账单记录" sub-title="收支一目了然"
+                   router="/mobile-home/bill/data"/>
+
+      <module-card icon="iconfont icon-caipu" color="#006400"
+                   title="美食记录" sub-title="品味人间烟火"
+                   router="/mobile-home/food/recipe"/>
+
+      <module-card icon="iconfont icon-jingdian" color="#FF9966"
+                   title="旅行记录" sub-title="足迹遍及四方"
+                   router="/mobile-home/travel/spot"/>
+
+      <module-card icon="iconfont icon-wupin" color="#19107E"
+                   title="物品记录" sub-title="收纳生活琐碎"
+                   router="/mobile-home/product/list"/>
+
+      <module-card icon="iconfont icon-paiban" color="#9933FF"
+                   title="日程安排" sub-title="规划每日时光"
+                   router="/mobile-home/plan/calendar"/>
+
+      <module-card icon="iconfont icon-richeng" color="#228B22"
+                   title="纪念日" sub-title="铭记重要时刻"
+                   router="/mobile-home/anniversary/list"/>
+
+      <module-card icon="iconfont icon-yuejing" color="#DE3163"
+                   title="月经记录" sub-title="关注健康周期"
+                   router="/mobile-home/period/calendar"/>
+
+      <module-card icon="iconfont icon-riji" color="#FF69B4"
+                   title="时光手账" sub-title="书写流动岁月"
+                   router="/mobile-home/journal/record"/>
+
+      <module-card icon="iconfont icon-jixiao" color="#003366"
+                   title="绩效统计" sub-title="绩刻拼搏印记 "
+                   router="/mobile-home/kpi/record"/>
+
+      <module-card icon="iconfont icon-zichan" color="#FFA500"
+                   title="家庭资产" sub-title="统筹全家财富"
+                   router="/mobile-home/asset/list"/>
+
+      <module-card icon="iconfont icon-zhangben" color="#388E3C"
+                   title="家庭账本" sub-title="守护家庭财富"
+                   router="/mobile-home/ledger/list"/>
+
+      <module-card icon="iconfont icon-fuwuqi" color="#FF6B6B"
+                   title="服务监控" sub-title="掌握系统健康"
+                   router="/mobile-home/server/monitor"/>
+    </div>
+
+<!--    <div class="note-container">-->
+<!--      <div class="content">-->
+<!--        <span class="title">消息中心</span>-->
+<!--      </div>-->
+<!--      <div class="note-list">-->
+<!--        <div class="note">-->
+
+<!--        </div>-->
+<!--      </div>-->
+<!--    </div>-->
+  </main>
+</template>
+
+<script setup lang="ts">
+import WeatherTimeCard from '@/components/Mobile/WeatherTimeCard.vue'
+import ModuleCard from '@/components/Home/ModuleCard.vue'
+import { useAppStore } from '@/store/app'
+import { getAssetsImageFile } from '@/utils'
+
+const appStore = useAppStore()
+</script>
+
+<style lang="scss">
+.mobile-home {
+  height: 100%;
+  background-color: var(--color-bg);
+  color: var(--color-text);
+  padding: 10px;
+
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+
+  .home-title {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 5px;
+
+    .title-container {
+      display: flex;
+      align-items: center;
+      gap: 5px;
+
+      .logo {
+        width: 30px;
+        height: 30px;
+      }
+
+      .title {
+        font-size: 1.5rem;
+        font-weight: bold;
+        text-align: center;
+      }
+    }
+
+    .theme-button {
+      position: absolute;
+      right: 0;
+      background-color: var(--color-bg);
+      border-color: var(--el-color-primary);
+    }
+  }
+
+  .el-carousel__container {
+    .el-carousel__item:nth-child(2n) {
+      background-color: #99a9bf;
+    }
+
+    .el-carousel__item:nth-child(2n + 1) {
+      background-color: #d3dce6;
+    }
+
+    h3 {
+      text-align: center;
+    }
+  }
+
+  .module-list {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 10px;
+  }
+
+  .note-container {
+    min-height: 200px;
+    background-color: var(--color-card-bg);
+    border: 1px solid var(--el-color-primary);
+    border-radius: 10px;
+    padding: 10px;
+
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+
+    .content {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding-bottom: 2px;
+      border-bottom: 1px solid #009FA8;
+
+      .title {
+        font-weight: bold;
+      }
+    }
+  }
+}
+</style>

src/views/profile/index.vue

@@ -0,0 +1,154 @@
+<template>
+  <div class="profile-view common-view">
+    <div class="left-container">
+      <div class="summary">
+        <el-avatar :size="80" :src="'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'" />
+        <span class="name">{{ userStore.userInfo.accountName }}</span>
+        <span class="description">{{ userStore.userInfo.description }}</span>
+        <el-divider />
+      </div>
+
+      <div class="basic-info">
+        <div class="item">
+          <i class="fa-solid fa-user"></i>
+          <span>{{ userStore.userInfo.username }}</span>
+        </div>
+        <div class="item">
+          <i class="fa-solid fa-location-dot"></i>
+          <span>{{ userStore.userInfo.area.join('-') }}</span>
+        </div>
+        <div class="item">
+          <i class="fa-solid fa-map-location-dot"></i>
+          <span>{{ userStore.userInfo.address }}</span>
+        </div>
+        <div class="item">
+          <i class="fa-solid fa-venus-mars"></i>
+          <span>{{ userStore.userInfo.gender === 0 ? '女' : '男' }}</span>
+        </div>
+        <div class="item">
+          <i class="fa-solid fa-cake-candles"></i>
+          <span>{{ userStore.userInfo.birthDate }}</span>
+        </div>
+        <div class="item">
+          <i class="fa-solid fa-clipboard-list"></i>
+          <span>{{ userStore.userInfo.description }}</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="right-container">
+      <el-tabs v-model="profileInfo.activeName">
+        <el-tab-pane label="基本信息" name="info">
+          <profile-info />
+        </el-tab-pane>
+        <el-tab-pane label="账号绑定" name="account">
+          <profile-account />
+        </el-tab-pane>
+        <el-tab-pane label="重置密码" name="password">
+          <profile-password />
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import ProfileInfo from '@/components/Home/Profile/ProfileInfo.vue'
+import ProfileAccount from '@/components/Home/Profile/ProfileAccount.vue'
+import ProfilePassword from '@/components/Home/Profile/ProfilePassword.vue'
+import { reactive } from 'vue'
+import { useUserStore } from '@/store/user.ts'
+
+const userStore = useUserStore()
+
+const profileInfo = reactive({
+  activeName: 'info'
+})
+</script>
+
+<style lang="scss">
+.profile-view {
+  display: grid;
+  grid-template-columns: 40% 58%;
+  justify-content: space-between;
+
+  .left-container {
+    background-color: #FFFFFF;
+    border-radius: 15px;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+
+    .summary {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      gap: 10px;
+
+      .name {
+        font-size: 1.5rem;
+        font-weight: bold;
+      }
+
+      .description {
+        font-size: 1.2rem;
+      }
+    }
+
+    .basic-info {
+      flex-grow: 1;
+      padding: 0 20px;
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+
+      .item {
+        height: 30px;
+        i {
+          width: 20px;
+          color: #0d9488;
+          margin-right: 10px;
+        }
+      }
+    }
+  }
+
+  .right-container {
+    background-color: #FFFFFF;
+    border-radius: 15px;
+    padding: 20px;
+
+    .profile-account {
+      display: flex;
+      flex-direction: column;
+      gap: 1vh;
+
+      .item {
+        display: grid;
+        grid-template-columns: 50px 4fr 1fr;
+        align-items: center;
+        border-bottom: 1px solid #DCDCDC;
+        padding-bottom: 10px;
+
+        i {
+          justify-self: center;
+          font-size: 1.5rem;
+        }
+
+        .content {
+          display: flex;
+          flex-direction: column;
+          gap: 1vh;
+        }
+
+        .el-button {
+          justify-self: center;
+          width: 80px;
+        }
+      }
+    }
+  }
+}
+</style>