From 71e11eaf30418c9810cc694be2b48b6a103217fa Mon Sep 17 00:00:00 2001
From: yuany3721 <li1116@mail.ustc.edu.cn>
Date: Sun, 12 Apr 2026 13:31:27 +0800
Subject: [PATCH] feat: Add OIDC authentication with Authentik and refactor
 project structure

Backend:
- Add auth.py for JWT token verification
- Update main.py to protect all routes with auth middleware
- Remove dashboard router (frontend handles aggregation)
- Add Docker support with Dockerfile and docker-compose.yml

Frontend:
- Add OIDC authentication using oidc-client-ts with PKCE flow
- Create router.js with auth guards for automatic login/logout
- Add api.js for unified Axios instance with auth headers
- Add composables: useAuth.js, useVehicleData.js for caching
- Add views/Main.vue as main application page
- Simplify App.vue to router-view container
- Add deploy-web.sh deployment script

Documentation:
- Update AGENTS.md with new architecture and auth flow
---
 .gitignore                                    |   2 +
 AGENTS.md                                     | 189 +++++--
 api/Dockerfile                                |  14 +
 api/auth.py                                   | 184 +++++++
 api/database.py                               |  12 +-
 api/docker-compose.yml                        |  11 +
 api/main.py                                   |  22 +-
 api/models.py                                 |  23 +-
 api/requirements.txt                          |  29 +-
 api/routers/__init__.py                       |   7 +-
 api/routers/costs.py                          |  96 ++--
 api/routers/dashboard.py                      | 128 -----
 api/routers/fuel_records.py                   | 227 ++++-----
 api/routers/vehicles.py                       |  67 +--
 api/schemas.py                                |  55 +-
 deploy-web.sh                                 |  86 ++++
 web/package-lock.json                         | 474 +++++++++++++++++-
 web/package.json                              |   6 +-
 web/src/App.vue                               | 432 +---------------
 web/src/api.js                                |  16 +
 web/src/components/cards/StatsCards.vue       |  32 +-
 web/src/components/charts/DashboardCharts.vue | 303 ++++-------
 .../components/dialogs/cost/AddCostDialog.vue |   4 +-
 .../dialogs/cost/EditCostDialog.vue           |   8 +-
 .../components/dialogs/fuel/AddFuelDialog.vue |  12 +-
 .../dialogs/fuel/EditFuelDialog.vue           | 106 ++--
 .../dialogs/vehicle/AddVehicleDialog.vue      |   4 +-
 .../dialogs/vehicle/EditVehicleDialog.vue     |   4 +-
 .../components/panels/CostRecordsPanel.vue    | 338 +++++--------
 .../components/panels/FuelRecordsPanel.vue    | 102 ++--
 web/src/composables/useAuth.js                |  35 ++
 web/src/composables/useVehicleData.js         | 147 ++++++
 web/src/constants/index.js                    |  15 +
 web/src/main.js                               |   2 +
 web/src/router.js                             |  65 +++
 web/src/utils/calculations.js                 | 357 +++++++++++++
 web/src/views/Main.vue                        | 405 +++++++++++++++
 37 files changed, 2517 insertions(+), 1502 deletions(-)
 create mode 100644 api/Dockerfile
 create mode 100644 api/auth.py
 create mode 100644 api/docker-compose.yml
 delete mode 100644 api/routers/dashboard.py
 create mode 100755 deploy-web.sh
 create mode 100644 web/src/api.js
 create mode 100644 web/src/composables/useAuth.js
 create mode 100644 web/src/composables/useVehicleData.js
 create mode 100644 web/src/constants/index.js
 create mode 100644 web/src/router.js
 create mode 100644 web/src/utils/calculations.js
 create mode 100644 web/src/views/Main.vue

diff --git a/.gitignore b/.gitignore
index cf8c060..877f4e8 100644
--- a/.gitignore
+++ b/.gitignore
@@ -300,3 +300,5 @@ dist
 .yarn/install-state.gz
 .pnp.*
 
+
+.ruff_cache/
\ No newline at end of file
diff --git a/AGENTS.md b/AGENTS.md
index 74d3f76..652ad92 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -1,70 +1,144 @@
 # CarCost - Agent Instructions
 
 ## Project Overview
-Full-stack vehicle expense tracking application.
+Full-stack vehicle expense tracking application with OIDC authentication.
 - **Frontend**: Vue 3 + Vite + Element Plus + ECharts (`web/`)
 - **Backend**: FastAPI + SQLAlchemy + PostgreSQL (`api/`)
+- **Authentication**: Authentik OIDC with PKCE flow
 
 ## Architecture
 
 ### Monorepo Structure
 ```
-web/src/
-├── App.vue                   # Main app component
-├── main.js                   # Entry with Element Plus + ECharts setup
-└── components/               # Reusable components
-    ├── panels/               # List panels with charts + table
-    │   ├── FuelRecordsPanel.vue   # Desktop & mobile shared
-    │   └── CostRecordsPanel.vue   # Desktop & mobile shared
-    ├── charts/               # Chart components
-    │   └── DashboardCharts.vue
-    ├── cards/                # Card components
-    │   └── StatsCards.vue
-    └── dialogs/              # Dialog components
-        ├── vehicle/
-        ├── fuel/
-        └── cost/
+carcost/
+├── deploy-web.sh             # Frontend deployment script
+├── web/
+│   ├── src/
+│   │   ├── App.vue           # Root container (router-view only)
+│   │   ├── main.js           # Entry with Element Plus + ECharts
+│   │   ├── router.js         # Vue Router with OIDC auth guard
+│   │   ├── api.js            # Unified Axios instance with auth
+│   │   ├── composables/      # Vue composables
+│   │   │   ├── useVehicleData.js
+│   │   │   └── useAuth.js    # OIDC configuration (userManager only)
+│   │   ├── views/            # Page views
+│   │   │   └── Main.vue      # Main application page
+│   │   └── components/       # Reusable components
+│   └── dist/                 # Build output
+│
+├── api/
+│   ├── main.py               # FastAPI entry with auth middleware
+│   ├── auth.py               # JWT verification module
+│   ├── config.py             # Configuration
+│   ├── database.py           # Database connection
+│   ├── models.py             # SQLAlchemy models
+│   ├── schemas.py            # Pydantic schemas
+│   └── routers/
+│       ├── vehicles.py       # Vehicle CRUD
+│       ├── fuel_records.py   # Fuel record CRUD
+│       └── costs.py          # Cost record CRUD
 ```
 
-**Responsive Design Pattern**:
-- `App.vue` uses CSS media queries to switch between desktop/mobile layouts
-- `*Panel.vue` components handle both desktop and mobile via `showCharts`/`showList` props
-- Desktop: Dual-column layout with StatsCards + DashboardCharts + Panels side-by-side
-- Mobile: Single-column with view switching (dashboard/fuel/cost tabs)
+### Authentication Flow
+
+**Frontend (Vue Router Guard)**:
+1. `router.beforeEach` checks authentication status
+2. Unauthenticated → redirect to Authentik OIDC login
+3. Callback `/auth/callback` → process code, exchange for token
+4. Token stored in localStorage, set to Axios headers
+5. All API requests include `Authorization: Bearer <token>`
+
+**Backend (FastAPI JWT)**:
+1. `auth.py` validates JWT token from Authentik
+2. All routes protected by `get_current_user` dependency
+3. Returns 401 for invalid/missing tokens
 
 ### API Routing Convention
 All API routes include `/carcost` prefix:
-- `/carcost/vehicles/*` - Vehicle CRUD
-- `/carcost/fuel_records/*` - Fuel records
-- `/carcost/costs/*` - Cost records
-- `/carcost/dashboard/*` - Dashboard data
+- `GET/POST /carcost/vehicles/*` - Vehicle CRUD
+- `GET/POST /carcost/fuel-records/*` - Fuel records
+- `GET/POST /carcost/costs/*` - Cost records
 
-Frontend uses: `API_BASE = 'https://api.yuany3721.site/carcost'`
+Frontend API base: `https://api.yuany3721.site/carcost`
+
+### Key Files
+
+**Frontend Auth**:
+- `web/src/router.js` - Route guards handle OIDC flow
+- `web/src/api.js` - Unified Axios instance with auth header management
+- `web/src/composables/useAuth.js` - OIDC client configuration
+
+**Backend Auth**:
+- `api/auth.py` - JWT token verification
+- `api/main.py` - Protected routes with auth dependency
 
 ### Database Models
-- **Vehicle**: `id`, `name`, `purchase_date`, `initial_mileage`, `is_deleted`
-- **FuelRecord**: `id`, `vehicle_id`, `date`, `mileage`, `fuel_amount`, `fuel_price`, `total_cost`, `is_full_tank`
-- **Cost**: `id`, `vehicle_id`, `date`, `type`, `amount`, `mileage`, `is_installment`, `installment_months`
+
+#### Vehicle
+- `id`, `name`, `purchase_date`, `initial_mileage`
+- `is_deleted` - Soft delete flag
+- `created_at`, `updated_at`
+
+#### FuelRecord
+- `id`, `vehicle_id`, `date`, `mileage`
+- `fuel_amount` - Liters
+- `fuel_price` - Price per liter
+- `display_cost` - Machine display amount (机显总价)
+- `actual_cost` - Actual paid amount (实付金额)
+- `is_full_tank` - Boolean
+- `notes` - Gas station name etc.
+- `is_deleted` - Soft delete flag
+
+#### Cost
+- `id`, `vehicle_id`, `date`, `type`, `amount`
+- `mileage` - Optional
+- `notes`
+- `is_installment` - Whether to spread across months
+- `installment_months` - Number of months to spread
+- `is_deleted` - Soft delete flag
+
+**Cost Types**: 保养/维修/保险/停车/过路费/洗车/违章/其他
 
 All models use soft delete (`is_deleted` boolean).
 
+## Authentication (Authentik OIDC)
+
+### Authentik Configuration
+
+**OIDC Discovery URL**: `https://auth.yuany3721.site/application/o/car-cost/.well-known/openid-configuration`
+
+**Client ID**: `27UljrOp2LfCg3fjEo1n8vOiRyCFzqEcnBFiUK59`
+
+**Endpoints**:
+- **Authorization**: `https://auth.yuany3721.site/application/o/authorize/`
+- **Token**: `https://auth.yuany3721.site/application/o/token/`
+- **UserInfo**: `https://auth.yuany3721.site/application/o/userinfo/`
+- **End Session**: `https://auth.yuany3721.site/application/o/car-cost/end-session/`
+
+### Environment Variables
+
+```bash
+# api/.env
+DATABASE_URL=postgresql://user:pass@host:port/carcost
+DEBUG=true
+AUTHENTIK_ISSUER=https://auth.yuany3721.site/application/o/car-cost/
+AUTHENTIK_CLIENT_ID=27UljrOp2LfCg3fjEo1n8vOiRyCFzqEcnBFiUK59
+```
+
 ## Development Commands
 
 ### Backend (api/)
 ```bash
-# Setup (requires Python 3.x)
 cd api
-python -m venv venv
 source venv/bin/activate
-pip install -r requirements.txt
 
 # Run dev server
 python main.py
 # or
 uvicorn main:app --host 0.0.0.0 --port 7030 --reload
 
-# Run tests
-python test_api.py
+# Import fuel records from CSV
+python import_fuel_records.py
 ```
 
 ### Frontend (web/)
@@ -72,7 +146,7 @@ python test_api.py
 cd web
 npm install
 
-# Dev server (exposes to all hosts)
+# Dev server
 npm run dev
 
 # Build for production
@@ -82,39 +156,44 @@ npm run build
 npm run preview
 ```
 
+### Deployment
+```bash
+# Deploy frontend (from carcost root)
+./deploy-web.sh
+```
+
 ## Key Configuration Files
 
 ### api/.env
 ```
 DATABASE_URL=postgresql://user:pass@host:port/carcost
 DEBUG=true
