From 22c306b27c6aa4871681cbcd8f366eb2e5631865 Mon Sep 17 00:00:00 2001
From: c72121122 <c72121122@devide>
Date: Sun, 30 Mar 2025 11:58:00 +0800
Subject: [PATCH] Sun Mar 30 11:58:00 CST 2025 inscode

---
 .inscode    |   2 +-
 src/App.vue | 266 +++++++++++++++++++++++++++++++++++++++++++++-------
 2 files changed, 233 insertions(+), 35 deletions(-)

diff --git a/.inscode b/.inscode
index 75cbde4..9fec957 100644
--- a/.inscode
+++ b/.inscode
@@ -11,4 +11,4 @@ XDG_CONFIG_HOME = "/root/.config"
 npm_config_prefix = "/root/${PROJECT_DIR}/.config/npm/node_global"
 
 [debugger]
-program = "main.js"
\ No newline at end of file
+program = "main.js"
diff --git a/src/App.vue b/src/App.vue
index 633a5df..ff10dc9 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,47 +1,245 @@
+<template>
+  <div class="container">
+    <div class="dialog">
+      <template v-for="(message, index) in chatMessages" :key="index">
+        <div class="dialog-item" :class="{ 'dialog-item-me': message.sender === '你', 'dialog-item-ai': message.sender === 'AI' }">
+          <div class="dialog-item-main" v-html="renderMarkdown(message.text)"></div>
+        </div>
+      </template>
+    </div>
+    <div class="question">
+      <textarea
+        v-model="userInput"
+        placeholder="输入你的消息"
+        class="input-field"
+        @keydown.enter="handleKeyDown"
+      ></textarea>
+      <div class="powered-by">
+        Powered By liyuzhu
+      </div>
+    </div>
+  </div>
+</template>
+
 <script setup>
-import HelloWorld from './components/HelloWorld.vue'
-import TheWelcome from './components/TheWelcome.vue'
-</script>
+import { ref } from 'vue';
+import axios from 'axios';
+import MarkdownIt from 'markdown-it';
+import { fetchEventSource } from 'fetch-event-source';
 
-<template>
-  <header>
-    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
+const userInput = ref('');
+const chatMessages = ref([]);
+const loading = ref(false);
+const md = new MarkdownIt();
 
-    <div class="wrapper">
-      <HelloWorld msg="You did it!" />
-    </div>
-  </header>
+const sendMessage = async () => {
+  if (loading.value || userInput.value.trim() === '') return;
+  loading.value = true;
 
-  <main>
-    <TheWelcome />
-  </main>
-</template>
+  const userMessage = { sender: '你', text: userInput.value };
+  chatMessages.value.push(userMessage);
+  userInput.value = '';
+
+  let aiResponse = '';
+  let aiMessageIndex = chatMessages.value.length;
+  chatMessages.value.push({ sender: 'AI', text: 'AI 思考中...' });
+
+  try {
+    await fetchEventSource('http://localhost:11434/api/generate', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        model: 'gemma3:12b',
+        prompt: userMessage.text
+      }),
+      onmessage: (event) => {
+        if (event.data === '[DONE]') return;
+        try {
+          const data = JSON.parse(event.data);
+          aiResponse += data.response;
+          chatMessages.value[aiMessageIndex].text = aiResponse;
+        } catch (error) {
+          console.error('解析响应数据出错:', error);
+        }
+      },
+      onclose: () => {
+        loading.value = false;
+      },
+      onerror: (error) => {
+        console.error('请求出错:', error);
+        let errorText = '无法连接到模型，请检查服务是否运行。';
+        if (error.response) {
+          errorText += ` 服务器响应错误: ${JSON.stringify(error.response.data)}`;
+        } else if (error.request) {
+          errorText += ' 没有收到服务器响应。';
+        } else {
+          errorText += ` 错误信息: ${error.message}`;
+        }
+        const errorMessage = { sender: '错误', text: errorText };
+        chatMessages.value.push(errorMessage);
+        loading.value = false;
+      }
+    });
+  } catch (error) {
+    console.error('请求出错:', error);
+    let errorText = '无法连接到模型，请检查服务是否运行。';
+    if (error.response) {
+      errorText += ` 服务器响应错误: ${JSON.stringify(error.response.data)}`;
+    } else if (error.request) {
+      errorText += ' 没有收到服务器响应。';
+    } else {
+      errorText += ` 错误信息: ${error.message}`;
+    }
+    const errorMessage = { sender: '错误', text: errorText };
+    chatMessages.value.push(errorMessage);
+    loading.value = false;
+  }
+};
+
+const handleNewChat = () => {
+  chatMessages.value = [];
+};
+
+const renderMarkdown = (text) => {
+  return md.render(text);
+};
+
+const handleKeyDown = (event) => {
+  if (event.shiftKey && event.key === 'Enter') {
+    // Shift + Enter 实现换行
+    userInput.value += '\n';
+    event.preventDefault();
+  } else if (event.key === 'Enter') {
+    // Enter 发送消息
+    sendMessage();
+    event.preventDefault();
+  }
+};
+</script>
 
 <style scoped>
