ai-chat-vue3 0.1.0

package/src/components/ChatPanel.vue

@@ -0,0 +1,432 @@
+<template>
+  <section class="chat-container">
+    <div class="messages" ref="messageList">
+      <div
+        v-for="(item, idx) in messages"
+        :key="idx"
+        class="message"
+        :class="item.role === 'user' ? 'user-message' : 'system-message'"
+      >
+        <template v-if="item.role === 'system'">
+          <div class="avatar" :class="'system'">AI</div>
+          <div class="bubble">
+            <div v-html="parseMarkdown(item.content)"></div>
+          </div>
+        </template>
+        <template v-else>
+          <div class="bubble">
+            {{ item.content }}
+          </div>
+          <div class="avatar" :class="'user'">我</div>
+        </template>
+      </div>
+      <div v-if="loading" class="loading">AI 正在思考...</div>
+    </div>
+
+    <div class="toolbar">
+      <div class="input">
+        <textarea
+          v-model="input"
+          class="prompt-input"
+          :placeholder="placeholder"
+          :disabled="loading"
+          @keydown.enter.exact.prevent="handleSubmit"
+        />
+        <button class="send-btn" :disabled="loading || !input.trim()" @click="handleSubmit">
+          {{ loading ? '等待中…' : '发送' }}
+        </button>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { ref, nextTick, watch, onMounted } from 'vue';
+import { marked } from 'marked';
+
+const placeholder = '向大模型提问，例：帮我起一个智能助手的名字。';
+const input = ref('');
+const messages = ref([
+
+]);
+const loading = ref(false);
+const messageList = ref(null);
+const nowModel = ref('glm-4.6v-flash');
+
+// 模型列表
+const LLM_MODELS = {
+  'mimo-v2-flash': {
+    model: 'mimo-v2-flash',
+    name: 'Mimo V2 Flash',
+    apiKey: 'sk-cna17w0o4spxrtgp1ieaaq77u38vifffe3dpjbw1z9alrnif',
+    apiUrl: 'https://api.xiaomimimo.com/v1/chat/completions',
+  },
+  'doubao-seed-1-8-251215': {
+    model: 'doubao-seed-1-8-251215',
+    name: 'Doubao Seed 1.8 251215',
+    apiKey: 'e54eb32a-75ba-4190-8a4f-fc05d5d857cb',
+    apiUrl: 'https://ark.cn-beijing.volces.com/api/v3/chat/completions',
+  },
+  'glm-4.6v-flash': {
+    model: 'glm-4.6v-flash',
+    name: 'GLM 4.6v Flash',
+    apiKey: '9f29ea7cbab7437bb3161d9c2adf490f.mPv5XskGyi0SqaMl',
+    apiUrl: 'https://open.bigmodel.cn/api/paas/v4/chat/completions',
+  },
+};
+
+// 解析Markdown内容
+const parseMarkdown = (content) => {
+  try {
+    return marked(content || '');
+  } catch (err) {
+    console.error('Markdown解析失败:', err);
+    return content || '';
+  }
+};
+
+const scrollToBottom = () => {
+  nextTick(() => {
+      // window.scrollTo({
+      //   top: document.documentElement.scrollHeight, // 文档总高度
+      //   behavior: 'smooth' // 平滑滚动
+      // });
+      const el = messageList.value;
+      if (el) {
+        // 使用scrollIntoView代替直接设置scrollTop，兼容性更好
+        // 创建一个临时元素放在底部
+        const tempEl = document.createElement('div');
+        el.appendChild(tempEl);
+        // 滚动到底部
+        tempEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        // 移除临时元素
+        el.removeChild(tempEl);
+      }
+  });
+};
+
+// 添加immediate选项，确保初始渲染时也执行滚动
+watch(messages, scrollToBottom, { deep: true, immediate: true });
+
+const callRealLLM = async (chatMessages) => {
+  loading.value = true;
+  try {
+    let headers = {
+      'Content-Type': 'application/json',
+    }
+    const apiKey = LLM_MODELS[nowModel.value].apiKey;
+    if (nowModel.value === 'glm-4.6v-flash' || nowModel.value === 'doubao-seed-1-8-251215') {
+      headers['Authorization'] = `Bearer ${apiKey}`;
+    } else {
+      headers['api-key'] = apiKey;
+    }
+    const res = await fetch(LLM_MODELS[nowModel.value].apiUrl, {
+      method: 'POST',
+      headers: headers,
+      body: JSON.stringify({ 
+        "model": LLM_MODELS[nowModel.value].model,
+        "messages": chatMessages,
+        "stream": true // 启用流式响应
+      })
+    });
+
+    if (!res.ok) {
+      throw new Error(`LLM 接口响应异常: ${res.status}`);
+    }
+
+    // 检查是否支持流式响应
+    if (res.body && typeof res.body.getReader === 'function') {
+      // 添加一个临时的AI回复消息
+      const streamMessageIndex = messages.value.length;
+      messages.value.push({ 
+        role: 'system', 
+        content: '',
+      });
+
+      // 创建解码器来处理文本流
+      const decoder = new TextDecoder();
+      const reader = res.body.getReader();
+      let accumulatedText = '';
+      
+      // 循环读取流中的数据
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        
+        // 解码接收到的数据
+        const chunk = decoder.decode(value, { stream: true });
+        
+        // 处理SSE格式 (data: {...}\n\n)
+        const lines = chunk.split('\n');
+        for (const line of lines) {
+          const trimmedLine = line.trim();
+          if (trimmedLine.startsWith('data:')) {
+            const data = trimmedLine.substring(5).trim();
+            if (data === '[DONE]') break;
+            
+            try {
+              const parsedData = JSON.parse(data);
+              // 从流式响应中提取内容
+              const delta = parsedData?.choices?.[0]?.delta?.content || '';
+              if (delta) {
+                accumulatedText += delta;
+                // 更新消息内容以实现打字机效果
+                messages.value[streamMessageIndex].content = accumulatedText;
+                // 滚动到底部以显示新内容
+                scrollToBottom();
+              }
+            } catch (e) {
+              console.error('解析流式数据失败:', e);
+            }
+          } else if (trimmedLine) {
+            // 处理非SSE格式的流式响应
+            try {
+              const parsedData = JSON.parse(trimmedLine);
+              const delta = parsedData?.choices?.[0]?.delta?.content || '';
+              if (delta) {
+                accumulatedText += delta;
+                messages.value[streamMessageIndex].content = accumulatedText;
+                scrollToBottom();
+              }
+            } catch (e) {
+              console.error('解析非SSE流式数据失败:', e);
+            }
+          }
+        }
+      }
+      
+      // 如果最终没有内容，使用默认提示
+      if (!accumulatedText) {
+        messages.value[streamMessageIndex].content = '（流式响应未返回有效内容）';
+      }
+    } else {
+      // 非流式响应处理（兼容原有逻辑）
+      const data = await res.json();
+      const reply = data?.choices?.[0]?.message?.content || data?.reply || data?.message || '（接口未返回有效内容）';
+      messages.value.push({ 
+        role: 'system', 
+        content: reply,
+      });
+    }
+  } catch (err) {
+    messages.value.push({
+      role: 'system',
+      content: `调用模型失败：${err.message || err}`,
+    });
+  } finally {
+    loading.value = false;
+  }
+};
+
+const handleSubmit = async () => {
+  if (!input.value.trim() || loading.value) return;
+  const current = input.value.trim();
+  messages.value.push({ role: 'user', content: current });
+  input.value = '';
+  await callRealLLM(messages.value);
+};
+</script>
+
+<style lang="scss" scoped>
+// 导入全局变量
+@import '../assets/_globals';
+
+/* 为Markdown内容添加基本样式 */
+:deep(h1), :deep(h2), :deep(h3), :deep(h4), :deep(h5), :deep(h6) {
+  color: $text-secondary;
+  margin: $spacing-xl 0 $spacing-sm 0;
+  font-weight: 600;
+}
+
+:deep(p) {
+  margin: $spacing-sm 0;
+}
+
+:deep(code) {
+  background: rgba(255, 255, 255, 0.1);
+  padding: $spacing-xs $spacing-sm;
+  border-radius: 4px;
+  font-family: 'Consolas', 'Monaco', monospace;
+}
+
+:deep(pre) {
+  background: rgba(0, 0, 0, 0.3);
+  border: 1px solid $white-trans-08;
+  border-radius: $border-radius-small;
+  padding: $spacing-md;
+  overflow-x: auto;
+  margin: $spacing-sm 0;
+}
+
+:deep(pre code) {
+  background: transparent;
+  padding: 0;
+}
+
+:deep(blockquote) {
+  border-left: 3px solid rgba($primary-color, 0.5);
+  margin: $spacing-sm 0;
+  padding: 0 $spacing-xl;
+  color: #b0c8f8;
+}
+
+:deep(ul), :deep(ol) {
+  margin: $spacing-sm 0;
+  padding-left: 24px;
+}
+
+:deep(li) {
+  margin: $spacing-xs 0;
+}
+
+:deep(a) {
+  color: $text-link;
+  text-decoration: none;
+}
+
+:deep(a:hover) {
+  text-decoration: underline;
+}
+
+.chat-container {
+  display: grid;
+  grid-template-rows: 1fr auto;
+  gap: $spacing-md;
+  padding: $spacing-xl;
+  
+  .messages {
+    overflow-y: auto;
+    padding-right: 6px;
+    
+    .message {
+      display: grid;
+      gap: $spacing-md;
+      padding: $spacing-md 0;
+      border-bottom: 1px solid rgba(255, 255, 255, 0.04);
+      
+      &.system-message {
+        grid-template-columns: 60px 1fr;
+      }
+      
+      &.user-message {
+        grid-template-columns: 1fr 60px;
+        justify-items: end;
+        
+        .bubble {
+          text-align: right;
+          max-width: $message-width - 194px;
+        }
+      }
+      
+      .avatar {
+        height: 44px;
+        width: 44px;
+        display: grid;
+        place-items: center;
+        border-radius: $border-radius-small;
+        font-weight: 700;
+        
+        &.user {
+          background: linear-gradient(135deg, #3557ff, #4db8ff);
+          color: #fff;
+        }
+        
+        &.system {
+          background: linear-gradient(135deg, $secondary-color, #2c9b7d);
+          color: #0c221a;
+        }
+      }
+      
+      .bubble {
+        background: rgba(255, 255, 255, 0.06);
+        border: 1px solid $white-trans-08;
+        border-radius: $border-radius;
+        padding: $spacing-md $spacing-lg;
+        color: $text-message;
+        white-space: pre-wrap;
+        max-width: $message-width - 194px;
+        box-sizing: border-box;
+      }
+    }
+    
+    .loading {
+      color: #8fb1ff;
+      font-size: 14px;
+      display: flex;
+      align-items: center;
+      gap: $spacing-sm;
+      
+      &::after {
+        content: '';
+        width: 10px;
+        height: 10px;
+        border-radius: $border-radius-round;
+        border: 2px solid rgba(143, 177, 255, 0.35);
+        border-top-color: #8fb1ff;
+        animation: spin 1s linear infinite;
+      }
+    }
+  }
+}
+
+.toolbar {
+  padding: $spacing-sm;
+  position: fixed;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 100%;
+  min-width: 600px;
+  height: 88px;
+  background: $background-color;
+
+  .input{
+    display: flex;
+    gap: $spacing-sm;
+    align-items: stretch;
+    width: $message-width;
+    margin: auto;
+    .prompt-input {
+      width: 100%;
+      flex: 1;
+      resize: none;
+      border: 1px solid $white-trans-08;
+      background: $white-trans-05;
+      color: $text-message;
+      padding: $spacing-md;
+      border-radius: $border-radius-small;
+      font-size: 15px;
+      outline: none;
+      min-height: 64px;
+      transition: border-color 0.2s ease, box-shadow 0.2s ease;
+      
+      &:focus {
+        border-color: $primary-color;
+        box-shadow: 0 0 0 2px rgba($primary-color, 0.25);
+      }
+    }
+  }
+  
+  
+  .send-btn {
+    min-width: 110px;
+    border: none;
+    border-radius: $border-radius-small;
+    font-weight: 700;
+    color: #0b1220;
+    background: linear-gradient(135deg, $primary-color, $accent-color);
+    cursor: pointer;
+    transition: transform 0.15s ease, box-shadow 0.2s ease;
+    
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+    
+    &:not(:disabled):hover {
+      transform: translateY(-1px);
+      box-shadow: $shadow-md;
+    }
+  }
+}
+</style>

package/src/install.js

@@ -0,0 +1,15 @@
+import appMain from './App.vue'
+
+// 单独导出
+export { appMain }
+
+// 全局注册
+const components = [appMain]
+
+export default {
+  install(app) {
+    components.forEach(component => {
+      app.component(component.name, component)
+    })
+  }
+}

package/src/main.js

@@ -0,0 +1,7 @@
+import { createApp } from 'vue';
+import App from './App.vue';
+import './style.scss';
+
+createApp(App).mount('#app');
+
+

package/src/style.css

@@ -0,0 +1,78 @@
+@charset "UTF-8";
+:root {
+  font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
+  color: #f7f7f7;
+  background-color: #0b1220;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+}
+
+#app {
+  min-height: 100vh;
+}
+
+.page {
+  width: 1200px;
+  margin: 0 auto;
+  padding: 32px 0 100px;
+}
+
+.page .card {
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 14px;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
+}
+
+.page .card .title {
+  color: #d0e0ff;
+  font-weight: 700;
+  font-size: 28px;
+  letter-spacing: 0.5px;
+  margin: 0 0 8px;
+}
+
+.page .card .subtitle {
+  color: #89a5d6;
+  margin: 0 0 20px;
+  line-height: 1.6;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* 自定义滚动条样式 */
+.messages {
+  /* Firefox 滚动条样式 */
+  scrollbar-width: thin;
+  scrollbar-color: rgba(255, 255, 255, 0.15) rgba(255, 255, 255, 0.03);
+  /* Chrome/Safari 滚动条样式 */
+}
+
+.messages::-webkit-scrollbar {
+  width: 6px;
+}
+
+.messages::-webkit-scrollbar-track {
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: 3px;
+}
+
+.messages::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.15);
+  border-radius: 3px;
+  transition: background 0.3s ease;
+}
+
+.messages::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.25);
+}