+AUTHENTIK_ISSUER=https://auth.yuany3721.site/application/o/car-cost/
+AUTHENTIK_CLIENT_ID=27UljrOp2LfCg3fjEo1n8vOiRyCFzqEcnBFiUK59
 ```
 
 ### web/vite.config.js
-- `server.allowedHosts: ['yuany3721.site', '.yuany3721.site']` - Required for production domain access
+- `server.allowedHosts: ['yuany3721.site', '.yuany3721.site']`
 
 ## Code Patterns
 
-### Frontend (Vue 3 Composition API)
-- Uses `<script setup>` syntax
-- Element Plus for UI components (with Chinese text labels)
-- ECharts registered globally via `vue-echarts`
-- Axios for API calls
-- Responsive design with mobile/desktop layouts
+### Frontend
+- Vue 3 Composition API with `<script setup>`
+- Element Plus for UI components
+- Unified Axios instance (`api.js`) with automatic auth header
+- Vue Router guards handle all auth logic before component render
+- `useVehicleData` composable for global data caching
 
-### Backend (FastAPI)
-- Routers auto-create tables via `Base.metadata.create_all()`
-- CORS configured for all origins (dev-friendly, restrict in production)
-- SQLAlchemy 2.0 style with `declarative_base()`
-- Database connection pooling: `pool_size=5, max_overflow=10`
-
-## Testing
-- `api/test_api.py`: Integration tests against live API (api.yuany3721.site)
-- Tests cover costs CRUD operations and type validation
+### Backend
+- FastAPI with JWT token verification
+- All routes protected by default
+- Manual session management
+- SQLAlchemy 2.0 style
 
 ## Important Notes
-- **Port**: Backend runs on 7030, frontend dev server typically on 5173
-- **CORS**: Backend allows all origins (`["*"]`) - change for production
-- **Soft Deletes**: All entities use `is_deleted` flag; queries should filter it
-- **Cost Types**: 保养/维修/保险/停车/洗车/违章/过路费/其他
+
+- **Port**: Backend runs on 7030, frontend dev server on 5173
+- **CORS**: Backend allows all origins (`["*"]`) for dev
+- **Soft Deletes**: All entities use `is_deleted` flag
 - **Frontend Max Width**: Content constrained to 900px centered
+- **Authentication**: Fully automatic, no login/logout buttons in UI
diff --git a/api/Dockerfile b/api/Dockerfile
new file mode 100644
index 0000000..58e8c13
--- /dev/null
+++ b/api/Dockerfile
@@ -0,0 +1,14 @@
+FROM python:3.12-slim
+
+WORKDIR /app
+
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt -i https://mirrors.ustc.edu.cn/pypi/web/simple
+
+COPY *.py .
+COPY routers ./routers
+COPY .env .
+
+EXPOSE 7030
+
+CMD ["python3", "main.py"]
\ No newline at end of file
diff --git a/api/auth.py b/api/auth.py
new file mode 100644
index 0000000..746e3df
--- /dev/null
+++ b/api/auth.py
@@ -0,0 +1,184 @@
+"""
+JWT 认证模块
+用于验证 Authentik 颁发的 JWT Token
+"""
+
+import httpx
+from fastapi import HTTPException, Depends, status
+from fastapi.security import HTTPBearer, HTTPAuthorizationCredentials
+from jose import jwt
+from jose.exceptions import JWTError
+from typing import Optional, Dict, Any
+from functools import lru_cache
+import os
+
+# 从环境变量获取配置
+AUTHENTIK_ISSUER = os.getenv(
+    "AUTHENTIK_ISSUER", "https://auth.yuany3721.site/application/o/car-cost/"
+)
+AUTHENTIK_CLIENT_ID = os.getenv(
+    "AUTHENTIK_CLIENT_ID", "27UljrOp2LfCg3fjEo1n8vOiRyCFzqEcnBFiUK59"
+)
+
+print(f"[Auth] AUTHENTIK_ISSUER: {AUTHENTIK_ISSUER}")
+print(f"[Auth] AUTHENTIK_CLIENT_ID: {AUTHENTIK_CLIENT_ID}")
+
+# JWKS 缓存
+_jwks_cache = None
+_jwks_cache_time = None
+
+# Bearer token 验证器
+security = HTTPBearer(auto_error=False)
+
+
+async def fetch_jwks() -> Dict[str, Any]:
+    """获取 Authentik 的 JWKS（公钥集）"""
+    global _jwks_cache, _jwks_cache_time
+
+    # JWKS URL
+    jwks_url = f"{AUTHENTIK_ISSUER.rstrip('/')}/jwks/"
+    print(f"[Auth] Fetching JWKS from: {jwks_url}")
+
+    try:
+        async with httpx.AsyncClient() as client:
+            response = await client.get(jwks_url, timeout=10.0)
+            response.raise_for_status()
+            jwks = response.json()
+            print(
+                f"[Auth] JWKS fetched successfully, keys: {list(jwks.get('keys', []))}"
+            )
+            return jwks
+    except Exception as e:
+        print(f"[Auth] 获取 JWKS 失败: {e}")
+        raise HTTPException(
+            status_code=status.HTTP_503_SERVICE_UNAVAILABLE, detail="无法获取认证公钥"
+        )
+
+
+def get_public_key(jwks: Dict[str, Any], kid: str) -> Optional[str]:
+    """从 JWKS 中获取指定 kid 的公钥"""
+    for key in jwks.get("keys", []):
+        if key.get("kid") == kid:
+            return key
+    return None
+
+
+async def verify_token(token: str) -> Dict[str, Any]:
+    """
+    验证 JWT Token
+    """
+    try:
+        print(f"[Auth] Verifying token (first 50 chars): {token[:50]}...")
+
+        # 1. 获取 JWKS
+        jwks = await fetch_jwks()
+
+        # 2. 获取 token header 中的 kid
+        header = jwt.get_unverified_header(token)
+        kid = header.get("kid")
+        print(f"[Auth] Token header: {header}")
+
+        if not kid:
+            raise HTTPException(
+                status_code=status.HTTP_401_UNAUTHORIZED,
+                detail="Token 格式无效",
+                headers={"WWW-Authenticate": "Bearer"},
+            )
+
+        # 3. 获取对应的公钥
+        public_key = get_public_key(jwks, kid)
+        if not public_key:
+            print(f"[Auth] Public key not found for kid: {kid}")
+            raise HTTPException(
+                status_code=status.HTTP_401_UNAUTHORIZED,
+                detail="Token 签名密钥无效",
+                headers={"WWW-Authenticate": "Bearer"},
+            )
+        print(f"[Auth] Found public key for kid: {kid}")
+
+        # 4. 验证 token
+        print(
+            f"[Auth] Decoding token with issuer: {AUTHENTIK_ISSUER}, audience: {AUTHENTIK_CLIENT_ID}"
+        )
+        payload = jwt.decode(
+            token,
+            public_key,
+            algorithms=["RS256"],
+            issuer=AUTHENTIK_ISSUER,
+            audience=AUTHENTIK_CLIENT_ID,
+        )
+        print(f"[Auth] Token verified successfully, payload: {payload}")
+
+        return payload
+
+    except JWTError as e:
+        print(f"[Auth] JWT verification failed: {e}")
+        raise HTTPException(
+            status_code=status.HTTP_401_UNAUTHORIZED,
+            detail=f"Token 验证失败: {str(e)}",
+            headers={"WWW-Authenticate": "Bearer"},
+        )
+    except Exception as e:
+        print(f"[Auth] 验证 token 时出错: {e}")
+        raise HTTPException(
+            status_code=status.HTTP_500_INTERNAL_SERVER_ERROR, detail="服务器内部错误"
+        )
+
+
+async def get_current_user(
+    credentials: HTTPAuthorizationCredentials = Depends(security),
+) -> Dict[str, Any]:
+    """
+    FastAPI 依赖项：获取当前用户
+    """
+    print(f"[Auth] get_current_user called, credentials: {credentials}")
+
+    if not credentials:
+        print("[Auth] No credentials provided")
+        raise HTTPException(
+            status_code=status.HTTP_401_UNAUTHORIZED,
+            detail="缺少认证信息",
+            headers={"WWW-Authenticate": "Bearer"},
+        )
+
+    token = credentials.credentials
+    print(f"[Auth] Token received (first 30 chars): {token[:30]}...")
+    return await verify_token(token)
+
+
+async def get_current_user_optional(
+    credentials: HTTPAuthorizationCredentials = Depends(security),
+) -> Optional[Dict[str, Any]]:
+    """
+    FastAPI 依赖项：获取当前用户（可选）
+    """
+    if not credentials:
+        return None
+
+    try:
+        token = credentials.credentials
+        return await verify_token(token)
+    except HTTPException:
+        return None
+
+
+class AuthRequired:
+    """
+    用于在路由中要求认证的装饰器（类视图方式）
+    """
+
+    async def __call__(
+        self, credentials: HTTPAuthorizationCredentials = Depends(security)
+    ):
+        await get_current_user(credentials)
+        return True
+
+
+# 便捷函数：检查 token 是否有效（不抛出异常）
+async def is_token_valid(token: str) -> bool:
+    """检查 token 是否有效，返回布尔值"""
+    try:
+        await verify_token(token)
+        return True
+    except HTTPException:
+        return False
diff --git a/api/database.py b/api/database.py
index 8f73c63..f06b861 100644
--- a/api/database.py
+++ b/api/database.py
@@ -17,9 +17,17 @@ SessionLocal = sessionmaker(bind=engine)
 
 def get_session() -> Session:
     """获取新的数据库会话
-    
+
     使用示例:
-        with get_session() as session:
+        session = get_session()
+        try:
             result = session.query(Model).all()
+            session.commit()
+            return result
+        except Exception:
+            session.rollback()
+            raise
+        finally:
+            session.close()
     """
     return SessionLocal()
diff --git a/api/docker-compose.yml b/api/docker-compose.yml
new file mode 100644
index 0000000..58b0157
--- /dev/null
+++ b/api/docker-compose.yml
@@ -0,0 +1,11 @@
+services:
+    api_carcost:
+        build: .
+        container_name: api_carcost
+        extra_hosts:
+            - "host.docker.internal:host-gateway"
+        ports:
+            - "7030:7030"
+        environment:
+            - TZ=Asia/Shanghai
+        restart: unless-stopped
diff --git a/api/main.py b/api/main.py
index bba01b3..edc4913 100644
--- a/api/main.py
+++ b/api/main.py
@@ -1,8 +1,9 @@
-from fastapi import FastAPI
+from fastapi import FastAPI, Depends
 from fastapi.middleware.cors import CORSMiddleware
 
 from config import settings
-from routers import vehicles_router, fuel_records_router, costs_router, dashboard_router
+from routers import vehicles_router, fuel_records_router, costs_router
+from auth import get_current_user
 
 # 创建 FastAPI 应用
 app = FastAPI(title=settings.TITLE, version=settings.VERSION, debug=settings.DEBUG)
@@ -10,17 +11,19 @@ app = FastAPI(title=settings.TITLE, version=settings.VERSION, debug=settings.DEB
 # 配置 CORS
 app.add_middleware(
     CORSMiddleware,
-    allow_origins=["*"],  # 生产环境应该限制具体域名
     allow_credentials=True,
-    allow_methods=["*"],
+    allow_origin_regex=r"http[s]?://172\.30\.0\..*:5173|http[s]?://.*\.yuany3721\.site|http[s]?://yuany3721\.site",
+    allow_methods=["GET", "POST"],
     allow_headers=["*"],
 )
 
-# 注册路由 - 添加 /carcost 前缀
-app.include_router(vehicles_router, prefix="/carcost")
-app.include_router(fuel_records_router, prefix="/carcost")
-app.include_router(costs_router, prefix="/carcost")
-app.include_router(dashboard_router, prefix="/carcost")
+# 注册路由 - 添加 /carcost 前缀，并启用认证保护
+# 所有路由都需要认证
+dependencies = [Depends(get_current_user)]
+
+app.include_router(vehicles_router, prefix="/carcost", dependencies=dependencies)
+app.include_router(fuel_records_router, prefix="/carcost", dependencies=dependencies)
+app.include_router(costs_router, prefix="/carcost", dependencies=dependencies)
 
 
 @app.get("/")
@@ -30,6 +33,7 @@ def root():
         "message": "Welcome to CarCost API",
         "version": settings.VERSION,
         "docs": "/docs",
+        "auth": "Protected by Authentik OIDC",
     }
 
 
diff --git a/api/models.py b/api/models.py
index 895c7c0..1fcf7ba 100644
--- a/api/models.py
+++ b/api/models.py
@@ -1,7 +1,18 @@
 """
 SQLAlchemy 数据库模型定义
 """
-from sqlalchemy import Column, Integer, String, DateTime, Boolean, Text, Numeric, Date, ForeignKey
+
+from sqlalchemy import (
+    Column,
+    Integer,
+    String,
+    DateTime,
+    Boolean,
+    Text,
+    Numeric,
+    Date,
+    ForeignKey,
+)
 from sqlalchemy.ext.declarative import declarative_base
 from sqlalchemy.orm import relationship
 from datetime import datetime
@@ -12,6 +23,7 @@ Base = declarative_base()
 
 class Vehicle(Base):
     """车辆表"""
+
     __tablename__ = "vehicles"
 
     id = Column(Integer, primary_key=True, autoincrement=True)
@@ -29,6 +41,7 @@ class Vehicle(Base):
 
 class FuelRecord(Base):
     """加油记录表"""
+
     __tablename__ = "fuel_records"
 
     id = Column(Integer, primary_key=True, autoincrement=True)
@@ -37,7 +50,8 @@ class FuelRecord(Base):
     mileage = Column(Integer, nullable=False)
     fuel_amount = Column(Numeric(10, 2), nullable=False)
     fuel_price = Column(Numeric(10, 2), nullable=True)
-    total_cost = Column(Numeric(10, 2), nullable=False)
+    display_cost = Column(Numeric(10, 2), nullable=True)  # 机显总价（加油机显示金额）
+    actual_cost = Column(Numeric(10, 2), nullable=False)  # 实付金额（优惠后实际支付）
     is_full_tank = Column(Boolean, default=True)
     notes = Column(Text, default="")
     is_deleted = Column(Boolean, default=False)  # 软删除标记
@@ -50,12 +64,15 @@ class FuelRecord(Base):
 
 class Cost(Base):
     """费用记录表"""
+
     __tablename__ = "costs"
 
     id = Column(Integer, primary_key=True, autoincrement=True)
     vehicle_id = Column(Integer, ForeignKey("vehicles.id"), nullable=False)
     date = Column(Date, nullable=False)
-    type = Column(String(20), nullable=False)  # 保养/维修/保险/停车/洗车/违章/过路费/其他
+    type = Column(
+        String(20), nullable=False
+    )  # 保养/维修/保险/停车/洗车/违章/过路费/其他
     amount = Column(Numeric(10, 2), nullable=False)
     mileage = Column(Integer, nullable=True)
     notes = Column(Text, default="")
diff --git a/api/requirements.txt b/api/requirements.txt
index c6a49a5..eef42cb 100644
--- a/api/requirements.txt
+++ b/api/requirements.txt
@@ -1,8 +1,33 @@
+annotated-types==0.7.0
+anyio==4.13.0
+certifi==2026.2.25
+cffi==2.0.0
+click==8.3.2
+cryptography==46.0.7
+ecdsa==0.19.2
 fastapi==0.115.0
-uvicorn[standard]==0.32.0
-sqlalchemy==2.0.36
+greenlet==3.4.0
+h11==0.16.0
+httpcore==1.0.9
+httptools==0.7.1
+httpx==0.28.1
+idna==3.11
 psycopg2-binary==2.9.10
+pyasn1==0.6.3
+pycparser==3.0
 pydantic==2.9.2
 pydantic-settings==2.6.1
+pydantic_core==2.23.4
 python-dotenv==1.0.1
+python-jose==3.5.0
 python-multipart==0.0.17
+PyYAML==6.0.3
+rsa==4.9.1
+six==1.17.0
+SQLAlchemy==2.0.36
+starlette==0.38.6
+typing_extensions==4.15.0
+uvicorn==0.32.0
+uvloop==0.22.1
+watchfiles==1.1.1
+websockets==16.0
diff --git a/api/routers/__init__.py b/api/routers/__init__.py
index 961808a..4917145 100644
--- a/api/routers/__init__.py
+++ b/api/routers/__init__.py
@@ -2,19 +2,18 @@
 路由模块统一导出
 
 使用示例:
-    from routers import vehicles_router, fuel_records_router, costs_router, dashboard_router
-    
+    from routers import vehicles_router, fuel_records_router, costs_router
+
     app.include_router(vehicles_router, prefix="/carcost")
     app.include_router(fuel_records_router, prefix="/carcost")
 """
+
 from .vehicles import router as vehicles_router
 from .fuel_records import router as fuel_records_router
 from .costs import router as costs_router
-from .dashboard import router as dashboard_router
 
 __all__ = [
     "vehicles_router",
     "fuel_records_router",
     "costs_router",
-    "dashboard_router",
 ]
diff --git a/api/routers/costs.py b/api/routers/costs.py
index 92d4fd6..f60c337 100644
--- a/api/routers/costs.py
+++ b/api/routers/costs.py
@@ -1,7 +1,6 @@
-from fastapi import APIRouter, HTTPException, Body
+from fastapi import APIRouter, HTTPException
 from typing import Optional
 from decimal import Decimal
-from datetime import date as date_module
 
 from database import get_session
 from models import Cost, Vehicle
@@ -10,7 +9,6 @@ from schemas import (
     CostUpdate,
     CostDelete,
     CostResponse,
-    COST_TYPES,
 )
 
 
@@ -37,36 +35,34 @@ def _to_cost_response(cost: Cost) -> CostResponse:
 
 @router.get("/list", response_model=list[CostResponse])
 def get_costs(
-    vehicle_id: Optional[int] = None, cost_type: Optional[str] = None, limit: int = 50
+    vehicle_id: Optional[int] = None,
+    cost_type: Optional[str] = None,
 ):
-    """获取费用记录列表（排除已删除）"""
-    with get_session() as session:
+    """获取费用记录列表（排除已删除），返回全部数据"""
+    session = get_session()
+    try:
         query = session.query(Cost).filter(Cost.is_deleted == False)
         if vehicle_id:
             query = query.filter(Cost.vehicle_id == vehicle_id)
         if cost_type:
             query = query.filter(Cost.type == cost_type)
 
-        costs = query.order_by(Cost.date.desc()).limit(limit).all()
+        costs = query.order_by(Cost.date.desc()).all()
         return [_to_cost_response(c) for c in costs]
+    finally:
+        session.close()
 
 
 @router.post("/create", response_model=CostResponse)
 def create_cost(cost: CostCreate):
     """添加费用记录"""
-    with get_session() as session:
+    session = get_session()
+    try:
         # 验证车辆存在
         vehicle = session.query(Vehicle).filter(Vehicle.id == cost.vehicle_id).first()
         if not vehicle:
             raise HTTPException(status_code=404, detail="Vehicle not found")
 
-        # 验证费用类型
-        if cost.type not in COST_TYPES:
-            raise HTTPException(
-                status_code=400,
-                detail=f"Invalid cost type. Must be one of: {', '.join(COST_TYPES)}",
-            )
-
         db_cost = Cost(
             vehicle_id=cost.vehicle_id,
             date=cost.date,
@@ -82,59 +78,47 @@ def create_cost(cost: CostCreate):
         session.refresh(db_cost)
 
         return _to_cost_response(db_cost)
+    finally:
+        session.close()
 
 
-@router.post("/update")
-def update_cost(
-    id: int = Body(...),
-    type: Optional[str] = Body(None),
-    date: Optional[str] = Body(None),
-    amount: Optional[float] = Body(None),
-    mileage: Optional[int] = Body(None),
-    notes: Optional[str] = Body(None),
-    is_installment: Optional[bool] = Body(None),
-    installment_months: Optional[int] = Body(None),
-):
+@router.post("/update", response_model=CostResponse)
+def update_cost(cost_update: CostUpdate):
     """更新费用记录"""
-    with get_session() as session:
-        cost = session.query(Cost).filter(Cost.id == id).first()
+    session = get_session()
+    try:
+        cost = session.query(Cost).filter(Cost.id == cost_update.id).first()
         if not cost:
             raise HTTPException(status_code=404, detail="Cost record not found")
 
-        # 验证费用类型
-        if type is not None:
-            if type not in COST_TYPES:
-                raise HTTPException(
-                    status_code=400,
-                    detail=f"Invalid cost type. Must be one of: {', '.join(COST_TYPES)}",
-                )
-            cost.type = type
-
-        # 处理日期转换
-        if date is not None:
-            cost.date = date_module.fromisoformat(date)
-
-        if amount is not None:
-            cost.amount = Decimal(str(amount))
-        if mileage is not None:
-            cost.mileage = mileage
-        if notes is not None:
-            cost.notes = notes or ""
-        if is_installment is not None:
-            cost.is_installment = is_installment
-        if installment_months is not None:
-            cost.installment_months = installment_months
+        if cost_update.date is not None:
+            cost.date = cost_update.date
+        if cost_update.type is not None:
+            cost.type = cost_update.type
+        if cost_update.amount is not None:
+            cost.amount = Decimal(str(cost_update.amount))
+        if cost_update.mileage is not None:
+            cost.mileage = cost_update.mileage
+        if cost_update.notes is not None:
+            cost.notes = cost_update.notes or ""
+        if cost_update.is_installment is not None:
+            cost.is_installment = cost_update.is_installment
+        if cost_update.installment_months is not None:
+            cost.installment_months = cost_update.installment_months
 
         session.commit()
         session.refresh(cost)
 
         return _to_cost_response(cost)
+    finally:
+        session.close()
 
 
 @router.post("/delete")
 def delete_cost(cost: CostDelete):
     """软删除费用记录"""
-    with get_session() as session:
+    session = get_session()
+    try:
         db_cost = (
             session.query(Cost)
             .filter(Cost.id == cost.id, Cost.is_deleted == False)
@@ -146,9 +130,5 @@ def delete_cost(cost: CostDelete):
         db_cost.is_deleted = True
         session.commit()
         return {"message": "Cost record deleted successfully"}
-
-
-@router.get("/types")
-def get_cost_types():
-    """获取费用类型列表"""
-    return {"types": COST_TYPES}
+    finally:
+        session.close()
diff --git a/api/routers/dashboard.py b/api/routers/dashboard.py
deleted file mode 100644
index a6ff74f..0000000
--- a/api/routers/dashboard.py
+++ /dev/null
@@ -1,128 +0,0 @@
-from fastapi import APIRouter, HTTPException
-from typing import Optional
-
-from database import get_session
-from models import Vehicle, FuelRecord
-from schemas import DashboardData, FuelRecordItem
-
-
-router = APIRouter(prefix="/dashboard", tags=["dashboard"])
-
-
-@router.get("/data", response_model=DashboardData)
-def get_dashboard(vehicle_id: int):
-    """获取仪表盘数据"""
-    with get_session() as session:
-        vehicle = (
-            session.query(Vehicle)
-            .filter(Vehicle.id == vehicle_id, Vehicle.is_deleted == False)
-            .first()
-        )
-        if not vehicle:
-            raise HTTPException(status_code=404, detail="Vehicle not found")
-
-        # 获取所有未删除的加油记录
-        fuel_records = (
-            session.query(FuelRecord)
-            .filter(FuelRecord.vehicle_id == vehicle_id, FuelRecord.is_deleted == False)
-            .order_by(FuelRecord.date.asc())
-            .all()
-        )
-
-        # 计算总里程
-        if fuel_records:
-            latest_mileage = max(r.mileage for r in fuel_records)
-            total_mileage = latest_mileage - vehicle.initial_mileage
-        else:
-            total_mileage = 0
-
-        # 计算总油费
-        total_fuel_cost = sum(float(r.total_cost) for r in fuel_records)
-
-        # 计算平均油耗（只算加满的记录）
-        total_fuel_amount = sum(
-            float(r.fuel_amount) for r in fuel_records if r.is_full_tank
-        )
-        avg_fuel_consumption = None
-        if total_mileage > 0 and total_fuel_amount > 0:
-            avg_fuel_consumption = round((total_fuel_amount / total_mileage) * 100, 2)
-
-        # 获取最近5条加油记录（带油耗计算，排除已删除）
-        recent_records = (
-            session.query(FuelRecord)
-            .filter(FuelRecord.vehicle_id == vehicle_id, FuelRecord.is_deleted == False)
-            .order_by(FuelRecord.date.desc(), FuelRecord.mileage.desc())
-            .limit(5)
-            .all()
-        )
-
-        recent_fuel_records = []
-        for record in recent_records:
-            # 计算单次油耗
-            fuel_consumption = None
-            if record.is_full_tank:
-                # 先找更早日期的记录
-                prev_record = (
-                    session.query(FuelRecord)
-                    .filter(
-                        FuelRecord.vehicle_id == vehicle_id,
-                        FuelRecord.date < record.date,
-                        FuelRecord.is_full_tank == True,
-                        FuelRecord.is_deleted == False,
-                    )
-                    .order_by(FuelRecord.date.desc(), FuelRecord.mileage.desc())
-                    .first()
-                )
-
-                # 如果没找到，找同一天更早的记录
-                if not prev_record:
-                    prev_record = (
-                        session.query(FuelRecord)
-                        .filter(
-                            FuelRecord.vehicle_id == vehicle_id,
-                            FuelRecord.date == record.date,
-                            FuelRecord.mileage < record.mileage,
-                            FuelRecord.is_full_tank == True,
-                            FuelRecord.is_deleted == False,
-                        )
-                        .order_by(FuelRecord.mileage.desc())
-                        .first()
-                    )
-
-                if prev_record:
-                    mileage_diff = record.mileage - prev_record.mileage
-                    if mileage_diff > 0:
-                        fuel_consumption = round(
-                            (float(record.fuel_amount) / mileage_diff) * 100, 2
-                        )
-
-            recent_fuel_records.append(
-                FuelRecordItem(
-                    id=record.id,
-                    date=record.date,
-                    mileage=record.mileage,
-                    fuel_amount=float(record.fuel_amount),
-                    total_cost=float(record.total_cost),
-                    fuel_consumption=fuel_consumption,
-                )
-            )
-
-        # 计算日均行程
-        avg_daily_km = None
-        if total_mileage > 0 and fuel_records:
-            first_date = fuel_records[0].date  # 第一次加油日期（已按日期升序排序）
-            last_date = fuel_records[-1].date  # 最后一次加油日期
-            days = (last_date - first_date).days
-            if days > 0:
-                avg_daily_km = round(total_mileage / days, 1)
-
-        return DashboardData(
-            vehicle_id=vehicle_id,
-            vehicle_name=vehicle.name,
-            purchase_date=vehicle.purchase_date,
-            total_mileage=total_mileage,
-            total_fuel_cost=round(total_fuel_cost, 2),
-            avg_fuel_consumption=avg_fuel_consumption,
-            avg_daily_km=avg_daily_km,
-            recent_fuel_records=recent_fuel_records,
-        )
diff --git a/api/routers/fuel_records.py b/api/routers/fuel_records.py
index 9b6a512..47c0cce 100644
--- a/api/routers/fuel_records.py
+++ b/api/routers/fuel_records.py
@@ -15,135 +15,61 @@ from schemas import (
 router = APIRouter(prefix="/fuel-records", tags=["fuel_records"])
 
 
-def calculate_fuel_consumption(session, record: FuelRecord) -> Optional[float]:
-    """计算单次油耗
-
-    油耗计算逻辑：
-    1. 找到上一条加满油的记录
-    2. 计算两次加满之间的里程差
-    3. 计算两次加满之间的累计加油量（包括中间未加满的记录）
-    4. 油耗 = (累计加油量 / 里程差) * 100
-    """
-    if not record.is_full_tank:
-        return None
-
-    # 找到上一条加满油的记录（排除已删除）
-    prev_record = (
-        session.query(FuelRecord)
-        .filter(
-            FuelRecord.vehicle_id == record.vehicle_id,
-            FuelRecord.date < record.date,
-            FuelRecord.is_full_tank == True,
-            FuelRecord.is_deleted == False,
-        )
-        .order_by(FuelRecord.date.desc(), FuelRecord.mileage.desc())
-        .first()
-    )
-
-    # 如果同一天有更早的记录，也考虑进去
-    if not prev_record:
-        prev_record = (
-            session.query(FuelRecord)
-            .filter(
-                FuelRecord.vehicle_id == record.vehicle_id,
-                FuelRecord.date == record.date,
-                FuelRecord.mileage < record.mileage,
-                FuelRecord.is_full_tank == True,
-                FuelRecord.is_deleted == False,
-            )
-            .order_by(FuelRecord.mileage.desc())
-            .first()
-        )
-
-    if not prev_record:
-        return None
-
-    mileage_diff = record.mileage - prev_record.mileage
-    if mileage_diff <= 0:
-        return None
-
-    # 计算两次加满之间的累计加油量（包括中间未加满的记录）
-    # 从上一次加满之后（不包括）到当前这次（包括）的所有加油记录
-    intermediate_records = (
-        session.query(FuelRecord)
-        .filter(
-            FuelRecord.vehicle_id == record.vehicle_id,
-            FuelRecord.date >= prev_record.date,
-            FuelRecord.date <= record.date,
-            FuelRecord.mileage > prev_record.mileage,
-            FuelRecord.mileage <= record.mileage,
-            FuelRecord.is_deleted == False,
-        )
-        .all()
-    )
-
-    total_fuel = sum(float(r.fuel_amount) for r in intermediate_records)
-
-    fuel_consumption = (total_fuel / mileage_diff) * 100
-    return round(fuel_consumption, 2)
-
-
-def get_record_with_consumption(session, record: FuelRecord) -> FuelRecordResponse:
-    """获取记录并计算油耗"""
-    fuel_consumption = calculate_fuel_consumption(session, record)
-    return FuelRecordResponse(
-        id=record.id,
-        vehicle_id=record.vehicle_id,
-        date=record.date,
-        mileage=record.mileage,
-        fuel_amount=float(record.fuel_amount),
-        fuel_price=float(record.fuel_price) if record.fuel_price else None,
-        total_cost=float(record.total_cost),
-        is_full_tank=record.is_full_tank,
-        notes=record.notes,
-        fuel_consumption=fuel_consumption,
-        is_deleted=record.is_deleted,
-        created_at=record.created_at,
-        updated_at=record.updated_at,
-    )
-
-
 @router.get("/list", response_model=list[FuelRecordResponse])
-def get_fuel_records(vehicle_id: Optional[int] = None, limit: int = 50):
-    """获取加油记录列表（排除已删除）"""
-    with get_session() as session:
+def get_fuel_records(vehicle_id: Optional[int] = None):
+    """获取加油记录列表（排除已删除），返回原始数据不计算油耗"""
+    session = get_session()
+    try:
         query = session.query(FuelRecord).filter(FuelRecord.is_deleted == False)
         if vehicle_id:
             query = query.filter(FuelRecord.vehicle_id == vehicle_id)
 
-        records = (
-            query.order_by(FuelRecord.date.desc(), FuelRecord.mileage.desc())
-            .limit(limit)
-            .all()
-        )
-        return [get_record_with_consumption(session, r) for r in records]
+        records = query.order_by(
+            FuelRecord.date.desc(), FuelRecord.mileage.desc()
+        ).all()
+
+        # 直接返回原始数据，不计算油耗
+        return [
+            FuelRecordResponse(
+                id=r.id,
+                vehicle_id=r.vehicle_id,
+                date=r.date,
+                mileage=r.mileage,
+                fuel_amount=float(r.fuel_amount),
+                fuel_price=float(r.fuel_price) if r.fuel_price else None,
+                display_cost=float(r.display_cost) if r.display_cost else None,
+                actual_cost=float(r.actual_cost),
+                is_full_tank=r.is_full_tank,
+                notes=r.notes,
+                fuel_consumption=None,  # 油耗由前端计算
+                is_deleted=r.is_deleted,
+                created_at=r.created_at,
+                updated_at=r.updated_at,
+            )
+            for r in records
+        ]
+    finally:
+        session.close()
 
 
 @router.post("/create", response_model=FuelRecordResponse)
 def create_fuel_record(record: FuelRecordCreate):
     """添加加油记录"""
-    with get_session() as session:
+    session = get_session()
+    try:
         # 验证车辆存在
         vehicle = session.query(Vehicle).filter(Vehicle.id == record.vehicle_id).first()
         if not vehicle:
             raise HTTPException(status_code=404, detail="Vehicle not found")
 
-        # 自动计算总价或单价
+        # 自动计算价格
         fuel_price = record.fuel_price
-        total_cost = record.total_cost
+        display_cost = record.display_cost
+        actual_cost = record.actual_cost
 
-        if fuel_price is None and total_cost is not None:
-            # 只有总价，计算单价
-            fuel_price = total_cost / record.fuel_amount
-        elif total_cost is None and fuel_price is not None:
-            # 只有单价，计算总价
-            total_cost = fuel_price * record.fuel_amount
-        elif total_cost is None and fuel_price is None:
-            raise HTTPException(
-                status_code=400,
-                detail="Either fuel_price or total_cost must be provided",
-            )
-        # 如果两者都有，使用传入的值（不重新计算，保留实付金额）
+        # 如果没有单价，根据总价计算
+        if fuel_price is None and actual_cost is not None and record.fuel_amount > 0:
+            fuel_price = actual_cost / record.fuel_amount
 
         db_record = FuelRecord(
             vehicle_id=record.vehicle_id,
@@ -151,20 +77,43 @@ def create_fuel_record(record: FuelRecordCreate):
             mileage=record.mileage,
             fuel_amount=Decimal(str(record.fuel_amount)),
             fuel_price=Decimal(str(fuel_price)) if fuel_price else None,
-            total_cost=Decimal(str(total_cost)),
+            display_cost=Decimal(str(display_cost)) if display_cost else None,
+            actual_cost=Decimal(str(actual_cost)),
             is_full_tank=record.is_full_tank,
             notes=record.notes or "",
         )
         session.add(db_record)
         session.commit()
         session.refresh(db_record)
-        return get_record_with_consumption(session, db_record)
+
+        # 返回原始数据，不计算油耗
+        return FuelRecordResponse(
+            id=db_record.id,
+            vehicle_id=db_record.vehicle_id,
+            date=db_record.date,
+            mileage=db_record.mileage,
+            fuel_amount=float(db_record.fuel_amount),
+            fuel_price=float(db_record.fuel_price) if db_record.fuel_price else None,
+            display_cost=float(db_record.display_cost)
+            if db_record.display_cost
+            else None,
+            actual_cost=float(db_record.actual_cost),
+            is_full_tank=db_record.is_full_tank,
+            notes=db_record.notes,
+            fuel_consumption=None,  # 油耗由前端计算
+            is_deleted=db_record.is_deleted,
+            created_at=db_record.created_at,
+            updated_at=db_record.updated_at,
+        )
+    finally:
+        session.close()
 
 
 @router.post("/update", response_model=FuelRecordResponse)
 def update_fuel_record(record_update: FuelRecordUpdate):
     """更新加油记录"""
-    with get_session() as session:
+    session = get_session()
+    try:
         record = (
             session.query(FuelRecord).filter(FuelRecord.id == record_update.id).first()
         )
@@ -178,36 +127,46 @@ def update_fuel_record(record_update: FuelRecordUpdate):
             record.mileage = record_update.mileage
         if record_update.fuel_amount is not None:
             record.fuel_amount = Decimal(str(record_update.fuel_amount))
+        if record_update.fuel_price is not None:
+            record.fuel_price = Decimal(str(record_update.fuel_price))
+        if record_update.display_cost is not None:
+            record.display_cost = Decimal(str(record_update.display_cost))
+        if record_update.actual_cost is not None:
+            record.actual_cost = Decimal(str(record_update.actual_cost))
         if record_update.is_full_tank is not None:
             record.is_full_tank = record_update.is_full_tank
         if record_update.notes is not None:
             record.notes = record_update.notes
 
-        # 处理价格和总价
-        fuel_amount = float(record.fuel_amount)
-        if (
-            record_update.fuel_price is not None
-            and record_update.total_cost is not None
-        ):
-            record.fuel_price = Decimal(str(record_update.fuel_price))
-            record.total_cost = Decimal(str(record_update.total_cost))
-        elif record_update.fuel_price is not None:
-            record.fuel_price = Decimal(str(record_update.fuel_price))
-            record.total_cost = Decimal(str(record_update.fuel_price * fuel_amount))
-        elif record_update.total_cost is not None:
-            record.total_cost = Decimal(str(record_update.total_cost))
-            if fuel_amount > 0:
-                record.fuel_price = Decimal(str(record_update.total_cost / fuel_amount))
-
         session.commit()
         session.refresh(record)
-        return get_record_with_consumption(session, record)
+
+        # 返回原始数据，不计算油耗
+        return FuelRecordResponse(
+            id=record.id,
+            vehicle_id=record.vehicle_id,
+            date=record.date,
+            mileage=record.mileage,
+            fuel_amount=float(record.fuel_amount),
+            fuel_price=float(record.fuel_price) if record.fuel_price else None,
+            display_cost=float(record.display_cost) if record.display_cost else None,
+            actual_cost=float(record.actual_cost),
+            is_full_tank=record.is_full_tank,
+            notes=record.notes,
+            fuel_consumption=None,  # 油耗由前端计算
+            is_deleted=record.is_deleted,
+            created_at=record.created_at,
+            updated_at=record.updated_at,
+        )
+    finally:
+        session.close()
 
 
 @router.post("/delete")
 def delete_fuel_record(record: FuelRecordDelete):
     """软删除加油记录"""
-    with get_session() as session:
+    session = get_session()
+    try:
         db_record = (
             session.query(FuelRecord)
             .filter(FuelRecord.id == record.id, FuelRecord.is_deleted == False)
@@ -219,3 +178,5 @@ def delete_fuel_record(record: FuelRecordDelete):
         db_record.is_deleted = True
         session.commit()
         return {"message": "Fuel record deleted successfully"}
+    finally:
+        session.close()
diff --git a/api/routers/vehicles.py b/api/routers/vehicles.py
index a9a9ecc..295bb62 100644
--- a/api/routers/vehicles.py
+++ b/api/routers/vehicles.py
@@ -9,7 +9,6 @@ from schemas import (
     VehicleUpdate,
     VehicleDelete,
     VehicleResponse,
-    VehicleStats,
 )
 
 
@@ -19,7 +18,8 @@ router = APIRouter(prefix="/vehicles", tags=["vehicles"])
 @router.get("/list", response_model=list[VehicleResponse])
 def get_vehicles():
     """获取所有车辆列表（排除已删除）"""
-    with get_session() as session:
+    session = get_session()
+    try:
         vehicles = (
             session.query(Vehicle)
             .filter(Vehicle.is_deleted == False)
@@ -27,12 +27,15 @@ def get_vehicles():
             .all()
         )
         return vehicles
+    finally:
+        session.close()
 
 
 @router.post("/create", response_model=VehicleResponse)
 def create_vehicle(vehicle: VehicleCreate):
     """添加新车辆"""
-    with get_session() as session:
+    session = get_session()
+    try:
         db_vehicle = Vehicle(
             name=vehicle.name,
             purchase_date=vehicle.purchase_date,
@@ -42,12 +45,15 @@ def create_vehicle(vehicle: VehicleCreate):
         session.commit()
         session.refresh(db_vehicle)
         return db_vehicle
+    finally:
+        session.close()
 
 
 @router.post("/update", response_model=VehicleResponse)
 def update_vehicle(vehicle: VehicleUpdate):
     """更新车辆信息"""
-    with get_session() as session:
+    session = get_session()
+    try:
         db_vehicle = session.query(Vehicle).filter(Vehicle.id == vehicle.id).first()
         if not db_vehicle:
             raise HTTPException(status_code=404, detail="Vehicle not found")
@@ -62,12 +68,15 @@ def update_vehicle(vehicle: VehicleUpdate):
         session.commit()
         session.refresh(db_vehicle)
         return db_vehicle
+    finally:
+        session.close()
 
 
 @router.post("/delete")
 def delete_vehicle(vehicle: VehicleDelete):
     """软删除车辆"""
-    with get_session() as session:
+    session = get_session()
+    try:
         db_vehicle = (
             session.query(Vehicle)
             .filter(Vehicle.id == vehicle.id, Vehicle.is_deleted == False)
@@ -79,49 +88,5 @@ def delete_vehicle(vehicle: VehicleDelete):
         db_vehicle.is_deleted = True
         session.commit()
         return {"message": "Vehicle deleted successfully"}
-
-
-@router.get("/stats", response_model=VehicleStats)
-def get_vehicle_stats(vehicle_id: int):
-    """获取车辆统计信息"""
-    with get_session() as session:
-        vehicle = (
-            session.query(Vehicle)
-            .filter(Vehicle.id == vehicle_id, Vehicle.is_deleted == False)
-            .first()
-        )
-        if not vehicle:
-            raise HTTPException(status_code=404, detail="Vehicle not found")
-
-        # 获取所有未删除的加油记录
-        fuel_records = (
-            session.query(FuelRecord)
-            .filter(FuelRecord.vehicle_id == vehicle_id, FuelRecord.is_deleted == False)
-            .order_by(FuelRecord.date.asc())
-            .all()
-        )
-
-        # 计算总里程
-        if fuel_records:
-            latest_mileage = max(r.mileage for r in fuel_records)
-            total_mileage = latest_mileage - vehicle.initial_mileage
-        else:
-            total_mileage = 0
-
-        # 计算总油费和总加油量（只算加满的记录）
-        total_fuel_cost = sum(float(r.total_cost) for r in fuel_records)
-        total_fuel_amount = sum(
-            float(r.fuel_amount) for r in fuel_records if r.is_full_tank
-        )
-
-        # 计算平均油耗
-        avg_fuel_consumption = None
-        if total_mileage > 0 and total_fuel_amount > 0:
-            avg_fuel_consumption = round((total_fuel_amount / total_mileage) * 100, 2)
-
-        return VehicleStats(
-            total_mileage=total_mileage,
-            total_fuel_cost=round(total_fuel_cost, 2),
-            total_fuel_amount=round(total_fuel_amount, 2),
-            avg_fuel_consumption=avg_fuel_consumption,
-        )
+    finally:
+        session.close()
diff --git a/api/schemas.py b/api/schemas.py
index 9cbd4d7..c8b770c 100644
--- a/api/schemas.py
+++ b/api/schemas.py
@@ -4,7 +4,7 @@
 
 from pydantic import BaseModel, field_validator, ConfigDict
 from typing import Optional, List, Union
-from datetime import date, datetime
+from datetime import date as date_cls, datetime as datetime_cls
 
 
 # ==================== 车辆相关模型 ====================
@@ -14,7 +14,7 @@ class VehicleBase(BaseModel):
     """车辆基础模型"""
 
     name: str
-    purchase_date: Optional[date] = None
+    purchase_date: Optional[date_cls] = None
     initial_mileage: int = 0
 
 
@@ -29,7 +29,7 @@ class VehicleUpdate(BaseModel):
 
     id: int
     name: Optional[str] = None
-    purchase_date: Optional[date] = None
+    purchase_date: Optional[date_cls] = None
     initial_mileage: Optional[int] = None
 
 
@@ -44,8 +44,8 @@ class VehicleResponse(VehicleBase):
 
     id: int
     is_deleted: bool = False
-    created_at: Optional[datetime] = None
-    updated_at: Optional[datetime] = None
+    created_at: Optional[datetime_cls] = None
+    updated_at: Optional[datetime_cls] = None
 
     class Config:
         from_attributes = True
@@ -67,11 +67,12 @@ class FuelRecordBase(BaseModel):
     """加油记录基础模型"""
 
     vehicle_id: int
-    date: date
+    date: date_cls
     mileage: int
     fuel_amount: float
     fuel_price: Optional[float] = None
-    total_cost: Optional[float] = None
+    display_cost: Optional[float] = None  # 机显总价
+    actual_cost: float  # 实付金额
     is_full_tank: bool = True
     notes: Optional[str] = ""
 
@@ -79,7 +80,7 @@ class FuelRecordBase(BaseModel):
 class FuelRecordCreate(FuelRecordBase):
     """创建加油记录请求模型"""
 
-    @field_validator("total_cost", "fuel_price", mode="before")
+    @field_validator("fuel_price", "display_cost", "actual_cost", mode="before")
     @classmethod
     def validate_costs(cls, v):
         if v is not None:
@@ -93,11 +94,12 @@ class FuelRecordUpdate(BaseModel):
     model_config = ConfigDict(arbitrary_types_allowed=True)
 
     id: int
-    date: Union[date, str, None] = None
+    date: Union[date_cls, str, None] = None
     mileage: Optional[int] = None
     fuel_amount: Optional[float] = None
     fuel_price: Optional[float] = None
-    total_cost: Optional[float] = None
+    display_cost: Optional[float] = None  # 机显总价
+    actual_cost: Optional[float] = None  # 实付金额
     is_full_tank: Optional[bool] = None
     notes: Optional[str] = None
 
@@ -106,10 +108,10 @@ class FuelRecordUpdate(BaseModel):
     def parse_date(cls, v):
         if v is None:
             return None
-        if isinstance(v, date):
+        if isinstance(v, date_cls):
             return v
         if isinstance(v, str):
-            return date.fromisoformat(v)
+            return date_cls.fromisoformat(v)
         raise ValueError("Invalid date format")
 
 
@@ -124,17 +126,18 @@ class FuelRecordResponse(BaseModel):
 
     id: int
     vehicle_id: int
-    date: date
+    date: date_cls
     mileage: int
     fuel_amount: float
     fuel_price: Optional[float]
-    total_cost: float
+    display_cost: Optional[float]  # 机显总价
+    actual_cost: float  # 实付金额
     is_full_tank: bool
     notes: str
     fuel_consumption: Optional[float] = None  # 单次油耗，计算得出
     is_deleted: bool = False
-    created_at: Optional[datetime] = None
-    updated_at: Optional[datetime] = None
+    created_at: Optional[datetime_cls] = None
+    updated_at: Optional[datetime_cls] = None
 
     class Config:
         from_attributes = True
@@ -150,7 +153,7 @@ class CostBase(BaseModel):
     """费用记录基础模型"""
 
     vehicle_id: int
-    date: date
+    date: date_cls
     type: str
     amount: float
     mileage: Optional[int] = None
@@ -171,7 +174,7 @@ class CostUpdate(BaseModel):
     model_config = ConfigDict(arbitrary_types_allowed=True)
 
     id: int
-    date: Union[date, str, None] = None
+    date: Union[date_cls, str, None] = None
     type: Optional[str] = None
     amount: Optional[float] = None
     mileage: Optional[int] = None
@@ -184,10 +187,10 @@ class CostUpdate(BaseModel):
     def parse_date(cls, v):
         if v is None:
             return None
-        if isinstance(v, date):
+        if isinstance(v, date_cls):
             return v
         if isinstance(v, str):
-            return date.fromisoformat(v)
+            return date_cls.fromisoformat(v)
         raise ValueError("Invalid date format")
 
 
@@ -202,7 +205,7 @@ class CostResponse(BaseModel):
 
     id: int
     vehicle_id: int
-    date: date
+    date: date_cls
     type: str
     amount: float
     mileage: Optional[int]
@@ -210,8 +213,8 @@ class CostResponse(BaseModel):
     is_installment: bool
     installment_months: int
     is_deleted: bool = False
-    created_at: Optional[datetime] = None
-    updated_at: Optional[datetime] = None
+    created_at: Optional[datetime_cls] = None
+    updated_at: Optional[datetime_cls] = None
 
     class Config:
         from_attributes = True
@@ -224,10 +227,10 @@ class FuelRecordItem(BaseModel):
     """仪表板中使用的加油记录项"""
 
     id: int
-    date: date
+    date: date_cls
     mileage: int
     fuel_amount: float
-    total_cost: float
+    actual_cost: float  # 实付金额（用于统计）
     fuel_consumption: Optional[float]
 
 
@@ -236,7 +239,7 @@ class DashboardData(BaseModel):
 
     vehicle_id: int
     vehicle_name: str
-    purchase_date: Optional[date]
+    purchase_date: Optional[date_cls]
     total_mileage: int
     total_fuel_cost: float
     avg_fuel_consumption: Optional[float]
diff --git a/deploy-web.sh b/deploy-web.sh
new file mode 100755
index 0000000..b3ec60d
--- /dev/null
+++ b/deploy-web.sh
@@ -0,0 +1,86 @@
+#!/bin/bash
+
+# CarCost Web 前端部署脚本
+# 功能：构建 Vue 项目并部署到服务器指定目录
+
+set -e  # 遇到错误立即退出
+
+# 配置
+SCRIPT_DIR="$(cd "$(dirname "$0")" && pwd)"
+WEB_DIR="${SCRIPT_DIR}/web"
+SOURCE_DIR="${WEB_DIR}/dist"
+TARGET_DIR="/home/yuany3721/webpages/carcost"
+
+# 颜色输出
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+NC='\033[0m' # No Color
+
+echo -e "${YELLOW}========================================${NC}"
+echo -e "${YELLOW}  开始部署 CarCost Web 前端${NC}"
+echo -e "${YELLOW}========================================${NC}"
+echo ""
+
+# 检查 web 目录是否存在
+if [ ! -d "$WEB_DIR" ]; then
+    echo -e "${RED}错误：找不到 web 目录: $WEB_DIR${NC}"
+    exit 1
+fi
+
+# 切换到 web 目录
+cd "$WEB_DIR"
+
+# 检查 package.json
+if [ ! -f "package.json" ]; then
+    echo -e "${RED}错误：无法找到 package.json${NC}"
+    exit 1
+fi
+
+# 步骤 1: 构建项目
+echo -e "${YELLOW}[1/3] 正在构建项目...${NC}"
+npm run build
+
+if [ $? -ne 0 ]; then
+    echo -e "${RED}构建失败！${NC}"
+    exit 1
+fi
+
+echo -e "${GREEN}✓ 构建成功${NC}"
+echo ""
+
+# 步骤 2: 检查源目录是否存在
+if [ ! -d "$SOURCE_DIR" ]; then
+    echo -e "${RED}错误：构建输出目录不存在: $SOURCE_DIR${NC}"
+    exit 1
+fi
+
+# 步骤 3: 清空目标目录
+echo -e "${YELLOW}[2/3] 正在清空目标目录...${NC}"
+if [ -d "$TARGET_DIR" ]; then
+    rm -rf "${TARGET_DIR:?}/"*
+    echo -e "${GREEN}✓ 已清空: $TARGET_DIR${NC}"
+else
+    echo -e "${YELLOW}目标目录不存在，正在创建...${NC}"
+    mkdir -p "$TARGET_DIR"
+    echo -e "${GREEN}✓ 已创建: $TARGET_DIR${NC}"
+fi
+echo ""
+
+# 步骤 4: 复制文件
+echo -e "${YELLOW}[3/3] 正在复制文件到目标目录...${NC}"
+cp -r "${SOURCE_DIR}/"* "$TARGET_DIR/"
+
+if [ $? -eq 0 ]; then
+    echo -e "${GREEN}✓ 文件复制成功${NC}"
+else
+    echo -e "${RED}文件复制失败！${NC}"
+    exit 1
+fi
+
+echo ""
+echo -e "${GREEN}========================================${NC}"
+echo -e "${GREEN}  部署完成！${NC}"
+echo -e "${GREEN}========================================${NC}"
+echo -e "目标目录: ${TARGET_DIR}"
+
diff --git a/web/package-lock.json b/web/package-lock.json
index 65897c2..1826bf5 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -11,14 +11,32 @@
         "axios": "^1.14.0",
         "echarts": "^6.0.0",
         "element-plus": "^2.13.6",
+        "oidc-client-ts": "^3.5.0",
         "vue": "^3.5.32",
-        "vue-echarts": "^8.0.1"
+        "vue-echarts": "^8.0.1",
+        "vue-router": "^5.0.4"
       },
       "devDependencies": {
         "@vitejs/plugin-vue": "^6.0.5",
         "vite": "^8.0.4"
       }
     },
+    "node_modules/@babel/generator": {
+      "version": "7.29.1",
+      "resolved": "https://registry.npmmirror.com/@babel/generator/-/generator-7.29.1.tgz",
+      "integrity": "sha512-qsaF+9Qcm2Qv8SRIMMscAvG4O3lJ0F1GuMo5HR/Bp02LopNgnZBC/EkbevHFeGs4ls/oPz9v+Bsmzbkbe+0dUw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.29.0",
+        "@babel/types": "^7.29.0",
+        "@jridgewell/gen-mapping": "^0.3.12",
+        "@jridgewell/trace-mapping": "^0.3.28",
+        "jsesc": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/helper-string-parser": {
       "version": "7.27.1",
       "resolved": "https://registry.npmmirror.com/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
@@ -142,12 +160,51 @@
       "integrity": "sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==",
       "license": "MIT"
     },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.13",
+      "resolved": "https://registry.npmmirror.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
+      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/remapping": {
+      "version": "2.3.5",
+      "resolved": "https://registry.npmmirror.com/@jridgewell/remapping/-/remapping-2.3.5.tgz",
+      "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmmirror.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/@jridgewell/sourcemap-codec": {
       "version": "1.5.5",
       "resolved": "https://registry.npmmirror.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
       "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
       "license": "MIT"
     },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.31",
+      "resolved": "https://registry.npmmirror.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
     "node_modules/@napi-rs/wasm-runtime": {
       "version": "1.1.2",
       "resolved": "https://registry.npmmirror.com/@napi-rs/wasm-runtime/-/wasm-runtime-1.1.2.tgz",
@@ -501,6 +558,33 @@
         "vue": "^3.2.25"
       }
     },
+    "node_modules/@vue-macros/common": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmmirror.com/@vue-macros/common/-/common-3.1.2.tgz",
+      "integrity": "sha512-h9t4ArDdniO9ekYHAD95t9AZcAbb19lEGK+26iAjUODOIJKmObDNBSe4+6ELQAA3vtYiFPPBtHh7+cQCKi3Dng==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-sfc": "^3.5.22",
+        "ast-kit": "^2.1.2",
+        "local-pkg": "^1.1.2",
+        "magic-string-ast": "^1.0.2",
+        "unplugin-utils": "^0.3.0"
+      },
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/vue-macros"
+      },
+      "peerDependencies": {
+        "vue": "^2.7.0 || ^3.2.25"
+      },
+      "peerDependenciesMeta": {
+        "vue": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@vue/compiler-core": {
       "version": "3.5.32",
       "resolved": "https://registry.npmmirror.com/@vue/compiler-core/-/compiler-core-3.5.32.tgz",
@@ -551,6 +635,33 @@
         "@vue/shared": "3.5.32"
       }
     },
+    "node_modules/@vue/devtools-api": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmmirror.com/@vue/devtools-api/-/devtools-api-8.1.1.tgz",
+      "integrity": "sha512-bsDMJ07b3GN1puVwJb/fyFnj/U2imyswK5UQVLZwVl7O05jDrt6BHxeG5XffmOOdasOj/bOmIjxJvGPxU7pcqw==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-kit": "^8.1.1"
+      }
+    },
+    "node_modules/@vue/devtools-kit": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmmirror.com/@vue/devtools-kit/-/devtools-kit-8.1.1.tgz",
+      "integrity": "sha512-gVBaBv++i+adg4JpH71k9ppl4soyR7Y2McEqO5YNgv0BI1kMZ7BDX5gnwkZ5COYgiCyhejZG+yGNrBAjj6Coqg==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-shared": "^8.1.1",
+        "birpc": "^2.6.1",
+        "hookable": "^5.5.3",
+        "perfect-debounce": "^2.0.0"
+      }
+    },
+    "node_modules/@vue/devtools-shared": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmmirror.com/@vue/devtools-shared/-/devtools-shared-8.1.1.tgz",
+      "integrity": "sha512-+h4ttmJYl/txpxHKaoZcaKpC+pvckgLzIDiSQlaQ7kKthKh8KuwoLW2D8hPJEnqKzXOvu15UHEoGyngAXCz0EQ==",
+      "license": "MIT"
+    },
     "node_modules/@vue/reactivity": {
       "version": "3.5.32",
       "resolved": "https://registry.npmmirror.com/@vue/reactivity/-/reactivity-3.5.32.tgz",
@@ -637,6 +748,50 @@
         "url": "https://github.com/sponsors/antfu"
       }
     },
+    "node_modules/acorn": {
+      "version": "8.16.0",
+      "resolved": "https://registry.npmmirror.com/acorn/-/acorn-8.16.0.tgz",
+      "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
+      "license": "MIT",
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/ast-kit": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmmirror.com/ast-kit/-/ast-kit-2.2.0.tgz",
+      "integrity": "sha512-m1Q/RaVOnTp9JxPX+F+Zn7IcLYMzM8kZofDImfsKZd8MbR+ikdOzTeztStWqfrqIxZnYWryyI9ePm3NGjnZgGw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.28.5",
+        "pathe": "^2.0.3"
+      },
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sxzz"
+      }
+    },
+    "node_modules/ast-walker-scope": {
+      "version": "0.8.3",
+      "resolved": "https://registry.npmmirror.com/ast-walker-scope/-/ast-walker-scope-0.8.3.tgz",
+      "integrity": "sha512-cbdCP0PGOBq0ASG+sjnKIoYkWMKhhz+F/h9pRexUdX2Hd38+WOlBkRKlqkGOSm0YQpcFMQBJeK4WspUAkwsEdg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.28.4",
+        "ast-kit": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sxzz"
+      }
+    },
     "node_modules/async-validator": {
       "version": "4.2.5",
       "resolved": "https://registry.npmmirror.com/async-validator/-/async-validator-4.2.5.tgz",
@@ -660,6 +815,15 @@
         "proxy-from-env": "^2.1.0"
       }
     },
+    "node_modules/birpc": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmmirror.com/birpc/-/birpc-2.9.0.tgz",
+      "integrity": "sha512-KrayHS5pBi69Xi9JmvoqrIgYGDkD6mcSe/i6YKi3w5kekCLzrX4+nawcXqrj2tIp50Kw/mT/s3p+GVK0A0sKxw==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
     "node_modules/call-bind-apply-helpers": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
@@ -673,6 +837,21 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/chokidar": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmmirror.com/chokidar/-/chokidar-5.0.0.tgz",
+      "integrity": "sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw==",
+      "license": "MIT",
+      "dependencies": {
+        "readdirp": "^5.0.0"
+      },
+      "engines": {
+        "node": ">= 20.19.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
     "node_modules/combined-stream": {
       "version": "1.0.8",
       "resolved": "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -685,6 +864,12 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/confbox": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmmirror.com/confbox/-/confbox-0.2.4.tgz",
+      "integrity": "sha512-ysOGlgTFbN2/Y6Cg3Iye8YKulHw+R2fNXHrgSmXISQdMnomY6eNDprVdW9R5xBguEqI954+S6709UyiO7B+6OQ==",
+      "license": "MIT"
+    },
     "node_modules/csstype": {
       "version": "3.2.3",
       "resolved": "https://registry.npmmirror.com/csstype/-/csstype-3.2.3.tgz",
@@ -835,11 +1020,16 @@
       "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
       "license": "MIT"
     },
+    "node_modules/exsolve": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmmirror.com/exsolve/-/exsolve-1.0.8.tgz",
+      "integrity": "sha512-LmDxfWXwcTArk8fUEnOfSZpHOJ6zOMUJKOtFLFqJLoKJetuQG874Uc7/Kki7zFLzYybmZhp1M7+98pfMqeX8yA==",
+      "license": "MIT"
+    },
     "node_modules/fdir": {
       "version": "6.5.0",
       "resolved": "https://registry.npmmirror.com/fdir/-/fdir-6.5.0.tgz",
       "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=12.0.0"
@@ -1001,6 +1191,45 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/hookable": {
+      "version": "5.5.3",
+      "resolved": "https://registry.npmmirror.com/hookable/-/hookable-5.5.3.tgz",
+      "integrity": "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==",
+      "license": "MIT"
+    },
+    "node_modules/jsesc": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmmirror.com/jsesc/-/jsesc-3.1.0.tgz",
+      "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
+      "license": "MIT",
+      "bin": {
+        "jsesc": "bin/jsesc"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/json5": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmmirror.com/json5/-/json5-2.2.3.tgz",
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+      "license": "MIT",
+      "bin": {
+        "json5": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/jwt-decode": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/jwt-decode/-/jwt-decode-4.0.0.tgz",
+      "integrity": "sha512-+KJGIyHgkGuIq3IEBNftfhW/LfWhXUIY6OmyVWjliu5KH1y0fw7VQ8YndE2O4qZdMSd9SqbnC8GOcZEy0Om7sA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/lightningcss": {
       "version": "1.32.0",
       "resolved": "https://registry.npmmirror.com/lightningcss/-/lightningcss-1.32.0.tgz",
@@ -1262,6 +1491,23 @@
         "url": "https://opencollective.com/parcel"
       }
     },
+    "node_modules/local-pkg": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmmirror.com/local-pkg/-/local-pkg-1.1.2.tgz",
+      "integrity": "sha512-arhlxbFRmoQHl33a0Zkle/YWlmNwoyt6QNZEIJcqNbdrsix5Lvc4HyyI3EnwxTYlZYc32EbYrQ8SzEZ7dqgg9A==",
+      "license": "MIT",
+      "dependencies": {
+        "mlly": "^1.7.4",
+        "pkg-types": "^2.3.0",
+        "quansync": "^0.2.11"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
     "node_modules/lodash": {
       "version": "4.18.1",
       "resolved": "https://registry.npmmirror.com/lodash/-/lodash-4.18.1.tgz",
@@ -1294,6 +1540,21 @@
         "@jridgewell/sourcemap-codec": "^1.5.5"
       }
     },
+    "node_modules/magic-string-ast": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/magic-string-ast/-/magic-string-ast-1.0.3.tgz",
+      "integrity": "sha512-CvkkH1i81zl7mmb94DsRiFeG9V2fR2JeuK8yDgS8oiZSFa++wWLEgZ5ufEOyLHbvSbD1gTRKv9NdX69Rnvr9JA==",
+      "license": "MIT",
+      "dependencies": {
+        "magic-string": "^0.30.19"
+      },
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sxzz"
+      }
+    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmmirror.com/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
@@ -1330,6 +1591,41 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/mlly": {
+      "version": "1.8.2",
+      "resolved": "https://registry.npmmirror.com/mlly/-/mlly-1.8.2.tgz",
+      "integrity": "sha512-d+ObxMQFmbt10sretNDytwt85VrbkhhUA/JBGm1MPaWJ65Cl4wOgLaB1NYvJSZ0Ef03MMEU/0xpPMXUIQ29UfA==",
+      "license": "MIT",
+      "dependencies": {
+        "acorn": "^8.16.0",
+        "pathe": "^2.0.3",
+        "pkg-types": "^1.3.1",
+        "ufo": "^1.6.3"
+      }
+    },
+    "node_modules/mlly/node_modules/confbox": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmmirror.com/confbox/-/confbox-0.1.8.tgz",
+      "integrity": "sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==",
+      "license": "MIT"
+    },
+    "node_modules/mlly/node_modules/pkg-types": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmmirror.com/pkg-types/-/pkg-types-1.3.1.tgz",
+      "integrity": "sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==",
+      "license": "MIT",
+      "dependencies": {
+        "confbox": "^0.1.8",
+        "mlly": "^1.7.4",
+        "pathe": "^2.0.1"
+      }
+    },
+    "node_modules/muggle-string": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmmirror.com/muggle-string/-/muggle-string-0.4.1.tgz",
+      "integrity": "sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==",
+      "license": "MIT"
+    },
     "node_modules/nanoid": {
       "version": "3.3.11",
       "resolved": "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.11.tgz",
@@ -1354,6 +1650,30 @@
       "integrity": "sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw==",
       "license": "BSD-3-Clause"
     },
+    "node_modules/oidc-client-ts": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmmirror.com/oidc-client-ts/-/oidc-client-ts-3.5.0.tgz",
+      "integrity": "sha512-l2q8l9CTCTOlbX+AnK4p3M+4CEpKpyQhle6blQkdFhm0IsBqsxm15bYaSa11G7pWdsYr6epdsRZxJpCyCRbT8A==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "jwt-decode": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/pathe": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmmirror.com/pathe/-/pathe-2.0.3.tgz",
+      "integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==",
+      "license": "MIT"
+    },
+    "node_modules/perfect-debounce": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/perfect-debounce/-/perfect-debounce-2.1.0.tgz",
+      "integrity": "sha512-LjgdTytVFXeUgtHZr9WYViYSM/g8MkcTPYDlPa3cDqMirHjKiSZPYd6DoL7pK8AJQr+uWkQvCjHNdiMqsrJs+g==",
+      "license": "MIT"
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmmirror.com/picocolors/-/picocolors-1.1.1.tgz",
@@ -1364,7 +1684,6 @@
       "version": "4.0.4",
       "resolved": "https://registry.npmmirror.com/picomatch/-/picomatch-4.0.4.tgz",
       "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=12"
@@ -1373,6 +1692,17 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/pkg-types": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmmirror.com/pkg-types/-/pkg-types-2.3.0.tgz",
+      "integrity": "sha512-SIqCzDRg0s9npO5XQ3tNZioRY1uK06lA41ynBC1YmFTmnY6FjUjVt6s4LoADmwoig1qqD0oK8h1p/8mlMx8Oig==",
+      "license": "MIT",
+      "dependencies": {
+        "confbox": "^0.2.2",
+        "exsolve": "^1.0.7",
+        "pathe": "^2.0.3"
+      }
+    },
     "node_modules/postcss": {
       "version": "8.5.9",
       "resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.5.9.tgz",
@@ -1410,6 +1740,35 @@
         "node": ">=10"
       }
     },
+    "node_modules/quansync": {
+      "version": "0.2.11",
+      "resolved": "https://registry.npmmirror.com/quansync/-/quansync-0.2.11.tgz",
+      "integrity": "sha512-AifT7QEbW9Nri4tAwR5M/uzpBuqfZf+zwaEM/QkzEjj7NBuFD2rBuy0K3dE+8wltbezDV7JMA0WfnCPYRSYbXA==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/antfu"
+        },
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/sxzz"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/readdirp": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmmirror.com/readdirp/-/readdirp-5.0.0.tgz",
+      "integrity": "sha512-9u/XQ1pvrQtYyMpZe7DXKv2p5CNvyVwzUB6uhLAnQwHMSgKMBR62lc7AHljaeteeHXn11XTAaLLUVZYVZyuRBQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 20.19.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
     "node_modules/rolldown": {
       "version": "1.0.0-rc.13",
       "resolved": "https://registry.npmmirror.com/rolldown/-/rolldown-1.0.0-rc.13.tgz",
@@ -1451,6 +1810,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/scule": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmmirror.com/scule/-/scule-1.3.0.tgz",
+      "integrity": "sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g==",
+      "license": "MIT"
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -1464,7 +1829,6 @@
       "version": "0.2.16",
       "resolved": "https://registry.npmmirror.com/tinyglobby/-/tinyglobby-0.2.16.tgz",
       "integrity": "sha512-pn99VhoACYR8nFHhxqix+uvsbXineAasWm5ojXoN8xEwK5Kd3/TrhNn1wByuD52UxWRLy8pu+kRMniEi6Eq9Zg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "fdir": "^6.5.0",
@@ -1485,6 +1849,42 @@
       "license": "0BSD",
       "optional": true
     },
+    "node_modules/ufo": {
+      "version": "1.6.3",
+      "resolved": "https://registry.npmmirror.com/ufo/-/ufo-1.6.3.tgz",
+      "integrity": "sha512-yDJTmhydvl5lJzBmy/hyOAA0d+aqCBuwl818haVdYCRrWV84o7YyeVm4QlVHStqNrrJSTb6jKuFAVqAFsr+K3Q==",
+      "license": "MIT"
+    },
+    "node_modules/unplugin": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/unplugin/-/unplugin-3.0.0.tgz",
+      "integrity": "sha512-0Mqk3AT2TZCXWKdcoaufeXNukv2mTrEZExeXlHIOZXdqYoHHr4n51pymnwV8x2BOVxwXbK2HLlI7usrqMpycdg==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/remapping": "^2.3.5",
+        "picomatch": "^4.0.3",
+        "webpack-virtual-modules": "^0.6.2"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/unplugin-utils": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmmirror.com/unplugin-utils/-/unplugin-utils-0.3.1.tgz",
+      "integrity": "sha512-5lWVjgi6vuHhJ526bI4nlCOmkCIF3nnfXkCMDeMJrtdvxTs6ZFCM8oNufGTsDbKv/tJ/xj8RpvXjRuPBZJuJog==",
+      "license": "MIT",
+      "dependencies": {
+        "pathe": "^2.0.3",
+        "picomatch": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sxzz"
+      }
+    },
     "node_modules/vite": {
       "version": "8.0.7",
       "resolved": "https://registry.npmmirror.com/vite/-/vite-8.0.7.tgz",
@@ -1600,6 +2000,72 @@
         "vue": "^3.3.0"
       }
     },
+    "node_modules/vue-router": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-5.0.4.tgz",
+      "integrity": "sha512-lCqDLCI2+fKVRl2OzXuzdSWmxXFLQRxQbmHugnRpTMyYiT+hNaycV0faqG5FBHDXoYrZ6MQcX87BvbY8mQ20Bg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/generator": "^7.28.6",
+        "@vue-macros/common": "^3.1.1",
+        "@vue/devtools-api": "^8.0.6",
+        "ast-walker-scope": "^0.8.3",
+        "chokidar": "^5.0.0",
+        "json5": "^2.2.3",
+        "local-pkg": "^1.1.2",
+        "magic-string": "^0.30.21",
+        "mlly": "^1.8.0",
+        "muggle-string": "^0.4.1",
+        "pathe": "^2.0.3",
+        "picomatch": "^4.0.3",
+        "scule": "^1.3.0",
+        "tinyglobby": "^0.2.15",
+        "unplugin": "^3.0.0",
+        "unplugin-utils": "^0.3.1",
+        "yaml": "^2.8.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "@pinia/colada": ">=0.21.2",
+        "@vue/compiler-sfc": "^3.5.17",
+        "pinia": "^3.0.4",
+        "vue": "^3.5.0"
+      },
+      "peerDependenciesMeta": {
+        "@pinia/colada": {
+          "optional": true
+        },
+        "@vue/compiler-sfc": {
+          "optional": true
+        },
+        "pinia": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/webpack-virtual-modules": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmmirror.com/webpack-virtual-modules/-/webpack-virtual-modules-0.6.2.tgz",
+      "integrity": "sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==",
+      "license": "MIT"
+    },
+    "node_modules/yaml": {
+      "version": "2.8.3",
+      "resolved": "https://registry.npmmirror.com/yaml/-/yaml-2.8.3.tgz",
+      "integrity": "sha512-AvbaCLOO2Otw/lW5bmh9d/WEdcDFdQp2Z2ZUH3pX9U2ihyUY0nvLv7J6TrWowklRGPYbB/IuIMfYgxaCPg5Bpg==",
+      "license": "ISC",
+      "bin": {
+        "yaml": "bin.mjs"
+      },
+      "engines": {
+        "node": ">= 14.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/eemeli"
+      }
+    },
     "node_modules/zrender": {
       "version": "6.0.0",
       "resolved": "https://registry.npmmirror.com/zrender/-/zrender-6.0.0.tgz",
diff --git a/web/package.json b/web/package.json
index b50e343..c965f18 100644
--- a/web/package.json
+++ b/web/package.json
@@ -12,11 +12,13 @@
     "axios": "^1.14.0",
     "echarts": "^6.0.0",
     "element-plus": "^2.13.6",
+    "oidc-client-ts": "^3.5.0",
     "vue": "^3.5.32",
-    "vue-echarts": "^8.0.1"
+    "vue-echarts": "^8.0.1",
+    "vue-router": "^5.0.4"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.5",
     "vite": "^8.0.4"
   }
-}
\ No newline at end of file
+}
diff --git a/web/src/App.vue b/web/src/App.vue
index 0efcefe..456647e 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -1,265 +1,9 @@
 <template>
-  <div class="app">
-    <el-container>
-      <!-- 头部 -->
-      <el-header class="header">
-        <div class="header-inner">
-          <div class="header-content">
-            <h1 class="app-title" @click="mobileView = 'dashboard'">🚗 CarCost</h1>
-            
-            <!-- 桌面端：车辆选择 + 添加按钮 -->
-            <div class="desktop-nav">
-              <el-select 
-                v-model="selectedVehicle" 
-                placeholder="选择车辆" 
-                style="width: 180px"
-                @change="onVehicleChange"
-              >
-                <el-option
-                  v-for="vehicle in vehicles"
-                  :key="vehicle.id"
-                  :label="vehicle.name"
-                  :value="vehicle.id"
-                />
-              </el-select>
-              <el-divider direction="vertical" />
-              <el-button @click="showAddVehicle = true" title="添加车辆">
-                <el-icon><Plus /></el-icon> 车辆
-              </el-button>
-              <el-button v-if="selectedVehicle" @click="editCurrentVehicle" title="编辑车辆">
-                <el-icon><Edit /></el-icon> 编辑
-              </el-button>
-              <el-divider direction="vertical" />
-              <el-button @click="showAddFuel = true" title="添加加油记录">
-                <el-icon><Plus /></el-icon> 加油
-              </el-button>
-              <el-button @click="showAddCost = true" title="添加费用记录">
-                <el-icon><Plus /></el-icon> 费用
-              </el-button>
-            </div>
-            
-            <!-- 移动端：车辆选择 + 添加按钮 + 汉堡菜单 -->
-            <div class="mobile-nav">
-              <el-dropdown trigger="click" v-if="vehicles.length > 0">
-                <el-button>
-                  {{ selectedVehicleName || '选择车辆' }}
-                  <el-icon class="el-icon--right"><ArrowDown /></el-icon>
-                </el-button>
-                <template #dropdown>
-                  <el-dropdown-menu>
-                    <el-dropdown-item 
-                      v-for="vehicle in vehicles" 
-                      :key="vehicle.id"
-                      @click="selectVehicle(vehicle.id)"
-                    >
-                      {{ vehicle.name }}
-                    </el-dropdown-item>
-                    <el-dropdown-item divided @click="showAddVehicle = true">+ 添加车辆</el-dropdown-item>
-                    <el-dropdown-item v-if="selectedVehicle" @click="editCurrentVehicle">✏️ 编辑车辆</el-dropdown-item>
-                  </el-dropdown-menu>
-                </template>
-              </el-dropdown>
-              <el-button v-if="mobileView === 'fuel'" @click="showAddFuel = true">
-                <el-icon><Plus /></el-icon>
-              </el-button>
-              <el-button v-if="mobileView === 'cost'" @click="showAddCost = true">
-                <el-icon><Plus /></el-icon>
-              </el-button>
-              <el-dropdown trigger="click">
-                <el-button>
-                  <el-icon><Menu /></el-icon>
-                </el-button>
-                <template #dropdown>
-                  <el-dropdown-menu>
-                    <el-dropdown-item @click="mobileView = 'fuel'">⛽ 加油记录</el-dropdown-item>
-                    <el-dropdown-item @click="mobileView = 'cost'">💰 费用记录</el-dropdown-item>
-                  </el-dropdown-menu>
-                </template>
-              </el-dropdown>
-            </div>
-          </div>
-        </div>
-      </el-header>
-      
-      <el-main>
-        <div class="content-wrapper">
-        <!-- 移动端：车辆选择 -->
-        <div class="mobile-vehicle-select">
-          <el-select 
-            v-model="selectedVehicle" 
-            placeholder="选择车辆" 
-            style="width: 100%"
-            @change="onVehicleChange"
-          >
-            <el-option
-              v-for="vehicle in vehicles"
-              :key="vehicle.id"
-              :label="vehicle.name"
-              :value="vehicle.id"
-            />
-          </el-select>
-        </div>
-        
-        <!-- 桌面端布局 -->
-        <div class="desktop-layout">
-          <!-- 上方统计卡片 -->
-          <StatsCards :dashboard-data="dashboardData" :total-cost="totalCost" />
-          
-          <!-- 四个图表 -->
-          <DashboardCharts :vehicle-id="selectedVehicle" />
-          
-          <!-- 下方左右两栏：列表 -->
-          <el-row :gutter="20" class="records-row">
-            <el-col :span="12">
-              <FuelRecordsPanel 
-                :vehicle-id="selectedVehicle"
-                :show-charts="false"
-                :show-list="true"
-                @add-fuel="showAddFuel = true"
-              />
-            </el-col>
-            <el-col :span="12">
-              <CostRecordsPanel 
-                :vehicle-id="selectedVehicle"
-                :show-charts="false"
-                :show-list="true"
-                @add-cost="showAddCost = true"
-              />
-            </el-col>
-          </el-row>
-        </div>
-        
-        <!-- 移动端布局 -->
-        <div class="mobile-layout">
-          <!-- 仪表盘 -->
-          <div v-if="mobileView === 'dashboard'">
-            <StatsCards :dashboard-data="dashboardData" :total-cost="totalCost" />
-            <!-- 移动端图表 -->
-            <DashboardCharts :vehicle-id="selectedVehicle" />
-          </div>
-          
-          <!-- 加油记录 -->
-          <div v-if="mobileView === 'fuel'">
-            <FuelRecordsPanel 
-              :vehicle-id="selectedVehicle"
-              :show-charts="false"
-              :show-list="true"
-              @add-fuel="showAddFuel = true"
-            />
-          </div>
-          
-          <!-- 费用记录 -->
-          <div v-if="mobileView === 'cost'">
-            <CostRecordsPanel 
-              :vehicle-id="selectedVehicle"
-              :show-charts="false"
-              :show-list="true"
-              @add-cost="showAddCost = true"
-            />
-          </div>
-        </div>
-        </div>
-      </el-main>
-    </el-container>
-
-    <!-- 弹窗 -->
-    <AddVehicleDialog v-model:visible="showAddVehicle" @success="loadVehicles" />
-    <EditVehicleDialog v-model:visible="showEditVehicle" :vehicle="currentVehicle" @success="loadVehicles" />
-    <AddFuelDialog v-model:visible="showAddFuel" :vehicle-id="selectedVehicle" @success="onRecordAdded" />
-    <AddCostDialog v-model:visible="showAddCost" :vehicle-id="selectedVehicle" @success="onRecordAdded" />
-  </div>
+  <router-view />
 </template>
 
 <script setup>
-import { ref, onMounted, computed } from 'vue'
-import axios from 'axios'
-import { ElMessage } from 'element-plus'
-import { Menu, ArrowDown, Plus, Edit } from '@element-plus/icons-vue'
-import AddVehicleDialog from './components/dialogs/vehicle/AddVehicleDialog.vue'
-import EditVehicleDialog from './components/dialogs/vehicle/EditVehicleDialog.vue'
-import AddFuelDialog from './components/dialogs/fuel/AddFuelDialog.vue'
-import AddCostDialog from './components/dialogs/cost/AddCostDialog.vue'
-import StatsCards from './components/cards/StatsCards.vue'
-import DashboardCharts from './components/charts/DashboardCharts.vue'
-import FuelRecordsPanel from './components/panels/FuelRecordsPanel.vue'
-import CostRecordsPanel from './components/panels/CostRecordsPanel.vue'
-
-const API_BASE = 'https://api.yuany3721.site/carcost'
-
-const vehicles = ref([])
-const selectedVehicle = ref(null)
-const dashboardData = ref(null)
-const totalCost = ref(0)
-const mobileView = ref('dashboard') // 'dashboard', 'fuel', 'cost'
-
-// 当前选中车辆名称
-const selectedVehicleName = computed(() => {
-  const vehicle = vehicles.value.find(v => v.id === selectedVehicle.value)
-  return vehicle?.name || ''
-})
-
-const showAddVehicle = ref(false)
-const showAddFuel = ref(false)
-const showAddCost = ref(false)
-const showEditVehicle = ref(false)
-const currentVehicle = ref(null)
-
-// 加载车辆列表
-const loadVehicles = async () => {
-  try {
-    const res = await axios.get(`${API_BASE}/vehicles/list`)
-    vehicles.value = res.data
-    if (vehicles.value.length > 0 && !selectedVehicle.value) {
-      selectedVehicle.value = vehicles.value[0].id
-      loadDashboard()
-    }
-  } catch (error) {
-    ElMessage.error('加载车辆失败')
-  }
-}
-
-// 加载仪表盘数据
-const loadDashboard = async () => {
-  if (!selectedVehicle.value) return
-  try {
-    const res = await axios.get(`${API_BASE}/dashboard/data?vehicle_id=${selectedVehicle.value}`)
-    dashboardData.value = res.data
-    
-    // 加载总费用
-    const costRes = await axios.get(`${API_BASE}/costs/list?vehicle_id=${selectedVehicle.value}&limit=1000`)
-    const costs = costRes.data || []
-    totalCost.value = costs.reduce((sum, c) => sum + c.amount, 0)
-  } catch (error) {
-    ElMessage.error('加载数据失败')
-  }
-}
-
-// 切换车辆
-const onVehicleChange = () => {
-  loadDashboard()
-}
-
-// 移动端选择车辆
-const selectVehicle = (id) => {
-  selectedVehicle.value = id
-  onVehicleChange()
-}
-
-// 编辑当前车辆
-const editCurrentVehicle = () => {
-  if (!selectedVehicle.value) return
-  currentVehicle.value = vehicles.value.find(v => v.id === selectedVehicle.value)
-  showEditVehicle.value = true
-}
-
-// 记录添加成功后刷新
-const onRecordAdded = () => {
-  loadDashboard()
-}
-
-onMounted(() => {
-  loadVehicles()
-})
+// App.vue 只作为根容器，所有内容由路由控制
 </script>
 
 <style>
@@ -277,175 +21,3 @@ html, body {
   overflow-x: hidden;
 }
 </style>
-
-<style scoped>
-.app {
-  min-height: 100vh;
-  background: #f5f7fa;
-  width: 100%;
-}
-
-.content-wrapper {
-  max-width: 900px;
-  margin: 0 auto;
-  width: 100%;
-}
-
-.header {
-  background: #fff;
-  border-bottom: 1px solid #e4e7ed;
-  padding: 0;
-}
-
-.header-inner {
-  max-width: 900px;
-  margin: 0 auto;
-  width: 100%;
-}
-
-.header-content {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  height: 60px;
-  padding: 0 20px;
-}
-
-.header h1 {
-  margin: 0;
-  font-size: 20px;
-  color: #303133;
-}
-
-.app-title {
-  cursor: pointer;
-}
-
-.app-title:hover {
-  opacity: 0.8;
-}
-
-.desktop-nav {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.mobile-nav {
-  display: none;
-}
-
-.mobile-vehicle-select {
-  display: none;
-  margin-bottom: 15px;
-}
-
-.desktop-layout {
-  display: block;
-  width: 100%;
-  overflow-x: hidden;
-}
-
-.mobile-layout {
-  display: none;
-  width: 100%;
-  overflow-x: hidden;
-}
-
-.records-row {
-  margin: 0 -10px !important;
-  width: calc(100% + 20px);
-  display: flex;
-  align-items: stretch;
-}
-
-.records-row :deep(.el-col) {
-  padding-left: 10px !important;
-  padding-right: 10px !important;
-  display: flex;
-}
-
-.records-row :deep(.el-col > *) {
-  flex: 1;
-}
-
-.mobile-charts {
-  margin-top: 15px;
-}
-
-.mobile-tip {
-  margin-top: 20px;
-}
-
-/* 调整 main 的 padding */
-:deep(.el-main) {
-  padding: 20px !important;
-}
-
-@media (max-width: 768px) {
-  :deep(.el-main) {
-    padding: 10px !important;
-  }
-}
-
-:deep(.el-container) {
-  padding: 0 !important;
-}
-
-/* 移动端内容区域 */
-.mobile-layout {
-  padding: 0;
-}
-
-@media (max-width: 768px) {
-  :deep(.el-main) {
-    padding: 0 !important;
-  }
-}
-
-/* 弹窗默认样式（电脑端） */
-:deep(.el-dialog) {
-  width: 450px !important;
-}
-
-/* 移动端弹窗适配 */
-@media (max-width: 768px) {
-  :deep(.el-dialog) {
-    width: 90% !important;
-    max-width: 350px !important;
-  }
-}
-
-/* 移动端适配 */
-@media (max-width: 768px) {
-  .desktop-nav {
-    display: none;
-  }
-  
-  .mobile-nav {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  }
-  
-  .mobile-vehicle-select {
-    display: none;
-  }
-  
-  .desktop-layout {
-    display: none;
-  }
-  
-  .mobile-layout {
-    display: block;
-  }
-  
-  .header-content {
-    padding: 0 10px;
-  }
-  
-  .header h1 {
-    font-size: 18px;
-  }
-}
-</style>
diff --git a/web/src/api.js b/web/src/api.js
new file mode 100644
index 0000000..356f9b4
--- /dev/null
+++ b/web/src/api.js
@@ -0,0 +1,16 @@
+import axios from 'axios'
+
+// 创建 axios 实例并导出
+const api = axios.create({
+  baseURL: 'https://api.yuany3721.site/carcost',
+  headers: {
+    'Content-Type': 'application/json'
+  }
+})
+
+// 导出设置 token 的函数
+export function setAuthToken(token) {
+  api.defaults.headers.common['Authorization'] = token ? `Bearer ${token}` : ''
+}
+
+export default api
diff --git a/web/src/components/cards/StatsCards.vue b/web/src/components/cards/StatsCards.vue
index 903d45b..7d76a8f 100644
--- a/web/src/components/cards/StatsCards.vue
+++ b/web/src/components/cards/StatsCards.vue
@@ -1,13 +1,13 @@
 <template>
-  <el-card class="stats-card" v-if="dashboardData">
+  <el-card class="stats-card" v-if="hasData">
     <el-row :gutter="20">
       <el-col :xs="12" :sm="8" :md="4">
-        <el-statistic :value="dashboardData.total_mileage || 0" title="总里程">
+        <el-statistic :value="stats.total_mileage || 0" title="总里程">
           <template #suffix>km</template>
         </el-statistic>
       </el-col>
       <el-col :xs="12" :sm="8" :md="4">
-        <el-statistic :value="dashboardData.total_fuel_cost || 0" title="总油费">
+        <el-statistic :value="stats.total_fuel_cost || 0" title="总油费">
           <template #prefix>¥</template>
         </el-statistic>
       </el-col>
@@ -27,7 +27,7 @@
         </el-statistic>
       </el-col>
       <el-col :xs="12" :sm="8" :md="4">
-        <el-statistic :value="dashboardData?.avg_daily_km || 0" title="日均行程">
+        <el-statistic :value="stats.avg_daily_km || 0" title="日均行程">
           <template #suffix>km</template>
         </el-statistic>
       </el-col>
@@ -38,26 +38,34 @@
 
 <script setup>
 import { computed } from 'vue'
+import { useVehicleData } from '../../composables/useVehicleData.js'
 
 const props = defineProps({
-  dashboardData: Object,
-  totalCost: {
+  vehicleId: {
     type: Number,
-    default: 0
+    default: null
   }
 })
 
+// 使用缓存层
+const { stats, totalCost, state } = useVehicleData()
+
+// 判断是否有数据
+const hasData = computed(() => {
+  return props.vehicleId && state.vehicleId == props.vehicleId && state.lastLoaded
+})
+
 // 每公里油费
 const fuelCostPerKm = computed(() => {
-  if (!props.dashboardData?.total_mileage || props.dashboardData.total_mileage === 0) return 0
-  return (props.dashboardData.total_fuel_cost || 0) / props.dashboardData.total_mileage
+  if (!stats.value?.total_mileage || stats.value.total_mileage === 0) return 0
+  return (stats.value.total_fuel_cost || 0) / stats.value.total_mileage
 })
 
 // 每公里总成本
 const totalCostPerKm = computed(() => {
-  if (!props.dashboardData?.total_mileage || props.dashboardData.total_mileage === 0) return 0
-  const total = (props.dashboardData.total_fuel_cost || 0) + props.totalCost
-  return total / props.dashboardData.total_mileage
+  if (!stats.value?.total_mileage || stats.value.total_mileage === 0) return 0
+  const total = (stats.value.total_fuel_cost || 0) + totalCost.value
+  return total / stats.value.total_mileage
 })
 </script>
 
diff --git a/web/src/components/charts/DashboardCharts.vue b/web/src/components/charts/DashboardCharts.vue
index 1574015..eda8eca 100644
--- a/web/src/components/charts/DashboardCharts.vue
+++ b/web/src/components/charts/DashboardCharts.vue
@@ -12,7 +12,7 @@
         <!-- 四个图表 -->
         <div class="charts-grid">
             <!-- 费用类型分布 -->
-            <div class="chart-item" v-if="pieChartOption && allRecords.length > 0">
+            <div class="chart-item" v-if="pieChartOption && costRecords.length > 0">
                 <div class="chart-title">📊 费用类型分布</div>
                 <div class="chart-content">
                     <v-chart
@@ -28,7 +28,7 @@
             </div>
 
             <!-- 油耗趋势 -->
-            <div class="chart-item" v-if="consumptionChartOption && allRecords.length > 0">
+            <div class="chart-item" v-if="consumptionChartOption && fuelRecords.length > 0">
                 <div class="chart-title">⛽ 油耗趋势</div>
                 <div class="chart-content">
                     <v-chart
@@ -44,7 +44,7 @@
             </div>
 
             <!-- 月度费用统计 -->
-            <div class="chart-item" v-if="monthlyChartOption && allRecords.length > 0">
+            <div class="chart-item" v-if="monthlyChartOption && costRecords.length > 0">
                 <div class="chart-title">📈 月度费用统计</div>
                 <div class="chart-content">
                     <v-chart
@@ -79,110 +79,88 @@
 </template>
 
 <script setup>
-import { ref, computed, watch, onMounted } from "vue";
-import axios from "axios";
+import { ref, computed, onMounted } from "vue";
+import { useVehicleData } from "../../composables/useVehicleData.js";
+import { 
+    filterRecordsByTimeRange,
+    calculateCostInstallments,
+    calculateMonthlyFuelCost,
+    calculateMonthlyStats,
+    calculateCostTypeDistribution,
+    getRecentMonths
+} from "../../utils/calculations.js";
+import { COST_TYPE_COLORS } from "../../constants/index.js";
 
 const props = defineProps({
     vehicleId: Number,
 });
 
-const API_BASE = "https://api.yuany3721.site/carcost";
+// 使用缓存层
+const { 
+    fuelRecords: allFuelRecords, 
+    costRecords: allCostRecords,
+    state 
+} = useVehicleData();
+
+// 时间范围选择
+const timeRange = ref("past_year");
 
 // 检测是否为移动端
 const isMobile = ref(false);
 
-// 统一的时间范围（根据设备类型设置默认值）
-const timeRange = ref("past_year");
-
 onMounted(() => {
     isMobile.value = window.innerWidth <= 768;
     timeRange.value = isMobile.value ? "past_6months" : "past_year";
 });
 
-// 数据
-const allRecords = ref([]);
-const fuelRecords = ref([]);
-
-// 加载数据
-const loadData = async () => {
-    if (!props.vehicleId) return;
-    try {
-        const [fuelRes, costRes] = await Promise.all([
-            axios.get(`${API_BASE}/fuel-records/list?vehicle_id=${props.vehicleId}&limit=1000`),
-            axios.get(`${API_BASE}/costs/list?vehicle_id=${props.vehicleId}&limit=1000`),
-        ]);
-        fuelRecords.value = fuelRes.data || [];
-        allRecords.value = costRes.data || [];
-    } catch (error) {
-        console.error("加载数据失败");
-    }
-};
-
-watch(() => props.vehicleId, loadData, { immediate: true });
-
-// 计算费用分摊明细表
-const costInstallments = computed(() => {
-    const installments = [];
-
-    allRecords.value.forEach((cost) => {
-        if (cost.is_installment && cost.installment_months > 1) {
-            // 分摊费用，生成多条记录
-            const monthlyAmount = cost.amount / cost.installment_months;
-            const startMonth = cost.date.slice(0, 7);
-
-            for (let i = 0; i < cost.installment_months; i++) {
-                const month = getNextMonth(startMonth, i);
-                installments.push({
-                    month: month,
-                    type: cost.type,
-                    amount: monthlyAmount,
-                    originalCostId: cost.id,
-                });
-            }
-        } else {
-            // 一次性费用，生成一条记录
-            installments.push({
-                month: cost.date.slice(0, 7),
-                type: cost.type,
-                amount: cost.amount,
-                originalCostId: cost.id,
-            });
-        }
-    });
-
-    return installments;
+// 费用记录（全部，用于判断是否有数据）
+const costRecords = computed(() => {
+    if (!state.vehicleId || state.vehicleId !== props.vehicleId) return [];
+    return allCostRecords.value;
 });
 
-// 获取N个月前的日期
-const getMonthsAgo = (months) => {
-    const now = new Date();
-    return new Date(now.getFullYear(), now.getMonth() - months, now.getDate());
-};
+// 根据时间范围筛选后的加油记录（油费直接按日期筛选）
+const fuelRecords = computed(() => {
+    if (!state.vehicleId || state.vehicleId !== props.vehicleId) return [];
+    return filterRecordsByTimeRange(timeRange.value, allFuelRecords.value);
+});
 
-// 根据时间范围筛选记录
-const getFilteredRecords = () => {
-    let filteredFuel = fuelRecords.value;
-    let filteredCost = allRecords.value;
+// 费用分摊明细 - 使用全部费用记录生成分摊，不按日期筛选
+// 因为分摊费用可能跨越时间范围（例如去年买的保险今年还在分摊）
+const costInstallments = computed(() => {
+    if (!state.vehicleId || state.vehicleId !== props.vehicleId) return [];
+    return calculateCostInstallments(allCostRecords.value);
+});
 
+// 筛选后的费用分摊（根据目标月份）
+const filteredCostInstallments = computed(() => {
+    if (!targetMonths.value) return costInstallments.value;
+    return costInstallments.value.filter(item => targetMonths.value.includes(item.month));
+});
+
+// 计算月度油费
+const monthlyFuelCost = computed(() => {
+    return calculateMonthlyFuelCost(fuelRecords.value);
+});
+
+// 计算月度统计
+const monthlyStats = computed(() => {
+    return calculateMonthlyStats(fuelRecords.value, filteredCostInstallments.value);
+});
+
+// 获取时间范围对应的月份列表
+const targetMonths = computed(() => {
     if (timeRange.value === "past_6months") {
-        const sixMonthsAgo = getMonthsAgo(6);
-        const cutoffDate = sixMonthsAgo.toISOString().slice(0, 10);
-        filteredFuel = fuelRecords.value.filter((r) => r.date >= cutoffDate);
-        filteredCost = allRecords.value.filter((r) => r.date >= cutoffDate);
+        return getRecentMonths(6);
     } else if (timeRange.value === "past_year") {
-        const oneYearAgo = getMonthsAgo(12);
-        const cutoffDate = oneYearAgo.toISOString().slice(0, 10);
-        filteredFuel = fuelRecords.value.filter((r) => r.date >= cutoffDate);
-        filteredCost = allRecords.value.filter((r) => r.date >= cutoffDate);
+        return getRecentMonths(12);
     }
-
-    return { filteredFuel, filteredCost };
-};
+    return null;
+});
 
 // 油耗趋势图
 const consumptionChartOption = computed(() => {
-    const { filteredFuel } = getFilteredRecords();
-    const validRecords = filteredFuel.filter((r) => r.fuel_consumption);
+    const validRecords = fuelRecords.value.filter((r) => r.fuel_consumption);
 
     if (validRecords.length === 0) return null;
 
@@ -292,15 +270,9 @@ const consumptionChartOption = computed(() => {
 
 // 月度油费图
 const monthlyCostChartOption = computed(() => {
-    const { filteredFuel } = getFilteredRecords();
-
-    const monthlyData = {};
-    filteredFuel.forEach((r) => {
-        const month = r.date.slice(0, 7);
-        monthlyData[month] = (monthlyData[month] || 0) + r.total_cost;
-    });
-
+    const monthlyData = monthlyFuelCost.value;
     const sortedMonths = Object.keys(monthlyData).sort();
+    
     if (sortedMonths.length === 0) return null;
 
     return {
@@ -338,65 +310,13 @@ const monthlyCostChartOption = computed(() => {
     };
 });
 
-// 颜色映射
-const typeColorMap = {
-    保养: "#67c23a",
-    维修: "#e6a23c",
-    保险: "#f56c6c",
-    停车: "#909399",
-    过路费: "#9a60b4",
-    其他: "#fc8452",
-    油费: "#409eff",
-};
-
 // 费用类型分布
 const pieChartOption = computed(() => {
-    const { filteredFuel } = getFilteredRecords();
-
-    // 计算时间范围
-    const now = new Date();
-    const currentMonth = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}`;
-
-    // 确定筛选的月份范围
-    let targetMonths = [];
-    if (timeRange.value === "past_6months") {
-        // 近6个月：从当前月往前推5个月（共6个月）
-        for (let i = 5; i >= 0; i--) {
-            const d = new Date(now.getFullYear(), now.getMonth() - i, 1);
-            targetMonths.push(`${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}`);
-        }
-    } else if (timeRange.value === "past_year") {
-        // 近一年：从当前月往前推11个月（共12个月）
-        for (let i = 11; i >= 0; i--) {
-            const d = new Date(now.getFullYear(), now.getMonth() - i, 1);
-            targetMonths.push(`${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}`);
-        }
-    }
-    // "全部"模式下不过滤月份
-
-    const typeData = {};
-    let totalAmount = 0;
-
-    // 从分摊明细表中筛选数据
-    costInstallments.value.forEach((item) => {
-        if (timeRange.value === "all" || targetMonths.includes(item.month)) {
-            typeData[item.type] = (typeData[item.type] || 0) + item.amount;
-            totalAmount += item.amount;
-        }
-    });
-
-    let totalFuelCost = 0;
-    filteredFuel.forEach((r) => {
-        totalFuelCost += r.total_cost;
-    });
-    if (totalFuelCost > 0) {
-        typeData["油费"] = totalFuelCost;
-        totalAmount += totalFuelCost;
-    }
-
-    const data = Object.entries(typeData)
-        .map(([name, value]) => ({ name, value: parseFloat(value.toFixed(0)) }))
-        .sort((a, b) => b.value - a.value);
+    const { totalAmount, data } = calculateCostTypeDistribution(
+        costInstallments.value,
+        fuelRecords.value,
+        targetMonths.value
+    );
 
     if (data.length === 0) return null;
 
