@keydown.enter.exact.prevent="handleSend"
@keydown.enter.shift.exact="newline"

<el-button
  type="primary"
  :loading="loading"
  @click="handleSend"
  >
  <template #icon>
    <el-icon><Position /></el-icon>
  </template>
  發(fā)送
</el-button>

  &.message-user {
    flex-direction: row-reverse;
    //翻轉(zhuǎn)實(shí)現(xiàn)用戶布局在右側(cè)
    .message-content {
      align-items: flex-end;
    }
  }

//App.vue
<template>
  <div :class="{ 'dark': isDarkMode }">
  <router-view />
  </div>
  </template>
  <script setup>
  import { computed } from 'vue'
import { useSettingsStore } from './stores/settings'
const settingsStore = useSettingsStore()
const isDarkMode = computed(() => settingsStore.isDarkMode)
  </script>
//dark.scss
html.dark {
  // Element Plus 暗黑模式變量覆蓋
  --el-bg-color: var(--bg-color);
  --el-bg-color-overlay: var(--bg-color-secondary);
  --el-text-color-primary: var(--text-color-primary);
  --el-text-color-regular: var(--text-color-regular);
  --el-border-color: var(--border-color);
  // Element Plus 組件暗黑模式樣式覆蓋
  .el-input-number {
    --el-input-number-bg-color: var(--bg-color-secondary);
    --el-input-number-text-color: var(--text-color-primary);
  }
  .el-select-dropdown {
    --el-select-dropdown-bg-color: var(--bg-color);
    --el-select-dropdown-text-color: var(--text-color-primary);
  }
  .el-slider {
    --el-slider-main-bg-color: var(--primary-color);
  }
}
//main.js
import './assets/styles/dark.scss'

onMounted(() => {
  // 根據(jù)存儲(chǔ)的設(shè)置初始化主題
  document.documentElement.setAttribute('data-theme', settingsStore.isDarkMode ? 'dark' : 'light')
})

async sendMessage(messages, stream = false) {
    // ...
    const response = await fetch(`${API_BASE_URL}/chat/completions`, {
        method: 'POST',
        headers: {
            ...createHeaders(),
            ...(stream && { 'Accept': 'text/event-stream' }) // 如果是流式響應(yīng)，添加相應(yīng)的 Accept 頭
        },
        body: JSON.stringify(payload)
    })
    // ...
    if (stream) {
        return response // 對(duì)于流式響應(yīng)，直接返回 response 對(duì)象
    }
    // ...
}

async processStreamResponse(response, { updateMessage, updateTokenCount }) {
  try {
      let fullResponse = '';
      const reader = response.body.getReader();
      const decoder = new TextDecoder();
          // 1.讀取流數(shù)據(jù)
      while (true) {
          const { done, value } = await reader.read();
          if (done) {
              console.log('流式響應(yīng)完成');
              break;
          }
          //2.解碼數(shù)據(jù)塊
          const chunk = decoder.decode(value);  //這里每一個(gè)chunk是一個(gè)可能包含多個(gè)數(shù)組
          //3.處理解碼后的數(shù)據(jù)，先拆分為行（數(shù)組），再轉(zhuǎn)換為json字符串，再轉(zhuǎn)換為js對(duì)象，提取出對(duì)象中content內(nèi)容，更新message、更新token使用量
          // 3.1 拆分為行
          const lines = chunk.split('\n').filter(line => line.trim() !== '');
          for (const line of lines) {
              if (line.includes('data: ')) {
          // 3.2 轉(zhuǎn)換為json字符串
                  const jsonStr = line.replace('data: ', '');
                  // 檢查是否結(jié)束
                  if (jsonStr === '[DONE]') {
                      console.log('流式響應(yīng)完成，讀取完畢');
                      continue;
                  }
          // 3.3 轉(zhuǎn)換為js對(duì)象
                  try {
                      const jsData = JSON.parse(jsonStr);
                      if (jsData.choices[0].delta.content) {
                          const content = jsData.choices[0].delta.content;
          //3.4 提取出對(duì)象中content內(nèi)容，更新message
                          fullResponse += content;
                          updateMessage(fullResponse);
                      }
          // 3.5更新token使用量
                      if (jsData.usage) {
                          updateTokenCount(jsData.usage);
                      }
                  } catch (e) {
                      console.error('解析JSON失敗:', e);
                  }
              }
          }
      }
  } catch (error) {
      console.error('流處理錯(cuò)誤:', error);
      throw error;
  }
},

const handleSend = async (content) => {
    // ...
    try {
        const response = await chatApi.sendMessage(
            messages.value.slice(0, -1).map(m => ({
                role: m.role,
                content: m.content
            })),
            settingsStore.streamResponse
        );
        if (settingsStore.streamResponse) {
          // 這里使用了await不會(huì)將這個(gè)變化為同步嗎，我了解到的使用await后會(huì)等之后的函數(shù)調(diào)用完再執(zhí)行之后的代碼，是這樣嗎？
            await messageHandler.processStreamResponse(response, {
                updateMessage: (content) => chatStore.updateLastMessage(content),
                updateTokenCount: (usage) => chatStore.updateTokenCount(usage)
            });
        }
        // ...
    } catch (error) {
        chatStore.updateLastMessage('抱歉，發(fā)生了錯(cuò)誤，請(qǐng)稍后重試。')
    } finally {
        chatStore.isLoading = false
    }
}

{ done: true/false, value: Uint8Array | undefined }

Streams API  
├── ReadableStream（response.body類型） → 提供流式數(shù)據(jù)塊
│    ├── getReader() → 獲取 reader
│    │    └── reader.read() → 讀取單個(gè)數(shù)據(jù)塊 {done, value}
│    │
│    └── 數(shù)據(jù)塊通常是 Uint8Array 類型
│
└── TextDecoder → 解碼 Uint8Array 為字符串
└── Blob → 解碼 Uint8Array 為圖像視頻

let response = await fetch('https://example.com');
if (!response.ok) {
  throw new Error(`HTTP error! status: ${response.status}`);
}