這個功能是：使用者按下送出表單後，可以自動將內容寄送到我的 email ，以便收到新訊息通知。通常會透過後端提供整合 api 來串接實作，但我不會後端，所以希望可以純前端的方式來完成這項功能。

Email JS 服務串接

1. Email JS 註冊帳號

2. 建立 email service
   

3. 建立 email template
   a. content 的內容可以插入變數，設定好的變數名稱＝前端 payload 要帶的變數名稱，變數名稱必須一模一樣
   b. 收件人 To email 建議固定填自己的信箱
   c. 可以 Test it 測試看看有沒有收到，content 的內容就是 email 會收到的內容（含樣式）
   

4. 可能有的資安風險

   • 金鑰濫用
   • 表單被機器人灌爆
   • 個資傳輸/儲存
   • 錯誤地讓使用者輸入收件人

   =>>>>> 解決方法（但我先簡單做Ｑ）

   • EmailJS「允許網域」設定（Account > Security 可以設定 Domain）。
   • ＶTemplate 的收件人固定為你的信箱。
   • 表單有 honeypot/reCAPTCHA 與送出節流。
   • 欄位有格式與長度驗證。
   • Ｖ只使用 Public Key，無 Private Key

前端傳 payload 給 api

安裝套件

npm install @emailjs/browser

表單送出的 function 下套用：

try {
  const res = await emailjs.send(
    'service_id',   // email js
    'template_id',  // email js
    {                           // payload 的變數名要和 template 上的一樣             
      name: state.form.name,      
      company: state.form.company,
      reply_to: state.form.email,
      message: state.form.message,
    },
    { publicKey: 'PUBLIC_KEY' } // email js
  )
  console.log('✅ 成功寄出', res)
} catch (err) {
  console.error('❌ 寄信失敗', err)
}

哪些參數要在email js 找：

送出前後的 UIUX 反饋

1. 送出前，提示未填寫的必填欄位
2. 送出後，若成功告知使用者表示訊息已送出，且要清空欄位；若失敗也要告知使用者狀態

// alert 反饋訊息

<div class="alert-fixed-top">
  <v-alert
    v-if="state.apiStatus === 'success'"
    variant="outlined"
    title="已成功送出"
    type="success"
  ></v-alert>
  <v-alert
    v-if="state.apiStatus === 'error'"
    variant="outlined"
    title="送出失敗，請稍後再試"
    type="error"
  ></v-alert>
</div>

在每一次呼叫 API 後，系統都應提供即時的回饋訊息，可以建立成元件處理。

前端可以透過帶有圖示的提示，讓使用者清楚了解目前狀態；同時在除錯時，也能藉由訊息快速定位問題。若後端有設定 server-msg，則可直接將伺服器回傳的訊息呈現給前端，確保錯誤資訊透明且易於追蹤。

大概是這樣子！我要準備出門了！