@@ -423,7 +343,10 @@ const pieChartOption = computed(() => {
                     scale: true,
                     scaleSize: 5,
                 },
-                data: data.map((d) => ({ ...d, itemStyle: { color: typeColorMap[d.name] || "#909399" } })),
+                data: data.map((d) => ({ 
+                    ...d, 
+                    itemStyle: { color: COST_TYPE_COLORS[d.name] || "#909399" } 
+                })),
             },
         ],
         title: {
@@ -442,62 +365,22 @@ const pieChartOption = computed(() => {
 
 // 月度费用统计
 const monthlyChartOption = computed(() => {
-    const { filteredFuel } = getFilteredRecords();
-
-    const monthlyData = {};
-    const allTypes = ["保养", "维修", "保险", "停车", "过路费", "其他", "油费"];
-
-    // 计算时间范围
-    const now = new Date();
-
-    // 计算当前月份
-    const currentMonth = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}`;
-
-    // 生成分摊明细表中涉及的所有月份
-    const allMonthsSet = new Set();
-    costInstallments.value.forEach((item) => allMonthsSet.add(item.month));
-    filteredFuel.forEach((r) => allMonthsSet.add(r.date.slice(0, 7)));
-
-    let targetMonths = Array.from(allMonthsSet).sort();
-
-    // 根据时间范围筛选
-    if (timeRange.value === "past_6months") {
-        // 近6个月：从当前月往前推5个月（共6个月）
-        const cutoffDate = new Date(now.getFullYear(), now.getMonth() - 5, 1);
-        const cutoffMonth = `${cutoffDate.getFullYear()}-${String(cutoffDate.getMonth() + 1).padStart(2, "0")}`;
-        targetMonths = targetMonths.filter((m) => m >= cutoffMonth && m <= currentMonth);
-    } else if (timeRange.value === "past_year") {
-        // 近一年：从当前月往前推11个月（共12个月）
-        const cutoffDate = new Date(now.getFullYear(), now.getMonth() - 11, 1);
-        const cutoffMonth = `${cutoffDate.getFullYear()}-${String(cutoffDate.getMonth() + 1).padStart(2, "0")}`;
-        targetMonths = targetMonths.filter((m) => m >= cutoffMonth && m <= currentMonth);
+    const monthlyData = monthlyStats.value;
+    const allTypes = ["保养", "维修", "保险", "停车", "过路费", "洗车", "违章", "其他", "油费"];
+    
+    // 根据时间范围筛选月份
+    let targetMonthsList = Object.keys(monthlyData).sort();
+    if (targetMonths.value) {
+        targetMonthsList = targetMonthsList.filter(m => targetMonths.value.includes(m));
     }
-    // "全部"模式下显示所有月份（包括未来的分摊月份），不过滤
-
-    // 初始化月度数据
-    targetMonths.forEach((month) => {
-        monthlyData[month] = {};
-        allTypes.forEach((type) => (monthlyData[month][type] = 0));
-    });
-
-    // 使用分摊明细表统计费用
-    costInstallments.value.forEach((item) => {
-        if (monthlyData[item.month]) {
-            monthlyData[item.month][item.type] += item.amount;
-        }
-    });
-
-    // 添加油费（使用筛选后的）
-    filteredFuel.forEach((r) => {
-        const month = r.date.slice(0, 7);
-        if (monthlyData[month]) monthlyData[month]["油费"] += r.total_cost;
-    });
 
     // 确定存在的类型
-    const existingTypes = allTypes.filter((type) => targetMonths.some((month) => monthlyData[month][type] > 0));
+    const existingTypes = allTypes.filter((type) => 
+        targetMonthsList.some((month) => monthlyData[month][type] > 0)
+    );
 
     // 计算每月总计
-    const monthlyTotals = targetMonths.map((month) => {
+    const monthlyTotals = targetMonthsList.map((month) => {
         const total = existingTypes.reduce((sum, type) => sum + monthlyData[month][type], 0);
         return total.toFixed(0);
     });
@@ -532,7 +415,7 @@ const monthlyChartOption = computed(() => {
         },
         xAxis: {
             type: "category",
-            data: targetMonths.map((m) => m.slice(5)),
+            data: targetMonthsList.map((m) => m.slice(5)),
             axisLabel: { fontSize: 10 },
             axisLine: { show: true },
             axisTick: { show: false },
@@ -543,14 +426,14 @@ const monthlyChartOption = computed(() => {
                 name: type,
                 type: "bar",
                 stack: "total",
-                data: targetMonths.map((month) => parseFloat(monthlyData[month][type].toFixed(0))),
-                itemStyle: { color: typeColorMap[type] || "#909399" },
+                data: targetMonthsList.map((month) => parseFloat(monthlyData[month][type].toFixed(0))),
+                itemStyle: { color: COST_TYPE_COLORS[type] || "#909399" },
             })),
             {
                 name: "总计",
                 type: "bar",
                 stack: "total",
-                data: targetMonths.map(() => 0),
+                data: targetMonthsList.map(() => 0),
                 label: {
                     show: true,
                     position: "top",
@@ -568,18 +451,6 @@ const monthlyChartOption = computed(() => {
         ],
     };
 });
-
-// 辅助函数：获取下N个月
-const getNextMonth = (month, n) => {
-    const [year, mon] = month.split("-").map(Number);
-    let targetYear = year;
-    let targetMon = mon + n;
-    while (targetMon > 12) {
-        targetMon -= 12;
-        targetYear++;
-    }
-    return `${targetYear}-${String(targetMon).padStart(2, "0")}`;
-};
 </script>
 
 <style scoped>
diff --git a/web/src/components/dialogs/cost/AddCostDialog.vue b/web/src/components/dialogs/cost/AddCostDialog.vue
index 25085b7..00ffea7 100644
--- a/web/src/components/dialogs/cost/AddCostDialog.vue
+++ b/web/src/components/dialogs/cost/AddCostDialog.vue
@@ -102,7 +102,7 @@
 
 <script setup>
 import { ref, computed, onMounted, onUnmounted } from 'vue'
-import axios from 'axios'
+import api from '../../../api.js'
 import { ElMessage } from 'element-plus'
 
 const props = defineProps(['visible', 'vehicleId'])
@@ -161,7 +161,7 @@ const submit = async () => {
   
   loading.value = true
   try {
-    await axios.post(`${API_BASE}/costs/create`, {
+    await api.post(`${API_BASE}/costs/create`, {
       vehicle_id: props.vehicleId,
       type: form.value.type,
       date: form.value.date,
diff --git a/web/src/components/dialogs/cost/EditCostDialog.vue b/web/src/components/dialogs/cost/EditCostDialog.vue
index 21885d3..0d09714 100644
--- a/web/src/components/dialogs/cost/EditCostDialog.vue
+++ b/web/src/components/dialogs/cost/EditCostDialog.vue
@@ -45,7 +45,7 @@
       </el-form-item>
       
       <el-form-item label="备注">
-        <el-input v-model="form.notes" type="textarea" rows="2" placeholder="可选" />
+        <el-input v-model="form.notes" type="textarea" :rows="2" placeholder="可选" />
       </el-form-item>
     </el-form>
     <template #footer>
@@ -58,7 +58,7 @@
 
 <script setup>
 import { ref, computed, watch } from 'vue'
-import axios from 'axios'
+import api from '../../../api.js'
 import { ElMessage, ElMessageBox } from 'element-plus'
 
 const props = defineProps(['visible', 'record'])
@@ -137,7 +137,7 @@ const submit = async () => {
       requestBody.installment_months = form.value.installment_months
     }
     
-    await axios.post(`${API_BASE}/costs/update`, requestBody)
+    await api.post(`${API_BASE}/costs/update`, requestBody)
     ElMessage.success('保存成功')
     visible.value = false
     emit('success')
@@ -166,7 +166,7 @@ const deleteRecord = async () => {
     })
     
     deleting.value = true
-    await axios.post(`${API_BASE}/costs/delete`, {
+    await api.post(`${API_BASE}/costs/delete`, {
       id: form.value.id
     })
     ElMessage.success('删除成功')
diff --git a/web/src/components/dialogs/fuel/AddFuelDialog.vue b/web/src/components/dialogs/fuel/AddFuelDialog.vue
index cbb9bd3..39be4f1 100644
--- a/web/src/components/dialogs/fuel/AddFuelDialog.vue
+++ b/web/src/components/dialogs/fuel/AddFuelDialog.vue
@@ -130,7 +130,7 @@
 
 <script setup>
 import { ref, computed, onMounted, onUnmounted } from 'vue'
-import axios from 'axios'
+import api from '../../../api.js'
 import { ElMessage } from 'element-plus'
 
 const props = defineProps(['visible', 'vehicleId'])
@@ -214,7 +214,7 @@ const submit = async () => {
     return
   }
   
-  // 检查单价和加油量是否都有值
+  // 检查必填字段
   const hasPrice = form.value.fuel_price !== null && form.value.fuel_price > 0
   const hasAmount = form.value.fuel_amount !== null && form.value.fuel_amount > 0
   
@@ -230,19 +230,20 @@ const submit = async () => {
   }
   
   // 实付金额默认使用机显总价
-  const totalCost = form.value.actual_cost !== null && form.value.actual_cost > 0 
+  const actualCost = form.value.actual_cost !== null && form.value.actual_cost > 0 
     ? form.value.actual_cost 
     : displayCost
   
   loading.value = true
   try {
-    await axios.post(`${API_BASE}/fuel-records/create`, {
+    await api.post(`${API_BASE}/fuel-records/create`, {
       vehicle_id: props.vehicleId,
       date: form.value.date,
       mileage: form.value.mileage,
       fuel_amount: form.value.fuel_amount,
       fuel_price: form.value.fuel_price,
-      total_cost: totalCost,
+      display_cost: displayCost,  // 机显总价
+      actual_cost: actualCost,     // 实付金额
       is_full_tank: form.value.is_full_tank,
       notes: form.value.notes || ''
     })
@@ -263,6 +264,7 @@ const submit = async () => {
     emit('success')
   } catch (error) {
     ElMessage.error('添加失败')
+    console.error(error)
   } finally {
     loading.value = false
   }
diff --git a/web/src/components/dialogs/fuel/EditFuelDialog.vue b/web/src/components/dialogs/fuel/EditFuelDialog.vue
index 22c3612..18ab25e 100644
--- a/web/src/components/dialogs/fuel/EditFuelDialog.vue
+++ b/web/src/components/dialogs/fuel/EditFuelDialog.vue
@@ -2,65 +2,33 @@
   <el-dialog
     v-model="visible"
     title="编辑加油记录"
-    width="450px"
+    width="400px"
   >
-    <el-form :model="form" label-width="100px">
-      <el-form-item label="日期" required>
-        <el-date-picker
-          v-model="form.date"
-          type="date"
-          placeholder="选择日期"
-          style="width: 100%"
-          value-format="YYYY-MM-DD"
-        />
+    <el-form :model="form" label-width="80px">
+      <el-form-item label="日期">
+        <el-date-picker v-model="form.date" type="date" placeholder="选择日期" style="width: 100%" />
       </el-form-item>
-      <el-form-item label="里程 (km)" required>
+      <el-form-item label="里程">
         <el-input-number v-model="form.mileage" :min="0" style="width: 100%" />
       </el-form-item>
-      
-      <!-- 三个核心字段 -->
-      <el-form-item label="单价 (¥/L)">
-        <el-input-number 
-          v-model="form.fuel_price" 
-          :min="0" 
-          :precision="2" 
-          style="width: 100%" 
-          placeholder="机显单价"
-          @change="onPriceChange"
-        />
+      <el-form-item label="加油量">
+        <el-input-number v-model="form.fuel_amount" :min="0" :precision="2" style="width: 100%" @change="onAmountChange" />
       </el-form-item>
-      <el-form-item label="加油量 (L)">
-        <el-input-number 
-          v-model="form.fuel_amount" 
-          :min="0" 
-          :precision="2" 
-          style="width: 100%" 
-          placeholder="加油量"
-          @change="onAmountChange"
-        />
+      <el-form-item label="单价">
+        <el-input-number v-model="form.fuel_price" :min="0" :precision="2" style="width: 100%" @change="onPriceChange" />
       </el-form-item>
-      <el-form-item label="机显总价 (¥)">
-        <el-input-number 
-          v-model="form.display_cost" 
-          :min="0" 
-          :precision="2" 
-          style="width: 100%" 
-          placeholder="机显金额（选填，可自动计算）"
-          @change="onDisplayCostChange"
-        />
+      <el-form-item label="机显总价">
+        <el-input-number v-model="form.display_cost" :min="0" :precision="2" style="width: 100%" @change="onDisplayCostChange" />
       </el-form-item>
-      
-      <!-- 实付金额 -->
-      <el-form-item label="实付金额 (¥)">
-        <el-input-number v-model="form.actual_cost" :min="0" :precision="2" style="width: 100%" placeholder="实际支付金额（优惠后）" />
+      <el-form-item label="实付金额">
+        <el-input-number v-model="form.actual_cost" :min="0" :precision="2" style="width: 100%" placeholder="优惠后金额（可选）" />
         <div class="hint">用于统计实际花费，不填则使用机显总价</div>
       </el-form-item>
-      
       <el-form-item label="是否加满">
         <el-switch v-model="form.is_full_tank" active-text="是" inactive-text="否" />
       </el-form-item>
       <el-form-item label="备注">
-        <el-input v-model="form.notes" type="textarea" rows="2" placeholder="备注（可选）" />
+        <el-input v-model="form.notes" type="textarea" :rows="2" placeholder="备注（可选）" />
       </el-form-item>
     </el-form>
     <template #footer>
@@ -73,7 +41,7 @@
 
 <script setup>
 import { ref, computed, watch } from 'vue'
-import axios from 'axios'
+import api from '../../../api.js'
 import { ElMessage, ElMessageBox } from 'element-plus'
 
 const props = defineProps(['visible', 'record'])
@@ -95,8 +63,8 @@ const form = ref({
   mileage: 0,
   fuel_amount: null,
   fuel_price: null,
-  display_cost: null,
-  actual_cost: null,
+  display_cost: null,  // 机显总价
+  actual_cost: null,   // 实付金额
   is_full_tank: true,
   notes: ''
 })
@@ -110,15 +78,15 @@ watch(() => props.record, (newRecord) => {
       mileage: newRecord.mileage,
       fuel_amount: newRecord.fuel_amount,
       fuel_price: newRecord.fuel_price,
-      display_cost: newRecord.total_cost, // 显示用
-      actual_cost: newRecord.total_cost,  // 实付金额默认等于总价
+      display_cost: newRecord.display_cost,  // 机显总价
+      actual_cost: newRecord.actual_cost,    // 实付金额
       is_full_tank: newRecord.is_full_tank,
       notes: newRecord.notes || ''
     }
   }
 }, { immediate: true })
 
-// 单价变化：如果加油量有值，重新计算总价
+// 单价变化：如果加油量有值，重新计算机显总价
 const onPriceChange = () => {
   if (form.value.fuel_price && form.value.fuel_amount) {
     form.value.display_cost = Math.round(form.value.fuel_price * form.value.fuel_amount * 100) / 100
@@ -134,11 +102,9 @@ const onAmountChange = () => {
   }
 }
 
-// 总价变化
+// 机显总价变化
 const onDisplayCostChange = () => {
-  if (form.value.display_cost && form.value.fuel_price) {
-    form.value.fuel_amount = Math.round(form.value.display_cost / form.value.fuel_price * 100) / 100
-  } else if (form.value.display_cost && form.value.fuel_amount) {
+  if (form.value.display_cost && form.value.fuel_amount) {
     form.value.fuel_price = Math.round(form.value.display_cost / form.value.fuel_amount * 100) / 100
   }
 }
@@ -153,35 +119,30 @@ const submit = async () => {
     return
   }
   
-  // 检查单价和加油量
-  const hasPrice = form.value.fuel_price !== null && form.value.fuel_price > 0
+  // 检查必填字段
   const hasAmount = form.value.fuel_amount !== null && form.value.fuel_amount > 0
+  const hasDisplayCost = form.value.display_cost !== null && form.value.display_cost > 0
   
-  if (!hasPrice || !hasAmount) {
-    ElMessage.warning('请填写单价和加油量')
+  if (!hasAmount || !hasDisplayCost) {
+    ElMessage.warning('请填写加油量和机显总价')
     return
   }
   
-  // 如果机显总价为空，自动计算
-  let displayCost = form.value.display_cost
-  if (!displayCost || displayCost <= 0) {
-    displayCost = Math.round(form.value.fuel_price * form.value.fuel_amount * 100) / 100
-  }
-  
-  // 实付金额默认使用机显总价
-  const totalCost = form.value.actual_cost !== null && form.value.actual_cost > 0 
+  // 如果实付金额为空，使用机显总价
+  const actualCost = form.value.actual_cost !== null && form.value.actual_cost > 0 
     ? form.value.actual_cost 
-    : displayCost
+    : form.value.display_cost
   
   loading.value = true
   try {
-    await axios.post(`${API_BASE}/fuel-records/update`, {
+    await api.post(`${API_BASE}/fuel-records/update`, {
       id: form.value.id,
       date: form.value.date,
       mileage: form.value.mileage,
       fuel_amount: form.value.fuel_amount,
       fuel_price: form.value.fuel_price,
-      total_cost: totalCost,
+      display_cost: form.value.display_cost,  // 机显总价
+      actual_cost: actualCost,                 // 实付金额
       is_full_tank: form.value.is_full_tank,
       notes: form.value.notes
     })
@@ -190,6 +151,7 @@ const submit = async () => {
     emit('success')
   } catch (error) {
     ElMessage.error('保存失败')
+    console.error(error)
   } finally {
     loading.value = false
   }
@@ -206,7 +168,7 @@ const deleteRecord = async () => {
     })
     
     deleting.value = true
-    await axios.post(`${API_BASE}/fuel-records/delete`, {
+    await api.post(`${API_BASE}/fuel-records/delete`, {
       id: form.value.id
     })
     ElMessage.success('删除成功')
diff --git a/web/src/components/dialogs/vehicle/AddVehicleDialog.vue b/web/src/components/dialogs/vehicle/AddVehicleDialog.vue
index 58f78ba..81938c5 100644
--- a/web/src/components/dialogs/vehicle/AddVehicleDialog.vue
+++ b/web/src/components/dialogs/vehicle/AddVehicleDialog.vue
@@ -30,7 +30,7 @@
 
 <script setup>
 import { ref, computed } from 'vue'
-import axios from 'axios'
+import api from '../../../api.js'
 import { ElMessage } from 'element-plus'
 
 const props = defineProps(['visible'])
@@ -58,7 +58,7 @@ const submit = async () => {
   
   loading.value = true
   try {
-    await axios.post(`${API_BASE}/vehicles/create`, {
+    await api.post(`${API_BASE}/vehicles/create`, {
       name: form.value.name,
       purchase_date: form.value.purchase_date,
       initial_mileage: form.value.initial_mileage
diff --git a/web/src/components/dialogs/vehicle/EditVehicleDialog.vue b/web/src/components/dialogs/vehicle/EditVehicleDialog.vue
index b8c1c9b..2c7c078 100644
--- a/web/src/components/dialogs/vehicle/EditVehicleDialog.vue
+++ b/web/src/components/dialogs/vehicle/EditVehicleDialog.vue
@@ -30,7 +30,7 @@
 
 <script setup>
 import { ref, computed, watch } from 'vue'
-import axios from 'axios'
+import api from '../../../api.js'
 import { ElMessage } from 'element-plus'
 
 const props = defineProps(['visible', 'vehicle'])
@@ -71,7 +71,7 @@ const submit = async () => {
   
   loading.value = true
   try {
-    await axios.post(`${API_BASE}/vehicles/update`, {
+    await api.post(`${API_BASE}/vehicles/update`, {
       id: form.value.id,
       name: form.value.name,
       purchase_date: form.value.purchase_date,
diff --git a/web/src/components/panels/CostRecordsPanel.vue b/web/src/components/panels/CostRecordsPanel.vue
index 9f17096..fa9df8b 100644
--- a/web/src/components/panels/CostRecordsPanel.vue
+++ b/web/src/components/panels/CostRecordsPanel.vue
@@ -34,7 +34,7 @@
                 <el-table
                     :data="filteredRecords"
                     style="width: 100%"
-                    v-loading="loading"
+                    v-loading="isLoading"
                     size="small"
                     highlight-current-row
                     @row-click="editRecord"
@@ -49,7 +49,7 @@
                                 </span>
                                 <template #dropdown>
                                     <el-dropdown-menu>
-                                        <el-dropdown-item v-for="type in allTypes" :key="type">
+                                        <el-dropdown-item v-for="type in COST_TYPES" :key="type">
                                             <el-checkbox v-model="typeFilters[type]">{{ type }}</el-checkbox>
                                         </el-dropdown-item>
                                         <el-dropdown-item divided @click="clearTypeFilter">
@@ -78,22 +78,30 @@
                 :page-sizes="[10, 20, 50]"
                 :total="filteredTotal"
                 layout="total, prev, pager, next"
-                @current-change="handlePageChange"
                 style="margin-top: 15px; padding: 0 10px 10px"
                 size="small"
             />
         </el-card>
 
-        <EditCostDialog v-model:visible="showEditDialog" :record="selectedRecord" @success="loadRecords" />
+        <EditCostDialog v-model:visible="showEditDialog" :record="selectedRecord" @success="onRecordUpdated" />
     </div>
 </template>
 
 <script setup>
-import { ref, watch, onMounted, computed } from "vue";
-import axios from "axios";
-import { ElMessage } from "element-plus";
+import { ref, computed, onMounted, watch } from "vue";
 import { ArrowDown } from '@element-plus/icons-vue'
 import EditCostDialog from "../dialogs/cost/EditCostDialog.vue";
+import { useVehicleData } from "../../composables/useVehicleData.js";
+import { 
+    COST_TYPES, 
+    COST_TYPE_COLORS 
+} from "../../constants/index.js";
+import {
+    calculateCostInstallments,
+    calculateMonthlyStats,
+    filterRecordsByTimeRange,
+    getRecentMonths
+} from "../../utils/calculations.js";
 
 const props = defineProps({
     vehicleId: Number,
@@ -107,14 +115,17 @@ const props = defineProps({
     }
 });
 
-defineEmits(["add-cost"]);
+const emit = defineEmits(["add-cost"]);
 
-const API_BASE = "https://api.yuany3721.site/carcost";
+// 使用缓存层
+const { 
+  fuelRecords: allFuelRecords, 
+  costRecords: allCostRecords,
+  isLoading,
+  refreshVehicleData,
+  state
+} = useVehicleData();
 
-const loading = ref(false);
-const allRecords = ref([]);
-const fuelRecords = ref([]); // 加油记录，用于月度油费统计
-const total = ref(0);
 const currentPage = ref(1);
 const pageSize = ref(15);
 const showEditDialog = ref(false);
@@ -125,21 +136,20 @@ const costTimeRange = ref('past_year'); // 'past_year' | 'all'
 
 // 类型筛选
 const typeFilters = ref({});
-const allTypes = ["保养", "维修", "保险", "停车", "过路费", "其他", "油费"];
 
 // 初始化类型筛选
-allTypes.forEach(type => {
+COST_TYPES.forEach(type => {
     typeFilters.value[type] = false;
 });
 
 // 监听类型筛选变化
 watch(typeFilters.value, () => {
-    selectedTypes.value = allTypes.filter(type => typeFilters.value[type]);
+    selectedTypes.value = COST_TYPES.filter(type => typeFilters.value[type]);
     currentPage.value = 1;
 }, { deep: true });
 
 const clearTypeFilter = () => {
-    allTypes.forEach(type => {
+    COST_TYPES.forEach(type => {
         typeFilters.value[type] = false;
     });
     selectedTypes.value = [];
@@ -149,9 +159,10 @@ const clearTypeFilter = () => {
 const updateIsMobile = () => {
     isMobile.value = window.innerWidth <= 768;
 };
-window.addEventListener("resize", updateIsMobile);
+
 onMounted(() => {
     updateIsMobile();
+    window.addEventListener("resize", updateIsMobile);
 });
 
 const typeTagMap = {
@@ -160,98 +171,55 @@ const typeTagMap = {
     保险: "danger",
     停车: "info",
     过路费: "primary",
+    洗车: "info",
+    违章: "danger",
     其他: "info",
 };
 
-const typeColorMap = {
-    保养: "#67c23a",    // 绿色
-    维修: "#e6a23c",    // 橙色
-    保险: "#f56c6c",    // 红色
-    停车: "#909399",    // 灰色
-    过路费: "#9a60b4",  // 紫色（改为紫色，区别于油费）
-    其他: "#fc8452",    // 珊瑚色（改为橙色系的珊瑚色）
-    油费: "#409eff",    // 蓝色
-};
-
 const getTypeTag = (type) => typeTagMap[type] || "";
 
-// 获取N个月前的日期
-const getMonthsAgo = (months) => {
-    const now = new Date();
-    return new Date(now.getFullYear(), now.getMonth() - months, now.getDate());
-};
+// 筛选后的加油记录（油费直接按日期筛选）
+const fuelRecords = computed(() => {
+    if (!state.vehicleId || state.vehicleId !== props.vehicleId) return [];
+    return filterRecordsByTimeRange(costTimeRange.value, allFuelRecords.value);
+});
 
-// 计算费用分摊明细表
+// 费用分摊明细 - 使用全部费用记录生成分摊，不按日期筛选
+// 因为分摊费用可能跨越时间范围（例如去年买的保险今年还在分摊）
 const costInstallments = computed(() => {
-    const installments = []
-    
-    allRecords.value.forEach(cost => {
-        if (cost.is_installment && cost.installment_months > 1) {
-            // 分摊费用，生成多条记录
-            const monthlyAmount = cost.amount / cost.installment_months
-            const startMonth = cost.date.slice(0, 7)
-            
-            for (let i = 0; i < cost.installment_months; i++) {
-                const month = getNextMonth(startMonth, i)
-                installments.push({
-                    month: month,
-                    type: cost.type,
-                    amount: monthlyAmount,
-                    originalCostId: cost.id
-                })
-            }
-        } else {
-            // 一次性费用，生成一条记录
-            installments.push({
-                month: cost.date.slice(0, 7),
-                type: cost.type,
-                amount: cost.amount,
-                originalCostId: cost.id
-            })
-        }
-    })
-    
-    return installments
-})
+    if (!state.vehicleId || state.vehicleId !== props.vehicleId) return [];
+    return calculateCostInstallments(allCostRecords.value);
+});
+
+// 筛选后的费用分摊（根据目标月份）
+const filteredCostInstallments = computed(() => {
+    if (!targetMonths.value) return costInstallments.value;
+    return costInstallments.value.filter(item => targetMonths.value.includes(item.month));
+});
+
+// 计算月度统计
+const monthlyStats = computed(() => {
+    return calculateMonthlyStats(fuelRecords.value, filteredCostInstallments.value);
+});
+
+// 获取时间范围对应的月份列表
+const targetMonths = computed(() => {
+    if (costTimeRange.value === 'past_year') {
+        return getRecentMonths(isMobile.value ? 6 : 12);
+    }
+    return null;
+});
 
 // 费用类型分布 - 环形图
 const pieChartOption = computed(() => {
-    if (!allRecords.value.length && !fuelRecords.value.length) return null;
-
-    // 计算时间范围
-    const now = new Date();
-    const currentMonth = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}`;
-    
-    // 确定筛选的月份范围
-    let targetMonths = [];
-    if (costTimeRange.value === 'past_6months') {
-        // 近6个月：从当前月往前推5个月（共6个月）
-        for (let i = 5; i >= 0; i--) {
-            const d = new Date(now.getFullYear(), now.getMonth() - i, 1);
-            targetMonths.push(`${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`);
-        }
-    } else if (costTimeRange.value === 'past_year') {
-        // 近一年：从当前月往前推11个月（共12个月）
-        for (let i = 11; i >= 0; i--) {
-            const d = new Date(now.getFullYear(), now.getMonth() - i, 1);
-            targetMonths.push(`${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`);
-        }
-    }
-    // "全部"模式下不过滤月份
-    
-    // 筛选油费记录
-    let filteredFuelRecords = fuelRecords.value;
-    if (costTimeRange.value !== 'all') {
-        const cutoffDate = getMonthsAgo(costTimeRange.value === 'past_6months' ? 6 : 12).toISOString().slice(0, 10);
-        filteredFuelRecords = fuelRecords.value.filter(r => r.date >= cutoffDate);
-    }
+    if (!allCostRecords.value.length && !fuelRecords.value.length) return null;
 
     const typeData = {};
     let totalAmount = 0;
     
     // 从分摊明细表中统计费用
     costInstallments.value.forEach(item => {
-        if (costTimeRange.value === 'all' || targetMonths.includes(item.month)) {
+        if (!targetMonths.value || targetMonths.value.includes(item.month)) {
             typeData[item.type] = (typeData[item.type] || 0) + item.amount;
             totalAmount += item.amount;
         }
@@ -259,8 +227,8 @@ const pieChartOption = computed(() => {
     
     // 统计油费
     let totalFuelCost = 0;
-    filteredFuelRecords.forEach((r) => {
-        totalFuelCost += r.total_cost;
+    fuelRecords.value.forEach((r) => {
+        totalFuelCost += r.actual_cost;
     });
     if (totalFuelCost > 0) {
         typeData['油费'] = totalFuelCost;
@@ -296,7 +264,10 @@ const pieChartOption = computed(() => {
                     scale: true,
                     scaleSize: 5
                 },
-                data: data.map((d) => ({ ...d, itemStyle: { color: typeColorMap[d.name] || "#909399" } })),
+                data: data.map((d) => ({ 
+                    ...d, 
+                    itemStyle: { color: COST_TYPE_COLORS[d.name] || "#909399" } 
+                })),
             },
         ],
         title: {
@@ -313,84 +284,35 @@ const pieChartOption = computed(() => {
     };
 });
 
-// 辅助函数：获取下一个月
-const getNextMonth = (month) => {
-    const [year, mon] = month.split("-").map(Number);
-    if (mon === 12) return `${year + 1}-01`;
-    return `${year}-${String(mon + 1).padStart(2, "0")}`;
-};
-
-// 辅助函数：获取前N个月
-const getPrevMonths = (month, n) => {
-    const [year, mon] = month.split("-").map(Number);
-    let result = [];
-    for (let i = 0; i < n; i++) {
-        let targetMon = mon - i;
-        let targetYear = year;
-        while (targetMon <= 0) {
-            targetMon += 12;
-            targetYear--;
-        }
-        result.push(`${targetYear}-${String(targetMon).padStart(2, "0")}`);
-    }
-    return result.reverse();
-};
-
 // 月度费用统计
 const monthlyChartOption = computed(() => {
-    if (!allRecords.value.length && !fuelRecords.value.length) return null;
+    if (!costRecords.value.length && !fuelRecords.value.length) return null;
 
-    // 获取当前月份
-    const now = new Date();
-    const currentMonth = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}`;
-    
     // 根据设备和时间范围决定显示月份
-    let targetMonths;
+    let sortedMonths;
     if (costTimeRange.value === 'past_year') {
-        const monthsToShow = isMobile.value ? 6 : 12;
-        targetMonths = getPrevMonths(currentMonth, monthsToShow);
+        sortedMonths = targetMonths.value;
     } else {
         // 全部时间：从分摊明细表中收集所有月份
         const allMonths = new Set();
         costInstallments.value.forEach(item => allMonths.add(item.month));
         fuelRecords.value.forEach(r => allMonths.add(r.date.slice(0, 7)));
-        targetMonths = Array.from(allMonths).sort();
+        sortedMonths = Array.from(allMonths).sort();
     }
     
-    if (targetMonths.length === 0) return null;
+    if (!sortedMonths || sortedMonths.length === 0) return null;
 
-    // 初始化月度数据
-    const monthlyData = {};
-    targetMonths.forEach((month) => {
-        monthlyData[month] = {};
-        allTypes.forEach((type) => {
-            monthlyData[month][type] = 0;
-        });
-    });
-
-    // 使用分摊明细表统计费用（只统计目标月份）
-    costInstallments.value.forEach(item => {
-        if (monthlyData[item.month]) {
-            monthlyData[item.month][item.type] += item.amount;
-        }
-    });
-
-    // 添加油费数据
-    fuelRecords.value.forEach((r) => {
-        const month = r.date.slice(0, 7);
-        if (monthlyData[month]) {
-            monthlyData[month]["油费"] += r.total_cost;
-        }
-    });
+    const monthlyData = monthlyStats.value;
+    const allTypes = [...COST_TYPES, '油费'];
 
     // 确定实际存在的类型（包括油费）
     const existingTypes = allTypes.filter(type => {
-        return sortedMonths.some(month => monthlyData[month][type] > 0);
+        return sortedMonths.some(month => monthlyData[month] && monthlyData[month][type] > 0);
     });
 
     // 计算每月总费用用于显示标签
     const monthlyTotals = sortedMonths.map(month => {
-        const total = existingTypes.reduce((sum, type) => sum + monthlyData[month][type], 0);
+        const total = existingTypes.reduce((sum, type) => sum + (monthlyData[month]?.[type] || 0), 0);
         return total.toFixed(0);
     });
 
@@ -416,7 +338,13 @@ const monthlyChartOption = computed(() => {
                 return html;
             },
         },
-        legend: { top: "0%", textStyle: { fontSize: 9 }, itemWidth: 10, itemHeight: 10 },
+        legend: { 
+            top: "0%", 
+            textStyle: { fontSize: 9 }, 
+            itemWidth: 10, 
+            itemHeight: 10,
+            data: existingTypes
+        },
         xAxis: {
             type: "category",
             data: sortedMonths.map((m) => m.slice(5)),
@@ -425,30 +353,42 @@ const monthlyChartOption = computed(() => {
             axisTick: { show: false }
         },
         yAxis: { type: "value", show: false },
-        series: existingTypes.map((type, index) => ({
-            name: type,
-            type: "bar",
-            stack: "total",
-            data: sortedMonths.map((month) => parseFloat(monthlyData[month][type].toFixed(0))),
-            itemStyle: { 
-                color: typeColorMap[type] || "#909399",
-                borderRadius: index === existingTypes.length - 1 ? [4, 4, 0, 0] : [0, 0, 0, 0]
-            },
-            label: index === existingTypes.length - 1 ? {
-                show: true,
-                position: 'top',
-                fontSize: 9,
-                formatter: function(params) {
-                    return monthlyTotals[params.dataIndex];
+        series: [
+            ...existingTypes.map((type, index) => ({
+                name: type,
+                type: "bar",
+                stack: "total",
+                data: sortedMonths.map((month) => parseFloat((monthlyData[month]?.[type] || 0).toFixed(0))),
+                itemStyle: { 
+                    color: COST_TYPE_COLORS[type] || "#909399"
+                }
+            })),
+            {
+                name: "总计",
+                type: "bar",
+                stack: "total",
+                data: sortedMonths.map(() => 0),
+                label: {
+                    show: true,
+                    position: 'top',
+                    fontSize: 9,
+                    formatter: function(params) {
+                        return monthlyTotals[params.dataIndex];
+                    },
+                    color: '#606266'
                 },
-                color: '#606266'
-            } : undefined
-        })),
+                itemStyle: { color: 'transparent' },
+                tooltip: { show: false },
+                showInLegend: false
+            }
+        ],
     };
 });
 
 const filteredRecords = computed(() => {
-    let result = allRecords.value;
+    if (!state.vehicleId || state.vehicleId !== props.vehicleId) return [];
+    
+    let result = allCostRecords.value;
     if (selectedTypes.value.length > 0) {
         result = result.filter((r) => selectedTypes.value.includes(r.type));
     }
@@ -458,61 +398,29 @@ const filteredRecords = computed(() => {
 });
 
 const filteredTotal = computed(() => {
+    if (!state.vehicleId || state.vehicleId !== props.vehicleId) return 0;
+    
     if (selectedTypes.value.length > 0) {
-        return allRecords.value.filter((r) => selectedTypes.value.includes(r.type)).length;
+        return allCostRecords.value.filter((r) => selectedTypes.value.includes(r.type)).length;
     }
-    return total.value;
+    return allCostRecords.value.length;
 });
 
-const toggleType = (type) => {
-    const index = selectedTypes.value.indexOf(type);
-    if (index > -1) selectedTypes.value.splice(index, 1);
-    else selectedTypes.value.push(type);
-    currentPage.value = 1;
-};
-
-const clearFilter = () => {
-    selectedTypes.value = [];
-    currentPage.value = 1;
-};
-
 const editRecord = (record) => {
     selectedRecord.value = record;
     showEditDialog.value = true;
 };
 
-const handlePageChange = () => {
-    // 分页切换时不需要重新加载数据
-};
-
-const loadRecords = async () => {
-    if (!props.vehicleId) return;
-
-    loading.value = true;
-    try {
-        // 加载费用记录
-        const costRes = await axios.get(`${API_BASE}/costs/list?vehicle_id=${props.vehicleId}&limit=1000`);
-        allRecords.value = costRes.data || [];
-        total.value = allRecords.value.length;
-
-        // 加载加油记录（用于月度油费统计）
-        const fuelRes = await axios.get(`${API_BASE}/fuel-records/list?vehicle_id=${props.vehicleId}&limit=1000`);
-        fuelRecords.value = fuelRes.data || [];
-    } catch (error) {
-        ElMessage.error("加载费用记录失败");
-    } finally {
-        loading.value = false;
+const onRecordUpdated = async () => {
+    if (props.vehicleId) {
+        await refreshVehicleData(props.vehicleId);
     }
 };
 
+// 监听车辆变化，重置页码
 watch(() => props.vehicleId, () => {
     currentPage.value = 1;
-    loadRecords();
 }, { immediate: true });
-
-onMounted(() => {
-    loadRecords();
-});
 </script>
 
 <style scoped>
diff --git a/web/src/components/panels/FuelRecordsPanel.vue b/web/src/components/panels/FuelRecordsPanel.vue
index 4be4f08..92d6d28 100644
--- a/web/src/components/panels/FuelRecordsPanel.vue
+++ b/web/src/components/panels/FuelRecordsPanel.vue
@@ -28,9 +28,9 @@
       <!-- 记录列表 -->
       <div v-if="showList" class="table-container">
         <el-table 
-          :data="records" 
+          :data="paginatedRecords" 
           style="width: 100%" 
-          v-loading="loading" 
+          v-loading="isLoading" 
           size="small"
           highlight-current-row
           @row-click="editRecord"
@@ -38,9 +38,9 @@
           <el-table-column prop="date" label="日期" width="100" />
           <el-table-column prop="mileage" label="里程" width="80" />
           <el-table-column prop="fuel_amount" label="油量" width="70" />
-          <el-table-column prop="total_cost" label="金额" width="80">
+          <el-table-column prop="actual_cost" label="金额" width="80">
             <template #default="scope">
-              ¥{{ scope.row.total_cost?.toFixed(0) }}
+              ¥{{ scope.row.actual_cost?.toFixed(0) }}
             </template>
           </el-table-column>
           <el-table-column prop="fuel_consumption" label="油耗" width="70">
@@ -57,9 +57,8 @@
         v-model:current-page="currentPage"
         v-model:page-size="pageSize"
         :page-sizes="[10, 20, 50]"
-        :total="total"
+        :total="filteredRecords.length"
         layout="total, prev, pager, next"
-        @current-change="loadRecords"
         style="margin-top: 15px; padding: 0 10px 10px;"
         size="small"
       />
@@ -69,16 +68,16 @@
     <EditFuelDialog 
       v-model:visible="showEditDialog" 
       :record="selectedRecord"
-      @success="loadRecords"
+      @success="onRecordUpdated"
     />
   </div>
 </template>
 
 <script setup>
-import { ref, watch, onMounted, computed } from 'vue'
-import axios from 'axios'
-import { ElMessage } from 'element-plus'
+import { ref, computed, watch } from 'vue'
 import EditFuelDialog from '../dialogs/fuel/EditFuelDialog.vue'
+import { useVehicleData } from '../../composables/useVehicleData.js'
+import { filterRecordsByTimeRange } from '../../utils/calculations.js'
 
 const props = defineProps({
   vehicleId: Number,
@@ -92,20 +91,30 @@ const props = defineProps({
   }
 })
 
-defineEmits(['add-fuel'])
+const emit = defineEmits(['add-fuel'])
 
-const API_BASE = 'https://api.yuany3721.site/carcost'
+// 使用缓存层
+const { fuelRecords: allFuelRecords, isLoading, refreshVehicleData, state } = useVehicleData()
 
-const loading = ref(false)
-const allRecords = ref([])
-const records = ref([])
-const total = ref(0)
 const currentPage = ref(1)
 const pageSize = ref(15)
 const showEditDialog = ref(false)
 const selectedRecord = ref(null)
 const fuelTimeRange = ref('past_year') // 'past_year' | 'all'
 
+// 筛选后的记录
+const filteredRecords = computed(() => {
+  if (!state.vehicleId || state.vehicleId !== props.vehicleId) return []
+  return filterRecordsByTimeRange(fuelTimeRange.value, allFuelRecords.value)
+})
+
+// 分页后的记录
+const paginatedRecords = computed(() => {
+  const start = (currentPage.value - 1) * pageSize.value
+  const end = start + pageSize.value
+  return filteredRecords.value.slice(start, end)
+})
+
 // 获取一年前的日期
 const getOneYearAgo = () => {
   const now = new Date()
@@ -116,41 +125,25 @@ const getOneYearAgo = () => {
 const getFilteredMonths = () => {
   // 计算月度油费
   const monthlyData = {}
-  allRecords.value.forEach(r => {
+  filteredRecords.value.forEach(r => {
     const month = r.date.slice(0, 7)
-    monthlyData[month] = (monthlyData[month] || 0) + r.total_cost
+    monthlyData[month] = (monthlyData[month] || 0) + r.actual_cost
   })
   
   // 获取所有月份（排序）
   let sortedMonths = Object.keys(monthlyData).sort()
   
-  // 根据时间范围筛选月份
-  if (fuelTimeRange.value === 'past_year') {
-    const oneYearAgo = getOneYearAgo()
-    const cutoffMonth = `${oneYearAgo.getFullYear()}-${String(oneYearAgo.getMonth() + 1).padStart(2, '0')}`
-    sortedMonths = sortedMonths.filter(m => m >= cutoffMonth)
-  }
-  
   return { sortedMonths, monthlyData }
 }
 
 // 油耗趋势图 - X轴为里程数
 const consumptionChartOption = computed(() => {
-  if (!allRecords.value.length) return null
+  const records = filteredRecords.value.filter(r => r.fuel_consumption)
   
-  // 根据时间范围筛选记录
-  let filteredRecords = allRecords.value.filter(r => r.fuel_consumption)
-  
-  if (fuelTimeRange.value === 'past_year') {
-    const oneYearAgo = getOneYearAgo()
-    const cutoffDate = oneYearAgo.toISOString().slice(0, 10)
-    filteredRecords = filteredRecords.filter(r => r.date >= cutoffDate)
-  }
-  
-  if (filteredRecords.length === 0) return null
+  if (records.length === 0) return null
   
   // 准备油耗数据：按里程排序，用于连线
-  const fuelConsumptionData = filteredRecords
+  const fuelConsumptionData = records
     .sort((a, b) => a.mileage - b.mileage)
     .map(r => ({
       value: [r.mileage, r.fuel_consumption],
@@ -159,8 +152,6 @@ const consumptionChartOption = computed(() => {
       fuelAmount: r.fuel_amount
     }))
   
-  if (fuelConsumptionData.length === 0) return null
-  
   // 计算X轴范围，增加边距
   const mileages = fuelConsumptionData.map(d => d.value[0])
   const minMileage = Math.min(...mileages)
@@ -197,9 +188,7 @@ const consumptionChartOption = computed(() => {
       min: Math.floor(minMileage - padding),
       max: Math.ceil(maxMileage + padding),
       nameTextStyle: { fontSize: 9 },
-      axisLabel: { 
-        fontSize: 9
-      }
+      axisLabel: { fontSize: 9 }
     },
     yAxis: {
       type: 'value',
@@ -253,7 +242,7 @@ const consumptionChartOption = computed(() => {
 
 // 月度油费图
 const monthlyCostChartOption = computed(() => {
-  if (!allRecords.value.length) return null
+  if (!filteredRecords.value.length) return null
   
   const { sortedMonths, monthlyData } = getFilteredMonths()
   if (sortedMonths.length < 1) return null
@@ -303,33 +292,16 @@ const editRecord = (record) => {
   showEditDialog.value = true
 }
 
-const loadRecords = async () => {
-  if (!props.vehicleId) return
-  
-  loading.value = true
-  try {
-    const res = await axios.get(`${API_BASE}/fuel-records/list?vehicle_id=${props.vehicleId}&limit=1000`)
-    allRecords.value = res.data || []
-    total.value = allRecords.value.length
-    
-    const start = (currentPage.value - 1) * pageSize.value
-    const end = start + pageSize.value
-    records.value = allRecords.value.slice(start, end)
-  } catch (error) {
-    ElMessage.error('加载加油记录失败')
-  } finally {
-    loading.value = false
+const onRecordUpdated = async () => {
+  if (props.vehicleId) {
+    await refreshVehicleData(props.vehicleId)
   }
 }
 
+// 监听车辆变化，重置页码
 watch(() => props.vehicleId, () => {
   currentPage.value = 1
-  loadRecords()
 }, { immediate: true })
-
-onMounted(() => {
-  loadRecords()
-})
 </script>
 
 <style scoped>
@@ -383,4 +355,4 @@ onMounted(() => {
   flex: 1;
   overflow: auto;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/web/src/composables/useAuth.js b/web/src/composables/useAuth.js
new file mode 100644
index 0000000..ee71403
--- /dev/null
+++ b/web/src/composables/useAuth.js
@@ -0,0 +1,35 @@
+import { UserManager, WebStorageStateStore } from 'oidc-client-ts'
+
+// Authentik OIDC 配置
+const oidcConfig = {
+  authority: 'https://auth.yuany3721.site/application/o/car-cost/',
+  client_id: '27UljrOp2LfCg3fjEo1n8vOiRyCFzqEcnBFiUK59',
+  redirect_uri: window.location.origin + '/auth/callback',
+  response_type: 'code',
+  scope: 'openid profile email',
+  userStore: new WebStorageStateStore({ 
+    store: window.localStorage,
+    prefix: 'oidc.car-cost.'
+  }),
+  metadata: {
+    issuer: 'https://auth.yuany3721.site/application/o/car-cost/',
+    authorization_endpoint: 'https://auth.yuany3721.site/application/o/authorize/',
+    token_endpoint: 'https://auth.yuany3721.site/application/o/token/',
+    userinfo_endpoint: 'https://auth.yuany3721.site/application/o/userinfo/',
+    end_session_endpoint: 'https://auth.yuany3721.site/application/o/car-cost/end-session/',
+    jwks_uri: 'https://auth.yuany3721.site/application/o/car-cost/jwks/',
+  }
+}
+
+// 创建并导出 UserManager 实例
+export const userManager = new UserManager(oidcConfig)
+
+// 清理旧的存储（在跳转登录前调用）
+export function cleanupOldStorage() {
+  const keys = Object.keys(localStorage)
+  keys.forEach(key => {
+    if (key.startsWith('oidc.') && !key.includes('car-cost')) {
+      localStorage.removeItem(key)
+    }
+  })
+}
diff --git a/web/src/composables/useVehicleData.js b/web/src/composables/useVehicleData.js
new file mode 100644
index 0000000..d7206f7
--- /dev/null
+++ b/web/src/composables/useVehicleData.js
@@ -0,0 +1,147 @@
+import { reactive, computed } from 'vue'
+import api from '../api.js'
+import { ElMessage } from 'element-plus'
+import {
+  calculateFuelConsumption,
+  calculateVehicleStats,
+  calculateCostInstallments,
+  calculateAvgDailyKm
+} from '../utils/calculations.js'
+
+const API_BASE = 'https://api.yuany3721.site/carcost'
+
+// 使用 reactive 创建全局状态（比 ref 更适合对象）
+const state = reactive({
+  vehicleId: null,
+  vehicleInfo: null,
+  fuelRecords: [],
+  costRecords: [],
+  isLoading: false,
+  lastLoaded: null
+})
+
+/**
+ * 加载车辆数据
+ */
+async function loadVehicleData(vehicleId, vehicleInfo = null) {
+  if (!vehicleId) return false
+  
+  // 如果已有该车辆的数据，直接返回
+  if (state.vehicleId === vehicleId && state.lastLoaded) {
+    return true
+  }
+
+  state.isLoading = true
+  
+  try {
+    const [fuelRes, costRes] = await Promise.all([
+      api.get(`/fuel-records/list?vehicle_id=${vehicleId}`),
+      api.get(`/costs/list?vehicle_id=${vehicleId}`)
+    ])
+
+    // 为每条记录计算油耗
+    const fuelRecords = fuelRes.data || []
+    const fuelRecordsWithConsumption = fuelRecords.map(record => ({
+      ...record,
+      fuel_consumption: calculateFuelConsumption(fuelRecords, record)
+    }))
+
+    // 更新状态
+    state.vehicleId = vehicleId
+    state.vehicleInfo = vehicleInfo
+    state.fuelRecords = fuelRecordsWithConsumption
+    state.costRecords = costRes.data || []
+    state.lastLoaded = Date.now()
+
+    return true
+  } catch (error) {
+    console.error('加载车辆数据失败:', error)
+    ElMessage.error('加载数据失败')
+    return false
+  } finally {
+    state.isLoading = false
+  }
+}
+
+/**
+ * 刷新数据
+ */
+async function refreshVehicleData(vehicleId, vehicleInfo = null) {
+  state.lastLoaded = null
+  return await loadVehicleData(vehicleId, vehicleInfo)
+}
+
+/**
+ * useVehicleData Composable
+ */
+export function useVehicleData() {
+  // 统计数据
+  const stats = computed(() => {
+    if (!state.vehicleInfo) {
+      return {
+        total_mileage: 0,
+        total_fuel_cost: 0,
+        total_fuel_amount: 0,
+        avg_fuel_consumption: null,
+        avg_daily_km: null
+      }
+    }
+    
+    const vehicleStats = calculateVehicleStats(
+      state.vehicleInfo,
+      state.fuelRecords
+    )
+    
+    const avgDailyKm = calculateAvgDailyKm(
+      vehicleStats.total_mileage,
+      state.fuelRecords
+    )
+    
+    return {
+      ...vehicleStats,
+      avg_daily_km: avgDailyKm
+    }
+  })
+
+  // 总费用
+  const totalCost = computed(() => {
+    const fuelCost = state.fuelRecords.reduce((sum, r) => sum + r.actual_cost, 0)
+    const otherCost = state.costRecords.reduce((sum, r) => sum + r.amount, 0)
+    return Math.round((fuelCost + otherCost) * 100) / 100
+  })
+
+  // 费用分摊
+  const costInstallments = computed(() => {
+    return calculateCostInstallments(state.costRecords)
+  })
+
+  // 月度油费
+  const monthlyFuelCost = computed(() => {
+    const monthlyData = {}
+    state.fuelRecords.forEach((r) => {
+      const month = r.date.slice(0, 7)
+      monthlyData[month] = (monthlyData[month] || 0) + r.actual_cost
+    })
+    return monthlyData
+  })
+
+  return {
+    // 状态（直接暴露响应式对象）
+    state,
+    
+    // 方法
+    loadVehicleData,
+    refreshVehicleData,
+    
+    // 计算属性
+    stats,
+    totalCost,
+    fuelRecords: computed(() => state.fuelRecords),
+    costRecords: computed(() => state.costRecords),
+    costInstallments,
+    monthlyFuelCost
+  }
+}
+
+// 导出状态供全局使用
+export { state, loadVehicleData, refreshVehicleData }
diff --git a/web/src/constants/index.js b/web/src/constants/index.js
new file mode 100644
index 0000000..9be2f1d
--- /dev/null
+++ b/web/src/constants/index.js
@@ -0,0 +1,15 @@
+// 费用类型常量
+export const COST_TYPES = ['保养', '维修', '保险', '停车', '过路费', '洗车', '违章', '其他']
+
+// 费用类型颜色映射
+export const COST_TYPE_COLORS = {
+  保养: '#67c23a',
+  维修: '#e6a23c',
+  保险: '#f56c6c',
+  停车: '#909399',
+  过路费: '#9a60b4',
+  洗车: '#409eff',
+  违章: '#ff6b6b',
+  其他: '#fc8452',
+  油费: '#409eff'
+}
diff --git a/web/src/main.js b/web/src/main.js
index f545dae..dceaaba 100644
--- a/web/src/main.js
+++ b/web/src/main.js
@@ -7,11 +7,13 @@ import { CanvasRenderer } from 'echarts/renderers'
 import { LineChart, BarChart, PieChart, ScatterChart } from 'echarts/charts'
 import { GridComponent, TooltipComponent, LegendComponent, TitleComponent, GraphicComponent, MarkPointComponent, MarkLineComponent } from 'echarts/components'
 import App from './App.vue'
+import router from './router.js'
 
 // 注册 ECharts 组件
 use([CanvasRenderer, LineChart, BarChart, PieChart, ScatterChart, GridComponent, TooltipComponent, LegendComponent, TitleComponent, GraphicComponent, MarkPointComponent, MarkLineComponent])
 
 const app = createApp(App)
 app.use(ElementPlus)
+app.use(router)
 app.component('v-chart', VueECharts)
 app.mount('#app')
diff --git a/web/src/router.js b/web/src/router.js
new file mode 100644
index 0000000..93b503e
--- /dev/null
+++ b/web/src/router.js
@@ -0,0 +1,65 @@
+import { createRouter, createWebHistory } from "vue-router";
+import Main from "./views/Main.vue";
+import { userManager } from "./composables/useAuth.js";
+import api, { setAuthToken } from "./api.js";
+
+const routes = [
+  { path: "/", component: Main },
+  { path: "/auth/callback", component: Main },
+];
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+});
+
+// 路由守卫 - 检查登录状态并处理回调
+router.beforeEach(async (to) => {
+  // 如果是回调路径，处理登录
+  if (to.path === "/auth/callback" && to.query.code) {
+    try {
+      const user = await userManager.signinRedirectCallback();
+
+      if (user?.access_token) {
+        setAuthToken(user.access_token);
+      }
+
+      // 跳转到首页
+      return { path: "/", replace: true };
+    } catch (err) {
+      console.error("[Router] 登录失败:", err);
+    }
+  }
+
+  // 检查登录状态
+  try {
+    const user = await userManager.getUser();
+
+    if (!user || user.expired) {
+      await userManager.signinRedirect();
+      return false;
+    }
+
+    setAuthToken(user.access_token);
+  } catch (error) {
+    console.error("[Router] 认证失败:", error);
+    await userManager.signinRedirect();
+    return false;
+  }
+
+  return true;
+});
+
+// Axios 拦截器 - 处理 401
+api.interceptors.response.use(
+  (response) => response,
+  async (error) => {
+    if (error.response?.status === 401) {
+      console.warn("[Axios] 401 Unauthorized");
+      await userManager.signinRedirect();
+    }
+    return Promise.reject(error);
+  }
+);
+
+export default router;
diff --git a/web/src/utils/calculations.js b/web/src/utils/calculations.js
new file mode 100644
index 0000000..9b99c52
--- /dev/null
+++ b/web/src/utils/calculations.js
@@ -0,0 +1,357 @@
+/**
+ * 计算单次油耗
+ * 
+ * 油耗计算逻辑（复制自后端）：
+ * 1. 找到上一条加满油的记录
+ * 2. 计算两次加满之间的里程差
+ * 3. 计算两次加满之间的累计加油量（包括中间未加满的记录）
+ * 4. 油耗 = (累计加油量 / 里程差) * 100
+ * 
+ * @param {Array} allRecords - 该车辆的所有加油记录（按日期降序排列）
+ * @param {Object} currentRecord - 当前要计算油耗的记录
+ * @returns {number|null} - 油耗(L/100km)或null
+ */
+export function calculateFuelConsumption(allRecords, currentRecord) {
+  if (!currentRecord.is_full_tank) {
+    return null
+  }
+
+  // 找到上一条加满油的记录（排除已删除，且在当前记录之前）
+  const prevRecord = findPrevFullTankRecord(allRecords, currentRecord)
+
+  if (!prevRecord) {
+    return null
+  }
+
+  const mileageDiff = currentRecord.mileage - prevRecord.mileage
+  if (mileageDiff <= 0) {
+    return null
+  }
+
+  // 计算两次加满之间的累计加油量（包括中间未加满的记录）
+  // 从上一次加满之后（不包括）到当前这次（包括）的所有加油记录
+  const intermediateRecords = allRecords.filter(r => {
+    // 只考虑同车、未删除的记录
+    if (r.vehicle_id !== currentRecord.vehicle_id || r.is_deleted) {
+      return false
+    }
+    // 里程在上一次加满之后到当前这次之间
+    return r.mileage > prevRecord.mileage && r.mileage <= currentRecord.mileage
+  })
+
+  const totalFuel = intermediateRecords.reduce((sum, r) => sum + r.fuel_amount, 0)
+
+  const fuelConsumption = (totalFuel / mileageDiff) * 100
+  return Math.round(fuelConsumption * 100) / 100
+}
+
+/**
+ * 查找上一条加满油的记录
+ * @param {Array} allRecords - 所有记录
+ * @param {Object} currentRecord - 当前记录
+ * @returns {Object|null}
+ */
+function findPrevFullTankRecord(allRecords, currentRecord) {
+  // 先找更早日期的加满记录
+  const prevByDate = allRecords.find(r => {
+    return r.vehicle_id === currentRecord.vehicle_id &&
+           !r.is_deleted &&
+           r.is_full_tank &&
+           r.date < currentRecord.date
+  })
+
+  if (prevByDate) {
+    // 找到同一天更早的加满记录（按里程排序找最近的）
+    const sameDateRecords = allRecords.filter(r => {
+      return r.vehicle_id === currentRecord.vehicle_id &&
+             !r.is_deleted &&
+             r.is_full_tank &&
+             r.date === currentRecord.date &&
+             r.mileage < currentRecord.mileage
+    })
+    
+    if (sameDateRecords.length > 0) {
+      // 按里程降序取第一个（最近的）
+      sameDateRecords.sort((a, b) => b.mileage - a.mileage)
+      return sameDateRecords[0]
+    }
+    
+    return prevByDate
+  }
+
+  // 如果没有更早日期，找同一天更早的记录
+  const sameDateEarlier = allRecords.filter(r => {
+    return r.vehicle_id === currentRecord.vehicle_id &&
+           !r.is_deleted &&
+           r.is_full_tank &&
+           r.date === currentRecord.date &&
+           r.mileage < currentRecord.mileage
+  })
+
+  if (sameDateEarlier.length > 0) {
+    sameDateEarlier.sort((a, b) => b.mileage - a.mileage)
+    return sameDateEarlier[0]
+  }
+
+  return null
+}
+
+/**
+ * 计算车辆统计数据
+ * @param {Object} vehicle - 车辆信息
+ * @param {Array} fuelRecords - 加油记录
+ * @returns {Object} 统计数据
+ */
+export function calculateVehicleStats(vehicle, fuelRecords) {
+  if (!vehicle || !fuelRecords || fuelRecords.length === 0) {
+    return {
+      total_mileage: 0,
+      total_fuel_cost: 0,
+      total_fuel_amount: 0,
+      avg_fuel_consumption: null
+    }
+  }
+
+  // 计算总里程
+  const latestMileage = Math.max(...fuelRecords.map(r => r.mileage))
+  const totalMileage = latestMileage - vehicle.initial_mileage
+
+  // 计算总油费（使用实付金额）
+  const totalFuelCost = fuelRecords.reduce((sum, r) => sum + r.actual_cost, 0)
+
+  // 计算总加油量（只算加满的记录）
+  const totalFuelAmount = fuelRecords
+    .filter(r => r.is_full_tank)
+    .reduce((sum, r) => sum + r.fuel_amount, 0)
+
+  // 计算平均油耗
+  let avgFuelConsumption = null
+  if (totalMileage > 0 && totalFuelAmount > 0) {
+    avgFuelConsumption = Math.round((totalFuelAmount / totalMileage) * 100 * 100) / 100
+  }
+
+  return {
+    total_mileage: totalMileage,
+    total_fuel_cost: Math.round(totalFuelCost * 100) / 100,
+    total_fuel_amount: Math.round(totalFuelAmount * 100) / 100,
+    avg_fuel_consumption: avgFuelConsumption
+  }
+}
+
+/**
+ * 计算费用分摊明细
+ * @param {Array} costRecords - 费用记录
+ * @returns {Array} 分摊后的费用明细
+ */
+export function calculateCostInstallments(costRecords) {
+  const installments = []
+
+  costRecords.forEach((cost) => {
+    if (cost.is_installment && cost.installment_months > 1) {
+      // 分摊费用，生成多条记录
+      const monthlyAmount = cost.amount / cost.installment_months
+      const startMonth = cost.date.slice(0, 7)
+
+      for (let i = 0; i < cost.installment_months; i++) {
+        const month = getNextMonth(startMonth, i)
+        installments.push({
+          month: month,
+          type: cost.type,
+          amount: monthlyAmount,
+          originalCostId: cost.id,
+        })
+      }
+    } else {
+      // 一次性费用，生成一条记录
+      installments.push({
+        month: cost.date.slice(0, 7),
+        type: cost.type,
+        amount: cost.amount,
+        originalCostId: cost.id,
+      })
+    }
+  })
+
+  return installments
+}
+
+/**
+ * 获取下N个月
+ * @param {string} month - 月份字符串 (YYYY-MM)
+ * @param {number} n - 月数
+ * @returns {string} 目标月份
+ */
+function getNextMonth(month, n) {
+  const [year, mon] = month.split('-').map(Number)
+  let targetYear = year
+  let targetMon = mon + n
+  while (targetMon > 12) {
+    targetMon -= 12
+    targetYear++
+  }
+  return `${targetYear}-${String(targetMon).padStart(2, '0')}`
+}
+
+/**
+ * 计算日均行程
+ * @param {number} totalMileage - 总里程
+ * @param {Array} fuelRecords - 加油记录（按日期升序排列）
+ * @returns {number|null}
+ */
+export function calculateAvgDailyKm(totalMileage, fuelRecords) {
+  if (totalMileage <= 0 || !fuelRecords || fuelRecords.length === 0) {
+    return null
+  }
+
+  // 按日期排序
+  const sortedRecords = [...fuelRecords].sort((a, b) => 
+    new Date(a.date) - new Date(b.date)
+  )
+
+  const firstDate = new Date(sortedRecords[0].date)
+  const lastDate = new Date(sortedRecords[sortedRecords.length - 1].date)
+  const days = (lastDate - firstDate) / (1000 * 60 * 60 * 24)
+
+  if (days <= 0) {
+    return null
+  }
+
+  return Math.round((totalMileage / days) * 10) / 10
+}
+
+/**
+ * 计算月度油费统计
+ * @param {Array} fuelRecords - 加油记录
+ * @returns {Object} 月度油费数据 { month: amount }
+ */
+export function calculateMonthlyFuelCost(fuelRecords) {
+  const monthlyData = {}
+  
+  fuelRecords.forEach((r) => {
+    const month = r.date.slice(0, 7)
+    monthlyData[month] = (monthlyData[month] || 0) + r.actual_cost
+  })
+
+  return monthlyData
+}
+
+/**
+ * 计算月度费用统计（包含油费）
+ * @param {Array} fuelRecords - 加油记录
+ * @param {Array} costInstallments - 费用分摊明细
+ * @returns {Object} 月度统计 { month: { type: amount } }
+ */
+export function calculateMonthlyStats(fuelRecords, costInstallments) {
+  const monthlyData = {}
+  const allTypes = ['保养', '维修', '保险', '停车', '过路费', '洗车', '违章', '其他', '油费']
+
+  // 收集所有月份
+  const allMonthsSet = new Set()
+  costInstallments.forEach((item) => allMonthsSet.add(item.month))
+  fuelRecords.forEach((r) => allMonthsSet.add(r.date.slice(0, 7)))
+
+  const targetMonths = Array.from(allMonthsSet).sort()
+
+  // 初始化月度数据
+  targetMonths.forEach((month) => {
+    monthlyData[month] = {}
+    allTypes.forEach((type) => (monthlyData[month][type] = 0))
+  })
+
+  // 添加费用分摊
+  costInstallments.forEach((item) => {
+    if (monthlyData[item.month]) {
+      monthlyData[item.month][item.type] += item.amount
+    }
+  })
+
+  // 添加油费
+  fuelRecords.forEach((r) => {
+    const month = r.date.slice(0, 7)
+    if (monthlyData[month]) {
+      monthlyData[month]['油费'] += r.actual_cost
+    }
+  })
+
+  return monthlyData
+}
+
+/**
+ * 计算费用类型分布
+ * @param {Array} costInstallments - 费用分摊明细
+ * @param {Array} fuelRecords - 加油记录
+ * @param {Array} targetMonths - 目标月份列表（可选，不过滤则传null）
+ * @returns {Object} { totalAmount, data: [{ name, value }] }
+ */
+export function calculateCostTypeDistribution(costInstallments, fuelRecords, targetMonths = null) {
+  const typeData = {}
+  let totalAmount = 0
+
+  // 统计费用
+  costInstallments.forEach((item) => {
+    if (!targetMonths || targetMonths.includes(item.month)) {
+      typeData[item.type] = (typeData[item.type] || 0) + item.amount
+      totalAmount += item.amount
+    }
+  })
+
+  // 统计油费
+  let totalFuelCost = 0
+  fuelRecords.forEach((r) => {
+    totalFuelCost += r.actual_cost
+  })
+  
+  if (totalFuelCost > 0) {
+    typeData['油费'] = totalFuelCost
+    totalAmount += totalFuelCost
+  }
+
+  const data = Object.entries(typeData)
+    .map(([name, value]) => ({ name, value: Math.round(value) }))
+    .sort((a, b) => b.value - a.value)
+
+  return { totalAmount, data }
+}
+
+/**
+ * 计算最近N个月的月份列表
+ * @param {number} n - 月数
+ * @returns {Array} 月份列表 [YYYY-MM, ...]
+ */
+export function getRecentMonths(n) {
+  const months = []
+  const now = new Date()
+  
+  for (let i = n - 1; i >= 0; i--) {
+    const d = new Date(now.getFullYear(), now.getMonth() - i, 1)
+    months.push(`${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`)
+  }
+  
+  return months
+}
+
+/**
+ * 根据时间范围筛选记录
+ * @param {string} timeRange - 'past_6months' | 'past_year' | 'all'
+ * @param {Array} records - 记录列表（需有date字段）
+ * @returns {Array} 筛选后的记录
+ */
+export function filterRecordsByTimeRange(timeRange, records) {
+  if (timeRange === 'all') {
+    return records
+  }
+
+  const now = new Date()
+  let cutoffDate
+
+  if (timeRange === 'past_6months') {
+    cutoffDate = new Date(now.getFullYear(), now.getMonth() - 5, 1)
+  } else if (timeRange === 'past_year') {
+    cutoffDate = new Date(now.getFullYear(), now.getMonth() - 11, 1)
+  } else {
+    return records
+  }
+
+  const cutoffStr = cutoffDate.toISOString().slice(0, 10)
+  return records.filter(r => r.date >= cutoffStr)
+}
diff --git a/web/src/views/Main.vue b/web/src/views/Main.vue
new file mode 100644
index 0000000..3d60983
--- /dev/null
+++ b/web/src/views/Main.vue
@@ -0,0 +1,405 @@
+<template>
+  <div class="app">
+    <el-container>
+      <!-- 头部 -->
+      <el-header class="header">
+        <div class="header-inner">
+          <div class="header-content">
+            <h1 class="app-title" @click="mobileView = 'dashboard'">🚗 CarCost</h1>
+
+            <!-- 桌面端：车辆选择 + 添加按钮 -->
+            <div class="desktop-nav">
+              <el-select
+                v-model="selectedVehicle"
+                placeholder="选择车辆"
+                style="width: 180px"
+                @change="onVehicleChange"
+              >
+                <el-option
+                  v-for="vehicle in vehicles"
+                  :key="vehicle.id"
+                  :label="vehicle.name"
+                  :value="vehicle.id"
+                />
+              </el-select>
+              <el-divider direction="vertical" />
+              <el-button @click="showAddVehicle = true" title="添加车辆">
+                <el-icon><Plus /></el-icon> 车辆
+              </el-button>
+              <el-button v-if="selectedVehicle" @click="editCurrentVehicle" title="编辑车辆">
+                <el-icon><Edit /></el-icon> 编辑
+              </el-button>
+              <el-divider direction="vertical" />
+              <el-button @click="showAddFuel = true" title="添加加油记录">
+                <el-icon><Plus /></el-icon> 加油
+              </el-button>
+              <el-button @click="showAddCost = true" title="添加费用记录">
+                <el-icon><Plus /></el-icon> 费用
+              </el-button>
+            </div>
+
+            <!-- 移动端：车辆选择 + 添加按钮 + 汉堡菜单 -->
+            <div class="mobile-nav">
+              <el-dropdown trigger="click" v-if="vehicles.length > 0">
+                <el-button>
+                  {{ selectedVehicleName || "选择车辆" }}
+                  <el-icon class="el-icon--right"><ArrowDown /></el-icon>
+                </el-button>
+                <template #dropdown>
+                  <el-dropdown-menu>
+                    <el-dropdown-item
+                      v-for="vehicle in vehicles"
+                      :key="vehicle.id"
+                      @click="selectVehicle(vehicle.id)"
+                    >
+                      {{ vehicle.name }}
+                    </el-dropdown-item>
+                    <el-dropdown-item divided @click="showAddVehicle = true">+ 添加车辆</el-dropdown-item>
+                    <el-dropdown-item v-if="selectedVehicle" @click="editCurrentVehicle">✏️ 编辑车辆</el-dropdown-item>
+                  </el-dropdown-menu>
+                </template>
+              </el-dropdown>
+              <el-button v-if="mobileView === 'fuel'" @click="showAddFuel = true">
+                <el-icon><Plus /></el-icon>
+              </el-button>
+              <el-button v-if="mobileView === 'cost'" @click="showAddCost = true">
+                <el-icon><Plus /></el-icon>
+              </el-button>
+              <el-dropdown trigger="click">
+                <el-button>
+                  <el-icon><Menu /></el-icon>
+                </el-button>
+                <template #dropdown>
+                  <el-dropdown-menu>
+                    <el-dropdown-item @click="mobileView = 'fuel'">⛽ 加油记录</el-dropdown-item>
+                    <el-dropdown-item @click="mobileView = 'cost'">💰 费用记录</el-dropdown-item>
+                  </el-dropdown-menu>
+                </template>
+              </el-dropdown>
+            </div>
+          </div>
+        </div>
+      </el-header>
+
+      <el-main>
+        <div class="content-wrapper">
+          <!-- 移动端：车辆选择 -->
+          <div class="mobile-vehicle-select">
+            <el-select
+              v-model="selectedVehicle"
+              placeholder="选择车辆"
+              style="width: 100%"
+              @change="onVehicleChange"
+            >
+              <el-option
+                v-for="vehicle in vehicles"
+                :key="vehicle.id"
+                :label="vehicle.name"
+                :value="vehicle.id"
+              />
+            </el-select>
+          </div>
+
+          <!-- 桌面端布局 -->
+          <div class="desktop-layout">
+            <!-- 上方统计卡片 -->
+            <StatsCards :vehicle-id="selectedVehicle" />
+
+            <!-- 四个图表 -->
+            <DashboardCharts :vehicle-id="selectedVehicle" />
+
+            <!-- 下方左右两栏：列表 -->
+            <el-row :gutter="20" class="records-row">
+              <el-col :span="12">
+                <FuelRecordsPanel
+                  :vehicle-id="selectedVehicle"
+                  :show-charts="false"
+                  :show-list="true"
+                  @add-fuel="showAddFuel = true"
+                />
+              </el-col>
+              <el-col :span="12">
+                <CostRecordsPanel
+                  :vehicle-id="selectedVehicle"
+                  :show-charts="false"
+                  :show-list="true"
+                  @add-cost="showAddCost = true"
+                />
+              </el-col>
+            </el-row>
+          </div>
+
+          <!-- 移动端布局 -->
+          <div class="mobile-layout">
+            <!-- 仪表盘 -->
+            <div v-if="mobileView === 'dashboard'">
+              <StatsCards :vehicle-id="selectedVehicle" />
+              <!-- 移动端图表 -->
+              <DashboardCharts :vehicle-id="selectedVehicle" />
+            </div>
+
+            <!-- 加油记录 -->
+            <div v-if="mobileView === 'fuel'">
+              <FuelRecordsPanel
+                :vehicle-id="selectedVehicle"
+                :show-charts="false"
+                :show-list="true"
+                @add-fuel="showAddFuel = true"
+              />
+            </div>
+
+            <!-- 费用记录 -->
+            <div v-if="mobileView === 'cost'">
+              <CostRecordsPanel
+                :vehicle-id="selectedVehicle"
+                :show-charts="false"
+                :show-list="true"
+                @add-cost="showAddCost = true"
+              />
+            </div>
+          </div>
+        </div>
+      </el-main>
+    </el-container>
+
+    <!-- 弹窗 -->
+    <AddVehicleDialog v-model:visible="showAddVehicle" @success="loadVehicles" />
+    <EditVehicleDialog v-model:visible="showEditVehicle" :vehicle="currentVehicle" @success="loadVehicles" />
+    <AddFuelDialog v-model:visible="showAddFuel" :vehicle-id="selectedVehicle" @success="onRecordAdded" />
+    <AddCostDialog v-model:visible="showAddCost" :vehicle-id="selectedVehicle" @success="onRecordAdded" />
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, computed } from "vue";
+import { ElMessage } from "element-plus";
+import { Menu, ArrowDown, Plus, Edit } from "@element-plus/icons-vue";
+import AddVehicleDialog from "../components/dialogs/vehicle/AddVehicleDialog.vue";
+import EditVehicleDialog from "../components/dialogs/vehicle/EditVehicleDialog.vue";
+import AddFuelDialog from "../components/dialogs/fuel/AddFuelDialog.vue";
+import AddCostDialog from "../components/dialogs/cost/AddCostDialog.vue";
+import StatsCards from "../components/cards/StatsCards.vue";
+import DashboardCharts from "../components/charts/DashboardCharts.vue";
+import FuelRecordsPanel from "../components/panels/FuelRecordsPanel.vue";
+import CostRecordsPanel from "../components/panels/CostRecordsPanel.vue";
+import { useVehicleData } from "../composables/useVehicleData.js";
+import api from "../api.js";
+
+const vehicles = ref([]);
+const selectedVehicle = ref(null);
+const mobileView = ref("dashboard");
+
+// 使用缓存层
+const { loadVehicleData, refreshVehicleData } = useVehicleData();
+
+// 当前选中车辆名称
+const selectedVehicleName = computed(() => {
+  const vehicle = vehicles.value.find((v) => v.id === selectedVehicle.value);
+  return vehicle?.name || "";
+});
+
+const showAddVehicle = ref(false);
+const showAddFuel = ref(false);
+const showAddCost = ref(false);
+const showEditVehicle = ref(false);
+const currentVehicle = ref(null);
+
+// 加载车辆列表
+const loadVehicles = async () => {
+  try {
+    const res = await api.get("/vehicles/list");
+    vehicles.value = res.data;
+    if (vehicles.value.length > 0 && !selectedVehicle.value) {
+      const vehicle = vehicles.value[0];
+      selectedVehicle.value = vehicle.id;
+      await loadVehicleData(selectedVehicle.value, vehicle);
+    }
+  } catch (error) {
+    console.error("加载车辆失败:", error);
+    ElMessage.error("加载车辆失败");
+  }
+};
+
+// 切换车辆
+const onVehicleChange = async () => {
+  if (selectedVehicle.value) {
+    const vehicle = vehicles.value.find((v) => v.id === selectedVehicle.value);
+    await loadVehicleData(selectedVehicle.value, vehicle);
+  }
+};
+
+// 移动端选择车辆
+const selectVehicle = async (id) => {
+  selectedVehicle.value = id;
+  await onVehicleChange();
+};
+
+// 编辑当前车辆
+const editCurrentVehicle = () => {
+  if (!selectedVehicle.value) return;
+  currentVehicle.value = vehicles.value.find((v) => v.id === selectedVehicle.value);
+  showEditVehicle.value = true;
+};
+
+// 记录添加成功后刷新数据
+const onRecordAdded = async () => {
+  if (selectedVehicle.value) {
+    const vehicle = vehicles.value.find((v) => v.id === selectedVehicle.value);
+    await refreshVehicleData(selectedVehicle.value, vehicle);
+  }
+};
+
+onMounted(() => {
+  loadVehicles();
+});
+</script>
+
+<style scoped>
+.app {
+  min-height: 100vh;
+  background: #f5f7fa;
+  width: 100%;
+}
+
+.content-wrapper {
+  max-width: 900px;
+  margin: 0 auto;
+  width: 100%;
+}
+
+.header {
+  background: #fff;
+  border-bottom: 1px solid #e4e7ed;
+  padding: 0;
+}
+
+.header-inner {
+  max-width: 900px;
+  margin: 0 auto;
+  width: 100%;
+}
+
+.header-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 60px;
+  padding: 0 20px;
+}
+
+.header h1 {
+  margin: 0;
+  font-size: 20px;
+  color: #303133;
+}
+
+.app-title {
+  cursor: pointer;
+}
+
+.app-title:hover {
+  opacity: 0.8;
+}
+
+.desktop-nav {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.mobile-nav {
+  display: none;
+}
+
+.mobile-vehicle-select {
+  display: none;
+  margin-bottom: 15px;
+}
+
+.desktop-layout {
+  display: block;
+  width: 100%;
+  overflow-x: hidden;
+}
+
+.mobile-layout {
+  display: none;
+  width: 100%;
+  overflow-x: hidden;
+}
+
+.records-row {
+  margin: 0 -10px !important;
+  width: calc(100% + 20px);
+  display: flex;
+  align-items: stretch;
+}
+
+.records-row :deep(.el-col) {
+  padding-left: 10px !important;
+  padding-right: 10px !important;
+  display: flex;
+}
+
+.records-row :deep(.el-col > *) {
+  flex: 1;
+}
+
+:deep(.el-main) {
+  padding: 20px !important;
+}
+
+:deep(.el-container) {
+  padding: 0 !important;
+}
+
+/* 弹窗默认样式（电脑端） */
+:deep(.el-dialog) {
+  width: 450px !important;
+}
+
+/* 移动端弹窗适配 */
+@media (max-width: 768px) {
+  :deep(.el-dialog) {
+    width: 90% !important;
+    max-width: 350px !important;
+  }
+}
+
+/* 移动端适配 */
+@media (max-width: 768px) {
+  :deep(.el-main) {
+    padding: 10px !important;
+  }
+
+  .desktop-nav {
+    display: none;
+  }
+
+  .mobile-nav {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .mobile-vehicle-select {
+    display: none;
+  }
+
+  .desktop-layout {
+    display: none;
+  }
+
+  .mobile-layout {
+    display: block;
+  }
+
+  .header-content {
+    padding: 0 10px;
+  }
+
+  .header h1 {
+    font-size: 18px;
+  }
+}
+</style>