Vue3 组合式 AI：用 Composables 封装大模型能力的工程实践

1
import { ref, onUnmounted, type Ref } from 'vue'
2

3
interface StreamOptions {
4
  url: string
5
  body: Record<string, unknown>
6
  headers?: Record<string, string>
7
  onChunk: (chunk: string) => void
8
  onDone?: () => void
9
  onError?: (error: Error) => void
10
}
11

12
export function useStreamFetch() {
13
  const controller: Ref<AbortController | null> = ref(null)
14
  const isStreaming = ref(false)
15

16
  async function startStream(options: StreamOptions) {
17
    // 取消上一次未完成的流
18
    controller.value?.abort()
19

20
    const ac = new AbortController()
21
    controller.value = ac
22
    isStreaming.value = true
23

24
    try {
25
      const response = await fetch(options.url, {
26
        method: 'POST',
27
        headers: {
28
          'Content-Type': 'application/json',
29
          ...options.headers,
30
        },
31
        body: JSON.stringify(options.body),
32
        signal: ac.signal,
33
      })
34

35
      if (!response.ok) {
36
        throw new Error(`HTTP ${response.status}: ${response.statusText}`)
37
      }
38

39
      const reader = response.body?.getReader()
40
      if (!reader) throw new Error('No readable stream')
41

42
      const decoder = new TextDecoder()
43
      let buffer = ''
44

45
      while (true) {
46
        const { done, value } = await reader.read()
47
        if (done) break
48

49
        buffer += decoder.decode(value, { stream: true })
50

51
        // 解析 SSE 格式
52
        const lines = buffer.split('\n')
53
        buffer = lines.pop() || '' // 最后一行可能不完整
54

55
        for (const line of lines) {
56
          if (line.startsWith('data: ')) {
57
            const data = line.slice(6)
58
            if (data === '[DONE]') continue
59

60
            try {
61
              const parsed = JSON.parse(data)
62
              const content = parsed.choices?.[0]?.delta?.content
63
              if (content) {
64
                options.onChunk(content)
65
              }
66
            } catch {
67
              // 非 JSON 格式的 data，直接当文本
68
              options.onChunk(data)
69
            }
70
          }
71
        }
72
      }
73

74
      options.onDone?.()
75
    } catch (err) {
76
      if ((err as Error).name !== 'AbortError') {
77
        options.onError?.(err as Error)
78
      }
79
    } finally {
80
      isStreaming.value = false
81
      controller.value = null
82
    }
83
  }
84

85
  function stopStream() {
86
    controller.value?.abort()
87
  }
88

89
  // 组件卸载时自动清理
90
  onUnmounted(() => {
91
    controller.value?.abort()
92
  })
93

94
  return { startStream, stopStream, isStreaming }
95
}

1
import { ref, computed } from 'vue'
2

3
// 简易 Token 估算（中文约 1.5 token/字，英文约 0.75 token/word）
4
function estimateTokens(text: string): number {
5
  const chineseChars = (text.match(/[\u4e00-\u9fff]/g) || []).length
6
  const otherChars = text.length - chineseChars
7
  return Math.ceil(chineseChars * 1.5 + otherChars * 0.4)
8
}
9

10
interface TokenUsage {
11
  prompt: number
12
  completion: number
13
  total: number
14
}
15

16
export function useTokenCounter(budgetLimit = Infinity) {
17
  const history = ref<TokenUsage[]>([])
18

19
  const totalUsage = computed<TokenUsage>(() => {
20
    return history.value.reduce(
21
      (acc, cur) => ({
22
        prompt: acc.prompt + cur.prompt,
23
        completion: acc.completion + cur.completion,
24
        total: acc.total + cur.total,
25
      }),
26
      { prompt: 0, completion: 0, total: 0 }
27
    )
28
  })
29

30
  const remainingBudget = computed(() => budgetLimit - totalUsage.value.total)
31
  const isOverBudget = computed(() => remainingBudget.value <= 0)
32

33
  function recordUsage(usage: TokenUsage) {
34
    history.value.push(usage)
35
  }
36

37
  // 基于预算智能截断上下文
38
  function trimContext(
39
    messages: Array<{ role: string; content: string }>,
40
    maxContextTokens: number
41
  ) {
42
    let tokenCount = 0
43
    const result: typeof messages = []
44

45
    // 始终保留 system prompt
46
    const systemMsg = messages.find(m => m.role === 'system')
47
    if (systemMsg) {
48
      tokenCount += estimateTokens(systemMsg.content)
49
      result.push(systemMsg)
50
    }
51

52
    // 从最新消息往前保留，直到超限
53
    const nonSystem = messages.filter(m => m.role !== 'system')
54
    for (let i = nonSystem.length - 1; i >= 0; i--) {
55
      const msgTokens = estimateTokens(nonSystem[i].content)
56
      if (tokenCount + msgTokens > maxContextTokens) break
57
      tokenCount += msgTokens
58
      result.splice(systemMsg ? 1 : 0, 0, nonSystem[i])
59
    }
60

61
    return result
62
  }
63

64
  return {
65
    totalUsage,
66
    remainingBudget,
67
    isOverBudget,
68
    recordUsage,
69
    trimContext,
70
    estimateTokens,
71
  }
72
}

