添加聊天窗口，后端docker部署

2026-04-01 10:03:24 +08:00
parent be26ad3eee
commit dceac6f951
5 changed files with 258 additions and 1 deletions
--- a/backend/Dockerfile
+++ b/backend/Dockerfile
@@ -0,0 +1,17 @@
+FROM python:3.11-slim
+
+WORKDIR /app
+
+# 先复制 requirements 以利用 Docker 缓存
+COPY requirements.txt .
+
+RUN pip install --no-cache-dir -r requirements.txt
+
+# 复制其余代码和数据（如果在后端的相对路径下需要读取）
+COPY . .
+
+# 暴露 FastAPI 使用的端口
+EXPOSE 8000
+
+# 启动 FastAPI
+CMD ["uvicorn", "app:app", "--host", "0.0.0.0", "--port", "8000"]
--- a/backend/docker-compose.yml
+++ b/backend/docker-compose.yml
@@ -1,4 +1,21 @@
 services:
+  backend:
+    build: .
+    container_name: dt_backend
+    ports:
+      - "8001:8000"
+    volumes:
+      - ../data:/data
+    env_file:
+      - .env
+    environment:
+      - NEO4J_URI=bolt://neo4j:7687
+      - NEO4J_USER=neo4j
+      - NEO4J_PASSWORD=dtmap2024
+    depends_on:
+      neo4j:
+        condition: service_healthy
+
  neo4j:
    image: neo4j:5-community
    container_name: dt_neo4j
--- a/frontend/App.vue
+++ b/frontend/App.vue
@@ -96,11 +96,39 @@
      <div class="loading-inner" :style="{ width: (loadedCount / 63 * 100) + '%' }"></div>
      <span class="loading-text">加载数据中… {{ loadedCount }}/63 卷</span>
    </div>
+
+    <!-- 智能问答按钮 -->
+    <div class="chat-toggle-btn" @click="toggleChat" v-if="!isChatOpen">
+      💬 智能助手
+    </div>
+
+    <!-- 问答面板 -->
+    <div class="chat-panel" v-show="isChatOpen">
+      <div class="chat-header">
+        <h3>💬 知识问答</h3>
+        <span class="close-btn" @click="toggleChat">&times;</span>
+      </div>
+      <div class="chat-messages" ref="chatMessagesRef">
+        <div v-for="(msg, idx) in chatMessages" :key="idx" :class="['chat-bubble', msg.role]">
+          {{ msg.content }}
+        </div>
+        <div v-if="isChatLoading" class="chat-bubble assistant loading">思索中...</div>
+      </div>
+      <div class="chat-input-area">
+        <input 
+          type="text" 
+          v-model="chatInput" 
+          @keyup.enter="sendChatMessage" 
+          placeholder="例如：双龙现在在哪里？"
+        />
+        <button @click="sendChatMessage" :disabled="isChatLoading">发送</button>
+      </div>
+    </div>
  </div>
 </template>

 <script setup>
-import { ref, computed, onMounted, watch } from 'vue'
+import { ref, computed, onMounted, watch, nextTick } from 'vue'
 import L from 'leaflet'
 import 'leaflet/dist/leaflet.css'

@@ -121,6 +149,15 @@ const selectedFaction = ref(null)
 const isLoading     = ref(true)
 const loadedCount   = ref(0)

+// ── 问答系统状态 ────────────────────────────────────────────
+const isChatOpen    = ref(false)
+const chatInput     = ref('')
+const isChatLoading = ref(false)
+const chatMessagesRef = ref(null)
+const chatMessages  = ref([
+  { role: 'assistant', content: '您好！我是大唐知识助理。您可以问我关于人物行踪、势力归属、历史事件等方面的问题。' }
+])
+
 // ── Leaflet 图层管理 ────────────────────────────────────────
 let map = null
 let layerGroups = {
@@ -476,6 +513,50 @@ function flyToEvent(ev) {
    map.flyTo(coords, 8, { duration: 1.2 })
  }
 }
