2025-07-16 Line 訂單系統-E 階段：Vue3 前端優化

2025-07-16 Line 訂單系統-E 階段：Vue3 前端優化

正式進入 ——

📕 E 階段：Vue3 前端優化（RWD＋UI/UX 改版與即時刷新設計）

這一階段的重點是：

讓管理後台從「能用」→「好用」→「即時互動」
提升操作體驗、介面響應速度、視覺一致性與行動裝置適配。

---

🧭 E 階段目標總覽

目標	功能說明
🖥️ 響應式設計（RWD）	讓後台能在桌機、平板、手機上自適應排版
🎨 UI/UX 美化	加入卡片式設計、標籤色彩、狀態圖示、進度條等
🔄 自動更新	使用輪詢（polling）或 WebSocket 實時更新訂單狀態
🔔 訂單變動提示	有新訂單時，畫面自動顯示並播放提示音
💡 使用者體驗優化	提示動畫、loading 狀態、錯誤提示改善

---

⚙️ 系統架構概念（E 階段）

Vue3 + Vite 前端
  ↕
Axios / WebSocket
  ↕
Node.js API（orders + webhook）
  ↕
Redis + MySQL

前端會：

• 定時（或即時）更新訂單列表。
• 讓使用者直覺看到每筆訂單的狀態。
• 能在手機瀏覽器中舒適使用。

---

🧩 實作步驟總覽

1. 🎨 E1 — 改版 Vue3 UI：使用卡片式 RWD 設計
2. 🕓 E2 — 自動刷新訂單列表（輪詢 / WebSocket）
3. 🔔 E3 — 新訂單提示音與動畫提醒
4. 📱 E4 — 手機 / 平板 RWD 優化

---

🎨 E1 — 改版 Vue3 UI：卡片式 + 狀態顏色化

📁 frontend/src/views/LineOrders.vue

<template>
  <div class="p-4 bg-gray-100 min-h-screen">
    <h1 class="text-2xl font-bold text-center mb-6">📦 訂單管理後台</h1>

    <div v-if="loading" class="text-center text-gray-500">載入中...</div>

    <div
      v-else
      class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
    >
      <div
        v-for="order in orders"
        :key="order.id"
        class="bg-white p-4 rounded-2xl shadow-md transition-transform hover:scale-[1.02]"
      >
        <div class="flex justify-between items-center mb-2">
          <h2 class="font-semibold text-lg">#{{ order.id }}</h2>
          <span
            class="text-sm px-3 py-1 rounded-full text-white"
            :class="statusColor(order.status)"
          >
            {{ order.status }}
          </span>
        </div>

        <p>👤 {{ order.user_name }}</p>
        <p>🛍️ {{ order.product_name }}</p>
        <p>📦 數量：{{ order.quantity }}</p>
        <p class="text-sm text-gray-500">
          🕒 {{ new Date(order.created_at).toLocaleString() }}
        </p>

        <div class="mt-3">
          <select
            v-model="order.status"
            class="w-full p-2 border rounded-lg"
            @change="updateStatus(order)"
          >
            <option>新訂單</option>
            <option>已接單</option>
            <option>配送中</option>
            <option>已完成</option>
          </select>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import axios from "axios";

const orders = ref([]);
const loading = ref(true);

// 狀態顏色對應
const statusColor = (status) => {
  switch (status) {
    case "新訂單":
      return "bg-red-500";
    case "已接單":
      return "bg-yellow-500";
    case "配送中":
      return "bg-blue-500";
    case "已完成":
      return "bg-green-500";
    default:
      return "bg-gray-400";
  }
};

// 載入訂單資料
const loadOrders = async () => {
  try {
    const res = await axios.get("http://localhost:3000/api/orders");
    orders.value = res.data;
  } catch (err) {
    console.error("載入訂單錯誤:", err);
  } finally {
    loading.value = false;
  }
};

// 更新訂單狀態
const updateStatus = async (order) => {
  try {
    await axios.put(`http://localhost:3000/api/orders/${order.id}/status`, {
      newStatus: order.status,
      userName: order.user_name,
    });
  } catch (err) {
    console.error("更新狀態錯誤:", err);
  }
};

onMounted(() => {
  loadOrders();
});
</script>

<style>
@media (max-width: 640px) {
  h1 {
    font-size: 1.5rem;
  }
}
</style>

---

🕓 E2 — 自動刷新訂單列表（輪詢版）

為了即時顯示新訂單，可先用簡單的輪詢（polling）實作。

在 onMounted() 內加入：

onMounted(() => {
  loadOrders();
  setInterval(loadOrders, 5000); // 每5秒自動刷新
});

✅ 可後續升級為 WebSocket，達到「伺服器推播」。

---

🔔 E3 — 新訂單提示音與動畫

新增提示音效果：

📁 frontend/public/notify.mp3
（放一個輕柔的提示音）

在 loadOrders() 中加入判斷：

let lastOrderCount = 0;

const loadOrders = async () => {
  try {
    const res = await axios.get("http://localhost:3000/api/orders");
    if (orders.value.length && res.data.length > orders.value.length) {
      new Audio("/notify.mp3").play();
    }
    orders.value = res.data;
    lastOrderCount = res.data.length;
  } catch (err) {
    console.error("載入訂單錯誤:", err);
  } finally {
    loading.value = false;
  }
};

📢 當有新訂單時，自動播放提示音。

---

📱 E4 — RWD 手機與平板優化

使用 Tailwind 已有基礎 RWD 支援，可再加：

@media (max-width: 480px) {
  .order-card {
    padding: 1rem;
    font-size: 0.9rem;
  }
  select {
    font-size: 0.9rem;
  }
}

---

🧪 測試流程

步驟	測試內容	預期結果
1️⃣	在桌機、平板、手機上打開後台	版面自適應
2️⃣	LINE 使用者送出新訂單	5 秒內後台刷新、提示音響起
3️⃣	改變訂單狀態	即時更新 + 顏色改變
4️⃣	多人同時操作	Redis + API 同步正常運作

---

✅ E 階段成果

模組	狀態
RWD 響應式設計	✅ 已完成
卡片式 UI	✅ 已完成
自動更新 / 提示音	✅ 已完成
狀態顏色化與操作提示	✅ 已完成

---

🚀 下一步（📙 F 階段預告）

📙 F 階段 — 部署與持續整合（CI/CD + 免費雲端方案）

你將學到如何：

• 把 Node.js 後端 部署到 Render 或 Railway
• 把 Vue3 前端 部署到 Vercel 或 Netlify
• 把 Redis + MySQL（PlanetScale） 串接上線
• 實現線上 LINE Bot 真實訂單系統運作 💬

---

是否要我幫你接著進入 📙 F 階段 — 部署與持續整合（CI/CD + 免費雲端方案）？