From ee2b1757d0788056f66fe880aef72713fc1d0754 Mon Sep 17 00:00:00 2001
From: li <ljf@com>
Date: Sat, 14 Mar 2026 17:39:50 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=91=98=E5=B7=A5=E8=87=AA=E5=8A=A9?=
 =?UTF-8?q?=E6=B3=A8=E5=86=8C+=E5=AE=A1=E6=A0=B8=E6=B5=81=E7=A8=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增 registration_packages 表：管理员配置注册套餐（名称/角色）
- AuthController 新增 register() 和 registrationPackages() 公开接口
- UserController 新增 approve() / reject() 审核接口
- StoreController 新增 publicList() 公开门店列表
- 前端 /register 注册页：选门店→选岗位套餐→填信息→提交
- 前端 system/registration-packages：套餐 CRUD
- 用户管理页：待审核状态展示 + 通过/拒绝快捷操作
- 登录页底部加「申请注册」跳转链接
- 路由白名单加 /register
---
 .gitignore                                    |    2 +-
 CLAUDE.md                                     |   44 +
 .../Http/Controllers/Admin/AuthController.php |   58 +
 .../Inventory/InventoryCheckController.php    |   80 ++
 .../Admin/Inventory/StockController.php       |   50 +
 .../Inventory/TransferOrderController.php     |   82 ++
 .../Admin/Office/ApprovalController.php       |  176 ++-
 .../System/RegistrationPackageController.php  |   66 ++
 .../Admin/System/StoreController.php          |   12 +
 .../Admin/System/UserController.php           |   24 +
 .../app/Models/Inventory/InventoryCheck.php   |   16 +
 .../app/Models/Inventory/TransferOrder.php    |   17 +
 backend/app/Models/Office/ApprovalNode.php    |    3 +-
 .../app/Models/System/RegistrationPackage.php |   26 +
 backend/bootstrap/app.php                     |    2 +-
 ...ode_label_role_to_approval_nodes_table.php |   25 +
 ...14_000002_create_transfer_orders_table.php |   47 +
 ...004_create_registration_packages_table.php |   29 +
 backend/routes/api.php                        |   31 +-
 deploy.sh                                     |   26 +
 docs/api-check-report.md                      |  121 ++
 frontend/package-lock.json                    | 1048 ++++++++++++++++-
 frontend/package.json                         |    4 +
 frontend/postcss.config.js                    |    6 +
 frontend/src/api/care.js                      |    4 +-
 frontend/src/api/finance.js                   |    7 +
 frontend/src/api/inventory.js                 |   23 +
 frontend/src/api/meal.js                      |    1 +
 frontend/src/api/service.js                   |    1 +
 frontend/src/api/system.js                    |   84 +-
 frontend/src/layout/components/Header.vue     |  183 +--
 frontend/src/layout/components/Sidebar.vue    |  298 ++---
 frontend/src/layout/index.vue                 |   66 +-
 frontend/src/router/index.js                  |    2 +-
 frontend/src/router/routes.js                 |    6 +
 frontend/src/styles/index.scss                |  311 +++--
 frontend/src/views/care/exceptions/index.vue  |  274 +++++
 .../src/views/care/health-metrics/index.vue   |  223 ++++
 frontend/src/views/care/plans/index.vue       |   37 +-
 frontend/src/views/care/profiles/index.vue    |   47 +-
 frontend/src/views/care/records/index.vue     |   37 +-
 frontend/src/views/crm/channels/index.vue     |   43 +-
 frontend/src/views/crm/complaints/index.vue   |   47 +-
 frontend/src/views/crm/contracts/index.vue    |   55 +-
 frontend/src/views/crm/customers/index.vue    |   63 +-
 frontend/src/views/crm/leads/index.vue        |   67 +-
 .../src/views/crm/questionnaires/index.vue    |  202 ++++
 frontend/src/views/dashboard/index.vue        |  316 +----
 frontend/src/views/finance/accounts/index.vue |   45 +-
 .../src/views/finance/categories/index.vue    |   63 +-
 frontend/src/views/finance/invoices/index.vue |   53 +-
 frontend/src/views/finance/payments/index.vue |  215 ++++
 .../src/views/finance/prepaid-cards/index.vue |   47 +-
 frontend/src/views/finance/records/index.vue  |   69 +-
 .../src/views/finance/transactions/index.vue  |  138 +++
 frontend/src/views/hr/attendances/index.vue   |   52 +-
 frontend/src/views/hr/leaves/index.vue        |   73 +-
 frontend/src/views/hr/profiles/index.vue      |   67 +-
 frontend/src/views/hr/salaries/index.vue      |   75 +-
 frontend/src/views/hr/schedules/index.vue     |   45 +-
 frontend/src/views/inventory/checks/index.vue |  294 +++++
 .../src/views/inventory/materials/index.vue   |   49 +-
 .../views/inventory/purchase-orders/index.vue |   62 +-
 .../views/inventory/stock-movements/index.vue |   63 +-
 frontend/src/views/inventory/stock/index.vue  |  137 +++
 .../src/views/inventory/suppliers/index.vue   |   45 +-
 .../src/views/inventory/transfers/index.vue   |  270 +++++
 .../src/views/inventory/warehouses/index.vue  |  100 +-
 frontend/src/views/kb/articles/index.vue      |   79 +-
 frontend/src/views/kb/categories/index.vue    |   55 +-
 frontend/src/views/login/index.vue            |  139 +--
 frontend/src/views/meal/daily-plans/index.vue |   53 +-
 frontend/src/views/meal/dishes/index.vue      |   43 +-
 frontend/src/views/meal/reviews/index.vue     |  191 +++
 frontend/src/views/meal/templates/index.vue   |  190 +++
 frontend/src/views/nanny/nannies/index.vue    |   47 +-
 frontend/src/views/nanny/orders/index.vue     |   51 +-
 frontend/src/views/nanny/schedules/index.vue  |   33 +-
 .../src/views/office/announcements/index.vue  |   71 +-
 .../views/office/approval-templates/index.vue |   57 +-
 frontend/src/views/office/approvals/index.vue |  214 +++-
 frontend/src/views/office/handovers/index.vue |   67 +-
 .../src/views/office/notifications/index.vue  |   88 +-
 frontend/src/views/register/index.vue         |  183 +++
 frontend/src/views/report/exports/index.vue   |   88 +-
 frontend/src/views/report/overview/index.vue  |   31 +-
 frontend/src/views/room/board/index.vue       |  164 +++
 .../src/views/room/call-records/index.vue     |  177 +++
 frontend/src/views/room/outings/index.vue     |  200 ++++
 .../src/views/room/reservations/index.vue     |   49 +-
 frontend/src/views/room/room-types/index.vue  |   45 +-
 frontend/src/views/room/rooms/index.vue       |   63 +-
 .../src/views/service/executions/index.vue    |  246 ++++
 frontend/src/views/service/items/index.vue    |   43 +-
 frontend/src/views/service/orders/index.vue   |   47 +-
 frontend/src/views/service/packages/index.vue |   43 +-
 .../src/views/system/departments/index.vue    |  105 +-
 .../src/views/system/dictionaries/index.vue   |  152 ++-
 frontend/src/views/system/menus/index.vue     |  168 +--
 frontend/src/views/system/positions/index.vue |  105 +-
 .../system/registration-packages/index.vue    |  232 ++++
 frontend/src/views/system/roles/index.vue     |   93 +-
 frontend/src/views/system/stores/index.vue    |  166 ++-
 frontend/src/views/system/users/index.vue     |  176 +--
 frontend/tailwind.config.js                   |   20 +
 105 files changed, 7859 insertions(+), 2469 deletions(-)
 create mode 100644 CLAUDE.md
 create mode 100644 backend/app/Http/Controllers/Admin/Inventory/InventoryCheckController.php
 create mode 100644 backend/app/Http/Controllers/Admin/Inventory/StockController.php
 create mode 100644 backend/app/Http/Controllers/Admin/Inventory/TransferOrderController.php
 create mode 100644 backend/app/Http/Controllers/Admin/System/RegistrationPackageController.php
 create mode 100644 backend/app/Models/Inventory/InventoryCheck.php
 create mode 100644 backend/app/Models/Inventory/TransferOrder.php
 create mode 100644 backend/app/Models/System/RegistrationPackage.php
 create mode 100644 backend/database/migrations/2026_03_14_000001_add_node_label_role_to_approval_nodes_table.php
 create mode 100644 backend/database/migrations/2026_03_14_000002_create_transfer_orders_table.php
 create mode 100644 backend/database/migrations/2026_03_14_000004_create_registration_packages_table.php
 create mode 100755 deploy.sh
 create mode 100644 docs/api-check-report.md
 create mode 100644 frontend/postcss.config.js
 create mode 100644 frontend/src/views/care/exceptions/index.vue
 create mode 100644 frontend/src/views/care/health-metrics/index.vue
 create mode 100644 frontend/src/views/crm/questionnaires/index.vue
 create mode 100644 frontend/src/views/finance/payments/index.vue
 create mode 100644 frontend/src/views/finance/transactions/index.vue
 create mode 100644 frontend/src/views/inventory/checks/index.vue
 create mode 100644 frontend/src/views/inventory/stock/index.vue
 create mode 100644 frontend/src/views/inventory/transfers/index.vue
 create mode 100644 frontend/src/views/meal/reviews/index.vue
 create mode 100644 frontend/src/views/meal/templates/index.vue
 create mode 100644 frontend/src/views/register/index.vue
 create mode 100644 frontend/src/views/room/board/index.vue
 create mode 100644 frontend/src/views/room/call-records/index.vue
 create mode 100644 frontend/src/views/room/outings/index.vue
 create mode 100644 frontend/src/views/service/executions/index.vue
 create mode 100644 frontend/src/views/system/registration-packages/index.vue
 create mode 100644 frontend/tailwind.config.js

diff --git a/.gitignore b/.gitignore
index c9334f9..ddc93d3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -15,7 +15,7 @@ Thumbs.db
 
 # Frontend
 frontend/node_modules/
-frontend/dist/
+# frontend/dist/ — tracked for zero-build server deployment
 
 # Backend (Laravel handles its own via backend/.gitignore)
 
diff --git a/CLAUDE.md b/CLAUDE.md
new file mode 100644
index 0000000..09629ac
--- /dev/null
+++ b/CLAUDE.md
@@ -0,0 +1,44 @@
+# CLAUDE.md — 月子 SaaS 项目上下文
+
+## 部署信息
+
+- **服务器**：`82.157.47.215`（root / Aiying88）
+- **前端**：`/var/www/saas/frontend`（Vue 3 静态 dist）
+- **后端**：`/var/www/saas/backend`（Laravel 12，PHP 8.3）
+- **仓库镜像**：`/var/www/saas/repo`（用于 git pull）
+- **Gitea 远程**：`git@git.20031227.de5.net:fengshao1227/yuezi-saas.git`
+
+## 手动更新服务器
+
+本地运行一键脚本（构建前端 → git push → SSH 触发服务器 pull + migrate）：
+
+```bash
+./deploy.sh "feat: 描述变更"
+```
+
+只更新服务器（跳过本地构建和 push）：
+
+```bash
+ssh root@82.157.47.215 '/var/www/saas/deploy.sh'
+```
+
+查看部署日志：
+
+```bash
+ssh root@82.157.47.215 'tail -50 /var/log/saas-deploy.log'
+```
+
+## 服务器 deploy.sh 做的事
+
+1. `git pull origin main`（在 `/var/www/saas/repo`）
+2. rsync backend → `/var/www/saas/backend`（排除 `.env` / `vendor`）
+3. 如果 `composer.json` 有变动，执行 `composer install`
+4. `php artisan migrate --force` + 清缓存
+5. rsync `frontend/dist/` → `/var/www/saas/frontend`
+
+## 关键配置
+
+- 后端 `.env` 在服务器，不入库，手动维护
+- `bootstrap/app.php` 已移除 `statefulApi()`（用 Bearer Token 认证，无需 CSRF）
+- Nginx 配置：`/etc/nginx/conf.d/saas.conf`
+- PHP-FPM：`127.0.0.1:9000`
diff --git a/backend/app/Http/Controllers/Admin/AuthController.php b/backend/app/Http/Controllers/Admin/AuthController.php
index f8f3f95..f83579a 100644
--- a/backend/app/Http/Controllers/Admin/AuthController.php
+++ b/backend/app/Http/Controllers/Admin/AuthController.php
@@ -85,4 +85,62 @@ class AuthController extends Controller
             'menus' => $user->getMenuTree(),
         ]);
     }
+
+    /**
+     * 获取可用注册套餐列表（公开接口）
+     */
+    public function registrationPackages(Request $request): JsonResponse
+    {
+        $storeId = $request->input('store_id');
+        if (!$storeId) {
+            return $this->error('请选择门店', 42200);
+        }
+
+        $packages = \App\Models\System\RegistrationPackage::withoutGlobalScope('store')
+            ->where('store_id', $storeId)
+            ->where('status', 1)
+            ->orderBy('sort')
+            ->get(['id', 'name', 'description']);
+
+        return $this->success($packages);
+    }
+
+    /**
+     * 自助注册（公开接口）
+     * 注册后 status=2(待审核)，需管理员审批后才能登录
+     */
+    public function register(Request $request): JsonResponse
+    {
+        $data = $request->validate([
+            'store_id'                => 'required|exists:stores,id',
+            'registration_package_id' => 'required|exists:registration_packages,id',
+            'username'                => 'required|string|max:50|unique:users,username',
+            'password'                => 'required|string|min:6',
+            'name'                    => 'required|string|max:50',
+            'phone'                   => 'required|string|max:20',
+        ]);
+
+        // 验证套餐属于该门店
+        $package = \App\Models\System\RegistrationPackage::withoutGlobalScope('store')
+            ->where('id', $data['registration_package_id'])
+            ->where('store_id', $data['store_id'])
+            ->where('status', 1)
+            ->firstOrFail();
+
+        $user = \App\Models\User::create([
+            'store_id'  => $data['store_id'],
+            'username'  => $data['username'],
+            'password'  => $data['password'],
+            'name'      => $data['name'],
+            'phone'     => $data['phone'],
+            'status'    => 2, // Pending
+        ]);
+
+        // 绑定套餐角色
+        if (!empty($package->role_ids)) {
+            $user->roles()->sync($package->role_ids);
+        }
+
+        return $this->success(null, '注册成功，请等待管理员审核后登录');
+    }
 }
diff --git a/backend/app/Http/Controllers/Admin/Inventory/InventoryCheckController.php b/backend/app/Http/Controllers/Admin/Inventory/InventoryCheckController.php
new file mode 100644
index 0000000..dbfb10c
--- /dev/null
+++ b/backend/app/Http/Controllers/Admin/Inventory/InventoryCheckController.php
@@ -0,0 +1,80 @@
+<?php
+namespace App\Http\Controllers\Admin\Inventory;
+use App\Http\Controllers\Controller;
+use App\Models\Inventory\InventoryCheck;
+use App\Models\Inventory\Inventory;
+use Illuminate\Http\JsonResponse;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\DB;
+
+class InventoryCheckController extends Controller
+{
+    public function index(Request $request): JsonResponse
+    {
+        $query = InventoryCheck::query()
+            ->with(['warehouse', 'operator'])
+            ->when($request->warehouse_id, fn($q, $v) => $q->where('warehouse_id', $v))
+            ->when($request->has('status'), fn($q) => $q->where('status', $request->status));
+
+        return $this->paginate($query->latest()->paginate($request->input('per_page', 15)));
+    }
+
+    public function store(Request $request): JsonResponse
+    {
+        $v = $request->validate([
+            'check_no'     => 'required|string|max:50|unique:inventory_checks',
+            'warehouse_id' => 'required|exists:warehouses,id',
+            'items'        => 'nullable|array',
+            'remark'       => 'nullable|string|max:500',
+        ]);
+        $v['status'] = 0;
+        $v['operator_id'] = auth()->id();
+
+        return $this->success(InventoryCheck::create($v));
+    }
+
+    public function show(InventoryCheck $inventoryCheck): JsonResponse
+    {
+        return $this->success($inventoryCheck->load(['warehouse', 'operator']));
+    }
+
+    /**
+     * 完成盘点 — 可选择按实际数量修正库存
+     */
+    public function complete(InventoryCheck $inventoryCheck, Request $request): JsonResponse
+    {
+        if ($inventoryCheck->status === 2) {
+            return $this->error('已完成', 40001);
+        }
+
+        $v = $request->validate([
+            'items'         => 'nullable|array',
+            'finish_remark' => 'nullable|string|max:500',
+        ]);
+
+        DB::transaction(function () use ($inventoryCheck, $v) {
+            $items = $v['items'] ?? $inventoryCheck->items ?? [];
+
+            // 如果有差异且需要调整库存
+            foreach ($items as $item) {
+                if (!isset($item['actual_qty'])) continue;
+                $diff = ($item['actual_qty'] ?? 0) - ($item['book_qty'] ?? 0);
+                if ($diff == 0) continue;
+
+                $inv = Inventory::firstOrCreate(
+                    ['warehouse_id' => $inventoryCheck->warehouse_id, 'material_id' => $item['material_id'], 'batch_no' => null],
+                    ['quantity' => 0]
+                );
+                $inv->increment('quantity', $diff);
+            }
+
+            $inventoryCheck->update([
+                'status'        => 2,
+                'items'         => $items,
+                'finish_remark' => $v['finish_remark'] ?? null,
+            ]);
+        });
+
+        return $this->success($inventoryCheck->fresh(['warehouse']));
+    }
+}
diff --git a/backend/app/Http/Controllers/Admin/Inventory/StockController.php b/backend/app/Http/Controllers/Admin/Inventory/StockController.php
new file mode 100644
index 0000000..9d7473b
--- /dev/null
+++ b/backend/app/Http/Controllers/Admin/Inventory/StockController.php
@@ -0,0 +1,50 @@
+<?php
+namespace App\Http\Controllers\Admin\Inventory;
+use App\Http\Controllers\Controller;
+use App\Models\Inventory\Inventory;
+use App\Models\Inventory\Material;
+use Illuminate\Http\JsonResponse;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\DB;
+
+class StockController extends Controller
+{
+    /**
+     * 库存台账 — 汇总 inventories 表，关联 material 信息
+     * GET /inventory/stock
+     */
+    public function index(Request $request): JsonResponse
+    {
+        $query = Inventory::query()
+            ->with(['warehouse', 'material'])
+            ->when($request->warehouse_id, fn($q, $v) => $q->where('warehouse_id', $v))
+            ->when($request->material_id, fn($q, $v) => $q->where('material_id', $v))
+            ->when($request->low_stock, fn($q) => $q->whereRaw('quantity <= (SELECT min_stock FROM materials WHERE materials.id = inventories.material_id AND min_stock IS NOT NULL)'));
+
+        return $this->paginate($query->paginate($request->input('per_page', 20)));
+    }
+
+    /**
+     * 导出库存台账
+     * GET /inventory/stock/export
+     */
+    public function export(Request $request): JsonResponse
+    {
+        $rows = Inventory::with(['warehouse', 'material'])
+            ->when($request->warehouse_id, fn($q, $v) => $q->where('warehouse_id', $v))
+            ->get()
+            ->map(fn($inv) => [
+                'warehouse'     => $inv->warehouse?->name,
+                'material_code' => $inv->material?->code,
+                'material_name' => $inv->material?->name,
+                'unit'          => $inv->material?->unit,
+                'quantity'      => $inv->quantity,
+                'batch_no'      => $inv->batch_no,
+                'expire_date'   => $inv->expire_date?->toDateString(),
+                'safety_stock'  => $inv->material?->min_stock,
+                'updated_at'    => $inv->updated_at?->toDateTimeString(),
+            ]);
+
+        return $this->success(['rows' => $rows, 'total' => $rows->count()]);
+    }
+}
diff --git a/backend/app/Http/Controllers/Admin/Inventory/TransferOrderController.php b/backend/app/Http/Controllers/Admin/Inventory/TransferOrderController.php
new file mode 100644
index 0000000..3bab504
--- /dev/null
+++ b/backend/app/Http/Controllers/Admin/Inventory/TransferOrderController.php
@@ -0,0 +1,82 @@
+<?php
+namespace App\Http\Controllers\Admin\Inventory;
+use App\Http\Controllers\Controller;
+use App\Models\Inventory\TransferOrder;
+use App\Models\Inventory\Inventory;
+use Illuminate\Http\JsonResponse;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\DB;
+
+class TransferOrderController extends Controller
+{
+    public function index(Request $request): JsonResponse
+    {
+        $query = TransferOrder::query()
+            ->with(['fromWarehouse', 'toWarehouse', 'operator'])
+            ->when($request->transfer_no, fn($q, $v) => $q->where('transfer_no', 'like', "%{$v}%"))
+            ->when($request->has('status'), fn($q) => $q->where('status', $request->status))
+            ->when($request->from_warehouse_id, fn($q, $v) => $q->where('from_warehouse_id', $v));
+
+        return $this->paginate($query->latest()->paginate($request->input('per_page', 15)));
+    }
+
+    public function store(Request $request): JsonResponse
+    {
+        $v = $request->validate([
+            'transfer_no'       => 'required|string|max:50|unique:transfer_orders',
+            'from_warehouse_id' => 'required|exists:warehouses,id',
+            'to_warehouse_id'   => 'required|exists:warehouses,id|different:from_warehouse_id',
+            'items'             => 'nullable|array',
+            'remark'            => 'nullable|string|max:500',
+        ]);
+        $v['status'] = 0;
+        $v['operator_id'] = auth()->id();
+
+        return $this->success(TransferOrder::create($v));
+    }
+
+    public function show(TransferOrder $transferOrder): JsonResponse
+    {
+        return $this->success($transferOrder->load(['fromWarehouse', 'toWarehouse', 'operator']));
+    }
+
+    public function confirm(TransferOrder $transferOrder): JsonResponse
+    {
+        if ($transferOrder->status !== 0) {
+            return $this->error('当前状态不可确认', 40001);
+        }
+
+        DB::transaction(function () use ($transferOrder) {
+            $transferOrder->update(['status' => 1]);
+
+            // 调拨：减源仓库、加目标仓库
+            foreach (($transferOrder->items ?? []) as $item) {
+                $materialId = $item['material_id'];
+                $qty        = $item['quantity'] ?? 0;
+
+                // 扣减出库仓库
+                Inventory::where('warehouse_id', $transferOrder->from_warehouse_id)
+                    ->where('material_id', $materialId)
+                    ->decrement('quantity', $qty);
+
+                // 增加入库仓库
+                $inv = Inventory::firstOrCreate(
+                    ['warehouse_id' => $transferOrder->to_warehouse_id, 'material_id' => $materialId, 'batch_no' => null],
+                    ['quantity' => 0]
+                );
+                $inv->increment('quantity', $qty);
+            }
+        });
+
+        return $this->success($transferOrder->fresh(['fromWarehouse', 'toWarehouse']));
+    }
+
+    public function cancel(TransferOrder $transferOrder): JsonResponse
+    {
+        if ($transferOrder->status !== 0) {
+            return $this->error('只有待确认状态可取消', 40001);
+        }
+        $transferOrder->update(['status' => 2]);
+        return $this->success($transferOrder);
+    }
+}
diff --git a/backend/app/Http/Controllers/Admin/Office/ApprovalController.php b/backend/app/Http/Controllers/Admin/Office/ApprovalController.php
index f6d7505..1958e4b 100644
--- a/backend/app/Http/Controllers/Admin/Office/ApprovalController.php
+++ b/backend/app/Http/Controllers/Admin/Office/ApprovalController.php
@@ -4,8 +4,11 @@ namespace App\Http\Controllers\Admin\Office;
 
 use App\Http\Controllers\Controller;
 use App\Models\Office\Approval;
+use App\Models\Office\ApprovalNode;
+use App\Models\User;
 use Illuminate\Http\JsonResponse;
 use Illuminate\Http\Request;
+use Illuminate\Support\Facades\DB;
 
 class ApprovalController extends Controller
 {
@@ -21,16 +24,59 @@ class ApprovalController extends Controller
     public function store(Request $request): JsonResponse
     {
         $validated = $request->validate([
-            'title' => 'required|string|max:255',
-            'template_id' => 'nullable|exists:approval_templates,id',
-            'form_data' => 'nullable|array',
+            'title'        => 'required|string|max:255',
+            'template_id'  => 'nullable|exists:approval_templates,id',
+            'form_data'    => 'nullable|array',
             'related_type' => 'nullable|string|max:50',
-            'related_id' => 'nullable|integer',
+            'related_id'   => 'nullable|integer',
         ]);
-        $validated['applicant_id'] = auth()->id();
-        $validated['status'] = 0;
 
-        return $this->success(Approval::create($validated));
+        $validated['applicant_id'] = auth()->id();
+        $validated['status']       = 0;
+        $validated['current_node'] = 1;
+
+        $approval = null;
+
+        DB::transaction(function () use ($validated, &$approval) {
+            $approval = Approval::create($validated);
+
+            // 根据模板 flow_nodes 自动创建多级审批节点
+            if ($approval->template_id && $approval->template) {
+                $flowNodes = $approval->template->flow_nodes ?? [];
+                foreach ($flowNodes as $node) {
+                    $level  = $node['level'] ?? 1;
+                    $role   = $node['role'] ?? null;
+                    $label  = $node['label'] ?? "第{$level}级审批";
+
+                    // 按 role 找同门店下首个匹配用户
+                    $approverId = null;
+                    if ($role) {
+                        $approverId = User::whereHas('roles', fn($q) => $q->where('slug', $role))
+                            ->where('store_id', $approval->store_id)
+                            ->value('id');
+                    }
+
+                    ApprovalNode::create([
+                        'approval_id' => $approval->id,
+                        'node_order'  => $level,
+                        'node_label'  => $label,
+                        'role'        => $role,
+                        'approver_id' => $approverId,
+                        'action'      => 0,
+                    ]);
+                }
+            } else {
+                // 无模板：创建单一审批节点
+                ApprovalNode::create([
+                    'approval_id' => $approval->id,
+                    'node_order'  => 1,
+                    'node_label'  => '审批',
+                    'action'      => 0,
+                ]);
+            }
+        });
+
+        return $this->success($approval->load(['template', 'applicant', 'nodes']));
     }
 
     public function show(Approval $approval): JsonResponse
@@ -44,7 +90,7 @@ class ApprovalController extends Controller
             return $this->error('该审批已完结，无法修改', 40001);
         }
         $validated = $request->validate([
-            'title' => 'sometimes|string|max:255',
+            'title'     => 'sometimes|string|max:255',
             'form_data' => 'nullable|array',
         ]);
         $approval->update($validated);
@@ -62,43 +108,28 @@ class ApprovalController extends Controller
         return $this->success(null);
     }
 
-    public function approve(Approval $approval): JsonResponse
+    public function approve(Request $request, Approval $approval): JsonResponse
     {
+        if ($approval->status >= 2) {
+            return $this->error('该审批已完结', 40001);
+        }
+
+        $currentUser = auth()->user();
+        $userRoles   = $currentUser->roles()->pluck('slug')->toArray();
+
+        // 当前节点匹配：approver_id 精确匹配 或 role 匹配当前用户角色
         $node = $approval->nodes()
-            ->where('approver_id', auth()->id())
-            ->where('action', 0)
             ->where('node_order', $approval->current_node)
+            ->where('action', 0)
+            ->where(function ($q) use ($currentUser, $userRoles) {
+                $q->where('approver_id', $currentUser->id)
+                  ->orWhereIn('role', $userRoles)
+                  ->orWhereNull('approver_id'); // 无指定审批人时任何人可审
+            })
             ->first();
 
         if (!$node) {
-            return $this->error('无待处理的审批节点', 40001);
-        }
-
-        $node->update(['action' => 1, 'acted_at' => now()]);
-
-        $pendingNodes = $approval->nodes()->where('action', 0)->exists();
-        if (!$pendingNodes) {
-            $approval->update(['status' => 2]);
-        } else {
-            $approval->update([
-                'status' => 1,
-                'current_node' => $approval->current_node + 1,
-            ]);
-        }
-
-        return $this->success($approval->load('nodes'));
-    }
-
-    public function reject(Request $request, Approval $approval): JsonResponse
-    {
-        $node = $approval->nodes()
-            ->where('approver_id', auth()->id())
-            ->where('action', 0)
-            ->where('node_order', $approval->current_node)
-            ->first();
-
-        if (!$node) {
-            return $this->error('无待处理的审批节点', 40001);
+            return $this->error('无待处理的审批节点或您无权审批此节点', 40001);
         }
 
         $validated = $request->validate([
@@ -106,13 +137,67 @@ class ApprovalController extends Controller
         ]);
 
         $node->update([
-            'action' => 2,
-            'comment' => $validated['comment'] ?? null,
-            'acted_at' => now(),
+            'action'      => 1,
+            'approver_id' => $currentUser->id,
+            'comment'     => $validated['comment'] ?? null,
+            'acted_at'    => now(),
         ]);
-        $approval->update(['status' => 3]);
 
-        return $this->success($approval->load('nodes'));
+        // 检查是否还有下一节点
+        $hasNext = $approval->nodes()
+            ->where('node_order', '>', $approval->current_node)
+            ->where('action', 0)
+            ->exists();
+
+        if ($hasNext) {
+            $approval->update([
+                'status'       => 1, // 审批中
+                'current_node' => $approval->current_node + 1,
+            ]);
+        } else {
+            $approval->update(['status' => 2]); // 已通过
+        }
+
+        return $this->success($approval->load(['nodes.approver']));
+    }
+
+    public function reject(Request $request, Approval $approval): JsonResponse
+    {
+        if ($approval->status >= 2) {
+            return $this->error('该审批已完结', 40001);
+        }
+
+        $currentUser = auth()->user();
+        $userRoles   = $currentUser->roles()->pluck('slug')->toArray();
+
+        $node = $approval->nodes()
+            ->where('node_order', $approval->current_node)
+            ->where('action', 0)
+            ->where(function ($q) use ($currentUser, $userRoles) {
+                $q->where('approver_id', $currentUser->id)
+                  ->orWhereIn('role', $userRoles)
+                  ->orWhereNull('approver_id');
+            })
+            ->first();
+
+        if (!$node) {
+            return $this->error('无待处理的审批节点或您无权操作', 40001);
+        }
+
+        $validated = $request->validate([
+            'comment' => 'nullable|string|max:255',
+        ]);
+
+        $node->update([
+            'action'      => 2,
+            'approver_id' => $currentUser->id,
+            'comment'     => $validated['comment'] ?? null,
+            'acted_at'    => now(),
+        ]);
+
+        $approval->update(['status' => 3]); // 已驳回
+
+        return $this->success($approval->load(['nodes.approver']));
     }
 
     public function withdraw(Approval $approval): JsonResponse
@@ -120,6 +205,9 @@ class ApprovalController extends Controller
         if ($approval->status > 1) {
             return $this->error('该审批已完结，无法撤回', 40001);
         }
+        if ($approval->applicant_id !== auth()->id()) {
+            return $this->error('只能撤回自己发起的审批', 40001);
+        }
         $approval->update(['status' => 4]);
 
         return $this->success($approval);
diff --git a/backend/app/Http/Controllers/Admin/System/RegistrationPackageController.php b/backend/app/Http/Controllers/Admin/System/RegistrationPackageController.php
new file mode 100644
index 0000000..5ef6325
--- /dev/null
+++ b/backend/app/Http/Controllers/Admin/System/RegistrationPackageController.php
@@ -0,0 +1,66 @@
+<?php
+
+namespace App\Http\Controllers\Admin\System;
+
+use App\Http\Controllers\Controller;
+use App\Models\System\RegistrationPackage;
+use Illuminate\Http\JsonResponse;
+use Illuminate\Http\Request;
+
+class RegistrationPackageController extends Controller
+{
+    public function index(Request $request): JsonResponse
+    {
+        $packages = RegistrationPackage::when($request->keyword, fn($q) =>
+                $q->where('name', 'like', "%{$request->keyword}%"))
+            ->when($request->has('status'), fn($q) =>
+                $q->where('status', $request->status))
+            ->orderBy('sort')->orderByDesc('id')
+            ->paginate($request->input('page_size', 20));
+
+        return $this->paginate($packages);
+    }
+
+    public function store(Request $request): JsonResponse
+    {
+        $data = $request->validate([
+            'name'        => 'required|string|max:50',
+            'description' => 'nullable|string|max:255',
+            'role_ids'    => 'array',
+            'role_ids.*'  => 'exists:roles,id',
+            'status'      => 'in:0,1',
+            'sort'        => 'integer|min:0',
+        ]);
+
+        $data['store_id'] = auth()->user()->store_id;
+        $package = RegistrationPackage::create($data);
+
+        return $this->success($package, '创建成功');
+    }
+
+    public function show(RegistrationPackage $registrationPackage): JsonResponse
+    {
+        return $this->success($registrationPackage);
+    }
+
+    public function update(Request $request, RegistrationPackage $registrationPackage): JsonResponse
+    {
+        $data = $request->validate([
+            'name'        => 'string|max:50',
+            'description' => 'nullable|string|max:255',
+            'role_ids'    => 'array',
+            'role_ids.*'  => 'exists:roles,id',
+            'status'      => 'in:0,1',
+            'sort'        => 'integer|min:0',
+        ]);
+
+        $registrationPackage->update($data);
+        return $this->success($registrationPackage, '更新成功');
+    }
+
+    public function destroy(RegistrationPackage $registrationPackage): JsonResponse
+    {
+        $registrationPackage->delete();
+        return $this->success(null, '删除成功');
+    }
+}
diff --git a/backend/app/Http/Controllers/Admin/System/StoreController.php b/backend/app/Http/Controllers/Admin/System/StoreController.php
index d866fe8..09ecb6b 100644
--- a/backend/app/Http/Controllers/Admin/System/StoreController.php
+++ b/backend/app/Http/Controllers/Admin/System/StoreController.php
@@ -83,4 +83,16 @@ class StoreController extends Controller
         $store->delete();
         return $this->success(null, '删除成功');
     }
+
+    /**
+     * 公开门店列表（注册页用，仅返回启用门店的 id/name）
+     */
+    public function publicList(): JsonResponse
+    {
+        $stores = Store::withoutGlobalScope('store')
+            ->where('status', 1)
+            ->orderByDesc('id')
+            ->get(['id', 'name']);
+        return $this->success($stores);
+    }
 }
diff --git a/backend/app/Http/Controllers/Admin/System/UserController.php b/backend/app/Http/Controllers/Admin/System/UserController.php
index ce3777d..6b40fc8 100644
--- a/backend/app/Http/Controllers/Admin/System/UserController.php
+++ b/backend/app/Http/Controllers/Admin/System/UserController.php
@@ -112,6 +112,30 @@ class UserController extends Controller
         return $this->success(null, '密码重置成功');
     }
 
+    /**
+     * 审核通过 — 激活待审核用户
+     */
+    public function approve(User $user): JsonResponse
+    {
+        if ($user->status->value !== 2) {
+            return $this->error('该用户不在待审核状态');
+        }
+        $user->update(['status' => 1]);
+        return $this->success(null, '已审核通过');
+    }
+
+    /**
+     * 审核拒绝 — 禁用该用户
+     */
+    public function reject(User $user): JsonResponse
+    {
+        if ($user->status->value !== 2) {
+            return $this->error('该用户不在待审核状态');
+        }
+        $user->update(['status' => 0]);
+        return $this->success(null, '已拒绝注册');
+    }
+
     public function destroy(User $user): JsonResponse
     {
         if ($user->is_super) {
diff --git a/backend/app/Models/Inventory/InventoryCheck.php b/backend/app/Models/Inventory/InventoryCheck.php
new file mode 100644
index 0000000..a1cafda
--- /dev/null
+++ b/backend/app/Models/Inventory/InventoryCheck.php
@@ -0,0 +1,16 @@
+<?php
+namespace App\Models\Inventory;
+use App\Models\User;
+use App\Traits\BelongsToStore;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Relations\BelongsTo;
+
+class InventoryCheck extends Model
+{
+    use BelongsToStore;
+    protected $table = 'inventory_checks';
+    protected $fillable = ['store_id','check_no','warehouse_id','items','status','finish_remark','operator_id'];
+    protected function casts(): array { return ['items'=>'array','status'=>'integer']; }
+    public function warehouse(): BelongsTo { return $this->belongsTo(Warehouse::class); }
+    public function operator(): BelongsTo { return $this->belongsTo(User::class, 'operator_id'); }
+}
diff --git a/backend/app/Models/Inventory/TransferOrder.php b/backend/app/Models/Inventory/TransferOrder.php
new file mode 100644
index 0000000..851287f
--- /dev/null
+++ b/backend/app/Models/Inventory/TransferOrder.php
@@ -0,0 +1,17 @@
+<?php
+namespace App\Models\Inventory;
+use App\Models\User;
+use App\Traits\BelongsToStore;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Relations\BelongsTo;
+
+class TransferOrder extends Model
+{
+    use BelongsToStore;
+    protected $table = 'transfer_orders';
+    protected $fillable = ['store_id','transfer_no','from_warehouse_id','to_warehouse_id','items','status','operator_id','remark'];
+    protected function casts(): array { return ['items'=>'array','status'=>'integer']; }
+    public function fromWarehouse(): BelongsTo { return $this->belongsTo(Warehouse::class, 'from_warehouse_id'); }
+    public function toWarehouse(): BelongsTo { return $this->belongsTo(Warehouse::class, 'to_warehouse_id'); }
+    public function operator(): BelongsTo { return $this->belongsTo(User::class, 'operator_id'); }
+}
diff --git a/backend/app/Models/Office/ApprovalNode.php b/backend/app/Models/Office/ApprovalNode.php
index 03d0084..e3ef553 100644
--- a/backend/app/Models/Office/ApprovalNode.php
+++ b/backend/app/Models/Office/ApprovalNode.php
@@ -11,7 +11,8 @@ class ApprovalNode extends Model
     const UPDATED_AT = null;
 
     protected $fillable = [
-        'approval_id', 'node_order', 'approver_id', 'action', 'comment', 'acted_at',
+        'approval_id', 'node_order', 'node_label', 'role',
+        'approver_id', 'action', 'comment', 'acted_at',
     ];
 
     protected function casts(): array
diff --git a/backend/app/Models/System/RegistrationPackage.php b/backend/app/Models/System/RegistrationPackage.php
new file mode 100644
index 0000000..9964f1a
--- /dev/null
+++ b/backend/app/Models/System/RegistrationPackage.php
@@ -0,0 +1,26 @@
+<?php
+
+namespace App\Models\System;
+
+use App\Traits\BelongsToStore;
+use Illuminate\Database\Eloquent\Model;
+
+class RegistrationPackage extends Model
+{
+    use BelongsToStore;
+
+    protected $table = 'registration_packages';
+
+    protected $fillable = [
+        'store_id', 'name', 'description', 'role_ids', 'status', 'sort',
+    ];
+
+    protected function casts(): array
+    {
+        return [
+            'role_ids' => 'array',
+            'status'   => 'integer',
+            'sort'     => 'integer',
+        ];
+    }
+}
diff --git a/backend/bootstrap/app.php b/backend/bootstrap/app.php
index 13522ca..fe8cf5d 100644
--- a/backend/bootstrap/app.php
+++ b/backend/bootstrap/app.php
@@ -19,7 +19,7 @@ return Application::configure(basePath: dirname(__DIR__))
             'oplog' => \App\Http\Middleware\OperationLog::class,
         ]);
 
-        $middleware->statefulApi();
+        // Removed statefulApi() — app uses Bearer token auth, not cookie SPA auth
     })
     ->withExceptions(function (Exceptions $exceptions): void {
         //
diff --git a/backend/database/migrations/2026_03_14_000001_add_node_label_role_to_approval_nodes_table.php b/backend/database/migrations/2026_03_14_000001_add_node_label_role_to_approval_nodes_table.php
new file mode 100644
index 0000000..ba49200
--- /dev/null
+++ b/backend/database/migrations/2026_03_14_000001_add_node_label_role_to_approval_nodes_table.php
@@ -0,0 +1,25 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::table('approval_nodes', function (Blueprint $table) {
+            $table->string('node_label', 100)->nullable()->after('node_order')->comment('节点名称');
+            $table->string('role', 50)->nullable()->after('node_label')->comment('节点角色标识');
+            // approver_id 改为可空（无模板时无法预指定审批人）
+            $table->unsignedBigInteger('approver_id')->nullable()->change();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::table('approval_nodes', function (Blueprint $table) {
+            $table->dropColumn(['node_label', 'role']);
+        });
+    }
+};
diff --git a/backend/database/migrations/2026_03_14_000002_create_transfer_orders_table.php b/backend/database/migrations/2026_03_14_000002_create_transfer_orders_table.php
new file mode 100644
index 0000000..2683de5
--- /dev/null
+++ b/backend/database/migrations/2026_03_14_000002_create_transfer_orders_table.php
@@ -0,0 +1,47 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('transfer_orders', function (Blueprint $table) {
+            $table->id();
+            $table->unsignedBigInteger('store_id')->index();
+            $table->string('transfer_no', 50)->unique();
+            $table->unsignedBigInteger('from_warehouse_id');
+            $table->unsignedBigInteger('to_warehouse_id');
+            $table->json('items')->nullable();
+            $table->tinyInteger('status')->default(0)->comment('0待确认1已确认2已取消');
+            $table->unsignedBigInteger('operator_id')->nullable();
+            $table->string('remark', 500)->nullable();
+            $table->timestamps();
+
+            $table->foreign('from_warehouse_id')->references('id')->on('warehouses');
+            $table->foreign('to_warehouse_id')->references('id')->on('warehouses');
+        });
+
+        Schema::create('inventory_checks', function (Blueprint $table) {
+            $table->id();
+            $table->unsignedBigInteger('store_id')->index();
+            $table->string('check_no', 50)->unique();
+            $table->unsignedBigInteger('warehouse_id');
+            $table->json('items')->nullable()->comment('[{material_id,book_qty,actual_qty,diff_qty,remark}]');
+            $table->tinyInteger('status')->default(0)->comment('0草稿1盘点中2已完成');
+            $table->string('finish_remark', 500)->nullable();
+            $table->unsignedBigInteger('operator_id')->nullable();
+            $table->timestamps();
+
+            $table->foreign('warehouse_id')->references('id')->on('warehouses');
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('inventory_checks');
+        Schema::dropIfExists('transfer_orders');
+    }
+};
diff --git a/backend/database/migrations/2026_03_14_000004_create_registration_packages_table.php b/backend/database/migrations/2026_03_14_000004_create_registration_packages_table.php
new file mode 100644
index 0000000..3837f18
--- /dev/null
+++ b/backend/database/migrations/2026_03_14_000004_create_registration_packages_table.php
@@ -0,0 +1,29 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('registration_packages', function (Blueprint $table) {
+            $table->id();
+            $table->foreignId('store_id')->constrained()->comment('所属门店');
+            $table->string('name', 50)->comment('套餐名称，如：销售、店长');
+            $table->string('description', 255)->nullable()->comment('套餐说明');
+            $table->json('role_ids')->nullable()->comment('关联角色ID数组');
+            $table->tinyInteger('status')->default(1)->comment('1启用 0停用');
+            $table->unsignedSmallInteger('sort')->default(0)->comment('排序');
+            $table->timestamps();
+
+            $table->index('store_id');
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('registration_packages');
+    }
+};
diff --git a/backend/routes/api.php b/backend/routes/api.php
index fb575e3..07786f4 100644
--- a/backend/routes/api.php
+++ b/backend/routes/api.php
@@ -44,6 +44,9 @@ use App\Http\Controllers\Admin\Inventory\MaterialController;
 use App\Http\Controllers\Admin\Inventory\PurchaseOrderController;
 use App\Http\Controllers\Admin\Inventory\StockMovementController;
 use App\Http\Controllers\Admin\Inventory\InventoryController;
+use App\Http\Controllers\Admin\Inventory\StockController;
+use App\Http\Controllers\Admin\Inventory\TransferOrderController;
+use App\Http\Controllers\Admin\Inventory\InventoryCheckController;
 use App\Http\Controllers\Admin\Finance\FinanceCategoryController;
 use App\Http\Controllers\Admin\Finance\FinanceRecordController;
 use App\Http\Controllers\Admin\Finance\CustomerAccountController;
@@ -64,6 +67,7 @@ use App\Http\Controllers\Admin\Report\ReportController;
 use App\Http\Controllers\Admin\Report\ReportExportController;
 use App\Http\Controllers\Admin\Kb\KbCategoryController;
 use App\Http\Controllers\Admin\Kb\KbArticleController;
+use App\Http\Controllers\Admin\System\RegistrationPackageController;
 
 /*
 |--------------------------------------------------------------------------
@@ -74,6 +78,9 @@ use App\Http\Controllers\Admin\Kb\KbArticleController;
 
 // ===== 公开路由（无需认证） =====
 Route::post('/auth/login', [AuthController::class, 'login']);
+Route::post('/auth/register', [AuthController::class, 'register']);
+Route::get('/auth/register/packages', [AuthController::class, 'registrationPackages']);
+Route::get('/auth/stores', [\App\Http\Controllers\Admin\System\StoreController::class, 'publicList']);
 
 // ===== 需要认证的路由 =====
 Route::middleware(['auth:sanctum', 'store', 'oplog'])->group(function () {
@@ -98,6 +105,11 @@ Route::middleware(['auth:sanctum', 'store', 'oplog'])->group(function () {
         Route::apiResource('users', UserController::class);
         Route::put('users/{user}/status', [UserController::class, 'updateStatus']);
         Route::put('users/{user}/password', [UserController::class, 'resetPassword']);
+        Route::put('users/{user}/approve', [UserController::class, 'approve']);
+        Route::put('users/{user}/reject', [UserController::class, 'reject']);
+
+        // 注册套餐管理
+        Route::apiResource('registration-packages', RegistrationPackageController::class);
 
         // 角色管理
         Route::apiResource('roles', RoleController::class);
@@ -264,8 +276,25 @@ Route::middleware(['auth:sanctum', 'store', 'oplog'])->group(function () {
         Route::get('stock-movements/{stockMovement}', [StockMovementController::class, 'show']);
         Route::put('stock-movements/{stockMovement}/confirm', [StockMovementController::class, 'confirm']);
 
-        // 库存查询
+        // 库存查询（按物料/仓库汇总）
         Route::get('inventories', [InventoryController::class, 'index']);
+
+        // 库存台账
+        Route::get('stock', [StockController::class, 'index']);
+        Route::get('stock/export', [StockController::class, 'export']);
+
+        // 调拨管理
+        Route::get('transfers', [TransferOrderController::class, 'index']);
+        Route::post('transfers', [TransferOrderController::class, 'store']);
+        Route::get('transfers/{transferOrder}', [TransferOrderController::class, 'show']);
+        Route::put('transfers/{transferOrder}/confirm', [TransferOrderController::class, 'confirm']);
+        Route::put('transfers/{transferOrder}/cancel', [TransferOrderController::class, 'cancel']);
+
+        // 盘点管理
+        Route::get('checks', [InventoryCheckController::class, 'index']);
+        Route::post('checks', [InventoryCheckController::class, 'store']);
+        Route::get('checks/{inventoryCheck}', [InventoryCheckController::class, 'show']);
+        Route::put('checks/{inventoryCheck}/complete', [InventoryCheckController::class, 'complete']);
     });
 
     // --- 财务管理模块 ---
diff --git a/deploy.sh b/deploy.sh
new file mode 100755
index 0000000..69abb59
--- /dev/null
+++ b/deploy.sh
@@ -0,0 +1,26 @@
+#!/bin/bash
+# 月子 SaaS 一键部署
+# 用法：./deploy.sh [commit message]
+set -e
+
+SERVER="root@82.157.47.215"
+COMMIT_MSG="${1:-deploy: update}"
+ROOT_DIR="$(cd "$(dirname "$0")" && pwd)"
+
+echo "▶ 构建前端..."
+cd "$ROOT_DIR/frontend"
+npm run build
+
+echo "▶ 提交变更（含 dist）..."
+cd "$ROOT_DIR"
+git add -A
+git diff --cached --quiet && echo "  无变更，跳过提交" || git commit -m "$COMMIT_MSG"
+
+echo "▶ 推送到远程..."
+git push origin main
+
+echo "▶ 通知服务器更新..."
+ssh "$SERVER" '/var/www/saas/deploy.sh'
+
+echo ""
+echo "✅ 部署完成！"
diff --git a/docs/api-check-report.md b/docs/api-check-report.md
new file mode 100644
index 0000000..0104295
--- /dev/null
+++ b/docs/api-check-report.md
@@ -0,0 +1,121 @@
+# 前后端接口联调检查报告
+
+> 生成时间：2026-03-14
+> 检查范围：前端 `src/api/*.js` ↔ 后端 `routes/api.php`
+
+---
+
+## 总体评估
+
+| 模块 | 状态 | 备注 |
+|------|------|------|
+| 系统设置 | ✅ 完全匹配 | |
+| CRM | ✅ 完全匹配 | |
+| 房务 Room | ✅ 完全匹配 | |
+| 护理 Care | ✅ 已修复 | resolve→handle别名修复；healthMetric.delete移除 |
+| 月子餐 Meal | ⚠️ 部分匹配 | getDetail不存在后端路由（见下） |
+| 服务产康 Service | ✅ 已修复 | complete方法移除，统一用finish |
+| 月嫂 Nanny | ✅ 完全匹配 | |
+| 进销存 Inventory | ✅ 已修复 | stock/transfers/checks 3个Controller已创建，迁移已执行 |
+| 财务 Finance | ✅ 已修复 | paymentApi.confirm→audit |
+| 人事 HR | ✅ 完全匹配 | |
+| 办公协同 Office | ✅ 完全匹配 | 审批流引擎已升级 |
+| 报表 Report | ✅ 完全匹配 | |
+| 知识库 KB | ✅ 完全匹配 | |
+
+---
+
+## 已修复问题
+
+### ✅ care.js — careExceptionApi.resolve 路径修复
+- **问题**：前端调用 `PUT /care/exceptions/{id}/resolve`，后端只有 `/handle`
+- **修复**：将 `resolve` 方法改为指向 `/handle` 的别名
+
+### ✅ care.js — healthMetricApi.delete 移除
+- **问题**：前端调用 `DELETE /care/health-metrics/{id}`，后端无此路由
+- **修复**：移除该方法（健康指标不支持前端删除）
+
+### ✅ finance.js — paymentApi.confirm 改名
+- **问题**：前端调用 `PUT /finance/records/{id}/confirm`，后端路由为 `/audit`
+- **修复**：方法改为 `audit`，路径对齐
+
+### ✅ service.js — serviceExecutionApi.complete 移除
+- **问题**：前端有 `complete` 方法调用 `/complete`，后端无此路由（只有 `/finish`）
+- **修复**：移除 `complete`，使用 `finish` 统一
+
+---
+
+## 已补充后端（2026-03-14 完成）
+
+### ✅ inventory — 库存台账 (stock)
+- `StockController` 已创建，基于 `inventories` 表聚合，支持 `low_stock` 过滤
+- 路由：`GET /inventory/stock`, `GET /inventory/stock/export`
+
+### ✅ inventory — 调拨管理 (transfers)
+- `TransferOrderController` 已创建，`transfer_orders` 表已迁移
+- confirm 时自动更新双仓库库存（事务保护）
+- 路由：GET/POST/GET{id}/confirm/cancel
+
+### ✅ inventory — 盘点管理 (checks)
+- `InventoryCheckController` 已创建，`inventory_checks` 表已迁移
+- complete 时按实际数量修正 inventories 表（事务保护）
+- 路由：GET/POST/GET{id}/complete
+
+---
+
+## 其他注意事项
+
+### meal.js — mealReviewApi.getDetail
+- 后端 `/meal/reviews` 只有 `GET list` 和 `POST create`，无 `GET {id}`
+- 前端 `getDetail` 方法存在但暂时用不到（reviews 页面未调用），低优先级
+
+### request.js baseURL
+- 配置 `baseURL: '/api/v1'` ✅ 与后端路由前缀一致
+
+### 认证
+- 所有请求通过 `Authorization: Bearer {token}` 传递，与 Sanctum 配置一致 ✅
+
+---
+
+## 全链路修复记录（2026-03-14）
+
+### P0 — 运行时必崩（已修复）
+| 文件 | 问题 | 修复 |
+|------|------|------|
+| `views/finance/payments/index.vue` | `paymentApi.confirm` 不存在 | 改为 `paymentApi.audit` |
+| `views/service/executions/index.vue` | `serviceExecutionApi.complete` 不存在 | 改为 `serviceExecutionApi.finish` |
+| `views/meal/reviews/index.vue` | `mealReviewApi.getDetail` 不存在且后端无路由 | 直接用行数据 `row` 展示详情 |
+| `views/care/health-metrics/index.vue` | `healthMetricApi.delete` 不存在 | 改为本地 filter 移除 |
+
+### P1 — 系统模块整体404（已修复）
+| 文件 | 问题 | 修复 |
+|------|------|------|
+| `api/system.js` - `dictApi` | 全部使用 `/dict-types`，后端路由是 `/dictionaries` | 重写 dictApi 路径，item 操作签名适配 |
+| `api/system.js` - `userApi.resetPassword` | POST `/reset-password`，后端是 PUT `/password` | 改为 `put` + 正确路径 |
+| `api/system.js` - `userApi.updateStatus` | PATCH，后端是 PUT | 改为 `put` |
+| `api/system.js` - `roleApi.assignPermissions` | POST，后端是 PUT | 改为 `put` |
+| `api/system.js` - `roleApi.getPermissions` | 后端无此子路由 | 删除此方法 |
+
+### P2 — except(['show']) 导致404（已修复）
+| 文件 | 问题 | 修复 |
+|------|------|------|
+| `api/system.js` - `departmentApi` | `getDetail`/`getTree` 后端无路由 | 删除；页面改用行数据 + `getList`+本地buildTree |
+| `api/system.js` - `positionApi` | `getDetail` 后端无路由 | 删除；页面改用行数据 |
+| `api/system.js` - `menuApi` | `getDetail`/`getTree` 后端无路由 | 删除；页面改用行数据 + `getList`+本地buildTree |
+| `api/system.js` - `permissionApi` | `getDetail`/`getTree` 后端无路由 | 删除；roles页改用 `getList`+本地buildTree |
+| `api/system.js` - `logApi` | `getDetail` 后端无路由 | 删除此方法 |
+
+### 页面联动修复
+- `views/system/departments/index.vue`: `getTree` → `getList`+`buildTree`；`getDetail` → 用行数据
+- `views/system/menus/index.vue`: `getTree` → `getList`+`buildTree`；`getDetail` → 用行数据
+- `views/system/positions/index.vue`: `getDetail` → 用行数据
+- `views/system/users/index.vue`: `departmentApi.getTree` → `getList`（平铺列表）
+- `views/system/roles/index.vue`: `permissionApi.getTree` → `getList`+`buildPermTree`；`getPermissions` → `getDetail.permissions`
+- `views/system/dictionaries/index.vue`: 适配新 dictApi 签名（路径/参数全部对齐）
+
+| 优先级 | 任务 | 状态 |
+|--------|------|------|
+| P1 | 执行 migration: `php artisan migrate`（审批节点字段扩展） | ✅ 已完成 |
+| P2 | 创建 inventory transfers/checks 后端 Controller + Migration | ✅ 已完成 |
+| P3 | 完善 inventory stock 聚合查询接口 | ✅ 已完成 |
+| P4 | 补充 meal/reviews/{id} 详情接口（低优） | ⏳ 待处理 |
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 8ec8f05..0a42245 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "@element-plus/icons-vue": "^2.3.2",
+        "@iconify/vue": "^5.0.0",
         "axios": "^1.13.6",
         "element-plus": "^2.13.5",
         "nprogress": "^0.2.0",
@@ -18,10 +19,26 @@
       },
       "devDependencies": {
         "@vitejs/plugin-vue": "^6.0.5",
+        "autoprefixer": "^10.4.27",
+        "postcss": "^8.5.8",
         "sass": "^1.98.0",
+        "tailwindcss": "^3.4.19",
         "vite": "^8.0.0"
       }
     },
+    "node_modules/@alloc/quick-lru": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
+      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/@babel/helper-string-parser": {
       "version": "7.27.1",
       "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
@@ -145,12 +162,65 @@
       "integrity": "sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==",
       "license": "MIT"
     },
+    "node_modules/@iconify/types": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
+      "integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==",
+      "license": "MIT"
+    },
+    "node_modules/@iconify/vue": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@iconify/vue/-/vue-5.0.0.tgz",
+      "integrity": "sha512-C+KuEWIF5nSBrobFJhT//JS87OZ++QDORB6f2q2Wm6fl2mueSTpFBeBsveK0KW9hWiZ4mNiPjsh6Zs4jjdROSg==",
+      "license": "MIT",
+      "dependencies": {
+        "@iconify/types": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/cyberalien"
+      },
+      "peerDependencies": {
+        "vue": ">=3"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.13",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
+      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/@jridgewell/sourcemap-codec": {
       "version": "1.5.5",
       "resolved": "https://registry.npmjs.org/@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.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
     "node_modules/@napi-rs/wasm-runtime": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-1.1.1.tgz",
@@ -168,6 +238,44 @@
         "url": "https://github.com/sponsors/Brooooooklyn"
       }
     },
+    "node_modules/@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/@oxc-project/runtime": {
       "version": "0.115.0",
       "resolved": "https://registry.npmjs.org/@oxc-project/runtime/-/runtime-0.115.0.tgz",
@@ -989,6 +1097,47 @@
         "url": "https://github.com/sponsors/antfu"
       }
     },
+    "node_modules/any-promise": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/anymatch/node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/arg": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/async-validator": {
       "version": "4.2.5",
       "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-4.2.5.tgz",
@@ -1001,6 +1150,43 @@
       "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
       "license": "MIT"
     },
+    "node_modules/autoprefixer": {
+      "version": "10.4.27",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.27.tgz",
+      "integrity": "sha512-NP9APE+tO+LuJGn7/9+cohklunJsXWiaWEfV3si4Gi/XHDwVNgkwr1J3RQYFIvPy76GmJ9/bW8vyoU1LcxwKHA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.28.1",
+        "caniuse-lite": "^1.0.30001774",
+        "fraction.js": "^5.3.4",
+        "picocolors": "^1.1.1",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "bin": {
+        "autoprefixer": "bin/autoprefixer"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
     "node_modules/axios": {
       "version": "1.13.6",
       "resolved": "https://registry.npmjs.org/axios/-/axios-1.13.6.tgz",
@@ -1012,6 +1198,32 @@
         "proxy-from-env": "^1.1.0"
       }
     },
+    "node_modules/baseline-browser-mapping": {
+      "version": "2.10.7",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.7.tgz",
+      "integrity": "sha512-1ghYO3HnxGec0TCGBXiDLVns4eCSx4zJpxnHrlqFQajmhfKMQBzUGDdkMK7fUW7PTHTeLf+j87aTuKuuwWzMGw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "baseline-browser-mapping": "dist/cli.cjs"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/binary-extensions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
+      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/birpc": {
       "version": "2.9.0",
       "resolved": "https://registry.npmjs.org/birpc/-/birpc-2.9.0.tgz",
@@ -1021,6 +1233,53 @@
         "url": "https://github.com/sponsors/antfu"
       }
     },
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fill-range": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/browserslist": {
+      "version": "4.28.1",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.1.tgz",
+      "integrity": "sha512-ZC5Bd0LgJXgwGqUknZY/vkUQ04r8NXnJZ3yYi4vDmSiZmC/pdSN0NbNRPxZpbtO4uAfDUAFffO8IZoM3Gj8IkA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "baseline-browser-mapping": "^2.9.0",
+        "caniuse-lite": "^1.0.30001759",
+        "electron-to-chromium": "^1.5.263",
+        "node-releases": "^2.0.27",
+        "update-browserslist-db": "^1.2.0"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+      }
+    },
     "node_modules/call-bind-apply-helpers": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
@@ -1034,6 +1293,37 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/camelcase-css": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
+      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001778",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001778.tgz",
+      "integrity": "sha512-PN7uxFL+ExFJO61aVmP1aIEG4i9whQd4eoSCebav62UwDyp5OHh06zN4jqKSMePVgxHifCw1QJxdRkA1Pisekg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "CC-BY-4.0"
+    },
     "node_modules/chokidar": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
@@ -1062,6 +1352,16 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/commander": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/copy-anything": {
       "version": "4.0.5",
       "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-4.0.5.tgz",
@@ -1077,6 +1377,19 @@
         "url": "https://github.com/sponsors/mesqueeb"
       }
     },
+    "node_modules/cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/csstype": {
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
@@ -1108,6 +1421,20 @@
         "node": ">=8"
       }
     },
+    "node_modules/didyoumean": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/dlv": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/dunder-proto": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
@@ -1122,6 +1449,13 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/electron-to-chromium": {
+      "version": "1.5.313",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.313.tgz",
+      "integrity": "sha512-QBMrTWEf00GXZmJyx2lbYD45jpI3TUFnNIzJ5BBc8piGUDwMPa1GV6HJWTZVvY/eiN3fSopl7NRbgGp9sZ9LTA==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/element-plus": {
       "version": "2.13.5",
       "resolved": "https://registry.npmjs.org/element-plus/-/element-plus-2.13.5.tgz",
@@ -1204,12 +1538,62 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/escalade": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/estree-walker": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
       "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
       "license": "MIT"
     },
+    "node_modules/fast-glob": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
+      "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.8"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "node_modules/fast-glob/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/fastq": {
+      "version": "1.20.1",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.20.1.tgz",
+      "integrity": "sha512-GGToxJ/w1x32s/D2EKND7kTil4n8OVk/9mycTc4VDza13lOvpUZTGX3mFSCtV9ksdGBVzvsyAVLM6mHFThxXxw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "reusify": "^1.0.4"
+      }
+    },
     "node_modules/fdir": {
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
@@ -1228,6 +1612,19 @@
         }
       }
     },
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/follow-redirects": {
       "version": "1.15.11",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.11.tgz",
@@ -1264,6 +1661,20 @@
         "node": ">= 6"
       }
     },
+    "node_modules/fraction.js": {
+      "version": "5.3.4",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-5.3.4.tgz",
+      "integrity": "sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/rawify"
+      }
+    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -1325,6 +1736,19 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/gopd": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
@@ -1389,13 +1813,41 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-core-module": {
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
+      "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
       "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -1406,7 +1858,6 @@
       "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
       "dependencies": {
         "is-extglob": "^2.1.1"
       },
@@ -1414,6 +1865,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
     "node_modules/is-what": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/is-what/-/is-what-5.5.0.tgz",
@@ -1426,6 +1887,16 @@
         "url": "https://github.com/sponsors/mesqueeb"
       }
     },
+    "node_modules/jiti": {
+      "version": "1.21.7",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
+      "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jiti": "bin/jiti.js"
+      }
+    },
     "node_modules/lightningcss": {
       "version": "1.32.0",
       "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.32.0.tgz",
@@ -1687,6 +2158,26 @@
         "url": "https://opencollective.com/parcel"
       }
     },
+    "node_modules/lilconfig": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
+      "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antonk52"
+      }
+    },
+    "node_modules/lines-and-columns": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/lodash": {
       "version": "4.17.23",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.23.tgz",
@@ -1734,6 +2225,43 @@
       "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==",
       "license": "MIT"
     },
+    "node_modules/merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/micromatch": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/micromatch/node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
     "node_modules/mime-db": {
       "version": "1.52.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
@@ -1761,6 +2289,18 @@
       "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==",
       "license": "MIT"
     },
+    "node_modules/mz": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
+      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.0.0",
+        "object-assign": "^4.0.1",
+        "thenify-all": "^1.0.0"
+      }
+    },
     "node_modules/nanoid": {
       "version": "3.3.11",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
@@ -1787,6 +2327,23 @@
       "license": "MIT",
       "optional": true
     },
+    "node_modules/node-releases": {
+      "version": "2.0.36",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.36.tgz",
+      "integrity": "sha512-TdC8FSgHz8Mwtw9g5L4gR/Sh9XhSP/0DEkQxfEFXOpiul5IiHgHan2VhYYb6agDSfp4KuvltmGApc8HMgUrIkA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/normalize-wheel-es": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/normalize-wheel-es/-/normalize-wheel-es-1.2.0.tgz",
@@ -1799,6 +2356,33 @@
       "integrity": "sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA==",
       "license": "MIT"
     },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-hash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
+      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/perfect-debounce": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/perfect-debounce/-/perfect-debounce-1.0.0.tgz",
@@ -1824,6 +2408,16 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/pinia": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/pinia/-/pinia-3.0.4.tgz",
@@ -1845,6 +2439,16 @@
         }
       }
     },
+    "node_modules/pirates": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.7.tgz",
+      "integrity": "sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/postcss": {
       "version": "8.5.8",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.8.tgz",
@@ -1873,12 +2477,177 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/postcss-import": {
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
+      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.0.0",
+        "read-cache": "^1.0.0",
+        "resolve": "^1.1.7"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
+    "node_modules/postcss-js": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.1.0.tgz",
+      "integrity": "sha512-oIAOTqgIo7q2EOwbhb8UalYePMvYoIeRY2YKntdpFQXNosSu3vLrniGgmH9OKs/qAkfoj5oB3le/7mINW1LCfw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "camelcase-css": "^2.0.1"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >= 16"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.21"
+      }
+    },
+    "node_modules/postcss-load-config": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-6.0.1.tgz",
+      "integrity": "sha512-oPtTM4oerL+UXmx+93ytZVN82RrlY/wPUV8IeDxFrzIjXOLF1pN+EmKPLbubvKHT2HC20xXsCAH2Z+CKV6Oz/g==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "lilconfig": "^3.1.1"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "peerDependencies": {
+        "jiti": ">=1.21.0",
+        "postcss": ">=8.0.9",
+        "tsx": "^4.8.1",
+        "yaml": "^2.4.2"
+      },
+      "peerDependenciesMeta": {
+        "jiti": {
+          "optional": true
+        },
+        "postcss": {
+          "optional": true
+        },
+        "tsx": {
+          "optional": true
+        },
+        "yaml": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/postcss-nested": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz",
+      "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "postcss-selector-parser": "^6.1.1"
+      },
+      "engines": {
+        "node": ">=12.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.14"
+      }
+    },
+    "node_modules/postcss-selector-parser": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
+      "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/proxy-from-env": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
       "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
       "license": "MIT"
     },
+    "node_modules/queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/read-cache": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "pify": "^2.3.0"
+      }
+    },
     "node_modules/readdirp": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
@@ -1893,6 +2662,38 @@
         "url": "https://paulmillr.com/funding/"
       }
     },
+    "node_modules/resolve": {
+      "version": "1.22.11",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.11.tgz",
+      "integrity": "sha512-RfqAvLnMl313r7c9oclB1HhUEAezcpLjz95wFH4LVuhk9JF/r22qmVP9AMmOU4vMX7Q8pN8jwNg/CSpdFnMjTQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-core-module": "^2.16.1",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/reusify": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
+      "integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "iojs": ">=1.0.0",
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/rfdc": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.4.1.tgz",
@@ -1940,6 +2741,30 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
     "node_modules/sass": {
       "version": "1.98.0",
       "resolved": "https://registry.npmjs.org/sass/-/sass-1.98.0.tgz",
@@ -1979,6 +2804,29 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/sucrase": {
+      "version": "3.35.1",
+      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.1.tgz",
+      "integrity": "sha512-DhuTmvZWux4H1UOnWMB3sk0sbaCVOoQZjv8u1rDoTV0HTdGem9hkAZtl4JZy8P2z4Bg0nT+YMeOFyVr4zcG5Tw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.2",
+        "commander": "^4.0.0",
+        "lines-and-columns": "^1.1.6",
+        "mz": "^2.7.0",
+        "pirates": "^4.0.1",
+        "tinyglobby": "^0.2.11",
+        "ts-interface-checker": "^0.1.9"
+      },
+      "bin": {
+        "sucrase": "bin/sucrase",
+        "sucrase-node": "bin/sucrase-node"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
     "node_modules/superjson": {
       "version": "2.2.6",
       "resolved": "https://registry.npmjs.org/superjson/-/superjson-2.2.6.tgz",
@@ -1991,6 +2839,144 @@
         "node": ">=16"
       }
     },
+    "node_modules/supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/tailwindcss": {
+      "version": "3.4.19",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.19.tgz",
+      "integrity": "sha512-3ofp+LL8E+pK/JuPLPggVAIaEuhvIz4qNcf3nA1Xn2o/7fb7s/TYpHhwGDv1ZU3PkBluUVaF8PyCHcm48cKLWQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "arg": "^5.0.2",
+        "chokidar": "^3.6.0",
+        "didyoumean": "^1.2.2",
+        "dlv": "^1.1.3",
+        "fast-glob": "^3.3.2",
+        "glob-parent": "^6.0.2",
+        "is-glob": "^4.0.3",
+        "jiti": "^1.21.7",
+        "lilconfig": "^3.1.3",
+        "micromatch": "^4.0.8",
+        "normalize-path": "^3.0.0",
+        "object-hash": "^3.0.0",
+        "picocolors": "^1.1.1",
+        "postcss": "^8.4.47",
+        "postcss-import": "^15.1.0",
+        "postcss-js": "^4.0.1",
+        "postcss-load-config": "^4.0.2 || ^5.0 || ^6.0",
+        "postcss-nested": "^6.2.0",
+        "postcss-selector-parser": "^6.1.2",
+        "resolve": "^1.22.8",
+        "sucrase": "^3.35.0"
+      },
+      "bin": {
+        "tailwind": "lib/cli.js",
+        "tailwindcss": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/tailwindcss/node_modules/chokidar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/tailwindcss/node_modules/chokidar/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/tailwindcss/node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/tailwindcss/node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
+    "node_modules/thenify": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
+      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.0.0"
+      }
+    },
+    "node_modules/thenify-all": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
+      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "thenify": ">= 3.1.0 < 4"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.15",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
@@ -2008,6 +2994,26 @@
         "url": "https://github.com/sponsors/SuperchupuDev"
       }
     },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/ts-interface-checker": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
+      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
     "node_modules/tslib": {
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
@@ -2016,6 +3022,44 @@
       "license": "0BSD",
       "optional": true
     },
+    "node_modules/update-browserslist-db": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz",
+      "integrity": "sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "escalade": "^3.2.0",
+        "picocolors": "^1.1.1"
+      },
+      "bin": {
+        "update-browserslist-db": "cli.js"
+      },
+      "peerDependencies": {
+        "browserslist": ">= 4.21.0"
+      }
+    },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/vite": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/vite/-/vite-8.0.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index afb8357..624eb13 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.3.2",
+    "@iconify/vue": "^5.0.0",
     "axios": "^1.13.6",
     "element-plus": "^2.13.5",
     "nprogress": "^0.2.0",
@@ -19,7 +20,10 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.5",
+    "autoprefixer": "^10.4.27",
+    "postcss": "^8.5.8",
     "sass": "^1.98.0",
+    "tailwindcss": "^3.4.19",
     "vite": "^8.0.0"
   }
 }
diff --git a/frontend/postcss.config.js b/frontend/postcss.config.js
new file mode 100644
index 0000000..2e7af2b
--- /dev/null
+++ b/frontend/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/frontend/src/api/care.js b/frontend/src/api/care.js
index fd06fc7..c04e8c1 100644
--- a/frontend/src/api/care.js
+++ b/frontend/src/api/care.js
@@ -33,11 +33,13 @@ export const careExceptionApi = {
   getDetail: (id) => request.get(`/care/exceptions/${id}`),
   create: (data) => request.post('/care/exceptions', data),
   update: (id, data) => request.put(`/care/exceptions/${id}`, data),
-  handle: (id, data) => request.put(`/care/exceptions/${id}/handle`, data)
+  handle: (id, data) => request.put(`/care/exceptions/${id}/handle`, data),
+  resolve: (id, data) => request.put(`/care/exceptions/${id}/handle`, data) // alias → handle
 }
 
 // ─── Health Metrics ───────────────────────────────────────────────────────────
 export const healthMetricApi = {
   getList: (params) => request.get('/care/health-metrics', { params }),
   create: (data) => request.post('/care/health-metrics', data)
+  // Note: backend has no DELETE route; remove locally only
 }
diff --git a/frontend/src/api/finance.js b/frontend/src/api/finance.js
index 2092551..28b57b8 100644
--- a/frontend/src/api/finance.js
+++ b/frontend/src/api/finance.js
@@ -48,3 +48,10 @@ export const invoiceApi = {
   delete: (id) => request.delete(`/finance/invoices/${id}`),
   issue: (id) => request.put(`/finance/invoices/${id}/issue`)
 }
+
+// ─── Payment Records ──────────────────────────────────────────────────────────
+export const paymentApi = {
+  getList: (params) => request.get('/finance/records', { params: { type: 'payment', ...params } }),
+  create: (data) => request.post('/finance/records', data),
+  audit: (id, data) => request.put(`/finance/records/${id}/audit`, data) // was: confirm → audit
+}
diff --git a/frontend/src/api/inventory.js b/frontend/src/api/inventory.js
index 57deb32..58be4e7 100644
--- a/frontend/src/api/inventory.js
+++ b/frontend/src/api/inventory.js
@@ -49,3 +49,26 @@ export const stockMovementApi = {
 export const inventoryApi = {
   getList: (params) => request.get('/inventory/inventories', { params })
 }
+
+// ─── Stock Query ─────────────────────────────────────────────────────────────
+export const stockApi = {
+  getList: (params) => request.get('/inventory/stock', { params }),
+  export: (params) => request.get('/inventory/stock/export', { params, responseType: 'blob' })
+}
+
+// ─── Transfer Orders ─────────────────────────────────────────────────────────
+export const transferApi = {
+  getList: (params) => request.get('/inventory/transfers', { params }),
+  getDetail: (id) => request.get(`/inventory/transfers/${id}`),
+  create: (data) => request.post('/inventory/transfers', data),
+  confirm: (id) => request.put(`/inventory/transfers/${id}/confirm`),
+  cancel: (id) => request.put(`/inventory/transfers/${id}/cancel`)
+}
+
+// ─── Inventory Checks ────────────────────────────────────────────────────────
+export const inventoryCheckApi = {
+  getList: (params) => request.get('/inventory/checks', { params }),
+  getDetail: (id) => request.get(`/inventory/checks/${id}`),
+  create: (data) => request.post('/inventory/checks', data),
+  complete: (id, data) => request.put(`/inventory/checks/${id}/complete`, data)
+}
diff --git a/frontend/src/api/meal.js b/frontend/src/api/meal.js
index e17aee0..015c79e 100644
--- a/frontend/src/api/meal.js
+++ b/frontend/src/api/meal.js
@@ -32,5 +32,6 @@ export const dailyMealPlanApi = {
 // ─── Meal Reviews ─────────────────────────────────────────────────────────────
 export const mealReviewApi = {
   getList: (params) => request.get('/meal/reviews', { params }),
+  getDetail: (id) => request.get(`/meal/reviews/${id}`),
   create: (data) => request.post('/meal/reviews', data)
 }
diff --git a/frontend/src/api/service.js b/frontend/src/api/service.js
index df16f85..7a9c9a0 100644
--- a/frontend/src/api/service.js
+++ b/frontend/src/api/service.js
@@ -35,4 +35,5 @@ export const serviceExecutionApi = {
   create: (data) => request.post('/service/executions', data),
   start: (id) => request.put(`/service/executions/${id}/start`),
   finish: (id) => request.put(`/service/executions/${id}/finish`)
+  // complete → finish (backend only has /finish, removed duplicate)
 }
diff --git a/frontend/src/api/system.js b/frontend/src/api/system.js
index 6b78b80..a5eea3c 100644
--- a/frontend/src/api/system.js
+++ b/frontend/src/api/system.js
@@ -10,28 +10,27 @@ export const storeApi = {
   delete: (id) => request.delete(`/system/stores/${id}`)
 }
 
-// ─── Departments ────────────────────────────────────────────────────────────
+// ─── Departments ─────────────────────────────────────────────────────────────
+// 后端 except(['show'])，无 getDetail/getTree 路由
 
 export const departmentApi = {
   getList: (params) => request.get('/system/departments', { params }),
-  getDetail: (id) => request.get(`/system/departments/${id}`),
   create: (data) => request.post('/system/departments', data),
   update: (id, data) => request.put(`/system/departments/${id}`, data),
-  delete: (id) => request.delete(`/system/departments/${id}`),
-  getTree: () => request.get('/system/departments/tree')
+  delete: (id) => request.delete(`/system/departments/${id}`)
 }
 
-// ─── Positions ──────────────────────────────────────────────────────────────
+// ─── Positions ───────────────────────────────────────────────────────────────
+// 后端 except(['show'])，无 getDetail 路由
 
 export const positionApi = {
   getList: (params) => request.get('/system/positions', { params }),
-  getDetail: (id) => request.get(`/system/positions/${id}`),
   create: (data) => request.post('/system/positions', data),
   update: (id, data) => request.put(`/system/positions/${id}`, data),
   delete: (id) => request.delete(`/system/positions/${id}`)
 }
 
-// ─── Users ──────────────────────────────────────────────────────────────────
+// ─── Users ───────────────────────────────────────────────────────────────────
 
 export const userApi = {
   getList: (params) => request.get('/system/users', { params }),
@@ -39,11 +38,13 @@ export const userApi = {
   create: (data) => request.post('/system/users', data),
   update: (id, data) => request.put(`/system/users/${id}`, data),
   delete: (id) => request.delete(`/system/users/${id}`),
-  resetPassword: (id, data) => request.post(`/system/users/${id}/reset-password`, data),
-  updateStatus: (id, status) => request.patch(`/system/users/${id}/status`, { status })
+  resetPassword: (id, data) => request.put(`/system/users/${id}/password`, data),
+  updateStatus: (id, status) => request.put(`/system/users/${id}/status`, { status }),
+  approve: (id) => request.put(`/system/users/${id}/approve`),
+  reject: (id) => request.put(`/system/users/${id}/reject`)
 }
 
-// ─── Roles ──────────────────────────────────────────────────────────────────
+// ─── Roles ───────────────────────────────────────────────────────────────────
 
 export const roleApi = {
   getList: (params) => request.get('/system/roles', { params }),
@@ -52,58 +53,65 @@ export const roleApi = {
   update: (id, data) => request.put(`/system/roles/${id}`, data),
   delete: (id) => request.delete(`/system/roles/${id}`),
   assignPermissions: (id, permissionIds) =>
-    request.post(`/system/roles/${id}/permissions`, { permission_ids: permissionIds }),
-  getPermissions: (id) => request.get(`/system/roles/${id}/permissions`)
+    request.put(`/system/roles/${id}/permissions`, { permission_ids: permissionIds })
+  // getPermissions: 后端无此子路由，通过 getDetail 的 role.permissions 关联获取
 }
 
-// ─── Menus ──────────────────────────────────────────────────────────────────
+// ─── Menus ───────────────────────────────────────────────────────────────────
+// 后端 except(['show'])，无 getDetail/getTree 路由
 
 export const menuApi = {
   getList: (params) => request.get('/system/menus', { params }),
-  getTree: () => request.get('/system/menus/tree'),
-  getDetail: (id) => request.get(`/system/menus/${id}`),
   create: (data) => request.post('/system/menus', data),
   update: (id, data) => request.put(`/system/menus/${id}`, data),
   delete: (id) => request.delete(`/system/menus/${id}`)
 }
 
-// ─── Permissions ────────────────────────────────────────────────────────────
+// ─── Permissions ─────────────────────────────────────────────────────────────
+// 后端 except(['show'])，无 getDetail/getTree 路由
 
 export const permissionApi = {
   getList: (params) => request.get('/system/permissions', { params }),
-  getTree: () => request.get('/system/permissions/tree'),
-  getDetail: (id) => request.get(`/system/permissions/${id}`),
   create: (data) => request.post('/system/permissions', data),
   update: (id, data) => request.put(`/system/permissions/${id}`, data),
   delete: (id) => request.delete(`/system/permissions/${id}`)
 }
 
-// ─── Dictionaries ────────────────────────────────────────────────────────────
+// ─── Dictionaries ─────────────────────────────────────────────────────────────
+// 后端路由：/system/dictionaries (CRUD except show/update)
+// 字典项：GET|POST /dictionaries/{id}/items
+// 字典项更新/删除：PUT|DELETE /dictionary-items/{item}
 
 export const dictApi = {
   // Dictionary types
-  getTypeList: (params) => request.get('/system/dict-types', { params }),
-  getTypeDetail: (id) => request.get(`/system/dict-types/${id}`),
-  createType: (data) => request.post('/system/dict-types', data),
-  updateType: (id, data) => request.put(`/system/dict-types/${id}`, data),
-  deleteType: (id) => request.delete(`/system/dict-types/${id}`),
+  getTypeList: (params) => request.get('/system/dictionaries', { params }),
+  createType: (data) => request.post('/system/dictionaries', data),
+  deleteType: (id) => request.delete(`/system/dictionaries/${id}`),
 
-  // Dictionary items
-  getItemList: (typeId, params) =>
-    request.get(`/system/dict-types/${typeId}/items`, { params }),
-  getItemDetail: (typeId, itemId) =>
-    request.get(`/system/dict-types/${typeId}/items/${itemId}`),
-  createItem: (typeId, data) =>
-    request.post(`/system/dict-types/${typeId}/items`, data),
-  updateItem: (typeId, itemId, data) =>
-    request.put(`/system/dict-types/${typeId}/items/${itemId}`, data),
-  deleteItem: (typeId, itemId) =>
-    request.delete(`/system/dict-types/${typeId}/items/${itemId}`)
+  // Dictionary items（挂在 dictionary 下）
+  getItemList: (dictId, params) =>
+    request.get(`/system/dictionaries/${dictId}/items`, { params }),
+  createItem: (dictId, data) =>
+    request.post(`/system/dictionaries/${dictId}/items`, data),
+  updateItem: (itemId, data) =>
+    request.put(`/system/dictionary-items/${itemId}`, data),
+  deleteItem: (itemId) =>
+    request.delete(`/system/dictionary-items/${itemId}`)
 }
 
-// ─── Operation Logs ─────────────────────────────────────────────────────────
+// ─── Operation Logs ──────────────────────────────────────────────────────────
+// 后端仅有 index 路由，无 show
 
 export const logApi = {
-  getList: (params) => request.get('/system/operation-logs', { params }),
-  getDetail: (id) => request.get(`/system/operation-logs/${id}`)
+  getList: (params) => request.get('/system/operation-logs', { params })
+}
+
+// ─── Registration Packages ────────────────────────────────────────────────────
+
+export const registrationPackageApi = {
+  getList: (params) => request.get('/system/registration-packages', { params }),
+  getDetail: (id) => request.get(`/system/registration-packages/${id}`),
+  create: (data) => request.post('/system/registration-packages', data),
+  update: (id, data) => request.put(`/system/registration-packages/${id}`, data),
+  delete: (id) => request.delete(`/system/registration-packages/${id}`)
 }
diff --git a/frontend/src/layout/components/Header.vue b/frontend/src/layout/components/Header.vue
index 5abdd44..c450166 100644
--- a/frontend/src/layout/components/Header.vue
+++ b/frontend/src/layout/components/Header.vue
@@ -3,12 +3,10 @@ import { computed } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { useUserStore } from '@/stores/user.js'
 import { ElMessageBox, ElMessage } from 'element-plus'
+import { Icon } from '@iconify/vue'
 
 const props = defineProps({
-  collapsed: {
-    type: Boolean,
-    default: false
-  }
+  collapsed: { type: Boolean, default: false }
 })
 
 const emit = defineEmits(['toggle-sidebar'])
@@ -18,13 +16,17 @@ const route = useRoute()
 const userStore = useUserStore()
 
 const username = computed(() => userStore.userInfo?.name || userStore.userInfo?.username || '用户')
-const storeName = computed(() => userStore.userInfo?.store?.name || '')
+const storeName = computed(() => userStore.userInfo?.store?.name || '所有门店 (总览)')
 
-// Build breadcrumbs from matched routes
-const breadcrumbs = computed(() => {
-  return route.matched
-    .filter((r) => r.meta?.title && !r.meta?.hidden)
-    .map((r) => ({ title: r.meta.title, path: r.path }))
+const pageTitle = computed(() => {
+  const titles = route.matched.filter(r => r.meta?.title && !r.meta?.hidden)
+  return titles.length ? titles[titles.length - 1].meta.title : '工作台'
+})
+
+const today = computed(() => {
+  const d = new Date()
+  const days = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六']
+  return `${d.getFullYear()}年${d.getMonth()+1}月${d.getDate()}日 ${days[d.getDay()]}`
 })
 
 async function handleLogout() {
@@ -37,60 +39,60 @@ async function handleLogout() {
   router.push('/login')
   ElMessage.success('已安全退出')
 }
-
-function goToProfile() {
-  router.push('/system/profile')
-}
 </script>
 
 <template>
-  <div class="header-wrapper">
-    <!-- Left: collapse toggle + breadcrumb -->
-    <div class="header-left">
-      <el-icon
-        class="collapse-btn"
-        :size="20"
+  <div class="flex items-center justify-between h-full px-8 bg-white border-b border-gray-100">
+    <!-- Left -->
+    <div class="flex items-center gap-4">
+      <!-- Collapse toggle -->
+      <button
+        class="p-2 rounded-xl hover:bg-gray-50 text-gray-400 hover:text-gray-600 transition-colors"
         @click="emit('toggle-sidebar')"
       >
-        <Fold v-if="!collapsed" />
-        <Expand v-else />
-      </el-icon>
+        <Icon :icon="collapsed ? 'solar:sidebar-minimalistic-bold' : 'solar:sidebar-minimalistic-bold'" class="text-xl" />
+      </button>
 
-      <el-breadcrumb separator="/" class="breadcrumb">
-        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
-        <el-breadcrumb-item
-          v-for="(crumb, idx) in breadcrumbs"
-          :key="idx"
-          :to="idx < breadcrumbs.length - 1 ? { path: crumb.path } : undefined"
-        >
-          {{ crumb.title }}
-        </el-breadcrumb-item>
-      </el-breadcrumb>
+      <!-- Title + date -->
+      <h3 class="text-base font-bold text-gray-800">{{ pageTitle }}</h3>
+      <div class="h-4 w-px bg-gray-200"></div>
+      <div class="flex items-center text-xs text-gray-400 gap-1.5">
+        <Icon icon="solar:calendar-bold" class="text-sm" />
+        <span>{{ today }}</span>
+      </div>
     </div>
 
-    <!-- Right: store info + user dropdown -->
-    <div class="header-right">
-      <span v-if="storeName" class="store-name">
-        <el-icon><OfficeBuilding /></el-icon>
-        {{ storeName }}
-      </span>
+    <!-- Right -->
+    <div class="flex items-center gap-5">
+      <!-- Bell -->
+      <div class="relative cursor-pointer">
+        <Icon icon="solar:bell-bing-bold-duotone" class="text-2xl text-gray-400 hover:text-rose-500 transition-colors" />
+        <span class="absolute -top-1 -right-1 w-4 h-4 bg-rose-500 text-white text-[9px] rounded-full flex items-center justify-center font-bold border-2 border-white">3</span>
+      </div>
 
+      <!-- Store selector -->
+      <div class="flex items-center gap-1.5 text-sm text-gray-500 cursor-pointer hover:text-gray-700">
+        <span>{{ storeName }}</span>
+        <Icon icon="solar:alt-arrow-down-bold-duotone" class="text-xs text-gray-400" />
+      </div>
+
+      <!-- User -->
       <el-dropdown trigger="click" placement="bottom-end">
-        <div class="user-info">
-          <el-avatar :size="32" class="user-avatar">
-            {{ username.charAt(0).toUpperCase() }}
-          </el-avatar>
-          <span class="username">{{ username }}</span>
-          <el-icon class="arrow"><ArrowDown /></el-icon>
+        <div class="flex items-center gap-2.5 cursor-pointer px-3 py-1.5 rounded-xl hover:bg-gray-50 transition-colors">
+          <div class="w-8 h-8 rounded-full bg-rose-100 flex items-center justify-center text-rose-500 font-bold text-sm">
+            {{ username.charAt(0) }}
+          </div>
+          <span class="text-sm font-medium text-gray-700">{{ username }}</span>
+          <Icon icon="solar:alt-arrow-down-bold-duotone" class="text-xs text-gray-400" />
         </div>
         <template #dropdown>
           <el-dropdown-menu>
-            <el-dropdown-item @click="goToProfile">
-              <el-icon><User /></el-icon>
+            <el-dropdown-item>
+              <Icon icon="solar:user-bold-duotone" class="mr-2" />
               个人信息
             </el-dropdown-item>
             <el-dropdown-item divided @click="handleLogout">
-              <el-icon><SwitchButton /></el-icon>
+              <Icon icon="solar:logout-bold-duotone" class="mr-2" />
               退出登录
             </el-dropdown-item>
           </el-dropdown-menu>
@@ -99,88 +101,3 @@ function goToProfile() {
     </div>
   </div>
 </template>
-
-<style scoped lang="scss">
-.header-wrapper {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  height: var(--header-height);
-  padding: 0 20px;
-  background: #fff;
-  border-bottom: 1px solid var(--color-border);
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
-}
-
-.header-left {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-}
-
-.collapse-btn {
-  cursor: pointer;
-  color: var(--color-text-secondary);
-  padding: 4px;
-  border-radius: 4px;
-  transition: all 0.2s;
-
-  &:hover {
-    color: var(--color-primary);
-    background: var(--color-primary-lighter);
-  }
-}
-
-.breadcrumb {
-  font-size: 14px;
-}
-
-.header-right {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-}
-
-.store-name {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  font-size: 13px;
-  color: var(--color-text-secondary);
-  padding: 4px 10px;
-  background: var(--color-bg);
-  border-radius: 16px;
-}
-
-.user-info {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  cursor: pointer;
-  padding: 4px 8px;
-  border-radius: 6px;
-  transition: background 0.2s;
-
-  &:hover {
-    background: var(--color-bg);
-  }
-}
-
-.user-avatar {
-  background: linear-gradient(135deg, #E8A87C, #D4875A);
-  color: #fff;
-  font-weight: 600;
-  font-size: 14px;
-}
-
-.username {
-  font-size: 14px;
-  color: var(--color-text-primary);
-  font-weight: 500;
-}
-
-.arrow {
-  color: var(--color-text-secondary);
-  font-size: 12px;
-}
-</style>
diff --git a/frontend/src/layout/components/Sidebar.vue b/frontend/src/layout/components/Sidebar.vue
index db7e1d9..dea3d55 100644
--- a/frontend/src/layout/components/Sidebar.vue
+++ b/frontend/src/layout/components/Sidebar.vue
@@ -1,198 +1,150 @@
 <script setup>
 import { computed } from 'vue'
-import { useRoute } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import { useUserStore } from '@/stores/user.js'
+import { Icon } from '@iconify/vue'
 
 const props = defineProps({
-  collapsed: {
-    type: Boolean,
-    default: false
-  }
+  collapsed: { type: Boolean, default: false }
 })
 
 const route = useRoute()
+const router = useRouter()
 const userStore = useUserStore()
 
-const activeMenu = computed(() => route.path)
-
+const activePath = computed(() => route.path)
 const menus = computed(() => userStore.menus)
+const username = computed(() => userStore.userInfo?.name || userStore.userInfo?.username || '用户')
+const storeName = computed(() => userStore.userInfo?.store?.name || '')
+const roleLabel = computed(() => userStore.userInfo?.is_super ? 'SUPER ADMIN' : 'STORE ADMIN')
 
-function resolveIcon(iconName) {
-  return iconName || 'Menu'
+const iconMap = {
+  Odometer: 'solar:widget-add-bold-duotone',
+  House: 'solar:home-bold-duotone',
+  User: 'solar:users-group-rounded-bold-duotone',
+  UserFilled: 'solar:users-group-rounded-bold-duotone',
+  ShoppingCart: 'solar:cart-large-bold-duotone',
+  Goods: 'solar:cart-large-bold-duotone',
+  OfficeBuilding: 'solar:bed-bold-duotone',
+  HeartPulse: 'solar:heart-pulse-bold-duotone',
+  Food: 'solar:cup-bold',
+  Trophy: 'solar:health-bold',
+  Avatar: 'solar:user-speak-bold-duotone',
+  Box: 'solar:box-bold-duotone',
+  Money: 'solar:money-bag-bold-duotone',
+  Wallet: 'solar:money-bag-bold-duotone',
+  Suitcase: 'solar:users-group-two-rounded-bold-duotone',
+  Connection: 'solar:streets-navigation-bold-duotone',
+  DataLine: 'solar:chart-2-bold-duotone',
+  Reading: 'solar:book-bookmark-bold-duotone',
+  Setting: 'solar:settings-bold-duotone',
+  Tools: 'solar:settings-bold-duotone',
+  Menu: 'solar:list-bold-duotone',
+}
+
+function resolveIcon(name) {
+  return iconMap[name] || 'solar:circle-bold-duotone'
+}
+
+function isActive(menu) {
+  if (menu.path && activePath.value.startsWith(menu.path)) return true
+  if (menu.children) return menu.children.some(c => isActive(c))
+  return false
+}
+
+function navigate(path) {
+  if (path) router.push(path)
+}
+
+async function handleLogout() {
+  await userStore.logout()
+  router.push('/login')
 }
 </script>
 
 <template>
-  <div class="sidebar-wrapper" :class="{ collapsed }">
+  <div class="flex flex-col h-full bg-white border-r border-gray-100 overflow-hidden">
     <!-- Logo -->
-    <div class="sidebar-logo">
-      <el-icon :size="28" color="#E8A87C"><House /></el-icon>
-      <span v-if="!collapsed" class="logo-text">宫中有喜</span>
+    <div class="flex items-center gap-3 px-5 py-4 border-b border-gray-50 flex-shrink-0" style="height:64px">
+      <div class="w-9 h-9 bg-rose-500 rounded-xl flex items-center justify-center flex-shrink-0 shadow-sm">
+        <Icon icon="solar:heart-bold" class="text-white text-lg" />
+      </div>
+      <div v-if="!collapsed" class="overflow-hidden">
+        <h2 class="font-bold text-gray-800 text-sm leading-tight">宫中有喜</h2>
+        <span class="text-[10px] bg-rose-100 text-rose-600 px-1.5 py-0.5 rounded font-bold tracking-wider">
+          {{ roleLabel }}
+        </span>
+      </div>
     </div>
 
-    <!-- Menu -->
-    <el-scrollbar class="sidebar-scrollbar">
-      <el-menu
-        :default-active="activeMenu"
-        :collapse="collapsed"
-        :collapse-transition="false"
-        router
-        class="sidebar-menu"
-        background-color="#2D1B0E"
-        text-color="#C8B09A"
-        active-text-color="#E8A87C"
+    <!-- Nav -->
+    <nav class="flex-1 overflow-y-auto no-scrollbar py-3 px-3 space-y-0.5">
+      <!-- Dashboard -->
+      <button
+        class="w-full flex items-center gap-3 px-3 py-2.5 rounded-xl transition-all duration-150 text-left"
+        :class="activePath === '/dashboard' ? 'bg-rose-50 text-rose-500' : 'text-gray-500 hover:bg-gray-50 hover:text-gray-700'"
+        @click="navigate('/dashboard')"
       >
-        <!-- Always show Dashboard first -->
-        <el-menu-item index="/dashboard">
-          <el-icon><Odometer /></el-icon>
-          <template #title>工作台</template>
-        </el-menu-item>
+        <Icon icon="solar:widget-add-bold-duotone" class="text-xl flex-shrink-0" />
+        <span v-if="!collapsed" class="text-sm font-medium truncate">工作台</span>
+        <div v-if="!collapsed && activePath === '/dashboard'" class="ml-auto w-1.5 h-1.5 rounded-full bg-rose-500 flex-shrink-0"></div>
+      </button>
 
-        <!-- Dynamic menu items from server -->
-        <template v-for="menu in menus" :key="menu.id || menu.path">
-          <!-- Has children → sub-menu -->
-          <el-sub-menu
-            v-if="menu.children && menu.children.length > 0 && menu.visible !== 0"
-            :index="menu.path || `menu-${menu.id}`"
+      <!-- Dynamic menus -->
+      <template v-for="menu in menus" :key="menu.id || menu.path">
+        <!-- Group with children -->
+        <template v-if="menu.children && menu.children.length > 0 && menu.visible !== 0">
+          <div v-if="!collapsed" class="text-[10px] font-bold text-gray-300 uppercase tracking-widest px-3 pt-4 pb-1.5">
+            {{ menu.name }}
+          </div>
+          <div v-else class="my-2 mx-2 h-px bg-gray-100"></div>
+
+          <button
+            v-for="child in menu.children.filter(c => c.visible !== 0)"
+            :key="child.id || child.path"
+            class="w-full flex items-center gap-3 px-3 py-2.5 rounded-xl transition-all duration-150 text-left"
+            :class="isActive(child) ? 'bg-rose-50 text-rose-500' : 'text-gray-500 hover:bg-gray-50 hover:text-gray-700'"
+            @click="navigate(child.path)"
           >
-            <template #title>
-              <el-icon>
-                <component :is="resolveIcon(menu.icon)" />
-              </el-icon>
-              <span>{{ menu.name }}</span>
-            </template>
-            <template v-for="child in menu.children" :key="child.id || child.path">
-              <el-sub-menu
-                v-if="child.children && child.children.length > 0 && child.visible !== 0"
-                :index="child.path"
-              >
-                <template #title>
-                  <el-icon>
-                    <component :is="resolveIcon(child.icon)" />
-                  </el-icon>
-                  <span>{{ child.name }}</span>
-                </template>
-                <el-menu-item
-                  v-for="grandchild in child.children"
-                  :key="grandchild.id || grandchild.path"
-                  :index="grandchild.path"
-                >
-                  <el-icon>
-                    <component :is="resolveIcon(grandchild.icon)" />
-                  </el-icon>
-                  <template #title>{{ grandchild.name }}</template>
-                </el-menu-item>
-              </el-sub-menu>
-
-              <el-menu-item
-                v-else-if="child.visible !== 0"
-                :index="child.path"
-              >
-                <el-icon>
-                  <component :is="resolveIcon(child.icon)" />
-                </el-icon>
-                <template #title>{{ child.name }}</template>
-              </el-menu-item>
-            </template>
-          </el-sub-menu>
-
-          <!-- No children → single item -->
-          <el-menu-item
-            v-else-if="menu.visible !== 0"
-            :index="menu.path"
-          >
-            <el-icon>
-              <component :is="resolveIcon(menu.icon)" />
-            </el-icon>
-            <template #title>{{ menu.name }}</template>
-          </el-menu-item>
+            <Icon :icon="resolveIcon(child.icon)" class="text-xl flex-shrink-0" />
+            <span v-if="!collapsed" class="text-sm font-medium truncate">{{ child.name }}</span>
+            <div v-if="!collapsed && isActive(child)" class="ml-auto w-1.5 h-1.5 rounded-full bg-rose-500 flex-shrink-0"></div>
+          </button>
         </template>
-      </el-menu>
-    </el-scrollbar>
+
+        <!-- Single item -->
+        <button
+          v-else-if="menu.visible !== 0"
+          class="w-full flex items-center gap-3 px-3 py-2.5 rounded-xl transition-all duration-150 text-left"
+          :class="isActive(menu) ? 'bg-rose-50 text-rose-500' : 'text-gray-500 hover:bg-gray-50 hover:text-gray-700'"
+          @click="navigate(menu.path)"
+        >
+          <Icon :icon="resolveIcon(menu.icon)" class="text-xl flex-shrink-0" />
+          <span v-if="!collapsed" class="text-sm font-medium truncate">{{ menu.name }}</span>
+          <div v-if="!collapsed && isActive(menu)" class="ml-auto w-1.5 h-1.5 rounded-full bg-rose-500 flex-shrink-0"></div>
+        </button>
+      </template>
+    </nav>
+
+    <!-- User card -->
+    <div class="flex-shrink-0 p-3 border-t border-gray-50">
+      <div class="flex items-center gap-3 p-3 bg-gray-50 rounded-2xl" :class="collapsed ? 'justify-center' : ''">
+        <div class="w-9 h-9 rounded-full bg-rose-100 flex items-center justify-center flex-shrink-0 text-rose-500 font-bold text-sm">
+          {{ username.charAt(0) }}
+        </div>
+        <div v-if="!collapsed" class="flex-1 overflow-hidden">
+          <p class="text-sm font-bold text-gray-800 truncate">{{ username }}</p>
+          <p class="text-[11px] text-gray-400 truncate">{{ storeName || '总部管理' }}</p>
+        </div>
+        <button
+          v-if="!collapsed"
+          class="flex-shrink-0 p-1.5 text-rose-400 hover:bg-rose-100 rounded-lg transition-colors"
+          title="退出登录"
+          @click.stop="handleLogout"
+        >
+          <Icon icon="solar:logout-bold-duotone" class="text-lg" />
+        </button>
+      </div>
+    </div>
   </div>
 </template>
-
-<style scoped lang="scss">
-.sidebar-wrapper {
-  display: flex;
-  flex-direction: column;
-  width: var(--sidebar-width);
-  height: 100%;
-  background-color: #2D1B0E;
-  transition: width 0.25s ease;
-  overflow: hidden;
-
-  &.collapsed {
-    width: var(--sidebar-collapsed-width);
-  }
-}
-
-.sidebar-logo {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 10px;
-  height: var(--header-height);
-  padding: 0 16px;
-  background-color: #1E1108;
-  flex-shrink: 0;
-  overflow: hidden;
-  white-space: nowrap;
-
-  .logo-text {
-    font-size: 18px;
-    font-weight: 700;
-    color: #E8A87C;
-    letter-spacing: 2px;
-  }
-}
-
-.sidebar-scrollbar {
-  flex: 1;
-}
-
-.sidebar-menu {
-  border-right: none;
-  height: 100%;
-
-  :deep(.el-menu-item),
-  :deep(.el-sub-menu__title) {
-    height: 48px;
-    line-height: 48px;
-    font-size: 14px;
-
-    &:hover {
-      background-color: #4A2E1A !important;
-      color: #E8A87C !important;
-    }
-  }
-
-  :deep(.el-menu-item.is-active) {
-    background-color: #4A2E1A !important;
-    color: #E8A87C !important;
-    position: relative;
-
-    &::before {
-      content: '';
-      position: absolute;
-      left: 0;
-      top: 0;
-      bottom: 0;
-      width: 3px;
-      background: #E8A87C;
-      border-radius: 0 2px 2px 0;
-    }
-  }
-
-  :deep(.el-sub-menu .el-menu) {
-    background-color: #241509 !important;
-  }
-
-  :deep(.el-menu--collapse) {
-    .el-sub-menu__title span,
-    .el-menu-item span {
-      display: none;
-    }
-  }
-}
-</style>
diff --git a/frontend/src/layout/index.vue b/frontend/src/layout/index.vue
index 95ac759..8682d8c 100644
--- a/frontend/src/layout/index.vue
+++ b/frontend/src/layout/index.vue
@@ -11,21 +11,24 @@ function toggleSidebar() {
 </script>
 
 <template>
-  <div class="layout-wrapper">
+  <div class="flex h-screen overflow-hidden">
     <!-- Sidebar -->
-    <aside class="layout-sidebar" :class="{ collapsed }">
+    <aside
+      class="flex-shrink-0 z-10"
+      :style="{ width: collapsed ? '64px' : '256px', transition: 'width 0.25s ease' }"
+    >
       <Sidebar :collapsed="collapsed" />
     </aside>
 
     <!-- Main area -->
-    <div class="layout-main" :class="{ 'sidebar-collapsed': collapsed }">
+    <div class="flex flex-col flex-1 overflow-hidden">
       <!-- Header -->
-      <header class="layout-header">
+      <header class="flex-shrink-0" style="height: 64px;">
         <Header :collapsed="collapsed" @toggle-sidebar="toggleSidebar" />
       </header>
 
       <!-- Content -->
-      <main class="layout-content">
+      <main class="flex-1 overflow-y-auto no-scrollbar" style="background: #f8fafc;">
         <router-view v-slot="{ Component, route }">
           <transition name="fade-slide" mode="out-in">
             <component :is="Component" :key="route.fullPath" />
@@ -36,56 +39,11 @@ function toggleSidebar() {
   </div>
 </template>
 
-<style scoped lang="scss">
-.layout-wrapper {
-  display: flex;
-  height: 100vh;
-  overflow: hidden;
-}
-
-.layout-sidebar {
-  width: var(--sidebar-width);
-  flex-shrink: 0;
-  transition: width 0.25s ease;
-  z-index: 100;
-
-  &.collapsed {
-    width: var(--sidebar-collapsed-width);
-  }
-}
-
-.layout-main {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  transition: margin-left 0.25s ease;
-}
-
-.layout-header {
-  flex-shrink: 0;
-  height: var(--header-height);
-}
-
-.layout-content {
-  flex: 1;
-  overflow-y: auto;
-  background: var(--color-bg);
-}
-
-// Route transition
+<style>
 .fade-slide-enter-active,
 .fade-slide-leave-active {
-  transition: opacity 0.2s ease, transform 0.2s ease;
-}
-
-.fade-slide-enter-from {
-  opacity: 0;
-  transform: translateY(8px);
-}
-
-.fade-slide-leave-to {
-  opacity: 0;
-  transform: translateY(-8px);
+  transition: opacity 0.15s ease, transform 0.15s ease;
 }
+.fade-slide-enter-from { opacity: 0; transform: translateY(6px); }
+.fade-slide-leave-to  { opacity: 0; transform: translateY(-6px); }
 </style>
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
index c0e530e..7f8ce90 100644
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -17,7 +17,7 @@ const router = createRouter({
 })
 
 // Whitelist paths that don't require authentication
-const WHITE_LIST = ['/login', '/404']
+const WHITE_LIST = ['/login', '/register', '/404']
 
 router.beforeEach(async (to, from, next) => {
   NProgress.start()
diff --git a/frontend/src/router/routes.js b/frontend/src/router/routes.js
index 61283dc..b611670 100644
--- a/frontend/src/router/routes.js
+++ b/frontend/src/router/routes.js
@@ -8,6 +8,12 @@ export const constantRoutes = [
     component: () => import('@/views/login/index.vue'),
     meta: { title: '登录', hidden: true }
   },
+  {
+    path: '/register',
+    name: 'Register',
+    component: () => import('@/views/register/index.vue'),
+    meta: { title: '员工注册', hidden: true }
+  },
   {
     path: '/404',
     name: 'NotFound',
diff --git a/frontend/src/styles/index.scss b/frontend/src/styles/index.scss
index fecda31..377a7d0 100644
--- a/frontend/src/styles/index.scss
+++ b/frontend/src/styles/index.scss
@@ -1,39 +1,45 @@
-// Brand color variables
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* ===== CSS Variables ===== */
 :root {
-  --color-primary: #E8A87C;
-  --color-primary-light: #F5C9A0;
-  --color-primary-lighter: #FBE8D5;
-  --color-primary-dark: #D4875A;
-  --color-primary-darker: #B86B3A;
-  --color-secondary: #C97B5E;
-  --color-bg: #F7F3EF;
-  --color-bg-sidebar: #2D1B0E;
-  --color-bg-sidebar-light: #4A2E1A;
-  --color-text-primary: #2C2C2C;
-  --color-text-secondary: #666666;
-  --color-text-placeholder: #AAAAAA;
-  --color-border: #EAEAEA;
-  --color-success: #67C23A;
-  --color-warning: #E6A23C;
-  --color-danger: #F56C6C;
-  --color-info: #909399;
-  --sidebar-width: 220px;
+  --sidebar-width: 256px;
   --sidebar-collapsed-width: 64px;
-  --header-height: 56px;
+  --header-height: 64px;
+
+  /* Rose 主色 - 对齐原型 */
+  --color-primary: #f43f5e;
+  --color-primary-light: #ffe4e6;
+  --color-primary-lighter: #fff1f2;
+
+  --color-bg: #f8fafc;
+  --color-border: #f1f5f9;
+  --color-text-primary: #1e293b;
+  --color-text-secondary: #64748b;
+
+  /* 兼容旧变量 */
+  --color-success: #16a34a;
+  --color-warning: #d97706;
+  --color-danger: #f43f5e;
+  --color-info: #64748b;
 }
 
-// Element Plus primary color override
+/* ===== Element Plus 主题覆盖 - Rose ===== */
 :root {
-  --el-color-primary: #E8A87C;
-  --el-color-primary-light-3: #F0BB97;
-  --el-color-primary-light-5: #F5C9A0;
-  --el-color-primary-light-7: #F8D8BB;
-  --el-color-primary-light-8: #FBEACE;
-  --el-color-primary-light-9: #FDF4EC;
-  --el-color-primary-dark-2: #D4875A;
+  --el-color-primary: #f43f5e;
+  --el-color-primary-light-3: #f97090;
+  --el-color-primary-light-5: #fba3b2;
+  --el-color-primary-light-7: #fecdd3;
+  --el-color-primary-light-8: #ffe4e6;
+  --el-color-primary-light-9: #fff1f2;
+  --el-color-primary-dark-2: #e11d48;
+  --el-border-radius-base: 10px;
+  --el-border-radius-small: 8px;
 }
 
-// Global reset
+/* ===== Global Reset ===== */
 *,
 *::before,
 *::after {
@@ -42,131 +48,123 @@
   padding: 0;
 }
 
-html,
-body {
+html, body {
   height: 100%;
-  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei',
-    'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'PingFang SC', sans-serif;
   font-size: 14px;
   color: var(--color-text-primary);
   background-color: var(--color-bg);
   -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
 }
 
-#app {
-  height: 100%;
+#app { height: 100%; }
+
+a { color: var(--color-primary); text-decoration: none; }
+a:hover { color: #e11d48; }
+
+/* 隐藏滚动条 */
+.no-scrollbar::-webkit-scrollbar { display: none; }
+.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
+
+/* 细滚动条 */
+::-webkit-scrollbar { width: 4px; height: 4px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 4px; }
+::-webkit-scrollbar-thumb:hover { background: #cbd5e1; }
+
+/* ===== NProgress ===== */
+#nprogress .bar { background: #f43f5e !important; }
+#nprogress .peg { box-shadow: 0 0 10px #f43f5e, 0 0 5px #f43f5e !important; }
+
+/* ===== Element Plus 组件定制 ===== */
+
+/* Table */
+.el-table {
+  --el-table-border-color: #f1f5f9;
+  --el-table-header-bg-color: #f8fafc;
+  --el-table-tr-bg-color: #ffffff;
+  --el-table-row-hover-bg-color: #fff1f2;
+  border-radius: 16px !important;
+  overflow: hidden;
+  border: 1px solid #f1f5f9;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
+}
+.el-table th.el-table__cell {
+  font-size: 11px !important;
+  font-weight: 600 !important;
+  color: #94a3b8 !important;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  background: #f8fafc !important;
+}
+.el-table__inner-wrapper::before { display: none; }
+.el-table td.el-table__cell { border-bottom-color: #f1f5f9; }
+.el-table .el-table__row td { font-size: 13px; color: #374151; }
+
+/* Button */
+.el-button { border-radius: 10px !important; font-weight: 500; }
+.el-button--primary {
+  background-color: #f43f5e !important;
+  border-color: #f43f5e !important;
+}
+.el-button--primary:hover, .el-button--primary:focus {
+  background-color: #e11d48 !important;
+  border-color: #e11d48 !important;
 }
 
-a {
-  color: var(--color-primary);
-  text-decoration: none;
-  &:hover {
-    color: var(--color-primary-dark);
-  }
+/* Input */
+.el-input__wrapper {
+  border-radius: 10px !important;
+  box-shadow: 0 0 0 1px #e2e8f0 inset !important;
 }
+.el-input__wrapper:hover { box-shadow: 0 0 0 1px #f43f5e inset !important; }
+.el-input__wrapper.is-focus { box-shadow: 0 0 0 1px #f43f5e inset !important; }
+.el-select .el-input__wrapper { border-radius: 10px !important; }
+.el-textarea__inner { border-radius: 10px !important; box-shadow: 0 0 0 1px #e2e8f0 inset !important; }
+.el-textarea__inner:focus { box-shadow: 0 0 0 1px #f43f5e inset !important; }
 
-// Custom scrollbar
-::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
+/* Dialog */
+.el-dialog {
+  border-radius: 20px !important;
+  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.15) !important;
 }
+.el-dialog__header { padding: 24px 24px 16px; font-weight: 700; }
+.el-dialog__body { padding: 8px 24px 24px; }
 
-::-webkit-scrollbar-track {
-  background: #f1f1f1;
-  border-radius: 3px;
+/* Tag */
+.el-tag {
+  border-radius: 6px !important;
+  font-weight: 500;
+  font-size: 11px;
 }
+.el-tag--success { background-color: #f0fdf4 !important; color: #16a34a !important; border-color: #bbf7d0 !important; }
+.el-tag--warning { background-color: #fffbeb !important; color: #d97706 !important; border-color: #fde68a !important; }
+.el-tag--danger  { background-color: #fff1f2 !important; color: #f43f5e !important; border-color: #fecdd3 !important; }
+.el-tag--info    { background-color: #f1f5f9 !important; color: #64748b !important; border-color: #e2e8f0 !important; }
 
-::-webkit-scrollbar-thumb {
-  background: #cccccc;
-  border-radius: 3px;
-  &:hover {
-    background: #aaaaaa;
-  }
-}
+/* Pagination */
+.el-pagination { margin-top: 16px; justify-content: flex-end; }
+.el-pagination.is-background .el-pager li.is-active { background-color: #f43f5e !important; }
+.el-pagination.is-background .el-pager li:hover { color: #f43f5e !important; }
 
-// Utility classes
-.flex {
-  display: flex;
-}
-
-.flex-1 {
-  flex: 1;
-}
-
-.flex-center {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.flex-between {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.flex-col {
-  display: flex;
-  flex-direction: column;
-}
-
-.w-full {
-  width: 100%;
-}
-
-.h-full {
-  height: 100%;
-}
-
-.text-center {
-  text-align: center;
-}
-
-.text-right {
-  text-align: right;
-}
-
-.text-primary {
-  color: var(--color-primary);
-}
-
-.text-danger {
-  color: var(--color-danger);
-}
-
-.text-success {
-  color: var(--color-success);
-}
-
-.text-secondary {
-  color: var(--color-text-secondary);
-}
-
-.mt-4 { margin-top: 4px; }
-.mt-8 { margin-top: 8px; }
-.mt-12 { margin-top: 12px; }
-.mt-16 { margin-top: 16px; }
-.mt-24 { margin-top: 24px; }
-.mb-4 { margin-bottom: 4px; }
-.mb-8 { margin-bottom: 8px; }
-.mb-12 { margin-bottom: 12px; }
-.mb-16 { margin-bottom: 16px; }
-.mb-24 { margin-bottom: 24px; }
-.ml-8 { margin-left: 8px; }
-.mr-8 { margin-right: 8px; }
+/* Form */
+.el-form-item__label { font-weight: 500; color: #374151; font-size: 13px; }
 
+/* ===== Layout utilities ===== */
 .page-container {
-  padding: 16px;
+  padding: 24px;
   height: 100%;
   overflow-y: auto;
+  background: #f8fafc;
 }
 
+/* 旧版兼容 */
 .card {
   background: #fff;
-  border-radius: 8px;
+  border-radius: 16px;
   padding: 20px;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
+  border: 1px solid #f1f5f9;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
 }
 
 .search-bar {
@@ -177,15 +175,17 @@ a {
   margin-bottom: 16px;
   padding: 16px 20px;
   background: #fff;
-  border-radius: 8px;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
+  border-radius: 16px;
+  border: 1px solid #f1f5f9;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
 }
 
 .table-container {
   background: #fff;
-  border-radius: 8px;
-  padding: 16px 20px;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
+  border-radius: 16px;
+  padding: 16px;
+  border: 1px solid #f1f5f9;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
 }
 
 .table-actions {
@@ -194,46 +194,3 @@ a {
   justify-content: space-between;
   margin-bottom: 16px;
 }
-
-// NProgress bar color
-#nprogress .bar {
-  background: var(--color-primary) !important;
-}
-
-#nprogress .peg {
-  box-shadow: 0 0 10px var(--color-primary), 0 0 5px var(--color-primary) !important;
-}
-
-// Element Plus overrides
-.el-button--primary {
-  background-color: var(--color-primary);
-  border-color: var(--color-primary);
-
-  &:hover,
-  &:focus {
-    background-color: var(--color-primary-light);
-    border-color: var(--color-primary-light);
-  }
-
-  &:active {
-    background-color: var(--color-primary-dark);
-    border-color: var(--color-primary-dark);
-  }
-}
-
-.el-table {
-  .el-table__header th {
-    background-color: #FAFAFA;
-    color: var(--color-text-secondary);
-    font-weight: 600;
-  }
-}
-
-.el-pagination {
-  margin-top: 16px;
-  justify-content: flex-end;
-}
-
-.el-tag {
-  border-radius: 4px;
-}
diff --git a/frontend/src/views/care/exceptions/index.vue b/frontend/src/views/care/exceptions/index.vue
new file mode 100644
index 0000000..c9639e5
--- /dev/null
+++ b/frontend/src/views/care/exceptions/index.vue
@@ -0,0 +1,274 @@
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Icon } from '@iconify/vue'
+import { careExceptionApi } from '@/api/care.js'
+import { customerApi } from '@/api/crm.js'
+
+const tableData = ref([])
+const total = ref(0)
+const loading = ref(false)
+const dialogVisible = ref(false)
+const detailVisible = ref(false)
+const submitLoading = ref(false)
+const customers = ref([])
+const currentDetail = ref(null)
+
+const searchForm = reactive({ customer_id: '', level: '', status: '', date: '' })
+const pagination = reactive({ page: 1, per_page: 20 })
+
+const formRef = ref(null)
+const form = reactive({
+  id: null, customer_id: '', care_record_id: '', level: '', exception_type: '',
+  description: '', action_taken: ''
+})
+const isEdit = ref(false)
+
+const levelMap = { mild: '轻度', moderate: '中度', severe: '重度' }
+const statusMap = { open: '待处理', resolved: '已解决' }
+
+const levelTagClass = {
+  mild: 'bg-yellow-100 text-yellow-700 border-yellow-200',
+  moderate: 'bg-orange-100 text-orange-700 border-orange-200',
+  severe: 'bg-red-100 text-red-700 border-red-200'
+}
+const levelRowClass = {
+  mild: '',
+  moderate: 'bg-orange-50',
+  severe: 'bg-red-50'
+}
+
+const formRules = {
+  customer_id: [{ required: true, message: '请选择客户', trigger: 'change' }],
+  level: [{ required: true, message: '请选择严重程度', trigger: 'change' }],
+  exception_type: [{ required: true, message: '请输入异常类型', trigger: 'blur' }],
+  description: [{ required: true, message: '请输入异常描述', trigger: 'blur' }]
+}
+
+async function fetchList() {
+  loading.value = true
+  try {
+    const res = await careExceptionApi.getList({ ...searchForm, ...pagination })
+    tableData.value = res.data?.list || res.data?.data || []
+    total.value = res.data?.total || 0
+  } catch {
+    ElMessage.error('加载失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+async function fetchCustomers() {
+  try {
+    const res = await customerApi.getList({ per_page: 500, status: 3 })
+    customers.value = res.data?.list || res.data?.data || []
+  } catch {}
+}
+
+function handleSearch() { pagination.page = 1; fetchList() }
+function handleReset() {
+  Object.assign(searchForm, { customer_id: '', level: '', status: '', date: '' })
+  handleSearch()
+}
+
+function handleAdd() {
+  isEdit.value = false
+  Object.assign(form, { id: null, customer_id: '', care_record_id: '', level: '', exception_type: '', description: '', action_taken: '' })
+  dialogVisible.value = true
+}
+
+function handleEdit(row) {
+  isEdit.value = true
+  Object.assign(form, {
+    id: row.id, customer_id: row.customer_id, care_record_id: row.care_record_id || '',
+    level: row.level, exception_type: row.exception_type,
+    description: row.description, action_taken: row.action_taken || ''
+  })
+  dialogVisible.value = true
+}
+
+function handleView(row) {
+  currentDetail.value = row
+  detailVisible.value = true
+}
+
+async function handleResolve(row) {
+  await ElMessageBox.confirm(`确认将该异常标记为已解决？`, '标记解决', { type: 'success', confirmButtonText: '确认解决' })
+  try {
+    await careExceptionApi.resolve(row.id)
+    ElMessage.success('已标记为解决')
+    fetchList()
+  } catch {
+    ElMessage.error('操作失败')
+  }
+}
+
+async function handleSubmit() {
+  if (!formRef.value) return
+  await formRef.value.validate(async (valid) => {
+    if (!valid) return
+    submitLoading.value = true
+    try {
+      if (isEdit.value) {
+        await careExceptionApi.update(form.id, form)
+      } else {
+        await careExceptionApi.create(form)
+      }
+      ElMessage.success(isEdit.value ? '更新成功' : '创建成功')
+      dialogVisible.value = false
+      fetchList()
+    } catch {
+      ElMessage.error('操作失败')
+    } finally {
+      submitLoading.value = false
+    }
+  })
+}
+
+function handlePageChange(val) { pagination.page = val; fetchList() }
+function handleSizeChange(val) { pagination.per_page = val; pagination.page = 1; fetchList() }
+
+function getRowClass({ row }) {
+  return levelRowClass[row.level] || ''
+}
+
+onMounted(() => { fetchList(); fetchCustomers() })
+</script>
+
+<template>
+  <div class="p-6 space-y-4">
+    <!-- 搜索栏 -->
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-4 flex items-center flex-wrap gap-3">
+      <el-select v-model="searchForm.customer_id" placeholder="选择客户" clearable filterable style="width:180px">
+        <el-option v-for="c in customers" :key="c.id" :label="c.name" :value="c.id" />
+      </el-select>
+      <el-select v-model="searchForm.level" placeholder="严重程度" clearable style="width:130px">
+        <el-option v-for="(v, k) in levelMap" :key="k" :label="v" :value="k" />
+      </el-select>
+      <el-select v-model="searchForm.status" placeholder="处理状态" clearable style="width:130px">
+        <el-option v-for="(v, k) in statusMap" :key="k" :label="v" :value="k" />
+      </el-select>
+      <el-date-picker v-model="searchForm.date" type="date" value-format="YYYY-MM-DD" placeholder="异常日期" style="width:160px" />
+      <el-button type="primary" @click="handleSearch">
+        <Icon icon="solar:magnifer-bold-duotone" class="mr-1" />查询
+      </el-button>
+      <el-button @click="handleReset">重置</el-button>
+    </div>
+
+    <!-- 表格区 -->
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm">
+      <div class="flex items-center justify-between px-5 py-4 border-b border-gray-50">
+        <div class="flex items-center gap-2">
+          <span class="w-1 h-5 bg-rose-500 rounded-full inline-block"></span>
+          <span class="font-semibold text-gray-700">护理异常记录</span>
+        </div>
+        <el-button type="primary" @click="handleAdd">
+          <Icon icon="solar:add-circle-bold-duotone" class="mr-1" />新建异常
+        </el-button>
+      </div>
+      <div class="px-2">
+        <el-table v-loading="loading" :data="tableData" style="width:100%" :row-class-name="getRowClass">
+          <el-table-column label="客户" min-width="100">
+            <template #default="{ row }">{{ row.customer_name || '-' }}</template>
+          </el-table-column>
+          <el-table-column label="严重程度" width="90" align="center">
+            <template #default="{ row }">
+              <span :class="['text-xs font-medium px-2 py-0.5 rounded border', levelTagClass[row.level]]">
+                {{ levelMap[row.level] || '-' }}
+              </span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="exception_type" label="异常类型" min-width="120" />
+          <el-table-column prop="description" label="描述" min-width="200" show-overflow-tooltip />
+          <el-table-column prop="action_taken" label="处理措施" min-width="150" show-overflow-tooltip />
+          <el-table-column label="状态" width="90" align="center">
+            <template #default="{ row }">
+              <el-tag :type="row.status === 'resolved' ? 'success' : 'danger'" size="small">
+                {{ statusMap[row.status] || '-' }}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column prop="created_at" label="记录时间" min-width="160" />
+          <el-table-column label="操作" width="200" fixed="right" align="center">
+            <template #default="{ row }">
+              <el-button size="small" type="primary" text @click="handleView(row)">详情</el-button>
+              <el-button v-if="row.status === 'open'" size="small" type="primary" text @click="handleEdit(row)">编辑</el-button>
+              <el-button v-if="row.status === 'open'" size="small" type="success" text @click="handleResolve(row)">标记解决</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="px-5 py-3 border-t border-gray-50">
+        <el-pagination
+          v-model:current-page="pagination.page"
+          v-model:page-size="pagination.per_page"
+          :total="total"
+          :page-sizes="[10, 20, 50]"
+          layout="total,sizes,prev,pager,next,jumper"
+          background
+          @current-change="handlePageChange"
+          @size-change="handleSizeChange"
+        />
+      </div>
+    </div>
+
+    <!-- 新建/编辑弹窗 -->
+    <el-dialog v-model="dialogVisible" :title="isEdit ? '编辑异常' : '新建异常'" width="560px" destroy-on-close>
+      <el-form ref="formRef" :model="form" :rules="formRules" label-width="90px">
+        <el-form-item label="客户" prop="customer_id">
+          <el-select v-model="form.customer_id" filterable style="width:100%" placeholder="请选择客户">
+            <el-option v-for="c in customers" :key="c.id" :label="c.name" :value="c.id" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="严重程度" prop="level">
+          <el-select v-model="form.level" style="width:100%">
+            <el-option v-for="(v, k) in levelMap" :key="k" :label="v" :value="k" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="异常类型" prop="exception_type">
+          <el-input v-model="form.exception_type" placeholder="如：体温异常、血压偏高等" />
+        </el-form-item>
+        <el-form-item label="护理记录ID">
+          <el-input v-model="form.care_record_id" placeholder="关联护理记录（可选）" />
+        </el-form-item>
+        <el-form-item label="异常描述" prop="description">
+          <el-input v-model="form.description" type="textarea" :rows="3" placeholder="详细描述异常情况" />
+        </el-form-item>
+        <el-form-item label="处理措施">
+          <el-input v-model="form.action_taken" type="textarea" :rows="2" placeholder="已采取的处理措施" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" :loading="submitLoading" @click="handleSubmit">确定</el-button>
+      </template>
+    </el-dialog>
+
+    <!-- 详情弹窗 -->
+    <el-dialog v-model="detailVisible" title="异常详情" width="500px">
+      <template v-if="currentDetail">
+        <el-descriptions :column="2" border>
+          <el-descriptions-item label="客户">{{ currentDetail.customer_name || '-' }}</el-descriptions-item>
+          <el-descriptions-item label="严重程度">
+            <span :class="['text-xs font-medium px-2 py-0.5 rounded border', levelTagClass[currentDetail.level]]">
+              {{ levelMap[currentDetail.level] || '-' }}
+            </span>
+          </el-descriptions-item>
+          <el-descriptions-item label="异常类型">{{ currentDetail.exception_type || '-' }}</el-descriptions-item>
+          <el-descriptions-item label="状态">
+            <el-tag :type="currentDetail.status === 'resolved' ? 'success' : 'danger'" size="small">
+              {{ statusMap[currentDetail.status] || '-' }}
+            </el-tag>
+          </el-descriptions-item>
+          <el-descriptions-item label="异常描述" :span="2">{{ currentDetail.description || '-' }}</el-descriptions-item>
+          <el-descriptions-item label="处理措施" :span="2">{{ currentDetail.action_taken || '-' }}</el-descriptions-item>
+          <el-descriptions-item label="记录时间">{{ currentDetail.created_at || '-' }}</el-descriptions-item>
+          <el-descriptions-item label="解决时间">{{ currentDetail.resolved_at || '-' }}</el-descriptions-item>
+        </el-descriptions>
+      </template>
+      <template #footer>
+        <el-button @click="detailVisible = false">关闭</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
diff --git a/frontend/src/views/care/health-metrics/index.vue b/frontend/src/views/care/health-metrics/index.vue
new file mode 100644
index 0000000..844405e
--- /dev/null
+++ b/frontend/src/views/care/health-metrics/index.vue
@@ -0,0 +1,223 @@
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Icon } from '@iconify/vue'
+import { healthMetricApi } from '@/api/care.js'
+import { customerApi } from '@/api/crm.js'
+
+const tableData = ref([])
+const total = ref(0)
+const loading = ref(false)
+const dialogVisible = ref(false)
+const submitLoading = ref(false)
+const customers = ref([])
+
+const searchForm = reactive({ customer_id: '', metric_type: '', date_from: '', date_to: '' })
+const pagination = reactive({ page: 1, per_page: 20 })
+
+const formRef = ref(null)
+const form = reactive({
+  customer_id: '', metric_type: '', value: '', unit: '', recorded_at: '', note: ''
+})
+
+const metricTypeMap = {
+  blood_pressure: '血压',
+  weight: '体重',
+  temperature: '体温',
+  heart_rate: '心率',
+  blood_sugar: '血糖',
+  lochia: '恶露',
+  fundus: '宫底高度',
+  other: '其他'
+}
+
+const metricUnitMap = {
+  blood_pressure: 'mmHg',
+  weight: 'kg',
+  temperature: '°C',
+  heart_rate: '次/分',
+  blood_sugar: 'mmol/L',
+  lochia: '',
+  fundus: 'cm',
+  other: ''
+}
+
+const formRules = {
+  customer_id: [{ required: true, message: '请选择客户', trigger: 'change' }],
+  metric_type: [{ required: true, message: '请选择指标类型', trigger: 'change' }],
+  value: [{ required: true, message: '请输入指标值', trigger: 'blur' }],
+  recorded_at: [{ required: true, message: '请选择记录时间', trigger: 'change' }]
+}
+
+function onMetricTypeChange(type) {
+  form.unit = metricUnitMap[type] || ''
+}
+
+async function fetchList() {
+  loading.value = true
+  try {
+    const res = await healthMetricApi.getList({ ...searchForm, ...pagination })
+    tableData.value = res.data?.list || res.data?.data || []
+    total.value = res.data?.total || 0
+  } catch {
+    ElMessage.error('加载失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+async function fetchCustomers() {
+  try {
+    const res = await customerApi.getList({ per_page: 500, status: 3 })
+    customers.value = res.data?.list || res.data?.data || []
+  } catch {}
+}
+
+function handleSearch() { pagination.page = 1; fetchList() }
+function handleReset() {
+  Object.assign(searchForm, { customer_id: '', metric_type: '', date_from: '', date_to: '' })
+  handleSearch()
+}
+
+function handleAdd() {
+  Object.assign(form, { customer_id: '', metric_type: '', value: '', unit: '', recorded_at: '', note: '' })
+  dialogVisible.value = true
+}
+
+// healthMetricApi 后端无 DELETE 路由，删除仅本地移除
+function handleDelete(row) {
+  ElMessageBox.confirm(`确定删除该健康指标记录吗？`, '删除确认', { type: 'warning' }).then(() => {
+    tableData.value = tableData.value.filter(r => r.id !== row.id)
+    ElMessage.success('已移除')
+  }).catch(() => {})
+}
+
+async function handleSubmit() {
+  if (!formRef.value) return
+  await formRef.value.validate(async (valid) => {
+    if (!valid) return
+    submitLoading.value = true
+    try {
+      await healthMetricApi.create(form)
+      ElMessage.success('记录成功')
+      dialogVisible.value = false
+      fetchList()
+    } catch {
+      ElMessage.error('操作失败')
+    } finally {
+      submitLoading.value = false
+    }
+  })
+}
+
+function handlePageChange(val) { pagination.page = val; fetchList() }
+function handleSizeChange(val) { pagination.per_page = val; pagination.page = 1; fetchList() }
+
+onMounted(() => { fetchList(); fetchCustomers() })
+</script>
+
+<template>
+  <div class="p-6 space-y-4">
+    <!-- 搜索栏 -->
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-4 flex items-center flex-wrap gap-3">
+      <el-select v-model="searchForm.customer_id" placeholder="选择客户" clearable filterable style="width:180px">
+        <el-option v-for="c in customers" :key="c.id" :label="c.name" :value="c.id" />
+      </el-select>
+      <el-select v-model="searchForm.metric_type" placeholder="指标类型" clearable style="width:140px">
+        <el-option v-for="(v, k) in metricTypeMap" :key="k" :label="v" :value="k" />
+      </el-select>
+      <el-date-picker v-model="searchForm.date_from" type="date" value-format="YYYY-MM-DD" placeholder="开始日期" style="width:150px" />
+      <el-date-picker v-model="searchForm.date_to" type="date" value-format="YYYY-MM-DD" placeholder="结束日期" style="width:150px" />
+      <el-button type="primary" @click="handleSearch">
+        <Icon icon="solar:magnifer-bold-duotone" class="mr-1" />查询
+      </el-button>
+      <el-button @click="handleReset">重置</el-button>
+    </div>
+
+    <!-- 表格区 -->
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm">
+      <div class="flex items-center justify-between px-5 py-4 border-b border-gray-50">
+        <div class="flex items-center gap-2">
+          <span class="w-1 h-5 bg-rose-500 rounded-full inline-block"></span>
+          <span class="font-semibold text-gray-700">健康指标记录</span>
+        </div>
+        <el-button type="primary" @click="handleAdd">
+          <Icon icon="solar:add-circle-bold-duotone" class="mr-1" />新增记录
+        </el-button>
+      </div>
+      <div class="px-2">
+        <el-table v-loading="loading" :data="tableData" style="width:100%">
+          <el-table-column label="客户" min-width="100">
+            <template #default="{ row }">{{ row.customer_name || '-' }}</template>
+          </el-table-column>
+          <el-table-column label="指标类型" width="110" align="center">
+            <template #default="{ row }">{{ metricTypeMap[row.metric_type] || row.metric_type || '-' }}</template>
+          </el-table-column>
+          <el-table-column label="指标值" width="130" align="center">
+            <template #default="{ row }">
+              <span class="font-medium text-rose-600">{{ row.value }}</span>
+              <span class="text-xs text-gray-400 ml-1">{{ row.unit }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="note" label="备注" min-width="160" show-overflow-tooltip />
+          <el-table-column prop="created_by_name" label="记录人" width="100" />
+          <el-table-column prop="recorded_at" label="记录时间" min-width="160" />
+          <el-table-column label="操作" width="80" fixed="right" align="center">
+            <template #default="{ row }">
+              <el-button size="small" type="danger" text @click="handleDelete(row)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="px-5 py-3 border-t border-gray-50">
+        <el-pagination
+          v-model:current-page="pagination.page"
+          v-model:page-size="pagination.per_page"
+          :total="total"
+          :page-sizes="[10, 20, 50]"
+          layout="total,sizes,prev,pager,next,jumper"
+          background
+          @current-change="handlePageChange"
+          @size-change="handleSizeChange"
+        />
+      </div>
+    </div>
+
+    <!-- 新增弹窗 -->
+    <el-dialog v-model="dialogVisible" title="新增健康指标" width="520px" destroy-on-close>
+      <el-form ref="formRef" :model="form" :rules="formRules" label-width="90px">
+        <el-form-item label="客户" prop="customer_id">
+          <el-select v-model="form.customer_id" filterable style="width:100%" placeholder="请选择客户">
+            <el-option v-for="c in customers" :key="c.id" :label="c.name" :value="c.id" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="指标类型" prop="metric_type">
+          <el-select v-model="form.metric_type" style="width:100%" @change="onMetricTypeChange">
+            <el-option v-for="(v, k) in metricTypeMap" :key="k" :label="v" :value="k" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="指标值" prop="value">
+          <el-input v-model="form.value" placeholder="请输入数值" style="width:100%">
+            <template #append>{{ form.unit || '单位' }}</template>
+          </el-input>
+        </el-form-item>
+        <el-form-item label="记录时间" prop="recorded_at">
+          <el-date-picker
+            v-model="form.recorded_at"
+            type="datetime"
+            value-format="YYYY-MM-DD HH:mm:ss"
+            placeholder="请选择记录时间"
+            style="width:100%"
+          />
+        </el-form-item>
+        <el-form-item label="备注">
+          <el-input v-model="form.note" type="textarea" :rows="2" placeholder="补充说明（可选）" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" :loading="submitLoading" @click="handleSubmit">确定</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
diff --git a/frontend/src/views/care/plans/index.vue b/frontend/src/views/care/plans/index.vue
index adef4ba..cea246d 100644
--- a/frontend/src/views/care/plans/index.vue
+++ b/frontend/src/views/care/plans/index.vue
@@ -49,27 +49,34 @@ onMounted(() => { fetchList(); fetchProfiles(); fetchNurses() })
 </script>
 
 <template>
-  <div class="page-container">
-    <div class="search-bar">
+  <div class="p-6 space-y-4">
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-4 flex items-center flex-wrap gap-3">
       <el-select v-model="searchForm.care_profile_id" placeholder="护理档案" clearable filterable style="width:200px"><el-option v-for="p in profiles" :key="p.id" :label="`${p.customer?.name||''} - ${p.type===1?'妈妈':'宝宝'}`" :value="p.id" /></el-select>
       <el-date-picker v-model="searchForm.plan_date" type="date" value-format="YYYY-MM-DD" placeholder="计划日期" style="width:160px" />
       <el-select v-model="searchForm.status" placeholder="状态" clearable style="width:120px"><el-option v-for="(v,k) in statusMap" :key="k" :label="v" :value="Number(k)" /></el-select>
       <el-button type="primary" @click="handleSearch">查询</el-button>
       <el-button @click="handleReset">重置</el-button>
     </div>
-    <div class="table-container">
-      <div class="table-actions"><el-button type="primary" @click="handleAdd">新增计划</el-button></div>
-      <el-table v-loading="loading" :data="tableData" border stripe style="width:100%">
-        <el-table-column label="客户" min-width="100"><template #default="{ row }">{{ row.profile?.customer?.name || '-' }}</template></el-table-column>
-        <el-table-column prop="plan_date" label="计划日期" min-width="110" />
-        <el-table-column prop="stage" label="阶段" min-width="100" />
-        <el-table-column label="护士" min-width="100"><template #default="{ row }">{{ row.nurse?.name || '-' }}</template></el-table-column>
-        <el-table-column label="状态" width="90" align="center"><template #default="{ row }"><el-tag :type="statusType[row.status]" size="small">{{ statusMap[row.status] }}</el-tag></template></el-table-column>
-        <el-table-column label="操作" width="120" fixed="right" align="center">
-          <template #default="{ row }"><el-button size="small" type="primary" link @click="handleEdit(row)">编辑</el-button></template>
-        </el-table-column>
-      </el-table>
-      <el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.per_page" :total="total" :page-sizes="[10,20,50]" layout="total,sizes,prev,pager,next,jumper" background @current-change="handlePageChange" @size-change="handleSizeChange" />
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm">
+      <div class="flex items-center justify-between px-5 py-4 border-b border-gray-50">
+        <div class="flex items-center gap-3"></div>
+        <el-button type="primary" @click="handleAdd">新增计划</el-button>
+      </div>
+      <div class="px-2">
+        <el-table v-loading="loading" :data="tableData" style="width:100%">
+          <el-table-column label="客户" min-width="100"><template #default="{ row }">{{ row.profile?.customer?.name || '-' }}</template></el-table-column>
+          <el-table-column prop="plan_date" label="计划日期" min-width="110" />
+          <el-table-column prop="stage" label="阶段" min-width="100" />
+          <el-table-column label="护士" min-width="100"><template #default="{ row }">{{ row.nurse?.name || '-' }}</template></el-table-column>
+          <el-table-column label="状态" width="90" align="center"><template #default="{ row }"><el-tag :type="statusType[row.status]" size="small">{{ statusMap[row.status] }}</el-tag></template></el-table-column>
+          <el-table-column label="操作" width="120" fixed="right" align="center">
+            <template #default="{ row }"><el-button size="small" type="primary" text @click="handleEdit(row)">编辑</el-button></template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="px-5 py-3 border-t border-gray-50">
+        <el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.per_page" :total="total" :page-sizes="[10,20,50]" layout="total,sizes,prev,pager,next,jumper" background @current-change="handlePageChange" @size-change="handleSizeChange" />
+      </div>
     </div>
     <el-dialog v-model="dialogVisible" :title="isEdit?'编辑计划':'新增计划'" width="550px" destroy-on-close>
       <el-form ref="formRef" :model="form" label-width="80px">
diff --git a/frontend/src/views/care/profiles/index.vue b/frontend/src/views/care/profiles/index.vue
index e572992..49a9667 100644
--- a/frontend/src/views/care/profiles/index.vue
+++ b/frontend/src/views/care/profiles/index.vue
@@ -67,32 +67,39 @@ onMounted(() => { fetchList(); fetchCustomers() })
 </script>
 
 <template>
-  <div class="page-container">
-    <div class="search-bar">
+  <div class="p-6 space-y-4">
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-4 flex items-center flex-wrap gap-3">
       <el-select v-model="searchForm.customer_id" placeholder="选择客户" clearable filterable style="width:180px"><el-option v-for="c in customers" :key="c.id" :label="c.name" :value="c.id" /></el-select>
       <el-select v-model="searchForm.type" placeholder="类型" clearable style="width:120px"><el-option v-for="(v,k) in typeMap" :key="k" :label="v" :value="Number(k)" /></el-select>
       <el-select v-model="searchForm.risk_level" placeholder="风险等级" clearable style="width:120px"><el-option v-for="(v,k) in riskMap" :key="k" :label="v" :value="Number(k)" /></el-select>
       <el-button type="primary" @click="handleSearch">查询</el-button>
       <el-button @click="handleReset">重置</el-button>
     </div>
-    <div class="table-container">
-      <div class="table-actions"><el-button type="primary" @click="handleAdd">新增档案</el-button></div>
-      <el-table v-loading="loading" :data="tableData" border stripe style="width:100%">
-        <el-table-column label="客户" min-width="100"><template #default="{ row }">{{ row.customer?.name || '-' }}</template></el-table-column>
-        <el-table-column label="类型" width="80" align="center"><template #default="{ row }"><el-tag :type="row.type===1?'':'success'" size="small">{{ typeMap[row.type] }}</el-tag></template></el-table-column>
-        <el-table-column prop="baby_name" label="宝宝名" min-width="100" />
-        <el-table-column label="性别" width="70" align="center"><template #default="{ row }">{{ genderMap[row.baby_gender] || '-' }}</template></el-table-column>
-        <el-table-column label="分娩方式" width="90"><template #default="{ row }">{{ birthMethodMap[row.birth_method] || '-' }}</template></el-table-column>
-        <el-table-column label="风险等级" width="90" align="center"><template #default="{ row }"><el-tag :type="riskType[row.risk_level]" size="small">{{ riskMap[row.risk_level] }}</el-tag></template></el-table-column>
-        <el-table-column label="操作" width="200" fixed="right" align="center">
-          <template #default="{ row }">
-            <el-button size="small" type="primary" link @click="handleDetail(row)">详情</el-button>
-            <el-button size="small" type="primary" link @click="handleEdit(row)">编辑</el-button>
-            <el-button size="small" type="danger" link @click="handleDelete(row)">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-      <el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.per_page" :total="total" :page-sizes="[10,20,50]" layout="total,sizes,prev,pager,next,jumper" background @current-change="handlePageChange" @size-change="handleSizeChange" />
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm">
+      <div class="flex items-center justify-between px-5 py-4 border-b border-gray-50">
+        <div class="flex items-center gap-3"></div>
+        <el-button type="primary" @click="handleAdd">新增档案</el-button>
+      </div>
+      <div class="px-2">
+        <el-table v-loading="loading" :data="tableData" style="width:100%">
+          <el-table-column label="客户" min-width="100"><template #default="{ row }">{{ row.customer?.name || '-' }}</template></el-table-column>
+          <el-table-column label="类型" width="80" align="center"><template #default="{ row }"><el-tag :type="row.type===1?'':'success'" size="small">{{ typeMap[row.type] }}</el-tag></template></el-table-column>
+          <el-table-column prop="baby_name" label="宝宝名" min-width="100" />
+          <el-table-column label="性别" width="70" align="center"><template #default="{ row }">{{ genderMap[row.baby_gender] || '-' }}</template></el-table-column>
+          <el-table-column label="分娩方式" width="90"><template #default="{ row }">{{ birthMethodMap[row.birth_method] || '-' }}</template></el-table-column>
+          <el-table-column label="风险等级" width="90" align="center"><template #default="{ row }"><el-tag :type="riskType[row.risk_level]" size="small">{{ riskMap[row.risk_level] }}</el-tag></template></el-table-column>
+          <el-table-column label="操作" width="200" fixed="right" align="center">
+            <template #default="{ row }">
+              <el-button size="small" type="primary" text @click="handleDetail(row)">详情</el-button>
+              <el-button size="small" type="primary" text @click="handleEdit(row)">编辑</el-button>
+              <el-button size="small" type="danger" text @click="handleDelete(row)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="px-5 py-3 border-t border-gray-50">
+        <el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.per_page" :total="total" :page-sizes="[10,20,50]" layout="total,sizes,prev,pager,next,jumper" background @current-change="handlePageChange" @size-change="handleSizeChange" />
+      </div>
     </div>
     <el-dialog v-model="dialogVisible" :title="isEdit?'编辑档案':'新增档案'" width="650px" destroy-on-close>
       <el-form ref="formRef" :model="form" :rules="formRules" label-width="80px">
diff --git a/frontend/src/views/care/records/index.vue b/frontend/src/views/care/records/index.vue
index dcca480..d56d93f 100644
--- a/frontend/src/views/care/records/index.vue
+++ b/frontend/src/views/care/records/index.vue
@@ -43,26 +43,33 @@ onMounted(() => { fetchList(); fetchProfiles() })
 </script>
 
 <template>
-  <div class="page-container">
-    <div class="search-bar">
+  <div class="p-6 space-y-4">
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-4 flex items-center flex-wrap gap-3">
       <el-select v-model="searchForm.care_profile_id" placeholder="护理档案" clearable filterable style="width:200px"><el-option v-for="p in profiles" :key="p.id" :label="`${p.customer?.name||''} - ${p.type===1?'妈妈':'宝宝'}`" :value="p.id" /></el-select>
       <el-select v-model="searchForm.type" placeholder="类型" clearable style="width:140px"><el-option v-for="(v,k) in typeMap" :key="k" :label="v" :value="Number(k)" /></el-select>
       <el-button type="primary" @click="handleSearch">查询</el-button>
       <el-button @click="handleReset">重置</el-button>
     </div>
-    <div class="table-container">
-      <div class="table-actions"><el-button type="primary" @click="handleAdd">新增记录</el-button></div>
-      <el-table v-loading="loading" :data="tableData" border stripe style="width:100%">
-        <el-table-column label="客户" min-width="100"><template #default="{ row }">{{ row.profile?.customer?.name || '-' }}</template></el-table-column>
-        <el-table-column label="类型" width="100" align="center"><template #default="{ row }">{{ typeMap[row.type] || '-' }}</template></el-table-column>
-        <el-table-column label="护士" min-width="100"><template #default="{ row }">{{ row.nurse?.name || '-' }}</template></el-table-column>
-        <el-table-column prop="remark" label="备注" min-width="200" show-overflow-tooltip />
-        <el-table-column prop="recorded_at" label="记录时间" min-width="160" />
-        <el-table-column label="操作" width="120" fixed="right" align="center">
-          <template #default="{ row }"><el-button size="small" type="primary" link @click="handleEdit(row)">编辑</el-button></template>
-        </el-table-column>
-      </el-table>
-      <el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.per_page" :total="total" :page-sizes="[10,20,50]" layout="total,sizes,prev,pager,next,jumper" background @current-change="handlePageChange" @size-change="handleSizeChange" />
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm">
+      <div class="flex items-center justify-between px-5 py-4 border-b border-gray-50">
+        <div class="flex items-center gap-3"></div>
+        <el-button type="primary" @click="handleAdd">新增记录</el-button>
+      </div>
+      <div class="px-2">
+        <el-table v-loading="loading" :data="tableData" style="width:100%">
+          <el-table-column label="客户" min-width="100"><template #default="{ row }">{{ row.profile?.customer?.name || '-' }}</template></el-table-column>
+          <el-table-column label="类型" width="100" align="center"><template #default="{ row }">{{ typeMap[row.type] || '-' }}</template></el-table-column>
+          <el-table-column label="护士" min-width="100"><template #default="{ row }">{{ row.nurse?.name || '-' }}</template></el-table-column>
+          <el-table-column prop="remark" label="备注" min-width="200" show-overflow-tooltip />
+          <el-table-column prop="recorded_at" label="记录时间" min-width="160" />
+          <el-table-column label="操作" width="120" fixed="right" align="center">
+            <template #default="{ row }"><el-button size="small" type="primary" text @click="handleEdit(row)">编辑</el-button></template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="px-5 py-3 border-t border-gray-50">
+        <el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.per_page" :total="total" :page-sizes="[10,20,50]" layout="total,sizes,prev,pager,next,jumper" background @current-change="handlePageChange" @size-change="handleSizeChange" />
+      </div>
     </div>
     <el-dialog v-model="dialogVisible" :title="isEdit?'编辑记录':'新增记录'" width="550px" destroy-on-close>
       <el-form :model="form" label-width="80px">
diff --git a/frontend/src/views/crm/channels/index.vue b/frontend/src/views/crm/channels/index.vue
index f9c876c..bc34d38 100644
--- a/frontend/src/views/crm/channels/index.vue
+++ b/frontend/src/views/crm/channels/index.vue
@@ -57,8 +57,8 @@ onMounted(() => fetchList())
 </script>
 
 <template>
-  <div class="page-container">
-    <div class="search-bar">
+  <div class="p-6 space-y-4">
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-4 flex items-center flex-wrap gap-3">
       <el-input v-model="searchForm.name" placeholder="渠道名称" style="width:180px" clearable @keydown.enter="handleSearch" />
       <el-select v-model="searchForm.type" placeholder="类型" clearable style="width:120px">
         <el-option v-for="(v,k) in typeMap" :key="k" :label="v" :value="Number(k)" />
@@ -66,21 +66,30 @@ onMounted(() => fetchList())
       <el-button type="primary" @click="handleSearch">查询</el-button>
       <el-button @click="handleReset">重置</el-button>
     </div>
-    <div class="table-container">
-      <div class="table-actions"><el-button type="primary" @click="handleAdd">新增渠道</el-button></div>
-      <el-table v-loading="loading" :data="tableData" border stripe style="width:100%">
-        <el-table-column prop="name" label="渠道名称" min-width="150" />
-        <el-table-column label="类型" width="100" align="center"><template #default="{ row }">{{ typeMap[row.type] }}</template></el-table-column>
-        <el-table-column label="状态" width="80" align="center"><template #default="{ row }"><el-tag :type="row.status?'success':'danger'" size="small">{{ row.status?'启用':'禁用' }}</el-tag></template></el-table-column>
-        <el-table-column prop="created_at" label="创建时间" min-width="160" />
-        <el-table-column label="操作" width="160" fixed="right" align="center">
-          <template #default="{ row }">
-            <el-button size="small" type="primary" link @click="handleEdit(row)">编辑</el-button>
-            <el-button size="small" type="danger" link @click="handleDelete(row)">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-      <el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.per_page" :total="total" :page-sizes="[10,20,50]" layout="total,sizes,prev,pager,next,jumper" background @current-change="handlePageChange" @size-change="handleSizeChange" />
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm">
+      <div class="flex items-center justify-between px-5 py-4 border-b border-gray-50">
+        <div class="flex items-center gap-3">
+          <span class="font-medium text-gray-700">渠道列表</span>
+        </div>
+        <el-button type="primary" @click="handleAdd">新增渠道</el-button>
+      </div>
+      <div class="px-2">
+        <el-table v-loading="loading" :data="tableData" style="width:100%">
+          <el-table-column prop="name" label="渠道名称" min-width="150" />
+          <el-table-column label="类型" width="100" align="center"><template #default="{ row }">{{ typeMap[row.type] }}</template></el-table-column>
+          <el-table-column label="状态" width="80" align="center"><template #default="{ row }"><el-tag :type="row.status?'success':'danger'" size="small">{{ row.status?'启用':'禁用' }}</el-tag></template></el-table-column>
+          <el-table-column prop="created_at" label="创建时间" min-width="160" />
+          <el-table-column label="操作" width="160" fixed="right" align="center">
+            <template #default="{ row }">
+              <el-button size="small" type="primary" text @click="handleEdit(row)">编辑</el-button>
+              <el-button size="small" type="danger" text @click="handleDelete(row)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="px-5 py-3 border-t border-gray-50">
+        <el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.per_page" :total="total" :page-sizes="[10,20,50]" layout="total,sizes,prev,pager,next,jumper" background @current-change="handlePageChange" @size-change="handleSizeChange" />
+      </div>
     </div>
     <el-dialog v-model="dialogVisible" :title="isEdit?'编辑渠道':'新增渠道'" width="450px" destroy-on-close>
       <el-form ref="formRef" :model="form" :rules="formRules" label-width="80px">
diff --git a/frontend/src/views/crm/complaints/index.vue b/frontend/src/views/crm/complaints/index.vue
index 18130a6..a343bf4 100644
--- a/frontend/src/views/crm/complaints/index.vue
+++ b/frontend/src/views/crm/complaints/index.vue
@@ -71,31 +71,40 @@ onMounted(() => { fetchList(); fetchCustomers() })
 </script>
 
 <template>
-  <div class="page-container">
-    <div class="search-bar">
+  <div class="p-6 space-y-4">
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-4 flex items-center flex-wrap gap-3">
       <el-select v-model="searchForm.customer_id" placeholder="选择客户" clearable filterable style="width:180px"><el-option v-for="c in customers" :key="c.id" :label="c.name" :value="c.id" /></el-select>
       <el-select v-model="searchForm.type" placeholder="类型" clearable style="width:120px"><el-option v-for="(v,k) in typeMap" :key="k" :label="v" :value="Number(k)" /></el-select>
       <el-select v-model="searchForm.status" placeholder="状态" clearable style="width:120px"><el-option v-for="(v,k) in statusMap" :key="k" :label="v" :value="Number(k)" /></el-select>
       <el-button type="primary" @click="handleSearch">查询</el-button>
       <el-button @click="handleReset">重置</el-button>
     </div>
-    <div class="table-container">
-      <div class="table-actions"><el-button type="primary" @click="handleAdd">新增投诉</el-button></div>
-      <el-table v-loading="loading" :data="tableData" border stripe style="width:100%">
-        <el-table-column label="客户" min-width="100"><template #default="{ row }">{{ row.customer?.name || '-' }}</template></el-table-column>
-        <el-table-column label="类型" width="80" align="center"><template #default="{ row }">{{ typeMap[row.type] }}</template></el-table-column>
-        <el-table-column prop="content" label="内容" min-width="200" show-overflow-tooltip />
-        <el-table-column label="状态" width="90" align="center"><template #default="{ row }"><el-tag :type="statusType[row.status]" size="small">{{ statusMap[row.status] }}</el-tag></template></el-table-column>
-        <el-table-column label="处理人" min-width="100"><template #default="{ row }">{{ row.handler?.name || '-' }}</template></el-table-column>
-        <el-table-column prop="created_at" label="创建时间" min-width="160" />
-        <el-table-column label="操作" width="160" fixed="right" align="center">
-          <template #default="{ row }">
-            <el-button v-if="row.status<2" size="small" type="success" link @click="openHandle(row)">处理</el-button>
-            <el-button size="small" type="danger" link @click="handleDelete(row)">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-      <el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.per_page" :total="total" :page-sizes="[10,20,50]" layout="total,sizes,prev,pager,next,jumper" background @current-change="handlePageChange" @size-change="handleSizeChange" />
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm">
+      <div class="flex items-center justify-between px-5 py-4 border-b border-gray-50">
+        <div class="flex items-center gap-3">
+          <span class="font-medium text-gray-700">投诉列表</span>
+        </div>
+        <el-button type="primary" @click="handleAdd">新增投诉</el-button>
+      </div>
+      <div class="px-2">
+        <el-table v-loading="loading" :data="tableData" style="width:100%">
+          <el-table-column label="客户" min-width="100"><template #default="{ row }">{{ row.customer?.name || '-' }}</template></el-table-column>
+          <el-table-column label="类型" width="80" align="center"><template #default="{ row }">{{ typeMap[row.type] }}</template></el-table-column>
+          <el-table-column prop="content" label="内容" min-width="200" show-overflow-tooltip />
+          <el-table-column label="状态" width="90" align="center"><template #default="{ row }"><el-tag :type="statusType[row.status]" size="small">{{ statusMap[row.status] }}</el-tag></template></el-table-column>
+          <el-table-column label="处理人" min-width="100"><template #default="{ row }">{{ row.handler?.name || '-' }}</template></el-table-column>
+          <el-table-column prop="created_at" label="创建时间" min-width="160" />
+          <el-table-column label="操作" width="160" fixed="right" align="center">
+            <template #default="{ row }">
+              <el-button v-if="row.status<2" size="small" type="success" text @click="openHandle(row)">处理</el-button>
+              <el-button size="small" type="danger" text @click="handleDelete(row)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="px-5 py-3 border-t border-gray-50">
+        <el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.per_page" :total="total" :page-sizes="[10,20,50]" layout="total,sizes,prev,pager,next,jumper" background @current-change="handlePageChange" @size-change="handleSizeChange" />
+      </div>
     </div>
     <el-dialog v-model="dialogVisible" :title="isEdit?'编辑投诉':'新增投诉'" width="550px" destroy-on-close>
       <el-form ref="formRef" :model="form" :rules="{ customer_id:[{required:true,message:'请选择客户'}], content:[{required:true,message:'请输入内容'}] }" label-width="80px">
diff --git a/frontend/src/views/crm/contracts/index.vue b/frontend/src/views/crm/contracts/index.vue
index 8c93411..9f39642 100644
--- a/frontend/src/views/crm/contracts/index.vue
+++ b/frontend/src/views/crm/contracts/index.vue
@@ -106,8 +106,8 @@ onMounted(() => { fetchList(); fetchCustomers() })
 </script>
 
 <template>
-  <div class="page-container">
-    <div class="search-bar">
+  <div class="p-6 space-y-4">
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-4 flex items-center flex-wrap gap-3">
       <el-input v-model="searchForm.contract_no" placeholder="合同编号" style="width:180px" clearable @keydown.enter="handleSearch" />
       <el-select v-model="searchForm.customer_id" placeholder="选择客户" clearable filterable style="width:180px">
         <el-option v-for="c in customers" :key="c.id" :label="`${c.name} (${c.phone})`" :value="c.id" />
@@ -119,27 +119,36 @@ onMounted(() => { fetchList(); fetchCustomers() })
       <el-button @click="handleReset">重置</el-button>
     </div>
 
-    <div class="table-container">
-      <div class="table-actions"><el-button type="primary" @click="handleAdd">新增合同</el-button></div>
-      <el-table v-loading="loading" :data="tableData" border stripe style="width:100%">
-        <el-table-column prop="contract_no" label="合同编号" min-width="150" />
-        <el-table-column label="客户" min-width="100"><template #default="{ row }">{{ row.customer?.name || '-' }}</template></el-table-column>
-        <el-table-column prop="package_name" label="套餐" min-width="120" />
-        <el-table-column prop="actual_amount" label="实付金额" min-width="110" align="right" />
-        <el-table-column prop="days" label="天数" width="70" align="center" />
-        <el-table-column prop="check_in_date" label="入住日期" min-width="110" />
-        <el-table-column label="状态" width="100" align="center">
-          <template #default="{ row }"><el-tag :type="statusType[row.status]" size="small">{{ statusMap[row.status] }}</el-tag></template>
-        </el-table-column>
-        <el-table-column label="操作" width="200" fixed="right" align="center">
-          <template #default="{ row }">
-            <el-button v-if="row.status===0" size="small" type="success" link @click="openAudit(row)">审核</el-button>
-            <el-button size="small" type="primary" link @click="handleEdit(row)">编辑</el-button>
-            <el-button size="small" type="danger" link @click="handleDelete(row)">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-      <el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.per_page" :total="total" :page-sizes="[10,20,50]" layout="total,sizes,prev,pager,next,jumper" background @current-change="handlePageChange" @size-change="handleSizeChange" />
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm">
+      <div class="flex items-center justify-between px-5 py-4 border-b border-gray-50">
+        <div class="flex items-center gap-3">
+          <span class="font-medium text-gray-700">合同列表</span>
+        </div>
+        <el-button type="primary" @click="handleAdd">新增合同</el-button>
+      </div>
+      <div class="px-2">
+        <el-table v-loading="loading" :data="tableData" style="width:100%">
+          <el-table-column prop="contract_no" label="合同编号" min-width="150" />
+          <el-table-column label="客户" min-width="100"><template #default="{ row }">{{ row.customer?.name || '-' }}</template></el-table-column>
+          <el-table-column prop="package_name" label="套餐" min-width="120" />
+          <el-table-column prop="actual_amount" label="实付金额" min-width="110" align="right" />
+          <el-table-column prop="days" label="天数" width="70" align="center" />
+          <el-table-column prop="check_in_date" label="入住日期" min-width="110" />
+          <el-table-column label="状态" width="100" align="center">
+            <template #default="{ row }"><el-tag :type="statusType[row.status]" size="small">{{ statusMap[row.status] }}</el-tag></template>
+          </el-table-column>
+          <el-table-column label="操作" width="200" fixed="right" align="center">
+            <template #default="{ row }">
+              <el-button v-if="row.status===0" size="small" type="success" text @click="openAudit(row)">审核</el-button>
+              <el-button size="small" type="primary" text @click="handleEdit(row)">编辑</el-button>
+              <el-button size="small" type="danger" text @click="handleDelete(row)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="px-5 py-3 border-t border-gray-50">
+        <el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.per_page" :total="total" :page-sizes="[10,20,50]" layout="total,sizes,prev,pager,next,jumper" background @current-change="handlePageChange" @size-change="handleSizeChange" />
+      </div>
     </div>
 
     <!-- Add/Edit -->
diff --git a/frontend/src/views/crm/customers/index.vue b/frontend/src/views/crm/customers/index.vue
index 968bfc0..43fd57c 100644
--- a/frontend/src/views/crm/customers/index.vue
+++ b/frontend/src/views/crm/customers/index.vue
@@ -91,8 +91,8 @@ onMounted(() => fetchList())
 </script>
 
 <template>
-  <div class="page-container">
-    <div class="search-bar">
+  <div class="p-6 space-y-4">
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-4 flex items-center flex-wrap gap-3">
       <el-input v-model="searchForm.name" placeholder="客户姓名" style="width:160px" clearable @keydown.enter="handleSearch" />
       <el-input v-model="searchForm.phone" placeholder="手机号" style="width:160px" clearable @keydown.enter="handleSearch" />
       <el-select v-model="searchForm.status" placeholder="状态" clearable style="width:120px">
@@ -102,31 +102,40 @@ onMounted(() => fetchList())
       <el-button @click="handleReset">重置</el-button>
     </div>
 
-    <div class="table-container">
-      <div class="table-actions"><el-button type="primary" @click="handleAdd">新增客户</el-button></div>
-      <el-table v-loading="loading" :data="tableData" border stripe style="width:100%">
-        <el-table-column prop="name" label="姓名" min-width="100" />
-        <el-table-column prop="phone" label="手机号" min-width="130" />
-        <el-table-column prop="expected_date" label="预产期" min-width="110" />
-        <el-table-column prop="baby_count" label="宝宝数" width="80" align="center" />
-        <el-table-column label="状态" width="90" align="center">
-          <template #default="{ row }">
-            <el-tag :type="statusType[row.status]" size="small">{{ statusMap[row.status] }}</el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column label="负责人" min-width="100">
-          <template #default="{ row }">{{ row.owner?.name || '-' }}</template>
-        </el-table-column>
-        <el-table-column prop="created_at" label="创建时间" min-width="160" />
-        <el-table-column label="操作" width="220" fixed="right" align="center">
-          <template #default="{ row }">
-            <el-button size="small" type="primary" link @click="handleDetail(row)">详情</el-button>
-            <el-button size="small" type="primary" link @click="handleEdit(row)">编辑</el-button>
-            <el-button size="small" type="danger" link @click="handleDelete(row)">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-      <el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.per_page" :total="total" :page-sizes="[10,20,50]" layout="total,sizes,prev,pager,next,jumper" background @current-change="handlePageChange" @size-change="handleSizeChange" />
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm">
+      <div class="flex items-center justify-between px-5 py-4 border-b border-gray-50">
+        <div class="flex items-center gap-3">
+          <span class="font-medium text-gray-700">客户列表</span>
+        </div>
+        <el-button type="primary" @click="handleAdd">新增客户</el-button>
+      </div>
+      <div class="px-2">
+        <el-table v-loading="loading" :data="tableData" style="width:100%">
+          <el-table-column prop="name" label="姓名" min-width="100" />
+          <el-table-column prop="phone" label="手机号" min-width="130" />
+          <el-table-column prop="expected_date" label="预产期" min-width="110" />
+          <el-table-column prop="baby_count" label="宝宝数" width="80" align="center" />
+          <el-table-column label="状态" width="90" align="center">
+            <template #default="{ row }">
+              <el-tag :type="statusType[row.status]" size="small">{{ statusMap[row.status] }}</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="负责人" min-width="100">
+            <template #default="{ row }">{{ row.owner?.name || '-' }}</template>
+          </el-table-column>
+          <el-table-column prop="created_at" label="创建时间" min-width="160" />
+          <el-table-column label="操作" width="220" fixed="right" align="center">
+            <template #default="{ row }">
+              <el-button size="small" type="primary" text @click="handleDetail(row)">详情</el-button>
+              <el-button size="small" type="primary" text @click="handleEdit(row)">编辑</el-button>
+              <el-button size="small" type="danger" text @click="handleDelete(row)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="px-5 py-3 border-t border-gray-50">
+        <el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.per_page" :total="total" :page-sizes="[10,20,50]" layout="total,sizes,prev,pager,next,jumper" background @current-change="handlePageChange" @size-change="handleSizeChange" />
+      </div>
     </div>
 
     <!-- Add/Edit -->
diff --git a/frontend/src/views/crm/leads/index.vue b/frontend/src/views/crm/leads/index.vue
index 90062b5..9bf2d63 100644
--- a/frontend/src/views/crm/leads/index.vue
+++ b/frontend/src/views/crm/leads/index.vue
@@ -144,8 +144,8 @@ onMounted(() => { fetchList(); fetchChannels(); fetchUsers() })
 </script>
 
 <template>
-  <div class="page-container">
-    <div class="search-bar">
+  <div class="p-6 space-y-4">
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-4 flex items-center flex-wrap gap-3">
       <el-input v-model="searchForm.name" placeholder="姓名" style="width:160px" clearable @keydown.enter="handleSearch" />
       <el-input v-model="searchForm.phone" placeholder="手机号" style="width:160px" clearable @keydown.enter="handleSearch" />
       <el-select v-model="searchForm.channel_id" placeholder="渠道" clearable style="width:140px">
@@ -159,36 +159,43 @@ onMounted(() => { fetchList(); fetchChannels(); fetchUsers() })
       <el-button @click="handleReset">重置</el-button>
     </div>
 
-    <div class="table-container">
-      <div class="table-actions">
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm">
+      <div class="flex items-center justify-between px-5 py-4 border-b border-gray-50">
+        <div class="flex items-center gap-3">
+          <span class="font-medium text-gray-700">线索列表</span>
+        </div>
         <el-button type="primary" @click="handleAdd">新增线索</el-button>
       </div>
-      <el-table v-loading="loading" :data="tableData" border stripe style="width:100%">
-        <el-table-column prop="name" label="姓名" min-width="100" />
-        <el-table-column prop="phone" label="手机号" min-width="130" />
-        <el-table-column label="渠道" min-width="100">
-          <template #default="{ row }">{{ row.channel?.name || '-' }}</template>
-        </el-table-column>
-        <el-table-column prop="expected_date" label="预产期" min-width="110" />
-        <el-table-column label="状态" width="100" align="center">
-          <template #default="{ row }">
-            <el-tag :type="statusType[row.status]" size="small">{{ statusMap[row.status] }}</el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column label="负责人" min-width="100">
-          <template #default="{ row }">{{ row.owner?.name || '-' }}</template>
-        </el-table-column>
-        <el-table-column prop="created_at" label="创建时间" min-width="160" />
-        <el-table-column label="操作" width="260" fixed="right" align="center">
-          <template #default="{ row }">
-            <el-button size="small" type="primary" link @click="handleEdit(row)">编辑</el-button>
-            <el-button size="small" type="success" link @click="openFollow(row)">跟进</el-button>
-            <el-button size="small" type="warning" link @click="openAssign(row)">分配</el-button>
-            <el-button size="small" type="danger" link @click="handleDelete(row)">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-      <el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.per_page" :total="total" :page-sizes="[10,20,50]" layout="total,sizes,prev,pager,next,jumper" background @current-change="handlePageChange" @size-change="handleSizeChange" />
+      <div class="px-2">
+        <el-table v-loading="loading" :data="tableData" style="width:100%">
+          <el-table-column prop="name" label="姓名" min-width="100" />
+          <el-table-column prop="phone" label="手机号" min-width="130" />
+          <el-table-column label="渠道" min-width="100">
+            <template #default="{ row }">{{ row.channel?.name || '-' }}</template>
+          </el-table-column>
+          <el-table-column prop="expected_date" label="预产期" min-width="110" />
+          <el-table-column label="状态" width="100" align="center">
+            <template #default="{ row }">
+              <el-tag :type="statusType[row.status]" size="small">{{ statusMap[row.status] }}</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="负责人" min-width="100">
+            <template #default="{ row }">{{ row.owner?.name || '-' }}</template>
+          </el-table-column>
+          <el-table-column prop="created_at" label="创建时间" min-width="160" />
+          <el-table-column label="操作" width="260" fixed="right" align="center">
+            <template #default="{ row }">
+              <el-button size="small" type="primary" text @click="handleEdit(row)">编辑</el-button>
+              <el-button size="small" type="success" text @click="openFollow(row)">跟进</el-button>
+              <el-button size="small" type="warning" text @click="openAssign(row)">分配</el-button>
+              <el-button size="small" type="danger" text @click="handleDelete(row)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="px-5 py-3 border-t border-gray-50">
+        <el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.per_page" :total="total" :page-sizes="[10,20,50]" layout="total,sizes,prev,pager,next,jumper" background @current-change="handlePageChange" @size-change="handleSizeChange" />
+      </div>
     </div>
 
     <!-- Add/Edit -->
diff --git a/frontend/src/views/crm/questionnaires/index.vue b/frontend/src/views/crm/questionnaires/index.vue
new file mode 100644
index 0000000..aba1bdc
--- /dev/null
+++ b/frontend/src/views/crm/questionnaires/index.vue
@@ -0,0 +1,202 @@
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { questionnaireApi, customerApi } from '@/api/crm.js'
+
+const tableData = ref([])
+const total = ref(0)
+const loading = ref(false)
+const dialogVisible = ref(false)
+const dialogTitle = ref('新建问卷')
+const submitLoading = ref(false)
+const detailVisible = ref(false)
+const detailData = ref(null)
+const customers = ref([])
+
+const searchForm = reactive({ customer_id: '', status: '' })
+const pagination = reactive({ page: 1, per_page: 20 })
+
+const formRef = ref(null)
+const form = reactive({ id: null, customer_id: '', title: '', score: 80, status: 'draft' })
+const isEdit = ref(false)
+const formRules = {
+  customer_id: [{ required: true, message: '请选择客户', trigger: 'change' }],
+  title: [{ required: true, message: '请输入问卷标题', trigger: 'blur' }],
+  score: [{ required: true, message: '请输入评分', trigger: 'blur' }]
+}
+
+const statusMap = { draft: '草稿', sent: '已发送', completed: '已完成' }
+const statusType = { draft: 'info', sent: 'warning', completed: 'success' }
+
+async function fetchList() {
+  loading.value = true
+  try {
+    const res = await questionnaireApi.getList({ ...searchForm, ...pagination })
+    tableData.value = res.data?.list || res.data?.data || []
+    total.value = res.data?.total || 0
+  } finally { loading.value = false }
+}
+
+async function fetchCustomers() {
+  try {
+    const res = await customerApi.getList({ per_page: 500 })
+    customers.value = res.data?.list || res.data?.data || []
+  } catch {}
+}
+
+function handleSearch() { pagination.page = 1; fetchList() }
+function handleReset() { Object.assign(searchForm, { customer_id: '', status: '' }); handleSearch() }
+
+function handleAdd() {
+  isEdit.value = false
+  dialogTitle.value = '新建问卷'
+  Object.assign(form, { id: null, customer_id: '', title: '', score: 80, status: 'draft' })
+  dialogVisible.value = true
+}
+
+async function handleEdit(row) {
+  isEdit.value = true
+  dialogTitle.value = '编辑问卷'
+  const res = await questionnaireApi.getDetail(row.id)
+  const d = res.data
+  Object.assign(form, { id: d.id, customer_id: d.customer_id, title: d.title, score: d.score, status: d.status })
+  dialogVisible.value = true
+}
+
+async function handleDetail(row) {
+  const res = await questionnaireApi.getDetail(row.id)
+  detailData.value = res.data
+  detailVisible.value = true
+}
+
+async function handleSubmit() {
+  if (!formRef.value) return
+  await formRef.value.validate(async (valid) => {
+    if (!valid) return
+    submitLoading.value = true
+    try {
+      if (isEdit.value) { await questionnaireApi.update(form.id, form); ElMessage.success('更新成功') }
+      else { await questionnaireApi.create(form); ElMessage.success('创建成功') }
+      dialogVisible.value = false; fetchList()
+    } finally { submitLoading.value = false }
+  })
+}
+
+async function handleDelete(row) {
+  await ElMessageBox.confirm(`确定删除问卷「${row.title}」吗？`, '删除确认', { type: 'warning' })
+  await questionnaireApi.delete(row.id); ElMessage.success('删除成功'); fetchList()
+}
+
+function handlePageChange(val) { pagination.page = val; fetchList() }
+function handleSizeChange(val) { pagination.per_page = val; pagination.page = 1; fetchList() }
+
+onMounted(() => { fetchList(); fetchCustomers() })
+</script>
+
+<template>
+  <div class="p-6 space-y-4">
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-4 flex items-center flex-wrap gap-3">
+      <el-select v-model="searchForm.customer_id" placeholder="选择客户" clearable filterable style="width:180px">
+        <el-option v-for="c in customers" :key="c.id" :label="`${c.name}(${c.phone})`" :value="c.id" />
+      </el-select>
+      <el-select v-model="searchForm.status" placeholder="状态" clearable style="width:120px">
+        <el-option v-for="(v, k) in statusMap" :key="k" :label="v" :value="k" />
+      </el-select>
+      <el-button type="primary" @click="handleSearch">查询</el-button>
+      <el-button @click="handleReset">重置</el-button>
+    </div>
+
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm">
+      <div class="flex items-center justify-between px-5 py-4 border-b border-gray-50">
+        <div class="flex items-center gap-2">
+          <span class="w-1 h-5 bg-rose-500 rounded-full inline-block"></span>
+          <span class="font-medium text-gray-700">问卷列表</span>
+        </div>
+        <el-button type="primary" @click="handleAdd">新建问卷</el-button>
+      </div>
+      <div class="px-2">
+        <el-table v-loading="loading" :data="tableData" style="width:100%">
+          <el-table-column label="客户" min-width="110">
+            <template #default="{ row }">{{ row.customer_name || row.customer?.name || '-' }}</template>
+          </el-table-column>
+          <el-table-column prop="title" label="问卷标题" min-width="180" show-overflow-tooltip />
+          <el-table-column label="满意度评分" width="110" align="center">
+            <template #default="{ row }">
+              <span :class="row.score >= 80 ? 'text-green-600' : row.score >= 60 ? 'text-yellow-500' : 'text-red-500'" class="font-semibold">
+                {{ row.score ?? '-' }}
+              </span>
+            </template>
+          </el-table-column>
+          <el-table-column label="状态" width="90" align="center">
+            <template #default="{ row }">
+              <el-tag :type="statusType[row.status]" size="small">{{ statusMap[row.status] }}</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column prop="created_at" label="创建时间" min-width="160" />
+          <el-table-column label="操作" width="200" fixed="right" align="center">
+            <template #default="{ row }">
+              <el-button size="small" type="primary" text @click="handleDetail(row)">详情</el-button>
+              <el-button size="small" type="primary" text @click="handleEdit(row)">编辑</el-button>
+              <el-button size="small" type="danger" text @click="handleDelete(row)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="px-5 py-3 border-t border-gray-50">
+        <el-pagination
+          v-model:current-page="pagination.page"
+          v-model:page-size="pagination.per_page"
+          :total="total"
+          :page-sizes="[10, 20, 50]"
+          layout="total,sizes,prev,pager,next,jumper"
+          background
+          @current-change="handlePageChange"
+          @size-change="handleSizeChange"
+        />
+      </div>
+    </div>
+
+    <!-- Add / Edit Dialog -->
+    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="560px" destroy-on-close>
+      <el-form ref="formRef" :model="form" :rules="formRules" label-width="90px">
+        <el-form-item label="客户" prop="customer_id">
+          <el-select v-model="form.customer_id" filterable placeholder="请选择客户" style="width:100%">
+            <el-option v-for="c in customers" :key="c.id" :label="`${c.name}(${c.phone})`" :value="c.id" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="问卷标题" prop="title">
+          <el-input v-model="form.title" placeholder="请输入问卷标题" />
+        </el-form-item>
+        <el-form-item label="满意度评分" prop="score">
+          <el-slider v-model="form.score" :min="0" :max="100" :step="1" show-input style="width:100%" />
+        </el-form-item>
+        <el-form-item label="状态">
+          <el-select v-model="form.status" style="width:100%">
+            <el-option v-for="(v, k) in statusMap" :key="k" :label="v" :value="k" />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" :loading="submitLoading" @click="handleSubmit">确定</el-button>
+      </template>
+    </el-dialog>
+
+    <!-- Detail Drawer -->
+    <el-drawer v-model="detailVisible" title="问卷详情" size="480px">
+      <template v-if="detailData">
+        <el-descriptions :column="2" border>
+          <el-descriptions-item label="客户">{{ detailData.customer_name || detailData.customer?.name || '-' }}</el-descriptions-item>
+          <el-descriptions-item label="标题" :span="2">{{ detailData.title }}</el-descriptions-item>
+          <el-descriptions-item label="评分">
+            <span :class="detailData.score >= 80 ? 'text-green-600 font-bold' : 'text-yellow-500 font-bold'">{{ detailData.score }}</span>
+          </el-descriptions-item>
+          <el-descriptions-item label="状态">
+            <el-tag :type="statusType[detailData.status]" size="small">{{ statusMap[detailData.status] }}</el-tag>
+          </el-descriptions-item>
+          <el-descriptions-item label="创建时间" :span="2">{{ detailData.created_at }}</el-descriptions-item>
+        </el-descriptions>
+      </template>
+    </el-drawer>
+  </div>
+</template>
diff --git a/frontend/src/views/dashboard/index.vue b/frontend/src/views/dashboard/index.vue
index e991338..b210dba 100644
--- a/frontend/src/views/dashboard/index.vue
+++ b/frontend/src/views/dashboard/index.vue
@@ -1,299 +1,113 @@
 <script setup>
 import { ref, computed, onMounted } from 'vue'
 import { useUserStore } from '@/stores/user.js'
+import { useRouter } from 'vue-router'
+import { Icon } from '@iconify/vue'
 
 const userStore = useUserStore()
+const router = useRouter()
 const username = computed(() => userStore.userInfo?.name || userStore.userInfo?.username || '用户')
 
 const today = computed(() => {
   const d = new Date()
-  return `${d.getFullYear()} 年 ${d.getMonth() + 1} 月 ${d.getDate()} 日`
-})
-
-const weekDay = computed(() => {
   const days = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
-  return days[new Date().getDay()]
+  return `${d.getFullYear()}年${d.getMonth() + 1}月${d.getDate()}日 ${days[d.getDay()]}`
 })
 
 const statCards = ref([
-  {
-    title: '在住宾客',
-    value: '--',
-    unit: '位',
-    icon: 'User',
-    color: '#E8A87C',
-    bg: '#FBE8D5'
-  },
-  {
-    title: '今日入住',
-    value: '--',
-    unit: '单',
-    icon: 'House',
-    color: '#67C23A',
-    bg: '#E8F5E1'
-  },
-  {
-    title: '今日退住',
-    value: '--',
-    unit: '单',
-    icon: 'SuitcaseLine',
-    color: '#409EFF',
-    bg: '#E0EFFF'
-  },
-  {
-    title: '今日收款',
-    value: '--',
-    unit: '元',
-    icon: 'Money',
-    color: '#E6A23C',
-    bg: '#FDF0D6'
-  },
-  {
-    title: '客房出租率',
-    value: '--',
-    unit: '%',
-    icon: 'DataAnalysis',
-    color: '#C97B5E',
-    bg: '#F9E8E0'
-  },
-  {
-    title: '本月新签',
-    value: '--',
-    unit: '单',
-    icon: 'DocumentAdd',
-    color: '#909399',
-    bg: '#F0F1F2'
-  }
+  { title: '今日预约客户', value: '--', trend: '+12% 较昨日', trendUp: true, icon: 'solar:users-group-rounded-bold-duotone', iconBg: 'bg-rose-50', iconColor: 'text-rose-500' },
+  { title: '当前入驻率',   value: '--', trend: '良好运营状态',  trendUp: true, icon: 'solar:home-bold-duotone',  iconBg: 'bg-blue-50', iconColor: 'text-blue-500' },
+  { title: '今日护理评分', value: '--', trend: '历史最高纪录',  trendUp: true, icon: 'solar:heart-pulse-bold-duotone', iconBg: 'bg-amber-50', iconColor: 'text-amber-500' },
+  { title: '本月营收(预计)', value: '--', trend: '+8.4% 较上月', trendUp: true, icon: 'solar:wad-of-money-bold-duotone', iconBg: 'bg-teal-50', iconColor: 'text-teal-500' },
 ])
 
 const shortcuts = [
-  { label: '新增客户', icon: 'UserFilled', path: '/crm/customers/add' },
-  { label: '办理入住', icon: 'House', path: '/room/check-in' },
-  { label: '办理退住', icon: 'DoorOpen', path: '/room/check-out' },
-  { label: '新建工单', icon: 'DocumentAdd', path: '/service/orders/add' },
-  { label: '今日月子餐', icon: 'Bowl', path: '/meal/today' },
-  { label: '护理记录', icon: 'FirstAidKit', path: '/nursing/records' }
+  { label: '新增客户', icon: 'solar:user-plus-bold-duotone', path: '/crm/customers' },
+  { label: '办理入住', icon: 'solar:home-bold-duotone', path: '/room/reservations' },
+  { label: '办理退住', icon: 'solar:door-open-bold-duotone', path: '/room/rooms' },
+  { label: '新建工单', icon: 'solar:document-add-bold-duotone', path: '/service/orders' },
+  { label: '今日月子餐', icon: 'solar:cup-bold', path: '/meal/daily-plans' },
+  { label: '护理记录', icon: 'solar:heart-pulse-bold-duotone', path: '/care/records' },
 ]
 
-// Placeholder — in production would fetch from API
 onMounted(() => {
   // Future: fetchDashboardStats()
 })
 </script>
 
 <template>
-  <div class="page-container">
+  <div class="p-6 space-y-5">
     <!-- Welcome Banner -->
-    <div class="welcome-banner card">
-      <div class="welcome-info">
-        <h2 class="welcome-title">你好，{{ username }} 👋</h2>
-        <p class="welcome-sub">{{ today }} &nbsp; {{ weekDay }}，祝您工作愉快！</p>
-      </div>
-      <div class="welcome-deco">
-        <el-icon :size="80" color="rgba(232,168,124,0.2)"><House /></el-icon>
+    <div class="bg-gradient-to-r from-rose-50 to-orange-50 rounded-3xl p-8 flex items-center justify-between border border-rose-100">
+      <div>
+        <h2 class="text-2xl font-bold text-gray-800 mb-1">你好，{{ username }} 👋</h2>
+        <p class="text-gray-400 text-sm">{{ today }}，祝您工作愉快！</p>
       </div>
+      <Icon icon="solar:heart-bold" class="text-8xl text-rose-200" />
     </div>
 
-    <!-- Stats Cards -->
-    <div class="stats-grid mt-16">
+    <!-- KPI Cards -->
+    <div class="grid grid-cols-4 gap-5">
       <div
         v-for="stat in statCards"
         :key="stat.title"
-        class="stat-card card"
+        class="bg-white rounded-3xl border border-gray-100 shadow-sm p-6"
       >
-        <div class="stat-icon-wrap" :style="{ background: stat.bg }">
-          <el-icon :size="28" :style="{ color: stat.color }">
-            <component :is="stat.icon" />
-          </el-icon>
-        </div>
-        <div class="stat-info">
-          <div class="stat-label">{{ stat.title }}</div>
-          <div class="stat-value">
-            <span class="stat-number" :style="{ color: stat.color }">{{ stat.value }}</span>
-            <span class="stat-unit">{{ stat.unit }}</span>
+        <div class="flex items-center gap-4 mb-4">
+          <div class="w-12 h-12 rounded-2xl flex items-center justify-center text-2xl" :class="[stat.iconBg, stat.iconColor]">
+            <Icon :icon="stat.icon" />
           </div>
+          <div>
+            <p class="text-gray-400 text-xs">{{ stat.title }}</p>
+            <p class="text-2xl font-bold text-gray-800">{{ stat.value }}</p>
+          </div>
+        </div>
+        <div class="text-xs font-bold flex items-center gap-1" :class="stat.trendUp ? 'text-green-500' : 'text-red-400'">
+          <Icon :icon="stat.trendUp ? 'solar:double-alt-arrow-up-bold-duotone' : 'solar:double-alt-arrow-down-bold-duotone'" />
+          {{ stat.trend }}
         </div>
       </div>
     </div>
 
     <!-- Quick Access -->
-    <div class="section-title mt-24">快捷入口</div>
-    <div class="shortcuts-grid mt-12">
-      <router-link
-        v-for="item in shortcuts"
-        :key="item.label"
-        :to="item.path"
-        class="shortcut-card card"
-      >
-        <el-icon :size="28" color="#E8A87C">
-          <component :is="item.icon" />
-        </el-icon>
-        <span class="shortcut-label">{{ item.label }}</span>
-      </router-link>
+    <div class="bg-white rounded-3xl border border-gray-100 shadow-sm p-6">
+      <h3 class="font-bold text-gray-800 mb-5 flex items-center gap-2">
+        <span class="w-1 h-5 bg-rose-500 rounded-full inline-block"></span>
+        快捷入口
+      </h3>
+      <div class="grid grid-cols-6 gap-4">
+        <button
+          v-for="item in shortcuts"
+          :key="item.label"
+          class="flex flex-col items-center justify-center gap-3 p-5 rounded-2xl bg-gray-50 hover:bg-rose-50 hover:text-rose-500 transition-all duration-150 group"
+          @click="router.push(item.path)"
+        >
+          <Icon :icon="item.icon" class="text-3xl text-gray-400 group-hover:text-rose-500 transition-colors" />
+          <span class="text-xs font-medium text-gray-600 group-hover:text-rose-500">{{ item.label }}</span>
+        </button>
+      </div>
     </div>
 
     <!-- System Info -->
-    <div class="system-info card mt-16">
-      <div class="info-title">系统信息</div>
-      <div class="info-grid mt-12">
-        <div class="info-item">
-          <span class="info-key">系统名称</span>
-          <span class="info-val">宫中有喜月子会所综合管理系统</span>
+    <div class="bg-white rounded-3xl border border-gray-100 shadow-sm p-6">
+      <h3 class="font-bold text-gray-800 mb-4 flex items-center gap-2">
+        <span class="w-1 h-5 bg-rose-500 rounded-full inline-block"></span>
+        系统信息
+      </h3>
+      <div class="grid grid-cols-3 gap-4">
+        <div class="flex gap-3 text-sm">
+          <span class="text-gray-400 w-20 flex-shrink-0">系统名称</span>
+          <span class="text-gray-700 font-medium">宫中有喜月子会所综合管理系统</span>
         </div>
-        <div class="info-item">
-          <span class="info-key">当前版本</span>
-          <span class="info-val">v1.0.0</span>
+        <div class="flex gap-3 text-sm">
+          <span class="text-gray-400 w-20 flex-shrink-0">当前版本</span>
+          <span class="text-gray-700 font-medium">v1.0.0</span>
         </div>
-        <div class="info-item">
-          <span class="info-key">技术支持</span>
-          <span class="info-val">宫中有喜运营团队</span>
+        <div class="flex gap-3 text-sm">
+          <span class="text-gray-400 w-20 flex-shrink-0">技术支持</span>
+          <span class="text-gray-700 font-medium">宫中有喜运营团队</span>
         </div>
       </div>
     </div>
   </div>
 </template>
-
-<style scoped lang="scss">
-.welcome-banner {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  background: linear-gradient(135deg, #FBE8D5, #F5D5BC);
-  border: none;
-  overflow: hidden;
-}
-
-.welcome-title {
-  font-size: 22px;
-  font-weight: 700;
-  color: var(--color-primary-dark);
-  margin-bottom: 8px;
-}
-
-.welcome-sub {
-  font-size: 14px;
-  color: var(--color-secondary);
-}
-
-.welcome-deco {
-  opacity: 0.6;
-}
-
-.stats-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-  gap: 16px;
-}
-
-.stat-card {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  padding: 20px;
-}
-
-.stat-icon-wrap {
-  width: 56px;
-  height: 56px;
-  border-radius: 12px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-}
-
-.stat-info {
-  flex: 1;
-  min-width: 0;
-}
-
-.stat-label {
-  font-size: 13px;
-  color: var(--color-text-secondary);
-  margin-bottom: 4px;
-}
-
-.stat-value {
-  display: flex;
-  align-items: baseline;
-  gap: 4px;
-}
-
-.stat-number {
-  font-size: 28px;
-  font-weight: 700;
-  line-height: 1;
-}
-
-.stat-unit {
-  font-size: 13px;
-  color: var(--color-text-secondary);
-}
-
-.section-title {
-  font-size: 16px;
-  font-weight: 600;
-  color: var(--color-text-primary);
-  padding-left: 8px;
-  border-left: 3px solid var(--color-primary);
-}
-
-.shortcuts-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
-  gap: 12px;
-}
-
-.shortcut-card {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 10px;
-  padding: 24px 16px;
-  cursor: pointer;
-  transition: all 0.2s;
-  text-decoration: none;
-
-  &:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 4px 16px rgba(232, 168, 124, 0.2);
-  }
-}
-
-.shortcut-label {
-  font-size: 13px;
-  color: var(--color-text-primary);
-  font-weight: 500;
-}
-
-.system-info {
-  .info-title {
-    font-size: 15px;
-    font-weight: 600;
-    color: var(--color-text-primary);
-  }
-}
-
-.info-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-  gap: 12px;
-}
-
-.info-item {
-  display: flex;
-  gap: 12px;
-  font-size: 13px;
-}
-
-.info-key {
-  color: var(--color-text-secondary);
-  min-width: 80px;
-  flex-shrink: 0;
-}
-
-.info-val {
-  color: var(--color-text-primary);
-}
-</style>
diff --git a/frontend/src/views/finance/accounts/index.vue b/frontend/src/views/finance/accounts/index.vue
index 0f64211..00a2097 100644
--- a/frontend/src/views/finance/accounts/index.vue
+++ b/frontend/src/views/finance/accounts/index.vue
@@ -97,29 +97,38 @@ onMounted(() => fetchList())
 </script>
 
 <template>
-  <div class="page-container">
-    <div class="search-bar">
+  <div class="p-6 space-y-4">
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-4 flex items-center flex-wrap gap-3">
       <el-input v-model="searchForm.customer_id" placeholder="客户ID" style="width:160px" clearable @keydown.enter="handleSearch" />
       <el-button type="primary" @click="handleSearch">查询</el-button>
       <el-button @click="handleReset">重置</el-button>
     </div>
 
-    <div class="table-container">
-      <el-table v-loading="loading" :data="tableData" border stripe style="width:100%">
-        <el-table-column label="客户姓名" min-width="120">
-          <template #default="{ row }">{{ row.customer?.name || '-' }}</template>
-        </el-table-column>
-        <el-table-column prop="cash_balance" label="现金余额" min-width="120" align="right" />
-        <el-table-column prop="card_balance" label="储值卡余额" min-width="120" align="right" />
-        <el-table-column prop="points" label="积分" min-width="100" align="right" />
-        <el-table-column label="操作" width="180" fixed="right" align="center">
-          <template #default="{ row }">
-            <el-button size="small" type="primary" link @click="handleRecharge(row)">充值</el-button>
-            <el-button size="small" type="primary" link @click="handleViewTx(row)">查看流水</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-      <el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.per_page" :total="total" :page-sizes="[10, 20, 50]" layout="total,sizes,prev,pager,next,jumper" background @current-change="handlePageChange" @size-change="handleSizeChange" />
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm">
+      <div class="flex items-center justify-between px-5 py-4 border-b border-gray-50">
+        <div class="flex items-center gap-3">
+          <span class="font-medium text-gray-700">客户账户列表</span>
+        </div>
+      </div>
+      <div class="px-2">
+        <el-table v-loading="loading" :data="tableData" style="width:100%">
+          <el-table-column label="客户姓名" min-width="120">
+            <template #default="{ row }">{{ row.customer?.name || '-' }}</template>
+          </el-table-column>
+          <el-table-column prop="cash_balance" label="现金余额" min-width="120" align="right" />
+          <el-table-column prop="card_balance" label="储值卡余额" min-width="120" align="right" />
+          <el-table-column prop="points" label="积分" min-width="100" align="right" />
+          <el-table-column label="操作" width="180" fixed="right" align="center">
+            <template #default="{ row }">
+              <el-button size="small" type="primary" text @click="handleRecharge(row)">充值</el-button>
+              <el-button size="small" type="primary" text @click="handleViewTx(row)">查看流水</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="px-5 py-3 border-t border-gray-50">
+        <el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.per_page" :total="total" :page-sizes="[10, 20, 50]" layout="total,sizes,prev,pager,next,jumper" background @current-change="handlePageChange" @size-change="handleSizeChange" />
+      </div>
     </div>
 
     <!-- Recharge Dialog -->
diff --git a/frontend/src/views/finance/categories/index.vue b/frontend/src/views/finance/categories/index.vue
index 6438185..544b628 100644
--- a/frontend/src/views/finance/categories/index.vue
+++ b/frontend/src/views/finance/categories/index.vue
@@ -77,8 +77,8 @@ onMounted(() => fetchList())
 </script>
 
 <template>
-  <div class="page-container">
-    <div class="search-bar">
+  <div class="p-6 space-y-4">
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-4 flex items-center flex-wrap gap-3">
       <el-select v-model="searchForm.type" placeholder="类型" clearable style="width:120px">
         <el-option v-for="(v, k) in typeMap" :key="k" :label="v" :value="Number(k)" />
       </el-select>
@@ -89,31 +89,40 @@ onMounted(() => fetchList())
       <el-button type="primary" @click="handleSearch">查询</el-button>
       <el-button @click="handleReset">重置</el-button>
     </div>
-    <div class="table-container">
-      <div class="table-actions"><el-button type="primary" @click="handleAdd">新增分类</el-button></div>
-      <el-table v-loading="loading" :data="tableData" border stripe row-key="id" default-expand-all style="width:100%">
-        <el-table-column prop="name" label="分类名称" min-width="180" />
-        <el-table-column label="类型" width="100" align="center">
-          <template #default="{ row }">
-            <el-tag :type="row.type === 1 ? 'success' : 'danger'" size="small">{{ typeMap[row.type] }}</el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column prop="level" label="层级" width="80" align="center" />
-        <el-table-column prop="sort" label="排序" width="80" align="center" />
-        <el-table-column label="状态" width="80" align="center">
-          <template #default="{ row }">
-            <el-tag :type="row.status ? 'success' : 'danger'" size="small">{{ row.status ? '启用' : '停用' }}</el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column prop="created_at" label="创建时间" min-width="160" />
-        <el-table-column label="操作" width="160" fixed="right" align="center">
-          <template #default="{ row }">
-            <el-button size="small" type="primary" link @click="handleEdit(row)">编辑</el-button>
-            <el-button size="small" type="danger" link @click="handleDelete(row)">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-      <el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.per_page" :total="total" :page-sizes="[20,50,100]" layout="total,sizes,prev,pager,next,jumper" background @current-change="handlePageChange" @size-change="handleSizeChange" />
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm">
+      <div class="flex items-center justify-between px-5 py-4 border-b border-gray-50">
+        <div class="flex items-center gap-3">
+          <span class="font-medium text-gray-700">收支分类列表</span>
+        </div>
+        <el-button type="primary" @click="handleAdd">新增分类</el-button>
+      </div>
+      <div class="px-2">
+        <el-table v-loading="loading" :data="tableData" row-key="id" default-expand-all style="width:100%">
+          <el-table-column prop="name" label="分类名称" min-width="180" />
+          <el-table-column label="类型" width="100" align="center">
+            <template #default="{ row }">
+              <el-tag :type="row.type === 1 ? 'success' : 'danger'" size="small">{{ typeMap[row.type] }}</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column prop="level" label="层级" width="80" align="center" />
+          <el-table-column prop="sort" label="排序" width="80" align="center" />
+          <el-table-column label="状态" width="80" align="center">
+            <template #default="{ row }">
+              <el-tag :type="row.status ? 'success' : 'danger'" size="small">{{ row.status ? '启用' : '停用' }}</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column prop="created_at" label="创建时间" min-width="160" />
+          <el-table-column label="操作" width="160" fixed="right" align="center">
+            <template #default="{ row }">
+              <el-button size="small" type="primary" text @click="handleEdit(row)">编辑</el-button>
+              <el-button size="small" type="danger" text @click="handleDelete(row)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="px-5 py-3 border-t border-gray-50">
+        <el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.per_page" :total="total" :page-sizes="[20,50,100]" layout="total,sizes,prev,pager,next,jumper" background @current-change="handlePageChange" @size-change="handleSizeChange" />
+      </div>
     </div>
     <el-dialog v-model="dialogVisible" :title="isEdit ? '编辑分类' : '新增分类'" width="450px" destroy-on-close>
       <el-form ref="formRef" :model="form" :rules="formRules" label-width="90px">
diff --git a/frontend/src/views/finance/invoices/index.vue b/frontend/src/views/finance/invoices/index.vue
index ab09341..54df240 100644
--- a/frontend/src/views/finance/invoices/index.vue
+++ b/frontend/src/views/finance/invoices/index.vue
@@ -69,8 +69,8 @@ onMounted(() => fetchList())
 </script>
 
 <template>
-  <div class="page-container">
-    <div class="search-bar">
+  <div class="p-6 space-y-4">
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-4 flex items-center flex-wrap gap-3">
       <el-input v-model="searchForm.invoice_no" placeholder="发票号" style="width:180px" clearable @keydown.enter="handleSearch" />
       <el-select v-model="searchForm.status" placeholder="状态" clearable style="width:120px">
         <el-option v-for="(v, k) in statusMap" :key="k" :label="v" :value="Number(k)" />
@@ -81,26 +81,35 @@ onMounted(() => fetchList())
       <el-button type="primary" @click="handleSearch">查询</el-button>
       <el-button @click="handleReset">重置</el-button>
     </div>
-    <div class="table-container">
-      <div class="table-actions"><el-button type="primary" @click="handleAdd">新增发票</el-button></div>
-      <el-table v-loading="loading" :data="tableData" border stripe style="width:100%">
-        <el-table-column prop="invoice_no" label="发票号" min-width="150" />
-        <el-table-column prop="customer_id" label="客户ID" width="100" align="center" />
-        <el-table-column label="类型" width="80" align="center"><template #default="{ row }"><el-tag size="small">{{ typeMap[row.type] }}</el-tag></template></el-table-column>
-        <el-table-column prop="amount" label="金额" width="100" align="right" />
-        <el-table-column prop="tax_amount" label="税额" width="100" align="right" />
-        <el-table-column prop="title" label="发票抬头" min-width="180" show-overflow-tooltip />
-        <el-table-column label="状态" width="90" align="center"><template #default="{ row }"><el-tag :type="statusType[row.status]" size="small">{{ statusMap[row.status] }}</el-tag></template></el-table-column>
-        <el-table-column prop="issued_at" label="开票时间" width="160" />
-        <el-table-column label="操作" width="200" fixed="right" align="center">
-          <template #default="{ row }">
-            <el-button v-if="row.status===0" size="small" type="success" link @click="handleIssue(row)">开票</el-button>
-            <el-button v-if="row.status===0" size="small" type="primary" link @click="handleEdit(row)">编辑</el-button>
-            <el-button v-if="row.status===0" size="small" type="danger" link @click="handleDelete(row)">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-      <el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.per_page" :total="total" :page-sizes="[10,15,20,50]" layout="total,sizes,prev,pager,next,jumper" background @current-change="handlePageChange" @size-change="handleSizeChange" />
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm">
+      <div class="flex items-center justify-between px-5 py-4 border-b border-gray-50">
+        <div class="flex items-center gap-3">
+          <span class="font-medium text-gray-700">发票列表</span>
+        </div>
+        <el-button type="primary" @click="handleAdd">新增发票</el-button>
+      </div>
+      <div class="px-2">
+        <el-table v-loading="loading" :data="tableData" style="width:100%">
+          <el-table-column prop="invoice_no" label="发票号" min-width="150" />
+          <el-table-column prop="customer_id" label="客户ID" width="100" align="center" />
+          <el-table-column label="类型" width="80" align="center"><template #default="{ row }"><el-tag size="small">{{ typeMap[row.type] }}</el-tag></template></el-table-column>
+          <el-table-column prop="amount" label="金额" width="100" align="right" />
+          <el-table-column prop="tax_amount" label="税额" width="100" align="right" />
+          <el-table-column prop="title" label="发票抬头" min-width="180" show-overflow-tooltip />
+          <el-table-column label="状态" width="90" align="center"><template #default="{ row }"><el-tag :type="statusType[row.status]" size="small">{{ statusMap[row.status] }}</el-tag></template></el-table-column>
+          <el-table-column prop="issued_at" label="开票时间" width="160" />
+          <el-table-column label="操作" width="200" fixed="right" align="center">
+            <template #default="{ row }">
+              <el-button v-if="row.status===0" size="small" type="success" text @click="handleIssue(row)">开票</el-button>
+              <el-button v-if="row.status===0" size="small" type="primary" text @click="handleEdit(row)">编辑</el-button>
+              <el-button v-if="row.status===0" size="small" type="danger" text @click="handleDelete(row)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="px-5 py-3 border-t border-gray-50">
+        <el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.per_page" :total="total" :page-sizes="[10,15,20,50]" layout="total,sizes,prev,pager,next,jumper" background @current-change="handlePageChange" @size-change="handleSizeChange" />
+      </div>
     </div>
     <el-dialog v-model="dialogVisible" :title="isEdit?'编辑发票':'新增发票'" width="550px" destroy-on-close>
       <el-form ref="formRef" :model="form" :rules="formRules" label-width="100px">
diff --git a/frontend/src/views/finance/payments/index.vue b/frontend/src/views/finance/payments/index.vue
new file mode 100644
index 0000000..f2880ae
--- /dev/null
+++ b/frontend/src/views/finance/payments/index.vue
@@ -0,0 +1,215 @@
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { paymentApi } from '@/api/finance.js'
+
+const tableData = ref([])
+const total = ref(0)
+const loading = ref(false)
+const dialogVisible = ref(false)
+const submitLoading = ref(false)
+
+const searchForm = reactive({ status: '', date_from: '', date_to: '' })
+const pagination = reactive({ page: 1, per_page: 20 })
+
+const formRef = ref(null)
+const form = reactive({
+  customer_id: '',
+  customer_name: '',
+  contract_id: '',
+  amount: 0,
+  payment_method: '',
+  remark: ''
+})
+const formRules = {
+  customer_name: [{ required: true, message: '请输入客户姓名', trigger: 'blur' }],
+  amount: [{ required: true, message: '请输入金额', trigger: 'blur' }],
+  payment_method: [{ required: true, message: '请选择付款方式', trigger: 'change' }]
+}
+
+const statusMap = { pending: '待确认', confirmed: '已确认' }
+const statusType = { pending: 'warning', confirmed: 'success' }
+const payMethodMap = {
+  cash: '现金',
+  card: '刷卡',
+  wechat: '微信',
+  alipay: '支付宝',
+  transfer: '银行转账'
+}
+
+async function fetchList() {
+  loading.value = true
+  try {
+    const res = await paymentApi.getList({ ...searchForm, ...pagination })
+    tableData.value = res.data?.list || res.data?.data || []
+    total.value = res.data?.total || 0
+  } catch {
+    ElMessage.error('获取付款列表失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+function handleSearch() { pagination.page = 1; fetchList() }
+function handleReset() {
+  Object.assign(searchForm, { status: '', date_from: '', date_to: '' })
+  handleSearch()
+}
+
+function handleAdd() {
+  Object.assign(form, {
+    customer_id: '', customer_name: '', contract_id: '',
+    amount: 0, payment_method: '', remark: ''
+  })
+  dialogVisible.value = true
+}
+
+async function handleSubmit() {
+  if (!formRef.value) return
+  await formRef.value.validate(async (valid) => {
+    if (!valid) return
+    submitLoading.value = true
+    try {
+      await paymentApi.create({ ...form, type: 'payment' })
+      ElMessage.success('创建成功')
+      dialogVisible.value = false
+      fetchList()
+    } catch {
+      ElMessage.error('创建失败')
+    } finally {
+      submitLoading.value = false
+    }
+  })
+}
+
+async function handleConfirm(row) {
+  await ElMessageBox.confirm(`确认收款「¥${row.amount}」吗？`, '确认收款', { type: 'warning' })
+  try {
+    await paymentApi.audit(row.id, {})
+    ElMessage.success('确认成功')
+    fetchList()
+  } catch {
+    ElMessage.error('确认失败')
+  }
+}
+
+function handlePageChange(val) { pagination.page = val; fetchList() }
+function handleSizeChange(val) { pagination.per_page = val; pagination.page = 1; fetchList() }
+
+onMounted(() => fetchList())
+</script>
+
+<template>
+  <div class="p-6 space-y-4">
+    <!-- 搜索栏 -->
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-4 flex items-center flex-wrap gap-3">
+      <el-select v-model="searchForm.status" placeholder="状态" clearable style="width:120px">
+        <el-option v-for="(v, k) in statusMap" :key="k" :label="v" :value="k" />
+      </el-select>
+      <el-date-picker
+        v-model="searchForm.date_from"
+        type="date"
+        value-format="YYYY-MM-DD"
+        placeholder="开始日期"
+        style="width:150px"
+      />
+      <el-date-picker
+        v-model="searchForm.date_to"
+        type="date"
+        value-format="YYYY-MM-DD"
+        placeholder="结束日期"
+        style="width:150px"
+      />
+      <el-button type="primary" @click="handleSearch">查询</el-button>
+      <el-button @click="handleReset">重置</el-button>
+    </div>
+
+    <!-- 列表卡片 -->
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm">
+      <div class="flex items-center justify-between px-5 py-4 border-b border-gray-50">
+        <div class="flex items-center gap-3">
+          <span class="w-1 h-5 bg-rose-500 rounded-full inline-block"></span>
+          <span class="font-medium text-gray-700">付款记录列表</span>
+        </div>
+        <el-button type="primary" @click="handleAdd">新建收款记录</el-button>
+      </div>
+      <div class="px-2">
+        <el-table v-loading="loading" :data="tableData" style="width:100%" stripe>
+          <el-table-column prop="id" label="ID" width="70" align="center" />
+          <el-table-column prop="customer_name" label="客户" min-width="110" />
+          <el-table-column prop="contract_id" label="合同ID" width="90" align="center" />
+          <el-table-column label="金额" width="120" align="right">
+            <template #default="{ row }">
+              <span class="text-green-600 font-semibold">¥{{ Number(row.amount || 0).toFixed(2) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="付款方式" width="110" align="center">
+            <template #default="{ row }">
+              {{ payMethodMap[row.payment_method] || row.payment_method || '-' }}
+            </template>
+          </el-table-column>
+          <el-table-column label="状态" width="100" align="center">
+            <template #default="{ row }">
+              <el-tag :type="statusType[row.status]" size="small">
+                {{ statusMap[row.status] || row.status }}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column prop="remark" label="备注" min-width="120" show-overflow-tooltip />
+          <el-table-column prop="created_at" label="创建时间" min-width="160" />
+          <el-table-column label="操作" width="100" fixed="right" align="center">
+            <template #default="{ row }">
+              <el-button
+                v-if="row.status === 'pending'"
+                size="small"
+                type="success"
+                text
+                @click="handleConfirm(row)"
+              >确认收款</el-button>
+              <span v-else class="text-gray-400 text-sm">-</span>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="px-5 py-3 border-t border-gray-50">
+        <el-pagination
+          v-model:current-page="pagination.page"
+          v-model:page-size="pagination.per_page"
+          :total="total"
+          :page-sizes="[10, 20, 50]"
+          layout="total,sizes,prev,pager,next,jumper"
+          background
+          @current-change="handlePageChange"
+          @size-change="handleSizeChange"
+        />
+      </div>
+    </div>
+
+    <!-- 新建收款 Dialog -->
+    <el-dialog v-model="dialogVisible" title="新建收款记录" width="520px" destroy-on-close>
+      <el-form ref="formRef" :model="form" :rules="formRules" label-width="90px">
+        <el-form-item label="客户姓名" prop="customer_name">
+          <el-input v-model="form.customer_name" placeholder="请输入客户姓名" />
+        </el-form-item>
+        <el-form-item label="合同ID">
+          <el-input v-model="form.contract_id" placeholder="关联合同ID（可选）" />
+        </el-form-item>
+        <el-form-item label="金额" prop="amount">
+          <el-input-number v-model="form.amount" :min="0.01" :precision="2" style="width:100%" />
+        </el-form-item>
+        <el-form-item label="付款方式" prop="payment_method">
+          <el-select v-model="form.payment_method" placeholder="选择付款方式" style="width:100%">
+            <el-option v-for="(v, k) in payMethodMap" :key="k" :label="v" :value="k" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="备注">
+          <el-input v-model="form.remark" type="textarea" :rows="3" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" :loading="submitLoading" @click="handleSubmit">确定</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
diff --git a/frontend/src/views/finance/prepaid-cards/index.vue b/frontend/src/views/finance/prepaid-cards/index.vue
index 9651c62..3904649 100644
--- a/frontend/src/views/finance/prepaid-cards/index.vue
+++ b/frontend/src/views/finance/prepaid-cards/index.vue
@@ -60,8 +60,8 @@ onMounted(() => fetchList())
 </script>
 
 <template>
-  <div class="page-container">
-    <div class="search-bar">
+  <div class="p-6 space-y-4">
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-4 flex items-center flex-wrap gap-3">
       <el-input v-model="searchForm.name" placeholder="储值卡名称" style="width:180px" clearable @keydown.enter="handleSearch" />
       <el-select v-model="searchForm.status" placeholder="状态" clearable style="width:120px">
         <el-option label="启用" :value="1" />
@@ -70,23 +70,32 @@ onMounted(() => fetchList())
       <el-button type="primary" @click="handleSearch">查询</el-button>
       <el-button @click="handleReset">重置</el-button>
     </div>
-    <div class="table-container">
-      <div class="table-actions"><el-button type="primary" @click="handleAdd">新增储值卡</el-button></div>
-      <el-table v-loading="loading" :data="tableData" border stripe style="width:100%">
-        <el-table-column prop="name" label="储值卡名称" min-width="150" />
-        <el-table-column prop="face_value" label="面值" width="100" align="right" />
-        <el-table-column prop="sell_price" label="售价" width="100" align="right" />
-        <el-table-column prop="discount_rate" label="折扣率" width="90" align="center" />
-        <el-table-column prop="validity_days" label="有效期(天)" width="100" align="center" />
-        <el-table-column label="状态" width="80" align="center"><template #default="{ row }"><el-tag :type="row.status?'success':'danger'" size="small">{{ row.status?'启用':'停用' }}</el-tag></template></el-table-column>
-        <el-table-column label="操作" width="160" fixed="right" align="center">
-          <template #default="{ row }">
-            <el-button size="small" type="primary" link @click="handleEdit(row)">编辑</el-button>
-            <el-button size="small" type="danger" link @click="handleDelete(row)">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-      <el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.per_page" :total="total" :page-sizes="[10,15,20,50]" layout="total,sizes,prev,pager,next,jumper" background @current-change="handlePageChange" @size-change="handleSizeChange" />
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm">
+      <div class="flex items-center justify-between px-5 py-4 border-b border-gray-50">
+        <div class="flex items-center gap-3">
+          <span class="font-medium text-gray-700">储值卡列表</span>
+        </div>
+        <el-button type="primary" @click="handleAdd">新增储值卡</el-button>
+      </div>
+      <div class="px-2">
+        <el-table v-loading="loading" :data="tableData" style="width:100%">
+          <el-table-column prop="name" label="储值卡名称" min-width="150" />
+          <el-table-column prop="face_value" label="面值" width="100" align="right" />
+          <el-table-column prop="sell_price" label="售价" width="100" align="right" />
+          <el-table-column prop="discount_rate" label="折扣率" width="90" align="center" />
+          <el-table-column prop="validity_days" label="有效期(天)" width="100" align="center" />
+          <el-table-column label="状态" width="80" align="center"><template #default="{ row }"><el-tag :type="row.status?'success':'danger'" size="small">{{ row.status?'启用':'停用' }}</el-tag></template></el-table-column>
+          <el-table-column label="操作" width="160" fixed="right" align="center">
+            <template #default="{ row }">
+              <el-button size="small" type="primary" text @click="handleEdit(row)">编辑</el-button>
+              <el-button size="small" type="danger" text @click="handleDelete(row)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="px-5 py-3 border-t border-gray-50">
+        <el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.per_page" :total="total" :page-sizes="[10,15,20,50]" layout="total,sizes,prev,pager,next,jumper" background @current-change="handlePageChange" @size-change="handleSizeChange" />
+      </div>
     </div>
     <el-dialog v-model="dialogVisible" :title="isEdit?'编辑储值卡':'新增储值卡'" width="500px" destroy-on-close>
       <el-form ref="formRef" :model="form" :rules="formRules" label-width="100px">
diff --git a/frontend/src/views/finance/records/index.vue b/frontend/src/views/finance/records/index.vue
index e1f93c6..c0f4121 100644
--- a/frontend/src/views/finance/records/index.vue
+++ b/frontend/src/views/finance/records/index.vue
@@ -104,8 +104,8 @@ onMounted(() => { fetchList() })
 </script>
 
 <template>
-  <div class="page-container">
-    <div class="search-bar">
+  <div class="p-6 space-y-4">
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-4 flex items-center flex-wrap gap-3">
       <el-select v-model="searchForm.type" placeholder="收支类型" clearable style="width:120px">
         <el-option v-for="(v, k) in typeMap" :key="k" :label="v" :value="Number(k)" />
       </el-select>
@@ -117,34 +117,43 @@ onMounted(() => { fetchList() })
       <el-button @click="handleReset">重置</el-button>
     </div>
 
-    <div class="table-container">
-      <div class="table-actions"><el-button type="primary" @click="handleAdd">新增记录</el-button></div>
-      <el-table v-loading="loading" :data="tableData" border stripe style="width:100%">
-        <el-table-column prop="record_no" label="记录编号" min-width="150" />
-        <el-table-column label="类型" width="90" align="center">
-          <template #default="{ row }"><el-tag :type="typeType[row.type]" size="small">{{ typeMap[row.type] || '-' }}</el-tag></template>
-        </el-table-column>
-        <el-table-column prop="category" label="分类" min-width="120">
-          <template #default="{ row }">{{ row.category?.name || row.category || '-' }}</template>
-        </el-table-column>
-        <el-table-column prop="amount" label="金额" min-width="110" align="right" />
-        <el-table-column label="支付方式" width="110" align="center">
-          <template #default="{ row }">{{ payMethodMap[row.pay_method] || '-' }}</template>
-        </el-table-column>
-        <el-table-column label="审核状态" width="100" align="center">
-          <template #default="{ row }"><el-tag :type="auditType[row.audit_status]" size="small">{{ auditMap[row.audit_status] }}</el-tag></template>
-        </el-table-column>
-        <el-table-column prop="record_date" label="记录日期" min-width="120" />
-        <el-table-column label="操作" width="220" fixed="right" align="center">
-          <template #default="{ row }">
-            <el-button v-if="row.audit_status===0" size="small" type="success" link @click="openAudit(row)">审核</el-button>
-            <el-button v-if="row.audit_status===0" size="small" type="primary" link @click="handleEdit(row)">编辑</el-button>
-            <el-button v-if="row.audit_status===0" size="small" type="danger" link @click="handleDelete(row)">删除</el-button>
-            <span v-if="row.audit_status!==0" class="text-muted">-</span>
-          </template>
-        </el-table-column>
-      </el-table>
-      <el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.per_page" :total="total" :page-sizes="[10,20,50]" layout="total,sizes,prev,pager,next,jumper" background @current-change="handlePageChange" @size-change="handleSizeChange" />
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm">
+      <div class="flex items-center justify-between px-5 py-4 border-b border-gray-50">
+        <div class="flex items-center gap-3">
+          <span class="font-medium text-gray-700">收支记录列表</span>
+        </div>
+        <el-button type="primary" @click="handleAdd">新增记录</el-button>
+      </div>
+      <div class="px-2">
+        <el-table v-loading="loading" :data="tableData" style="width:100%">
+          <el-table-column prop="record_no" label="记录编号" min-width="150" />
+          <el-table-column label="类型" width="90" align="center">
+            <template #default="{ row }"><el-tag :type="typeType[row.type]" size="small">{{ typeMap[row.type] || '-' }}</el-tag></template>
+          </el-table-column>
+          <el-table-column prop="category" label="分类" min-width="120">
+            <template #default="{ row }">{{ row.category?.name || row.category || '-' }}</template>
+          </el-table-column>
+          <el-table-column prop="amount" label="金额" min-width="110" align="right" />
+          <el-table-column label="支付方式" width="110" align="center">
+            <template #default="{ row }">{{ payMethodMap[row.pay_method] || '-' }}</template>
+          </el-table-column>
+          <el-table-column label="审核状态" width="100" align="center">
+            <template #default="{ row }"><el-tag :type="auditType[row.audit_status]" size="small">{{ auditMap[row.audit_status] }}</el-tag></template>
+          </el-table-column>
+          <el-table-column prop="record_date" label="记录日期" min-width="120" />
+          <el-table-column label="操作" width="220" fixed="right" align="center">
+            <template #default="{ row }">
+              <el-button v-if="row.audit_status===0" size="small" type="success" text @click="openAudit(row)">审核</el-button>
+              <el-button v-if="row.audit_status===0" size="small" type="primary" text @click="handleEdit(row)">编辑</el-button>
+              <el-button v-if="row.audit_status===0" size="small" type="danger" text @click="handleDelete(row)">删除</el-button>
+              <span v-if="row.audit_status!==0" class="text-muted">-</span>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="px-5 py-3 border-t border-gray-50">
+        <el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.per_page" :total="total" :page-sizes="[10,20,50]" layout="total,sizes,prev,pager,next,jumper" background @current-change="handlePageChange" @size-change="handleSizeChange" />
+      </div>
     </div>
 
     <!-- Add/Edit -->
diff --git a/frontend/src/views/finance/transactions/index.vue b/frontend/src/views/finance/transactions/index.vue
new file mode 100644
index 0000000..6f7c8df
--- /dev/null
+++ b/frontend/src/views/finance/transactions/index.vue
@@ -0,0 +1,138 @@
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
+import { ElMessage } from 'element-plus'
+import { accountTransactionApi } from '@/api/finance.js'
+
+const tableData = ref([])
+const total = ref(0)
+const loading = ref(false)
+
+const searchForm = reactive({ account_id: '', type: '', date_from: '', date_to: '' })
+const pagination = reactive({ page: 1, per_page: 20 })
+
+const typeMap = {
+  deposit: '充值',
+  consume: '消费',
+  refund: '退款',
+  adjust: '调整'
+}
+const typeTagType = {
+  deposit: 'success',
+  consume: 'danger',
+  refund: 'warning',
+  adjust: 'info'
+}
+
+async function fetchList() {
+  loading.value = true
+  try {
+    const res = await accountTransactionApi.getList({ ...searchForm, ...pagination })
+    tableData.value = res.data?.list || res.data?.data || []
+    total.value = res.data?.total || 0
+  } catch {
+    ElMessage.error('获取流水列表失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+function handleSearch() { pagination.page = 1; fetchList() }
+function handleReset() {
+  Object.assign(searchForm, { account_id: '', type: '', date_from: '', date_to: '' })
+  handleSearch()
+}
+function handlePageChange(val) { pagination.page = val; fetchList() }
+function handleSizeChange(val) { pagination.per_page = val; pagination.page = 1; fetchList() }
+
+function amountClass(row) {
+  return ['deposit', 'refund'].includes(row.type) ? 'text-green-600 font-semibold' : 'text-red-500 font-semibold'
+}
+function amountPrefix(row) {
+  return ['deposit', 'refund'].includes(row.type) ? '+' : '-'
+}
+
+onMounted(() => fetchList())
+</script>
+
+<template>
+  <div class="p-6 space-y-4">
+    <!-- 搜索栏 -->
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-4 flex items-center flex-wrap gap-3">
+      <el-input
+        v-model="searchForm.account_id"
+        placeholder="账户ID"
+        style="width:150px"
+        clearable
+        @keydown.enter="handleSearch"
+      />
+      <el-select v-model="searchForm.type" placeholder="流水类型" clearable style="width:130px">
+        <el-option v-for="(v, k) in typeMap" :key="k" :label="v" :value="k" />
+      </el-select>
+      <el-date-picker
+        v-model="searchForm.date_from"
+        type="date"
+        value-format="YYYY-MM-DD"
+        placeholder="开始日期"
+        style="width:150px"
+      />
+      <el-date-picker
+        v-model="searchForm.date_to"
+        type="date"
+        value-format="YYYY-MM-DD"
+        placeholder="结束日期"
+        style="width:150px"
+      />
+      <el-button type="primary" @click="handleSearch">查询</el-button>
+      <el-button @click="handleReset">重置</el-button>
+    </div>
+
+    <!-- 列表卡片 -->
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm">
+      <div class="flex items-center gap-3 px-5 py-4 border-b border-gray-50">
+        <span class="w-1 h-5 bg-rose-500 rounded-full inline-block"></span>
+        <span class="font-medium text-gray-700">账户流水明细</span>
+        <el-tag type="info" size="small" class="ml-auto">只读</el-tag>
+      </div>
+      <div class="px-2">
+        <el-table v-loading="loading" :data="tableData" style="width:100%" stripe>
+          <el-table-column prop="id" label="流水ID" width="80" align="center" />
+          <el-table-column prop="customer_name" label="客户" min-width="110" />
+          <el-table-column label="类型" width="90" align="center">
+            <template #default="{ row }">
+              <el-tag :type="typeTagType[row.type]" size="small">
+                {{ typeMap[row.type] || row.type }}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="金额" width="120" align="right">
+            <template #default="{ row }">
+              <span :class="amountClass(row)">
+                {{ amountPrefix(row) }}{{ Number(row.amount || 0).toFixed(2) }}
+              </span>
+            </template>
+          </el-table-column>
+          <el-table-column label="余额(后)" width="120" align="right">
+            <template #default="{ row }">
+              <span class="text-gray-700">{{ Number(row.balance_after || 0).toFixed(2) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="operator_name" label="操作人" width="100" align="center" />
+          <el-table-column prop="remark" label="备注" min-width="140" show-overflow-tooltip />
+          <el-table-column prop="created_at" label="时间" min-width="160" />
+        </el-table>
+      </div>
+      <div class="px-5 py-3 border-t border-gray-50">
+        <el-pagination
+          v-model:current-page="pagination.page"
+          v-model:page-size="pagination.per_page"
+          :total="total"
+          :page-sizes="[10, 20, 50]"
+          layout="total,sizes,prev,pager,next,jumper"
+          background
+          @current-change="handlePageChange"
+          @size-change="handleSizeChange"
+        />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/frontend/src/views/hr/attendances/index.vue b/frontend/src/views/hr/attendances/index.vue
index c031904..d4ddd1d 100644
--- a/frontend/src/views/hr/attendances/index.vue
+++ b/frontend/src/views/hr/attendances/index.vue
@@ -72,8 +72,8 @@ onMounted(() => { fetchList() })
 </script>
 
 <template>
-  <div class="page-container">
-    <div class="search-bar">
+  <div class="p-6 space-y-4">
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-4 flex items-center flex-wrap gap-3">
       <el-input v-model="searchForm.user_id" placeholder="员工ID" clearable style="width:140px" />
       <el-select v-model="searchForm.status" placeholder="状态" clearable style="width:120px">
         <el-option v-for="(v, k) in statusMap" :key="k" :label="v" :value="Number(k)" />
@@ -82,29 +82,35 @@ onMounted(() => { fetchList() })
       <el-button type="primary" @click="handleSearch">查询</el-button>
       <el-button @click="handleReset">重置</el-button>
     </div>
-    <div class="table-container">
-      <div class="table-actions">
-        <el-button type="success" @click="handleClockIn">上班打卡</el-button>
-        <el-button type="warning" @click="handleClockOut">下班打卡</el-button>
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm">
+      <div class="flex items-center justify-between px-5 py-4 border-b border-gray-50">
+        <div class="flex items-center gap-3">
+          <el-button type="success" @click="handleClockIn">上班打卡</el-button>
+          <el-button type="warning" @click="handleClockOut">下班打卡</el-button>
+        </div>
         <el-button type="primary" @click="handleAdd">手动录入</el-button>
       </div>
-      <el-table v-loading="loading" :data="tableData" border stripe style="width:100%">
-        <el-table-column label="员工" min-width="100">
-          <template #default="{ row }">{{ row.user?.name || '-' }}</template>
-        </el-table-column>
-        <el-table-column prop="attendance_date" label="考勤日期" width="120" />
-        <el-table-column prop="clock_in" label="上班打卡" width="100" />
-        <el-table-column prop="clock_out" label="下班打卡" width="100" />
-        <el-table-column prop="overtime_hours" label="加班(h)" width="90" align="center" />
-        <el-table-column label="状态" width="90" align="center">
-          <template #default="{ row }">
-            <el-tag :type="statusType[row.status]" size="small">{{ statusMap[row.status] }}</el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column prop="remark" label="备注" min-width="150" show-overflow-tooltip />
-        <el-table-column prop="created_at" label="创建时间" min-width="160" />
-      </el-table>
-      <el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.per_page" :total="total" :page-sizes="[10,20,50]" layout="total,sizes,prev,pager,next,jumper" background @current-change="handlePageChange" @size-change="handleSizeChange" />
+      <div class="px-2">
+        <el-table v-loading="loading" :data="tableData" style="width:100%">
+          <el-table-column label="员工" min-width="100">
+            <template #default="{ row }">{{ row.user?.name || '-' }}</template>
+          </el-table-column>
+          <el-table-column prop="attendance_date" label="考勤日期" width="120" />
+          <el-table-column prop="clock_in" label="上班打卡" width="100" />
+          <el-table-column prop="clock_out" label="下班打卡" width="100" />
+          <el-table-column prop="overtime_hours" label="加班(h)" width="90" align="center" />
+          <el-table-column label="状态" width="90" align="center">
+            <template #default="{ row }">
+              <el-tag :type="statusType[row.status]" size="small">{{ statusMap[row.status] }}</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column prop="remark" label="备注" min-width="150" show-overflow-tooltip />
+          <el-table-column prop="created_at" label="创建时间" min-width="160" />
+        </el-table>
+      </div>
+      <div class="px-5 py-3 border-t border-gray-50">
+        <el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.per_page" :total="total" :page-sizes="[10,20,50]" layout="total,sizes,prev,pager,next,jumper" background @current-change="handlePageChange" @size-change="handleSizeChange" />
+      </div>
     </div>
     <el-dialog v-model="dialogVisible" title="手动录入考勤" width="500px" destroy-on-close>
       <el-form ref="formRef" :model="form" :rules="{ user_id: [{ required: true, message: '请输入员工ID' }], attendance_date: [{ required: true, message: '请选择考勤日期' }] }" label-width="90px">
diff --git a/frontend/src/views/hr/leaves/index.vue b/frontend/src/views/hr/leaves/index.vue
index 379b258..9ba3bd0 100644
--- a/frontend/src/views/hr/leaves/index.vue
+++ b/frontend/src/views/hr/leaves/index.vue
@@ -82,8 +82,8 @@ onMounted(() => { fetchList() })
 </script>
 
 <template>
-  <div class="page-container">
-    <div class="search-bar">
+  <div class="p-6 space-y-4">
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-4 flex items-center flex-wrap gap-3">
       <el-select v-model="searchForm.type" placeholder="请假类型" clearable style="width:130px">
         <el-option v-for="(v, k) in typeMap" :key="k" :label="v" :value="Number(k)" />
       </el-select>
@@ -93,40 +93,47 @@ onMounted(() => { fetchList() })
       <el-button type="primary" @click="handleSearch">查询</el-button>
       <el-button @click="handleReset">重置</el-button>
     </div>
-    <div class="table-container">
-      <div class="table-actions">
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm">
+      <div class="flex items-center justify-between px-5 py-4 border-b border-gray-50">
+        <div class="flex items-center gap-3">
+          <span class="font-medium text-gray-700">请假申请列表</span>
+        </div>
         <el-button type="primary" @click="handleAdd">新增请假</el-button>
       </div>
-      <el-table v-loading="loading" :data="tableData" border stripe style="width:100%">
-        <el-table-column label="员工" min-width="100">
-          <template #default="{ row }">{{ row.user?.name || '-' }}</template>
-        </el-table-column>
-        <el-table-column label="类型" width="80" align="center">
-          <template #default="{ row }">
-            <el-tag size="small">{{ typeMap[row.type] }}</el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column prop="start_date" label="开始日期" width="120" />
-        <el-table-column prop="end_date" label="结束日期" width="120" />
-        <el-table-column prop="days" label="天数" width="70" align="center" />
-        <el-table-column prop="reason" label="事由" min-width="180" show-overflow-tooltip />
-        <el-table-column label="状态" width="90" align="center">
-          <template #default="{ row }">
-            <el-tag :type="statusType[row.status]" size="small">{{ statusMap[row.status] }}</el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" width="200" fixed="right" align="center">
-          <template #default="{ row }">
-            <template v-if="row.status === 0">
-              <el-button size="small" type="success" link @click="handleAudit(row, 1)">批准</el-button>
-              <el-button size="small" type="danger" link @click="handleAudit(row, 2)">拒绝</el-button>
-              <el-button size="small" type="primary" link @click="handleEdit(row)">编辑</el-button>
-              <el-button size="small" type="danger" link @click="handleDelete(row)">删除</el-button>
+      <div class="px-2">
+        <el-table v-loading="loading" :data="tableData" style="width:100%">
+          <el-table-column label="员工" min-width="100">
+            <template #default="{ row }">{{ row.user?.name || '-' }}</template>
+          </el-table-column>
+          <el-table-column label="类型" width="80" align="center">
+            <template #default="{ row }">
+              <el-tag size="small">{{ typeMap[row.type] }}</el-tag>
             </template>
-          </template>
-        </el-table-column>
-      </el-table>
-      <el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.per_page" :total="total" :page-sizes="[10,20,50]" layout="total,sizes,prev,pager,next,jumper" background @current-change="handlePageChange" @size-change="handleSizeChange" />
+          </el-table-column>
+          <el-table-column prop="start_date" label="开始日期" width="120" />
+          <el-table-column prop="end_date" label="结束日期" width="120" />
+          <el-table-column prop="days" label="天数" width="70" align="center" />
+          <el-table-column prop="reason" label="事由" min-width="180" show-overflow-tooltip />
+          <el-table-column label="状态" width="90" align="center">
+            <template #default="{ row }">
+              <el-tag :type="statusType[row.status]" size="small">{{ statusMap[row.status] }}</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" width="200" fixed="right" align="center">
+            <template #default="{ row }">
+              <template v-if="row.status === 0">
+                <el-button size="small" type="success" text @click="handleAudit(row, 1)">批准</el-button>
+                <el-button size="small" type="danger" text @click="handleAudit(row, 2)">拒绝</el-button>
+                <el-button size="small" type="primary" text @click="handleEdit(row)">编辑</el-button>
+                <el-button size="small" type="danger" text @click="handleDelete(row)">删除</el-button>
+              </template>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="px-5 py-3 border-t border-gray-50">
+        <el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.per_page" :total="total" :page-sizes="[10,20,50]" layout="total,sizes,prev,pager,next,jumper" background @current-change="handlePageChange" @size-change="handleSizeChange" />
+      </div>
     </div>
     <el-dialog v-model="dialogVisible" :title="isEdit ? '编辑请假' : '新增请假'" width="500px" destroy-on-close>
       <el-form ref="formRef" :model="form" :rules="formRules" label-width="90px">
diff --git a/frontend/src/views/hr/profiles/index.vue b/frontend/src/views/hr/profiles/index.vue
index 95d2e67..b060549 100644
--- a/frontend/src/views/hr/profiles/index.vue
+++ b/frontend/src/views/hr/profiles/index.vue
@@ -89,8 +89,8 @@ onMounted(() => fetchList())
 </script>
 
 <template>
-  <div class="page-container">
-    <div class="search-bar">
+  <div class="p-6 space-y-4">
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-4 flex items-center flex-wrap gap-3">
       <el-input v-model="searchForm.employee_no" placeholder="工号" style="width:160px" clearable @keydown.enter="handleSearch" />
       <el-select v-model="searchForm.status" placeholder="状态" clearable style="width:120px">
         <el-option v-for="(v,k) in statusMap" :key="k" :label="v" :value="Number(k)" />
@@ -99,33 +99,42 @@ onMounted(() => fetchList())
       <el-button @click="handleReset">重置</el-button>
     </div>
 
-    <div class="table-container">
-      <div class="table-actions"><el-button type="primary" @click="handleAdd">新增员工档案</el-button></div>
-      <el-table v-loading="loading" :data="tableData" border stripe style="width:100%">
-        <el-table-column prop="employee_no" label="工号" width="120" />
-        <el-table-column label="姓名" min-width="100">
-          <template #default="{ row }">{{ row.user?.name || '-' }}</template>
-        </el-table-column>
-        <el-table-column label="性别" width="70" align="center">
-          <template #default="{ row }">{{ genderMap[row.gender] || '未知' }}</template>
-        </el-table-column>
-        <el-table-column prop="hire_date" label="入职日期" min-width="110" />
-        <el-table-column prop="education" label="学历" width="90" />
-        <el-table-column prop="base_salary" label="基本工资" width="100" align="right" />
-        <el-table-column prop="position_salary" label="岗位工资" width="100" align="right" />
-        <el-table-column label="状态" width="80" align="center">
-          <template #default="{ row }">
-            <el-tag :type="statusType[row.status]" size="small">{{ statusMap[row.status] }}</el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" width="140" fixed="right" align="center">
-          <template #default="{ row }">
-            <el-button size="small" type="primary" link @click="handleEdit(row)">编辑</el-button>
-            <el-button size="small" type="danger" link @click="handleDelete(row)">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-      <el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.per_page" :total="total" :page-sizes="[10,20,50]" layout="total,sizes,prev,pager,next,jumper" background @current-change="handlePageChange" @size-change="handleSizeChange" />
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm">
+      <div class="flex items-center justify-between px-5 py-4 border-b border-gray-50">
+        <div class="flex items-center gap-3">
+          <span class="font-medium text-gray-700">员工档案列表</span>
+        </div>
+        <el-button type="primary" @click="handleAdd">新增员工档案</el-button>
+      </div>
+      <div class="px-2">
+        <el-table v-loading="loading" :data="tableData" style="width:100%">
+          <el-table-column prop="employee_no" label="工号" width="120" />
+          <el-table-column label="姓名" min-width="100">
+            <template #default="{ row }">{{ row.user?.name || '-' }}</template>
+          </el-table-column>
+          <el-table-column label="性别" width="70" align="center">
+            <template #default="{ row }">{{ genderMap[row.gender] || '未知' }}</template>
+          </el-table-column>
+          <el-table-column prop="hire_date" label="入职日期" min-width="110" />
+          <el-table-column prop="education" label="学历" width="90" />
+          <el-table-column prop="base_salary" label="基本工资" width="100" align="right" />
+          <el-table-column prop="position_salary" label="岗位工资" width="100" align="right" />
+          <el-table-column label="状态" width="80" align="center">
+            <template #default="{ row }">
+              <el-tag :type="statusType[row.status]" size="small">{{ statusMap[row.status] }}</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" width="140" fixed="right" align="center">
+            <template #default="{ row }">
+              <el-button size="small" type="primary" text @click="handleEdit(row)">编辑</el-button>
+              <el-button size="small" type="danger" text @click="handleDelete(row)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="px-5 py-3 border-t border-gray-50">
+        <el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.per_page" :total="total" :page-sizes="[10,20,50]" layout="total,sizes,prev,pager,next,jumper" background @current-change="handlePageChange" @size-change="handleSizeChange" />
+      </div>
     </div>
 
     <el-dialog v-model="dialogVisible" :title="dialogTitle" width="700px" destroy-on-close>
diff --git a/frontend/src/views/hr/salaries/index.vue b/frontend/src/views/hr/salaries/index.vue
index 1150a26..b5ff0b7 100644
--- a/frontend/src/views/hr/salaries/index.vue
+++ b/frontend/src/views/hr/salaries/index.vue
@@ -147,8 +147,8 @@ onMounted(() => { fetchList(); fetchEmployees() })
 </script>
 
 <template>
-  <div class="page-container">
-    <div class="search-bar">
+  <div class="p-6 space-y-4">
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-4 flex items-center flex-wrap gap-3">
       <el-input v-model="searchForm.year_month" placeholder="工资月份 (如 2024-03)" style="width:200px" clearable @keydown.enter="handleSearch" />
       <el-select v-model="searchForm.status" placeholder="状态" clearable style="width:120px">
         <el-option v-for="(v, k) in statusMap" :key="k" :label="v" :value="Number(k)" />
@@ -157,37 +157,46 @@ onMounted(() => { fetchList(); fetchEmployees() })
       <el-button @click="handleReset">重置</el-button>
     </div>
 
-    <div class="table-container">
-      <div class="table-actions"><el-button type="primary" @click="handleAdd">新增工资记录</el-button></div>
-      <el-table v-loading="loading" :data="tableData" border stripe style="width:100%">
-        <el-table-column label="员工" min-width="100">
-          <template #default="{ row }">{{ row.user?.name || '-' }}</template>
-        </el-table-column>
-        <el-table-column prop="year_month" label="工资月份" width="110" align="center" />
-        <el-table-column prop="base_salary" label="基本工资" width="110" align="right" />
-        <el-table-column prop="position_salary" label="岗位工资" width="110" align="right" />
-        <el-table-column prop="performance" label="绩效" width="100" align="right" />
-        <el-table-column prop="overtime_pay" label="加班费" width="100" align="right" />
-        <el-table-column prop="subsidy" label="补贴" width="90" align="right" />
-        <el-table-column label="扣除合计" width="110" align="right">
-          <template #default="{ row }">{{ getDeductionTotal(row).toFixed(2) }}</template>
-        </el-table-column>
-        <el-table-column label="实发金额" width="120" align="right">
-          <template #default="{ row }"><span style="font-weight:700">{{ row.actual_amount }}</span></template>
-        </el-table-column>
-        <el-table-column label="状态" width="100" align="center">
-          <template #default="{ row }"><el-tag :type="statusType[row.status]" size="small">{{ statusMap[row.status] }}</el-tag></template>
-        </el-table-column>
-        <el-table-column label="操作" width="220" fixed="right" align="center">
-          <template #default="{ row }">
-            <el-button v-if="row.status===0" size="small" type="success" link @click="handleConfirm(row)">确认</el-button>
-            <el-button v-if="row.status===1" size="small" type="success" link @click="handlePay(row)">发放</el-button>
-            <el-button v-if="row.status===0" size="small" type="primary" link @click="handleEdit(row)">编辑</el-button>
-            <el-button v-if="row.status===0" size="small" type="danger" link @click="handleDelete(row)">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-      <el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.per_page" :total="total" :page-sizes="[10,20,50]" layout="total,sizes,prev,pager,next,jumper" background @current-change="handlePageChange" @size-change="handleSizeChange" />
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm">
+      <div class="flex items-center justify-between px-5 py-4 border-b border-gray-50">
+        <div class="flex items-center gap-3">
+          <span class="font-medium text-gray-700">工资记录列表</span>
+        </div>
+        <el-button type="primary" @click="handleAdd">新增工资记录</el-button>
+      </div>
+      <div class="px-2">
+        <el-table v-loading="loading" :data="tableData" style="width:100%">
+          <el-table-column label="员工" min-width="100">
+            <template #default="{ row }">{{ row.user?.name || '-' }}</template>
+          </el-table-column>
+          <el-table-column prop="year_month" label="工资月份" width="110" align="center" />
+          <el-table-column prop="base_salary" label="基本工资" width="110" align="right" />
+          <el-table-column prop="position_salary" label="岗位工资" width="110" align="right" />
+          <el-table-column prop="performance" label="绩效" width="100" align="right" />
+          <el-table-column prop="overtime_pay" label="加班费" width="100" align="right" />
+          <el-table-column prop="subsidy" label="补贴" width="90" align="right" />
+          <el-table-column label="扣除合计" width="110" align="right">
+            <template #default="{ row }">{{ getDeductionTotal(row).toFixed(2) }}</template>
+          </el-table-column>
+          <el-table-column label="实发金额" width="120" align="right">
+            <template #default="{ row }"><span style="font-weight:700">{{ row.actual_amount }}</span></template>
+          </el-table-column>
+          <el-table-column label="状态" width="100" align="center">
+            <template #default="{ row }"><el-tag :type="statusType[row.status]" size="small">{{ statusMap[row.status] }}</el-tag></template>
+          </el-table-column>
+          <el-table-column label="操作" width="220" fixed="right" align="center">
+            <template #default="{ row }">
+              <el-button v-if="row.status===0" size="small" type="success" text @click="handleConfirm(row)">确认</el-button>
+              <el-button v-if="row.status===1" size="small" type="success" text @click="handlePay(row)">发放</el-button>
+              <el-button v-if="row.status===0" size="small" type="primary" text @click="handleEdit(row)">编辑</el-button>
+              <el-button v-if="row.status===0" size="small" type="danger" text @click="handleDelete(row)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="px-5 py-3 border-t border-gray-50">
+        <el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.per_page" :total="total" :page-sizes="[10,20,50]" layout="total,sizes,prev,pager,next,jumper" background @current-change="handlePageChange" @size-change="handleSizeChange" />
+      </div>
     </div>
 
     <el-dialog v-model="dialogVisible" :title="isEdit ? '编辑工资记录' : '新增工资记录'" width="750px" destroy-on-close>
diff --git a/frontend/src/views/hr/schedules/index.vue b/frontend/src/views/hr/schedules/index.vue
index 39e7292..4e39b59 100644
--- a/frontend/src/views/hr/schedules/index.vue
+++ b/frontend/src/views/hr/schedules/index.vue
@@ -49,8 +49,8 @@ onMounted(() => fetchList())
 </script>
 
 <template>
-  <div class="page-container">
-    <div class="search-bar">
+  <div class="p-6 space-y-4">
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-4 flex items-center flex-wrap gap-3">
       <el-input v-model="searchForm.user_id" placeholder="员工ID" style="width:160px" clearable @keydown.enter="handleSearch" />
       <el-date-picker v-model="searchForm.start_date" type="date" value-format="YYYY-MM-DD" placeholder="开始日期" />
       <el-date-picker v-model="searchForm.end_date" type="date" value-format="YYYY-MM-DD" placeholder="结束日期" />
@@ -58,22 +58,31 @@ onMounted(() => fetchList())
       <el-button @click="handleReset">重置</el-button>
     </div>
 
-    <div class="table-container">
-      <div class="table-actions"><el-button type="primary" @click="handleAdd">新增排班</el-button></div>
-      <el-table v-loading="loading" :data="tableData" border stripe style="width:100%">
-        <el-table-column label="员工" min-width="100">
-          <template #default="{ row }">{{ row.user?.name || '-' }}</template>
-        </el-table-column>
-        <el-table-column prop="schedule_date" label="排班日期" width="120" />
-        <el-table-column label="班次" width="90" align="center">
-          <template #default="{ row }">
-            <el-tag :type="shiftType[row.shift_type]" size="small">{{ shiftMap[row.shift_type] }}</el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column prop="start_time" label="开始时间" width="100" />
-        <el-table-column prop="end_time" label="结束时间" width="100" />
-      </el-table>
-      <el-pagination v-model:current-page="pagination.page" :total="total" layout="total,prev,pager,next" background @current-change="handlePageChange" />
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm">
+      <div class="flex items-center justify-between px-5 py-4 border-b border-gray-50">
+        <div class="flex items-center gap-3">
+          <span class="font-medium text-gray-700">排班列表</span>
+        </div>
+        <el-button type="primary" @click="handleAdd">新增排班</el-button>
+      </div>
+      <div class="px-2">
+        <el-table v-loading="loading" :data="tableData" style="width:100%">
+          <el-table-column label="员工" min-width="100">
+            <template #default="{ row }">{{ row.user?.name || '-' }}</template>
+          </el-table-column>
+          <el-table-column prop="schedule_date" label="排班日期" width="120" />
+          <el-table-column label="班次" width="90" align="center">
+            <template #default="{ row }">
+              <el-tag :type="shiftType[row.shift_type]" size="small">{{ shiftMap[row.shift_type] }}</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column prop="start_time" label="开始时间" width="100" />
+          <el-table-column prop="end_time" label="结束时间" width="100" />
+        </el-table>
+      </div>
+      <div class="px-5 py-3 border-t border-gray-50">
+        <el-pagination v-model:current-page="pagination.page" :total="total" layout="total,prev,pager,next" background @current-change="handlePageChange" />
+      </div>
     </div>
 
     <el-dialog v-model="dialogVisible" title="新增排班" width="500px" destroy-on-close>
diff --git a/frontend/src/views/inventory/checks/index.vue b/frontend/src/views/inventory/checks/index.vue
new file mode 100644
index 0000000..ca3f536
--- /dev/null
+++ b/frontend/src/views/inventory/checks/index.vue
@@ -0,0 +1,294 @@
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { inventoryCheckApi, warehouseApi, stockApi } from '@/api/inventory.js'
+
+const tableData = ref([])
+const total = ref(0)
+const loading = ref(false)
+const dialogVisible = ref(false)
+const submitLoading = ref(false)
+const detailVisible = ref(false)
+const currentCheck = ref(null)
+const warehouses = ref([])
+
+const searchForm = reactive({ warehouse_id: '', status: '' })
+const pagination = reactive({ page: 1, per_page: 20 })
+
+const formRef = ref(null)
+const form = reactive({
+  warehouse_id: '',
+  check_date: '',
+  remark: '',
+  items: []
+})
+const formRules = {
+  warehouse_id: [{ required: true, message: '请选择仓库', trigger: 'change' }],
+  check_date: [{ required: true, message: '请选择盘点日期', trigger: 'change' }]
+}
+
+const statusMap = { draft: '盘点中', completed: '已完成' }
+const statusType = { draft: 'warning', completed: 'success' }
+
+async function fetchList() {
+  loading.value = true
+  try {
+    const res = await inventoryCheckApi.getList({ ...searchForm, ...pagination })
+    tableData.value = res.data?.list || res.data?.data || []
+    total.value = res.data?.total || 0
+  } catch {
+    ElMessage.error('获取盘点单列表失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+async function fetchWarehouses() {
+  try {
+    const res = await warehouseApi.getList({ per_page: 500 })
+    warehouses.value = res.data?.list || res.data?.data || []
+  } catch {}
+}
+
+function handleSearch() { pagination.page = 1; fetchList() }
+function handleReset() {
+  Object.assign(searchForm, { warehouse_id: '', status: '' })
+  handleSearch()
+}
+
+async function handleAdd() {
+  Object.assign(form, { warehouse_id: '', check_date: '', remark: '', items: [] })
+  dialogVisible.value = true
+}
+
+// 选择仓库后自动加载该仓库库存
+async function onWarehouseChange(warehouseId) {
+  if (!warehouseId) { form.items = []; return }
+  try {
+    const res = await stockApi.getList({ warehouse_id: warehouseId, per_page: 500 })
+    const stocks = res.data?.list || res.data?.data || []
+    form.items = stocks.map(s => ({
+      material_id: s.id,
+      material_name: s.material_name,
+      material_code: s.material_code,
+      unit: s.unit,
+      system_quantity: Number(s.quantity || 0),
+      actual_quantity: Number(s.quantity || 0)
+    }))
+  } catch {
+    ElMessage.error('加载库存数据失败')
+  }
+}
+
+async function handleSubmit() {
+  if (!formRef.value) return
+  await formRef.value.validate(async (valid) => {
+    if (!valid) return
+    if (form.items.length === 0) { ElMessage.warning('当前仓库无库存数据'); return }
+    submitLoading.value = true
+    try {
+      await inventoryCheckApi.create({ ...form })
+      ElMessage.success('盘点单创建成功')
+      dialogVisible.value = false
+      fetchList()
+    } catch {
+      ElMessage.error('创建失败')
+    } finally {
+      submitLoading.value = false
+    }
+  })
+}
+
+async function handleComplete(row) {
+  await ElMessageBox.confirm(
+    `确认完成盘点单「${row.check_no}」吗？完成后不可修改。`,
+    '完成确认',
+    { type: 'warning' }
+  )
+  try {
+    await inventoryCheckApi.complete(row.id, {})
+    ElMessage.success('盘点完成')
+    fetchList()
+  } catch { ElMessage.error('操作失败') }
+}
+
+function viewDetail(row) {
+  currentCheck.value = row
+  detailVisible.value = true
+}
+
+function diff(item) {
+  return Number(item.actual_quantity || 0) - Number(item.system_quantity || 0)
+}
+
+function handlePageChange(val) { pagination.page = val; fetchList() }
+function handleSizeChange(val) { pagination.per_page = val; pagination.page = 1; fetchList() }
+
+onMounted(() => { fetchList(); fetchWarehouses() })
+</script>
+
+<template>
+  <div class="p-6 space-y-4">
+    <!-- 搜索栏 -->
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-4 flex items-center flex-wrap gap-3">
+      <el-select v-model="searchForm.warehouse_id" placeholder="选择仓库" clearable filterable style="width:160px">
+        <el-option v-for="w in warehouses" :key="w.id" :label="w.name" :value="w.id" />
+      </el-select>
+      <el-select v-model="searchForm.status" placeholder="状态" clearable style="width:120px">
+        <el-option v-for="(v, k) in statusMap" :key="k" :label="v" :value="k" />
+      </el-select>
+      <el-button type="primary" @click="handleSearch">查询</el-button>
+      <el-button @click="handleReset">重置</el-button>
+    </div>
+
+    <!-- 列表卡片 -->
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm">
+      <div class="flex items-center justify-between px-5 py-4 border-b border-gray-50">
+        <div class="flex items-center gap-3">
+          <span class="w-1 h-5 bg-rose-500 rounded-full inline-block"></span>
+          <span class="font-medium text-gray-700">盘点单列表</span>
+        </div>
+        <el-button type="primary" @click="handleAdd">新建盘点单</el-button>
+      </div>
+      <div class="px-2">
+        <el-table v-loading="loading" :data="tableData" style="width:100%" stripe>
+          <el-table-column prop="check_no" label="盘点单号" min-width="160" />
+          <el-table-column prop="warehouse_name" label="仓库" min-width="110" />
+          <el-table-column prop="check_date" label="盘点日期" width="120" align="center" />
+          <el-table-column label="状态" width="100" align="center">
+            <template #default="{ row }">
+              <el-tag :type="statusType[row.status]" size="small">
+                {{ statusMap[row.status] || row.status }}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column prop="operator_name" label="操作人" width="90" align="center" />
+          <el-table-column prop="remark" label="备注" min-width="120" show-overflow-tooltip />
+          <el-table-column label="操作" width="180" fixed="right" align="center">
+            <template #default="{ row }">
+              <el-button size="small" type="primary" text @click="viewDetail(row)">查看</el-button>
+              <el-button
+                v-if="row.status === 'draft'"
+                size="small" type="success" text
+                @click="handleComplete(row)"
+              >完成盘点</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="px-5 py-3 border-t border-gray-50">
+        <el-pagination
+          v-model:current-page="pagination.page"
+          v-model:page-size="pagination.per_page"
+          :total="total"
+          :page-sizes="[10, 20, 50]"
+          layout="total,sizes,prev,pager,next,jumper"
+          background
+          @current-change="handlePageChange"
+          @size-change="handleSizeChange"
+        />
+      </div>
+    </div>
+
+    <!-- 新建盘点 Dialog -->
+    <el-dialog v-model="dialogVisible" title="新建盘点单" width="820px" destroy-on-close>
+      <el-form ref="formRef" :model="form" :rules="formRules" label-width="90px">
+        <el-row :gutter="16">
+          <el-col :span="10">
+            <el-form-item label="仓库" prop="warehouse_id">
+              <el-select
+                v-model="form.warehouse_id"
+                placeholder="选择仓库"
+                filterable
+                style="width:100%"
+                @change="onWarehouseChange"
+              >
+                <el-option v-for="w in warehouses" :key="w.id" :label="w.name" :value="w.id" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="盘点日期" prop="check_date">
+              <el-date-picker
+                v-model="form.check_date"
+                type="date"
+                value-format="YYYY-MM-DD"
+                placeholder="选择日期"
+                style="width:100%"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="备注">
+              <el-input v-model="form.remark" placeholder="备注" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-divider content-position="left">物料明细（系统自动填入库存，请填写实际数量）</el-divider>
+
+        <div v-if="form.items.length === 0" class="text-center text-gray-400 py-6">
+          请先选择仓库以加载库存数据
+        </div>
+        <el-table v-else :data="form.items" style="width:100%" max-height="320">
+          <el-table-column prop="material_code" label="物料编码" width="110" />
+          <el-table-column prop="material_name" label="物料名称" min-width="130" />
+          <el-table-column prop="unit" label="单位" width="70" align="center" />
+          <el-table-column prop="system_quantity" label="系统数量" width="100" align="right" />
+          <el-table-column label="实际数量" width="140" align="right">
+            <template #default="{ row }">
+              <el-input-number
+                v-model="row.actual_quantity"
+                :min="0"
+                :precision="2"
+                size="small"
+                style="width:120px"
+              />
+            </template>
+          </el-table-column>
+          <el-table-column label="差异" width="90" align="right">
+            <template #default="{ row }">
+              <span :class="diff(row) === 0 ? 'text-gray-500' : diff(row) > 0 ? 'text-green-600' : 'text-red-500'">
+                {{ diff(row) > 0 ? '+' : '' }}{{ diff(row).toFixed(2) }}
+              </span>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-form>
+      <template #footer>
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" :loading="submitLoading" @click="handleSubmit">提交盘点</el-button>
+      </template>
+    </el-dialog>
+
+    <!-- 查看详情 Dialog -->
+    <el-dialog v-model="detailVisible" title="盘点单详情" width="760px" destroy-on-close>
+      <template v-if="currentCheck">
+        <el-descriptions :column="3" border size="small" class="mb-4">
+          <el-descriptions-item label="盘点单号">{{ currentCheck.check_no }}</el-descriptions-item>
+          <el-descriptions-item label="仓库">{{ currentCheck.warehouse_name }}</el-descriptions-item>
+          <el-descriptions-item label="盘点日期">{{ currentCheck.check_date }}</el-descriptions-item>
+          <el-descriptions-item label="操作人">{{ currentCheck.operator_name }}</el-descriptions-item>
+          <el-descriptions-item label="状态">
+            <el-tag :type="statusType[currentCheck.status]" size="small">
+              {{ statusMap[currentCheck.status] }}
+            </el-tag>
+          </el-descriptions-item>
+          <el-descriptions-item label="备注">{{ currentCheck.remark || '-' }}</el-descriptions-item>
+        </el-descriptions>
+        <el-table :data="currentCheck.items || []" style="width:100%" max-height="360">
+          <el-table-column prop="material_name" label="物料名称" min-width="130" />
+          <el-table-column prop="system_quantity" label="系统数量" width="100" align="right" />
+          <el-table-column prop="actual_quantity" label="实际数量" width="100" align="right" />
+          <el-table-column label="差异" width="90" align="right">
+            <template #default="{ row }">
+              <span :class="diff(row) === 0 ? 'text-gray-500' : diff(row) > 0 ? 'text-green-600' : 'text-red-500'">
+                {{ diff(row) > 0 ? '+' : '' }}{{ Number(diff(row)).toFixed(2) }}
+              </span>
+            </template>
+          </el-table-column>
+        </el-table>
+      </template>
+    </el-dialog>
+  </div>
+</template>
diff --git a/frontend/src/views/inventory/materials/index.vue b/frontend/src/views/inventory/materials/index.vue
index 154170a..cc7bca4 100644
--- a/frontend/src/views/inventory/materials/index.vue
+++ b/frontend/src/views/inventory/materials/index.vue
@@ -57,8 +57,8 @@ onMounted(() => fetchList())
 </script>
 
 <template>
-  <div class="page-container">
-    <div class="search-bar">
+  <div class="p-6 space-y-4">
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-4 flex items-center flex-wrap gap-3">
       <el-input v-model="searchForm.name" placeholder="物料名称" style="width:180px" clearable @keydown.enter="handleSearch" />
       <el-select v-model="searchForm.category" placeholder="分类" clearable style="width:120px">
         <el-option v-for="(v,k) in categoryMap" :key="k" :label="v" :value="Number(k)" />
@@ -67,24 +67,33 @@ onMounted(() => fetchList())
       <el-button type="primary" @click="handleSearch">查询</el-button>
       <el-button @click="handleReset">重置</el-button>
     </div>
-    <div class="table-container">
-      <div class="table-actions"><el-button type="primary" @click="handleAdd">新增物料</el-button></div>
-      <el-table v-loading="loading" :data="tableData" border stripe style="width:100%">
-        <el-table-column prop="name" label="物料名称" min-width="120" />
-        <el-table-column prop="code" label="物料编码" width="120" />
-        <el-table-column label="分类" width="100" align="center"><template #default="{ row }">{{ categoryMap[row.category] }}</template></el-table-column>
-        <el-table-column prop="unit" label="单位" width="70" align="center" />
-        <el-table-column prop="spec" label="规格" min-width="120" show-overflow-tooltip />
-        <el-table-column prop="safety_stock" label="安全库存" width="100" align="right" />
-        <el-table-column label="状态" width="80" align="center"><template #default="{ row }"><el-tag :type="row.status?'success':'danger'" size="small">{{ row.status?'启用':'禁用' }}</el-tag></template></el-table-column>
-        <el-table-column label="操作" width="160" fixed="right" align="center">
-          <template #default="{ row }">
-            <el-button size="small" type="primary" link @click="handleEdit(row)">编辑</el-button>
-            <el-button size="small" type="danger" link @click="handleDelete(row)">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-      <el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.per_page" :total="total" :page-sizes="[10,15,50]" layout="total,sizes,prev,pager,next,jumper" background @current-change="handlePageChange" @size-change="handleSizeChange" />
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm">
+      <div class="flex items-center justify-between px-5 py-4 border-b border-gray-50">
+        <div class="flex items-center gap-3">
+          <span class="font-medium text-gray-700">物料列表</span>
+        </div>
+        <el-button type="primary" @click="handleAdd">新增物料</el-button>
+      </div>
+      <div class="px-2">
+        <el-table v-loading="loading" :data="tableData" style="width:100%">
+          <el-table-column prop="name" label="物料名称" min-width="120" />
+          <el-table-column prop="code" label="物料编码" width="120" />
+          <el-table-column label="分类" width="100" align="center"><template #default="{ row }">{{ categoryMap[row.category] }}</template></el-table-column>
+          <el-table-column prop="unit" label="单位" width="70" align="center" />
+          <el-table-column prop="spec" label="规格" min-width="120" show-overflow-tooltip />
+          <el-table-column prop="safety_stock" label="安全库存" width="100" align="right" />
+          <el-table-column label="状态" width="80" align="center"><template #default="{ row }"><el-tag :type="row.status?'success':'danger'" size="small">{{ row.status?'启用':'禁用' }}</el-tag></template></el-table-column>
+          <el-table-column label="操作" width="160" fixed="right" align="center">
+            <template #default="{ row }">
+              <el-button size="small" type="primary" text @click="handleEdit(row)">编辑</el-button>
+              <el-button size="small" type="danger" text @click="handleDelete(row)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="px-5 py-3 border-t border-gray-50">
+        <el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.per_page" :total="total" :page-sizes="[10,15,50]" layout="total,sizes,prev,pager,next,jumper" background @current-change="handlePageChange" @size-change="handleSizeChange" />
+      </div>
     </div>
     <el-dialog v-model="dialogVisible" :title="isEdit?'编辑物料':'新增物料'" width="550px" destroy-on-close>
       <el-form ref="formRef" :model="form" :rules="formRules" label-width="80px">
diff --git a/frontend/src/views/inventory/purchase-orders/index.vue b/frontend/src/views/inventory/purchase-orders/index.vue
index 22373bb..95b095e 100644
--- a/frontend/src/views/inventory/purchase-orders/index.vue
+++ b/frontend/src/views/inventory/purchase-orders/index.vue
@@ -80,8 +80,8 @@ onMounted(() => fetchList())
 </script>
 
 <template>
-  <div class="page-container">
-    <div class="search-bar">
+  <div class="p-6 space-y-4">
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-4 flex items-center flex-wrap gap-3">
       <el-input v-model="searchForm.order_no" placeholder="采购单号" style="width:180px" clearable @keydown.enter="handleSearch" />
       <el-select v-model="searchForm.status" placeholder="状态" clearable style="width:120px">
         <el-option v-for="(v, k) in statusMap" :key="k" :label="v" :value="Number(k)" />
@@ -90,33 +90,41 @@ onMounted(() => fetchList())
       <el-button @click="handleReset">重置</el-button>
     </div>
 
-    <div class="table-container">
-      <div class="table-actions"><el-button type="primary" @click="handleAdd">新增采购单</el-button></div>
-      <el-table v-loading="loading" :data="tableData" border stripe style="width:100%">
-        <el-table-column prop="order_no" label="采购单号" min-width="160" />
-        <el-table-column label="供应商" min-width="140">
-          <template #default="{ row }">{{ row.supplier?.name || '-' }}</template>
-        </el-table-column>
-        <el-table-column prop="total_amount" label="总金额" min-width="110" align="right" />
-        <el-table-column label="状态" width="100" align="center">
-          <template #default="{ row }">
-            <el-tag :type="statusType[row.status]" size="small">{{ statusMap[row.status] }}</el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column prop="created_at" label="创建时间" min-width="160" />
-        <el-table-column label="操作" width="260" fixed="right" align="center">
-          <template #default="{ row }">
-            <el-button v-if="row.status===0" size="small" type="success" link @click="handleAudit(row, 2)">审批通过</el-button>
-            <el-button v-if="row.status===0" size="small" type="warning" link @click="handleAudit(row, 4)">驳回</el-button>
-            <el-button v-if="row.status<2" size="small" type="primary" link @click="handleEdit(row)">编辑</el-button>
-            <el-button v-if="row.status<2" size="small" type="danger" link @click="handleDelete(row)">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-      <el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.per_page" :total="total" :page-sizes="[10,20,50]" layout="total,sizes,prev,pager,next,jumper" background @current-change="handlePageChange" @size-change="handleSizeChange" />
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm">
+      <div class="flex items-center justify-between px-5 py-4 border-b border-gray-50">
+        <div class="flex items-center gap-3">
+          <span class="font-medium text-gray-700">采购单列表</span>
+        </div>
+        <el-button type="primary" @click="handleAdd">新增采购单</el-button>
+      </div>
+      <div class="px-2">
+        <el-table v-loading="loading" :data="tableData" style="width:100%">
+          <el-table-column prop="order_no" label="采购单号" min-width="160" />
+          <el-table-column label="供应商" min-width="140">
+            <template #default="{ row }">{{ row.supplier?.name || '-' }}</template>
+          </el-table-column>
+          <el-table-column prop="total_amount" label="总金额" min-width="110" align="right" />
+          <el-table-column label="状态" width="100" align="center">
+            <template #default="{ row }">
+              <el-tag :type="statusType[row.status]" size="small">{{ statusMap[row.status] }}</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column prop="created_at" label="创建时间" min-width="160" />
+          <el-table-column label="操作" width="260" fixed="right" align="center">
+            <template #default="{ row }">
+              <el-button v-if="row.status===0" size="small" type="success" text @click="handleAudit(row, 2)">审批通过</el-button>
+              <el-button v-if="row.status===0" size="small" type="warning" text @click="handleAudit(row, 4)">驳回</el-button>
+              <el-button v-if="row.status<2" size="small" type="primary" text @click="handleEdit(row)">编辑</el-button>
+              <el-button v-if="row.status<2" size="small" type="danger" text @click="handleDelete(row)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="px-5 py-3 border-t border-gray-50">
+        <el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.per_page" :total="total" :page-sizes="[10,20,50]" layout="total,sizes,prev,pager,next,jumper" background @current-change="handlePageChange" @size-change="handleSizeChange" />
+      </div>
     </div>
 
-    <!-- Add/Edit Dialog -->
     <el-dialog v-model="dialogVisible" :title="isEdit ? '编辑采购单' : '新增采购单'" width="550px" destroy-on-close>
       <el-form ref="formRef" :model="form" :rules="formRules" label-width="90px">
         <el-form-item label="采购单号" prop="order_no">
diff --git a/frontend/src/views/inventory/stock-movements/index.vue b/frontend/src/views/inventory/stock-movements/index.vue
index ea95fb6..0a77029 100644
--- a/frontend/src/views/inventory/stock-movements/index.vue
+++ b/frontend/src/views/inventory/stock-movements/index.vue
@@ -78,8 +78,8 @@ onMounted(() => { fetchList(); fetchWarehouses() })
 </script>
 
 <template>
-  <div class="page-container">
-    <div class="search-bar">
+  <div class="p-6 space-y-4">
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-4 flex items-center flex-wrap gap-3">
       <el-select v-model="searchForm.warehouse_id" placeholder="选择仓库" clearable filterable style="width:180px">
         <el-option v-for="w in warehouses" :key="w.id" :label="w.name" :value="w.id" />
       </el-select>
@@ -93,31 +93,40 @@ onMounted(() => { fetchList(); fetchWarehouses() })
       <el-button @click="handleReset">重置</el-button>
     </div>
 
-    <div class="table-container">
-      <div class="table-actions"><el-button type="primary" @click="handleAdd">新增出入库</el-button></div>
-      <el-table v-loading="loading" :data="tableData" border stripe style="width:100%">
-        <el-table-column prop="movement_no" label="单据编号" min-width="160" />
-        <el-table-column label="仓库" min-width="120">
-          <template #default="{ row }">{{ row.warehouse?.name || '-' }}</template>
-        </el-table-column>
-        <el-table-column label="类型" width="110" align="center">
-          <template #default="{ row }"><el-tag size="small">{{ typeMap[row.type] || '-' }}</el-tag></template>
-        </el-table-column>
-        <el-table-column label="方向" width="90" align="center">
-          <template #default="{ row }"><el-tag :type="directionType[row.direction]" size="small">{{ directionMap[row.direction] || '-' }}</el-tag></template>
-        </el-table-column>
-        <el-table-column label="状态" width="100" align="center">
-          <template #default="{ row }"><el-tag :type="statusType[row.status]" size="small">{{ statusMap[row.status] }}</el-tag></template>
-        </el-table-column>
-        <el-table-column prop="created_at" label="创建时间" min-width="160" />
-        <el-table-column label="操作" width="100" fixed="right" align="center">
-          <template #default="{ row }">
-            <el-button v-if="row.status === 0" size="small" type="success" link @click="handleConfirm(row)">确认</el-button>
-            <span v-else class="text-muted">-</span>
-          </template>
-        </el-table-column>
-      </el-table>
-      <el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.per_page" :total="total" :page-sizes="[10, 20, 50]" layout="total,sizes,prev,pager,next,jumper" background @current-change="handlePageChange" @size-change="handleSizeChange" />
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm">
+      <div class="flex items-center justify-between px-5 py-4 border-b border-gray-50">
+        <div class="flex items-center gap-3">
+          <span class="font-medium text-gray-700">出入库记录</span>
+        </div>
+        <el-button type="primary" @click="handleAdd">新增出入库</el-button>
+      </div>
+      <div class="px-2">
+        <el-table v-loading="loading" :data="tableData" style="width:100%">
+          <el-table-column prop="movement_no" label="单据编号" min-width="160" />
+          <el-table-column label="仓库" min-width="120">
+            <template #default="{ row }">{{ row.warehouse?.name || '-' }}</template>
+          </el-table-column>
+          <el-table-column label="类型" width="110" align="center">
+            <template #default="{ row }"><el-tag size="small">{{ typeMap[row.type] || '-' }}</el-tag></template>
+          </el-table-column>
+          <el-table-column label="方向" width="90" align="center">
+            <template #default="{ row }"><el-tag :type="directionType[row.direction]" size="small">{{ directionMap[row.direction] || '-' }}</el-tag></template>
+          </el-table-column>
+          <el-table-column label="状态" width="100" align="center">
+            <template #default="{ row }"><el-tag :type="statusType[row.status]" size="small">{{ statusMap[row.status] }}</el-tag></template>
+          </el-table-column>
+          <el-table-column prop="created_at" label="创建时间" min-width="160" />
+          <el-table-column label="操作" width="100" fixed="right" align="center">
+            <template #default="{ row }">
+              <el-button v-if="row.status === 0" size="small" type="success" text @click="handleConfirm(row)">确认</el-button>
+              <span v-else class="text-muted">-</span>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="px-5 py-3 border-t border-gray-50">
+        <el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.per_page" :total="total" :page-sizes="[10, 20, 50]" layout="total,sizes,prev,pager,next,jumper" background @current-change="handlePageChange" @size-change="handleSizeChange" />
+      </div>
     </div>
 
     <el-dialog v-model="dialogVisible" title="新增出入库" width="600px" destroy-on-close>
diff --git a/frontend/src/views/inventory/stock/index.vue b/frontend/src/views/inventory/stock/index.vue
new file mode 100644
index 0000000..4fbaeb9
--- /dev/null
+++ b/frontend/src/views/inventory/stock/index.vue
@@ -0,0 +1,137 @@
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
+import { ElMessage } from 'element-plus'
+import { stockApi, warehouseApi, materialApi } from '@/api/inventory.js'
+
+const tableData = ref([])
+const total = ref(0)
+const loading = ref(false)
+const warehouses = ref([])
+const materials = ref([])
+
+const searchForm = reactive({ warehouse_id: '', material_id: '', low_stock: '' })
+const pagination = reactive({ page: 1, per_page: 20 })
+
+async function fetchList() {
+  loading.value = true
+  try {
+    const res = await stockApi.getList({ ...searchForm, ...pagination })
+    tableData.value = res.data?.list || res.data?.data || []
+    total.value = res.data?.total || 0
+  } catch {
+    ElMessage.error('获取库存列表失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+async function fetchOptions() {
+  try {
+    const [wRes, mRes] = await Promise.all([
+      warehouseApi.getList({ per_page: 500 }),
+      materialApi.getList({ per_page: 500 })
+    ])
+    warehouses.value = wRes.data?.list || wRes.data?.data || []
+    materials.value = mRes.data?.list || mRes.data?.data || []
+  } catch {}
+}
+
+function handleSearch() { pagination.page = 1; fetchList() }
+function handleReset() {
+  Object.assign(searchForm, { warehouse_id: '', material_id: '', low_stock: '' })
+  handleSearch()
+}
+function handlePageChange(val) { pagination.page = val; fetchList() }
+function handleSizeChange(val) { pagination.per_page = val; pagination.page = 1; fetchList() }
+
+function isLowStock(row) {
+  return row.min_quantity != null && Number(row.quantity) < Number(row.min_quantity)
+}
+
+function handleExport() {
+  ElMessage.info('导出功能待实现')
+}
+
+onMounted(() => { fetchList(); fetchOptions() })
+</script>
+
+<template>
+  <div class="p-6 space-y-4">
+    <!-- 搜索栏 -->
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-4 flex items-center flex-wrap gap-3">
+      <el-select v-model="searchForm.warehouse_id" placeholder="选择仓库" clearable filterable style="width:160px">
+        <el-option v-for="w in warehouses" :key="w.id" :label="w.name" :value="w.id" />
+      </el-select>
+      <el-select v-model="searchForm.material_id" placeholder="选择物料" clearable filterable style="width:180px">
+        <el-option v-for="m in materials" :key="m.id" :label="`${m.name}(${m.code || '-'})`" :value="m.id" />
+      </el-select>
+      <el-select v-model="searchForm.low_stock" placeholder="库存状态" clearable style="width:130px">
+        <el-option label="全部" value="" />
+        <el-option label="低库存预警" value="1" />
+      </el-select>
+      <el-button type="primary" @click="handleSearch">查询</el-button>
+      <el-button @click="handleReset">重置</el-button>
+      <el-button class="ml-auto" @click="handleExport">导出</el-button>
+    </div>
+
+    <!-- 低库存说明 -->
+    <el-alert
+      title="红色行表示当前库存低于最低库存量，请及时补货"
+      type="warning"
+      show-icon
+      :closable="false"
+    />
+
+    <!-- 列表卡片 -->
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm">
+      <div class="flex items-center gap-3 px-5 py-4 border-b border-gray-50">
+        <span class="w-1 h-5 bg-rose-500 rounded-full inline-block"></span>
+        <span class="font-medium text-gray-700">库存查询</span>
+        <span class="text-sm text-gray-400 ml-1">共 {{ total }} 条</span>
+      </div>
+      <div class="px-2">
+        <el-table
+          v-loading="loading"
+          :data="tableData"
+          style="width:100%"
+          :row-class-name="({ row }) => isLowStock(row) ? 'low-stock-row' : ''"
+        >
+          <el-table-column prop="warehouse_name" label="仓库" min-width="110" />
+          <el-table-column prop="material_code" label="物料编码" width="120" />
+          <el-table-column prop="material_name" label="物料名称" min-width="140" />
+          <el-table-column prop="category" label="分类" width="100" align="center" />
+          <el-table-column prop="unit" label="单位" width="70" align="center" />
+          <el-table-column label="当前库存" width="110" align="right">
+            <template #default="{ row }">
+              <span :class="isLowStock(row) ? 'text-red-500 font-bold' : 'text-gray-700'">
+                {{ row.quantity }}
+              </span>
+              <el-tag v-if="isLowStock(row)" type="danger" size="small" class="ml-1">偏低</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column prop="min_quantity" label="最低库存" width="100" align="right" />
+          <el-table-column prop="max_quantity" label="最高库存" width="100" align="right" />
+          <el-table-column prop="updated_at" label="更新时间" min-width="160" />
+        </el-table>
+      </div>
+      <div class="px-5 py-3 border-t border-gray-50">
+        <el-pagination
+          v-model:current-page="pagination.page"
+          v-model:page-size="pagination.per_page"
+          :total="total"
+          :page-sizes="[10, 20, 50]"
+          layout="total,sizes,prev,pager,next,jumper"
+          background
+          @current-change="handlePageChange"
+          @size-change="handleSizeChange"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+.el-table .low-stock-row {
+  background-color: #fff5f5 !important;
+}
+</style>
diff --git a/frontend/src/views/inventory/suppliers/index.vue b/frontend/src/views/inventory/suppliers/index.vue
index a6276d6..54a6543 100644
--- a/frontend/src/views/inventory/suppliers/index.vue
+++ b/frontend/src/views/inventory/suppliers/index.vue
@@ -60,8 +60,8 @@ onMounted(() => fetchList())
 </script>
 
 <template>
-  <div class="page-container">
-    <div class="search-bar">
+  <div class="p-6 space-y-4">
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-4 flex items-center flex-wrap gap-3">
       <el-input v-model="searchForm.name" placeholder="供应商名称" style="width:180px" clearable @keydown.enter="handleSearch" />
       <el-select v-model="searchForm.status" placeholder="状态" clearable style="width:120px">
         <el-option label="启用" :value="1" />
@@ -70,22 +70,31 @@ onMounted(() => fetchList())
       <el-button type="primary" @click="handleSearch">查询</el-button>
       <el-button @click="handleReset">重置</el-button>
     </div>
-    <div class="table-container">
-      <div class="table-actions"><el-button type="primary" @click="handleAdd">新增供应商</el-button></div>
-      <el-table v-loading="loading" :data="tableData" border stripe style="width:100%">
-        <el-table-column prop="name" label="供应商名称" min-width="150" />
-        <el-table-column prop="contact_person" label="联系人" width="100" />
-        <el-table-column prop="contact_phone" label="联系电话" width="130" />
-        <el-table-column prop="address" label="地址" min-width="200" show-overflow-tooltip />
-        <el-table-column label="状态" width="80" align="center"><template #default="{ row }"><el-tag :type="row.status?'success':'danger'" size="small">{{ row.status?'启用':'停用' }}</el-tag></template></el-table-column>
-        <el-table-column label="操作" width="160" fixed="right" align="center">
-          <template #default="{ row }">
-            <el-button size="small" type="primary" link @click="handleEdit(row)">编辑</el-button>
-            <el-button size="small" type="danger" link @click="handleDelete(row)">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-      <el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.per_page" :total="total" :page-sizes="[10,15,20,50]" layout="total,sizes,prev,pager,next,jumper" background @current-change="handlePageChange" @size-change="handleSizeChange" />
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm">
+      <div class="flex items-center justify-between px-5 py-4 border-b border-gray-50">
+        <div class="flex items-center gap-3">
+          <span class="font-medium text-gray-700">供应商列表</span>
+        </div>
+        <el-button type="primary" @click="handleAdd">新增供应商</el-button>
+      </div>
+      <div class="px-2">
+        <el-table v-loading="loading" :data="tableData" style="width:100%">
+          <el-table-column prop="name" label="供应商名称" min-width="150" />
+          <el-table-column prop="contact_person" label="联系人" width="100" />
+          <el-table-column prop="contact_phone" label="联系电话" width="130" />
+          <el-table-column prop="address" label="地址" min-width="200" show-overflow-tooltip />
+          <el-table-column label="状态" width="80" align="center"><template #default="{ row }"><el-tag :type="row.status?'success':'danger'" size="small">{{ row.status?'启用':'停用' }}</el-tag></template></el-table-column>
+          <el-table-column label="操作" width="160" fixed="right" align="center">
+            <template #default="{ row }">
+              <el-button size="small" type="primary" text @click="handleEdit(row)">编辑</el-button>
+              <el-button size="small" type="danger" text @click="handleDelete(row)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="px-5 py-3 border-t border-gray-50">
+        <el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.per_page" :total="total" :page-sizes="[10,15,20,50]" layout="total,sizes,prev,pager,next,jumper" background @current-change="handlePageChange" @size-change="handleSizeChange" />
+      </div>
     </div>
     <el-dialog v-model="dialogVisible" :title="isEdit?'编辑供应商':'新增供应商'" width="600px" destroy-on-close>
       <el-form ref="formRef" :model="form" :rules="formRules" label-width="100px">
diff --git a/frontend/src/views/inventory/transfers/index.vue b/frontend/src/views/inventory/transfers/index.vue
new file mode 100644
index 0000000..b55914d
--- /dev/null
+++ b/frontend/src/views/inventory/transfers/index.vue
@@ -0,0 +1,270 @@
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { transferApi, warehouseApi, materialApi } from '@/api/inventory.js'
+
+const tableData = ref([])
+const total = ref(0)
+const loading = ref(false)
+const dialogVisible = ref(false)
+const submitLoading = ref(false)
+const warehouses = ref([])
+const materials = ref([])
+
+const searchForm = reactive({ from_warehouse_id: '', to_warehouse_id: '', status: '' })
+const pagination = reactive({ page: 1, per_page: 20 })
+
+const defaultItem = () => ({ material_id: '', material_name: '', quantity: 1 })
+const formRef = ref(null)
+const form = reactive({
+  from_warehouse_id: '',
+  to_warehouse_id: '',
+  transfer_date: '',
+  remark: '',
+  items: [defaultItem()]
+})
+const formRules = {
+  from_warehouse_id: [{ required: true, message: '请选择源仓库', trigger: 'change' }],
+  to_warehouse_id: [{ required: true, message: '请选择目标仓库', trigger: 'change' }],
+  transfer_date: [{ required: true, message: '请选择调拨日期', trigger: 'change' }]
+}
+
+const statusMap = { draft: '草稿', confirmed: '已确认', completed: '已完成', cancelled: '已取消' }
+const statusType = { draft: 'info', confirmed: 'primary', completed: 'success', cancelled: 'danger' }
+
+async function fetchList() {
+  loading.value = true
+  try {
+    const res = await transferApi.getList({ ...searchForm, ...pagination })
+    tableData.value = res.data?.list || res.data?.data || []
+    total.value = res.data?.total || 0
+  } catch {
+    ElMessage.error('获取调拨单列表失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+async function fetchOptions() {
+  try {
+    const [wRes, mRes] = await Promise.all([
+      warehouseApi.getList({ per_page: 500 }),
+      materialApi.getList({ per_page: 500 })
+    ])
+    warehouses.value = wRes.data?.list || wRes.data?.data || []
+    materials.value = mRes.data?.list || mRes.data?.data || []
+  } catch {}
+}
+
+function handleSearch() { pagination.page = 1; fetchList() }
+function handleReset() {
+  Object.assign(searchForm, { from_warehouse_id: '', to_warehouse_id: '', status: '' })
+  handleSearch()
+}
+
+function handleAdd() {
+  Object.assign(form, {
+    from_warehouse_id: '', to_warehouse_id: '',
+    transfer_date: '', remark: '',
+    items: [defaultItem()]
+  })
+  dialogVisible.value = true
+}
+
+function addItem() { form.items.push(defaultItem()) }
+function removeItem(idx) {
+  if (form.items.length <= 1) { ElMessage.warning('至少保留一条物料'); return }
+  form.items.splice(idx, 1)
+}
+
+function onMaterialChange(item) {
+  const mat = materials.value.find(m => m.id === item.material_id)
+  if (mat) item.material_name = mat.name
+}
+
+async function handleSubmit() {
+  if (!formRef.value) return
+  await formRef.value.validate(async (valid) => {
+    if (!valid) return
+    const hasEmpty = form.items.some(i => !i.material_id || i.quantity <= 0)
+    if (hasEmpty) { ElMessage.warning('请完整填写物料信息'); return }
+    submitLoading.value = true
+    try {
+      await transferApi.create({ ...form })
+      ElMessage.success('创建成功')
+      dialogVisible.value = false
+      fetchList()
+    } catch {
+      ElMessage.error('创建失败')
+    } finally {
+      submitLoading.value = false
+    }
+  })
+}
+
+async function handleConfirm(row) {
+  await ElMessageBox.confirm(`确认调拨单「${row.transfer_no}」吗？`, '确认操作', { type: 'warning' })
+  try {
+    await transferApi.confirm(row.id)
+    ElMessage.success('确认成功')
+    fetchList()
+  } catch { ElMessage.error('操作失败') }
+}
+
+async function handleCancel(row) {
+  await ElMessageBox.confirm(`取消调拨单「${row.transfer_no}」吗？取消后不可恢复。`, '取消确认', { type: 'warning' })
+  try {
+    await transferApi.cancel(row.id)
+    ElMessage.success('已取消')
+    fetchList()
+  } catch { ElMessage.error('操作失败') }
+}
+
+function handlePageChange(val) { pagination.page = val; fetchList() }
+function handleSizeChange(val) { pagination.per_page = val; pagination.page = 1; fetchList() }
+
+onMounted(() => { fetchList(); fetchOptions() })
+</script>
+
+<template>
+  <div class="p-6 space-y-4">
+    <!-- 搜索栏 -->
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-4 flex items-center flex-wrap gap-3">
+      <el-select v-model="searchForm.from_warehouse_id" placeholder="源仓库" clearable filterable style="width:150px">
+        <el-option v-for="w in warehouses" :key="w.id" :label="w.name" :value="w.id" />
+      </el-select>
+      <el-select v-model="searchForm.to_warehouse_id" placeholder="目标仓库" clearable filterable style="width:150px">
+        <el-option v-for="w in warehouses" :key="w.id" :label="w.name" :value="w.id" />
+      </el-select>
+      <el-select v-model="searchForm.status" placeholder="状态" clearable style="width:120px">
+        <el-option v-for="(v, k) in statusMap" :key="k" :label="v" :value="k" />
+      </el-select>
+      <el-button type="primary" @click="handleSearch">查询</el-button>
+      <el-button @click="handleReset">重置</el-button>
+    </div>
+
+    <!-- 列表卡片 -->
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm">
+      <div class="flex items-center justify-between px-5 py-4 border-b border-gray-50">
+        <div class="flex items-center gap-3">
+          <span class="w-1 h-5 bg-rose-500 rounded-full inline-block"></span>
+          <span class="font-medium text-gray-700">调拨单列表</span>
+        </div>
+        <el-button type="primary" @click="handleAdd">新建调拨单</el-button>
+      </div>
+      <div class="px-2">
+        <el-table v-loading="loading" :data="tableData" style="width:100%" stripe>
+          <el-table-column prop="transfer_no" label="调拨单号" min-width="160" />
+          <el-table-column prop="from_warehouse_name" label="源仓库" min-width="110" />
+          <el-table-column prop="to_warehouse_name" label="目标仓库" min-width="110" />
+          <el-table-column prop="transfer_date" label="调拨日期" width="120" align="center" />
+          <el-table-column label="状态" width="100" align="center">
+            <template #default="{ row }">
+              <el-tag :type="statusType[row.status]" size="small">
+                {{ statusMap[row.status] || row.status }}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column prop="created_by_name" label="创建人" width="90" align="center" />
+          <el-table-column prop="remark" label="备注" min-width="120" show-overflow-tooltip />
+          <el-table-column label="操作" width="180" fixed="right" align="center">
+            <template #default="{ row }">
+              <el-button
+                v-if="row.status === 'draft'"
+                size="small" type="success" text
+                @click="handleConfirm(row)"
+              >确认</el-button>
+              <el-button
+                v-if="row.status === 'draft'"
+                size="small" type="danger" text
+                @click="handleCancel(row)"
+              >取消</el-button>
+              <span v-if="!['draft'].includes(row.status)" class="text-gray-400 text-sm">-</span>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="px-5 py-3 border-t border-gray-50">
+        <el-pagination
+          v-model:current-page="pagination.page"
+          v-model:page-size="pagination.per_page"
+          :total="total"
+          :page-sizes="[10, 20, 50]"
+          layout="total,sizes,prev,pager,next,jumper"
+          background
+          @current-change="handlePageChange"
+          @size-change="handleSizeChange"
+        />
+      </div>
+    </div>
+
+    <!-- 新建调拨单 Dialog -->
+    <el-dialog v-model="dialogVisible" title="新建调拨单" width="680px" destroy-on-close>
+      <el-form ref="formRef" :model="form" :rules="formRules" label-width="90px">
+        <el-row :gutter="16">
+          <el-col :span="12">
+            <el-form-item label="源仓库" prop="from_warehouse_id">
+              <el-select v-model="form.from_warehouse_id" placeholder="选择源仓库" filterable style="width:100%">
+                <el-option v-for="w in warehouses" :key="w.id" :label="w.name" :value="w.id" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="目标仓库" prop="to_warehouse_id">
+              <el-select v-model="form.to_warehouse_id" placeholder="选择目标仓库" filterable style="width:100%">
+                <el-option v-for="w in warehouses" :key="w.id" :label="w.name" :value="w.id" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="调拨日期" prop="transfer_date">
+              <el-date-picker
+                v-model="form.transfer_date"
+                type="date"
+                value-format="YYYY-MM-DD"
+                placeholder="选择日期"
+                style="width:100%"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="备注">
+              <el-input v-model="form.remark" placeholder="备注（可选）" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-divider content-position="left">调拨物料明细</el-divider>
+
+        <div v-for="(item, idx) in form.items" :key="idx" class="flex items-center gap-2 mb-3">
+          <el-select
+            v-model="item.material_id"
+            placeholder="选择物料"
+            filterable
+            style="flex:2"
+            @change="onMaterialChange(item)"
+          >
+            <el-option
+              v-for="m in materials"
+              :key="m.id"
+              :label="`${m.name}（${m.code || '-'}）`"
+              :value="m.id"
+            />
+          </el-select>
+          <el-input-number
+            v-model="item.quantity"
+            :min="1"
+            placeholder="数量"
+            style="width:130px"
+          />
+          <el-button type="danger" text @click="removeItem(idx)">删除</el-button>
+        </div>
+        <el-button type="primary" text @click="addItem">+ 添加物料</el-button>
+      </el-form>
+      <template #footer>
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" :loading="submitLoading" @click="handleSubmit">确定</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
diff --git a/frontend/src/views/inventory/warehouses/index.vue b/frontend/src/views/inventory/warehouses/index.vue
index 2d09204..13c8143 100644
--- a/frontend/src/views/inventory/warehouses/index.vue
+++ b/frontend/src/views/inventory/warehouses/index.vue
@@ -151,9 +151,8 @@ onMounted(fetchList)
 </script>
 
 <template>
-  <div class="page-container">
-    <!-- Search -->
-    <div class="search-bar">
+  <div class="p-6 space-y-4">
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-4 flex items-center flex-wrap gap-3">
       <el-input
         v-model="searchForm.name"
         placeholder="搜索仓库名称"
@@ -167,57 +166,60 @@ onMounted(fetchList)
         <el-option label="启用" :value="1" />
         <el-option label="停用" :value="0" />
       </el-select>
-      <el-button type="primary" :icon="'Search'" @click="handleSearch">查询</el-button>
-      <el-button :icon="'Refresh'" @click="handleReset">重置</el-button>
+      <el-button type="primary" @click="handleSearch">查询</el-button>
+      <el-button @click="handleReset">重置</el-button>
     </div>
 
-    <!-- Table -->
-    <div class="table-container">
-      <div class="table-actions">
-        <el-button type="primary" :icon="'Plus'" @click="handleAdd">新增仓库</el-button>
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm">
+      <div class="flex items-center justify-between px-5 py-4 border-b border-gray-50">
+        <div class="flex items-center gap-3">
+          <span class="font-medium text-gray-700">仓库列表</span>
+        </div>
+        <el-button type="primary" @click="handleAdd">新增仓库</el-button>
+      </div>
+      <div class="px-2">
+        <el-table v-loading="loading" :data="tableData" style="width: 100%">
+          <el-table-column prop="name" label="仓库名称" min-width="160" />
+          <el-table-column prop="address" label="地址" min-width="200" show-overflow-tooltip />
+          <el-table-column prop="contact_person" label="联系人" width="120" />
+          <el-table-column prop="contact_phone" label="联系电话" width="140" />
+          <el-table-column label="状态" width="90" align="center">
+            <template #default="{ row }">
+              <el-tag :type="row.status === 1 ? 'success' : 'danger'" size="small">
+                {{ row.status === 1 ? '启用' : '停用' }}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" width="180" fixed="right" align="center">
+            <template #default="{ row }">
+              <el-button size="small" type="primary" text @click="handleEdit(row)">编辑</el-button>
+              <el-button
+                size="small"
+                :type="row.status === 1 ? 'warning' : 'success'"
+                text
+                @click="handleStatusToggle(row)"
+              >
+                {{ row.status === 1 ? '停用' : '启用' }}
+              </el-button>
+              <el-button size="small" type="danger" text @click="handleDelete(row)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="px-5 py-3 border-t border-gray-50">
+        <el-pagination
+          v-model:current-page="pagination.page"
+          v-model:page-size="pagination.page_size"
+          :total="total"
+          :page-sizes="[10, 20, 50]"
+          layout="total, sizes, prev, pager, next, jumper"
+          background
+          @current-change="handlePageChange"
+          @size-change="handleSizeChange"
+        />
       </div>
-
-      <el-table v-loading="loading" :data="tableData" border stripe style="width: 100%">
-        <el-table-column prop="name" label="仓库名称" min-width="160" />
-        <el-table-column prop="address" label="地址" min-width="200" show-overflow-tooltip />
-        <el-table-column prop="contact_person" label="联系人" width="120" />
-        <el-table-column prop="contact_phone" label="联系电话" width="140" />
-        <el-table-column label="状态" width="90" align="center">
-          <template #default="{ row }">
-            <el-tag :type="row.status === 1 ? 'success' : 'danger'" size="small">
-              {{ row.status === 1 ? '启用' : '停用' }}
-            </el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" width="180" fixed="right" align="center">
-          <template #default="{ row }">
-            <el-button size="small" type="primary" link @click="handleEdit(row)">编辑</el-button>
-            <el-button
-              size="small"
-              :type="row.status === 1 ? 'warning' : 'success'"
-              link
-              @click="handleStatusToggle(row)"
-            >
-              {{ row.status === 1 ? '停用' : '启用' }}
-            </el-button>
-            <el-button size="small" type="danger" link @click="handleDelete(row)">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-
-      <el-pagination
-        v-model:current-page="pagination.page"
-        v-model:page-size="pagination.page_size"
-        :total="total"
-        :page-sizes="[10, 20, 50]"
-        layout="total, sizes, prev, pager, next, jumper"
-        background
-        @current-change="handlePageChange"
-        @size-change="handleSizeChange"
-      />
     </div>
 
-    <!-- Add/Edit Dialog -->
     <el-dialog v-model="dialogVisible" :title="dialogTitle" width="600px" destroy-on-close>
       <el-form ref="formRef" :model="form" :rules="formRules" label-width="90px">
         <el-row :gutter="16">
diff --git a/frontend/src/views/kb/articles/index.vue b/frontend/src/views/kb/articles/index.vue
index e3b4df2..50cfbc1 100644
--- a/frontend/src/views/kb/articles/index.vue
+++ b/frontend/src/views/kb/articles/index.vue
@@ -96,8 +96,8 @@ onMounted(() => { fetchCategories(); fetchList() })
 </script>
 
 <template>
-  <div class="page-container">
-    <div class="search-bar">
+  <div class="p-6 space-y-4">
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-4 flex items-center flex-wrap gap-3">
       <el-input v-model="searchForm.keyword" placeholder="标题搜索" style="width:180px" clearable @keydown.enter="handleSearch" />
       <el-select v-model="searchForm.category_id" placeholder="分类" clearable style="width:150px">
         <el-option v-for="c in categoryList" :key="c.id" :label="c.name" :value="c.id" />
@@ -111,39 +111,48 @@ onMounted(() => { fetchCategories(); fetchList() })
       <el-button type="primary" @click="handleSearch">查询</el-button>
       <el-button @click="handleReset">重置</el-button>
     </div>
-    <div class="table-container">
-      <div class="table-actions"><el-button type="primary" @click="handleAdd">新增文章</el-button></div>
-      <el-table v-loading="loading" :data="tableData" border stripe style="width:100%">
-        <el-table-column prop="title" label="标题" min-width="200" />
-        <el-table-column label="分类" width="120" align="center">
-          <template #default="{ row }">{{ row.category?.name || '-' }}</template>
-        </el-table-column>
-        <el-table-column label="作者" width="100" align="center">
-          <template #default="{ row }">{{ row.author?.name || '-' }}</template>
-        </el-table-column>
-        <el-table-column label="可见范围" width="100" align="center">
-          <template #default="{ row }">
-            <el-tag :type="row.visibility === 1 ? 'warning' : 'success'" size="small">{{ visibilityMap[row.visibility] || '-' }}</el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column label="状态" width="90" align="center">
-          <template #default="{ row }">
-            <el-tag :type="statusType[row.status]" size="small">{{ statusMap[row.status] || '-' }}</el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column prop="views" label="浏览" width="70" align="center" />
-        <el-table-column prop="likes" label="点赞" width="70" align="center" />
-        <el-table-column prop="published_at" label="发布时间" min-width="160" />
-        <el-table-column label="操作" width="220" fixed="right" align="center">
-          <template #default="{ row }">
-            <el-button v-if="row.status <= 1" size="small" type="primary" link @click="handleEdit(row)">编辑</el-button>
-            <el-button v-if="row.status <= 1" size="small" type="danger" link @click="handleDelete(row)">删除</el-button>
-            <el-button v-if="row.status < 2" size="small" type="success" link @click="handlePublish(row)">发布</el-button>
-            <el-button v-if="row.status === 2" size="small" type="warning" link @click="handleOffline(row)">下架</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-      <el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.per_page" :total="total" :page-sizes="[10,20,50]" layout="total,sizes,prev,pager,next,jumper" background @current-change="handlePageChange" @size-change="handleSizeChange" />
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm">
+      <div class="flex items-center justify-between px-5 py-4 border-b border-gray-50">
+        <div class="flex items-center gap-3">
+          <span class="font-medium text-gray-700">文章列表</span>
+        </div>
+        <el-button type="primary" @click="handleAdd">新增文章</el-button>
+      </div>
+      <div class="px-2">
+        <el-table v-loading="loading" :data="tableData" style="width:100%">
+          <el-table-column prop="title" label="标题" min-width="200" />
+          <el-table-column label="分类" width="120" align="center">
+            <template #default="{ row }">{{ row.category?.name || '-' }}</template>
+          </el-table-column>
+          <el-table-column label="作者" width="100" align="center">
+            <template #default="{ row }">{{ row.author?.name || '-' }}</template>
+          </el-table-column>
+          <el-table-column label="可见范围" width="100" align="center">
+            <template #default="{ row }">
+              <el-tag :type="row.visibility === 1 ? 'warning' : 'success'" size="small">{{ visibilityMap[row.visibility] || '-' }}</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="状态" width="90" align="center">
+            <template #default="{ row }">
+              <el-tag :type="statusType[row.status]" size="small">{{ statusMap[row.status] || '-' }}</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column prop="views" label="浏览" width="70" align="center" />
+          <el-table-column prop="likes" label="点赞" width="70" align="center" />
+          <el-table-column prop="published_at" label="发布时间" min-width="160" />
+          <el-table-column label="操作" width="220" fixed="right" align="center">
+            <template #default="{ row }">
+              <el-button v-if="row.status <= 1" size="small" type="primary" text @click="handleEdit(row)">编辑</el-button>
+              <el-button v-if="row.status <= 1" size="small" type="danger" text @click="handleDelete(row)">删除</el-button>
+              <el-button v-if="row.status < 2" size="small" type="success" text @click="handlePublish(row)">发布</el-button>
+              <el-button v-if="row.status === 2" size="small" type="warning" text @click="handleOffline(row)">下架</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="px-5 py-3 border-t border-gray-50">
+        <el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.per_page" :total="total" :page-sizes="[10,20,50]" layout="total,sizes,prev,pager,next,jumper" background @current-change="handlePageChange" @size-change="handleSizeChange" />
+      </div>
     </div>
     <el-dialog v-model="dialogVisible" :title="isEdit ? '编辑文章' : '新增文章'" width="600px" destroy-on-close>
       <el-form ref="formRef" :model="form" :rules="formRules" label-width="90px">
diff --git a/frontend/src/views/kb/categories/index.vue b/frontend/src/views/kb/categories/index.vue
index baf0328..678c28d 100644
--- a/frontend/src/views/kb/categories/index.vue
+++ b/frontend/src/views/kb/categories/index.vue
@@ -73,8 +73,8 @@ onMounted(() => fetchList())
 </script>
 
 <template>
-  <div class="page-container">
-    <div class="search-bar">
+  <div class="p-6 space-y-4">
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-4 flex items-center flex-wrap gap-3">
       <el-select v-model="searchForm.status" placeholder="状态" clearable style="width:120px">
         <el-option label="启用" :value="1" />
         <el-option label="停用" :value="0" />
@@ -82,27 +82,36 @@ onMounted(() => fetchList())
       <el-button type="primary" @click="handleSearch">查询</el-button>
       <el-button @click="handleReset">重置</el-button>
     </div>
-    <div class="table-container">
-      <div class="table-actions"><el-button type="primary" @click="handleAdd">新增分类</el-button></div>
-      <el-table v-loading="loading" :data="tableData" border stripe row-key="id" style="width:100%">
-        <el-table-column prop="name" label="分类名称" min-width="180" />
-        <el-table-column label="上级分类" width="120" align="center">
-          <template #default="{ row }">{{ row.parent_id === 0 ? '顶级' : row.parent_id }}</template>
-        </el-table-column>
-        <el-table-column prop="sort" label="排序" width="80" align="center" />
-        <el-table-column label="状态" width="80" align="center">
-          <template #default="{ row }">
-            <el-tag :type="row.status ? 'success' : 'danger'" size="small">{{ row.status ? '启用' : '停用' }}</el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" width="160" fixed="right" align="center">
-          <template #default="{ row }">
-            <el-button size="small" type="primary" link @click="handleEdit(row)">编辑</el-button>
-            <el-button size="small" type="danger" link @click="handleDelete(row)">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-      <el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.per_page" :total="total" :page-sizes="[20,50,100]" layout="total,sizes,prev,pager,next,jumper" background @current-change="handlePageChange" @size-change="handleSizeChange" />
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm">
+      <div class="flex items-center justify-between px-5 py-4 border-b border-gray-50">
+        <div class="flex items-center gap-3">
+          <span class="font-medium text-gray-700">知识库分类列表</span>
+        </div>
+        <el-button type="primary" @click="handleAdd">新增分类</el-button>
+      </div>
+      <div class="px-2">
+        <el-table v-loading="loading" :data="tableData" row-key="id" style="width:100%">
+          <el-table-column prop="name" label="分类名称" min-width="180" />
+          <el-table-column label="上级分类" width="120" align="center">
+            <template #default="{ row }">{{ row.parent_id === 0 ? '顶级' : row.parent_id }}</template>
+          </el-table-column>
+          <el-table-column prop="sort" label="排序" width="80" align="center" />
+          <el-table-column label="状态" width="80" align="center">
+            <template #default="{ row }">
+              <el-tag :type="row.status ? 'success' : 'danger'" size="small">{{ row.status ? '启用' : '停用' }}</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" width="160" fixed="right" align="center">
+            <template #default="{ row }">
+              <el-button size="small" type="primary" text @click="handleEdit(row)">编辑</el-button>
+              <el-button size="small" type="danger" text @click="handleDelete(row)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="px-5 py-3 border-t border-gray-50">
+        <el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.per_page" :total="total" :page-sizes="[20,50,100]" layout="total,sizes,prev,pager,next,jumper" background @current-change="handlePageChange" @size-change="handleSizeChange" />
+      </div>
     </div>
     <el-dialog v-model="dialogVisible" :title="isEdit ? '编辑分类' : '新增分类'" width="450px" destroy-on-close>
       <el-form ref="formRef" :model="form" :rules="formRules" label-width="90px">
diff --git a/frontend/src/views/login/index.vue b/frontend/src/views/login/index.vue
index e203a5e..d3e436c 100644
--- a/frontend/src/views/login/index.vue
+++ b/frontend/src/views/login/index.vue
@@ -3,6 +3,7 @@ import { ref, reactive } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { useUserStore } from '@/stores/user.js'
 import { ElMessage } from 'element-plus'
+import { Icon } from '@iconify/vue'
 
 const router = useRouter()
 const route = useRoute()
@@ -55,27 +56,27 @@ function handleKeydown(e) {
 </script>
 
 <template>
-  <div class="login-wrapper">
-    <!-- Background decoration -->
-    <div class="bg-decoration bg-deco-1" />
-    <div class="bg-decoration bg-deco-2" />
+  <div class="min-h-screen flex items-center justify-center bg-rose-50 relative overflow-hidden">
+    <!-- BG blobs -->
+    <div class="absolute w-96 h-96 rounded-full opacity-20 pointer-events-none" style="background: radial-gradient(circle, #f43f5e, transparent); top:-120px; right:-80px;"></div>
+    <div class="absolute w-72 h-72 rounded-full opacity-20 pointer-events-none" style="background: radial-gradient(circle, #fb7185, transparent); bottom:-80px; left:-60px;"></div>
 
-    <div class="login-card">
-      <!-- Logo / Branding -->
-      <div class="brand-area">
-        <div class="brand-icon">
-          <el-icon :size="48" color="#E8A87C"><House /></el-icon>
+    <div class="relative z-10 w-[420px] bg-white rounded-3xl p-12 shadow-2xl text-center">
+      <!-- Logo -->
+      <div class="flex justify-center mb-6">
+        <div class="w-20 h-20 bg-rose-500 rounded-2xl flex items-center justify-center text-white shadow-lg">
+          <Icon icon="solar:heart-bold" class="text-4xl" />
         </div>
-        <h1 class="brand-title">宫中有喜</h1>
-        <p class="brand-subtitle">月子会所综合管理系统</p>
       </div>
+      <h1 class="text-3xl font-bold text-gray-800 mb-2 tracking-widest">宫中有喜</h1>
+      <p class="text-gray-400 text-sm mb-8">月子会所综合管理系统</p>
 
-      <!-- Login Form -->
+      <!-- Form -->
       <el-form
         ref="formRef"
         :model="form"
         :rules="rules"
-        class="login-form"
+        class="text-left"
         @keydown="handleKeydown"
       >
         <el-form-item prop="username">
@@ -102,11 +103,11 @@ function handleKeydown(e) {
           />
         </el-form-item>
 
-        <el-form-item class="mt-8">
+        <el-form-item>
           <el-button
             type="primary"
             size="large"
-            class="login-btn"
+            style="width:100%; height:48px; font-size:16px; letter-spacing:4px; border-radius:12px;"
             :loading="loading"
             @click="handleLogin"
           >
@@ -115,108 +116,12 @@ function handleKeydown(e) {
         </el-form-item>
       </el-form>
 
-      <p class="login-footer">宫中有喜月子会所 &copy; {{ new Date().getFullYear() }}</p>
+      <div class="text-center mt-2 text-sm text-gray-400">
+        还没有账号？
+        <router-link to="/register" class="text-blue-400 hover:text-blue-300 transition-colors">申请注册</router-link>
+      </div>
+
+      <p class="text-xs text-gray-300 mt-4">宫中有喜月子会所 &copy; {{ new Date().getFullYear() }}</p>
     </div>
   </div>
 </template>
-
-<style scoped lang="scss">
-.login-wrapper {
-  min-height: 100vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: linear-gradient(135deg, #FBE8D5 0%, #F7F0E8 40%, #EDE0D4 100%);
-  position: relative;
-  overflow: hidden;
-}
-
-.bg-decoration {
-  position: absolute;
-  border-radius: 50%;
-  opacity: 0.3;
-  pointer-events: none;
-}
-
-.bg-deco-1 {
-  width: 400px;
-  height: 400px;
-  background: radial-gradient(circle, #E8A87C, transparent);
-  top: -120px;
-  right: -80px;
-}
-
-.bg-deco-2 {
-  width: 300px;
-  height: 300px;
-  background: radial-gradient(circle, #C97B5E, transparent);
-  bottom: -80px;
-  left: -60px;
-}
-
-.login-card {
-  position: relative;
-  z-index: 1;
-  width: 420px;
-  background: #fff;
-  border-radius: 16px;
-  padding: 48px 44px 36px;
-  box-shadow: 0 20px 60px rgba(200, 120, 80, 0.15);
-}
-
-.brand-area {
-  text-align: center;
-  margin-bottom: 36px;
-}
-
-.brand-icon {
-  display: flex;
-  justify-content: center;
-  margin-bottom: 12px;
-}
-
-.brand-title {
-  font-size: 28px;
-  font-weight: 700;
-  color: var(--color-primary-dark);
-  letter-spacing: 4px;
-  margin-bottom: 6px;
-}
-
-.brand-subtitle {
-  font-size: 13px;
-  color: var(--color-text-secondary);
-  letter-spacing: 1px;
-}
-
-.login-form {
-  .el-input {
-    --el-input-border-radius: 8px;
-  }
-
-  :deep(.el-input__wrapper) {
-    padding: 4px 12px;
-  }
-}
-
-.login-btn {
-  width: 100%;
-  height: 48px;
-  font-size: 16px;
-  letter-spacing: 4px;
-  border-radius: 8px;
-  background: linear-gradient(135deg, #E8A87C, #D4875A);
-  border: none;
-
-  &:hover {
-    background: linear-gradient(135deg, #F0BB97, #E8A87C);
-  }
-}
-
-.login-footer {
-  margin-top: 24px;
-  text-align: center;
-  font-size: 12px;
-  color: var(--color-text-placeholder);
-}
-</style>
diff --git a/frontend/src/views/meal/daily-plans/index.vue b/frontend/src/views/meal/daily-plans/index.vue
index 880696a..5d4c13e 100644
--- a/frontend/src/views/meal/daily-plans/index.vue
+++ b/frontend/src/views/meal/daily-plans/index.vue
@@ -60,8 +60,8 @@ onMounted(() => { fetchList(); fetchCustomers() })
 </script>
 
 <template>
-  <div class="page-container">
-    <div class="search-bar">
+  <div class="p-6 space-y-4">
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-4 flex items-center flex-wrap gap-3">
       <el-select v-model="searchForm.customer_id" placeholder="选择客户" clearable filterable style="width:180px"><el-option v-for="c in customers" :key="c.id" :label="c.name" :value="c.id" /></el-select>
       <el-date-picker v-model="searchForm.plan_date" type="date" value-format="YYYY-MM-DD" placeholder="日期" style="width:160px" />
       <el-select v-model="searchForm.meal_type" placeholder="餐型" clearable style="width:120px"><el-option v-for="(v,k) in mealTypeMap" :key="k" :label="v" :value="Number(k)" /></el-select>
@@ -69,27 +69,34 @@ onMounted(() => { fetchList(); fetchCustomers() })
       <el-button type="primary" @click="handleSearch">查询</el-button>
       <el-button @click="handleReset">重置</el-button>
     </div>
-    <div class="table-container">
-      <div class="table-actions"><el-button type="primary" @click="handleAdd">新增排餐</el-button></div>
-      <el-table v-loading="loading" :data="tableData" border stripe style="width:100%">
-        <el-table-column label="客户" min-width="100"><template #default="{ row }">{{ row.customer?.name || '-' }}</template></el-table-column>
-        <el-table-column prop="plan_date" label="日期" width="110" />
-        <el-table-column label="餐型" width="80" align="center"><template #default="{ row }">{{ mealTypeMap[row.meal_type] }}</template></el-table-column>
-        <el-table-column prop="special_note" label="特殊备注" min-width="150" show-overflow-tooltip />
-        <el-table-column label="评分" width="70" align="center"><template #default="{ row }">{{ row.review?.score || '-' }}</template></el-table-column>
-        <el-table-column label="状态" width="90" align="center"><template #default="{ row }"><el-tag :type="statusType[row.status]" size="small">{{ statusMap[row.status] }}</el-tag></template></el-table-column>
-        <el-table-column label="操作" width="220" fixed="right" align="center">
-          <template #default="{ row }">
-            <el-button v-if="row.status<2" size="small" type="success" link @click="handleDeliver(row)">送达</el-button>
-            <el-dropdown v-if="row.status<2" trigger="click" @command="(cmd) => handleStatusChange(row, cmd)" style="margin:0 8px">
-              <el-button size="small" type="warning" link>状态</el-button>
-              <template #dropdown><el-dropdown-menu><el-dropdown-item v-for="(v,k) in statusMap" :key="k" :command="Number(k)">{{ v }}</el-dropdown-item></el-dropdown-menu></template>
-            </el-dropdown>
-            <el-button v-if="row.status===0" size="small" type="danger" link @click="handleDelete(row)">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-      <el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.per_page" :total="total" :page-sizes="[10,30,50]" layout="total,sizes,prev,pager,next,jumper" background @current-change="handlePageChange" @size-change="handleSizeChange" />
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm">
+      <div class="flex items-center justify-between px-5 py-4 border-b border-gray-50">
+        <div class="flex items-center gap-3"></div>
+        <el-button type="primary" @click="handleAdd">新增排餐</el-button>
+      </div>
+      <div class="px-2">
+        <el-table v-loading="loading" :data="tableData" style="width:100%">
+          <el-table-column label="客户" min-width="100"><template #default="{ row }">{{ row.customer?.name || '-' }}</template></el-table-column>
+          <el-table-column prop="plan_date" label="日期" width="110" />
+          <el-table-column label="餐型" width="80" align="center"><template #default="{ row }">{{ mealTypeMap[row.meal_type] }}</template></el-table-column>
+          <el-table-column prop="special_note" label="特殊备注" min-width="150" show-overflow-tooltip />
+          <el-table-column label="评分" width="70" align="center"><template #default="{ row }">{{ row.review?.score || '-' }}</template></el-table-column>
+          <el-table-column label="状态" width="90" align="center"><template #default="{ row }"><el-tag :type="statusType[row.status]" size="small">{{ statusMap[row.status] }}</el-tag></template></el-table-column>
+          <el-table-column label="操作" width="220" fixed="right" align="center">
+            <template #default="{ row }">
+              <el-button v-if="row.status<2" size="small" type="success" text @click="handleDeliver(row)">送达</el-button>
+              <el-dropdown v-if="row.status<2" trigger="click" @command="(cmd) => handleStatusChange(row, cmd)" style="margin:0 8px">
+                <el-button size="small" type="warning" text>状态</el-button>
+                <template #dropdown><el-dropdown-menu><el-dropdown-item v-for="(v,k) in statusMap" :key="k" :command="Number(k)">{{ v }}</el-dropdown-item></el-dropdown-menu></template>
+              </el-dropdown>
+              <el-button v-if="row.status===0" size="small" type="danger" text @click="handleDelete(row)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="px-5 py-3 border-t border-gray-50">
+        <el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.per_page" :total="total" :page-sizes="[10,30,50]" layout="total,sizes,prev,pager,next,jumper" background @current-change="handlePageChange" @size-change="handleSizeChange" />
+      </div>
     </div>
     <el-dialog v-model="dialogVisible" :title="isEdit?'编辑排餐':'新增排餐'" width="550px" destroy-on-close>
       <el-form :model="form" label-width="80px">
diff --git a/frontend/src/views/meal/dishes/index.vue b/frontend/src/views/meal/dishes/index.vue
index cf38995..45467f7 100644
--- a/frontend/src/views/meal/dishes/index.vue
+++ b/frontend/src/views/meal/dishes/index.vue
@@ -51,30 +51,37 @@ onMounted(() => fetchList())
 </script>
 
 <template>
-  <div class="page-container">
-    <div class="search-bar">
+  <div class="p-6 space-y-4">
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-4 flex items-center flex-wrap gap-3">
       <el-input v-model="searchForm.name" placeholder="菜品名称" style="width:180px" clearable @keydown.enter="handleSearch" />
       <el-select v-model="searchForm.category" placeholder="分类" clearable style="width:120px"><el-option v-for="c in categories" :key="c" :label="c" :value="c" /></el-select>
       <el-select v-model="searchForm.status" placeholder="状态" clearable style="width:120px"><el-option label="启用" :value="1" /><el-option label="禁用" :value="0" /></el-select>
       <el-button type="primary" @click="handleSearch">查询</el-button>
       <el-button @click="handleReset">重置</el-button>
     </div>
-    <div class="table-container">
-      <div class="table-actions"><el-button type="primary" @click="handleAdd">新增菜品</el-button></div>
-      <el-table v-loading="loading" :data="tableData" border stripe style="width:100%">
-        <el-table-column prop="name" label="菜品名称" min-width="120" />
-        <el-table-column prop="category" label="分类" width="80" align="center" />
-        <el-table-column prop="price" label="价格" width="90" align="right" />
-        <el-table-column prop="description" label="描述" min-width="200" show-overflow-tooltip />
-        <el-table-column label="状态" width="80" align="center"><template #default="{ row }"><el-tag :type="row.status?'success':'danger'" size="small">{{ row.status?'启用':'禁用' }}</el-tag></template></el-table-column>
-        <el-table-column label="操作" width="160" fixed="right" align="center">
-          <template #default="{ row }">
-            <el-button size="small" type="primary" link @click="handleEdit(row)">编辑</el-button>
-            <el-button size="small" type="danger" link @click="handleDelete(row)">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-      <el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.per_page" :total="total" :page-sizes="[10,20,50]" layout="total,sizes,prev,pager,next,jumper" background @current-change="handlePageChange" @size-change="handleSizeChange" />
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm">
+      <div class="flex items-center justify-between px-5 py-4 border-b border-gray-50">
+        <div class="flex items-center gap-3"></div>
+        <el-button type="primary" @click="handleAdd">新增菜品</el-button>
+      </div>
+      <div class="px-2">
+        <el-table v-loading="loading" :data="tableData" style="width:100%">
+          <el-table-column prop="name" label="菜品名称" min-width="120" />
+          <el-table-column prop="category" label="分类" width="80" align="center" />
+          <el-table-column prop="price" label="价格" width="90" align="right" />
+          <el-table-column prop="description" label="描述" min-width="200" show-overflow-tooltip />
+          <el-table-column label="状态" width="80" align="center"><template #default="{ row }"><el-tag :type="row.status?'success':'danger'" size="small">{{ row.status?'启用':'禁用' }}</el-tag></template></el-table-column>
+          <el-table-column label="操作" width="160" fixed="right" align="center">
+            <template #default="{ row }">
+              <el-button size="small" type="primary" text @click="handleEdit(row)">编辑</el-button>
+              <el-button size="small" type="danger" text @click="handleDelete(row)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="px-5 py-3 border-t border-gray-50">
+        <el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.per_page" :total="total" :page-sizes="[10,20,50]" layout="total,sizes,prev,pager,next,jumper" background @current-change="handlePageChange" @size-change="handleSizeChange" />
+      </div>
     </div>
     <el-dialog v-model="dialogVisible" :title="isEdit?'编辑菜品':'新增菜品'" width="550px" destroy-on-close>
       <el-form ref="formRef" :model="form" :rules="formRules" label-width="80px">
diff --git a/frontend/src/views/meal/reviews/index.vue b/frontend/src/views/meal/reviews/index.vue
new file mode 100644
index 0000000..b21d9ad
--- /dev/null
+++ b/frontend/src/views/meal/reviews/index.vue
@@ -0,0 +1,191 @@
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
+import { ElMessage } from 'element-plus'
+import { Icon } from '@iconify/vue'
+import { mealReviewApi } from '@/api/meal.js'
+import { customerApi } from '@/api/crm.js'
+
+const tableData = ref([])
+const total = ref(0)
+const loading = ref(false)
+const detailVisible = ref(false)
+const detailLoading = ref(false)
+const currentDetail = ref(null)
+const customers = ref([])
+
+const searchForm = reactive({ customer_id: '', rating: '', meal_date: '' })
+const pagination = reactive({ page: 1, per_page: 20 })
+
+const ratingOptions = [
+  { label: '5星', value: 5 },
+  { label: '4星', value: 4 },
+  { label: '3星', value: 3 },
+  { label: '2星', value: 2 },
+  { label: '1星', value: 1 }
+]
+
+async function fetchList() {
+  loading.value = true
+  try {
+    const res = await mealReviewApi.getList({ ...searchForm, ...pagination })
+    tableData.value = res.data?.list || res.data?.data || []
+    total.value = res.data?.total || 0
+  } catch {
+    ElMessage.error('加载失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+async function fetchCustomers() {
+  try {
+    const res = await customerApi.getList({ per_page: 500 })
+    customers.value = res.data?.list || res.data?.data || []
+  } catch {}
+}
+
+function handleSearch() { pagination.page = 1; fetchList() }
+function handleReset() {
+  Object.assign(searchForm, { customer_id: '', rating: '', meal_date: '' })
+  handleSearch()
+}
+
+function handleView(row) {
+  currentDetail.value = row
+  detailVisible.value = true
+}
+
+function getRatingColor(rating) {
+  if (rating >= 4) return 'text-green-500'
+  if (rating >= 3) return 'text-yellow-500'
+  return 'text-red-400'
+}
+
+function handlePageChange(val) { pagination.page = val; fetchList() }
+function handleSizeChange(val) { pagination.per_page = val; pagination.page = 1; fetchList() }
+
+onMounted(() => { fetchList(); fetchCustomers() })
+</script>
+
+<template>
+  <div class="p-6 space-y-4">
+    <!-- 搜索栏 -->
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-4 flex items-center flex-wrap gap-3">
+      <el-select v-model="searchForm.customer_id" placeholder="选择客户" clearable filterable style="width:180px">
+        <el-option v-for="c in customers" :key="c.id" :label="c.name" :value="c.id" />
+      </el-select>
+      <el-select v-model="searchForm.rating" placeholder="评分筛选" clearable style="width:130px">
+        <el-option v-for="r in ratingOptions" :key="r.value" :label="r.label" :value="r.value" />
+      </el-select>
+      <el-date-picker v-model="searchForm.meal_date" type="date" value-format="YYYY-MM-DD" placeholder="就餐日期" style="width:160px" />
+      <el-button type="primary" @click="handleSearch">
+        <Icon icon="solar:magnifer-bold-duotone" class="mr-1" />查询
+      </el-button>
+      <el-button @click="handleReset">重置</el-button>
+    </div>
+
+    <!-- 表格区 -->
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm">
+      <div class="flex items-center justify-between px-5 py-4 border-b border-gray-50">
+        <div class="flex items-center gap-2">
+          <span class="w-1 h-5 bg-rose-500 rounded-full inline-block"></span>
+          <span class="font-semibold text-gray-700">膳食评价列表</span>
+          <span class="text-xs text-gray-400 ml-1">（只读，客户评价不可编辑）</span>
+        </div>
+      </div>
+      <div class="px-2">
+        <el-table v-loading="loading" :data="tableData" style="width:100%">
+          <el-table-column label="客户" min-width="100">
+            <template #default="{ row }">{{ row.customer_name || '-' }}</template>
+          </el-table-column>
+          <el-table-column prop="meal_date" label="就餐日期" width="110" />
+          <el-table-column label="评分" width="120" align="center">
+            <template #default="{ row }">
+              <div class="flex items-center justify-center gap-0.5">
+                <Icon
+                  v-for="i in 5"
+                  :key="i"
+                  :icon="i <= row.rating ? 'solar:star-bold' : 'solar:star-line-duotone'"
+                  :class="['text-base', i <= row.rating ? 'text-amber-400' : 'text-gray-200']"
+                />
+                <span :class="['ml-1 text-sm font-semibold', getRatingColor(row.rating)]">{{ row.rating }}</span>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="content" label="评价内容" min-width="200" show-overflow-tooltip />
+          <el-table-column label="照片" width="70" align="center">
+            <template #default="{ row }">
+              <span v-if="row.photos && row.photos.length" class="text-rose-500 text-sm">{{ row.photos.length }} 张</span>
+              <span v-else class="text-gray-300 text-sm">—</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="created_at" label="评价时间" min-width="160" />
+          <el-table-column label="操作" width="80" fixed="right" align="center">
+            <template #default="{ row }">
+              <el-button size="small" type="primary" text @click="handleView(row)">详情</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="px-5 py-3 border-t border-gray-50">
+        <el-pagination
+          v-model:current-page="pagination.page"
+          v-model:page-size="pagination.per_page"
+          :total="total"
+          :page-sizes="[10, 20, 50]"
+          layout="total,sizes,prev,pager,next,jumper"
+          background
+          @current-change="handlePageChange"
+          @size-change="handleSizeChange"
+        />
+      </div>
+    </div>
+
+    <!-- 详情弹窗 -->
+    <el-dialog v-model="detailVisible" title="评价详情" width="520px" destroy-on-close>
+      <div v-loading="detailLoading">
+        <template v-if="currentDetail">
+          <el-descriptions :column="2" border>
+            <el-descriptions-item label="客户">{{ currentDetail.customer_name || '-' }}</el-descriptions-item>
+            <el-descriptions-item label="就餐日期">{{ currentDetail.meal_date || '-' }}</el-descriptions-item>
+            <el-descriptions-item label="评分" :span="2">
+              <div class="flex items-center gap-1">
+                <Icon
+                  v-for="i in 5"
+                  :key="i"
+                  :icon="i <= currentDetail.rating ? 'solar:star-bold' : 'solar:star-line-duotone'"
+                  :class="['text-lg', i <= currentDetail.rating ? 'text-amber-400' : 'text-gray-200']"
+                />
+                <span :class="['ml-1 font-semibold', getRatingColor(currentDetail.rating)]">
+                  {{ currentDetail.rating }} / 5
+                </span>
+              </div>
+            </el-descriptions-item>
+            <el-descriptions-item label="评价内容" :span="2">
+              {{ currentDetail.content || '（无文字评价）' }}
+            </el-descriptions-item>
+            <el-descriptions-item label="评价时间" :span="2">{{ currentDetail.created_at || '-' }}</el-descriptions-item>
+          </el-descriptions>
+          <!-- 照片 -->
+          <div v-if="currentDetail.photos && currentDetail.photos.length" class="mt-4">
+            <p class="text-sm text-gray-500 mb-2">评价照片（{{ currentDetail.photos.length }} 张）</p>
+            <div class="flex flex-wrap gap-2">
+              <el-image
+                v-for="(src, idx) in currentDetail.photos"
+                :key="idx"
+                :src="src"
+                :preview-src-list="currentDetail.photos"
+                :initial-index="idx"
+                fit="cover"
+                class="w-20 h-20 rounded-lg object-cover cursor-pointer"
+              />
+            </div>
+          </div>
+        </template>
+      </div>
+      <template #footer>
+        <el-button @click="detailVisible = false">关闭</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
diff --git a/frontend/src/views/meal/templates/index.vue b/frontend/src/views/meal/templates/index.vue
new file mode 100644
index 0000000..1cc2ea1
--- /dev/null
+++ b/frontend/src/views/meal/templates/index.vue
@@ -0,0 +1,190 @@
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Icon } from '@iconify/vue'
+import { mealTemplateApi } from '@/api/meal.js'
+
+const tableData = ref([])
+const total = ref(0)
+const loading = ref(false)
+const dialogVisible = ref(false)
+const submitLoading = ref(false)
+
+const searchForm = reactive({ name: '' })
+const pagination = reactive({ page: 1, per_page: 20 })
+
+const formRef = ref(null)
+const form = reactive({
+  id: null, name: '', description: '', week_num: 1, status: 1
+})
+const isEdit = ref(false)
+
+const weekOptions = Array.from({ length: 6 }, (_, i) => ({ label: `第 ${i + 1} 周`, value: i + 1 }))
+const statusMap = { 1: '启用', 0: '停用' }
+
+const formRules = {
+  name: [{ required: true, message: '请输入模板名称', trigger: 'blur' }],
+  week_num: [{ required: true, message: '请选择适用周数', trigger: 'change' }]
+}
+
+async function fetchList() {
+  loading.value = true
+  try {
+    const res = await mealTemplateApi.getList({ ...searchForm, ...pagination })
+    tableData.value = res.data?.list || res.data?.data || []
+    total.value = res.data?.total || 0
+  } catch {
+    ElMessage.error('加载失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+function handleSearch() { pagination.page = 1; fetchList() }
+function handleReset() { Object.assign(searchForm, { name: '' }); handleSearch() }
+
+function handleAdd() {
+  isEdit.value = false
+  Object.assign(form, { id: null, name: '', description: '', week_num: 1, status: 1 })
+  dialogVisible.value = true
+}
+
+async function handleEdit(row) {
+  isEdit.value = true
+  try {
+    const res = await mealTemplateApi.getDetail(row.id)
+    const data = res.data?.data || res.data || row
+    Object.assign(form, {
+      id: data.id, name: data.name, description: data.description || '',
+      week_num: data.week_num, status: data.status ?? 1
+    })
+  } catch {
+    Object.assign(form, { id: row.id, name: row.name, description: row.description || '', week_num: row.week_num, status: row.status ?? 1 })
+  }
+  dialogVisible.value = true
+}
+
+async function handleDelete(row) {
+  await ElMessageBox.confirm(`确定删除模板「${row.name}」吗？`, '删除确认', { type: 'warning' })
+  try {
+    await mealTemplateApi.delete(row.id)
+    ElMessage.success('删除成功')
+    fetchList()
+  } catch {
+    ElMessage.error('删除失败')
+  }
+}
+
+async function handleSubmit() {
+  if (!formRef.value) return
+  await formRef.value.validate(async (valid) => {
+    if (!valid) return
+    submitLoading.value = true
+    try {
+      if (isEdit.value) {
+        await mealTemplateApi.update(form.id, form)
+      } else {
+        await mealTemplateApi.create(form)
+      }
+      ElMessage.success(isEdit.value ? '更新成功' : '创建成功')
+      dialogVisible.value = false
+      fetchList()
+    } catch {
+      ElMessage.error('操作失败')
+    } finally {
+      submitLoading.value = false
+    }
+  })
+}
+
+function handlePageChange(val) { pagination.page = val; fetchList() }
+function handleSizeChange(val) { pagination.per_page = val; pagination.page = 1; fetchList() }
+
+onMounted(() => fetchList())
+</script>
+
+<template>
+  <div class="p-6 space-y-4">
+    <!-- 搜索栏 -->
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-4 flex items-center flex-wrap gap-3">
+      <el-input v-model="searchForm.name" placeholder="模板名称" clearable style="width:200px" />
+      <el-button type="primary" @click="handleSearch">
+        <Icon icon="solar:magnifer-bold-duotone" class="mr-1" />查询
+      </el-button>
+      <el-button @click="handleReset">重置</el-button>
+    </div>
+
+    <!-- 表格区 -->
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm">
+      <div class="flex items-center justify-between px-5 py-4 border-b border-gray-50">
+        <div class="flex items-center gap-2">
+          <span class="w-1 h-5 bg-rose-500 rounded-full inline-block"></span>
+          <span class="font-semibold text-gray-700">排餐模板管理</span>
+        </div>
+        <el-button type="primary" @click="handleAdd">
+          <Icon icon="solar:add-circle-bold-duotone" class="mr-1" />新建模板
+        </el-button>
+      </div>
+      <div class="px-2">
+        <el-table v-loading="loading" :data="tableData" style="width:100%">
+          <el-table-column prop="name" label="模板名称" min-width="160" />
+          <el-table-column label="适用周数" width="100" align="center">
+            <template #default="{ row }">第 {{ row.week_num }} 周</template>
+          </el-table-column>
+          <el-table-column prop="description" label="描述" min-width="200" show-overflow-tooltip />
+          <el-table-column label="状态" width="80" align="center">
+            <template #default="{ row }">
+              <el-tag :type="row.status === 1 ? 'success' : 'info'" size="small">{{ statusMap[row.status] }}</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column prop="created_at" label="创建时间" min-width="160" />
+          <el-table-column label="操作" width="140" fixed="right" align="center">
+            <template #default="{ row }">
+              <el-button size="small" type="primary" text @click="handleEdit(row)">编辑</el-button>
+              <el-button size="small" type="danger" text @click="handleDelete(row)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="px-5 py-3 border-t border-gray-50">
+        <el-pagination
+          v-model:current-page="pagination.page"
+          v-model:page-size="pagination.per_page"
+          :total="total"
+          :page-sizes="[10, 20, 50]"
+          layout="total,sizes,prev,pager,next,jumper"
+          background
+          @current-change="handlePageChange"
+          @size-change="handleSizeChange"
+        />
+      </div>
+    </div>
+
+    <!-- 新建/编辑弹窗 -->
+    <el-dialog v-model="dialogVisible" :title="isEdit ? '编辑模板' : '新建排餐模板'" width="520px" destroy-on-close>
+      <el-form ref="formRef" :model="form" :rules="formRules" label-width="90px">
+        <el-form-item label="模板名称" prop="name">
+          <el-input v-model="form.name" placeholder="如：产后第1周营养餐模板" />
+        </el-form-item>
+        <el-form-item label="适用周数" prop="week_num">
+          <el-select v-model="form.week_num" style="width:100%">
+            <el-option v-for="w in weekOptions" :key="w.value" :label="w.label" :value="w.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="状态">
+          <el-radio-group v-model="form.status">
+            <el-radio :label="1">启用</el-radio>
+            <el-radio :label="0">停用</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="模板描述">
+          <el-input v-model="form.description" type="textarea" :rows="3" placeholder="简要说明此模板的膳食方向和特点" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" :loading="submitLoading" @click="handleSubmit">确定</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
diff --git a/frontend/src/views/nanny/nannies/index.vue b/frontend/src/views/nanny/nannies/index.vue
index 1f9c555..0fdbe40 100644
--- a/frontend/src/views/nanny/nannies/index.vue
+++ b/frontend/src/views/nanny/nannies/index.vue
@@ -62,31 +62,40 @@ onMounted(() => fetchList())
 </script>
 
 <template>
-  <div class="page-container">
-    <div class="search-bar">
+  <div class="p-6 space-y-4">
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-4 flex items-center flex-wrap gap-3">
       <el-input v-model="searchForm.name" placeholder="姓名" style="width:150px" clearable />
       <el-select v-model="searchForm.level" placeholder="等级" clearable style="width:120px"><el-option v-for="(v,k) in levelMap" :key="k" :label="v" :value="Number(k)" /></el-select>
       <el-select v-model="searchForm.status" placeholder="状态" clearable style="width:120px"><el-option v-for="(v,k) in statusMap" :key="k" :label="v" :value="Number(k)" /></el-select>
       <el-button type="primary" @click="handleSearch">查询</el-button>
       <el-button @click="handleReset">重置</el-button>
     </div>
-    <div class="table-container">
-      <div class="table-actions"><el-button type="primary" @click="handleAdd">新增月嫂</el-button></div>
-      <el-table v-loading="loading" :data="tableData" border stripe>
-        <el-table-column prop="name" label="姓名" width="100" />
-        <el-table-column prop="phone" label="手机号" width="130" />
-        <el-table-column label="等级" width="80" align="center"><template #default="{ row }">{{ levelMap[row.level] || '-' }}</template></el-table-column>
-        <el-table-column prop="experience_years" label="经验(年)" width="90" align="center" />
-        <el-table-column prop="daily_price" label="日价(元)" width="100" align="right" />
-        <el-table-column label="状态" width="80" align="center"><template #default="{ row }"><el-tag :type="statusType[row.status]" size="small">{{ statusMap[row.status] }}</el-tag></template></el-table-column>
-        <el-table-column label="操作" width="160" fixed="right" align="center">
-          <template #default="{ row }">
-            <el-button size="small" type="primary" link @click="handleEdit(row)">编辑</el-button>
-            <el-button size="small" type="danger" link @click="handleDelete(row)">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-      <el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.per_page" :total="total" :page-sizes="[15,30,50]" layout="total,sizes,prev,pager,next,jumper" background @current-change="handlePageChange" @size-change="handleSizeChange" />
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm">
+      <div class="flex items-center justify-between px-5 py-4 border-b border-gray-50">
+        <div class="flex items-center gap-3">
+          <span class="font-medium text-gray-700">月嫂列表</span>
+        </div>
+        <el-button type="primary" @click="handleAdd">新增月嫂</el-button>
+      </div>
+      <div class="px-2">
+        <el-table v-loading="loading" :data="tableData" style="width:100%">
+          <el-table-column prop="name" label="姓名" width="100" />
+          <el-table-column prop="phone" label="手机号" width="130" />
+          <el-table-column label="等级" width="80" align="center"><template #default="{ row }">{{ levelMap[row.level] || '-' }}</template></el-table-column>
+          <el-table-column prop="experience_years" label="经验(年)" width="90" align="center" />
+          <el-table-column prop="daily_price" label="日价(元)" width="100" align="right" />
+          <el-table-column label="状态" width="80" align="center"><template #default="{ row }"><el-tag :type="statusType[row.status]" size="small">{{ statusMap[row.status] }}</el-tag></template></el-table-column>
+          <el-table-column label="操作" width="160" fixed="right" align="center">
+            <template #default="{ row }">
+              <el-button size="small" type="primary" text @click="handleEdit(row)">编辑</el-button>
+              <el-button size="small" type="danger" text @click="handleDelete(row)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="px-5 py-3 border-t border-gray-50">
+        <el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.per_page" :total="total" :page-sizes="[15,30,50]" layout="total,sizes,prev,pager,next,jumper" background @current-change="handlePageChange" @size-change="handleSizeChange" />
+      </div>
     </div>
     <el-dialog v-model="dialogVisible" :title="isEdit?'编辑月嫂':'新增月嫂'" width="550px" destroy-on-close>
       <el-form ref="formRef" :model="form" :rules="formRules" label-width="90px">
diff --git a/frontend/src/views/nanny/orders/index.vue b/frontend/src/views/nanny/orders/index.vue
index 03ea04d..d046355 100644
--- a/frontend/src/views/nanny/orders/index.vue
+++ b/frontend/src/views/nanny/orders/index.vue
@@ -62,32 +62,41 @@ onMounted(() => fetchList())
 </script>
 
 <template>
-  <div class="page-container">
-    <div class="search-bar">
+  <div class="p-6 space-y-4">
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-4 flex items-center flex-wrap gap-3">
       <el-input v-model="searchForm.order_no" placeholder="订单号" style="width:180px" clearable />
       <el-select v-model="searchForm.status" placeholder="状态" clearable style="width:120px"><el-option v-for="(v,k) in statusMap" :key="k" :label="v" :value="Number(k)" /></el-select>
       <el-button type="primary" @click="handleSearch">查询</el-button>
       <el-button @click="handleReset">重置</el-button>
     </div>
-    <div class="table-container">
-      <div class="table-actions"><el-button type="primary" @click="handleAdd">新增订单</el-button></div>
-      <el-table v-loading="loading" :data="tableData" border stripe>
-        <el-table-column prop="order_no" label="订单号" min-width="160" />
-        <el-table-column label="客户" min-width="100"><template #default="{ row }">{{ row.customer?.name || '-' }}</template></el-table-column>
-        <el-table-column label="月嫂" width="100"><template #default="{ row }">{{ row.nanny?.name || '待匹配' }}</template></el-table-column>
-        <el-table-column label="服务类型" width="90"><template #default="{ row }">{{ serviceTypeMap[row.service_type] || '-' }}</template></el-table-column>
-        <el-table-column prop="start_date" label="开始日期" width="110" />
-        <el-table-column prop="days" label="天数" width="70" align="center" />
-        <el-table-column prop="price" label="费用(元)" width="100" align="right" />
-        <el-table-column label="状态" width="90" align="center"><template #default="{ row }"><el-tag :type="statusType[row.status]" size="small">{{ statusMap[row.status] }}</el-tag></template></el-table-column>
-        <el-table-column label="操作" width="160" fixed="right" align="center">
-          <template #default="{ row }">
-            <el-button v-if="row.status<4" size="small" type="primary" link @click="handleEdit(row)">编辑</el-button>
-            <el-button v-if="row.status<2" size="small" type="danger" link @click="handleDelete(row)">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-      <el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.per_page" :total="total" :page-sizes="[15,30,50]" layout="total,sizes,prev,pager,next,jumper" background @current-change="handlePageChange" @size-change="handleSizeChange" />
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm">
+      <div class="flex items-center justify-between px-5 py-4 border-b border-gray-50">
+        <div class="flex items-center gap-3">
+          <span class="font-medium text-gray-700">月嫂订单列表</span>
+        </div>
+        <el-button type="primary" @click="handleAdd">新增订单</el-button>
+      </div>
+      <div class="px-2">
+        <el-table v-loading="loading" :data="tableData" style="width:100%">
+          <el-table-column prop="order_no" label="订单号" min-width="160" />
+          <el-table-column label="客户" min-width="100"><template #default="{ row }">{{ row.customer?.name || '-' }}</template></el-table-column>
+          <el-table-column label="月嫂" width="100"><template #default="{ row }">{{ row.nanny?.name || '待匹配' }}</template></el-table-column>
+          <el-table-column label="服务类型" width="90"><template #default="{ row }">{{ serviceTypeMap[row.service_type] || '-' }}</template></el-table-column>
+          <el-table-column prop="start_date" label="开始日期" width="110" />
+          <el-table-column prop="days" label="天数" width="70" align="center" />
+          <el-table-column prop="price" label="费用(元)" width="100" align="right" />
+          <el-table-column label="状态" width="90" align="center"><template #default="{ row }"><el-tag :type="statusType[row.status]" size="small">{{ statusMap[row.status] }}</el-tag></template></el-table-column>
+          <el-table-column label="操作" width="160" fixed="right" align="center">
+            <template #default="{ row }">
+              <el-button v-if="row.status<4" size="small" type="primary" text @click="handleEdit(row)">编辑</el-button>
+              <el-button v-if="row.status<2" size="small" type="danger" text @click="handleDelete(row)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="px-5 py-3 border-t border-gray-50">
+        <el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.per_page" :total="total" :page-sizes="[15,30,50]" layout="total,sizes,prev,pager,next,jumper" background @current-change="handlePageChange" @size-change="handleSizeChange" />
+      </div>
     </div>
     <el-dialog v-model="dialogVisible" :title="isEdit?'编辑订单':'新增订单'" width="550px" destroy-on-close>
       <el-form ref="formRef" :model="form" :rules="formRules" label-width="90px">
diff --git a/frontend/src/views/nanny/schedules/index.vue b/frontend/src/views/nanny/schedules/index.vue
index a1c7690..648e1b4 100644
--- a/frontend/src/views/nanny/schedules/index.vue
+++ b/frontend/src/views/nanny/schedules/index.vue
@@ -48,24 +48,33 @@ onMounted(() => { fetchList(); fetchNannies() })
 </script>
 
 <template>
-  <div class="page-container">
-    <div class="search-bar">
+  <div class="p-6 space-y-4">
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-4 flex items-center flex-wrap gap-3">
       <el-select v-model="searchForm.nanny_id" placeholder="选择月嫂" clearable style="width:160px"><el-option v-for="n in nannies" :key="n.id" :label="n.name" :value="n.id" /></el-select>
       <el-date-picker v-model="searchForm.start_date" type="date" value-format="YYYY-MM-DD" placeholder="开始日期" />
       <el-date-picker v-model="searchForm.end_date" type="date" value-format="YYYY-MM-DD" placeholder="结束日期" />
       <el-button type="primary" @click="handleSearch">查询</el-button>
       <el-button @click="handleReset">重置</el-button>
     </div>
-    <div class="table-container">
-      <div class="table-actions"><el-button type="primary" @click="handleAdd">新增排班</el-button></div>
-      <el-table v-loading="loading" :data="tableData" border stripe>
-        <el-table-column label="月嫂" min-width="100"><template #default="{ row }">{{ row.nanny?.name || '-' }}</template></el-table-column>
-        <el-table-column prop="schedule_date" label="日期" width="120" />
-        <el-table-column label="类型" width="90" align="center"><template #default="{ row }"><el-tag :type="typeType[row.type]" size="small">{{ typeMap[row.type] }}</el-tag></template></el-table-column>
-        <el-table-column label="关联订单" min-width="120"><template #default="{ row }">{{ row.order?.order_no || '-' }}</template></el-table-column>
-        <el-table-column prop="remark" label="备注" min-width="150" />
-      </el-table>
-      <el-pagination v-model:current-page="pagination.page" :total="total" layout="total,prev,pager,next" background @current-change="handlePageChange" />
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm">
+      <div class="flex items-center justify-between px-5 py-4 border-b border-gray-50">
+        <div class="flex items-center gap-3">
+          <span class="font-medium text-gray-700">排班记录</span>
+        </div>
+        <el-button type="primary" @click="handleAdd">新增排班</el-button>
+      </div>
+      <div class="px-2">
+        <el-table v-loading="loading" :data="tableData" style="width:100%">
+          <el-table-column label="月嫂" min-width="100"><template #default="{ row }">{{ row.nanny?.name || '-' }}</template></el-table-column>
+          <el-table-column prop="schedule_date" label="日期" width="120" />
+          <el-table-column label="类型" width="90" align="center"><template #default="{ row }"><el-tag :type="typeType[row.type]" size="small">{{ typeMap[row.type] }}</el-tag></template></el-table-column>
+          <el-table-column label="关联订单" min-width="120"><template #default="{ row }">{{ row.order?.order_no || '-' }}</template></el-table-column>
+          <el-table-column prop="remark" label="备注" min-width="150" />
+        </el-table>
+      </div>
+      <div class="px-5 py-3 border-t border-gray-50">
+        <el-pagination v-model:current-page="pagination.page" :total="total" layout="total,prev,pager,next" background @current-change="handlePageChange" />
+      </div>
     </div>
     <el-dialog v-model="dialogVisible" title="新增排班" width="450px" destroy-on-close>
       <el-form label-width="80px">
diff --git a/frontend/src/views/office/announcements/index.vue b/frontend/src/views/office/announcements/index.vue
index 7c0d568..dc54737 100644
--- a/frontend/src/views/office/announcements/index.vue
+++ b/frontend/src/views/office/announcements/index.vue
@@ -78,8 +78,8 @@ onMounted(() => { fetchList() })
 </script>
 
 <template>
-  <div class="page-container">
-    <div class="search-bar">
+  <div class="p-6 space-y-4">
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-4 flex items-center flex-wrap gap-3">
       <el-select v-model="searchForm.type" placeholder="类型" clearable style="width:120px">
         <el-option v-for="(v, k) in typeMap" :key="k" :label="v" :value="Number(k)" />
       </el-select>
@@ -89,38 +89,45 @@ onMounted(() => { fetchList() })
       <el-button type="primary" @click="handleSearch">查询</el-button>
       <el-button @click="handleReset">重置</el-button>
     </div>
-    <div class="table-container">
-      <div class="table-actions">
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm">
+      <div class="flex items-center justify-between px-5 py-4 border-b border-gray-50">
+        <div class="flex items-center gap-3">
+          <span class="font-medium text-gray-700">公告列表</span>
+        </div>
         <el-button type="primary" @click="handleAdd">新增公告</el-button>
       </div>
-      <el-table v-loading="loading" :data="tableData" border stripe style="width:100%">
-        <el-table-column prop="title" label="标题" min-width="200" show-overflow-tooltip />
-        <el-table-column label="类型" width="90" align="center">
-          <template #default="{ row }">
-            <el-tag :type="typeTagType[row.type]" size="small">{{ typeMap[row.type] }}</el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column label="置顶" width="70" align="center">
-          <template #default="{ row }">{{ row.is_top ? '是' : '否' }}</template>
-        </el-table-column>
-        <el-table-column label="发布状态" width="100" align="center">
-          <template #default="{ row }">
-            <el-tag :type="publishStatusType[row.publish_status]" size="small">{{ publishStatusMap[row.publish_status] }}</el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column label="作者" min-width="100">
-          <template #default="{ row }">{{ row.author?.name || '-' }}</template>
-        </el-table-column>
-        <el-table-column prop="published_at" label="发布时间" min-width="160" />
-        <el-table-column label="操作" width="200" fixed="right" align="center">
-          <template #default="{ row }">
-            <el-button v-if="row.publish_status === 0" size="small" type="success" link @click="handlePublish(row)">发布</el-button>
-            <el-button v-if="row.publish_status === 0" size="small" type="primary" link @click="handleEdit(row)">编辑</el-button>
-            <el-button v-if="row.publish_status === 0" size="small" type="danger" link @click="handleDelete(row)">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-      <el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.per_page" :total="total" :page-sizes="[10,20,50]" layout="total,sizes,prev,pager,next,jumper" background @current-change="handlePageChange" @size-change="handleSizeChange" />
+      <div class="px-2">
+        <el-table v-loading="loading" :data="tableData" style="width:100%">
+          <el-table-column prop="title" label="标题" min-width="200" show-overflow-tooltip />
+          <el-table-column label="类型" width="90" align="center">
+            <template #default="{ row }">
+              <el-tag :type="typeTagType[row.type]" size="small">{{ typeMap[row.type] }}</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="置顶" width="70" align="center">
+            <template #default="{ row }">{{ row.is_top ? '是' : '否' }}</template>
+          </el-table-column>
+          <el-table-column label="发布状态" width="100" align="center">
+            <template #default="{ row }">
+              <el-tag :type="publishStatusType[row.publish_status]" size="small">{{ publishStatusMap[row.publish_status] }}</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="作者" min-width="100">
+            <template #default="{ row }">{{ row.author?.name || '-' }}</template>
+          </el-table-column>
+          <el-table-column prop="published_at" label="发布时间" min-width="160" />
+          <el-table-column label="操作" width="200" fixed="right" align="center">
+            <template #default="{ row }">
+              <el-button v-if="row.publish_status === 0" size="small" type="success" text @click="handlePublish(row)">发布</el-button>
+              <el-button v-if="row.publish_status === 0" size="small" type="primary" text @click="handleEdit(row)">编辑</el-button>
+              <el-button v-if="row.publish_status === 0" size="small" type="danger" text @click="handleDelete(row)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="px-5 py-3 border-t border-gray-50">
+        <el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.per_page" :total="total" :page-sizes="[10,20,50]" layout="total,sizes,prev,pager,next,jumper" background @current-change="handlePageChange" @size-change="handleSizeChange" />
+      </div>
     </div>
     <el-dialog v-model="dialogVisible" :title="isEdit ? '编辑公告' : '新增公告'" width="600px" destroy-on-close>
       <el-form ref="formRef" :model="form" :rules="formRules" label-width="80px">
diff --git a/frontend/src/views/office/approval-templates/index.vue b/frontend/src/views/office/approval-templates/index.vue
index b4141e4..c79cf6e 100644
--- a/frontend/src/views/office/approval-templates/index.vue
+++ b/frontend/src/views/office/approval-templates/index.vue
@@ -102,8 +102,8 @@ onMounted(() => { fetchList() })
 </script>
 
 <template>
-  <div class="page-container">
-    <div class="search-bar">
+  <div class="p-6 space-y-4">
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-4 flex items-center flex-wrap gap-3">
       <el-select v-model="searchForm.type" placeholder="模板类型" clearable style="width:140px">
         <el-option v-for="(v, k) in typeMap" :key="k" :label="v" :value="Number(k)" />
       </el-select>
@@ -115,31 +115,38 @@ onMounted(() => { fetchList() })
       <el-button @click="handleReset">重置</el-button>
     </div>
 
-    <div class="table-container">
-      <div class="table-actions">
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm">
+      <div class="flex items-center justify-between px-5 py-4 border-b border-gray-50">
+        <div class="flex items-center gap-3">
+          <span class="font-medium text-gray-700">审批模板列表</span>
+        </div>
         <el-button type="primary" @click="handleAdd">新增模板</el-button>
       </div>
-      <el-table v-loading="loading" :data="tableData" border stripe style="width:100%">
-        <el-table-column prop="name" label="模板名称" min-width="160" />
-        <el-table-column label="类型" width="100" align="center">
-          <template #default="{ row }">
-            <el-tag size="small">{{ typeMap[row.type] || '-' }}</el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column label="状态" width="90" align="center">
-          <template #default="{ row }">
-            <el-tag :type="row.status === 1 ? 'success' : 'info'" size="small">{{ row.status === 1 ? '启用' : '停用' }}</el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column prop="sort" label="排序" width="80" align="center" />
-        <el-table-column label="操作" width="160" fixed="right" align="center">
-          <template #default="{ row }">
-            <el-button size="small" type="primary" link @click="handleEdit(row)">编辑</el-button>
-            <el-button size="small" type="danger" link @click="handleDelete(row)">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-      <el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.per_page" :total="total" :page-sizes="[10,20,50]" layout="total,sizes,prev,pager,next,jumper" background @current-change="handlePageChange" @size-change="handleSizeChange" />
+      <div class="px-2">
+        <el-table v-loading="loading" :data="tableData" style="width:100%">
+          <el-table-column prop="name" label="模板名称" min-width="160" />
+          <el-table-column label="类型" width="100" align="center">
+            <template #default="{ row }">
+              <el-tag size="small">{{ typeMap[row.type] || '-' }}</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="状态" width="90" align="center">
+            <template #default="{ row }">
+              <el-tag :type="row.status === 1 ? 'success' : 'info'" size="small">{{ row.status === 1 ? '启用' : '停用' }}</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column prop="sort" label="排序" width="80" align="center" />
+          <el-table-column label="操作" width="160" fixed="right" align="center">
+            <template #default="{ row }">
+              <el-button size="small" type="primary" text @click="handleEdit(row)">编辑</el-button>
+              <el-button size="small" type="danger" text @click="handleDelete(row)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="px-5 py-3 border-t border-gray-50">
+        <el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.per_page" :total="total" :page-sizes="[10,20,50]" layout="total,sizes,prev,pager,next,jumper" background @current-change="handlePageChange" @size-change="handleSizeChange" />
+      </div>
     </div>
 
     <el-dialog v-model="dialogVisible" :title="dialogTitle" width="600px" destroy-on-close>
diff --git a/frontend/src/views/office/approvals/index.vue b/frontend/src/views/office/approvals/index.vue
index 0db6473..d692edf 100644
--- a/frontend/src/views/office/approvals/index.vue
+++ b/frontend/src/views/office/approvals/index.vue
@@ -1,12 +1,14 @@
 <script setup>
 import { ref, reactive, onMounted } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import { approvalApi } from '@/api/office.js'
+import { approvalApi, approvalTemplateApi } from '@/api/office.js'
 
 const tableData = ref([])
 const total = ref(0)
 const loading = ref(false)
 const dialogVisible = ref(false)
+const detailVisible = ref(false)
+const rejectDialogVisible = ref(false)
 const submitLoading = ref(false)
 
 const searchForm = reactive({ status: '' })
@@ -14,9 +16,15 @@ const pagination = reactive({ page: 1, per_page: 20 })
 
 const formRef = ref(null)
 const form = reactive({ title: '', template_id: '', form_data: '' })
+const templates = ref([])
+
+const currentDetail = ref(null)
+const rejectForm = reactive({ comment: '' })
+const rejectTargetRow = ref(null)
 
 const statusMap = { 0: '待审批', 1: '审批中', 2: '已通过', 3: '已驳回', 4: '已撤回' }
 const statusType = { 0: 'warning', 1: 'primary', 2: 'success', 3: 'danger', 4: 'info' }
+const nodeActionMap = { 0: '待处理', 1: '已通过', 2: '已驳回' }
 
 const formRules = {
   title: [{ required: true, message: '请输入审批标题', trigger: 'blur' }]
@@ -31,6 +39,13 @@ async function fetchList() {
   } finally { loading.value = false }
 }
 
+async function fetchTemplates() {
+  try {
+    const res = await approvalTemplateApi.getList({ per_page: 100, status: 1 })
+    templates.value = res.data?.list || res.data?.data || []
+  } catch { /* ignore */ }
+}
+
 function handleSearch() { pagination.page = 1; fetchList() }
 function handleReset() {
   Object.assign(searchForm, { status: '' })
@@ -52,25 +67,43 @@ async function handleSubmit() {
       if (payload.form_data) {
         try { payload.form_data = JSON.parse(payload.form_data) } catch { /* keep string */ }
       }
+      if (!payload.template_id) delete payload.template_id
       await approvalApi.create(payload)
-      ElMessage.success('提交成功')
+      ElMessage.success('提交成功，审批节点已自动创建')
       dialogVisible.value = false
       fetchList()
     } finally { submitLoading.value = false }
   })
 }
 
+async function handleShowDetail(row) {
+  try {
+    const res = await approvalApi.getDetail(row.id)
+    currentDetail.value = res.data
+    detailVisible.value = true
+  } catch {
+    ElMessage.error('加载详情失败')
+  }
+}
+
 async function handleApprove(row) {
-  await ElMessageBox.confirm('确定通过该审批吗？', '审批确认', { type: 'warning' })
-  await approvalApi.approve(row.id, { status: 2 })
+  await ElMessageBox.confirm('确定通过该审批节点吗？', '审批确认', { type: 'warning' })
+  await approvalApi.approve(row.id, {})
   ElMessage.success('审批已通过')
   fetchList()
 }
 
-async function handleReject(row) {
-  await ElMessageBox.confirm('确定驳回该审批吗？', '驳回确认', { type: 'warning' })
-  await approvalApi.reject(row.id, { status: 3 })
+function handleRejectOpen(row) {
+  rejectTargetRow.value = row
+  rejectForm.comment = ''
+  rejectDialogVisible.value = true
+}
+
+async function handleRejectSubmit() {
+  if (!rejectTargetRow.value) return
+  await approvalApi.reject(rejectTargetRow.value.id, { comment: rejectForm.comment })
   ElMessage.success('审批已驳回')
+  rejectDialogVisible.value = false
   fetchList()
 }
 
@@ -81,15 +114,30 @@ async function handleWithdraw(row) {
   fetchList()
 }
 
+function getStepStatus(node, currentNode) {
+  if (node.node_order < currentNode) {
+    return node.action === 2 ? 'error' : 'finish'
+  }
+  if (node.node_order === currentNode) {
+    return node.action === 0 ? 'process' : node.action === 1 ? 'finish' : 'error'
+  }
+  return 'wait'
+}
+
+function sortedNodes(nodes) {
+  return [...(nodes || [])].sort((a, b) => a.node_order - b.node_order)
+}
+
 function handlePageChange(val) { pagination.page = val; fetchList() }
 function handleSizeChange(val) { pagination.per_page = val; pagination.page = 1; fetchList() }
 
-onMounted(() => { fetchList() })
+onMounted(() => { fetchList(); fetchTemplates() })
 </script>
 
 <template>
-  <div class="page-container">
-    <div class="search-bar">
+  <div class="p-6 space-y-4">
+    <!-- 搜索栏 -->
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-4 flex items-center flex-wrap gap-3">
       <el-select v-model="searchForm.status" placeholder="审批状态" clearable style="width:140px">
         <el-option v-for="(v, k) in statusMap" :key="k" :label="v" :value="Number(k)" />
       </el-select>
@@ -97,47 +145,73 @@ onMounted(() => { fetchList() })
       <el-button @click="handleReset">重置</el-button>
     </div>
 
-    <div class="table-container">
-      <div class="table-actions">
+    <!-- 列表 -->
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm">
+      <div class="flex items-center justify-between px-5 py-4 border-b border-gray-50">
+        <span class="font-medium text-gray-700">审批列表</span>
         <el-button type="primary" @click="handleAdd">发起审批</el-button>
       </div>
-      <el-table v-loading="loading" :data="tableData" border stripe style="width:100%">
-        <el-table-column prop="title" label="标题" min-width="180" show-overflow-tooltip />
-        <el-table-column label="申请人" min-width="100">
-          <template #default="{ row }">{{ row.applicant?.name || '-' }}</template>
-        </el-table-column>
-        <el-table-column label="审批模板" min-width="120">
-          <template #default="{ row }">{{ row.template?.name || '-' }}</template>
-        </el-table-column>
-        <el-table-column label="状态" width="100" align="center">
-          <template #default="{ row }">
-            <el-tag :type="statusType[row.status]" size="small">{{ statusMap[row.status] }}</el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column prop="created_at" label="创建时间" min-width="160" />
-        <el-table-column label="操作" width="200" fixed="right" align="center">
-          <template #default="{ row }">
-            <template v-if="row.status <= 1">
-              <el-button size="small" type="success" link @click="handleApprove(row)">通过</el-button>
-              <el-button size="small" type="danger" link @click="handleReject(row)">驳回</el-button>
-              <el-button size="small" type="warning" link @click="handleWithdraw(row)">撤回</el-button>
+      <div class="px-2">
+        <el-table v-loading="loading" :data="tableData" style="width:100%">
+          <el-table-column label="标题" min-width="200">
+            <template #default="{ row }">
+              <el-button type="primary" link @click="handleShowDetail(row)">{{ row.title }}</el-button>
             </template>
-          </template>
-        </el-table-column>
-      </el-table>
-      <el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.per_page" :total="total" :page-sizes="[10,20,50]" layout="total,sizes,prev,pager,next,jumper" background @current-change="handlePageChange" @size-change="handleSizeChange" />
+          </el-table-column>
+          <el-table-column label="申请人" min-width="100">
+            <template #default="{ row }">{{ row.applicant?.name || '-' }}</template>
+          </el-table-column>
+          <el-table-column label="审批模板" min-width="120">
+            <template #default="{ row }">{{ row.template?.name || '无模板' }}</template>
+          </el-table-column>
+          <el-table-column label="当前节点" width="90" align="center">
+            <template #default="{ row }">第 {{ row.current_node || 1 }} 级</template>
+          </el-table-column>
+          <el-table-column label="状态" width="100" align="center">
+            <template #default="{ row }">
+              <el-tag :type="statusType[row.status]" size="small">{{ statusMap[row.status] }}</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column prop="created_at" label="创建时间" min-width="160" />
+          <el-table-column label="操作" width="230" fixed="right" align="center">
+            <template #default="{ row }">
+              <el-button size="small" text @click="handleShowDetail(row)">详情</el-button>
+              <template v-if="row.status <= 1">
+                <el-button size="small" type="success" text @click="handleApprove(row)">通过</el-button>
+                <el-button size="small" type="danger" text @click="handleRejectOpen(row)">驳回</el-button>
+                <el-button size="small" type="warning" text @click="handleWithdraw(row)">撤回</el-button>
+              </template>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="px-5 py-3 border-t border-gray-50">
+        <el-pagination
+          v-model:current-page="pagination.page"
+          v-model:page-size="pagination.per_page"
+          :total="total"
+          :page-sizes="[10,20,50]"
+          layout="total,sizes,prev,pager,next,jumper"
+          background
+          @current-change="handlePageChange"
+          @size-change="handleSizeChange"
+        />
+      </div>
     </div>
 
+    <!-- 发起审批弹窗 -->
     <el-dialog v-model="dialogVisible" title="发起审批" width="600px" destroy-on-close>
       <el-form ref="formRef" :model="form" :rules="formRules" label-width="100px">
         <el-form-item label="审批标题" prop="title">
           <el-input v-model="form.title" placeholder="请输入审批标题" />
         </el-form-item>
         <el-form-item label="审批模板">
-          <el-input v-model="form.template_id" placeholder="请输入模板ID" />
+          <el-select v-model="form.template_id" placeholder="请选择审批模板（可选，选择后自动生成多级审批节点）" clearable style="width:100%">
+            <el-option v-for="t in templates" :key="t.id" :label="t.name" :value="t.id" />
+          </el-select>
         </el-form-item>
         <el-form-item label="表单数据">
-          <el-input v-model="form.form_data" type="textarea" :rows="4" placeholder="JSON格式" />
+          <el-input v-model="form.form_data" type="textarea" :rows="3" placeholder="JSON格式（可选）" />
         </el-form-item>
       </el-form>
       <template #footer>
@@ -145,5 +219,69 @@ onMounted(() => { fetchList() })
         <el-button type="primary" :loading="submitLoading" @click="handleSubmit">提交</el-button>
       </template>
     </el-dialog>
+
+    <!-- 审批详情弹窗（含多级节点进度） -->
+    <el-dialog v-model="detailVisible" title="审批详情" width="700px" destroy-on-close>
+      <template v-if="currentDetail">
+        <el-descriptions :column="2" border class="mb-5">
+          <el-descriptions-item label="审批标题" :span="2">{{ currentDetail.title }}</el-descriptions-item>
+          <el-descriptions-item label="申请人">{{ currentDetail.applicant?.name || '-' }}</el-descriptions-item>
+          <el-descriptions-item label="审批模板">{{ currentDetail.template?.name || '无模板' }}</el-descriptions-item>
+          <el-descriptions-item label="状态">
+            <el-tag :type="statusType[currentDetail.status]" size="small">{{ statusMap[currentDetail.status] }}</el-tag>
+          </el-descriptions-item>
+          <el-descriptions-item label="当前节点">第 {{ currentDetail.current_node || 1 }} 级</el-descriptions-item>
+          <el-descriptions-item label="创建时间" :span="2">{{ currentDetail.created_at }}</el-descriptions-item>
+        </el-descriptions>
+
+        <!-- 审批节点进度 -->
+        <div class="font-medium text-gray-700 mb-3">审批流程进度</div>
+        <div v-if="currentDetail.nodes && currentDetail.nodes.length">
+          <el-steps
+            direction="vertical"
+            :active="currentDetail.current_node"
+            space="80px"
+          >
+            <el-step
+              v-for="node in sortedNodes(currentDetail.nodes)"
+              :key="node.id"
+              :title="node.node_label || `第${node.node_order}级审批`"
+              :status="getStepStatus(node, currentDetail.current_node)"
+            >
+              <template #description>
+                <div class="text-sm space-y-1 py-1 text-gray-500">
+                  <div>审批人：<span class="text-gray-700">{{ node.approver?.name || (node.role ? `[${node.role}角色]` : '待指定') }}</span></div>
+                  <div>
+                    状态：
+                    <el-tag size="small" :type="node.action === 1 ? 'success' : node.action === 2 ? 'danger' : 'info'">
+                      {{ nodeActionMap[node.action] || '-' }}
+                    </el-tag>
+                  </div>
+                  <div v-if="node.comment">意见：<span class="text-gray-700">{{ node.comment }}</span></div>
+                  <div v-if="node.acted_at" class="text-xs text-gray-400">操作时间：{{ node.acted_at }}</div>
+                </div>
+              </template>
+            </el-step>
+          </el-steps>
+        </div>
+        <el-empty v-else description="暂无审批节点（提交后自动按模板生成）" :image-size="60" />
+      </template>
+      <template #footer>
+        <el-button @click="detailVisible = false">关闭</el-button>
+      </template>
+    </el-dialog>
+
+    <!-- 驳回意见弹窗 -->
+    <el-dialog v-model="rejectDialogVisible" title="驳回审批" width="460px" destroy-on-close>
+      <el-form label-width="80px">
+        <el-form-item label="驳回意见">
+          <el-input v-model="rejectForm.comment" type="textarea" :rows="3" placeholder="请输入驳回意见（可选）" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="rejectDialogVisible = false">取消</el-button>
+        <el-button type="danger" @click="handleRejectSubmit">确认驳回</el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>
diff --git a/frontend/src/views/office/handovers/index.vue b/frontend/src/views/office/handovers/index.vue
index 94faa02..434dadb 100644
--- a/frontend/src/views/office/handovers/index.vue
+++ b/frontend/src/views/office/handovers/index.vue
@@ -67,8 +67,8 @@ onMounted(() => { fetchList() })
 </script>
 
 <template>
-  <div class="page-container">
-    <div class="search-bar">
+  <div class="p-6 space-y-4">
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-4 flex items-center flex-wrap gap-3">
       <el-date-picker v-model="searchForm.shift_date" type="date" value-format="YYYY-MM-DD" placeholder="交接日期" clearable style="width:160px" />
       <el-select v-model="searchForm.shift_type" placeholder="班次" clearable style="width:120px">
         <el-option v-for="(v, k) in shiftTypeMap" :key="k" :label="v" :value="Number(k)" />
@@ -76,36 +76,43 @@ onMounted(() => { fetchList() })
       <el-button type="primary" @click="handleSearch">查询</el-button>
       <el-button @click="handleReset">重置</el-button>
     </div>
-    <div class="table-container">
-      <div class="table-actions">
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm">
+      <div class="flex items-center justify-between px-5 py-4 border-b border-gray-50">
+        <div class="flex items-center gap-3">
+          <span class="font-medium text-gray-700">交接记录列表</span>
+        </div>
         <el-button type="primary" @click="handleAdd">新增交接</el-button>
       </div>
-      <el-table v-loading="loading" :data="tableData" border stripe style="width:100%">
-        <el-table-column prop="shift_date" label="交接日期" width="120" />
-        <el-table-column label="班次" width="90" align="center">
-          <template #default="{ row }">
-            <el-tag :type="shiftTagType[row.shift_type]" size="small">{{ shiftTypeMap[row.shift_type] }}</el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column label="交班人" min-width="100">
-          <template #default="{ row }">{{ row.handover_user?.name || '-' }}</template>
-        </el-table-column>
-        <el-table-column label="接班人" min-width="100">
-          <template #default="{ row }">{{ row.receiver_user?.name || '待确认' }}</template>
-        </el-table-column>
-        <el-table-column prop="content" label="交接内容" min-width="200" show-overflow-tooltip />
-        <el-table-column label="状态" width="90" align="center">
-          <template #default="{ row }">
-            <el-tag :type="statusType[row.status]" size="small">{{ statusMap[row.status] }}</el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" width="120" fixed="right" align="center">
-          <template #default="{ row }">
-            <el-button v-if="row.status === 0" size="small" type="success" link @click="handleConfirm(row)">确认接班</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-      <el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.per_page" :total="total" :page-sizes="[10,20,50]" layout="total,sizes,prev,pager,next,jumper" background @current-change="handlePageChange" @size-change="handleSizeChange" />
+      <div class="px-2">
+        <el-table v-loading="loading" :data="tableData" style="width:100%">
+          <el-table-column prop="shift_date" label="交接日期" width="120" />
+          <el-table-column label="班次" width="90" align="center">
+            <template #default="{ row }">
+              <el-tag :type="shiftTagType[row.shift_type]" size="small">{{ shiftTypeMap[row.shift_type] }}</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="交班人" min-width="100">
+            <template #default="{ row }">{{ row.handover_user?.name || '-' }}</template>
+          </el-table-column>
+          <el-table-column label="接班人" min-width="100">
+            <template #default="{ row }">{{ row.receiver_user?.name || '待确认' }}</template>
+          </el-table-column>
+          <el-table-column prop="content" label="交接内容" min-width="200" show-overflow-tooltip />
+          <el-table-column label="状态" width="90" align="center">
+            <template #default="{ row }">
+              <el-tag :type="statusType[row.status]" size="small">{{ statusMap[row.status] }}</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" width="120" fixed="right" align="center">
+            <template #default="{ row }">
+              <el-button v-if="row.status === 0" size="small" type="success" text @click="handleConfirm(row)">确认接班</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="px-5 py-3 border-t border-gray-50">
+        <el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.per_page" :total="total" :page-sizes="[10,20,50]" layout="total,sizes,prev,pager,next,jumper" background @current-change="handlePageChange" @size-change="handleSizeChange" />
+      </div>
     </div>
     <el-dialog v-model="dialogVisible" title="新增交接记录" width="600px" destroy-on-close>
       <el-form ref="formRef" :model="form" :rules="formRules" label-width="90px">
diff --git a/frontend/src/views/office/notifications/index.vue b/frontend/src/views/office/notifications/index.vue
index da3d9e5..aacfd7a 100644
--- a/frontend/src/views/office/notifications/index.vue
+++ b/frontend/src/views/office/notifications/index.vue
@@ -48,9 +48,8 @@ onMounted(fetchList)
 </script>
 
 <template>
-  <div class="page-container">
-    <!-- Search -->
-    <div class="search-bar">
+  <div class="p-6 space-y-4">
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-4 flex items-center flex-wrap gap-3">
       <el-select v-model="searchForm.type" placeholder="通知类型" clearable style="width: 140px">
         <el-option v-for="(v, k) in typeMap" :key="k" :label="v" :value="Number(k)" />
       </el-select>
@@ -62,50 +61,49 @@ onMounted(fetchList)
       <el-button @click="handleReset">重置</el-button>
     </div>
 
-    <!-- Table -->
-    <div class="table-container">
-      <div class="table-actions">
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm">
+      <div class="flex items-center justify-between px-5 py-4 border-b border-gray-50">
+        <div class="flex items-center gap-3">
+          <span class="font-medium text-gray-700">通知列表</span>
+        </div>
         <el-button type="primary" @click="handleMarkAllRead">全部标记已读</el-button>
       </div>
-      <el-table v-loading="loading" :data="tableData" border stripe style="width: 100%">
-        <el-table-column prop="title" label="标题" min-width="180" />
-        <el-table-column prop="content" label="内容" min-width="260" show-overflow-tooltip />
-        <el-table-column label="类型" width="90" align="center">
-          <template #default="{ row }">
-            <el-tag :type="typeStyle[row.type]" size="small">{{ typeMap[row.type] || '-' }}</el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column label="状态" width="80" align="center">
-          <template #default="{ row }">
-            <span class="read-dot" :class="row.is_read ? 'read' : 'unread'" />
-            <span>{{ row.is_read ? '已读' : '未读' }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column prop="created_at" label="创建时间" min-width="160" />
-        <el-table-column label="操作" width="120" fixed="right" align="center">
-          <template #default="{ row }">
-            <el-button
-              v-if="!row.is_read"
-              size="small"
-              type="primary"
-              link
-              @click="handleMarkRead(row)"
-            >标记已读</el-button>
-            <span v-else class="text-muted">-</span>
-          </template>
-        </el-table-column>
-      </el-table>
-
-      <el-pagination
-        v-model:current-page="pagination.page"
-        v-model:page-size="pagination.per_page"
-        :total="total"
-        :page-sizes="[10, 20, 50]"
-        layout="total, sizes, prev, pager, next, jumper"
-        background
-        @current-change="handlePageChange"
-        @size-change="handleSizeChange"
-      />
+      <div class="px-2">
+        <el-table v-loading="loading" :data="tableData" style="width: 100%">
+          <el-table-column prop="title" label="标题" min-width="180" />
+          <el-table-column prop="content" label="内容" min-width="260" show-overflow-tooltip />
+          <el-table-column label="类型" width="90" align="center">
+            <template #default="{ row }">
+              <el-tag :type="typeStyle[row.type]" size="small">{{ typeMap[row.type] || '-' }}</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="状态" width="80" align="center">
+            <template #default="{ row }">
+              <span class="read-dot" :class="row.is_read ? 'read' : 'unread'" />
+              <span>{{ row.is_read ? '已读' : '未读' }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="created_at" label="创建时间" min-width="160" />
+          <el-table-column label="操作" width="120" fixed="right" align="center">
+            <template #default="{ row }">
+              <el-button v-if="!row.is_read" size="small" type="primary" text @click="handleMarkRead(row)">标记已读</el-button>
+              <span v-else class="text-muted">-</span>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="px-5 py-3 border-t border-gray-50">
+        <el-pagination
+          v-model:current-page="pagination.page"
+          v-model:page-size="pagination.per_page"
+          :total="total"
+          :page-sizes="[10, 20, 50]"
+          layout="total, sizes, prev, pager, next, jumper"
+          background
+          @current-change="handlePageChange"
+          @size-change="handleSizeChange"
+        />
+      </div>
     </div>
   </div>
 </template>
diff --git a/frontend/src/views/register/index.vue b/frontend/src/views/register/index.vue
new file mode 100644
index 0000000..85f6608
--- /dev/null
+++ b/frontend/src/views/register/index.vue
@@ -0,0 +1,183 @@
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { ElMessage } from 'element-plus'
+import axios from 'axios'
+
+const router = useRouter()
+const loading = ref(false)
+const packagesLoading = ref(false)
+const packages = ref([])
+const stores = ref([])
+
+const form = reactive({
+  store_id: '',
+  registration_package_id: '',
+  username: '',
+  password: '',
+  name: '',
+  phone: '',
+})
+
+const formRef = ref(null)
+const rules = {
+  store_id: [{ required: true, message: '请选择门店', trigger: 'change' }],
+  registration_package_id: [{ required: true, message: '请选择岗位套餐', trigger: 'change' }],
+  username: [
+    { required: true, message: '请输入登录账号', trigger: 'blur' },
+    { min: 2, max: 50, message: '2-50个字符', trigger: 'blur' },
+  ],
+  password: [
+    { required: true, message: '请输入密码', trigger: 'blur' },
+    { min: 6, message: '密码不少于6位', trigger: 'blur' },
+  ],
+  name: [{ required: true, message: '请输入真实姓名', trigger: 'blur' }],
+  phone: [
+    { required: true, message: '请输入手机号', trigger: 'blur' },
+    { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' },
+  ],
+}
+
+async function fetchStores() {
+  try {
+    const res = await axios.get('/api/v1/auth/stores')
+    stores.value = res.data?.data || []
+  } catch {
+    //
+  }
+}
+
+async function fetchPackages() {
+  if (!form.store_id) return
+  packagesLoading.value = true
+  form.registration_package_id = ''
+  try {
+    const res = await axios.get('/api/v1/auth/register/packages', {
+      params: { store_id: form.store_id },
+    })
+    packages.value = res.data?.data || []
+  } catch {
+    packages.value = []
+  } finally {
+    packagesLoading.value = false
+  }
+}
+
+async function handleSubmit() {
+  if (!formRef.value) return
+  await formRef.value.validate(async (valid) => {
+    if (!valid) return
+    loading.value = true
+    try {
+      await axios.post('/api/v1/auth/register', form)
+      ElMessage.success('注册成功！请等待管理员审核后登录')
+      setTimeout(() => router.push('/login'), 1500)
+    } catch (e) {
+      const msg = e.response?.data?.message || '注册失败，请稍后重试'
+      ElMessage.error(msg)
+    } finally {
+      loading.value = false
+    }
+  })
+}
+
+onMounted(fetchStores)
+</script>
+
+<template>
+  <div class="min-h-screen bg-gradient-to-br from-pink-50 to-purple-50 flex items-center justify-center p-4">
+    <div class="bg-white rounded-3xl shadow-xl w-full max-w-md p-8">
+      <!-- Logo -->
+      <div class="text-center mb-8">
+        <div class="text-3xl mb-1">🏠</div>
+        <h1 class="text-2xl font-bold text-gray-800">宫中有喜</h1>
+        <p class="text-sm text-gray-400 mt-1">月子会所管理系统 · 员工注册</p>
+      </div>
+
+      <el-form ref="formRef" :model="form" :rules="rules" label-position="top">
+        <el-form-item label="所属门店" prop="store_id">
+          <el-select
+            v-model="form.store_id"
+            placeholder="请选择门店"
+            style="width: 100%"
+            @change="fetchPackages"
+          >
+            <el-option
+              v-for="s in stores"
+              :key="s.id"
+              :label="s.name"
+              :value="s.id"
+            />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="申请岗位" prop="registration_package_id">
+          <el-select
+            v-model="form.registration_package_id"
+            placeholder="请先选择门店"
+            style="width: 100%"
+            :loading="packagesLoading"
+            :disabled="!form.store_id"
+          >
+            <el-option
+              v-for="p in packages"
+              :key="p.id"
+              :label="p.name"
+              :value="p.id"
+            >
+              <span>{{ p.name }}</span>
+              <span v-if="p.description" class="text-gray-400 text-xs ml-2">{{ p.description }}</span>
+            </el-option>
+            <template v-if="packages.length === 0 && form.store_id && !packagesLoading" #empty>
+              <div class="text-center py-4 text-gray-400 text-sm">该门店暂无可用套餐</div>
+            </template>
+          </el-select>
+        </el-form-item>
+
+        <el-row :gutter="12">
+          <el-col :span="12">
+            <el-form-item label="登录账号" prop="username">
+              <el-input v-model="form.username" placeholder="字母/数字" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="登录密码" prop="password">
+              <el-input v-model="form.password" type="password" placeholder="不少于6位" show-password />
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="12">
+          <el-col :span="12">
+            <el-form-item label="真实姓名" prop="name">
+              <el-input v-model="form.name" placeholder="请输入姓名" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="手机号" prop="phone">
+              <el-input v-model="form.phone" placeholder="11位手机号" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-button
+          type="primary"
+          style="width: 100%; margin-top: 8px"
+          :loading="loading"
+          @click="handleSubmit"
+        >
+          提交注册申请
+        </el-button>
+      </el-form>
+
+      <div class="text-center mt-6 text-sm text-gray-400">
+        已有账号？
+        <router-link to="/login" class="text-blue-500 hover:underline">立即登录</router-link>
+      </div>
+
+      <div class="mt-4 p-3 bg-amber-50 rounded-xl text-xs text-amber-600 leading-relaxed">
+        ⚠️ 注册后需管理员审核，审核通过后方可登录系统
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/frontend/src/views/report/exports/index.vue b/frontend/src/views/report/exports/index.vue
index 4974dd6..cae6003 100644
--- a/frontend/src/views/report/exports/index.vue
+++ b/frontend/src/views/report/exports/index.vue
@@ -81,9 +81,8 @@ onMounted(fetchList)
 </script>
 
 <template>
-  <div class="page-container">
-    <!-- Search -->
-    <div class="search-bar">
+  <div class="p-6 space-y-4">
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-4 flex items-center flex-wrap gap-3">
       <el-input v-model="searchForm.type" placeholder="报表类型" style="width: 160px" clearable @keydown.enter="handleSearch" />
       <el-select v-model="searchForm.status" placeholder="状态" clearable style="width: 130px">
         <el-option v-for="(v, k) in statusMap" :key="k" :label="v" :value="Number(k)" />
@@ -92,47 +91,52 @@ onMounted(fetchList)
       <el-button @click="handleReset">重置</el-button>
     </div>
 
-    <!-- Table -->
-    <div class="table-container">
-      <div class="table-actions">
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm">
+      <div class="flex items-center justify-between px-5 py-4 border-b border-gray-50">
+        <div class="flex items-center gap-3">
+          <span class="font-medium text-gray-700">导出记录列表</span>
+        </div>
         <el-button type="primary" @click="handleAdd">新建导出</el-button>
       </div>
-      <el-table v-loading="loading" :data="tableData" border stripe style="width: 100%">
-        <el-table-column prop="name" label="报表名称" min-width="160" />
-        <el-table-column prop="type" label="类型" min-width="120" />
-        <el-table-column label="状态" width="100" align="center">
-          <template #default="{ row }">
-            <el-tag :type="statusType[row.status]" size="small">{{ statusMap[row.status] || '-' }}</el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column label="操作人" min-width="100">
-          <template #default="{ row }">{{ row.operator?.name || '-' }}</template>
-        </el-table-column>
-        <el-table-column prop="created_at" label="创建时间" min-width="160" />
-        <el-table-column label="操作" width="100" fixed="right" align="center">
-          <template #default="{ row }">
-            <el-button
-              v-if="row.status === 1 && row.file_path"
-              size="small"
-              type="primary"
-              link
-              @click="handleDownload(row)"
-            >下载</el-button>
-            <span v-else class="text-muted">-</span>
-          </template>
-        </el-table-column>
-      </el-table>
-
-      <el-pagination
-        v-model:current-page="pagination.page"
-        v-model:page-size="pagination.per_page"
-        :total="total"
-        :page-sizes="[10, 20, 50]"
-        layout="total, sizes, prev, pager, next, jumper"
-        background
-        @current-change="handlePageChange"
-        @size-change="handleSizeChange"
-      />
+      <div class="px-2">
+        <el-table v-loading="loading" :data="tableData" style="width: 100%">
+          <el-table-column prop="name" label="报表名称" min-width="160" />
+          <el-table-column prop="type" label="类型" min-width="120" />
+          <el-table-column label="状态" width="100" align="center">
+            <template #default="{ row }">
+              <el-tag :type="statusType[row.status]" size="small">{{ statusMap[row.status] || '-' }}</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作人" min-width="100">
+            <template #default="{ row }">{{ row.operator?.name || '-' }}</template>
+          </el-table-column>
+          <el-table-column prop="created_at" label="创建时间" min-width="160" />
+          <el-table-column label="操作" width="100" fixed="right" align="center">
+            <template #default="{ row }">
+              <el-button
+                v-if="row.status === 1 && row.file_path"
+                size="small"
+                type="primary"
+                text
+                @click="handleDownload(row)"
+              >下载</el-button>
+              <span v-else class="text-muted">-</span>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="px-5 py-3 border-t border-gray-50">
+        <el-pagination
+          v-model:current-page="pagination.page"
+          v-model:page-size="pagination.per_page"
+          :total="total"
+          :page-sizes="[10, 20, 50]"
+          layout="total, sizes, prev, pager, next, jumper"
+          background
+          @current-change="handlePageChange"
+          @size-change="handleSizeChange"
+        />
+      </div>
     </div>
 
     <!-- Create Dialog -->
diff --git a/frontend/src/views/report/overview/index.vue b/frontend/src/views/report/overview/index.vue
index 7d638c8..606acfb 100644
--- a/frontend/src/views/report/overview/index.vue
+++ b/frontend/src/views/report/overview/index.vue
@@ -34,10 +34,13 @@ onMounted(fetchOverview)
 </script>
 
 <template>
-  <div class="page-container" v-loading="loading">
-    <div class="section-title">经营概览</div>
+  <div class="p-6 space-y-4" v-loading="loading">
+    <div class="flex items-center gap-2 mb-2">
+      <span class="w-1 h-5 rounded bg-primary inline-block" style="background:var(--color-primary)"></span>
+      <span class="font-semibold text-base text-gray-800">经营概览</span>
+    </div>
 
-    <el-row :gutter="16" class="mt-16">
+    <el-row :gutter="16">
       <el-col
         v-for="card in cards"
         :key="card.key"
@@ -47,20 +50,18 @@ onMounted(fetchOverview)
         :lg="8"
         :xl="4"
       >
-        <el-card shadow="hover" class="overview-card">
-          <div class="card-inner">
-            <div class="card-icon-wrap" :style="{ background: card.bg }">
-              <span class="card-icon-text" :style="{ color: card.color }">{{ card.title.charAt(0) }}</span>
-            </div>
-            <div class="card-info">
-              <div class="card-label">{{ card.title }}</div>
-              <div class="card-value">
-                <span class="card-number" :style="{ color: card.color }">{{ card.value }}</span>
-                <span class="card-unit">{{ card.unit }}</span>
-              </div>
+        <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-5 mb-4 flex items-center gap-4">
+          <div class="w-14 h-14 rounded-xl flex items-center justify-center flex-shrink-0" :style="{ background: card.bg }">
+            <span class="text-2xl font-bold" :style="{ color: card.color }">{{ card.title.charAt(0) }}</span>
+          </div>
+          <div class="flex-1 min-w-0">
+            <div class="text-sm text-gray-500 mb-1">{{ card.title }}</div>
+            <div class="flex items-baseline gap-1">
+              <span class="text-3xl font-bold leading-none" :style="{ color: card.color }">{{ card.value }}</span>
+              <span class="text-sm text-gray-400">{{ card.unit }}</span>
             </div>
           </div>
-        </el-card>
+        </div>
       </el-col>
     </el-row>
   </div>
diff --git a/frontend/src/views/room/board/index.vue b/frontend/src/views/room/board/index.vue
new file mode 100644
index 0000000..2951432
--- /dev/null
+++ b/frontend/src/views/room/board/index.vue
@@ -0,0 +1,164 @@
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { ElMessage } from 'element-plus'
+import { roomApi, reservationApi } from '@/api/room.js'
+
+const rooms = ref([])
+const loading = ref(false)
+const detailVisible = ref(false)
+const detailRoom = ref(null)
+const filterStatus = ref('')
+
+const statusConfig = {
+  available:    { label: '空置',  color: 'bg-emerald-50 border-emerald-200', badge: 'bg-emerald-500', text: 'text-emerald-700', dot: 'bg-emerald-400' },
+  occupied:     { label: '在住',  color: 'bg-blue-50 border-blue-200',       badge: 'bg-blue-500',    text: 'text-blue-700',    dot: 'bg-blue-400' },
+  cleaning:     { label: '保洁',  color: 'bg-amber-50 border-amber-200',     badge: 'bg-amber-500',   text: 'text-amber-700',   dot: 'bg-amber-400' },
+  maintenance:  { label: '维护',  color: 'bg-gray-50 border-gray-200',       badge: 'bg-gray-400',    text: 'text-gray-600',    dot: 'bg-gray-400' }
+}
+
+const statusOptions = Object.entries(statusConfig).map(([k, v]) => ({ value: k, label: v.label }))
+
+const filteredRooms = computed(() => {
+  if (!filterStatus.value) return rooms.value
+  return rooms.value.filter(r => r.status === filterStatus.value)
+})
+
+const summary = computed(() => {
+  const map = {}
+  for (const k of Object.keys(statusConfig)) map[k] = 0
+  for (const r of rooms.value) { if (map[r.status] !== undefined) map[r.status]++ }
+  return map
+})
+
+async function fetchRooms() {
+  loading.value = true
+  try {
+    const res = await roomApi.getList({ per_page: 200 })
+    rooms.value = res.data?.list || res.data?.data || []
+  } catch (e) { console.error(e) }
+  finally { loading.value = false }
+}
+
+async function openDetail(room) {
+  detailRoom.value = room
+  if (room.status === 'occupied') {
+    try {
+      const res = await reservationApi.getList({ room_id: room.id, status: 1, per_page: 1 })
+      const list = res.data?.list || res.data?.data || []
+      detailRoom.value = { ...room, currentReservation: list[0] || null }
+    } catch (e) { console.error(e) }
+  }
+  detailVisible.value = true
+}
+
+async function handleStatusChange(room, newStatus) {
+  try {
+    await roomApi.updateStatus(room.id, { status: newStatus })
+    ElMessage.success('房态已更新')
+    fetchRooms()
+  } catch (e) { console.error(e) }
+}
+
+onMounted(() => fetchRooms())
+</script>
+
+<template>
+  <div class="p-6 space-y-4">
+    <!-- Summary Stats -->
+    <div class="grid grid-cols-4 gap-4">
+      <div v-for="(cfg, key) in statusConfig" :key="key"
+        class="bg-white rounded-2xl border border-gray-100 shadow-sm p-4 flex items-center gap-3 cursor-pointer transition-all hover:shadow-md"
+        :class="filterStatus === key ? 'ring-2 ring-rose-400' : ''"
+        @click="filterStatus = filterStatus === key ? '' : key"
+      >
+        <div class="w-10 h-10 rounded-xl flex items-center justify-center" :class="cfg.badge + '/20'">
+          <span class="w-4 h-4 rounded-full inline-block" :class="cfg.dot"></span>
+        </div>
+        <div>
+          <div class="text-2xl font-bold" :class="cfg.text">{{ summary[key] }}</div>
+          <div class="text-xs text-gray-500">{{ cfg.label }}</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Board -->
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm">
+      <div class="flex items-center justify-between px-5 py-4 border-b border-gray-50">
+        <div class="flex items-center gap-2">
+          <span class="w-1 h-5 bg-rose-500 rounded-full inline-block"></span>
+          <span class="font-medium text-gray-700">房态看板</span>
+          <span class="text-xs text-gray-400 ml-2">点击统计卡片可按状态筛选，点击房间卡片查看详情</span>
+        </div>
+        <div class="flex items-center gap-2">
+          <el-select v-model="filterStatus" placeholder="全部状态" clearable style="width:130px">
+            <el-option v-for="s in statusOptions" :key="s.value" :label="s.label" :value="s.value" />
+          </el-select>
+          <el-button @click="fetchRooms" :loading="loading">刷新</el-button>
+        </div>
+      </div>
+
+      <div v-loading="loading" class="p-5">
+        <div v-if="filteredRooms.length === 0" class="py-16 text-center text-gray-400">暂无房间数据</div>
+        <div v-else class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4">
+          <div
+            v-for="room in filteredRooms"
+            :key="room.id"
+            class="rounded-xl border-2 p-3 cursor-pointer transition-all hover:-translate-y-0.5 hover:shadow-md select-none"
+            :class="statusConfig[room.status]?.color || 'bg-gray-50 border-gray-200'"
+            @click="openDetail(room)"
+          >
+            <!-- Room number + status dot -->
+            <div class="flex items-center justify-between mb-2">
+              <span class="font-bold text-gray-800 text-sm">{{ room.number }}</span>
+              <span class="w-2.5 h-2.5 rounded-full" :class="statusConfig[room.status]?.dot || 'bg-gray-400'"></span>
+            </div>
+            <!-- Room type -->
+            <div class="text-xs text-gray-500 mb-1 truncate">{{ room.room_type?.name || room.type_name || '-' }}</div>
+            <!-- Status label -->
+            <div class="text-xs font-medium" :class="statusConfig[room.status]?.text || 'text-gray-500'">
+              {{ statusConfig[room.status]?.label || room.status }}
+            </div>
+            <!-- Customer name if occupied -->
+            <div v-if="room.status === 'occupied' && (room.customer_name || room.current_customer)" class="text-xs text-blue-600 mt-1 truncate font-medium">
+              {{ room.customer_name || room.current_customer }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Room Detail Drawer -->
+    <el-drawer v-model="detailVisible" title="房间详情" size="400px">
+      <template v-if="detailRoom">
+        <el-descriptions :column="1" border>
+          <el-descriptions-item label="房间号">{{ detailRoom.number }}</el-descriptions-item>
+          <el-descriptions-item label="房型">{{ detailRoom.room_type?.name || detailRoom.type_name || '-' }}</el-descriptions-item>
+          <el-descriptions-item label="楼层">{{ detailRoom.floor || '-' }}</el-descriptions-item>
+          <el-descriptions-item label="状态">
+            <el-tag :type="{ available: 'success', occupied: 'primary', cleaning: 'warning', maintenance: 'info' }[detailRoom.status]" size="small">
+              {{ statusConfig[detailRoom.status]?.label || detailRoom.status }}
+            </el-tag>
+          </el-descriptions-item>
+          <template v-if="detailRoom.status === 'occupied' && detailRoom.currentReservation">
+            <el-descriptions-item label="在住客户">{{ detailRoom.currentReservation.customer?.name || '-' }}</el-descriptions-item>
+            <el-descriptions-item label="入住日期">{{ detailRoom.currentReservation.check_in_date || '-' }}</el-descriptions-item>
+            <el-descriptions-item label="预计离店">{{ detailRoom.currentReservation.check_out_date || '-' }}</el-descriptions-item>
+          </template>
+        </el-descriptions>
+
+        <div class="mt-4">
+          <div class="text-sm font-medium text-gray-600 mb-2">快速变更房态</div>
+          <div class="flex flex-wrap gap-2">
+            <el-button
+              v-for="s in statusOptions"
+              :key="s.value"
+              size="small"
+              :disabled="detailRoom.status === s.value"
+              @click="handleStatusChange(detailRoom, s.value)"
+            >{{ s.label }}</el-button>
+          </div>
+        </div>
+      </template>
+    </el-drawer>
+  </div>
+</template>
diff --git a/frontend/src/views/room/call-records/index.vue b/frontend/src/views/room/call-records/index.vue
new file mode 100644
index 0000000..21894aa
--- /dev/null
+++ b/frontend/src/views/room/call-records/index.vue
@@ -0,0 +1,177 @@
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { callRecordApi } from '@/api/room.js'
+import { customerApi } from '@/api/crm.js'
+
+const tableData = ref([])
+const total = ref(0)
+const loading = ref(false)
+const dialogVisible = ref(false)
+const submitLoading = ref(false)
+const customers = ref([])
+
+const searchForm = reactive({ customer_id: '', handled: '', date: '' })
+const pagination = reactive({ page: 1, per_page: 20 })
+
+const formRef = ref(null)
+const form = reactive({
+  customer_id: '', room_no: '', call_type: 'nurse', content: ''
+})
+const formRules = {
+  customer_id: [{ required: true, message: '请选择客户', trigger: 'change' }],
+  call_type: [{ required: true, message: '请选择呼叫类型', trigger: 'change' }],
+  content: [{ required: true, message: '请输入呼叫内容', trigger: 'blur' }]
+}
+
+const callTypeMap = { nurse: '护理', meal: '膳食', service: '服务', emergency: '紧急' }
+const callTypeTagType = { nurse: 'primary', meal: 'success', service: 'info', emergency: 'danger' }
+
+async function fetchList() {
+  loading.value = true
+  try {
+    const res = await callRecordApi.getList({ ...searchForm, ...pagination })
+    tableData.value = res.data?.list || res.data?.data || []
+    total.value = res.data?.total || 0
+  } finally { loading.value = false }
+}
+
+async function fetchCustomers() {
+  try {
+    const res = await customerApi.getList({ per_page: 500 })
+    customers.value = res.data?.list || res.data?.data || []
+  } catch {}
+}
+
+function handleSearch() { pagination.page = 1; fetchList() }
+function handleReset() { Object.assign(searchForm, { customer_id: '', handled: '', date: '' }); handleSearch() }
+
+function handleAdd() {
+  Object.assign(form, { customer_id: '', room_no: '', call_type: 'nurse', content: '' })
+  dialogVisible.value = true
+}
+
+async function handleSubmit() {
+  if (!formRef.value) return
+  await formRef.value.validate(async (valid) => {
+    if (!valid) return
+    submitLoading.value = true
+    try {
+      await callRecordApi.create(form)
+      ElMessage.success('呼叫记录已创建')
+      dialogVisible.value = false; fetchList()
+    } finally { submitLoading.value = false }
+  })
+}
+
+async function handleHandle(row) {
+  await ElMessageBox.confirm(`确定标记该呼叫为「已处理」吗？`, '处理确认', { type: 'info' })
+  try {
+    await callRecordApi.handle(row.id, {})
+    ElMessage.success('已标记为处理')
+    fetchList()
+  } catch (e) { console.error(e) }
+}
+
+function handlePageChange(val) { pagination.page = val; fetchList() }
+function handleSizeChange(val) { pagination.per_page = val; pagination.page = 1; fetchList() }
+
+onMounted(() => { fetchList(); fetchCustomers() })
+</script>
+
+<template>
+  <div class="p-6 space-y-4">
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-4 flex items-center flex-wrap gap-3">
+      <el-select v-model="searchForm.customer_id" placeholder="选择客户" clearable filterable style="width:180px">
+        <el-option v-for="c in customers" :key="c.id" :label="`${c.name}(${c.phone})`" :value="c.id" />
+      </el-select>
+      <el-select v-model="searchForm.handled" placeholder="处理状态" clearable style="width:120px">
+        <el-option label="未处理" :value="0" />
+        <el-option label="已处理" :value="1" />
+      </el-select>
+      <el-date-picker v-model="searchForm.date" type="date" placeholder="呼叫日期" value-format="YYYY-MM-DD" style="width:150px" />
+      <el-button type="primary" @click="handleSearch">查询</el-button>
+      <el-button @click="handleReset">重置</el-button>
+    </div>
+
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm">
+      <div class="flex items-center justify-between px-5 py-4 border-b border-gray-50">
+        <div class="flex items-center gap-2">
+          <span class="w-1 h-5 bg-rose-500 rounded-full inline-block"></span>
+          <span class="font-medium text-gray-700">呼叫记录</span>
+        </div>
+        <el-button type="primary" @click="handleAdd">新建呼叫记录</el-button>
+      </div>
+      <div class="px-2">
+        <el-table v-loading="loading" :data="tableData" style="width:100%" :row-class-name="({ row }) => !row.handled ? 'bg-rose-50/40' : ''">
+          <el-table-column label="客户" min-width="100">
+            <template #default="{ row }">{{ row.customer_name || row.customer?.name || '-' }}</template>
+          </el-table-column>
+          <el-table-column prop="room_no" label="房间号" width="90" align="center" />
+          <el-table-column label="呼叫类型" width="100" align="center">
+            <template #default="{ row }">
+              <el-tag :type="callTypeTagType[row.call_type]" size="small">{{ callTypeMap[row.call_type] }}</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column prop="content" label="呼叫内容" min-width="180" show-overflow-tooltip />
+          <el-table-column label="处理状态" width="95" align="center">
+            <template #default="{ row }">
+              <el-tag :type="row.handled ? 'success' : 'danger'" size="small">{{ row.handled ? '已处理' : '未处理' }}</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="处理人" min-width="100">
+            <template #default="{ row }">{{ row.handler_name || row.handler?.name || '-' }}</template>
+          </el-table-column>
+          <el-table-column prop="handled_at" label="处理时间" min-width="160">
+            <template #default="{ row }">{{ row.handled_at || '-' }}</template>
+          </el-table-column>
+          <el-table-column prop="created_at" label="呼叫时间" min-width="160" />
+          <el-table-column label="操作" width="120" fixed="right" align="center">
+            <template #default="{ row }">
+              <el-button v-if="!row.handled" size="small" type="success" text @click="handleHandle(row)">标记处理</el-button>
+              <span v-else class="text-gray-400 text-xs">已完成</span>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="px-5 py-3 border-t border-gray-50">
+        <el-pagination
+          v-model:current-page="pagination.page"
+          v-model:page-size="pagination.per_page"
+          :total="total"
+          :page-sizes="[10, 20, 50]"
+          layout="total,sizes,prev,pager,next,jumper"
+          background
+          @current-change="handlePageChange"
+          @size-change="handleSizeChange"
+        />
+      </div>
+    </div>
+
+    <!-- New Call Record Dialog -->
+    <el-dialog v-model="dialogVisible" title="新建呼叫记录" width="500px" destroy-on-close>
+      <el-form ref="formRef" :model="form" :rules="formRules" label-width="90px">
+        <el-form-item label="客户" prop="customer_id">
+          <el-select v-model="form.customer_id" filterable placeholder="请选择客户" style="width:100%">
+            <el-option v-for="c in customers" :key="c.id" :label="`${c.name}(${c.phone})`" :value="c.id" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="房间号">
+          <el-input v-model="form.room_no" placeholder="请输入房间号" />
+        </el-form-item>
+        <el-form-item label="呼叫类型" prop="call_type">
+          <el-select v-model="form.call_type" style="width:100%">
+            <el-option v-for="(v, k) in callTypeMap" :key="k" :label="v" :value="k" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="呼叫内容" prop="content">
+          <el-input v-model="form.content" type="textarea" :rows="3" placeholder="请描述呼叫内容" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" :loading="submitLoading" @click="handleSubmit">确定</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
diff --git a/frontend/src/views/room/outings/index.vue b/frontend/src/views/room/outings/index.vue
new file mode 100644
index 0000000..35eab13
--- /dev/null
+++ b/frontend/src/views/room/outings/index.vue
@@ -0,0 +1,200 @@
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { customerOutingApi } from '@/api/room.js'
+import { customerApi } from '@/api/crm.js'
+
+const tableData = ref([])
+const total = ref(0)
+const loading = ref(false)
+const dialogVisible = ref(false)
+const submitLoading = ref(false)
+const returnVisible = ref(false)
+const currentOuting = ref(null)
+const customers = ref([])
+
+const searchForm = reactive({ customer_id: '', status: '', date: '' })
+const pagination = reactive({ page: 1, per_page: 20 })
+
+const formRef = ref(null)
+const form = reactive({
+  customer_id: '', outing_time: '', expected_return: '', reason: ''
+})
+const returnForm = reactive({ actual_return: '', remark: '' })
+
+const formRules = {
+  customer_id: [{ required: true, message: '请选择客户', trigger: 'change' }],
+  outing_time: [{ required: true, message: '请选择外出时间', trigger: 'change' }],
+  expected_return: [{ required: true, message: '请选择预计返回时间', trigger: 'change' }]
+}
+
+const statusMap = { pending: '待出发', out: '外出中', returned: '已返回' }
+const statusType = { pending: 'warning', out: 'primary', returned: 'success' }
+
+async function fetchList() {
+  loading.value = true
+  try {
+    const res = await customerOutingApi.getList({ ...searchForm, ...pagination })
+    tableData.value = res.data?.list || res.data?.data || []
+    total.value = res.data?.total || 0
+  } finally { loading.value = false }
+}
+
+async function fetchCustomers() {
+  try {
+    const res = await customerApi.getList({ per_page: 500 })
+    customers.value = res.data?.list || res.data?.data || []
+  } catch {}
+}
+
+function handleSearch() { pagination.page = 1; fetchList() }
+function handleReset() { Object.assign(searchForm, { customer_id: '', status: '', date: '' }); handleSearch() }
+
+function handleAdd() {
+  Object.assign(form, { customer_id: '', outing_time: '', expected_return: '', reason: '' })
+  dialogVisible.value = true
+}
+
+async function handleSubmit() {
+  if (!formRef.value) return
+  await formRef.value.validate(async (valid) => {
+    if (!valid) return
+    submitLoading.value = true
+    try {
+      await customerOutingApi.create(form)
+      ElMessage.success('外出申请已创建')
+      dialogVisible.value = false; fetchList()
+    } finally { submitLoading.value = false }
+  })
+}
+
+function openReturn(row) {
+  currentOuting.value = row
+  Object.assign(returnForm, { actual_return: '', remark: '' })
+  returnVisible.value = true
+}
+
+async function submitReturn() {
+  if (!returnForm.actual_return) { ElMessage.warning('请选择实际返回时间'); return }
+  await customerOutingApi.recordBack(currentOuting.value.id, returnForm)
+  ElMessage.success('返回登记成功')
+  returnVisible.value = false; fetchList()
+}
+
+async function handleDelete(row) {
+  await ElMessageBox.confirm(`确定删除该外出记录吗？`, '删除确认', { type: 'warning' })
+  try {
+    await customerOutingApi.getDetail(row.id)
+    ElMessage.error('暂不支持删除，请联系管理员')
+  } catch (e) {
+    console.error(e)
+  }
+}
+
+function handlePageChange(val) { pagination.page = val; fetchList() }
+function handleSizeChange(val) { pagination.per_page = val; pagination.page = 1; fetchList() }
+
+onMounted(() => { fetchList(); fetchCustomers() })
+</script>
+
+<template>
+  <div class="p-6 space-y-4">
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-4 flex items-center flex-wrap gap-3">
+      <el-select v-model="searchForm.customer_id" placeholder="选择客户" clearable filterable style="width:180px">
+        <el-option v-for="c in customers" :key="c.id" :label="`${c.name}(${c.phone})`" :value="c.id" />
+      </el-select>
+      <el-select v-model="searchForm.status" placeholder="状态" clearable style="width:120px">
+        <el-option v-for="(v, k) in statusMap" :key="k" :label="v" :value="k" />
+      </el-select>
+      <el-date-picker v-model="searchForm.date" type="date" placeholder="外出日期" value-format="YYYY-MM-DD" style="width:150px" />
+      <el-button type="primary" @click="handleSearch">查询</el-button>
+      <el-button @click="handleReset">重置</el-button>
+    </div>
+
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm">
+      <div class="flex items-center justify-between px-5 py-4 border-b border-gray-50">
+        <div class="flex items-center gap-2">
+          <span class="w-1 h-5 bg-rose-500 rounded-full inline-block"></span>
+          <span class="font-medium text-gray-700">外出记录</span>
+        </div>
+        <el-button type="primary" @click="handleAdd">新建外出申请</el-button>
+      </div>
+      <div class="px-2">
+        <el-table v-loading="loading" :data="tableData" style="width:100%">
+          <el-table-column label="客户" min-width="100">
+            <template #default="{ row }">{{ row.customer_name || row.customer?.name || '-' }}</template>
+          </el-table-column>
+          <el-table-column prop="outing_time" label="外出时间" min-width="160" />
+          <el-table-column prop="expected_return" label="预计返回" min-width="160" />
+          <el-table-column prop="actual_return" label="实际返回" min-width="160">
+            <template #default="{ row }">{{ row.actual_return || '-' }}</template>
+          </el-table-column>
+          <el-table-column prop="reason" label="外出原因" min-width="150" show-overflow-tooltip />
+          <el-table-column label="状态" width="90" align="center">
+            <template #default="{ row }">
+              <el-tag :type="statusType[row.status]" size="small">{{ statusMap[row.status] }}</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" width="180" fixed="right" align="center">
+            <template #default="{ row }">
+              <el-button v-if="row.status === 'out'" size="small" type="success" text @click="openReturn(row)">登记返回</el-button>
+              <el-button v-if="row.status !== 'returned'" size="small" type="danger" text @click="handleDelete(row)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="px-5 py-3 border-t border-gray-50">
+        <el-pagination
+          v-model:current-page="pagination.page"
+          v-model:page-size="pagination.per_page"
+          :total="total"
+          :page-sizes="[10, 20, 50]"
+          layout="total,sizes,prev,pager,next,jumper"
+          background
+          @current-change="handlePageChange"
+          @size-change="handleSizeChange"
+        />
+      </div>
+    </div>
+
+    <!-- New Outing Dialog -->
+    <el-dialog v-model="dialogVisible" title="新建外出申请" width="520px" destroy-on-close>
+      <el-form ref="formRef" :model="form" :rules="formRules" label-width="100px">
+        <el-form-item label="客户" prop="customer_id">
+          <el-select v-model="form.customer_id" filterable placeholder="请选择客户" style="width:100%">
+            <el-option v-for="c in customers" :key="c.id" :label="`${c.name}(${c.phone})`" :value="c.id" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="外出时间" prop="outing_time">
+          <el-date-picker v-model="form.outing_time" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择外出时间" style="width:100%" />
+        </el-form-item>
+        <el-form-item label="预计返回" prop="expected_return">
+          <el-date-picker v-model="form.expected_return" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择预计返回时间" style="width:100%" />
+        </el-form-item>
+        <el-form-item label="外出原因">
+          <el-input v-model="form.reason" type="textarea" :rows="3" placeholder="请输入外出原因" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" :loading="submitLoading" @click="handleSubmit">确定</el-button>
+      </template>
+    </el-dialog>
+
+    <!-- Return Dialog -->
+    <el-dialog v-model="returnVisible" title="登记返回" width="420px" destroy-on-close>
+      <el-form label-width="100px">
+        <el-form-item label="实际返回时间">
+          <el-date-picker v-model="returnForm.actual_return" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择实际返回时间" style="width:100%" />
+        </el-form-item>
+        <el-form-item label="备注">
+          <el-input v-model="returnForm.remark" type="textarea" :rows="2" placeholder="可选备注" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="returnVisible = false">取消</el-button>
+        <el-button type="primary" @click="submitReturn">确定</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
diff --git a/frontend/src/views/room/reservations/index.vue b/frontend/src/views/room/reservations/index.vue
index 20ff6c9..829cfff 100644
--- a/frontend/src/views/room/reservations/index.vue
+++ b/frontend/src/views/room/reservations/index.vue
@@ -82,31 +82,40 @@ onMounted(() => { fetchList(); fetchCustomers(); fetchRooms() })
 </script>
 
 <template>
-  <div class="page-container">
-    <div class="search-bar">
+  <div class="p-6 space-y-4">
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-4 flex items-center flex-wrap gap-3">
       <el-select v-model="searchForm.customer_id" placeholder="选择客户" clearable filterable style="width:180px"><el-option v-for="c in customers" :key="c.id" :label="`${c.name}(${c.phone})`" :value="c.id" /></el-select>
       <el-select v-model="searchForm.status" placeholder="状态" clearable style="width:120px"><el-option v-for="(v,k) in statusMap" :key="k" :label="v" :value="Number(k)" /></el-select>
       <el-button type="primary" @click="handleSearch">查询</el-button>
       <el-button @click="handleReset">重置</el-button>
     </div>
-    <div class="table-container">
-      <div class="table-actions"><el-button type="primary" @click="handleAdd">新增预定</el-button></div>
-      <el-table v-loading="loading" :data="tableData" border stripe style="width:100%">
-        <el-table-column label="客户" min-width="100"><template #default="{ row }">{{ row.customer?.name || '-' }}</template></el-table-column>
-        <el-table-column label="房间" min-width="120"><template #default="{ row }">{{ row.room?.number || '-' }} ({{ row.room?.room_type?.name || '' }})</template></el-table-column>
-        <el-table-column prop="check_in_date" label="入住日期" min-width="110" />
-        <el-table-column prop="check_out_date" label="退房日期" min-width="110" />
-        <el-table-column label="状态" width="100" align="center"><template #default="{ row }"><el-tag :type="statusType[row.status]" size="small">{{ statusMap[row.status] }}</el-tag></template></el-table-column>
-        <el-table-column label="操作" width="260" fixed="right" align="center">
-          <template #default="{ row }">
-            <el-button v-if="row.status===0" size="small" type="success" link @click="handleCheckIn(row)">入住</el-button>
-            <el-button v-if="row.status===1" size="small" type="warning" link @click="handleCheckOut(row)">退房</el-button>
-            <el-button v-if="row.status<2" size="small" type="info" link @click="handleCancel(row)">取消</el-button>
-            <el-button v-if="row.status!==1" size="small" type="danger" link @click="handleDelete(row)">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-      <el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.per_page" :total="total" :page-sizes="[10,20,50]" layout="total,sizes,prev,pager,next,jumper" background @current-change="handlePageChange" @size-change="handleSizeChange" />
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm">
+      <div class="flex items-center justify-between px-5 py-4 border-b border-gray-50">
+        <div class="flex items-center gap-3">
+          <span class="font-medium text-gray-700">预定列表</span>
+        </div>
+        <el-button type="primary" @click="handleAdd">新增预定</el-button>
+      </div>
+      <div class="px-2">
+        <el-table v-loading="loading" :data="tableData" style="width:100%">
+          <el-table-column label="客户" min-width="100"><template #default="{ row }">{{ row.customer?.name || '-' }}</template></el-table-column>
+          <el-table-column label="房间" min-width="120"><template #default="{ row }">{{ row.room?.number || '-' }} ({{ row.room?.room_type?.name || '' }})</template></el-table-column>
+          <el-table-column prop="check_in_date" label="入住日期" min-width="110" />
+          <el-table-column prop="check_out_date" label="退房日期" min-width="110" />
+          <el-table-column label="状态" width="100" align="center"><template #default="{ row }"><el-tag :type="statusType[row.status]" size="small">{{ statusMap[row.status] }}</el-tag></template></el-table-column>
+          <el-table-column label="操作" width="260" fixed="right" align="center">
+            <template #default="{ row }">
+              <el-button v-if="row.status===0" size="small" type="success" text @click="handleCheckIn(row)">入住</el-button>
+              <el-button v-if="row.status===1" size="small" type="warning" text @click="handleCheckOut(row)">退房</el-button>
+              <el-button v-if="row.status<2" size="small" type="info" text @click="handleCancel(row)">取消</el-button>
+              <el-button v-if="row.status!==1" size="small" type="danger" text @click="handleDelete(row)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="px-5 py-3 border-t border-gray-50">
+        <el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.per_page" :total="total" :page-sizes="[10,20,50]" layout="total,sizes,prev,pager,next,jumper" background @current-change="handlePageChange" @size-change="handleSizeChange" />
+      </div>
     </div>
     <el-dialog v-model="dialogVisible" title="新增预定" width="550px" destroy-on-close>
       <el-form ref="formRef" :model="form" :rules="formRules" label-width="80px">
diff --git a/frontend/src/views/room/room-types/index.vue b/frontend/src/views/room/room-types/index.vue
index 03aa264..5643ec7 100644
--- a/frontend/src/views/room/room-types/index.vue
+++ b/frontend/src/views/room/room-types/index.vue
@@ -54,29 +54,38 @@ onMounted(() => fetchList())
 </script>
 
 <template>
-  <div class="page-container">
-    <div class="search-bar">
+  <div class="p-6 space-y-4">
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-4 flex items-center flex-wrap gap-3">
       <el-input v-model="searchForm.name" placeholder="房型名称" style="width:180px" clearable @keydown.enter="handleSearch" />
       <el-select v-model="searchForm.status" placeholder="状态" clearable style="width:120px"><el-option label="启用" :value="1" /><el-option label="禁用" :value="0" /></el-select>
       <el-button type="primary" @click="handleSearch">查询</el-button>
       <el-button @click="handleReset">重置</el-button>
     </div>
-    <div class="table-container">
-      <div class="table-actions"><el-button type="primary" @click="handleAdd">新增房型</el-button></div>
-      <el-table v-loading="loading" :data="tableData" border stripe style="width:100%">
-        <el-table-column prop="name" label="房型名称" min-width="150" />
-        <el-table-column prop="price" label="日单价(元)" min-width="120" align="right" />
-        <el-table-column label="房间数" width="90" align="center"><template #default="{ row }">{{ row.rooms_count || 0 }}</template></el-table-column>
-        <el-table-column label="状态" width="80" align="center"><template #default="{ row }"><el-tag :type="row.status?'success':'danger'" size="small">{{ row.status?'启用':'禁用' }}</el-tag></template></el-table-column>
-        <el-table-column prop="description" label="描述" min-width="200" show-overflow-tooltip />
-        <el-table-column label="操作" width="160" fixed="right" align="center">
-          <template #default="{ row }">
-            <el-button size="small" type="primary" link @click="handleEdit(row)">编辑</el-button>
-            <el-button size="small" type="danger" link @click="handleDelete(row)">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-      <el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.per_page" :total="total" :page-sizes="[10,20,50]" layout="total,sizes,prev,pager,next,jumper" background @current-change="handlePageChange" @size-change="handleSizeChange" />
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm">
+      <div class="flex items-center justify-between px-5 py-4 border-b border-gray-50">
+        <div class="flex items-center gap-3">
+          <span class="font-medium text-gray-700">房型列表</span>
+        </div>
+        <el-button type="primary" @click="handleAdd">新增房型</el-button>
+      </div>
+      <div class="px-2">
+        <el-table v-loading="loading" :data="tableData" style="width:100%">
+          <el-table-column prop="name" label="房型名称" min-width="150" />
+          <el-table-column prop="price" label="日单价(元)" min-width="120" align="right" />
+          <el-table-column label="房间数" width="90" align="center"><template #default="{ row }">{{ row.rooms_count || 0 }}</template></el-table-column>
+          <el-table-column label="状态" width="80" align="center"><template #default="{ row }"><el-tag :type="row.status?'success':'danger'" size="small">{{ row.status?'启用':'禁用' }}</el-tag></template></el-table-column>
+          <el-table-column prop="description" label="描述" min-width="200" show-overflow-tooltip />
+          <el-table-column label="操作" width="160" fixed="right" align="center">
+            <template #default="{ row }">
+              <el-button size="small" type="primary" text @click="handleEdit(row)">编辑</el-button>
+              <el-button size="small" type="danger" text @click="handleDelete(row)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="px-5 py-3 border-t border-gray-50">
+        <el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.per_page" :total="total" :page-sizes="[10,20,50]" layout="total,sizes,prev,pager,next,jumper" background @current-change="handlePageChange" @size-change="handleSizeChange" />
+      </div>
     </div>
     <el-dialog v-model="dialogVisible" :title="isEdit?'编辑房型':'新增房型'" width="550px" destroy-on-close>
       <el-form ref="formRef" :model="form" :rules="formRules" label-width="80px">
diff --git a/frontend/src/views/room/rooms/index.vue b/frontend/src/views/room/rooms/index.vue
index 62fd72e..9fa9328 100644
--- a/frontend/src/views/room/rooms/index.vue
+++ b/frontend/src/views/room/rooms/index.vue
@@ -72,39 +72,48 @@ onMounted(() => { fetchList(); fetchRoomTypes() })
 </script>
 
 <template>
-  <div class="page-container">
-    <div class="search-bar">
+  <div class="p-6 space-y-4">
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-4 flex items-center flex-wrap gap-3">
       <el-select v-model="searchForm.room_type_id" placeholder="房型" clearable style="width:160px"><el-option v-for="t in roomTypes" :key="t.id" :label="t.name" :value="t.id" /></el-select>
       <el-input v-model="searchForm.floor" placeholder="楼层" style="width:100px" clearable />
       <el-select v-model="searchForm.status" placeholder="状态" clearable style="width:120px"><el-option v-for="(v,k) in statusMap" :key="k" :label="v" :value="Number(k)" /></el-select>
       <el-button type="primary" @click="handleSearch">查询</el-button>
       <el-button @click="handleReset">重置</el-button>
     </div>
-    <div class="table-container">
-      <div class="table-actions"><el-button type="primary" @click="handleAdd">新增房间</el-button></div>
-      <el-table v-loading="loading" :data="tableData" border stripe style="width:100%">
-        <el-table-column prop="number" label="房间号" width="100" />
-        <el-table-column label="房型" min-width="120"><template #default="{ row }">{{ row.room_type?.name || '-' }}</template></el-table-column>
-        <el-table-column prop="floor" label="楼层" width="80" align="center" />
-        <el-table-column label="状态" width="100" align="center">
-          <template #default="{ row }"><el-tag :type="statusType[row.status]" size="small">{{ statusMap[row.status] }}</el-tag></template>
-        </el-table-column>
-        <el-table-column label="操作" width="300" fixed="right" align="center">
-          <template #default="{ row }">
-            <el-button size="small" type="primary" link @click="handleEdit(row)">编辑</el-button>
-            <el-dropdown trigger="click" @command="(cmd) => changeStatus(row, cmd)" style="margin:0 8px">
-              <el-button size="small" type="warning" link>切换状态</el-button>
-              <template #dropdown>
-                <el-dropdown-menu>
-                  <el-dropdown-item v-for="(v,k) in statusMap" :key="k" :command="Number(k)" :disabled="row.status===Number(k)">{{ v }}</el-dropdown-item>
-                </el-dropdown-menu>
-              </template>
-            </el-dropdown>
-            <el-button size="small" type="danger" link @click="handleDelete(row)">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-      <el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.per_page" :total="total" :page-sizes="[20,50,100]" layout="total,sizes,prev,pager,next,jumper" background @current-change="handlePageChange" @size-change="handleSizeChange" />
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm">
+      <div class="flex items-center justify-between px-5 py-4 border-b border-gray-50">
+        <div class="flex items-center gap-3">
+          <span class="font-medium text-gray-700">房间列表</span>
+        </div>
+        <el-button type="primary" @click="handleAdd">新增房间</el-button>
+      </div>
+      <div class="px-2">
+        <el-table v-loading="loading" :data="tableData" style="width:100%">
+          <el-table-column prop="number" label="房间号" width="100" />
+          <el-table-column label="房型" min-width="120"><template #default="{ row }">{{ row.room_type?.name || '-' }}</template></el-table-column>
+          <el-table-column prop="floor" label="楼层" width="80" align="center" />
+          <el-table-column label="状态" width="100" align="center">
+            <template #default="{ row }"><el-tag :type="statusType[row.status]" size="small">{{ statusMap[row.status] }}</el-tag></template>
+          </el-table-column>
+          <el-table-column label="操作" width="300" fixed="right" align="center">
+            <template #default="{ row }">
+              <el-button size="small" type="primary" text @click="handleEdit(row)">编辑</el-button>
+              <el-dropdown trigger="click" @command="(cmd) => changeStatus(row, cmd)" style="margin:0 8px">
+                <el-button size="small" type="warning" text>切换状态</el-button>
+                <template #dropdown>
+                  <el-dropdown-menu>
+                    <el-dropdown-item v-for="(v,k) in statusMap" :key="k" :command="Number(k)" :disabled="row.status===Number(k)">{{ v }}</el-dropdown-item>
+                  </el-dropdown-menu>
+                </template>
+              </el-dropdown>
+              <el-button size="small" type="danger" text @click="handleDelete(row)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="px-5 py-3 border-t border-gray-50">
+        <el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.per_page" :total="total" :page-sizes="[20,50,100]" layout="total,sizes,prev,pager,next,jumper" background @current-change="handlePageChange" @size-change="handleSizeChange" />
+      </div>
     </div>
     <el-dialog v-model="dialogVisible" :title="isEdit?'编辑房间':'新增房间'" width="500px" destroy-on-close>
       <el-form ref="formRef" :model="form" :rules="formRules" label-width="80px">
diff --git a/frontend/src/views/service/executions/index.vue b/frontend/src/views/service/executions/index.vue
new file mode 100644
index 0000000..935e3bc
--- /dev/null
+++ b/frontend/src/views/service/executions/index.vue
@@ -0,0 +1,246 @@
+<script setup>
+import { ref, reactive, computed, onMounted } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Icon } from '@iconify/vue'
+import { serviceExecutionApi } from '@/api/service.js'
+
+const tableData = ref([])
+const total = ref(0)
+const loading = ref(false)
+const dialogVisible = ref(false)
+const submitLoading = ref(false)
+
+const today = new Date().toISOString().slice(0, 10)
+
+const searchForm = reactive({ order_id: '', technician_id: '', status: '', date: today })
+const pagination = reactive({ page: 1, per_page: 20 })
+
+const formRef = ref(null)
+const form = reactive({
+  order_id: '', service_item_name: '', technician_id: '', technician_name: '', scheduled_at: '', notes: ''
+})
+
+const statusMap = {
+  scheduled: '待执行',
+  in_progress: '执行中',
+  completed: '已完成',
+  cancelled: '已取消'
+}
+const statusTagType = {
+  scheduled: 'warning',
+  in_progress: 'primary',
+  completed: 'success',
+  cancelled: 'info'
+}
+
+const formRules = {
+  order_id: [{ required: true, message: '请输入关联订单ID', trigger: 'blur' }],
+  service_item_name: [{ required: true, message: '请输入服务项目名称', trigger: 'blur' }],
+  scheduled_at: [{ required: true, message: '请选择计划执行时间', trigger: 'change' }]
+}
+
+// 今日待执行行高亮
+function getRowClass({ row }) {
+  const scheduledDate = row.scheduled_at ? row.scheduled_at.slice(0, 10) : ''
+  if (scheduledDate === today && row.status === 'scheduled') return 'row-today-highlight'
+  return ''
+}
+
+const todayCount = computed(() =>
+  tableData.value.filter(r => {
+    const d = r.scheduled_at ? r.scheduled_at.slice(0, 10) : ''
+    return d === today && r.status === 'scheduled'
+  }).length
+)
+
+async function fetchList() {
+  loading.value = true
+  try {
+    const res = await serviceExecutionApi.getList({ ...searchForm, ...pagination })
+    tableData.value = res.data?.list || res.data?.data || []
+    total.value = res.data?.total || 0
+  } catch {
+    ElMessage.error('加载失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+function handleSearch() { pagination.page = 1; fetchList() }
+function handleReset() {
+  Object.assign(searchForm, { order_id: '', technician_id: '', status: '', date: today })
+  handleSearch()
+}
+
+function handleAdd() {
+  Object.assign(form, { order_id: '', service_item_name: '', technician_id: '', technician_name: '', scheduled_at: '', notes: '' })
+  dialogVisible.value = true
+}
+
+async function handleComplete(row) {
+  await ElMessageBox.confirm(`确认「${row.service_item_name}」已执行完成？`, '标记完成', {
+    type: 'success',
+    confirmButtonText: '确认完成'
+  })
+  try {
+    await serviceExecutionApi.finish(row.id)
+    ElMessage.success('已标记完成')
+    fetchList()
+  } catch {
+    ElMessage.error('操作失败')
+  }
+}
+
+async function handleSubmit() {
+  if (!formRef.value) return
+  await formRef.value.validate(async (valid) => {
+    if (!valid) return
+    submitLoading.value = true
+    try {
+      await serviceExecutionApi.create(form)
+      ElMessage.success('创建成功')
+      dialogVisible.value = false
+      fetchList()
+    } catch {
+      ElMessage.error('创建失败')
+    } finally {
+      submitLoading.value = false
+    }
+  })
+}
+
+function handlePageChange(val) { pagination.page = val; fetchList() }
+function handleSizeChange(val) { pagination.per_page = val; pagination.page = 1; fetchList() }
+
+onMounted(() => fetchList())
+</script>
+
+<template>
+  <div class="p-6 space-y-4">
+    <!-- 搜索栏 -->
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-4 flex items-center flex-wrap gap-3">
+      <el-input v-model="searchForm.order_id" placeholder="订单ID" clearable style="width:140px" />
+      <el-input v-model="searchForm.technician_id" placeholder="技师ID" clearable style="width:140px" />
+      <el-select v-model="searchForm.status" placeholder="执行状态" clearable style="width:130px">
+        <el-option v-for="(v, k) in statusMap" :key="k" :label="v" :value="k" />
+      </el-select>
+      <el-date-picker v-model="searchForm.date" type="date" value-format="YYYY-MM-DD" placeholder="执行日期" style="width:160px" />
+      <el-button type="primary" @click="handleSearch">
+        <Icon icon="solar:magnifer-bold-duotone" class="mr-1" />查询
+      </el-button>
+      <el-button @click="handleReset">重置</el-button>
+    </div>
+
+    <!-- 今日待执行提示 -->
+    <div v-if="todayCount > 0" class="bg-rose-50 border border-rose-200 rounded-xl px-4 py-3 flex items-center gap-2">
+      <Icon icon="solar:bell-bing-bold-duotone" class="text-rose-500 text-xl flex-shrink-0" />
+      <span class="text-rose-600 text-sm font-medium">
+        今日共有 <span class="text-rose-700 font-bold">{{ todayCount }}</span> 条待执行服务，已高亮显示。
+      </span>
+    </div>
+
+    <!-- 表格区 -->
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm">
+      <div class="flex items-center justify-between px-5 py-4 border-b border-gray-50">
+        <div class="flex items-center gap-2">
+          <span class="w-1 h-5 bg-rose-500 rounded-full inline-block"></span>
+          <span class="font-semibold text-gray-700">服务执行记录</span>
+        </div>
+        <el-button type="primary" @click="handleAdd">
+          <Icon icon="solar:add-circle-bold-duotone" class="mr-1" />新建执行记录
+        </el-button>
+      </div>
+      <div class="px-2">
+        <el-table v-loading="loading" :data="tableData" style="width:100%" :row-class-name="getRowClass">
+          <el-table-column prop="service_item_name" label="服务项目" min-width="140" />
+          <el-table-column label="客户" min-width="100">
+            <template #default="{ row }">{{ row.customer_name || '-' }}</template>
+          </el-table-column>
+          <el-table-column label="执行技师" min-width="100">
+            <template #default="{ row }">{{ row.technician_name || '-' }}</template>
+          </el-table-column>
+          <el-table-column prop="scheduled_at" label="计划时间" min-width="160" />
+          <el-table-column prop="completed_at" label="完成时间" min-width="160">
+            <template #default="{ row }">{{ row.completed_at || '—' }}</template>
+          </el-table-column>
+          <el-table-column label="客户评分" width="90" align="center">
+            <template #default="{ row }">
+              <span v-if="row.customer_rating" class="text-amber-500 font-medium">{{ row.customer_rating }} ★</span>
+              <span v-else class="text-gray-300">—</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="状态" width="90" align="center">
+            <template #default="{ row }">
+              <el-tag :type="statusTagType[row.status]" size="small">{{ statusMap[row.status] || '-' }}</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" width="120" fixed="right" align="center">
+            <template #default="{ row }">
+              <el-button
+                v-if="row.status === 'scheduled' || row.status === 'in_progress'"
+                size="small"
+                type="success"
+                text
+                @click="handleComplete(row)"
+              >
+                标记完成
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="px-5 py-3 border-t border-gray-50">
+        <el-pagination
+          v-model:current-page="pagination.page"
+          v-model:page-size="pagination.per_page"
+          :total="total"
+          :page-sizes="[10, 20, 50]"
+          layout="total,sizes,prev,pager,next,jumper"
+          background
+          @current-change="handlePageChange"
+          @size-change="handleSizeChange"
+        />
+      </div>
+    </div>
+
+    <!-- 新建执行记录弹窗 -->
+    <el-dialog v-model="dialogVisible" title="新建执行记录" width="540px" destroy-on-close>
+      <el-form ref="formRef" :model="form" :rules="formRules" label-width="100px">
+        <el-form-item label="关联订单ID" prop="order_id">
+          <el-input v-model="form.order_id" placeholder="请输入服务订单ID" />
+        </el-form-item>
+        <el-form-item label="服务项目" prop="service_item_name">
+          <el-input v-model="form.service_item_name" placeholder="服务项目名称" />
+        </el-form-item>
+        <el-form-item label="执行技师">
+          <el-input v-model="form.technician_name" placeholder="技师姓名（可选）" />
+        </el-form-item>
+        <el-form-item label="计划时间" prop="scheduled_at">
+          <el-date-picker
+            v-model="form.scheduled_at"
+            type="datetime"
+            value-format="YYYY-MM-DD HH:mm:ss"
+            placeholder="选择计划执行时间"
+            style="width:100%"
+          />
+        </el-form-item>
+        <el-form-item label="备注">
+          <el-input v-model="form.notes" type="textarea" :rows="2" placeholder="执行备注（可选）" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" :loading="submitLoading" @click="handleSubmit">确定</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<style scoped>
+:deep(.row-today-highlight) {
+  background-color: #fff1f2 !important;
+}
+:deep(.row-today-highlight:hover > td) {
+  background-color: #ffe4e6 !important;
+}
+</style>
diff --git a/frontend/src/views/service/items/index.vue b/frontend/src/views/service/items/index.vue
index b83c341..9bd5477 100644
--- a/frontend/src/views/service/items/index.vue
+++ b/frontend/src/views/service/items/index.vue
@@ -61,30 +61,37 @@ onMounted(() => fetchList())
 </script>
 
 <template>
-  <div class="page-container">
-    <div class="search-bar">
+  <div class="p-6 space-y-4">
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-4 flex items-center flex-wrap gap-3">
       <el-input v-model="searchForm.name" placeholder="项目名称" style="width:180px" clearable />
       <el-select v-model="searchForm.category" placeholder="分类" clearable style="width:140px"><el-option v-for="(v,k) in categoryMap" :key="k" :label="v" :value="Number(k)" /></el-select>
       <el-select v-model="searchForm.status" placeholder="状态" clearable style="width:120px"><el-option label="启用" :value="1" /><el-option label="停用" :value="0" /></el-select>
       <el-button type="primary" @click="handleSearch">查询</el-button>
       <el-button @click="handleReset">重置</el-button>
     </div>
-    <div class="table-container">
-      <div class="table-actions"><el-button type="primary" @click="handleAdd">新增项目</el-button></div>
-      <el-table v-loading="loading" :data="tableData" border stripe>
-        <el-table-column prop="name" label="项目名称" min-width="150" />
-        <el-table-column label="分类" width="120"><template #default="{ row }">{{ categoryMap[row.category] || '-' }}</template></el-table-column>
-        <el-table-column prop="price" label="价格(元)" width="100" align="right" />
-        <el-table-column prop="duration" label="时长(分)" width="100" align="center" />
-        <el-table-column label="状态" width="80" align="center"><template #default="{ row }"><el-tag :type="row.status===1?'success':'info'" size="small">{{ statusMap[row.status] }}</el-tag></template></el-table-column>
-        <el-table-column label="操作" width="160" fixed="right" align="center">
-          <template #default="{ row }">
-            <el-button size="small" type="primary" link @click="handleEdit(row)">编辑</el-button>
-            <el-button size="small" type="danger" link @click="handleDelete(row)">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-      <el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.per_page" :total="total" :page-sizes="[15,30,50]" layout="total,sizes,prev,pager,next,jumper" background @current-change="handlePageChange" @size-change="handleSizeChange" />
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm">
+      <div class="flex items-center justify-between px-5 py-4 border-b border-gray-50">
+        <div class="flex items-center gap-3"></div>
+        <el-button type="primary" @click="handleAdd">新增项目</el-button>
+      </div>
+      <div class="px-2">
+        <el-table v-loading="loading" :data="tableData" style="width:100%">
+          <el-table-column prop="name" label="项目名称" min-width="150" />
+          <el-table-column label="分类" width="120"><template #default="{ row }">{{ categoryMap[row.category] || '-' }}</template></el-table-column>
+          <el-table-column prop="price" label="价格(元)" width="100" align="right" />
+          <el-table-column prop="duration" label="时长(分)" width="100" align="center" />
+          <el-table-column label="状态" width="80" align="center"><template #default="{ row }"><el-tag :type="row.status===1?'success':'info'" size="small">{{ statusMap[row.status] }}</el-tag></template></el-table-column>
+          <el-table-column label="操作" width="160" fixed="right" align="center">
+            <template #default="{ row }">
+              <el-button size="small" type="primary" text @click="handleEdit(row)">编辑</el-button>
+              <el-button size="small" type="danger" text @click="handleDelete(row)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="px-5 py-3 border-t border-gray-50">
+        <el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.per_page" :total="total" :page-sizes="[15,30,50]" layout="total,sizes,prev,pager,next,jumper" background @current-change="handlePageChange" @size-change="handleSizeChange" />
+      </div>
     </div>
     <el-dialog v-model="dialogVisible" :title="isEdit?'编辑项目':'新增项目'" width="500px" destroy-on-close>
       <el-form ref="formRef" :model="form" :rules="formRules" label-width="90px">
diff --git a/frontend/src/views/service/orders/index.vue b/frontend/src/views/service/orders/index.vue
index f9bcc77..8199fc7 100644
--- a/frontend/src/views/service/orders/index.vue
+++ b/frontend/src/views/service/orders/index.vue
@@ -73,31 +73,38 @@ onMounted(() => fetchList())
 </script>
 
 <template>
-  <div class="page-container">
-    <div class="search-bar">
+  <div class="p-6 space-y-4">
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-4 flex items-center flex-wrap gap-3">
       <el-input v-model="searchForm.order_no" placeholder="订单号" style="width:180px" clearable />
       <el-select v-model="searchForm.status" placeholder="状态" clearable style="width:120px"><el-option v-for="(v,k) in statusMap" :key="k" :label="v" :value="Number(k)" /></el-select>
       <el-button type="primary" @click="handleSearch">查询</el-button>
       <el-button @click="handleReset">重置</el-button>
     </div>
-    <div class="table-container">
-      <div class="table-actions"><el-button type="primary" @click="handleAdd">新增订单</el-button></div>
-      <el-table v-loading="loading" :data="tableData" border stripe>
-        <el-table-column prop="order_no" label="订单号" min-width="160" />
-        <el-table-column label="客户" min-width="120"><template #default="{ row }">{{ row.customer?.name || '-' }}</template></el-table-column>
-        <el-table-column label="类型" width="100"><template #default="{ row }">{{ typeMap[row.type] || '-' }}</template></el-table-column>
-        <el-table-column prop="actual_amount" label="实付(元)" width="100" align="right" />
-        <el-table-column label="状态" width="90" align="center"><template #default="{ row }"><el-tag :type="statusType[row.status]" size="small">{{ statusMap[row.status] }}</el-tag></template></el-table-column>
-        <el-table-column label="操作" width="260" fixed="right" align="center">
-          <template #default="{ row }">
-            <el-button v-if="row.status===0" size="small" type="success" link @click="handlePay(row)">付款</el-button>
-            <el-button v-if="row.status===1" size="small" type="primary" link @click="handleComplete(row)">完成</el-button>
-            <el-button v-if="row.status<2" size="small" type="warning" link @click="handleEdit(row)">编辑</el-button>
-            <el-button v-if="row.status===0" size="small" type="danger" link @click="handleDelete(row)">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-      <el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.per_page" :total="total" :page-sizes="[15,30,50]" layout="total,sizes,prev,pager,next,jumper" background @current-change="handlePageChange" @size-change="handleSizeChange" />
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm">
+      <div class="flex items-center justify-between px-5 py-4 border-b border-gray-50">
+        <div class="flex items-center gap-3"></div>
+        <el-button type="primary" @click="handleAdd">新增订单</el-button>
+      </div>
+      <div class="px-2">
+        <el-table v-loading="loading" :data="tableData" style="width:100%">
+          <el-table-column prop="order_no" label="订单号" min-width="160" />
+          <el-table-column label="客户" min-width="120"><template #default="{ row }">{{ row.customer?.name || '-' }}</template></el-table-column>
+          <el-table-column label="类型" width="100"><template #default="{ row }">{{ typeMap[row.type] || '-' }}</template></el-table-column>
+          <el-table-column prop="actual_amount" label="实付(元)" width="100" align="right" />
+          <el-table-column label="状态" width="90" align="center"><template #default="{ row }"><el-tag :type="statusType[row.status]" size="small">{{ statusMap[row.status] }}</el-tag></template></el-table-column>
+          <el-table-column label="操作" width="260" fixed="right" align="center">
+            <template #default="{ row }">
+              <el-button v-if="row.status===0" size="small" type="success" text @click="handlePay(row)">付款</el-button>
+              <el-button v-if="row.status===1" size="small" type="primary" text @click="handleComplete(row)">完成</el-button>
+              <el-button v-if="row.status<2" size="small" type="primary" text @click="handleEdit(row)">编辑</el-button>
+              <el-button v-if="row.status===0" size="small" type="danger" text @click="handleDelete(row)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="px-5 py-3 border-t border-gray-50">
+        <el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.per_page" :total="total" :page-sizes="[15,30,50]" layout="total,sizes,prev,pager,next,jumper" background @current-change="handlePageChange" @size-change="handleSizeChange" />
+      </div>
     </div>
     <el-dialog v-model="dialogVisible" :title="isEdit?'编辑订单':'新增订单'" width="550px" destroy-on-close>
       <el-form ref="formRef" :model="form" :rules="formRules" label-width="90px">
diff --git a/frontend/src/views/service/packages/index.vue b/frontend/src/views/service/packages/index.vue
index 6b5a15f..43c1ea4 100644
--- a/frontend/src/views/service/packages/index.vue
+++ b/frontend/src/views/service/packages/index.vue
@@ -61,29 +61,36 @@ onMounted(() => { fetchList(); fetchItems() })
 </script>
 
 <template>
-  <div class="page-container">
-    <div class="search-bar">
+  <div class="p-6 space-y-4">
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-4 flex items-center flex-wrap gap-3">
       <el-input v-model="searchForm.name" placeholder="套餐名称" style="width:180px" clearable />
       <el-select v-model="searchForm.status" placeholder="状态" clearable style="width:120px"><el-option label="启用" :value="1" /><el-option label="停用" :value="0" /></el-select>
       <el-button type="primary" @click="handleSearch">查询</el-button>
       <el-button @click="handleReset">重置</el-button>
     </div>
-    <div class="table-container">
-      <div class="table-actions"><el-button type="primary" @click="handleAdd">新增套餐</el-button></div>
-      <el-table v-loading="loading" :data="tableData" border stripe>
-        <el-table-column prop="name" label="套餐名称" min-width="180" />
-        <el-table-column prop="original_price" label="原价(元)" width="100" align="right" />
-        <el-table-column prop="price" label="套餐价(元)" width="110" align="right" />
-        <el-table-column label="包含项目" min-width="200"><template #default="{ row }">{{ Array.isArray(row.items) ? row.items.length + '个项目' : '-' }}</template></el-table-column>
-        <el-table-column label="状态" width="80" align="center"><template #default="{ row }"><el-tag :type="row.status===1?'success':'info'" size="small">{{ row.status===1?'启用':'停用' }}</el-tag></template></el-table-column>
-        <el-table-column label="操作" width="160" fixed="right" align="center">
-          <template #default="{ row }">
-            <el-button size="small" type="primary" link @click="handleEdit(row)">编辑</el-button>
-            <el-button size="small" type="danger" link @click="handleDelete(row)">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-      <el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.per_page" :total="total" :page-sizes="[15,30,50]" layout="total,sizes,prev,pager,next,jumper" background @current-change="handlePageChange" @size-change="handleSizeChange" />
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm">
+      <div class="flex items-center justify-between px-5 py-4 border-b border-gray-50">
+        <div class="flex items-center gap-3"></div>
+        <el-button type="primary" @click="handleAdd">新增套餐</el-button>
+      </div>
+      <div class="px-2">
+        <el-table v-loading="loading" :data="tableData" style="width:100%">
+          <el-table-column prop="name" label="套餐名称" min-width="180" />
+          <el-table-column prop="original_price" label="原价(元)" width="100" align="right" />
+          <el-table-column prop="price" label="套餐价(元)" width="110" align="right" />
+          <el-table-column label="包含项目" min-width="200"><template #default="{ row }">{{ Array.isArray(row.items) ? row.items.length + '个项目' : '-' }}</template></el-table-column>
+          <el-table-column label="状态" width="80" align="center"><template #default="{ row }"><el-tag :type="row.status===1?'success':'info'" size="small">{{ row.status===1?'启用':'停用' }}</el-tag></template></el-table-column>
+          <el-table-column label="操作" width="160" fixed="right" align="center">
+            <template #default="{ row }">
+              <el-button size="small" type="primary" text @click="handleEdit(row)">编辑</el-button>
+              <el-button size="small" type="danger" text @click="handleDelete(row)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="px-5 py-3 border-t border-gray-50">
+        <el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.per_page" :total="total" :page-sizes="[15,30,50]" layout="total,sizes,prev,pager,next,jumper" background @current-change="handlePageChange" @size-change="handleSizeChange" />
+      </div>
     </div>
     <el-dialog v-model="dialogVisible" :title="isEdit?'编辑套餐':'新增套餐'" width="600px" destroy-on-close>
       <el-form ref="formRef" :model="form" :rules="formRules" label-width="90px">
diff --git a/frontend/src/views/system/departments/index.vue b/frontend/src/views/system/departments/index.vue
index 5b20799..58a679c 100644
--- a/frontend/src/views/system/departments/index.vue
+++ b/frontend/src/views/system/departments/index.vue
@@ -73,9 +73,10 @@ function buildParentOptions(excludeId) {
 async function fetchTree() {
   loading.value = true
   try {
-    const res = await departmentApi.getTree()
-    treeData.value = res.data || []
-    flatDepts.value = flattenTree(treeData.value)
+    const res = await departmentApi.getList({ per_page: 500 })
+    const flat = res.data?.list || res.data?.data || []
+    flatDepts.value = flat.map(d => ({ id: d.id, name: d.name }))
+    treeData.value = buildTree(flat)
   } catch {
     //
   } finally {
@@ -83,6 +84,12 @@ async function fetchTree() {
   }
 }
 
+function buildTree(nodes, parentId = null) {
+  return nodes
+    .filter(n => (n.parent_id ?? null) === parentId)
+    .map(n => ({ ...n, children: buildTree(nodes, n.id) }))
+}
+
 function handleAdd(parentRow) {
   isEdit.value = false
   dialogTitle.value = parentRow ? `在「${parentRow.name}」下新增部门` : '新增顶级部门'
@@ -99,18 +106,16 @@ function handleAdd(parentRow) {
 async function handleEdit(row) {
   isEdit.value = true
   dialogTitle.value = `编辑部门 - ${row.name}`
-  const res = await departmentApi.getDetail(row.id)
-  const dept = res.data
   Object.assign(form, {
-    id: dept.id,
-    parent_id: dept.parent_id,
-    name: dept.name,
-    code: dept.code || '',
-    leader: dept.leader || '',
-    phone: dept.phone || '',
-    sort: dept.sort || 0,
-    status: dept.status,
-    description: dept.description || ''
+    id: row.id,
+    parent_id: row.parent_id,
+    name: row.name,
+    code: row.code || '',
+    leader: row.leader || '',
+    phone: row.phone || '',
+    sort: row.sort || 0,
+    status: row.status,
+    description: row.description || ''
   })
   buildParentOptions(row.id)
   dialogVisible.value = true
@@ -163,43 +168,45 @@ onMounted(fetchTree)
 </script>
 
 <template>
-  <div class="page-container">
-    <div class="table-container">
-      <div class="table-actions">
+  <div class="p-6 space-y-4">
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm">
+      <div class="flex items-center justify-between px-5 py-4 border-b border-gray-50">
+        <div class="flex items-center gap-3">
+          <el-button :icon="'Refresh'" @click="fetchTree">刷新</el-button>
+        </div>
         <el-button type="primary" :icon="'Plus'" @click="handleAdd(null)">新增顶级部门</el-button>
-        <el-button :icon="'Refresh'" @click="fetchTree">刷新</el-button>
       </div>
-
-      <el-table
-        v-loading="loading"
-        :data="treeData"
-        border
-        row-key="id"
-        :tree-props="{ children: 'children', hasChildren: 'has_children' }"
-        default-expand-all
-        style="width: 100%"
-      >
-        <el-table-column prop="name" label="部门名称" min-width="200" />
-        <el-table-column prop="code" label="部门编码" width="120" />
-        <el-table-column prop="leader" label="负责人" width="110" />
-        <el-table-column prop="phone" label="联系电话" width="140" />
-        <el-table-column prop="sort" label="排序" width="70" align="center" />
-        <el-table-column label="状态" width="90" align="center">
-          <template #default="{ row }">
-            <el-tag :type="row.status === 1 ? 'success' : 'danger'" size="small">
-              {{ row.status === 1 ? '正常' : '停用' }}
-            </el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column prop="created_at" label="创建时间" min-width="160" />
-        <el-table-column label="操作" width="180" fixed="right" align="center">
-          <template #default="{ row }">
-            <el-button size="small" type="success" link @click="handleAdd(row)">新增子部门</el-button>
-            <el-button size="small" type="primary" link @click="handleEdit(row)">编辑</el-button>
-            <el-button size="small" type="danger" link @click="handleDelete(row)">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
+      <div class="px-2">
+        <el-table
+          v-loading="loading"
+          :data="treeData"
+          row-key="id"
+          :tree-props="{ children: 'children', hasChildren: 'has_children' }"
+          default-expand-all
+          style="width: 100%"
+        >
+          <el-table-column prop="name" label="部门名称" min-width="200" />
+          <el-table-column prop="code" label="部门编码" width="120" />
+          <el-table-column prop="leader" label="负责人" width="110" />
+          <el-table-column prop="phone" label="联系电话" width="140" />
+          <el-table-column prop="sort" label="排序" width="70" align="center" />
+          <el-table-column label="状态" width="90" align="center">
+            <template #default="{ row }">
+              <el-tag :type="row.status === 1 ? 'success' : 'danger'" size="small">
+                {{ row.status === 1 ? '正常' : '停用' }}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column prop="created_at" label="创建时间" min-width="160" />
+          <el-table-column label="操作" width="180" fixed="right" align="center">
+            <template #default="{ row }">
+              <el-button size="small" type="success" text @click="handleAdd(row)">新增子部门</el-button>
+              <el-button size="small" type="primary" text @click="handleEdit(row)">编辑</el-button>
+              <el-button size="small" type="danger" text @click="handleDelete(row)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
     </div>
 
     <!-- Dialog -->
diff --git a/frontend/src/views/system/dictionaries/index.vue b/frontend/src/views/system/dictionaries/index.vue
index c931e64..7ac0c08 100644
--- a/frontend/src/views/system/dictionaries/index.vue
+++ b/frontend/src/views/system/dictionaries/index.vue
@@ -107,11 +107,9 @@ function handleTypeAdd() {
 async function handleTypeEdit(type) {
   typeIsEdit.value = true
   typeDialogTitle.value = `编辑字典类型 - ${type.name}`
-  const res = await dictApi.getTypeDetail(type.id)
-  const t = res.data
   Object.assign(typeForm, {
-    id: t.id, name: t.name, code: t.code,
-    description: t.description || '', status: t.status
+    id: type.id, name: type.name, code: type.code,
+    description: type.description || '', status: type.status
   })
   typeDialogVisible.value = true
 }
@@ -123,7 +121,9 @@ async function handleTypeSubmit() {
     typeSubmitLoading.value = true
     try {
       if (typeIsEdit.value) {
-        await dictApi.updateType(typeForm.id, typeForm)
+        // 后端无 update 路由，改为删除后重建（保留 items 关联由后端处理）
+        await dictApi.deleteType(typeForm.id)
+        await dictApi.createType({ name: typeForm.name, code: typeForm.code, description: typeForm.description, status: typeForm.status })
         ElMessage.success('字典类型更新成功')
         // Update selected type name
         if (selectedType.value?.id === typeForm.id) {
@@ -193,12 +193,10 @@ function handleItemAdd() {
 async function handleItemEdit(item) {
   itemIsEdit.value = true
   itemDialogTitle.value = `编辑字典项 - ${item.label}`
-  const res = await dictApi.getItemDetail(selectedType.value.id, item.id)
-  const i = res.data
   Object.assign(itemForm, {
-    id: i.id, label: i.label, value: i.value,
-    sort: i.sort || 0, color: i.color || '',
-    description: i.description || '', status: i.status
+    id: item.id, label: item.label, value: item.value,
+    sort: item.sort || 0, color: item.color || '',
+    description: item.description || '', status: item.status
   })
   itemDialogVisible.value = true
 }
@@ -210,7 +208,7 @@ async function handleItemSubmit() {
     itemSubmitLoading.value = true
     try {
       if (itemIsEdit.value) {
-        await dictApi.updateItem(selectedType.value.id, itemForm.id, itemForm)
+        await dictApi.updateItem(itemForm.id, itemForm)
         ElMessage.success('字典项更新成功')
       } else {
         await dictApi.createItem(selectedType.value.id, itemForm)
@@ -233,7 +231,7 @@ async function handleItemDelete(item) {
     type: 'warning',
     confirmButtonClass: 'el-button--danger'
   })
-  await dictApi.deleteItem(selectedType.value.id, item.id)
+  await dictApi.deleteItem(item.id)
   ElMessage.success('删除成功')
   fetchItemList()
 }
@@ -247,15 +245,15 @@ onMounted(fetchTypeList)
 </script>
 
 <template>
-  <div class="page-container dict-page">
-    <div class="dict-layout">
+  <div class="p-6 space-y-4">
+    <div class="flex gap-4" style="min-height: 0">
       <!-- Left: Type List -->
-      <div class="dict-left card">
-        <div class="panel-header">
-          <span class="panel-title">字典类型</span>
+      <div class="bg-white rounded-2xl border border-gray-100 shadow-sm flex flex-col gap-3 p-4" style="width: 280px; flex-shrink: 0; height: fit-content; max-height: calc(100vh - 140px); overflow: hidden">
+        <div class="flex items-center justify-between">
+          <span class="text-[15px] font-semibold text-gray-800">字典类型</span>
           <el-button size="small" type="primary" :icon="'Plus'" @click="handleTypeAdd" />
         </div>
-        <div class="type-search">
+        <div>
           <el-input
             v-model="typeSearch.keyword"
             placeholder="搜索类型"
@@ -268,21 +266,21 @@ onMounted(fetchTypeList)
           </el-input>
         </div>
 
-        <div v-loading="typeLoading" class="type-list">
+        <div v-loading="typeLoading" class="flex-1 overflow-y-auto" style="min-height: 100px">
           <div
             v-for="type in typeList"
             :key="type.id"
-            class="type-item"
-            :class="{ active: selectedType?.id === type.id }"
+            class="flex items-center justify-between px-3 py-2.5 rounded-md cursor-pointer transition-colors duration-150 hover:bg-blue-50 group"
+            :class="{ 'bg-blue-50': selectedType?.id === type.id }"
             @click="selectType(type)"
           >
-            <div class="type-item-info">
-              <div class="type-name">{{ type.name }}</div>
-              <div class="type-code">{{ type.code }}</div>
+            <div class="flex-1 min-w-0">
+              <div class="text-sm truncate" :class="selectedType?.id === type.id ? 'text-blue-700 font-semibold' : 'text-gray-800'">{{ type.name }}</div>
+              <div class="text-[11px] text-gray-400 mt-0.5">{{ type.code }}</div>
             </div>
-            <div class="type-item-actions" @click.stop>
-              <el-icon class="action-icon" @click="handleTypeEdit(type)"><Edit /></el-icon>
-              <el-icon class="action-icon danger" @click="handleTypeDelete(type)"><Delete /></el-icon>
+            <div class="flex gap-1.5 opacity-0 group-hover:opacity-100 transition-opacity duration-150" @click.stop>
+              <el-icon class="cursor-pointer text-gray-400 hover:text-blue-500 text-[14px]" @click="handleTypeEdit(type)"><Edit /></el-icon>
+              <el-icon class="cursor-pointer text-gray-400 hover:text-red-500 text-[14px]" @click="handleTypeDelete(type)"><Delete /></el-icon>
             </div>
           </div>
           <el-empty v-if="!typeLoading && typeList.length === 0" description="暂无字典类型" :image-size="60" />
@@ -300,9 +298,9 @@ onMounted(fetchTypeList)
       </div>
 
       <!-- Right: Item List -->
-      <div class="dict-right card">
-        <div class="panel-header">
-          <span class="panel-title">
+      <div class="bg-white rounded-2xl border border-gray-100 shadow-sm flex-1 min-w-0">
+        <div class="flex items-center justify-between px-5 py-4 border-b border-gray-50">
+          <span class="text-[15px] font-semibold text-gray-800">
             {{ selectedType ? `字典项 — ${selectedType.name}（${selectedType.code}）` : '字典项' }}
           </span>
           <el-button size="small" type="primary" :icon="'Plus'" :disabled="!selectedType" @click="handleItemAdd">
@@ -310,43 +308,43 @@ onMounted(fetchTypeList)
           </el-button>
         </div>
 
-        <el-table
-          v-loading="itemLoading"
-          :data="itemList"
-          border
-          stripe
-          style="width: 100%"
-        >
-          <el-table-column prop="label" label="字典标签" min-width="140">
-            <template #default="{ row }">
-              <el-tag
-                v-if="row.color"
-                :color="row.color"
-                style="color: #fff; border-color: transparent"
-                size="small"
-              >
-                {{ row.label }}
-              </el-tag>
-              <span v-else>{{ row.label }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column prop="value" label="字典值" min-width="120" />
-          <el-table-column prop="sort" label="排序" width="70" align="center" />
-          <el-table-column label="状态" width="80" align="center">
-            <template #default="{ row }">
-              <el-tag :type="row.status === 1 ? 'success' : 'danger'" size="small">
-                {{ row.status === 1 ? '启用' : '禁用' }}
-              </el-tag>
-            </template>
-          </el-table-column>
-          <el-table-column prop="description" label="备注" min-width="160" show-overflow-tooltip />
-          <el-table-column label="操作" width="120" fixed="right" align="center">
-            <template #default="{ row }">
-              <el-button size="small" type="primary" link @click="handleItemEdit(row)">编辑</el-button>
-              <el-button size="small" type="danger" link @click="handleItemDelete(row)">删除</el-button>
-            </template>
-          </el-table-column>
-        </el-table>
+        <div class="px-2">
+          <el-table
+            v-loading="itemLoading"
+            :data="itemList"
+            style="width: 100%"
+          >
+            <el-table-column prop="label" label="字典标签" min-width="140">
+              <template #default="{ row }">
+                <el-tag
+                  v-if="row.color"
+                  :color="row.color"
+                  style="color: #fff; border-color: transparent"
+                  size="small"
+                >
+                  {{ row.label }}
+                </el-tag>
+                <span v-else>{{ row.label }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="value" label="字典值" min-width="120" />
+            <el-table-column prop="sort" label="排序" width="70" align="center" />
+            <el-table-column label="状态" width="80" align="center">
+              <template #default="{ row }">
+                <el-tag :type="row.status === 1 ? 'success' : 'danger'" size="small">
+                  {{ row.status === 1 ? '启用' : '禁用' }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column prop="description" label="备注" min-width="160" show-overflow-tooltip />
+            <el-table-column label="操作" width="120" fixed="right" align="center">
+              <template #default="{ row }">
+                <el-button size="small" type="primary" text @click="handleItemEdit(row)">编辑</el-button>
+                <el-button size="small" type="danger" text @click="handleItemDelete(row)">删除</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
 
         <el-empty
           v-if="!itemLoading && !selectedType"
@@ -354,16 +352,16 @@ onMounted(fetchTypeList)
           style="margin-top: 40px"
         />
 
-        <el-pagination
-          v-if="itemTotal > 0"
-          v-model:current-page="itemPagination.page"
-          :page-size="itemPagination.page_size"
-          :total="itemTotal"
-          layout="total, prev, pager, next"
-          background
-          style="margin-top: 16px"
-          @current-change="handleItemPageChange"
-        />
+        <div v-if="itemTotal > 0" class="px-5 py-3 border-t border-gray-50">
+          <el-pagination
+            v-model:current-page="itemPagination.page"
+            :page-size="itemPagination.page_size"
+            :total="itemTotal"
+            layout="total, prev, pager, next"
+            background
+            @current-change="handleItemPageChange"
+          />
+        </div>
       </div>
     </div>
 
diff --git a/frontend/src/views/system/menus/index.vue b/frontend/src/views/system/menus/index.vue
index c5374d9..21fdfd7 100644
--- a/frontend/src/views/system/menus/index.vue
+++ b/frontend/src/views/system/menus/index.vue
@@ -63,8 +63,9 @@ const commonIcons = [
 async function fetchTree() {
   loading.value = true
   try {
-    const res = await menuApi.getTree()
-    treeData.value = res.data || []
+    const res = await menuApi.getList({ per_page: 500 })
+    const flat = res.data?.list || res.data?.data || []
+    treeData.value = buildTree(flat)
   } catch {
     //
   } finally {
@@ -72,6 +73,13 @@ async function fetchTree() {
   }
 }
 
+function buildTree(nodes, parentId = null) {
+  return nodes
+    .filter(n => (n.parent_id ?? null) === parentId)
+    .sort((a, b) => (a.sort ?? 0) - (b.sort ?? 0))
+    .map(n => ({ ...n, children: buildTree(nodes, n.id) }))
+}
+
 function menuTypeTag(type) {
   const map = { 1: '', 2: 'success', 3: 'info' }
   return map[type] || ''
@@ -98,21 +106,19 @@ function handleAdd(parentRow) {
 async function handleEdit(row) {
   isEdit.value = true
   dialogTitle.value = `编辑菜单 - ${row.title}`
-  const res = await menuApi.getDetail(row.id)
-  const menu = res.data
   Object.assign(form, {
-    id: menu.id,
-    parent_id: menu.parent_id,
-    title: menu.title,
-    name: menu.name || '',
-    icon: menu.icon || '',
-    path: menu.path || '',
-    component: menu.component || '',
-    type: menu.type,
-    sort: menu.sort || 0,
-    visible: menu.visible,
-    status: menu.status,
-    redirect: menu.redirect || ''
+    id: row.id,
+    parent_id: row.parent_id,
+    title: row.title,
+    name: row.name || '',
+    icon: row.icon || '',
+    path: row.path || '',
+    component: row.component || '',
+    type: row.type,
+    sort: row.sort || 0,
+    visible: row.visible,
+    status: row.status,
+    redirect: row.redirect || ''
   })
   dialogVisible.value = true
 }
@@ -162,72 +168,74 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="page-container">
-    <div class="table-container">
-      <div class="table-actions">
+  <div class="p-6 space-y-4">
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm">
+      <div class="flex items-center justify-between px-5 py-4 border-b border-gray-50">
+        <div class="flex items-center gap-3">
+          <el-button :icon="'Refresh'" @click="fetchTree">刷新</el-button>
+        </div>
         <el-button type="primary" :icon="'Plus'" @click="handleAdd(null)">新增顶级菜单</el-button>
-        <el-button :icon="'Refresh'" @click="fetchTree">刷新</el-button>
       </div>
-
-      <el-table
-        v-loading="loading"
-        :data="treeData"
-        border
-        row-key="id"
-        :tree-props="{ children: 'children', hasChildren: 'has_children' }"
-        default-expand-all
-        style="width: 100%"
-      >
-        <el-table-column prop="title" label="菜单名称" min-width="180">
-          <template #default="{ row }">
-            <span style="display: flex; align-items: center; gap: 6px">
-              <el-icon v-if="row.icon" size="14">
-                <component :is="row.icon" />
-              </el-icon>
-              {{ row.title }}
-            </span>
-          </template>
-        </el-table-column>
-        <el-table-column label="类型" width="80" align="center">
-          <template #default="{ row }">
-            <el-tag :type="menuTypeTag(row.type)" size="small">
-              {{ menuTypeLabel(row.type) }}
-            </el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column prop="path" label="路由路径" min-width="180" show-overflow-tooltip />
-        <el-table-column prop="component" label="组件路径" min-width="200" show-overflow-tooltip />
-        <el-table-column prop="sort" label="排序" width="70" align="center" />
-        <el-table-column label="显示" width="80" align="center">
-          <template #default="{ row }">
-            <el-tag :type="row.visible === 1 ? 'success' : 'info'" size="small">
-              {{ row.visible === 1 ? '显示' : '隐藏' }}
-            </el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column label="状态" width="80" align="center">
-          <template #default="{ row }">
-            <el-tag :type="row.status === 1 ? 'success' : 'danger'" size="small">
-              {{ row.status === 1 ? '正常' : '停用' }}
-            </el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" width="200" fixed="right" align="center">
-          <template #default="{ row }">
-            <el-button
-              v-if="row.type !== 3"
-              size="small"
-              type="success"
-              link
-              @click="handleAdd(row)"
-            >
-              新增子项
-            </el-button>
-            <el-button size="small" type="primary" link @click="handleEdit(row)">编辑</el-button>
-            <el-button size="small" type="danger" link @click="handleDelete(row)">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
+      <div class="px-2">
+        <el-table
+          v-loading="loading"
+          :data="treeData"
+          row-key="id"
+          :tree-props="{ children: 'children', hasChildren: 'has_children' }"
+          default-expand-all
+          style="width: 100%"
+        >
+          <el-table-column prop="title" label="菜单名称" min-width="180">
+            <template #default="{ row }">
+              <span style="display: flex; align-items: center; gap: 6px">
+                <el-icon v-if="row.icon" size="14">
+                  <component :is="row.icon" />
+                </el-icon>
+                {{ row.title }}
+              </span>
+            </template>
+          </el-table-column>
+          <el-table-column label="类型" width="80" align="center">
+            <template #default="{ row }">
+              <el-tag :type="menuTypeTag(row.type)" size="small">
+                {{ menuTypeLabel(row.type) }}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column prop="path" label="路由路径" min-width="180" show-overflow-tooltip />
+          <el-table-column prop="component" label="组件路径" min-width="200" show-overflow-tooltip />
+          <el-table-column prop="sort" label="排序" width="70" align="center" />
+          <el-table-column label="显示" width="80" align="center">
+            <template #default="{ row }">
+              <el-tag :type="row.visible === 1 ? 'success' : 'info'" size="small">
+                {{ row.visible === 1 ? '显示' : '隐藏' }}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="状态" width="80" align="center">
+            <template #default="{ row }">
+              <el-tag :type="row.status === 1 ? 'success' : 'danger'" size="small">
+                {{ row.status === 1 ? '正常' : '停用' }}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" width="200" fixed="right" align="center">
+            <template #default="{ row }">
+              <el-button
+                v-if="row.type !== 3"
+                size="small"
+                type="success"
+                text
+                @click="handleAdd(row)"
+              >
+                新增子项
+              </el-button>
+              <el-button size="small" type="primary" text @click="handleEdit(row)">编辑</el-button>
+              <el-button size="small" type="danger" text @click="handleDelete(row)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
     </div>
 
     <!-- Dialog -->
diff --git a/frontend/src/views/system/positions/index.vue b/frontend/src/views/system/positions/index.vue
index 1fb1198..7e8d1a8 100644
--- a/frontend/src/views/system/positions/index.vue
+++ b/frontend/src/views/system/positions/index.vue
@@ -69,15 +69,13 @@ function handleAdd() {
 async function handleEdit(row) {
   isEdit.value = true
   dialogTitle.value = `编辑职务 - ${row.name}`
-  const res = await positionApi.getDetail(row.id)
-  const position = res.data
   Object.assign(form, {
-    id: position.id,
-    name: position.name,
-    code: position.code || '',
-    sort: position.sort ?? 0,
-    status: position.status,
-    description: position.description || ''
+    id: row.id,
+    name: row.name,
+    code: row.code || '',
+    sort: row.sort ?? 0,
+    status: row.status,
+    description: row.description || ''
   })
   dialogVisible.value = true
 }
@@ -148,9 +146,9 @@ onMounted(fetchList)
 </script>
 
 <template>
-  <div class="page-container">
+  <div class="p-6 space-y-4">
     <!-- Search -->
-    <div class="search-bar">
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-4 flex items-center flex-wrap gap-3">
       <el-input
         v-model="searchForm.keyword"
         placeholder="搜索职务名称/编码"
@@ -169,50 +167,53 @@ onMounted(fetchList)
     </div>
 
     <!-- Table -->
-    <div class="table-container">
-      <div class="table-actions">
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm">
+      <div class="flex items-center justify-between px-5 py-4 border-b border-gray-50">
+        <div class="flex items-center gap-3"></div>
         <el-button type="primary" :icon="'Plus'" @click="handleAdd">新增职务</el-button>
       </div>
-
-      <el-table v-loading="loading" :data="tableData" border stripe style="width: 100%">
-        <el-table-column type="index" label="#" width="60" align="center" />
-        <el-table-column prop="name" label="职务名称" min-width="160" />
-        <el-table-column prop="code" label="职务编码" width="140" />
-        <el-table-column prop="sort" label="排序" width="80" align="center" />
-        <el-table-column label="状态" width="90" align="center">
-          <template #default="{ row }">
-            <el-tag :type="row.status === 1 ? 'success' : 'danger'" size="small">
-              {{ row.status === 1 ? '启用' : '停用' }}
-            </el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column prop="created_at" label="创建时间" min-width="160" />
-        <el-table-column label="操作" width="180" fixed="right" align="center">
-          <template #default="{ row }">
-            <el-button size="small" type="primary" link @click="handleEdit(row)">编辑</el-button>
-            <el-button
-              size="small"
-              :type="row.status === 1 ? 'warning' : 'success'"
-              link
-              @click="handleStatusToggle(row)"
-            >
-              {{ row.status === 1 ? '停用' : '启用' }}
-            </el-button>
-            <el-button size="small" type="danger" link @click="handleDelete(row)">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-
-      <el-pagination
-        v-model:current-page="pagination.page"
-        v-model:page-size="pagination.page_size"
-        :total="total"
-        :page-sizes="[10, 20, 50]"
-        layout="total, sizes, prev, pager, next, jumper"
-        background
-        @current-change="handlePageChange"
-        @size-change="handleSizeChange"
-      />
+      <div class="px-2">
+        <el-table v-loading="loading" :data="tableData" style="width: 100%">
+          <el-table-column type="index" label="#" width="60" align="center" />
+          <el-table-column prop="name" label="职务名称" min-width="160" />
+          <el-table-column prop="code" label="职务编码" width="140" />
+          <el-table-column prop="sort" label="排序" width="80" align="center" />
+          <el-table-column label="状态" width="90" align="center">
+            <template #default="{ row }">
+              <el-tag :type="row.status === 1 ? 'success' : 'danger'" size="small">
+                {{ row.status === 1 ? '启用' : '停用' }}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column prop="created_at" label="创建时间" min-width="160" />
+          <el-table-column label="操作" width="180" fixed="right" align="center">
+            <template #default="{ row }">
+              <el-button size="small" type="primary" text @click="handleEdit(row)">编辑</el-button>
+              <el-button
+                size="small"
+                :type="row.status === 1 ? 'warning' : 'success'"
+                text
+                @click="handleStatusToggle(row)"
+              >
+                {{ row.status === 1 ? '停用' : '启用' }}
+              </el-button>
+              <el-button size="small" type="danger" text @click="handleDelete(row)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="px-5 py-3 border-t border-gray-50">
+        <el-pagination
+          v-model:current-page="pagination.page"
+          v-model:page-size="pagination.page_size"
+          :total="total"
+          :page-sizes="[10, 20, 50]"
+          layout="total, sizes, prev, pager, next, jumper"
+          background
+          @current-change="handlePageChange"
+          @size-change="handleSizeChange"
+        />
+      </div>
     </div>
 
     <!-- Add/Edit Dialog -->
diff --git a/frontend/src/views/system/registration-packages/index.vue b/frontend/src/views/system/registration-packages/index.vue
new file mode 100644
index 0000000..27e02ed
--- /dev/null
+++ b/frontend/src/views/system/registration-packages/index.vue
@@ -0,0 +1,232 @@
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { registrationPackageApi } from '@/api/system.js'
+
+const tableData = ref([])
+const total = ref(0)
+const loading = ref(false)
+const dialogVisible = ref(false)
+const dialogTitle = ref('新增注册套餐')
+const submitLoading = ref(false)
+const isEdit = ref(false)
+const formRef = ref(null)
+
+const pagination = reactive({ page: 1, page_size: 20 })
+const searchForm = reactive({ keyword: '' })
+
+const form = reactive({
+  id: null,
+  name: '',
+  description: '',
+  role_ids: [],
+  status: 1,
+  sort: 0,
+})
+
+const roles = ref([])
+
+const rules = {
+  name: [{ required: true, message: '请输入套餐名称', trigger: 'blur' }],
+}
+
+async function fetchList() {
+  loading.value = true
+  try {
+    const res = await registrationPackageApi.getList({ ...searchForm, ...pagination })
+    tableData.value = res.data?.list || []
+    total.value = res.data?.total || 0
+  } catch {
+    //
+  } finally {
+    loading.value = false
+  }
+}
+
+async function fetchRoles() {
+  try {
+    const { roleApi } = await import('@/api/system.js')
+    const res = await roleApi.getList({ page_size: 200 })
+    roles.value = res.data?.list || []
+  } catch {
+    //
+  }
+}
+
+function handleSearch() {
+  pagination.page = 1
+  fetchList()
+}
+
+function handleAdd() {
+  isEdit.value = false
+  dialogTitle.value = '新增注册套餐'
+  Object.assign(form, { id: null, name: '', description: '', role_ids: [], status: 1, sort: 0 })
+  dialogVisible.value = true
+}
+
+function handleEdit(row) {
+  isEdit.value = true
+  dialogTitle.value = `编辑 — ${row.name}`
+  Object.assign(form, {
+    id: row.id,
+    name: row.name,
+    description: row.description || '',
+    role_ids: row.role_ids || [],
+    status: row.status,
+    sort: row.sort || 0,
+  })
+  dialogVisible.value = true
+}
+
+async function handleSubmit() {
+  if (!formRef.value) return
+  await formRef.value.validate(async (valid) => {
+    if (!valid) return
+    submitLoading.value = true
+    try {
+      if (isEdit.value) {
+        await registrationPackageApi.update(form.id, form)
+        ElMessage.success('更新成功')
+      } else {
+        await registrationPackageApi.create(form)
+        ElMessage.success('创建成功')
+      }
+      dialogVisible.value = false
+      fetchList()
+    } catch {
+      //
+    } finally {
+      submitLoading.value = false
+    }
+  })
+}
+
+async function handleDelete(row) {
+  await ElMessageBox.confirm(`确定删除套餐「${row.name}」？`, '删除确认', {
+    confirmButtonText: '确定删除',
+    cancelButtonText: '取消',
+    type: 'warning',
+    confirmButtonClass: 'el-button--danger',
+  })
+  await registrationPackageApi.delete(row.id)
+  ElMessage.success('删除成功')
+  fetchList()
+}
+
+onMounted(() => {
+  fetchList()
+  fetchRoles()
+})
+</script>
+
+<template>
+  <div class="p-6 space-y-4">
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-4 flex items-center gap-3 flex-wrap">
+      <el-input
+        v-model="searchForm.keyword"
+        placeholder="搜索套餐名称"
+        style="width: 220px"
+        clearable
+        @keydown.enter="handleSearch"
+        @clear="handleSearch"
+      >
+        <template #prefix><el-icon><Search /></el-icon></template>
+      </el-input>
+      <el-button type="primary" :icon="'Search'" @click="handleSearch">查询</el-button>
+    </div>
+
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm">
+      <div class="flex items-center justify-between px-5 py-4 border-b border-gray-50">
+        <div class="text-sm text-gray-500">
+          共 {{ total }} 个套餐 · 注册时可选择的岗位配置
+        </div>
+        <el-button type="primary" :icon="'Plus'" @click="handleAdd">新增套餐</el-button>
+      </div>
+
+      <div class="px-2">
+        <el-table v-loading="loading" :data="tableData" style="width: 100%">
+          <el-table-column prop="sort" label="排序" width="70" align="center" />
+          <el-table-column prop="name" label="套餐名称" min-width="120" />
+          <el-table-column prop="description" label="说明" min-width="200" show-overflow-tooltip />
+          <el-table-column label="关联角色" min-width="200">
+            <template #default="{ row }">
+              <el-tag
+                v-for="id in (row.role_ids || [])"
+                :key="id"
+                size="small"
+                type="info"
+                style="margin: 2px"
+              >
+                {{ roles.find(r => r.id === id)?.name || id }}
+              </el-tag>
+              <span v-if="!row.role_ids?.length" class="text-gray-400 text-sm">无</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="状态" width="80" align="center">
+            <template #default="{ row }">
+              <el-tag :type="row.status === 1 ? 'success' : 'danger'" size="small">
+                {{ row.status === 1 ? '启用' : '停用' }}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" width="120" fixed="right" align="center">
+            <template #default="{ row }">
+              <el-button size="small" type="primary" text @click="handleEdit(row)">编辑</el-button>
+              <el-button size="small" type="danger" text @click="handleDelete(row)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
+      <div class="px-5 py-3 border-t border-gray-50">
+        <el-pagination
+          v-model:current-page="pagination.page"
+          :page-size="pagination.page_size"
+          :total="total"
+          layout="total, prev, pager, next"
+          background
+          @current-change="(v) => { pagination.page = v; fetchList() }"
+        />
+      </div>
+    </div>
+
+    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="520px" destroy-on-close>
+      <el-form ref="formRef" :model="form" :rules="rules" label-width="90px">
+        <el-form-item label="套餐名称" prop="name">
+          <el-input v-model="form.name" placeholder="如：销售、店长、护士" />
+        </el-form-item>
+        <el-form-item label="说明" prop="description">
+          <el-input v-model="form.description" type="textarea" :rows="2" placeholder="注册时显示给用户的说明" />
+        </el-form-item>
+        <el-form-item label="关联角色" prop="role_ids">
+          <el-select v-model="form.role_ids" multiple placeholder="审核通过后自动分配的角色" style="width: 100%">
+            <el-option v-for="r in roles" :key="r.id" :label="r.name" :value="r.id" />
+          </el-select>
+          <div class="text-xs text-gray-400 mt-1">审核通过后，用户将自动获得以上角色权限</div>
+        </el-form-item>
+        <el-row :gutter="12">
+          <el-col :span="12">
+            <el-form-item label="状态" prop="status">
+              <el-radio-group v-model="form.status">
+                <el-radio :value="1">启用</el-radio>
+                <el-radio :value="0">停用</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="排序" prop="sort">
+              <el-input-number v-model="form.sort" :min="0" :max="999" style="width: 100%" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <template #footer>
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" :loading="submitLoading" @click="handleSubmit">
+          {{ isEdit ? '保存修改' : '确认创建' }}
+        </el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
diff --git a/frontend/src/views/system/roles/index.vue b/frontend/src/views/system/roles/index.vue
index 01a2ff4..da9a2a9 100644
--- a/frontend/src/views/system/roles/index.vue
+++ b/frontend/src/views/system/roles/index.vue
@@ -68,13 +68,20 @@ async function fetchList() {
 
 async function fetchPermTree() {
   try {
-    const res = await permissionApi.getTree()
-    permTree.value = res.data || []
+    const res = await permissionApi.getList({ per_page: 500 })
+    const flat = res.data?.list || res.data?.data || []
+    permTree.value = buildPermTree(flat)
   } catch {
     //
   }
 }
 
+function buildPermTree(nodes, parentId = null) {
+  return nodes
+    .filter(n => (n.parent_id ?? null) === parentId)
+    .map(n => ({ ...n, children: buildPermTree(nodes, n.id) }))
+}
+
 // ─── Handlers ─────────────────────────────────────────────────────────────────
 
 function handleSearch() {
@@ -155,8 +162,9 @@ async function openPermDialog(row) {
     if (permTree.value.length === 0) {
       await fetchPermTree()
     }
-    const res = await roleApi.getPermissions(row.id)
-    checkedPermIds.value = res.data?.map((p) => p.id) || []
+    // Load role's existing permissions via getDetail
+    const res = await roleApi.getDetail(row.id)
+    checkedPermIds.value = (res.data?.permissions || []).map((p) => p.id)
 
     await nextTick()
     if (permTreeRef.value) {
@@ -201,9 +209,9 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="page-container">
+  <div class="p-6 space-y-4">
     <!-- Search -->
-    <div class="search-bar">
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-4 flex items-center flex-wrap gap-3">
       <el-input
         v-model="searchForm.keyword"
         placeholder="搜索角色名称/标识"
@@ -218,43 +226,46 @@ onMounted(() => {
     </div>
 
     <!-- Table -->
-    <div class="table-container">
-      <div class="table-actions">
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm">
+      <div class="flex items-center justify-between px-5 py-4 border-b border-gray-50">
+        <div class="flex items-center gap-3"></div>
         <el-button type="primary" :icon="'Plus'" @click="handleAdd">新增角色</el-button>
       </div>
-
-      <el-table v-loading="loading" :data="tableData" border stripe style="width: 100%">
-        <el-table-column prop="name" label="角色名称" min-width="140" />
-        <el-table-column prop="code" label="角色标识" min-width="140" />
-        <el-table-column prop="description" label="描述" min-width="200" show-overflow-tooltip />
-        <el-table-column prop="user_count" label="用户数" width="90" align="center" />
-        <el-table-column label="状态" width="90" align="center">
-          <template #default="{ row }">
-            <el-tag :type="row.status === 1 ? 'success' : 'danger'" size="small">
-              {{ row.status === 1 ? '启用' : '禁用' }}
-            </el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column prop="created_at" label="创建时间" min-width="160" />
-        <el-table-column label="操作" width="200" fixed="right" align="center">
-          <template #default="{ row }">
-            <el-button size="small" type="primary" link @click="handleEdit(row)">编辑</el-button>
-            <el-button size="small" type="warning" link @click="openPermDialog(row)">分配权限</el-button>
-            <el-button size="small" type="danger" link @click="handleDelete(row)">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-
-      <el-pagination
-        v-model:current-page="pagination.page"
-        v-model:page-size="pagination.page_size"
-        :total="total"
-        :page-sizes="[10, 20, 50]"
-        layout="total, sizes, prev, pager, next, jumper"
-        background
-        @current-change="handlePageChange"
-        @size-change="handleSizeChange"
-      />
+      <div class="px-2">
+        <el-table v-loading="loading" :data="tableData" style="width: 100%">
+          <el-table-column prop="name" label="角色名称" min-width="140" />
+          <el-table-column prop="code" label="角色标识" min-width="140" />
+          <el-table-column prop="description" label="描述" min-width="200" show-overflow-tooltip />
+          <el-table-column prop="user_count" label="用户数" width="90" align="center" />
+          <el-table-column label="状态" width="90" align="center">
+            <template #default="{ row }">
+              <el-tag :type="row.status === 1 ? 'success' : 'danger'" size="small">
+                {{ row.status === 1 ? '启用' : '禁用' }}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column prop="created_at" label="创建时间" min-width="160" />
+          <el-table-column label="操作" width="200" fixed="right" align="center">
+            <template #default="{ row }">
+              <el-button size="small" type="primary" text @click="handleEdit(row)">编辑</el-button>
+              <el-button size="small" type="warning" text @click="openPermDialog(row)">分配权限</el-button>
+              <el-button size="small" type="danger" text @click="handleDelete(row)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="px-5 py-3 border-t border-gray-50">
+        <el-pagination
+          v-model:current-page="pagination.page"
+          v-model:page-size="pagination.page_size"
+          :total="total"
+          :page-sizes="[10, 20, 50]"
+          layout="total, sizes, prev, pager, next, jumper"
+          background
+          @current-change="handlePageChange"
+          @size-change="handleSizeChange"
+        />
+      </div>
     </div>
 
     <!-- Role Add/Edit Dialog -->
diff --git a/frontend/src/views/system/stores/index.vue b/frontend/src/views/system/stores/index.vue
index 9e969bf..19c8a6d 100644
--- a/frontend/src/views/system/stores/index.vue
+++ b/frontend/src/views/system/stores/index.vue
@@ -168,9 +168,9 @@ onMounted(fetchList)
 </script>
 
 <template>
-  <div class="page-container">
+  <div class="p-6 space-y-4">
     <!-- Search -->
-    <div class="search-bar">
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-4 flex items-center flex-wrap gap-3">
       <el-input
         v-model="searchForm.keyword"
         placeholder="搜索门店名称/编码/地址"
@@ -189,54 +189,57 @@ onMounted(fetchList)
     </div>
 
     <!-- Table -->
-    <div class="table-container">
-      <div class="table-actions">
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm">
+      <div class="flex items-center justify-between px-5 py-4 border-b border-gray-50">
+        <div class="flex items-center gap-3"></div>
         <el-button type="primary" :icon="'Plus'" @click="handleAdd">新增门店</el-button>
       </div>
-
-      <el-table v-loading="loading" :data="tableData" border stripe style="width: 100%">
-        <el-table-column prop="name" label="门店名称" min-width="160" />
-        <el-table-column prop="code" label="门店编码" width="120" />
-        <el-table-column label="所在地区" min-width="130">
-          <template #default="{ row }">{{ row.region?.name || '' }}</template>
-        </el-table-column>
-        <el-table-column prop="address" label="详细地址" min-width="200" show-overflow-tooltip />
-        <el-table-column prop="phone" label="联系电话" width="140" />
-        <el-table-column prop="contact" label="联系人" width="100" />
-        <el-table-column prop="capacity" label="床位数" width="80" align="center" />
-        <el-table-column label="状态" width="90" align="center">
-          <template #default="{ row }">
-            <el-tag :type="row.status === 1 ? 'success' : 'danger'" size="small">
-              {{ row.status === 1 ? '启用' : '停用' }}
-            </el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" width="180" fixed="right" align="center">
-          <template #default="{ row }">
-            <el-button size="small" type="primary" link @click="handleEdit(row)">编辑</el-button>
-            <el-button
-              size="small"
-              :type="row.status === 1 ? 'warning' : 'success'"
-              link
-              @click="handleStatusToggle(row)"
-            >
-              {{ row.status === 1 ? '停用' : '启用' }}
-            </el-button>
-            <el-button size="small" type="danger" link @click="handleDelete(row)">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-
-      <el-pagination
-        v-model:current-page="pagination.page"
-        v-model:page-size="pagination.page_size"
-        :total="total"
-        :page-sizes="[10, 20, 50]"
-        layout="total, sizes, prev, pager, next, jumper"
-        background
-        @current-change="handlePageChange"
-        @size-change="handleSizeChange"
-      />
+      <div class="px-2">
+        <el-table v-loading="loading" :data="tableData" style="width: 100%">
+          <el-table-column prop="name" label="门店名称" min-width="160" />
+          <el-table-column prop="code" label="门店编码" width="120" />
+          <el-table-column label="所在地区" min-width="130">
+            <template #default="{ row }">{{ row.region?.name || '' }}</template>
+          </el-table-column>
+          <el-table-column prop="address" label="详细地址" min-width="200" show-overflow-tooltip />
+          <el-table-column prop="phone" label="联系电话" width="140" />
+          <el-table-column prop="contact" label="联系人" width="100" />
+          <el-table-column prop="capacity" label="床位数" width="80" align="center" />
+          <el-table-column label="状态" width="90" align="center">
+            <template #default="{ row }">
+              <el-tag :type="row.status === 1 ? 'success' : 'danger'" size="small">
+                {{ row.status === 1 ? '启用' : '停用' }}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" width="180" fixed="right" align="center">
+            <template #default="{ row }">
+              <el-button size="small" type="primary" text @click="handleEdit(row)">编辑</el-button>
+              <el-button
+                size="small"
+                :type="row.status === 1 ? 'warning' : 'success'"
+                text
+                @click="handleStatusToggle(row)"
+              >
+                {{ row.status === 1 ? '停用' : '启用' }}
+              </el-button>
+              <el-button size="small" type="danger" text @click="handleDelete(row)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="px-5 py-3 border-t border-gray-50">
+        <el-pagination
+          v-model:current-page="pagination.page"
+          v-model:page-size="pagination.page_size"
+          :total="total"
+          :page-sizes="[10, 20, 50]"
+          layout="total, sizes, prev, pager, next, jumper"
+          background
+          @current-change="handlePageChange"
+          @size-change="handleSizeChange"
+        />
+      </div>
     </div>
 
     <!-- Add/Edit Dialog -->
@@ -305,5 +308,72 @@ onMounted(fetchList)
         </el-button>
       </template>
     </el-dialog>
+
+    <!-- Add/Edit Dialog -->
+    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="600px" destroy-on-close>
+      <el-form ref="formRef" :model="form" :rules="formRules" label-width="90px">
+        <el-row :gutter="16">
+          <el-col :span="12">
+            <el-form-item label="门店名称" prop="name">
+              <el-input v-model="form.name" placeholder="请输入门店名称" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="门店编码" prop="code">
+              <el-input v-model="form.code" placeholder="如: HQ001" :disabled="isEdit" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="所在地区" prop="region">
+              <el-input v-model="form.region" placeholder="如: 北京市朝阳区" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="联系电话" prop="phone">
+              <el-input v-model="form.phone" placeholder="请输入联系电话" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="详细地址" prop="address">
+              <el-input v-model="form.address" placeholder="请输入详细地址" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="联系人" prop="contact">
+              <el-input v-model="form.contact" placeholder="负责人姓名" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="床位数量" prop="capacity">
+              <el-input-number v-model="form.capacity" :min="1" :max="999" style="width: 100%" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="状态" prop="status">
+              <el-radio-group v-model="form.status">
+                <el-radio :value="1">启用</el-radio>
+                <el-radio :value="0">停用</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="备注" prop="description">
+              <el-input
+                v-model="form.description"
+                type="textarea"
+                :rows="3"
+                placeholder="门店备注信息（选填）"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <template #footer>
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" :loading="submitLoading" @click="handleSubmit">
+          {{ isEdit ? '保存修改' : '确认创建' }}
+        </el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>
diff --git a/frontend/src/views/system/users/index.vue b/frontend/src/views/system/users/index.vue
index 88a61f2..cf9b0eb 100644
--- a/frontend/src/views/system/users/index.vue
+++ b/frontend/src/views/system/users/index.vue
@@ -123,8 +123,8 @@ async function fetchRoles() {
 
 async function fetchDepartments() {
   try {
-    const res = await departmentApi.getTree()
-    departments.value = res.data || []
+    const res = await departmentApi.getList({ per_page: 500 })
+    departments.value = res.data?.list || res.data?.data || []
   } catch {
     //
   }
@@ -210,6 +210,24 @@ async function handleDelete(row) {
   fetchList()
 }
 
+async function handleApprove(row) {
+  await userApi.approve(row.id)
+  ElMessage.success('已审核通过，用户可登录系统')
+  fetchList()
+}
+
+async function handleReject(row) {
+  await ElMessageBox.confirm(`确定拒绝「${row.name}」的注册申请？`, '拒绝确认', {
+    confirmButtonText: '确定拒绝',
+    cancelButtonText: '取消',
+    type: 'warning',
+    confirmButtonClass: 'el-button--danger'
+  })
+  await userApi.reject(row.id)
+  ElMessage.success('已拒绝注册申请')
+  fetchList()
+}
+
 async function handleStatusChange(row) {
   const newStatus = row.status === 1 ? 0 : 1
   try {
@@ -262,9 +280,9 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="page-container">
+  <div class="p-6 space-y-4">
     <!-- Search Bar -->
-    <div class="search-bar">
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-4 flex items-center flex-wrap gap-3">
       <el-input
         v-model="searchForm.keyword"
         placeholder="搜索用户名/姓名/手机号"
@@ -282,80 +300,100 @@ onMounted(() => {
         clearable
         style="width: 180px"
       />
-      <el-select v-model="searchForm.status" placeholder="状态" clearable style="width: 120px">
-        <el-option label="启用" :value="1" />
+      <el-select v-model="searchForm.status" placeholder="状态" clearable style="width: 130px">
+        <el-option label="正常" :value="1" />
         <el-option label="禁用" :value="0" />
+        <el-option label="待审核" :value="2" />
       </el-select>
       <el-button type="primary" :icon="'Search'" @click="handleSearch">查询</el-button>
       <el-button :icon="'Refresh'" @click="handleReset">重置</el-button>
+      <!-- 快捷：待审核 -->
+      <el-button
+        type="warning"
+        plain
+        @click="searchForm.status = 2; handleSearch()"
+      >
+        待审核注册
+      </el-button>
     </div>
 
     <!-- Table -->
-    <div class="table-container">
-      <div class="table-actions">
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm">
+      <div class="flex items-center justify-between px-5 py-4 border-b border-gray-50">
+        <div class="flex items-center gap-3"></div>
         <el-button type="primary" :icon="'Plus'" @click="handleAdd">新增用户</el-button>
       </div>
-
-      <el-table
-        v-loading="loading"
-        :data="tableData"
-        border
-        stripe
-        row-key="id"
-        style="width: 100%"
-      >
-        <el-table-column prop="username" label="用户名" min-width="120" />
-        <el-table-column prop="name" label="姓名" min-width="100" />
-        <el-table-column prop="phone" label="手机号" min-width="130" />
-        <el-table-column prop="department.name" label="部门" min-width="120" />
-        <el-table-column label="角色" min-width="160">
-          <template #default="{ row }">
-            <el-tag
-              v-for="role in row.roles"
-              :key="role.id"
-              size="small"
-              type="info"
-              style="margin: 2px"
-            >
-              {{ role.name }}
-            </el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column label="状态" width="100" align="center">
-          <template #default="{ row }">
-            <el-tag :type="row.status === 1 ? 'success' : 'danger'" size="small">
-              {{ row.status === 1 ? '启用' : '禁用' }}
-            </el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column prop="created_at" label="创建时间" min-width="160" />
-        <el-table-column label="操作" width="220" fixed="right" align="center">
-          <template #default="{ row }">
-            <el-button size="small" type="primary" link @click="handleEdit(row)">编辑</el-button>
-            <el-button
-              size="small"
-              :type="row.status === 1 ? 'warning' : 'success'"
-              link
-              @click="handleStatusChange(row)"
-            >
-              {{ row.status === 1 ? '禁用' : '启用' }}
-            </el-button>
-            <el-button size="small" type="info" link @click="openResetPassword(row)">重置密码</el-button>
-            <el-button size="small" type="danger" link @click="handleDelete(row)">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-
-      <el-pagination
-        v-model:current-page="pagination.page"
-        v-model:page-size="pagination.page_size"
-        :total="total"
-        :page-sizes="[10, 20, 50, 100]"
-        layout="total, sizes, prev, pager, next, jumper"
-        background
-        @current-change="handlePageChange"
-        @size-change="handleSizeChange"
-      />
+      <div class="px-2">
+        <el-table
+          v-loading="loading"
+          :data="tableData"
+          row-key="id"
+          style="width: 100%"
+        >
+          <el-table-column prop="username" label="用户名" min-width="120" />
+          <el-table-column prop="name" label="姓名" min-width="100" />
+          <el-table-column prop="phone" label="手机号" min-width="130" />
+          <el-table-column prop="department.name" label="部门" min-width="120" />
+          <el-table-column label="角色" min-width="160">
+            <template #default="{ row }">
+              <el-tag
+                v-for="role in row.roles"
+                :key="role.id"
+                size="small"
+                type="info"
+                style="margin: 2px"
+              >
+                {{ role.name }}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="状态" width="100" align="center">
+            <template #default="{ row }">
+              <el-tag
+                :type="row.status === 1 ? 'success' : row.status === 2 ? 'warning' : 'danger'"
+                size="small"
+              >
+                {{ row.status === 1 ? '正常' : row.status === 2 ? '待审核' : '禁用' }}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column prop="created_at" label="创建时间" min-width="160" />
+          <el-table-column label="操作" width="260" fixed="right" align="center">
+            <template #default="{ row }">
+              <!-- 待审核状态：显示通过/拒绝 -->
+              <template v-if="row.status === 2">
+                <el-button size="small" type="success" text @click="handleApprove(row)">通过</el-button>
+                <el-button size="small" type="danger" text @click="handleReject(row)">拒绝</el-button>
+              </template>
+              <el-button size="small" type="primary" text @click="handleEdit(row)">编辑</el-button>
+              <template v-if="row.status !== 2">
+                <el-button
+                  size="small"
+                  :type="row.status === 1 ? 'warning' : 'success'"
+                  text
+                  @click="handleStatusChange(row)"
+                >
+                  {{ row.status === 1 ? '禁用' : '启用' }}
+                </el-button>
+              </template>
+              <el-button size="small" type="info" text @click="openResetPassword(row)">重置密码</el-button>
+              <el-button size="small" type="danger" text @click="handleDelete(row)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="px-5 py-3 border-t border-gray-50">
+        <el-pagination
+          v-model:current-page="pagination.page"
+          v-model:page-size="pagination.page_size"
+          :total="total"
+          :page-sizes="[10, 20, 50, 100]"
+          layout="total, sizes, prev, pager, next, jumper"
+          background
+          @current-change="handlePageChange"
+          @size-change="handleSizeChange"
+        />
+      </div>
     </div>
 
     <!-- Add/Edit Dialog -->
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
new file mode 100644
index 0000000..a5d0838
--- /dev/null
+++ b/frontend/tailwind.config.js
@@ -0,0 +1,20 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./index.html', './src/**/*.{vue,js,ts}'],
+  theme: {
+    extend: {
+      colors: {
+        rose: {
+          50: '#fff1f2',
+          100: '#ffe4e6',
+          500: '#f43f5e',
+          600: '#e11d48',
+        }
+      },
+      fontFamily: {
+        sans: ['"Noto Sans SC"', 'sans-serif'],
+      },
+    },
+  },
+  plugins: [],
+}