-header {
-  line-height: 1.5;
+html, body {
+  height: 80%;
+  margin: 0;
+  padding: 0;
 }
 
-.logo {
-  display: block;
-  margin: 0 auto 2rem;
+.container {
+  display: flex;
+  flex-direction: column;
+  height: 80vh;
+  padding: 16px 0;
+  box-sizing: border-box;
+  background-color: #f9f9f9;
+  margin: 0 auto;
+  max-width: 100%;
+  /* 设置最小宽度 */
+  min-width: 1300px;
+  border-radius: 20px;
 }
 
-@media (min-width: 1024px) {
-  header {
-    display: flex;
-    place-items: center;
-    padding-right: calc(var(--section-gap) / 2);
-  }
+.dialog {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  background-color: #fff;
+  margin-bottom: 16px;
+  margin-left: 16px;
+  margin-right: 16px;
+}
 
-  .logo {
-    margin: 0 2rem 0 0;
-  }
+.dialog-item {
+  display: flex;
+  margin-bottom: 10px;
+}
 
-  header .wrapper {
-    display: flex;
-    place-items: flex-start;
-    flex-wrap: wrap;
-  }
+.dialog-item-main {
+  max-width: 80%;
+  padding: 12px;
+  word-wrap: break-word;
+  border-radius: 12px;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+  position: relative;
+}
+
+.dialog-item-me {
+  justify-content: flex-end;
+}
+
+.dialog-item-me .dialog-item-main {
+  background-color: #dcf8c6;
+}
+
+.dialog-item-ai .dialog-item-main {
+  background-color: #ebebeb;
+}
+
+.question {
+  display: flex;
+  flex-direction: column;
+  margin-left: 16px;
+  margin-right: 16px;
+}
+
+.input-field {
+  padding: 12px;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  margin-bottom: 16px;
+  outline: none;
+  font-size: 16px;
+  min-height: 80px;
+  resize: vertical;
+}
+
+.button-container {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 16px;
+}
+
+.button {
+  padding: 12px 24px;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 16px;
+  transition: background-color 0.3s ease;
+}
+
+.send-button {
+  background-color: #007bff;
+  color: #fff;
+}
+
+.send-button:hover {
+  background-color: #0056b3;
+}
+
+.new-chat-button {
+  background-color: #6c757d;
+  color: #fff;
+}
+
+.new-chat-button:hover {
+  background-color: #545b62;
+}
+
+.powered-by {
+  text-align: center;
+  font-size: 14px;
+  color: #666;
+}
+
+.logo {
+  width: 16px;
+  height: 16px;
+  vertical-align: middle;
+  position: relative;
+  top: -1px;
 }
-</style>
+</style>    
\ No newline at end of file
-- 
GitLab