diff --git a/.eslintrc.js b/.eslintrc.cjs
similarity index 100%
rename from .eslintrc.js
rename to .eslintrc.cjs
diff --git a/components.d.ts b/components.d.ts
new file mode 100644
index 0000000..dbf0437
--- /dev/null
+++ b/components.d.ts
@@ -0,0 +1,114 @@
+/* eslint-disable */
+// @ts-nocheck
+// biome-ignore lint: disable
+// oxlint-disable
+// ------
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+
+export {}
+
+/* prettier-ignore */
+declare module 'vue' {
+  export interface GlobalComponents {
+    AnniversaryCard: typeof import('./src/components/Anniversary/AnniversaryCard.vue')['default']
+    AnniversaryQuery: typeof import('./src/components/Anniversary/AnniversaryQuery.vue')['default']
+    AppLoading: typeof import('./src/components/Common/AppLoading.vue')['default']
+    ArriveButton: typeof import('./src/components/Common/ArriveButton.vue')['default']
+    AssetCard: typeof import('./src/components/Asset/AssetCard.vue')['default']
+    AssetQuery: typeof import('./src/components/Asset/AssetQuery.vue')['default']
+    AwardCard: typeof import('./src/components/Award/AwardCard.vue')['default']
+    AwardQuery: typeof import('./src/components/Award/AwardQuery.vue')['default']
+    BillCalendar: typeof import('./src/components/Bill/BillCalendar.vue')['default']
+    BillChart: typeof import('./src/components/Bill/BillChart.vue')['default']
+    BillDailyItem: typeof import('./src/components/Bill/BillDailyItem.vue')['default']
+    BillDailyList: typeof import('./src/components/Bill/BillDailyList.vue')['default']
+    BillDrawer: typeof import('./src/components/Bill/BillDrawer.vue')['default']
+    BillQuery: typeof import('./src/components/Bill/BillQuery.vue')['default']
+    BillRank: typeof import('./src/components/Bill/BillRank.vue')['default']
+    BillSearch: typeof import('./src/components/Bill/BillSearch.vue')['default']
+    BillStats: typeof import('./src/components/Bill/BillStats.vue')['default']
+    BlogArchive: typeof import('./src/components/Blog/Archive/BlogArchive.vue')['default']
+    BlogCategory: typeof import('./src/components/Blog/Category/BlogCategory.vue')['default']
+    BlogCategoryDetail: typeof import('./src/components/Blog/Category/BlogCategoryDetail.vue')['default']
+    BlogComment: typeof import('./src/components/Blog/Comment/BlogComment.vue')['default']
+    BlogDetail: typeof import('./src/components/Blog/Content/BlogDetail.vue')['default']
+    BlogLabel: typeof import('./src/components/Blog/Content/BlogLabel.vue')['default']
+    BlogOverview: typeof import('./src/components/Blog/Content/BlogOverview.vue')['default']
+    CarCard: typeof import('./src/components/Car/CarCard.vue')['default']
+    CarQuery: typeof import('./src/components/Car/CarQuery.vue')['default']
+    CategoryCard: typeof import('./src/components/Anniversary/CategoryCard.vue')['default']
+    CommonLogin: typeof import('./src/components/Login/CommonLogin.vue')['default']
+    DailyCard: typeof import('./src/components/DailyCard.vue')['default']
+    DailySummary: typeof import('./src/components/DailySummary.vue')['default']
+    EmailLogin: typeof import('./src/components/Login/EmailLogin.vue')['default']
+    FoodBasicData: typeof import('./src/components/Food/Data/FoodBasicData.vue')['default']
+    FoodCalendar: typeof import('./src/components/Food/FoodCalendar.vue')['default']
+    FoodCard: typeof import('./src/components/Food/FoodCard.vue')['default']
+    FoodDailyItem: typeof import('./src/components/Food/FoodDailyItem.vue')['default']
+    FoodMaterialData: typeof import('./src/components/Food/Data/FoodMaterialData.vue')['default']
+    FoodMaterialDialog: typeof import('./src/components/Food/Form/FoodMaterialDialog.vue')['default']
+    FoodMaterialForm: typeof import('./src/components/Food/Form/FoodMaterialForm.vue')['default']
+    FoodOthersData: typeof import('./src/components/Food/Data/FoodOthersData.vue')['default']
+    FoodQuery: typeof import('./src/components/Food/FoodQuery.vue')['default']
+    FoodRecordData: typeof import('./src/components/Food/Data/FoodRecordData.vue')['default']
+    FoodStats: typeof import('./src/components/Food/FoodStats.vue')['default']
+    FoodStepData: typeof import('./src/components/Food/Data/FoodStepData.vue')['default']
+    FoodStepDialog: typeof import('./src/components/Food/Form/FoodStepDialog.vue')['default']
+    FoodStepForm: typeof import('./src/components/Food/Form/FoodStepForm.vue')['default']
+    HealthChart: typeof import('./src/components/Health/HealthChart.vue')['default']
+    HealthForm: typeof import('./src/components/Health/HealthForm.vue')['default']
+    HealthStats: typeof import('./src/components/Health/HealthStats.vue')['default']
+    HomeQuery: typeof import('./src/components/HomeQuery.vue')['default']
+    JournalCalendar: typeof import('./src/components/Journal/JournalCalendar.vue')['default']
+    JournalCard: typeof import('./src/components/Journal/JournalCard.vue')['default']
+    JournalDrawer: typeof import('./src/components/Journal/JournalDrawer.vue')['default']
+    KpiCalendar: typeof import('./src/components/kpi/KpiCalendar.vue')['default']
+    KpiCard: typeof import('./src/components/kpi/KpiCard.vue')['default']
+    LedgerCard: typeof import('./src/components/Ledger/LedgerCard.vue')['default']
+    LedgerQuery: typeof import('./src/components/Ledger/LedgerQuery.vue')['default']
+    LedgerRank: typeof import('./src/components/Ledger/LedgerRank.vue')['default']
+    LoginAuth: typeof import('./src/components/Login/LoginAuth.vue')['default']
+    Milestone: typeof import('./src/components/Milestone.vue')['default']
+    MobileSetting: typeof import('./src/components/Common/MobileSetting.vue')['default']
+    ModuleCard: typeof import('./src/components/ModuleCard.vue')['default']
+    NumberInput: typeof import('./src/components/NumberInput.vue')['default']
+    PasswordCard: typeof import('./src/components/Password/PasswordCard.vue')['default']
+    PasswordQuery: typeof import('./src/components/Password/PasswordQuery.vue')['default']
+    PeriodForm: typeof import('./src/components/Period/PeriodForm.vue')['default']
+    PeriodLegend: typeof import('./src/components/Period/PeriodLegend.vue')['default']
+    PhoneLogin: typeof import('./src/components/Login/PhoneLogin.vue')['default']
+    PlanCalendar: typeof import('./src/components/Plan/PlanCalendar.vue')['default']
+    PlanCard: typeof import('./src/components/Plan/PlanCard.vue')['default']
+    PlanQuery: typeof import('./src/components/Plan/PlanQuery.vue')['default']
+    ProductCard: typeof import('./src/components/Product/ProductCard.vue')['default']
+    ProductDrawer: typeof import('./src/components/Product/ProductDrawer.vue')['default']
+    ProductQuery: typeof import('./src/components/Product/ProductQuery.vue')['default']
+    ProfileAccount: typeof import('./src/components/Profile/ProfileAccount.vue')['default']
+    ProfileInfo: typeof import('./src/components/Profile/ProfileInfo.vue')['default']
+    ProfilePassword: typeof import('./src/components/Profile/ProfilePassword.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+    ServerCard: typeof import('./src/components/Server/ServerCard.vue')['default']
+    ServerProgress: typeof import('./src/components/Server/ServerProgress.vue')['default']
+    StatsCard: typeof import('./src/components/StatsCard.vue')['default']
+    TravelBasicData: typeof import('./src/components/Travel/Data/TravelBasicData.vue')['default']
+    TravelCalendar: typeof import('./src/components/Travel/TravelCalendar.vue')['default']
+    TravelCard: typeof import('./src/components/Travel/TravelCard.vue')['default']
+    TravelConsumeData: typeof import('./src/components/Travel/Data/TravelConsumeData.vue')['default']
+    TravelDailyItem: typeof import('./src/components/Travel/TravelDailyItem.vue')['default']
+    TravelDailyList: typeof import('./src/components/Travel/TravelDailyList.vue')['default']
+    TravelDialog: typeof import('./src/components/Travel/TravelDialog.vue')['default']
+    TravelGuideData: typeof import('./src/components/Travel/Data/TravelGuideData.vue')['default']
+    TravelQuery: typeof import('./src/components/Travel/TravelQuery.vue')['default']
+    TravelRecordData: typeof import('./src/components/Travel/Data/TravelRecordData.vue')['default']
+    TravelSpotList: typeof import('./src/components/Travel/TravelSpotList.vue')['default']
+    TravelStats: typeof import('./src/components/Travel/TravelStats.vue')['default']
+    VanButton: typeof import('vant/es')['Button']
+    VanConfigProvider: typeof import('vant/es')['ConfigProvider']
+    VanFloatingBubble: typeof import('vant/es')['FloatingBubble']
+    VanSwipeCell: typeof import('vant/es')['SwipeCell']
+    WeatherIcon: typeof import('./src/components/Common/WeatherIcon.vue')['default']
+    WeatherTimeCard: typeof import('./src/components/Common/WeatherTimeCard.vue')['default']
+  }
+}
diff --git a/package.json b/package.json
index e696cc0..0c907fa 100644
--- a/package.json
+++ b/package.json
@@ -2,6 +2,7 @@
   "name": "sweet-hut-ui",
   "private": true,
   "version": "0.0.0",
+  "type": "module",
   "scripts": {
     "dev": "vite --host 0.0.0.0",
     "build": "vite build",
@@ -39,12 +40,14 @@
   },
   "devDependencies": {
     "@types/node": "^18.19.86",
+    "@vant/auto-import-resolver": "^1.3.0",
     "@vitejs/plugin-vue": "^5.2.1",
     "autoprefixer": "^10.4.21",
     "postcss": "^8.5.3",
     "sass": "^1.86.3",
     "tailwindcss": "^3.4.17",
     "typescript": "^5.8.3",
+    "unplugin-vue-components": "^32.1.0",
     "vfonts": "^0.0.3",
     "vite": "^5.2.0",
     "vite-plugin-mock": "^3.0.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c527f76..e0d47cc 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -96,6 +96,9 @@ importers:
       '@types/node':
         specifier: ^18.19.86
         version: 18.19.86
+      '@vant/auto-import-resolver':
+        specifier: ^1.3.0
+        version: 1.3.0
       '@vitejs/plugin-vue':
         specifier: ^5.2.1
         version: 5.2.1(vite@5.2.0(@types/node@18.19.86)(sass@1.86.3))(vue@3.5.12(typescript@5.8.3))
@@ -114,6 +117,9 @@ importers:
       typescript:
         specifier: ^5.8.3
         version: 5.8.3
+      unplugin-vue-components:
+        specifier: ^32.1.0
+        version: 32.1.0(esbuild@0.20.2)(rollup@4.40.0)(vite@5.2.0(@types/node@18.19.86)(sass@1.86.3))(vue@3.5.12(typescript@5.8.3))
       vfonts:
         specifier: ^0.0.3
         version: 0.0.3
@@ -471,6 +477,9 @@ packages:
     resolution: {integrity: sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==}
     engines: {node: '>=6.0.0'}
 
+  '@jridgewell/remapping@2.3.5':
+    resolution: {integrity: sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==}
+
   '@jridgewell/resolve-uri@3.1.2':
     resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
     engines: {node: '>=6.0.0'}
@@ -482,6 +491,9 @@ packages:
   '@jridgewell/sourcemap-codec@1.5.0':
     resolution: {integrity: sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==}
 
+  '@jridgewell/sourcemap-codec@1.5.5':
+    resolution: {integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==}
+
   '@jridgewell/trace-mapping@0.3.25':
     resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==}
 
@@ -978,6 +990,9 @@ packages:
     resolution: {integrity: sha512-07ny+LHRzQXepkGg6w0mFY41fVUNBrL2Roj/++7V1txKugfjm/Ci/qSND03r2RhlJhJYMcTn9AhhSSqQp0Ysyw==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
 
+  '@vant/auto-import-resolver@1.3.0':
+    resolution: {integrity: sha512-lJyWtCyFizR4bHZvMiNMF3w+WTFTUWAvka1eqTnPK9ticUcKTCOx6qEmHcm8JPb3g1t3GaD2W3MnHkBp/nHamw==}
+
   '@vant/popperjs@1.3.0':
     resolution: {integrity: sha512-hB+czUG+aHtjhaEmCJDuXOep0YTZjdlRR+4MSmIFnkCQIxJaXLQdSsR90XWvAI2yvKUI7TCGqR8pQg2RtvkMHw==}
 
@@ -1094,6 +1109,11 @@ packages:
     engines: {node: '>=0.4.0'}
     hasBin: true
 
+  acorn@8.18.0:
+    resolution: {integrity: sha512-lGq+9yr1/GuAWaVYIHRjvvySG5/4VfKIvC8EWxStPdcDh/Ka7FG3twP6v4d5BkravUilhIAsG4Qj83t02LWUPQ==}
+    engines: {node: '>=0.4.0'}
+    hasBin: true
+
   ajv@6.12.6:
     resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==}
 
@@ -1330,6 +1350,10 @@ packages:
     resolution: {integrity: sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==}
     engines: {node: '>= 14.16.0'}
 
+  chokidar@5.0.0:
+    resolution: {integrity: sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw==}
+    engines: {node: '>= 20.19.0'}
+
   class-utils@0.3.6:
     resolution: {integrity: sha512-qOhPa/Fj7s6TY8H8esGu5QNpMMQxz79h+urzrNYN6mn+9BnxlDGf5QZ+XeCDsxSjPqsSR56XOZOJmpeurnLMeg==}
     engines: {node: '>=0.10.0'}
@@ -1389,6 +1413,12 @@ packages:
   concat-map@0.0.1:
     resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
 
+  confbox@0.1.8:
+    resolution: {integrity: sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==}
+
+  confbox@0.2.4:
+    resolution: {integrity: sha512-ysOGlgTFbN2/Y6Cg3Iye8YKulHw+R2fNXHrgSmXISQdMnomY6eNDprVdW9R5xBguEqI954+S6709UyiO7B+6OQ==}
+
   connect@3.7.0:
     resolution: {integrity: sha512-ZqRXc+tZukToSNmh5C2iWMSoV3X1YUcPbqEM4DkEG5tNQXrQUZCNVGGv3IuicnkMtPfGf3Xtp8WCXs295iQ1pQ==}
     engines: {node: '>= 0.10.0'}
@@ -1825,6 +1855,9 @@ packages:
     resolution: {integrity: sha512-w/ozOKR9Obk3qoWeY/WDi6MFta9AoMR+zud60mdnbniMcBxRuFJyDt2LdX/14A1UABeqk+Uk+LDfUpvoGKppZA==}
     engines: {node: '>=0.10.0'}
 
+  exsolve@1.1.1:
+    resolution: {integrity: sha512-9U/jZUgjnSGyntRr6y5Muu1MJcwFl6kPu7k8qLF0IMNfLqvw0NZ4nnVDq0RVoZ0RvCyumib4Ez3KYrVfilrw+g==}
+
   extend-shallow@2.0.1:
     resolution: {integrity: sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==}
     engines: {node: '>=0.10.0'}
@@ -1856,6 +1889,15 @@ packages:
   fastq@1.19.1:
     resolution: {integrity: sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==}
 
+  fdir@6.5.0:
+    resolution: {integrity: sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      picomatch: ^3 || ^4
+    peerDependenciesMeta:
+      picomatch:
+        optional: true
+
   file-entry-cache@6.0.1:
     resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==}
     engines: {node: ^10.12.0 || >=12.0.0}
@@ -2353,6 +2395,10 @@ packages:
     resolution: {integrity: sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==}
     engines: {node: '>=4.0.0'}
 
+  local-pkg@1.2.1:
+    resolution: {integrity: sha512-++gUqRDEvcnN6Zhqrr+y/CkVEHhlrR96vZn3nZZPYzMcBUyBtTKzB9NadClFIsIVSsu+3i9tfk/erqy9kAmt7Q==}
+    engines: {node: '>=14'}
+
   lodash-es@4.17.21:
     resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==}
 
