🌓 feat: support kimi moonshot (#17)

.env.template

@@ -1,3 +1,4 @@
 # 请替换 APIKey（假使APIKey是key123456）和APISecret（假使APISecret是secret123456）
 VITE_SPARK_KEY=key123456:secret123456
 VITE_SILICONFLOW_KEY=sk-xxxxxx
+VITE_MOONSHOT_KEY=sk-xxxxxx

README.md

@@ -16,7 +16,7 @@ __[🌈 Live Demo 在线体验](https://pdsuwwz.github.io/chatgpt-vue3-light-mvp
 * 📝 **Markdown 预览**：支持多种编程语言代码高亮，集成 `markdown-it` 和 `highlight.js`
 * 🧪 **模拟开发模式**：提供本地模拟开发模式，无需真实 API 即可开始开发
 * 🔑 **环境变量管理**：通过 `.env` 文件管理 API 密钥，支持不同大模型的配置
-* 🌍 **大语言模型 API**：兼容 Spark 星火认知大模型、SiliconFlow、Ollama 等，允许自由扩展
+* 🌍 **大语言模型 API**：兼容 Spark 星火认知大模型、Kimi Moonshot 月之暗面大模型、SiliconFlow、Ollama 等，允许自由扩展
 * 🚀 **灵活扩展**：轻量级模块化 MVP 设计，纯前端开发，项目结构清晰，快速搭建 AI 对话原型
 
 
@@ -67,6 +67,7 @@ pnpm dev
   ```sh
   VITE_SPARK_KEY=你的_星火_API_Key # 需要用冒号拼接key和secret，格式如 `key123456:secret123456`
   VITE_SILICONFLOW_KEY=你的_SiliconFlow_API_Key # 通常以 `sk-` 开头，如 `sk-xxxxxx`
+  VITE_MOONSHOT_KEY=你的_Moonshot_API_Key # 通常以 `sk-` 开头，如 `sk-xxxxxx`
   ```
 
 ## 🌍 模拟/真实 API 模式切换
@@ -103,7 +104,7 @@ export const isMockDevelopment = isDev
 
 ### 接口函数修改
 
-请求的函数同样需要修改，找到（[src/store/business/index.ts](https://github.com/pdsuwwz/chatgpt-vue3-light-mvp/blob/4887f64a1167051647e54bf8cc23e484ead77b4a/src/store/business/index.ts#L39)）的 [`createAssistantWriterStylized`](https://github.com/pdsuwwz/chatgpt-vue3-light-mvp/blob/4887f64a1167051647e54bf8cc23e484ead77b4a/src/store/business/index.ts#L39) 函数，可以发现默认会调用 `spark` 模型接口
+请求的函数同样需要修改，找到（[src/store/business/index.ts](https://github.com/pdsuwwz/chatgpt-vue3-light-mvp/blob/4887f64a1167051647e54bf8cc23e484ead77b4a/src/store/business/index.ts#L39)）的 [`createAssistantWriterStylized`](https://github.com/pdsuwwz/chatgpt-vue3-light-mvp/blob/4887f64a1167051647e54bf8cc23e484ead77b4a/src/store/business/index.ts#L39) 函数，可以发现默认会调用 `Kimi Moonshot` 模型接口
 
 改成你需要的模型接口调用即可：
 
@@ -144,6 +145,20 @@ export const isMockDevelopment = isDev
 ![image](https://github.com/user-attachments/assets/f320f495-cb17-48ff-99c4-aaedbf87fc84)
 
 
+**3. Kimi Moonshot 月之暗面大模型**：
+- **官方开放平台**：访问 [Moonshot 开放平台](https://platform.moonshot.cn/docs/intro) 查看使用手册
+- **注册**：访问 [Moonshot 开放平台控制台](https://platform.moonshot.cn/console) 进行注册登录
+- **创建 API 密钥**：访问 [账户信息 - API Key 管理](https://platform.moonshot.cn/console/api-keys) 新建 API 密钥
+
+![image](https://github.com/user-attachments/assets/31e1ef13-869a-4695-a7c0-054d2c3e877f)
+
+- **接口说明**：[官方示例代码 Chat Completion](https://platform.moonshot.cn/docs/api/chat#chat-completion)
+- **配置到本仓库**：将创建的 API 密钥填入 `.env` 文件中的 `VITE_MOONSHOT_KEY` 环境变量
+- **Moonshot现已支持的大模型**：[模型列表](https://platform.moonshot.cn/docs/api/chat#list-models)
+
+![image](https://github.com/user-attachments/assets/f320f495-cb17-48ff-99c4-aaedbf87fc84)
+
+
 ### 使用本地 Ollama 大模型
 
 **Ollama3 大模型**：
@@ -168,6 +183,7 @@ export const isMockDevelopment = isDev
 - **Spark 星火大模型**：`spark`
 - **llama 3 大模型**：`ollama3`
 - **SiliconFlow 硅基流动大模型**：`siliconflow`
+- **Kimi Moonshot 月之暗面大模型**：`moonshot`
 
 ### 🔬 主要实现
 
@@ -194,10 +210,10 @@ export const isMockDevelopment = isDev
 ```ts
 const defaultLLMTypeName: TransformStreamModelTypes = isMockDevelopment
   ? 'standard'
-  : 'spark'
+  : 'kimi'
 ```
 
-默认情况下，会处理 `spark` 模型，在模拟开发环境下，使用 standard 模型。具体的模型类型可以根据需求进行配置。
+默认情况下，会处理 `kimi` 模型，在模拟开发环境下，使用 standard 模型。具体的模型类型可以根据需求进行配置。
 
 #### 💡 提示
 

src/App.vue

@@ -25,5 +25,5 @@ useCopyCode()
 </template>
 
 <style lang="scss">
-@use "@/styles/index.scss";
+@use "@/styles/index";
 </style>

src/api/index.ts

@@ -134,3 +134,38 @@ export async function createSiliconFlowStylized (text) {
   })
   return fetch(req)
 }
+
+
+/**
+ * Event Stream 调用大模型接口 Kimi Moonshot 月之暗面大模型 (Fetch 调用)
+*/
+export async function createKimiMoonshotStylized (text) {
+  const url = new URL(`${ location.origin }/moonshot/v1/chat/completions`)
+  const params = {
+  }
+  Object.keys(params).forEach(key => {
+    url.searchParams.append(key, params[key])
+  })
+
+  const req = new Request(url, {
+    method: 'post',
+    headers: {
+      'Content-Type': 'application/json',
+      'Authorization': `Bearer ${ import.meta.env.VITE_MOONSHOT_KEY }`
+    },
+    body: JSON.stringify({
+      'model': 'moonshot-v1-8k',
+      stream: true,
+      messages: [
+        {
+          role: 'system',
+          content: '你是 Kimi，由 Moonshot AI 提供的人工智能助手，你更擅长中文和英文的对话。你会为用户提供安全，有帮助，准确的回答。同时，你会拒绝一切涉及恐怖主义，种族歧视，黄色暴力等问题的回答。Moonshot AI 为专有名词，不可翻译成其他语言。'
+        }, {
+          role: 'user',
+          content: text
+        }
+      ]
+    })
+  })
+  return fetch(req)
+}

src/components/MarkdownPreview/transform/index.ts

@@ -14,7 +14,7 @@ type TransformFunction<T = any> = (rawValue: T, ...args: any) => TransformResult
 
 /**
  * 转义处理响应值为 data: 的 json 字符串
- * 如: 科大讯飞星火大模型的 response
+ * 如: 科大讯飞星火、Kimi Moonshot 等大模型的 response
  */
 export const parseJsonLikeData = (content) => {
   if (content.startsWith('data: ')) {
@@ -52,6 +52,10 @@ export const LLMTypes = [
   {
     label: 'SiliconFlow 硅基流动大模型',
     modelName: 'siliconflow'
+  },
+  {
+    label: 'Kimi Moonshot 月之暗面大模型',
+    modelName: 'moonshot'
   }
 ] as const
 
@@ -89,6 +93,10 @@ export const transformStreamValue: Record<TransformStreamModelTypes, TransformFu
     // 与 spark 类似，直接复用
     return this.spark(readValue)
   },
+  moonshot(readValue) {
+    // 与 spark 类似，直接复用
+    return this.spark(readValue)
+  },
   ollama3(readValue) {
     const stream = JSON.parse(readValue)
     return {

src/store/business/index.ts

@@ -37,7 +37,7 @@ export const useBusinessStore = defineStore('business-store', {
 
       // TODO: 本地运行调用接口
       return new Promise((resolve) => {
-        GlobalAPI.createSparkStylized(data.text)
+        GlobalAPI.createKimiMoonshotStylized(data.text)
           .then((res) => {
             if (res.body) {
               const reader = res.body

src/views/chat.vue

@@ -14,7 +14,7 @@ const businessStore = useBusinessStore()
  */
 const defaultLLMTypeName: TransformStreamModelTypes = isMockDevelopment
   ? 'standard'
-  : 'spark'
+  : 'moonshot'
 
 const currentLLMType = computed(() => {
   return LLMTypes.find(v => v.modelName === defaultLLMTypeName)

vite.config.ts

@@ -32,6 +32,12 @@ export default defineConfig(({ mode }) => {
           changeOrigin: true,
           ws: true,
           rewrite: (path) => path.replace(/^\/siliconflow/, '')
+        },
+        '/moonshot': {
+          target: 'https://api.moonshot.cn',
+          changeOrigin: true,
+          ws: true,
+          rewrite: (path) => path.replace(/^\/moonshot/, '')
         }
       }
     },