┌───────────────────────────────────────────────────────────────────┐
│                            用户界面層                              │
├───────────────┬───────────────────────┬───────────────────────────┤
│   MateChat    │       DevUI           │     自定義組件            │
│  核心組件     │   通用UI組件庫        │  (銀行特色組件)           │
├───────────────┴───────────────────────┴───────────────────────────┤
│                            業務邏輯層                              │
├───────────────┬───────────────────────┬───────────────────────────┤
│   對話管理    │       API調用         │     狀態管理              │
├───────────────┴───────────────────────┴───────────────────────────┤
│                            數據交互層                              │
├───────────────────────────────────────────────────────────────────┤
│                          DeepSeek API                            │
└───────────────────────────────────────────────────────────────────┘

<McLayout class="container">
<!-- 其他組件 -->
</McLayout>

<McHeader :title="'銀行智能客服助手'" :logoImg="''">
<template #operationArea>
<!-- 操作按鈕區域 -->
</template>
</McHeader>

<McLayoutContent
v-if="startPage"
style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px"
>
<!-- 開始頁面內容 -->
</McLayoutContent>
<McLayoutContent class="content-container" v-else>
<!-- 消息列表 -->
</McLayoutContent>

<McIntroduction
:logoImg="''"
:title="'銀行智能客服助手'"
:subTitle="'您好，歡迎使用銀行智能客服助手'"
:description="description"
></McIntroduction>

// src/main.ts
import { createApp } from 'vue';
import App from './App.vue';
import MateChat from '@matechat/core';  // MateChat 智能對話組件
import DevUI from 'vue-devui';  // DevUI 組件庫
import 'vue-devui/style.css';
import '@devui-design/icons/icomoon/devui-icon.css';

// 創建應用實例並掛載
createApp(App).use(MateChat).use(DevUI).mount('#app');

// DeepSeek API調用邏輯
const fetchData = async (ques) => {
// 添加加載中消息
messages.value.push({
from: 'model',
content: '',
avatarConfig: { name: 'model' },
id: '',
loading: true,
});
try {
// 調用DeepSeek API
const response = await fetch(import.meta.env.VITE_DEEPSEEK_BASE_URL + '/chat/completions', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${import.meta.env.VITE_DEEPSEEK_API_KEY}`
},
body: JSON.stringify({
model: 'deepseek-reasoner',
messages: [
{
role: 'system',
content: '你是一名專業的銀行智能客服助手，負責為客户提供賬户查詢、轉賬匯款、貸款申請、信用卡服務等銀行業務諮詢。'
},
{ role: 'user', content: ques }
],
stream: true
})
});
// 處理流式響應
const reader = response.body?.getReader();
// ...流式處理邏輯
} catch (error) {
// 錯誤處理
}
};

<template>
  <div class="faq-container">
    <h2 class="faq-title">常見問題解答</h2>
    <div class="faq-search">
      <McInput 
        v-model="searchQuery" 
        placeholder="搜索問題..." 
        class="search-input"
      />
    </div>
    <div class="faq-list">
      <div 
        v-for="faq in filteredFaqs" 
        :key="faq.id" 
        class="faq-item"
      >
        <div 
          class="faq-question" 
          @click="toggleFaq(faq.id)"
        >
          <span class="faq-icon">{{ expandedFaq === faq.id ? '−' : '+' }}</span>
          <span class="faq-text">{{ faq.question }}</span>
        </div>
        <transition name="faq">
          <div v-if="expandedFaq === faq.id" class="faq-answer">
            {{ faq.answer }}
          </div>
        </transition>
      </div>
    </div>
  </div>
</template>

```plaintext
<script setup lang="ts">
import { ref, computed, watch } from 'vue';
import { McInput, McRadio, McRadioGroup, McButton } from 'vue-devui';

// 貸款參數
const loanAmount = ref(1000000); // 貸款金額，默認100萬
const loanTerm = ref(360); // 貸款期限，默認30年(360月)
const annualRate = ref(4.9); // 年利率，默認4.9%
const paymentMethod = ref('equal-principal-interest'); // 還款方式，默認等額本息

// 計算結果
const showResults = ref(false);
const totalPayment = ref(0); // 還款總額
const totalInterest = ref(0); // 支付利息
const firstMonthPayment = ref(0); // 首次還款金額
const paymentSchedule = ref<any[]>([]); // 還款計劃表

// 計算貸款
const calculateLoan = () => {
  // 輸入驗證
  if (!loanAmount.value || !loanTerm.value || !annualRate.value || loanAmount.value <= 0 || loanTerm.value <= 0 || annualRate.value <= 0) {
    alert('請輸入有效的貸款參數');
    return;
  }
  
  // 重置結果
  totalPayment.value = 0;
  totalInterest.value = 0;
  firstMonthPayment.value = 0;
  paymentSchedule.value = [];
  
  // 月利率
  const monthlyRate = annualRate.value / 100 / 12;
  
  if (paymentMethod.value === 'equal-principal-interest') {
    // 等額本息計算
    calculateEqualPrincipalInterest(loanAmount.value, loanTerm.value, monthlyRate);
  } else {
    // 等額本金計算
    calculateEqualPrincipal(loanAmount.value, loanTerm.value, monthlyRate);
  }
  
  showResults.value = true;
};
```

# .env 文件
VITE_DEEPSEEK_API_KEY=your-api-key  # DeepSeek API 密鑰
VITE_DEEPSEEK_BASE_URL=https://api.deepseek.com/v1  # DeepSeek API 基礎URL