@@ -2384,6 +2430,9 @@ packages:
   magic-string@0.30.17:
     resolution: {integrity: sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==}
 
+  magic-string@0.30.21:
+    resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
+
   map-cache@0.2.2:
     resolution: {integrity: sha512-8y/eV9QQZCiyn1SprXSrCmqJN0yNRATe+PO8ztwqrvrbdRLA3eYJF0yaR0YayLWkMbsQSKWS9N2gPcGEc4UsZg==}
     engines: {node: '>=0.10.0'}
@@ -2471,6 +2520,9 @@ packages:
     resolution: {integrity: sha512-WRoDn//mXBiJ1H40rqa3vH0toePwSsGb45iInWlTySa+Uu4k3tYUSxa2v1KqAiLtvlrSzaExqS1gtk96A9zvEA==}
     engines: {node: '>=0.10.0'}
 
+  mlly@1.8.2:
+    resolution: {integrity: sha512-d+ObxMQFmbt10sretNDytwt85VrbkhhUA/JBGm1MPaWJ65Cl4wOgLaB1NYvJSZ0Ef03MMEU/0xpPMXUIQ29UfA==}
+
   mockjs@1.1.0:
     resolution: {integrity: sha512-eQsKcWzIaZzEZ07NuEyO4Nw65g0hdWAyurVol1IPl1gahRwY+svqzfgfey8U8dahLwG44d6/RwEzuK52rSa/JQ==}
     hasBin: true
@@ -2566,6 +2618,10 @@ packages:
     resolution: {integrity: sha512-gXah6aZrcUxjWg2zR2MwouP2eHlCBzdV4pygudehaKXSGW4v2AsRQUK+lwwXhii6KFZcunEnmSUoYp5CXibxtA==}
     engines: {node: '>= 0.4'}
 
+  obug@2.1.4:
+    resolution: {integrity: sha512-4a+OsYv9UktOJKE+l1A4OufDgdRF9PifWj+tJnHURo/P+WOxpG4GzUFL9qCalmWauao6ogiG+QvnCovwPoyAWA==}
+    engines: {node: '>=12.20.0'}
+
   on-finished@2.3.0:
     resolution: {integrity: sha512-ikqdkGAAyf/X/gPhXGvfgAytDZtDbr+bkNUJ0N9h5MI/dmdgCs3l6hoHrcUv41sRKew3jIwrp4qQDXiK99Utww==}
     engines: {node: '>= 0.8'}
@@ -2624,6 +2680,9 @@ packages:
   pathe@0.2.0:
     resolution: {integrity: sha512-sTitTPYnn23esFR3RlqYBWn4c45WGeLcsKzQiUpXJAyfcWkolvlYpV8FLo7JishK946oQwMFUCHXQ9AjGPKExw==}
 
+  pathe@2.0.3:
+    resolution: {integrity: sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==}
+
   picocolors@1.1.1:
     resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
 
@@ -2631,6 +2690,10 @@ packages:
     resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
     engines: {node: '>=8.6'}
 
+  picomatch@4.0.5:
+    resolution: {integrity: sha512-RvwwcruNjI1ncT5xRakeyS9Lf8lcItv34KD+aif+VH9kduAyfYBipGh12274xtenIPZ119/R9BdTBa8gAwSh0A==}
+    engines: {node: '>=12'}
+
   pify@2.3.0:
     resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
     engines: {node: '>=0.10.0'}
@@ -2648,6 +2711,12 @@ packages:
     resolution: {integrity: sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==}
     engines: {node: '>= 6'}
 
+  pkg-types@1.3.1:
+    resolution: {integrity: sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==}
+
+  pkg-types@2.3.1:
+    resolution: {integrity: sha512-y+ichcgc2LrADuhLNAx8DFjVfgz91pRxfZdI3UDhxHvcVEZsenLO+7XaU5vOp0u/7V/wZ+plyuQxtrDlZJ+yeg==}
+
   posix-character-classes@0.1.1:
     resolution: {integrity: sha512-xTgYBc3fuo7Yt7JbiuFxSYGToMoz8fLoE6TC9Wx1P/u+LfeThMOAqmuyECnlBaaJb+u1m9hHiXUEtwW4OzfUJg==}
     engines: {node: '>=0.10.0'}
@@ -2749,6 +2818,9 @@ packages:
     resolution: {integrity: sha512-YWWTjgABSKcvs/nWBi9PycY/JiPJqOD4JA6o9Sej2AtvSGarXxKC3OQSk4pAarbdQlKAh5D4FCQkJNkW+GAn3w==}
     engines: {node: '>=0.6'}
 
+  quansync@0.2.11:
+    resolution: {integrity: sha512-AifT7QEbW9Nri4tAwR5M/uzpBuqfZf+zwaEM/QkzEjj7NBuFD2rBuy0K3dE+8wltbezDV7JMA0WfnCPYRSYbXA==}
+
   query-string@4.3.4:
     resolution: {integrity: sha512-O2XLNDBIg1DnTOa+2XrIwSiXEV8h2KImXUnjhhn2+UsvZ+Es2uyd5CCRTNQlDGbzUQOW3aYCBx9rVA6dzsiY7Q==}
     engines: {node: '>=0.10.0'}
@@ -2771,6 +2843,10 @@ packages:
     resolution: {integrity: sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==}
     engines: {node: '>= 14.18.0'}
 
+  readdirp@5.0.0:
+    resolution: {integrity: sha512-9u/XQ1pvrQtYyMpZe7DXKv2p5CNvyVwzUB6uhLAnQwHMSgKMBR62lc7AHljaeteeHXn11XTAaLLUVZYVZyuRBQ==}
+    engines: {node: '>= 20.19.0'}
+
   reflect.getprototypeof@1.0.10:
     resolution: {integrity: sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==}
     engines: {node: '>= 0.4'}
@@ -3073,6 +3149,10 @@ packages:
   thenify@3.3.1:
     resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
 
+  tinyglobby@0.2.17:
+    resolution: {integrity: sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==}
+    engines: {node: '>=12.0.0'}
+
   to-object-path@0.3.0:
     resolution: {integrity: sha512-9mWHdnGRuh3onocaHzukyvCZhzvr6tiflAy/JRFXcJX0TjgfWA9pk9t8CMbzmBE4Jfw58pXbkngtBtqYxzNEyg==}
     engines: {node: '>=0.10.0'}
@@ -3157,6 +3237,9 @@ packages:
   uc.micro@2.1.0:
     resolution: {integrity: sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==}
 
+  ufo@1.6.4:
+    resolution: {integrity: sha512-JFNbkD1Svwe0KvGi8GOeLcP4kAWQ609twvCdcHxq1oSL8svv39ZuSvajcD8B+5D0eL4+s1Is2D/O6KN3qcTeRA==}
+
   unbox-primitive@1.1.0:
     resolution: {integrity: sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw==}
     engines: {node: '>= 0.4'}
@@ -3176,6 +3259,53 @@ packages:
     resolution: {integrity: sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==}
     engines: {node: '>= 0.8'}
 
+  unplugin-utils@0.3.2:
+    resolution: {integrity: sha512-xVToRh2CTmLk2HnEG7ac4rl1MJTT3RFkpS8B++/SnB0kXvuaavD+n3m/vrzyWQOdJNSZQACnbz01pnppbwV5BA==}
+    engines: {node: '>=20.19.0'}
+
+  unplugin-vue-components@32.1.0:
+    resolution: {integrity: sha512-YiUkSxuRjab18XFOrX5VsIxXzccrfmHVGsGeJgSgklb829DQmCy9E4vvDUE4tuvZZdxyFJZX0Oc4TPnnxiiMyg==}
+    engines: {node: '>=20.19.0'}
+    peerDependencies:
+      '@nuxt/kit': ^3.2.2 || ^4.0.0
+      vue: ^3.0.0
+    peerDependenciesMeta:
+      '@nuxt/kit':
+        optional: true
+
+  unplugin@3.3.0:
+    resolution: {integrity: sha512-qa66K+crbfyE6JK10GjvbJeRrOsuC/JpbnHctfyp/i4oBTxWOzJfRZyDiOk1PtErMFRu8JhsU/wPvOdBNWe5Rg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    peerDependencies:
+      '@farmfe/core': '*'
+      '@rspack/core': '*'
+      bun-types-no-globals: '*'
+      esbuild: '*'
+      rolldown: '*'
+      rollup: '*'
+      unloader: '*'
+      vite: '*'
+      webpack: '*'
+    peerDependenciesMeta:
+      '@farmfe/core':
+        optional: true
+      '@rspack/core':
+        optional: true
+      bun-types-no-globals:
+        optional: true
+      esbuild:
+        optional: true
+      rolldown:
+        optional: true
+      rollup:
+        optional: true
+      unloader:
+        optional: true
+      vite:
+        optional: true
+      webpack:
+        optional: true
+
   unset-value@1.0.0:
     resolution: {integrity: sha512-PcA2tsuGSF9cnySLHTLSh2qrQiJ70mn+r+Glzxv2TWZblxsxCC52BDlZoPCsz7STd9pN7EZetkWZBAvk4cgZdQ==}
     engines: {node: '>=0.10.0'}
@@ -3350,6 +3480,9 @@ packages:
     resolution: {integrity: sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==}
     engines: {node: '>=12'}
 
+  webpack-virtual-modules@0.6.2:
+    resolution: {integrity: sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==}
+
   whatwg-mimetype@3.0.0:
     resolution: {integrity: sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==}
     engines: {node: '>=12'}
@@ -3833,12 +3966,19 @@ snapshots:
       '@jridgewell/sourcemap-codec': 1.5.0
       '@jridgewell/trace-mapping': 0.3.25
 
+  '@jridgewell/remapping@2.3.5':
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.8
+      '@jridgewell/trace-mapping': 0.3.25
+
   '@jridgewell/resolve-uri@3.1.2': {}
 
   '@jridgewell/set-array@1.2.1': {}
 
   '@jridgewell/sourcemap-codec@1.5.0': {}
 
+  '@jridgewell/sourcemap-codec@1.5.5': {}
+
   '@jridgewell/trace-mapping@0.3.25':
     dependencies:
       '@jridgewell/resolve-uri': 3.1.2
@@ -4387,6 +4527,8 @@ snapshots:
       '@typescript-eslint/types': 5.62.0
       eslint-visitor-keys: 3.4.3
 
+  '@vant/auto-import-resolver@1.3.0': {}
+
   '@vant/popperjs@1.3.0': {}
 
   '@vant/use@1.6.0(vue@3.5.12(typescript@5.8.3))':
@@ -4544,6 +4686,8 @@ snapshots:
 
   acorn@8.15.0: {}
 
+  acorn@8.18.0: {}
+
   ajv@6.12.6:
     dependencies:
       fast-deep-equal: 3.1.3
@@ -4821,6 +4965,10 @@ snapshots:
     dependencies:
       readdirp: 4.1.2
 
+  chokidar@5.0.0:
+    dependencies:
+      readdirp: 5.0.0
+
   class-utils@0.3.6:
     dependencies:
       arr-union: 3.1.0
@@ -4880,6 +5028,10 @@ snapshots:
 
   concat-map@0.0.1: {}
 
+  confbox@0.1.8: {}
+
+  confbox@0.2.4: {}
+
   connect@3.7.0:
     dependencies:
       debug: 2.6.9
@@ -5441,6 +5593,8 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  exsolve@1.1.1: {}
+
   extend-shallow@2.0.1:
     dependencies:
       is-extendable: 0.1.1
@@ -5483,6 +5637,10 @@ snapshots:
     dependencies:
       reusify: 1.1.0
 
+  fdir@6.5.0(picomatch@4.0.5):
+    optionalDependencies:
+      picomatch: 4.0.5
+
   file-entry-cache@6.0.1:
     dependencies:
       flat-cache: 3.2.0
@@ -5984,6 +6142,12 @@ snapshots:
       emojis-list: 3.0.0
       json5: 1.0.2
 
+  local-pkg@1.2.1:
+    dependencies:
+      mlly: 1.8.2
+      pkg-types: 2.3.1
+      quansync: 0.2.11
+
   lodash-es@4.17.21: {}
 
   lodash-unified@1.0.3(@types/lodash-es@4.17.12)(lodash-es@4.17.21)(lodash@4.17.21):
@@ -6008,6 +6172,10 @@ snapshots:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.0
 
+  magic-string@0.30.21:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+
   map-cache@0.2.2: {}
 
   map-visit@1.0.0:
@@ -6110,6 +6278,13 @@ snapshots:
       for-in: 1.0.2
       is-extendable: 1.0.1
 
+  mlly@1.8.2:
+    dependencies:
+      acorn: 8.18.0
+      pathe: 2.0.3
+      pkg-types: 1.3.1
+      ufo: 1.6.4
+
   mockjs@1.1.0:
     dependencies:
       commander: 13.1.0
@@ -6214,6 +6389,8 @@ snapshots:
       define-properties: 1.2.1
       es-object-atoms: 1.1.1
 
+  obug@2.1.4: {}
+
   on-finished@2.3.0:
     dependencies:
       ee-first: 1.1.1
@@ -6266,10 +6443,14 @@ snapshots:
 
   pathe@0.2.0: {}
 
+  pathe@2.0.3: {}
+
   picocolors@1.1.1: {}
 
   picomatch@2.3.1: {}
 
+  picomatch@4.0.5: {}
+
   pify@2.3.0: {}
 
   pinia@2.3.1(typescript@5.8.3)(vue@3.5.12(typescript@5.8.3)):
@@ -6284,6 +6465,18 @@ snapshots:
 
   pirates@4.0.7: {}
 
+  pkg-types@1.3.1:
+    dependencies:
+      confbox: 0.1.8
+      mlly: 1.8.2
+      pathe: 2.0.3
+
+  pkg-types@2.3.1:
+    dependencies:
+      confbox: 0.2.4
+      exsolve: 1.1.1
+      pathe: 2.0.3
+
   posix-character-classes@0.1.1: {}
 
   possible-typed-array-names@1.1.0: {}
@@ -6375,6 +6568,8 @@ snapshots:
     dependencies:
       side-channel: 1.1.0
 
+  quansync@0.2.11: {}
+
   query-string@4.3.4:
     dependencies:
       object-assign: 4.1.1
@@ -6398,6 +6593,8 @@ snapshots:
 
   readdirp@4.1.2: {}
 
+  readdirp@5.0.0: {}
+
   reflect.getprototypeof@1.0.10:
     dependencies:
       call-bind: 1.0.8
@@ -6803,6 +7000,11 @@ snapshots:
     dependencies:
       any-promise: 1.3.0
 
+  tinyglobby@0.2.17:
+    dependencies:
+      fdir: 6.5.0(picomatch@4.0.5)
+      picomatch: 4.0.5
+
   to-object-path@0.3.0:
     dependencies:
       kind-of: 3.2.2
@@ -6911,6 +7113,8 @@ snapshots:
 
   uc.micro@2.1.0: {}
 
+  ufo@1.6.4: {}
+
   unbox-primitive@1.1.0:
     dependencies:
       call-bound: 1.0.4
@@ -6931,6 +7135,44 @@ snapshots:
 
   unpipe@1.0.0: {}
 
+  unplugin-utils@0.3.2:
+    dependencies:
+      pathe: 2.0.3
+      picomatch: 4.0.5
+
+  unplugin-vue-components@32.1.0(esbuild@0.20.2)(rollup@4.40.0)(vite@5.2.0(@types/node@18.19.86)(sass@1.86.3))(vue@3.5.12(typescript@5.8.3)):
+    dependencies:
+      chokidar: 5.0.0
+      local-pkg: 1.2.1
+      magic-string: 0.30.21
+      mlly: 1.8.2
+      obug: 2.1.4
+      picomatch: 4.0.5
+      tinyglobby: 0.2.17
+      unplugin: 3.3.0(esbuild@0.20.2)(rollup@4.40.0)(vite@5.2.0(@types/node@18.19.86)(sass@1.86.3))
+      unplugin-utils: 0.3.2
+      vue: 3.5.12(typescript@5.8.3)
+    transitivePeerDependencies:
+      - '@farmfe/core'
+      - '@rspack/core'
+      - bun-types-no-globals
+      - esbuild
+      - rolldown
+      - rollup
+      - unloader
+      - vite
+      - webpack
+
+  unplugin@3.3.0(esbuild@0.20.2)(rollup@4.40.0)(vite@5.2.0(@types/node@18.19.86)(sass@1.86.3)):
+    dependencies:
+      '@jridgewell/remapping': 2.3.5
+      picomatch: 4.0.5
+      webpack-virtual-modules: 0.6.2
+    optionalDependencies:
+      esbuild: 0.20.2
+      rollup: 4.40.0
+      vite: 5.2.0(@types/node@18.19.86)(sass@1.86.3)
+
   unset-value@1.0.0:
     dependencies:
       has-value: 0.3.1
@@ -7110,6 +7352,8 @@ snapshots:
 
   webidl-conversions@7.0.0: {}
 
+  webpack-virtual-modules@0.6.2: {}
+
   whatwg-mimetype@3.0.0: {}
 
   which-boxed-primitive@1.1.1:
diff --git a/postcss.config.js b/postcss.config.js
deleted file mode 100644
index 33ad091..0000000
--- a/postcss.config.js
+++ /dev/null
@@ -1,6 +0,0 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}
diff --git a/src/components/Bill/BillDailyItem.vue b/src/components/Bill/BillDailyItem.vue
index 42e46ce..8e9b55f 100644
--- a/src/components/Bill/BillDailyItem.vue
+++ b/src/components/Bill/BillDailyItem.vue
@@ -40,14 +40,12 @@ import DailySummary from '@/components/DailySummary.vue'
 import DailyCard from '@/components/DailyCard.vue'
 import { defineProps, onMounted, reactive, watch } from 'vue'
 import { useBillStore } from '@/store/bill.ts'
-import { useRouter } from 'vue-router'
 import { formatChineseDate } from 'vue3-common/utils/dateUtil'
 import { IBillRecord } from '@/types/bill.ts'
 import { formatAmount } from 'vue3-common/utils/numberUtil'
 import { getCalendarDailyCount, getCategoryByName } from '@/utils/home/billUtil.ts'
 
 const billStore = useBillStore()
-const router = useRouter()
 
 const props = defineProps({
   date: {
@@ -99,10 +97,7 @@ const getBillDailyByDate = (date: string) => {
 const selectBillRecordClick = async (billRecord: IBillRecord) => {
   await billStore.queryBillRecord(billRecord.id as number)
   billStore.billApiType = 'UPDATE'
-  await router.push({
-    name: 'BillDetailId',
-    params: { id: billStore.currentBillRecord.id }
-  })
+  billStore.billDrawer = true
 }
 </script>
 
diff --git a/src/views/bill/detail[id].vue b/src/components/Bill/BillDrawer.vue
similarity index 52%
rename from src/views/bill/detail[id].vue
rename to src/components/Bill/BillDrawer.vue
index e60cbbb..0386c8d 100644
--- a/src/views/bill/detail[id].vue
+++ b/src/components/Bill/BillDrawer.vue
@@ -1,93 +1,97 @@
 <template>
-  <div class="common-mobile-view bill-detail">
-    <el-form ref="formRef" :model="billStore.currentBillRecord"
-             :rules="rules" label-position="top" label-width="80px"
-             class="form-item bill-form">
-      <div class="item-list">
-        <el-select v-model="billStore.currentBillRecord.bookName"
-                   @change="changeBillBookNameEvent" style="width: 100px">
-          <el-option
-              v-for="item in billStore.billBookList"
-              :key="item.id" :label="item.name" :value="item.name"
-          />
-        </el-select>
+  <el-drawer v-model="billStore.billDrawer" destroy-on-close
+             :with-header="false" direction="btt" size="95%">
+    <div class="common-mobile-view bill-detail">
+      <el-form ref="formRef" :model="billStore.currentBillRecord"
+               :rules="rules" label-position="top" label-width="80px"
+               class="form-item bill-form">
+        <div class="item-list">
+          <el-select v-model="billStore.currentBillRecord.bookName"
+                     @change="changeBillBookNameEvent" style="width: 100px">
+            <el-option
+                v-for="item in billStore.billBookList"
+                :key="item.id" :label="item.name" :value="item.name"
+            />
+          </el-select>
 
-        <el-select v-model="billStore.currentBillRecord.type"
-                   @change="changeBillCategoryEvent" style="width: 100px">
-          <el-option
-              v-for="(item, index) in billInfo.billTypeList"
-              :key="index" :label="getBillTypeName(item)" :value="item"
-          />
-        </el-select>
+          <el-select v-model="billStore.currentBillRecord.type"
+                     @change="changeBillCategoryEvent" style="width: 100px">
+            <el-option
+                v-for="(item, index) in billInfo.billTypeList"
+                :key="index" :label="getBillTypeName(item)" :value="item"
+            />
+          </el-select>
 
-        <el-select v-model="billStore.currentBillRecord.payAccount"
-                   @change="changeBillCategoryEvent" style="width: 100px">
-          <el-option
-              v-for="item in billStore.billPayList"
-              :key="item.id" :label="item.name" :value="item.name"
-          />
-        </el-select>
-      </div>
+          <el-select v-model="billStore.currentBillRecord.payAccount"
+                     @change="changeBillCategoryEvent" style="width: 100px">
+            <el-option
+                v-for="item in billStore.billPayList"
+                :key="item.id" :label="item.name" :value="item.name"
+            />
+          </el-select>
+        </div>
 
-      <el-radio-group v-model="billStore.currentBillRecord.category" class="bill-category-group">
-        <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-radio-group v-model="billStore.currentBillRecord.category" class="bill-category-group">
+          <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>
 
-      <div class="bill-gap"></div>
+        <div class="bill-gap"></div>
 
-      <div class="item-list">
-        <el-date-picker
-            v-model="billStore.currentBillRecord.date"
-            type="date" :editable="false" placeholder="请选择账单时间"
-            value-format="YYYY-MM-DD"/>
+        <div class="item-list">
+          <el-date-picker
+              v-model="billStore.currentBillRecord.date"
+              type="date" :editable="false" placeholder="请选择账单时间"
+              value-format="YYYY-MM-DD"/>
 
-        <el-input v-model="billStore.currentBillRecord.location" autocomplete="off"
-                  placeholder="请输入账单地点"  clearable
+          <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>
+        </div>
+
+        <el-input v-model="billStore.currentBillRecord.content" autocomplete="off"
+                  placeholder="请输入账单内容"  clearable
                   show-word-limit maxlength="10">
           <template #prefix>
-            <el-icon class="el-input__icon"><location/></el-icon>
+            <el-icon class="el-input__icon"><document/></el-icon>
           </template>
         </el-input>
-      </div>
 
-      <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-input v-model="billStore.currentBillRecord.remark" type="textarea"
+                  placeholder="请输入账单备注" clearable
+                  :rows="3" show-word-limit maxlength="50">
+        </el-input>
 
-      <el-input v-model="billStore.currentBillRecord.remark" type="textarea"
-                placeholder="请输入账单备注" clearable
-                :rows="3" show-word-limit maxlength="50">
-      </el-input>
-
-      <number-input v-model:amount="billInfo.amountStr" class="amount-input" />
-    </el-form>
-
-    <div class="form-button">
-      <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>
+        <number-input v-model:amount="billInfo.amountStr" class="amount-input" />
+      </el-form>
     </div>
-  </div>
+
+    <template #footer>
+      <div style="flex: auto">
+        <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>
+    </template>
+  </el-drawer>
 </template>
 
 <script lang="ts" setup>
 import { useBillStore } from '@/store/bill.ts'
-import { useAppStore } from '@/store/app.ts'
 import { Location, Document } from '@element-plus/icons-vue'
 import { ElMessage, FormRules, UploadUserFile } from 'element-plus'
 import { billRecordRules } from '@/utils/element/elRules.ts'
-import { nextTick, onMounted, reactive, ref } from 'vue'
+import { nextTick, onMounted, reactive, ref, watch } from 'vue'
 import { IBillCategory } from '@/types/bill.ts'
 import { commonElMessageBox } from 'vue3-common/utils/elUtil'
 import NumberInput from '@/components/NumberInput.vue'
@@ -95,7 +99,6 @@ import NumberInput from '@/components/NumberInput.vue'
 const formRef = ref()
 const rules = reactive<FormRules>(billRecordRules)
 const billStore = useBillStore()
-const appStore = useAppStore()
 const imageFileList = ref<UploadUserFile[]>([])
 
 const billInfo = reactive({
@@ -104,13 +107,13 @@ const billInfo = reactive({
   amountStr: ''
 })
 
-onMounted(async () => {
-  appStore.isShowMobileBack = true
+watch(() => billStore.billDrawer, async (value) => {
+  if (value) {
+    await initBillRecord()
+    initImageFileList()
 
-  await initBillRecord()
-  initImageFileList()
-
-  billInfo.amountStr = billStore.currentBillRecord.amount.toString()
+    billInfo.amountStr = billStore.currentBillRecord.amount.toString()
+  }
 })
 
 const initBillRecord = async () => {
@@ -205,8 +208,7 @@ const confirmClick = () => {
     formRef.value.validate().then(async () => {
       billStore.currentBillRecord.amount = Number(billInfo.amountStr)
       await billStore.handleBillApi(billStore.currentBillRecord)
-      history.back()
-      appStore.isShowMobileBack = false
+      billStore.billDrawer = false
     })
   } else {
     ElMessage.error('请输入账单内容')
@@ -214,16 +216,14 @@ const confirmClick = () => {
 }
 
 const cancelClick = () => {
-  history.back()
-  appStore.isShowMobileBack = false
+  billStore.billDrawer = false
 }
 
 const deleteClick = () => {
   commonElMessageBox('是否确认删除该账单内容?').then(async () => {
     billStore.billApiType = 'DELETE'
     await billStore.handleBillApi(billStore.currentBillRecord)
-    history.back()
-    appStore.isShowMobileBack = false
+    billStore.billDrawer = false
   })
 }
 </script>
diff --git a/src/components/Bill/BillQuery.vue b/src/components/Bill/BillQuery.vue
index 6f6d087..5440c86 100644
--- a/src/components/Bill/BillQuery.vue
+++ b/src/components/Bill/BillQuery.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="common-query">
     <el-select v-model="billStore.billQueryForm.billBook"
-               @change="billStore.refreshInfo(isStats)" style="width: 120px">
+               @change="billStore.refreshInfo(isStats)">
       <el-option
           v-for="(item, index) in billQuery.billBookList"
           :key="index" :label="item.label" :value="item.name"
@@ -9,11 +9,16 @@
     </el-select>
 
     <el-select v-model="billStore.billDateType"
-               @change="billStore.refreshInfo(isStats)"
-               style="width: 120px;align-self: center;">
+               @change="billStore.refreshInfo(isStats)">
       <el-option v-for="(item, index) in dateTypeOptions" :key="index"
                  :label="item.label" :value="item.value"/>
     </el-select>
+
+    <el-select v-if="isStats" v-model="billStore.billType"
+               @change="billStore.refreshInfo(isStats)">
+      <el-option v-for="(item, index) in billTypeOptions" :key="index"
+                 :label="item.label" :value="item.value"/>
+    </el-select>
   </div>
 </template>
 
@@ -49,6 +54,15 @@ const dateTypeOptions = [{
   value: 'year'
 }]
 
+const billTypeOptions = [{
+  label: '收入',
+  value: 'income'
+},
+{
+  label: '支出',
+  value: 'expense'
+}]
+
 const billQuery = reactive({
   query: '',
   billBookList: [] as IBillBook[]
diff --git a/src/components/Journal/JournalCard.vue b/src/components/Journal/JournalCard.vue
index 3950b95..2660a99 100644
--- a/src/components/Journal/JournalCard.vue
+++ b/src/components/Journal/JournalCard.vue
@@ -71,10 +71,9 @@ import { ArrowUp, ArrowDown } from '@element-plus/icons-vue'
 import { IJournal } from '@/types/journal.ts'
 import { formatDate } from 'vue3-common/utils/dateUtil'
 import { useJournalStore } from '@/store/journal.ts'
-import { useAppStore } from '@/store/app.ts'
-import { useRouter } from 'vue-router'
 import { RawImageQuery, ThumbImageQuery } from '@/utils'
 import { showImagePreview } from 'vant'
+import { deepCopyObject } from 'vue3-common/utils/dataUtil'
 
 const props = defineProps({
   item: {
@@ -84,8 +83,6 @@ const props = defineProps({
 })
 
 const journalStore = useJournalStore()
-const appStore = useAppStore()
-const router = useRouter()
 
 onMounted(() => {
   if (overflowLines.value <= 0) expanded.value = true
@@ -104,19 +101,16 @@ const overflowLines = computed(() => {
 
 const showToggle = computed(() => overflowLines.value > 0)
 
-const toggleExpand = () => expanded.value = !expanded.value
+const toggleExpand = () => { expanded.value = !expanded.value }
 
 const viewImageClick = () => {
   showImagePreview({ images: [props.item?.imageUrl + RawImageQuery], closeable: true })
 }
 
 const editClick = async () => {
-  const id = props.item?.id
   journalStore.journalApiType = 'UPDATE'
-  journalStore.currentJournal = props.item
-
-  appStore.isShowMobileBack = true
-  await router.push({ name: 'JournalDetailId', params: { id } })
+  journalStore.currentJournal = deepCopyObject(props.item)
+  journalStore.journalDrawer = true
 }
 </script>
 
diff --git a/src/components/Journal/JournalDrawer.vue b/src/components/Journal/JournalDrawer.vue
new file mode 100644
index 0000000..3023c11
--- /dev/null
+++ b/src/components/Journal/JournalDrawer.vue
@@ -0,0 +1,248 @@
+<template>
+  <el-drawer v-model="journalStore.journalDrawer" destroy-on-close
+             :with-header="false" direction="btt" size="95%">
+    <div class="mobile-journal-detail common-mobile-view">
+      <el-form ref="formRef" :model="journalStore.currentJournal"
+               :rules="rules" label-position="top" label-width="60px"
+               class="form-item">
+        <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 journalCategoryTypeList"
+                :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 journalWeatherTypeList"
+                :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 journalMoodTypeList"
+                :key="index" :value="item" :label="item"
+            />
+          </el-radio-group>
+        </el-form-item>
+
+        <el-form-item label="图片">
+          <el-upload
+              v-model:file-list="imageFileList"
+              list-type="picture-card"
+              :accept="acceptImageTypes"
+              :limit="1"
+              :before-upload="beforeImageUpload"
+              :http-request="httpImageRequest"
+              :on-success="handleImageSuccess"
+              :on-exceed="handleImageExceed"
+              :before-remove="beforeRemove"
+              :on-remove="handleImageRemove"
+          >
+            <el-icon><Plus /></el-icon>
+            <template #tip>
+              <div class="el-upload__tip">
+                请上传小于10M的图片
+              </div>
+            </template>
+          </el-upload>
+        </el-form-item>
+
+        <el-form-item label="视频">
+          <el-upload
+              v-model:file-list="videoFileList"
+              :accept="acceptVideoTypes"
+              :limit="1"
+              :before-upload="beforeVideoUpload"
+              :http-request="httpVideoRequest"
+              :on-success="handleVideoSuccess"
+              :on-exceed="handleVideoExceed"
+              :before-remove="beforeRemove"
+              :on-remove="handleVideoRemove"
+          >
+            <el-button type="primary">点击上传</el-button>
+            <template #tip>
+              <div class="el-upload__tip">
+                请上传小于200M的视频
+              </div>
+            </template>
+          </el-upload>
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <template #footer>
+      <div style="flex: auto">
+        <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>
+    </template>
+  </el-drawer>
+</template>
+
+<script lang="ts" setup>
+import { Location, Plus } from '@element-plus/icons-vue'
+import { useJournalStore } from '@/store/journal.ts'
+import { ElMessage, ElMessageBox, FormRules, UploadProps, UploadRawFile, UploadRequestOptions, UploadUserFile } from 'element-plus'
+import { journalRules } from '@/utils/element/elRules.ts'
+import { reactive, ref, watch } from 'vue'
+import { commonElMessageBox } from 'vue3-common/utils/elUtil'
+import { SvgIcon } from 'vue3-common'
+import { acceptImageTypes, acceptVideoTypes } from '@/utils/file.ts'
+import { beforeUploadImage, beforeUploadVideo, httpRequestFile } from '@/utils/element/elUpload.ts'
+import { journalCategoryTypeList, journalMoodTypeList, journalWeatherTypeList } from '@/utils/home/journalUtil.ts'
+
+const formRef = ref()
+const rules = reactive<FormRules>(journalRules)
+const journalStore = useJournalStore()
+
+const imageFileList = ref<UploadUserFile[]>([])
+const videoFileList = ref<UploadUserFile[]>([])
+
+watch(() => journalStore.journalDrawer, (value) => {
+  initFileList()
+})
+
+const initFileList = () => {
+  imageFileList.value = []
+  videoFileList.value = []
+
+  const { imageUrl, videoUrl } = journalStore.currentJournal
+  if (imageUrl) {
+    imageFileList.value.push({
+      name: 'image',
+      url: imageUrl
+    })
+  }
+
+  if (videoUrl) {
+    videoFileList.value.push({
+      name: 'video',
+      url: videoUrl
+    })
+  }
+}
+
+const beforeImageUpload: UploadProps['beforeUpload'] = (rawFile: UploadRawFile) => {
+  return beforeUploadImage(rawFile)
+}
+
+const httpImageRequest: UploadProps['httpRequest'] = async (options: UploadRequestOptions): Promise<any> => {
+  return await httpRequestFile(journalStore.journalImagePath, options)
+}
+
+const handleImageSuccess = (response: string) => {
+  journalStore.currentJournal.imageUrl = response
+}
+
+const handleImageExceed: UploadProps['onExceed'] = () => {
+  ElMessage.warning('最多上传1张图片')
+}
+
+const handleImageRemove: UploadProps['onRemove'] = () => {
+  journalStore.currentJournal.imageUrl = ''
+}
+
+const beforeRemove: UploadProps['beforeRemove'] = () => {
+  return ElMessageBox.confirm('确认删除该文件?').then(() => true, () => false)
+}
+
+const beforeVideoUpload: UploadProps['beforeUpload'] = (rawFile: UploadRawFile) => {
+  return beforeUploadVideo(rawFile)
+}
+
+const httpVideoRequest: UploadProps['httpRequest'] = async (options: UploadRequestOptions): Promise<any> => {
+  return await httpRequestFile(journalStore.journalImagePath, options, false)
+}
+
+const handleVideoSuccess = (response: string) => {
+  journalStore.currentJournal.videoUrl = `p${response}`
+}
+
+const handleVideoExceed: UploadProps['onExceed'] = () => {
+  ElMessage.warning('最多上传1个视频')
+}
+
+const handleVideoRemove: UploadProps['onRemove'] = () => {
+  journalStore.currentJournal.videoUrl = ''
+}
+
+/**
+ * 点击确认按钮
+ */
+const confirmClick = () => {
+  formRef.value.validate().then(async () => {
+    await journalStore.handleJournalApi(journalStore.currentJournal)
+    journalStore.journalDrawer = false
+  })
+}
+
+const cancelClick = () => {
+  journalStore.journalDrawer = false
+}
+
+const deleteClick = () => {
+  commonElMessageBox('是否确认删除该日记内容?').then(async () => {
+    journalStore.journalApiType = 'DELETE'
+    await journalStore.handleJournalApi(journalStore.currentJournal)
+    journalStore.journalDrawer = false
+  })
+}
+</script>
+
+<style lang="scss">
+.mobile-journal-detail {
+  .el-radio {
+    .el-radio__label {
+      display: flex;
+      align-items: center;
+    }
+  }
+}
+</style>
diff --git a/src/components/Product/ProductCard.vue b/src/components/Product/ProductCard.vue
index 3dac86e..c3e1fc8 100644
--- a/src/components/Product/ProductCard.vue
+++ b/src/components/Product/ProductCard.vue
@@ -68,13 +68,12 @@ import { useProductStore } from '@/store/product.ts'
 import { defineProps, PropType } from 'vue'
 import { commonElMessageBox } from 'vue3-common/utils/elUtil'
 import { IProduct } from '@/types/product.ts'
-import { useRouter } from 'vue-router'
 import { ThumbImageQuery } from '@/utils'
 import { showImagePreview } from 'vant'
 import { formatDate, getDateDifference } from 'vue3-common/utils/dateUtil'
+import { deepCopyObject } from 'vue3-common/utils/dataUtil'
 
 const productStore = useProductStore()
-const router = useRouter()
 
 const props = defineProps({
   productItem: {
@@ -88,11 +87,9 @@ const viewImageClick = () => {
 }
 
 const editClick = async () => {
-  const id = props.productItem?.id
   productStore.productApiType = 'UPDATE'
-
-  productStore.currentProduct = props.productItem as IProduct
-  await router.push({ name: 'ProductDetailId', params: { id } })
+  productStore.currentProduct = deepCopyObject(props.productItem) as IProduct
+  productStore.productDrawer = true
 }
 
 const deleteClick = () => {
diff --git a/src/components/Product/ProductDrawer.vue b/src/components/Product/ProductDrawer.vue
new file mode 100644
index 0000000..91e9b9f
--- /dev/null
+++ b/src/components/Product/ProductDrawer.vue
@@ -0,0 +1,168 @@
+<template>
+  <el-drawer v-model="productStore.productDrawer" destroy-on-close
+             :with-header="false" direction="btt" size="95%">
+    <div class="common-mobile-view">
+      <el-form ref="formRef" :model="productStore.currentProduct"
+               :rules="rules" label-position="top" label-width="80px"
+               class="form-item">
+        <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="物品图片">
+          <el-upload
+              v-model:file-list="imageFileList"
+              list-type="picture-card"
+              :accept="acceptImageTypes"
+              :limit="1"
+              :before-upload="beforeUpload"
+              :http-request="httpRequest"
+              :on-success="handleSuccess"
+              :on-exceed="handleExceed"
+              :before-remove="beforeRemove"
+              :on-remove="handleRemove"
+          >
+            <el-icon><Plus /></el-icon>
+            <template #tip>
+              <div class="el-upload__tip">
+                请上传小于10M的图片
+              </div>
+            </template>
+          </el-upload>
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <template #footer>
+      <div style="flex: auto">
+        <el-button type="primary" @click="confirmClick">确认</el-button>
+        <el-button type="info" @click="cancelClick">取消</el-button>
+      </div>
+    </template>
+  </el-drawer>
+</template>
+
+<script lang="ts" setup>
+import { useProductStore } from '@/store/product.ts'
+import { ElMessage, ElMessageBox, FormRules, UploadProps, UploadRawFile, UploadRequestOptions, UploadUserFile } from 'element-plus'
+import { productRules } from '@/utils/element/elRules.ts'
+import { reactive, ref, watch } from 'vue'
+import { acceptImageTypes } from '@/utils/file.ts'
+import { Plus } from '@element-plus/icons-vue'
+import { beforeUploadImage, httpRequestFile } from '@/utils/element/elUpload.ts'
+
+const formRef = ref()
+const rules = reactive<FormRules>(productRules)
+const productStore = useProductStore()
+
+const imageFileList = ref<UploadUserFile[]>([])
+
+watch(() => productStore.productDrawer, (value) => {
+  if (value) {
+    initImageFileList()
+  }
+})
+
+const initImageFileList = () => {
+  imageFileList.value = []
+  const { imageUrl } = productStore.currentProduct
+  if (imageUrl) {
+    imageFileList.value.push({
+      name: 'image',
+      url: imageUrl
+    })
+  }
+}
+
+const beforeUpload: UploadProps['beforeUpload'] = (rawFile: UploadRawFile) => {
+  return beforeUploadImage(rawFile)
+}
+
+const httpRequest: UploadProps['httpRequest'] = async (options: UploadRequestOptions): Promise<any> => {
+  return await httpRequestFile(productStore.productImagePath, options)
+}
+
+const handleSuccess = (response: string) => {
+  productStore.currentProduct.imageUrl = response
+}
+
+const handleExceed: UploadProps['onExceed'] = () => {
+  ElMessage.warning('最多上传1张图片')
+}
+
+const handleRemove: UploadProps['onRemove'] = () => {
+  productStore.currentProduct.imageUrl = ''
+}
+
+const beforeRemove: UploadProps['beforeRemove'] = () => {
+  return ElMessageBox.confirm('确认删除该文件?').then(() => true, () => false)
+}
+
+/**
+ * 点击确认按钮
+ */
+const confirmClick = () => {
+  formRef.value.validate().then(async () => {
+    await productStore.handleProductApi(productStore.currentProduct)
+    productStore.productDrawer = false
+  })
+}
+
+const cancelClick = () => {
+  productStore.productDrawer = false
+}
+</script>
diff --git a/src/main.ts b/src/main.ts
index 4a385cf..93384ab 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -25,8 +25,8 @@ import 'animate.css'
 // 注册svg-icon
 import 'virtual:svg-icons-register'
 
-import Vant from 'vant'
-import 'vant/lib/index.css'
+// vant图片预览样式
+import 'vant/es/image-preview/style'
 
 // 创建Vue3实例
 const app = createApp(App)
@@ -37,6 +37,5 @@ app.use(createPinia())
 // 使用Element UI Plus
 app.use(ElementPlus, { locale: zhCn })
 app.use(VCalendar, {})
-app.use(Vant)
 // 挂载到根组件上
 app.mount('#app')
diff --git a/src/store/bill.ts b/src/store/bill.ts
index 88b951d..8494f71 100644
--- a/src/store/bill.ts
+++ b/src/store/bill.ts
@@ -12,7 +12,7 @@ import {
 } from '@/apis/bill'
 import { formatDate, getCurrentMonth, getCurrentYear, getStartEndDate } from 'vue3-common/utils/dateUtil'
 import { IDateType, ImagePathEnum } from '@/types'
-import { IDialog, IStatsChart, IHandleApi } from 'vue3-common/types'
+import { IStatsChart, IHandleApi } from 'vue3-common/types'
 import { ElMessage } from 'element-plus'
 
 export const useBillStore = defineStore('bill', {
@@ -52,11 +52,7 @@ export const useBillStore = defineStore('bill', {
     billBookStatsList: [] as IStatsChart[],
     billCategoryStatsList: [] as IStatsChart[],
     billApiType: 'ADD' as IHandleApi,
-    billDialog: {
-      title: '',
-      visible: false,
-      data: {}
-    } as IDialog<IBillRecord>,
+    billDrawer: false,
     isRefresh: false,
     isLoading: false
   }),
@@ -123,7 +119,7 @@ export const useBillStore = defineStore('bill', {
         default:
           break
       }
-      this.billDialog.visible = false
+      await this.refreshInfo()
     },
     getBillDateList() {
       const { billYear, billMonth } = this.billQueryForm
diff --git a/src/store/journal.ts b/src/store/journal.ts
index 9fe4d99..51807dc 100644
--- a/src/store/journal.ts
+++ b/src/store/journal.ts
@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia'
-import type { IDialog, IHandleApi, IStatsChart } from 'vue3-common/types'
+import type { IHandleApi, IStatsChart } from 'vue3-common/types'
 import { ElMessage } from 'element-plus'
 import { IJournal, IJournalQuery } from '@/types/journal.ts'
 import { addJournalApi, deleteJournalApi, queryJournalApi, updateJournalApi } from '@/apis/journal.ts'
@@ -28,11 +28,7 @@ export const useJournalStore = defineStore('journal', {
     dateJournalList: [] as IJournal[],
     journalImagePath: ImagePathEnum.JOURNAL,
     journalVideoPath: ImagePathEnum.JOURNAL,
-    journalDialog: {
-      visible: false,
-      title: '',
-      data: {}
-    } as IDialog<IJournal>,
+    journalDrawer: false,
     isRefresh: false
   }),
   actions: {
@@ -56,7 +52,6 @@ export const useJournalStore = defineStore('journal', {
         default:
           break
       }
-      this.journalDialog.visible = false
       await this.refreshInfo()
     },
     async refreshInfo() {
diff --git a/src/store/product.ts b/src/store/product.ts
index c177859..88b8e7e 100644
--- a/src/store/product.ts
+++ b/src/store/product.ts
@@ -36,6 +36,7 @@ export const useProductStore = defineStore('product', {
       pageSize: 3,
       totalSize: 1
     },
+    productDrawer: false,
     isScrollEnd: false,
     isRefresh: false
   }),
@@ -63,6 +64,7 @@ export const useProductStore = defineStore('product', {
         default:
           break
       }
+      await this.refreshInfo()
     },
     async refreshInfo() {
       await this.queryProductList()
diff --git a/src/styles/mobile.home.layout.module.scss b/src/styles/mobile.home.layout.module.scss
index 64507b6..9d74f1b 100644
--- a/src/styles/mobile.home.layout.module.scss
+++ b/src/styles/mobile.home.layout.module.scss
@@ -44,9 +44,11 @@ $tabBar-height: 70px;
   }
 
   .common-query {
+    width: 100%;
     align-self: center;
 
     display: flex;
+    justify-content: space-around;
     gap: 10px;
   }
 
@@ -248,4 +250,12 @@ $tabBar-height: 70px;
     border: 1px solid var(--color-border-bg);
     border-radius: 10px;
   }
+
+  .el-drawer {
+    border-radius: 16px 16px 0 0;
+
+    .el-drawer__body {
+      padding: 0;
+    }
+  }
 }
diff --git a/src/views/bill/data.vue b/src/views/bill/data.vue
index 787e514..db488a6 100644
--- a/src/views/bill/data.vue
+++ b/src/views/bill/data.vue
@@ -5,6 +5,8 @@
     <bill-calendar v-if="billStore.billDateType === 'month'" />
 
     <van-floating-bubble icon="plus" @click="addClick" style="top: -60px;"/>
+
+    <bill-drawer />
   </div>
 </template>
 
@@ -12,12 +14,11 @@
 import BillQuery from '@/components/Bill/BillQuery.vue'
 import BillCalendar from '@/components/Bill/BillCalendar.vue'
 import BillDailyList from '@/components/Bill/BillDailyList.vue'
+import BillDrawer from '@/components/Bill/BillDrawer.vue'
 import { onMounted } from 'vue'
 import { useBillStore } from '@/store/bill.ts'
-import { useRouter } from 'vue-router'
 
 const billStore = useBillStore()
-const router = useRouter()
 
 onMounted(async () => {
   await billStore.initBillInfo()
@@ -34,6 +35,6 @@ onMounted(async () => {
 const addClick = () => {
   billStore.billApiType = 'ADD'
   billStore.currentBillRecord = billStore.getEmptyBillRecord()
-  router.push({ name: 'BillDetailId', params: { id: 0 } })
+  billStore.billDrawer = true
 }
 </script>
diff --git a/src/views/journal/detail[id].vue b/src/views/journal/detail[id].vue
deleted file mode 100644
index e0edf66..0000000
--- a/src/views/journal/detail[id].vue
+++ /dev/null
@@ -1,250 +0,0 @@
-<template>
-  <div class="mobile-journal-detail common-mobile-view">
-    <el-form ref="formRef" :model="journalStore.currentJournal"
-             :rules="rules" label-position="top" label-width="60px"
-             class="form-item">
-      <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 journalCategoryTypeList"
-              :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 journalWeatherTypeList"
-              :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 journalMoodTypeList"
-              :key="index" :value="item" :label="item"
-          />
-        </el-radio-group>
-      </el-form-item>
-
-      <el-form-item label="图片">
-        <el-upload
-            v-model:file-list="imageFileList"
-            list-type="picture-card"
-            :accept="acceptImageTypes"
-            :limit="1"
-            :before-upload="beforeImageUpload"
-            :http-request="httpImageRequest"
-            :on-success="handleImageSuccess"
-            :on-exceed="handleImageExceed"
-            :before-remove="beforeRemove"
-            :on-remove="handleImageRemove"
-        >
-          <el-icon><Plus /></el-icon>
-          <template #tip>
-            <div class="el-upload__tip">
-              请上传小于10M的图片
-            </div>
-          </template>
-        </el-upload>
-      </el-form-item>
-
-      <el-form-item label="视频">
-        <el-upload
-            v-model:file-list="videoFileList"
-            :accept="acceptVideoTypes"
-            :limit="1"
-            :before-upload="beforeVideoUpload"
-            :http-request="httpVideoRequest"
-            :on-success="handleVideoSuccess"
-            :on-exceed="handleVideoExceed"
-            :before-remove="beforeRemove"
-            :on-remove="handleVideoRemove"
-        >
-          <el-button type="primary">点击上传</el-button>
-          <template #tip>
-            <div class="el-upload__tip">
-              请上传小于200M的视频
-            </div>
-          </template>
-        </el-upload>
-      </el-form-item>
-    </el-form>
-
-    <div class="form-button">
-      <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, Plus } from '@element-plus/icons-vue'
-import { useJournalStore } from '@/store/journal.ts'
-import { useAppStore } from '@/store/app.ts'
-import { ElMessage, ElMessageBox, FormRules, UploadProps, UploadRawFile, UploadRequestOptions, UploadUserFile } from 'element-plus'
-import { journalRules } from '@/utils/element/elRules.ts'
-import { onMounted, reactive, ref } from 'vue'
-import { commonElMessageBox } from 'vue3-common/utils/elUtil'
-import { SvgIcon } from 'vue3-common'
-import { acceptImageTypes, acceptVideoTypes } from '@/utils/file.ts'
-import { beforeUploadImage, beforeUploadVideo, httpRequestFile } from '@/utils/element/elUpload.ts'
-import { journalCategoryTypeList, journalMoodTypeList, journalWeatherTypeList } from '@/utils/home/journalUtil.ts'
-
-const formRef = ref()
-const rules = reactive<FormRules>(journalRules)
-const journalStore = useJournalStore()
-const appStore = useAppStore()
-
-const imageFileList = ref<UploadUserFile[]>([])
-const videoFileList = ref<UploadUserFile[]>([])
-
-onMounted(async () => {
-  appStore.isShowMobileBack = true
-
-  initFileList()
-})
-
-const initFileList = () => {
-  imageFileList.value = []
-  videoFileList.value = []
-
-  const { imageUrl, videoUrl } = journalStore.currentJournal
-  if (imageUrl) {
-    imageFileList.value.push({
-      name: 'image',
-      url: imageUrl
-    })
-  }
-
-  if (videoUrl) {
-    videoFileList.value.push({
-      name: 'video',
-      url: videoUrl
-    })
-  }
-}
-
-const beforeImageUpload: UploadProps['beforeUpload'] = (rawFile: UploadRawFile) => {
-  return beforeUploadImage(rawFile)
-}
-
-const httpImageRequest: UploadProps['httpRequest'] = async (options: UploadRequestOptions): Promise<any> => {
-  return await httpRequestFile(journalStore.journalImagePath, options)
-}
-
-const handleImageSuccess = (response: string) => {
-  journalStore.currentJournal.imageUrl = response
-}
-
-const handleImageExceed: UploadProps['onExceed'] = () => {
-  ElMessage.warning('最多上传1张图片')
-}
-
-const handleImageRemove: UploadProps['onRemove'] = () => {
-  journalStore.currentJournal.imageUrl = ''
-}
-
-const beforeRemove: UploadProps['beforeRemove'] = () => {
-  return ElMessageBox.confirm('确认删除该文件?').then(() => true, () => false)
-}
-
-const beforeVideoUpload: UploadProps['beforeUpload'] = (rawFile: UploadRawFile) => {
-  return beforeUploadVideo(rawFile)
-}
-
-const httpVideoRequest: UploadProps['httpRequest'] = async (options: UploadRequestOptions): Promise<any> => {
-  return await httpRequestFile(journalStore.journalImagePath, options, false)
-}
-
-const handleVideoSuccess = (response: string) => {
-  journalStore.currentJournal.videoUrl = `p${response}`
-}
-
-const handleVideoExceed: UploadProps['onExceed'] = () => {
-  ElMessage.warning('最多上传1个视频')
-}
-
-const handleVideoRemove: UploadProps['onRemove'] = () => {
-  journalStore.currentJournal.videoUrl = ''
-}
-
-/**
- * 点击确认按钮
- */
-const confirmClick = () => {
-  formRef.value.validate().then(async () => {
-    await journalStore.handleJournalApi(journalStore.currentJournal)
-    history.back()
-    appStore.isShowMobileBack = false
-  })
-}
-
-const cancelClick = () => {
-  history.back()
-  appStore.isShowMobileBack = false
-}
-
-const deleteClick = () => {
-  commonElMessageBox('是否确认删除该日记内容?').then(async () => {
-    journalStore.journalApiType = 'DELETE'
-    await journalStore.handleJournalApi(journalStore.currentJournal)
-    history.back()
-    appStore.isShowMobileBack = false
-  })
-}
-</script>
-
-<style lang="scss">
-.mobile-journal-detail {
-  .el-radio {
-    .el-radio__label {
-      display: flex;
-      align-items: center;
-    }
-  }
-}
-</style>
diff --git a/src/views/journal/record.vue b/src/views/journal/record.vue
index aaa3d39..1cbf003 100644
--- a/src/views/journal/record.vue
+++ b/src/views/journal/record.vue
@@ -3,18 +3,19 @@
     <journal-calendar />
 
     <van-floating-bubble icon="plus" @click="addClick" style="top: -60px;"/>
+
+    <journal-drawer />
   </div>
 </template>
 
 <script lang="ts" setup>
 import JournalCalendar from '@/components/Journal/JournalCalendar.vue'
+import JournalDrawer from '@/components/Journal/JournalDrawer.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')
@@ -26,6 +27,6 @@ onMounted(async () => {
 const addClick = () => {
   journalStore.journalApiType = 'ADD'
   journalStore.currentJournal = journalStore.getEmptyJournal()
-  router.push({ name: 'JournalDetailId', params: { id: 0 } })
+  journalStore.journalDrawer = true
 }
 </script>
diff --git a/src/views/meta.ts b/src/views/meta.ts
index c33720a..15d3893 100644
--- a/src/views/meta.ts
+++ b/src/views/meta.ts
@@ -19,10 +19,6 @@ export const mobileHomeMeta: IRouteMetaConfig = {
     title: '分析',
     icon: ''
   },
-  '/bill/detail/:id': {
-    title: '账单内容',
-    icon: ''
-  },
   '/food': {
     title: '美食记录',
     icon: '',
@@ -157,10 +153,6 @@ export const mobileHomeMeta: IRouteMetaConfig = {
     title: '清单',
     icon: ''
   },
-  '/product/detail/id': {
-    title: '内容',
-    icon: ''
-  },
   '/journal': {
     title: '日记',
     icon: 'home-product',
@@ -171,10 +163,6 @@ export const mobileHomeMeta: IRouteMetaConfig = {
     title: '清单',
     icon: ''
   },
-  '/journal/detail': {
-    title: '内容',
-    icon: ''
-  },
   '/journal/timeline': {
     title: '时间轴',
     icon: ''
diff --git a/src/views/product/detail[id].vue b/src/views/product/detail[id].vue
deleted file mode 100644
index 508f2b0..0000000
--- a/src/views/product/detail[id].vue
+++ /dev/null
@@ -1,167 +0,0 @@
-<template>
-  <div class="common-mobile-view">
-    <el-form ref="formRef" :model="productStore.currentProduct"
-             :rules="rules" label-position="top" label-width="80px"
-             class="form-item">
-      <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="物品图片">
-        <el-upload
-            v-model:file-list="imageFileList"
-            list-type="picture-card"
-            :accept="acceptImageTypes"
-            :limit="1"
-            :before-upload="beforeUpload"
-            :http-request="httpRequest"
-            :on-success="handleSuccess"
-            :on-exceed="handleExceed"
-            :before-remove="beforeRemove"
-            :on-remove="handleRemove"
-        >
-          <el-icon><Plus /></el-icon>
-          <template #tip>
-            <div class="el-upload__tip">
-              请上传小于10M的图片
-            </div>
-          </template>
-        </el-upload>
-      </el-form-item>
-    </el-form>
-
-    <div class="form-button">
-      <el-button type="primary" @click="confirmClick">确认</el-button>
-      <el-button type="info" @click="cancelClick">取消</el-button>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { useProductStore } from '@/store/product.ts'
-import { useAppStore } from '@/store/app.ts'
-import { ElMessage, ElMessageBox, FormRules, UploadProps, UploadRawFile, UploadRequestOptions, UploadUserFile } from 'element-plus'
-import { productRules } from '@/utils/element/elRules.ts'
-import { onMounted, reactive, ref } from 'vue'
-import { acceptImageTypes } from '@/utils/file.ts'
-import { Plus } from '@element-plus/icons-vue'
-import { beforeUploadImage, httpRequestFile } from '@/utils/element/elUpload.ts'
-
-const formRef = ref()
-const rules = reactive<FormRules>(productRules)
-const productStore = useProductStore()
-const appStore = useAppStore()
-
-const imageFileList = ref<UploadUserFile[]>([])
-
-onMounted(async () => {
-  appStore.isShowMobileBack = true
-
-  initImageFileList()
-})
-
-const initImageFileList = () => {
-  imageFileList.value = []
-  const { imageUrl } = productStore.currentProduct
-  if (imageUrl) {
-    imageFileList.value.push({
-      name: 'image',
-      url: imageUrl
-    })
-  }
-}
-
-const beforeUpload: UploadProps['beforeUpload'] = (rawFile: UploadRawFile) => {
-  return beforeUploadImage(rawFile)
-}
-
-const httpRequest: UploadProps['httpRequest'] = async (options: UploadRequestOptions): Promise<any> => {
-  return await httpRequestFile(productStore.productImagePath, options)
-}
-
-const handleSuccess = (response: string) => {
-  productStore.currentProduct.imageUrl = response
-}
-
-const handleExceed: UploadProps['onExceed'] = () => {
-  ElMessage.warning('最多上传1张图片')
-}
-
-const handleRemove: UploadProps['onRemove'] = () => {
-  productStore.currentProduct.imageUrl = ''
-}
-
-const beforeRemove: UploadProps['beforeRemove'] = () => {
-  return ElMessageBox.confirm('确认删除该文件?').then(() => true, () => false)
-}
-
-/**
- * 点击确认按钮
- */
-const confirmClick = () => {
-  formRef.value.validate().then(async () => {
-    await productStore.handleProductApi(productStore.currentProduct)
-    history.back()
-    appStore.isShowMobileBack = false
-  })
-}
-
-const cancelClick = () => {
-  history.back()
-  appStore.isShowMobileBack = false
-}
-</script>
diff --git a/src/views/product/list.vue b/src/views/product/list.vue
index 5f239f3..c1ad12b 100644
--- a/src/views/product/list.vue
+++ b/src/views/product/list.vue
@@ -10,18 +10,19 @@
     </div>
 
     <van-floating-bubble icon="plus" @click="addClick" style="top: -60px;"/>
+
+    <product-drawer />
   </div>
 </template>
 
 <script lang="ts" setup>
 import ProductQuery from '@/components/Product/ProductQuery.vue'
 import ProductCard from '@/components/Product/ProductCard.vue'
+import ProductDrawer from '@/components/Product/ProductDrawer.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()
@@ -30,6 +31,6 @@ onMounted(async () => {
 const addClick = () => {
   productStore.productApiType = 'ADD'
   productStore.currentProduct = productStore.getEmptyProduct()
-  router.push({ name: 'ProductDetailId', params: { id: 0 } })
+  productStore.productDrawer = true
 }
 </script>
diff --git a/tailwind.config.js b/tailwind.config.js
deleted file mode 100644
index 55d1fb9..0000000
--- a/tailwind.config.js
+++ /dev/null
@@ -1,12 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: [
-    "./index.html",
-    "./src/**/*.{vue,js,ts,jsx,tsx}",
-  ],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-}
-
diff --git a/vite.config.ts b/vite.config.ts
index 5395995..74948e8 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -3,6 +3,8 @@ import vue from '@vitejs/plugin-vue'
 import path from 'path'
 import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
 import { viteMockServe } from 'vite-plugin-mock'
+import Components from 'unplugin-vue-components/vite'
+import { VantResolver } from '@vant/auto-import-resolver'
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -14,6 +16,9 @@ export default defineConfig({
       // 指定symbolId格式
       symbolId: 'icon-[dir]-[name]'
     }),
+    Components({
+      resolvers: [VantResolver()]
+    }),
     viteMockServe({
       mockPath: 'src/mock',
       enable: false