1
import { ref, computed } from 'vue'
2

3
interface ModelConfig {
4
  id: string
5
  name: string
6
  baseUrl: string
7
  apiKey: string
8
  maxContext: number       // 最大上下文窗口
9
  inputPrice: number       // 每百万 token 价格（元）
10
  outputPrice: number
11
  transform?: {
12
    // 不同模型的请求/响应格式差异
13
    requestBody?: (body: any) => any
14
    parseChunk?: (chunk: any) => string
15
  }
16
}
17

18
const PRESET_MODELS: Record<string, Partial<ModelConfig>> = {
19
  'qwen-plus': {
20
    name: '通义千问 Plus',
21
    baseUrl: 'https://dashscope.aliyuncs.com/compatible-mode/v1',
22
    maxContext: 131072,
23
    inputPrice: 2,
24
    outputPrice: 6,
25
  },
26
  'deepseek-chat': {
27
    name: 'DeepSeek V3',
28
    baseUrl: 'https://api.deepseek.com/v1',
29
    maxContext: 65536,
30
    inputPrice: 1,
31
    outputPrice: 2,
32
  },
33
  'glm-4-flash': {
34
    name: '智谱 GLM-4 Flash',
35
    baseUrl: 'https://open.bigmodel.cn/api/paas/v4',
36
    maxContext: 128000,
37
    inputPrice: 0,    // 免费模型
38
    outputPrice: 0,
39
  },
40
}
41

42
export function useModelAdapter() {
43
  const currentModelId = ref('qwen-plus')
44
  const customModels = ref<Record<string, ModelConfig>>({})
45

46
  const currentModel = computed(() => {
47
    return customModels.value[currentModelId.value]
48
      || PRESET_MODELS[currentModelId.value]
49
  })
50

51
  function registerModel(config: ModelConfig) {
52
    customModels.value[config.id] = config
53
  }
54

55
  function switchModel(modelId: string) {
56
    if (!PRESET_MODELS[modelId] && !customModels.value[modelId]) {
57
      throw new Error(`未知模型: ${modelId}`)
58
    }
59
    currentModelId.value = modelId
60
  }
61

62
  // 构建统一的请求体
63
  function buildRequest(messages: any[], options: Record<string, any> = {}) {
64
    const model = currentModel.value
65
    const body = {
66
      model: currentModelId.value,
67
      messages,
68
      stream: true,
69
      ...options,
70
    }
71
    return model?.transform?.requestBody?.(body) ?? body
72
  }
73

74
  // 估算本次调用费用
75
  function estimateCost(inputTokens: number, outputTokens: number): number {
76
    const model = currentModel.value
77
    if (!model) return 0
78
    return (
79
      (inputTokens / 1_000_000) * (model.inputPrice ?? 0) +
80
      (outputTokens / 1_000_000) * (model.outputPrice ?? 0)
81
    )
82
  }
83

84
  return {
85
    currentModelId,
86
    currentModel,
87
    registerModel,
88
    switchModel,
89
    buildRequest,
90
    estimateCost,
91
  }
92
}

1
import { ref, reactive, onUnmounted } from 'vue'
2
import { useStreamFetch } from './useStreamFetch'
3
import { useTokenCounter } from './useTokenCounter'
4
import { useModelAdapter } from './useModelAdapter'
5
import { nanoid } from 'nanoid'
6

7
interface ChatMessage {
8
  id: string
9
  role: 'system' | 'user' | 'assistant'
10
  content: string
11
  tokens: number
12
  timestamp: number
13
  model?: string
14
}
15

