2024-12-14 規劃小型分帳系統

2024-12-14 規劃小型分帳系統

寫一個小型分帳系統可以從以下幾個步驟來規劃，並根據需求漸進式完善功能。

---

1. 確定基本功能

核心功能

• 輸入參與者：能夠新增或移除分帳的成員。
• 輸入費用：記錄每筆消費，包括金額、支付者、參與者等。
• 計算分帳結果：自動計算每人應該支付或收到的金額。

可選功能

• 分類費用：按餐飲、交通等分類。
• 保存數據：利用 LocalStorage 保存分帳記錄。
• 導出數據：生成分帳明細的 CSV 或 PDF。

---

2. 設計資料結構

使用響應式資料結構以便在 Vue 中更新視圖：

• 參與者清單：participants，存儲所有參與者的名稱。
• 費用列表：expenses，存儲每筆費用的詳細信息。

範例：

const participants = ref([]); // ["Alice", "Bob", "Charlie"]
const expenses = ref([
  { id: 1, description: "Dinner", amount: 300, payer: "Alice", participants: ["Alice", "Bob"] },
]);

---

3. 規劃界面結構

用簡單的 Vue 模板實現以下功能區域：

輸入參與者

• 功能：新增/移除分帳成員。
• 界面：
  • 文本框輸入成員姓名。
  • 按鈕「新增成員」和「移除成員」。

記錄費用

• 功能：輸入費用及相關信息。
• 界面：
  • 文本框輸入費用描述和金額。
  • 下拉選擇支付者。
  • 勾選參與分帳的成員。
  • 按鈕「新增費用」。

顯示分帳結果

• 功能：自動計算每人應支付或收到的金額。
• 界面：
  • 表格列出所有費用。
  • 表格列出每個人應付/應收。

---

4. 編寫功能代碼

計算分帳

實現核心邏輯：

• 總費用平分，計算每人應分攤金額。
• 比較實際支付與應支付，計算每人需付或收的金額。

範例邏輯：

const calculateBalances = () => {
  const balances = {}; // {"Alice": 50, "Bob": -25, "Charlie": -25}
  participants.value.forEach(person => balances[person] = 0);

  expenses.value.forEach(expense => {
    const share = expense.amount / expense.participants.length;
    expense.participants.forEach(person => balances[person] -= share);
    balances[expense.payer] += expense.amount;
  });

  return balances;
};

---

5. 開發流程

第一步：基礎功能

• 實現新增成員、記錄費用、計算結果的功能。
• 使用 Vue 的 v-for 渲染清單和表格。

第二步：改善用戶體驗

• 驗證輸入資料（如金額為正數，至少選擇一名參與者）。
• 加入樣式和交互設計。

第三步：擴展功能

• 增加費用分類。
• 保存到 LocalStorage，支持重新加載。

---

6. 範例界面設計

<template>
  <div>
    <h1>小型分帳系統</h1>
    <!-- 輸入參與者 -->
    <div>
      <h2>參與者</h2>
      <input v-model="newParticipant" placeholder="輸入成員名稱" />
      <button @click="addParticipant">新增</button>
      <ul>
        <li v-for="person in participants" :key="person">
          {{ person }} <button @click="removeParticipant(person)">移除</button>
        </li>
      </ul>
    </div>

    <!-- 記錄費用 -->
    <div>
      <h2>新增費用</h2>
      <input v-model="newExpense.description" placeholder="描述" />
      <input v-model.number="newExpense.amount" type="number" placeholder="金額" />
      <select v-model="newExpense.payer">
        <option v-for="person in participants" :key="person" :value="person">{{ person }}</option>
      </select>
      <div>
        <label v-for="person in participants" :key="person">
          <input type="checkbox" :value="person" v-model="newExpense.participants" />
          {{ person }}
        </label>
      </div>
      <button @click="addExpense">記錄費用</button>
    </div>

    <!-- 顯示分帳結果 -->
    <div>
      <h2>結果</h2>
      <ul>
        <li v-for="(balance, person) in balances" :key="person">
          {{ person }}: {{ balance > 0 ? `應收 ${balance}` : `應付 ${-balance}` }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { ref, computed } from "vue";

export default {
  setup() {
    const participants = ref([]);
    const expenses = ref([]);
    const newParticipant = ref("");
    const newExpense = ref({
      description: "",
      amount: 0,
      payer: "",
      participants: [],
    });

    const addParticipant = () => {
      if (newParticipant.value && !participants.value.includes(newParticipant.value)) {
        participants.value.push(newParticipant.value);
        newParticipant.value = "";
      }
    };

    const removeParticipant = (person) => {
      participants.value = participants.value.filter((p) => p !== person);
    };

    const addExpense = () => {
      if (
        newExpense.value.description &&
        newExpense.value.amount > 0 &&
        newExpense.value.payer &&
        newExpense.value.participants.length
      ) {
        expenses.value.push({ ...newExpense.value });
        newExpense.value = { description: "", amount: 0, payer: "", participants: [] };
      }
    };

    const balances = computed(() => {
      const result = {};
      participants.value.forEach((person) => (result[person] = 0));
      expenses.value.forEach((expense) => {
        const share = expense.amount / expense.participants.length;
        expense.participants.forEach((person) => (result[person] -= share));
        result[expense.payer] += expense.amount;
      });
      return result;
    });

    return {
      participants,
      expenses,
      newParticipant,
      newExpense,
      addParticipant,
      removeParticipant,
      addExpense,
      balances,
    };
  },
};
</script>

---

規劃總結

1. 從簡單功能開始，逐步擴展。
2. 資料結構應清晰且易於維護。
3. 重點實現計算邏輯，並驗證準確性。
4. 添加持久化（LocalStorage）以提升用戶體驗。

記帳功能說明：
新增一筆記帳，點選圖片，帶入名稱，填入金額，及付款人，付款人可以多個.