package/src/style.min.css

@@ -0,0 +1 @@
+:root{font-family:'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;color:#f7f7f7;background-color:#0b1220}*{box-sizing:border-box}body{margin:0}#app{min-height:100vh}.page{width:1200px;margin:0 auto;padding:32px 0 100px}.page .card{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,0.35)}.page .card .title{color:#d0e0ff;font-weight:700;font-size:28px;letter-spacing:0.5px;margin:0 0 8px}.page .card .subtitle{color:#89a5d6;margin:0 0 20px;line-height:1.6}@keyframes spin{to{transform:rotate(360deg)}}.messages{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,0.15) rgba(255,255,255,0.03)}.messages::-webkit-scrollbar{width:6px}.messages::-webkit-scrollbar-track{background:rgba(255,255,255,0.03);border-radius:3px}.messages::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.15);border-radius:3px;transition:background 0.3s ease}.messages::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.25)}

package/src/style.scss

@@ -0,0 +1,81 @@
+// 导入全局变量
+@import './assets/_globals';
+
+:root {
+  font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
+  color: $text-primary;
+  background-color: $background-color;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+}
+
+#app {
+  min-height: 100vh;
+  // background: $background-gradient;
+}
+
+.page {
+  width: $message-width;
+  margin: 0 auto;
+  padding: $spacing-xxl 0 100px;
+  
+  .card {
+    background: rgba(255, 255, 255, 0.04);
+    border: 1px solid $white-trans-08;
+    border-radius: $border-radius;
+    box-shadow: $shadow-lg;
+    
+    .title {
+      color: $text-secondary;
+      font-weight: 700;
+      font-size: 28px;
+      letter-spacing: 0.5px;
+      margin: 0 0 $spacing-sm;
+    }
+    
+    .subtitle {
+      color: $text-tertiary;
+      margin: 0 0 $spacing-xl;
+      line-height: 1.6;
+    }
+  }
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* 自定义滚动条样式 */
+.messages {
+  /* Firefox 滚动条样式 */
+  scrollbar-width: thin;
+  scrollbar-color: $white-trans-15 rgba(255, 255, 255, 0.03);
+  
+  /* Chrome/Safari 滚动条样式 */
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+  
+  &::-webkit-scrollbar-track {
+    background: rgba(255, 255, 255, 0.03);
+    border-radius: 3px;
+  }
+  
+  &::-webkit-scrollbar-thumb {
+    background: $white-trans-15;
+    border-radius: 3px;
+    transition: background 0.3s ease;
+    
+    &:hover {
+      background: rgba(255, 255, 255, 0.25);
+    }
+  }
+}

package/vite.config.js

@@ -0,0 +1,26 @@
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+
+// 基础 Vite 配置，适配 Vue 3
+export default defineConfig({
+  plugins: [vue()],
+  server: {
+    port: 5173
+  },
+  build: {
+    lib: {
+      entry: 'src/install.js',  // 入口文件
+      name: 'AiVue3Lib',      // 全局变量名
+      fileName: (format) => `ai-vue3-lib.${format}.js`
+    },
+    rollupOptions: {
+      external: ['vue'],  // 将 Vue 作为外部依赖
+      output: {
+        globals: {
+          vue: 'Vue'
+        }
+      }
+    }
+  }
+});
+