+
+// ── 智能问答逻辑 ────────────────────────────────────────────
+function toggleChat() {
+  isChatOpen.value = !isChatOpen.value
+  if (isChatOpen.value) {
+    scrollToChatBottom()
+  }
+}
+
+async function sendChatMessage() {
+  const text = chatInput.value.trim()
+  if (!text || isChatLoading.value) return
+  
+  chatMessages.value.push({ role: 'user', content: text })
+  chatInput.value = ''
+  isChatLoading.value = true
+  scrollToChatBottom()
+
+  try {
+    const res = await fetch('http://StoryMapAI.api.digitalmars.com.cn/api/chat', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ question: text })
+    })
+    
+    if (!res.ok) throw new Error(`HTTP ${res.status}`)
+    const data = await res.json()
+    chatMessages.value.push({ role: 'assistant', content: data.answer })
+  } catch (err) {
+    console.error('Chat error:', err)
+    chatMessages.value.push({ role: 'assistant', content: '抱歉，连接知识库失败，请稍后再试。' })
+  } finally {
+    isChatLoading.value = false
+    scrollToChatBottom()
+  }
+}
+
+function scrollToChatBottom() {
+  nextTick(() => {
+    if (chatMessagesRef.value) {
+      chatMessagesRef.value.scrollTop = chatMessagesRef.value.scrollHeight
+    }
+  })
+}
 </script>

 <style scoped>
@@ -739,4 +820,140 @@ function flyToEvent(ev) {
  border-radius: 4px;
  white-space: nowrap;
 }
+
+/* ====== 智能助手面板 ====== */
+.chat-toggle-btn {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  z-index: 1000;
+  background: rgba(20, 20, 40, 0.92);
+  color: #c9a96e;
+  padding: 8px 16px;
+  border-radius: 20px;
+  border: 1px solid #c9a96e;
+  cursor: pointer;
+  font-weight: bold;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+  transition: background 0.3s;
+  user-select: none;
+}
+
+.chat-toggle-btn:hover {
+  background: rgba(201, 169, 110, 0.2);
+}
+
+.chat-panel {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  z-index: 1000;
+  background: rgba(20, 20, 40, 0.95);
+  border: 1px solid #c9a96e;
+  border-radius: 8px;
+  width: 320px;
+  height: 480px;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
+}
+
+.chat-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 15px;
+  border-bottom: 1px solid #444;
+}
+
+.chat-header h3 {
+  margin: 0;
+  color: #c9a96e;
+  font-size: 15px;
+}
+
+.chat-header .close-btn {
+  color: #aaa;
+  cursor: pointer;
+  font-size: 20px;
+}
+
+.chat-header .close-btn:hover {
+  color: #fff;
+}
+
+.chat-messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.chat-bubble {
+  max-width: 85%;
+  padding: 8px 12px;
+  border-radius: 8px;
+  font-size: 13px;
+  line-height: 1.5;
+  word-wrap: break-word;
+}
+
+.chat-bubble.user {
+  align-self: flex-end;
+  background: #c9a96e;
+  color: #111;
+  border-bottom-right-radius: 2px;
+}
+
+.chat-bubble.assistant {
+  align-self: flex-start;
+  background: rgba(255, 255, 255, 0.1);
+  color: #e0e0e0;
+  border-bottom-left-radius: 2px;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.chat-bubble.loading {
+  font-style: italic;
+  color: #aaa;
+}
+
+.chat-input-area {
+  display: flex;
+  padding: 10px;
+  border-top: 1px solid #444;
+  gap: 8px;
+}
+
+.chat-input-area input {
+  flex: 1;
+  background: rgba(0, 0, 0, 0.3);
+  border: 1px solid #555;
+  color: #fff;
+  border-radius: 4px;
+  padding: 6px 10px;
+  outline: none;
+}
+
+.chat-input-area input:focus {
+  border-color: #c9a96e;
+}
+
+.chat-input-area button {
+  background: #c9a96e;
+  color: #111;
+  border: none;
+  border-radius: 4px;
+  padding: 0 12px;
+  cursor: pointer;
+  font-weight: bold;
+}
+
+.chat-input-area button:disabled {
+  background: #555;
+  color: #888;
+  cursor: not-allowed;
+}
 </style>
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -1135,6 +1135,7 @@
      "integrity": "sha512-o5a9xKjbtuhY6Bi5S3+HvbRERmouabWbyUcpXXUA1u+GNUKoROi9byOJ8M0nHbHYHkYICiMlqxkg1KkYmm25Sw==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "esbuild": "^0.21.3",
        "postcss": "^8.4.43",
@@ -1194,6 +1195,7 @@
      "resolved": "https://registry.npmmirror.com/vue/-/vue-3.5.31.tgz",
      "integrity": "sha512-iV/sU9SzOlmA/0tygSmjkEN6Jbs3nPoIPFhCMLD2STrjgOU8DX7ZtzMhg4ahVwf5Rp9KoFzcXeB1ZrVbLBp5/Q==",
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@vue/compiler-dom": "3.5.31",
        "@vue/compiler-sfc": "3.5.31",
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -34,6 +34,10 @@ export default defineConfig({
        target: 'http://192.168.190.41:8080',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/tiles/, '')
+      },
+      '/api': {
+        target: 'http://127.0.0.1:8000',
+        changeOrigin: true
      }
    }
  },