16
interface UseChatOptions {
17
  model?: string
18
  systemPrompt?: string
19
  maxTokens?: number
20
  tokenBudget?: number
21
  apiKey?: string
22
  onError?: (error: Error) => void
23
}
24

25
export function useChat(options: UseChatOptions = {}) {
26
  const messages = ref<ChatMessage[]>([])
27
  const input = ref('')
28
  const error = ref<Error | null>(null)
29
  const lastUserInput = ref('')
30

31
  const { startStream, stopStream, isStreaming } = useStreamFetch()
32
  const { totalUsage, recordUsage, trimContext, estimateTokens } = useTokenCounter(options.tokenBudget)
33
  const { currentModelId, buildRequest, estimateCost, switchModel } = useModelAdapter()
34

35
  if (options.model) {
36
    switchModel(options.model)
37
  }
38

39
  // 初始化 system prompt
40
  if (options.systemPrompt) {
41
    messages.value.push({
42
      id: nanoid(),
43
      role: 'system',
44
      content: options.systemPrompt,
45
      tokens: estimateTokens(options.systemPrompt),
46
      timestamp: Date.now(),
47
    })
48
  }
49

50
  async function send(content?: string) {
51
    const text = content || input.value.trim()
52
    if (!text || isStreaming.value) return
53

54
    error.value = null
55
    lastUserInput.value = text
56
    input.value = ''
57

58
    // 添加用户消息
59
    const userMsg: ChatMessage = {
60
      id: nanoid(),
61
      role: 'user',
62
      content: text,
63
      tokens: estimateTokens(text),
64
      timestamp: Date.now(),
65
    }
66
    messages.value.push(userMsg)
67

68
    // 准备 AI 回复占位
69
    const assistantMsg: ChatMessage = {
70
      id: nanoid(),
71
      role: 'assistant',
72
      content: '',
73
      tokens: 0,
74
      timestamp: Date.now(),
75
      model: currentModelId.value,
76
    }
77
    messages.value.push(assistantMsg)
78

79
    // 截断上下文
80
    const contextMessages = trimContext(
81
      messages.value.map(m => ({ role: m.role, content: m.content })),
82
      (options.maxTokens || 4096) * 0.75  // 留 25% 给回复
83
    )
84

85
    const body = buildRequest(contextMessages, {
86
      max_tokens: options.maxTokens || 2048,
87
    })
88

89
    await startStream({
90
      url: `${/* model baseUrl */''}/chat/completions`,
91
      body,
92
      headers: options.apiKey ? { Authorization: `Bearer ${options.apiKey}` } : {},
93
      onChunk(chunk) {
94
        assistantMsg.content += chunk
95
        assistantMsg.tokens = estimateTokens(assistantMsg.content)
96
      },
97
      onDone() {
98
        recordUsage({
99
          prompt: estimateTokens(contextMessages.map(m => m.content).join('')),
100
          completion: assistantMsg.tokens,
101
          total: estimateTokens(contextMessages.map(m => m.content).join('')) + assistantMsg.tokens,
102
        })
103
      },
104
      onError(err) {
105
        error.value = err
106
        // 移除空的 AI 回复
107
        messages.value = messages.value.filter(m => m.id !== assistantMsg.id)
108
        options.onError?.(err)
109
      },
110
    })
111
  }
112

113
  function stop() {
114
    stopStream()
115
  }
116

117
  function retry() {
118
    // 移除上一次失败的消息，重新发送
119
    const lastAssistant = messages.value.findLastIndex(m => m.role === 'assistant')
120
    const lastUser = messages.value.findLastIndex(m => m.role === 'user')
121
    if (lastAssistant > -1) messages.value.splice(lastAssistant, 1)
122
    if (lastUser > -1) {
123
      const userContent = messages.value[lastUser].content
124
      messages.value.splice(lastUser, 1)
125
      send(userContent)
126
    }
127
  }
128

129
  function clear() {
130
    const systemMsg = messages.value.find(m => m.role === 'system')
131
    messages.value = systemMsg ? [systemMsg] : []
132
    error.value = null
133
  }
134

135
  return {
136
    messages,
137
    input,
138
    isStreaming,
139
    error,
140
    tokenUsage: totalUsage,
141
    send,
142
    stop,
143
    retry,
144
    clear,
145
    switchModel,
146
  }
147
}