feat:更新对话框UI

2026-07-02 23:18:02 +08:00
parent d47383cd95
commit 620424a462
7 changed files with 220 additions and 108 deletions
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>食刻 AI</title>
+    <title>智能家庭助手</title>
  </head>
  <body>
    <div id="app"></div>
--- a/src/App.vue
+++ b/src/App.vue
@@ -19,7 +19,7 @@
      <el-header class="header">
        <el-icon v-if="isMobile" @click="drawerVisible = true"><Fold/></el-icon>
        <div class="website-title">
-          网站标题
+          智能家庭助手
        </div>
      </el-header>

--- a/src/assets/agent.svg
+++ b/src/assets/agent.svg
--- a/src/assets/user.svg
+++ b/src/assets/user.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1783005197096" class="icon" viewBox="0 0 1820 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="27777" xmlns:xlink="http://www.w3.org/1999/xlink" width="113.75" height="64"><path d="M735.573333 475.685926C750.648889 558.459259 823.087407 621.226667 910.222222 621.226667c87.134815 0 159.573333-62.672593 174.648889-145.540741 26.927407-24.936296 43.899259-60.681481 43.899259-100.219259 0-23.22963-5.783704-45.131852-16.023703-64.284445 1.611852-10.24 2.37037-20.66963 2.37037-31.288889 0-113.114074-91.685926-204.8-204.8-204.8s-204.8 91.685926-204.8 204.8c0 10.619259 0.853333 21.143704 2.37037 31.288889-10.24 19.152593-16.023704 41.054815-16.023703 64.284445-0.094815 39.632593 16.782222 75.282963 43.709629 100.219259z" p-id="27778" fill="#1296db"></path><path d="M1181.487407 717.653333c-111.881481-55.751111-61.724444-60.207407-130.18074-103.158518-2.180741-1.327407-5.025185-2.085926-7.585186-2.085926-24.367407 8.628148-18.014815 19.437037-29.961481 38.494815-14.506667 33.943704-33.28 87.703704-45.795556 124.397037l-23.04-72.343704 12.515556-43.804444c1.137778-4.077037 0.379259-8.533333-2.180741-11.946667-2.56-3.413333-6.637037-5.404444-10.903703-5.404445h-66.275556c-4.171852 0-8.154074 1.896296-10.714074 5.214815-2.56 3.318519-3.508148 7.585185-2.56 11.662223l10.714074 43.804444-25.505185 72.343704c-5.025185-16.782222-11.188148-37.072593-17.635556-57.268148-7.774815-24.557037-16.023704-49.114074-23.134815-67.887408-11.377778-19.342222-3.792593-29.961481-28.823703-39.253333-2.465185 0-5.214815 0.758519-7.395556 1.991111-68.077037 40.485926-21.522963 39.253333-133.878518 104.485926-102.968889 60.112593-111.597037 155.97037-111.407408 183.940741 0 5.12 0.284444 8.059259 0.284445 8.438518 0.663704 7.016296 6.542222 12.420741 13.558518 12.420741h737.28c7.016296 0 12.98963-5.404444 13.558519-12.420741 0-0.379259 0.379259-3.982222 0.379259-10.145185 0.18963-30.72-8.533333-129.896296-111.312593-181.475556z" p-id="27779" fill="#1296db"></path></svg>
--- a/src/components/Agent.vue
+++ b/src/components/Agent.vue
@@ -1,79 +1,96 @@
 <template>
  <div class="agent-container">
-    <!-- 聊天区域 -->
-    <main class="chat-container">
-      <div v-for="(item, index) in agentStore.chatMessages" :key="index" class="message" :class="item.role">
-        <!-- 用户 -->
-        <div v-if="item.role === 'user'" class="bubble">
-          {{ item.content }}
+    <main class="message-container" ref="msgContainer">
+      <div v-if="agentStore.chatMessages.length === 0" class="empty-state">
+        <el-avatar :size="72" :src="aiAvatar" class="empty-avatar" />
+        <h2>你好，我是智能家庭助手</h2>
+        <p>有什么可以帮你的？</p>
+        <div class="quick-actions">
+          <el-button v-for="q in quickQuestions" :key="q" type="primary" round @click="askQuick(q)">{{ q }}</el-button>
+        </div>
      </div>

-        <!-- AI -->
-        <MdPreview v-else :modelValue="item.content" class="md"/>
+      <div v-for="(item, index) in agentStore.chatMessages" :key="index" class="msg-row" :class="item.role">
+        <el-avatar :size="36" :src="item.role === 'ai' ? aiAvatar : userAvatar" class="msg-avatar"/>
+
+        <div class="msg-body">
+          <div class="msg-bubble" :class="item.role">
+            <MdPreview v-if="item.role === 'ai'" :modelValue="item.content" class="md-preview"/>
+            <template v-else><span class="user-text">{{ item.content }}</span></template>
+          </div>
+          <span class="msg-time">{{ item.role === 'ai' ? 'AI' : '你' }}</span>
+        </div>
      </div>

-      <div v-if="agentStore.loading" class="loading">
-        <el-icon class="is-loading"><Loading /></el-icon>
-        思考中…
+      <!-- 加载动画 -->
+      <div v-if="agentStore.loading" class="msg-row ai">
+        <el-avatar :size="36" :src="aiAvatar" class="msg-avatar" />
+        <div class="msg-body">
+          <div class="msg-bubble ai typing">
+            <span class="dot" />
+            <span class="dot" />
+            <span class="dot" />
+          </div>
+        </div>
      </div>
    </main>

-    <!-- 输入区 -->
-    <footer class="input-container">
-      <el-input v-model="agentStore.input" placeholder="请输入你的食材" @keyup.enter="sendMessage" clearable/>
-      <el-button type="primary" :loading="agentStore.loading" @click="sendMessage">发送</el-button>
+    <!-- 底部输入区 -->
+    <footer class="input-bar">
+      <div class="input-wrap">
+        <el-input v-model="agentStore.inputMessage" placeholder="输入你的问题…"
+                  @keyup.enter="sendMessage" clearable :disabled="agentStore.loading"/>
+        <el-button type="primary" circle :loading="agentStore.loading"
+                   :disabled="!agentStore.inputMessage.trim()" @click="sendMessage">
+          <template #icon>
+            <el-icon><Promotion /></el-icon>
+          </template>
+        </el-button>
+      </div>
    </footer>
  </div>
 </template>

 <script setup lang="ts">
-import { onMounted } from "vue";
-import { Loading } from "@element-plus/icons-vue";
-import { MdPreview } from 'md-editor-v3';
-import 'md-editor-v3/lib/preview.css';
+import { Promotion } from "@element-plus/icons-vue";
+import { MdPreview } from "md-editor-v3";
+import "md-editor-v3/lib/preview.css";
 import { useAgentStore } from "../stores/agent.ts";
+import { nextTick, ref } from "vue";
+import aiAvatar from '../assets/agent.svg'
+import userAvatar from '../assets/user.svg'

 const agentStore = useAgentStore();
+const msgContainer = ref<HTMLElement>();

-onMounted(() => {
-  getSessionMessage()
-})
+const quickQuestions = [
+  "帮我分析下这个月的账单",
+  "帮我查询下最近花费最大的一笔是什么？",
+  "帮我查询下今年存了多少钱？"
+];

-const getSessionMessage = async () => {
-  const response = await fetch(
-      "/chief-agent-api/chat/messages/session?username=Cxx0822",
-      {
-        method: "GET",
-        headers: { "Content-Type": "application/json" },
-      }
-  );
-  agentStore.sessionMessages = await response.json();
-  agentStore.threadId = crypto.randomUUID()
-}
+const scrollToBottom = () => {
+  nextTick(() => {
+    const el = msgContainer.value;
+    if (el) el.scrollTop = el.scrollHeight;
+  });
+};

 const sendMessage = async () => {
-  if (!agentStore.input.trim()) return;
-
-  const userMsg = agentStore.input;
-  agentStore.input = "";
+  if (!agentStore.inputMessage.trim() || agentStore.loading) return;

+  const userMsg = agentStore.inputMessage;
+  agentStore.inputMessage = "";
  agentStore.chatMessages.push({ role: "user", content: userMsg });
  agentStore.loading = true;
+  scrollToBottom();

  try {
-    agentStore.agentMessage = {
-      username: 'Cxx0822',
-      message: userMsg,
-      thread_id: agentStore.threadId,
-    }
-    const response = await fetch(
-        "/chief-agent-api/chat/stream",
-        {
+    const response = await fetch("/agent-api/query/bill", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
-          body: JSON.stringify(agentStore.agentMessage)
-        }
-    );
+      body: JSON.stringify({ message: userMsg }),
+    });

    agentStore.chatMessages.push({ role: "ai", content: "" });
    const reader = response.body!.getReader();
@@ -83,77 +100,169 @@ const sendMessage = async () => {
    while (true) {
      const { value, done } = await reader.read();
      if (done) break;
-
      aiText += decoder.decode(value, { stream: true });
      agentStore.chatMessages[agentStore.chatMessages.length - 1].content = aiText;
+      scrollToBottom();
    }
  } finally {
    agentStore.loading = false;
+    scrollToBottom();
  }
 };
+
+const askQuick = (q: string) => {
+  agentStore.inputMessage = q;
+  sendMessage();
+};
+
+const clearChat = () => {
+  agentStore.chatMessages = [];
+};
 </script>

 <style lang="scss">
 .agent-container {
  height: 100%;
-  background-color: whitesmoke;
-  border-radius: 10px;
-
  display: flex;
  flex-direction: column;
  gap: 10px;
-  padding: 5px;
+  overflow: hidden;
+
+  .message-container {
+    background: #f5f5f5;
+    border-radius: 12px;

-  .chat-container {
    flex: 1;
    overflow-y: auto;
-    padding: 10px;
-
-    .message {
-      margin-bottom: 12px;
-    }
-
-    .user {
-      text-align: right;
-    }
-
-    .ai {
-      text-align: left;
-    }
-
-    .bubble {
-      display: inline-block;
-      padding: 5px 10px;
-      border-radius: 14px;
-      max-width: 85%;
-      word-break: break-word;
-      line-height: 1.6;
-      background: #409eff;
-      color: #fff;
-    }
-
-    .md {
-      background: #f0f2f5;
-      border-radius: 14px;
-      padding: 5px;
-    }
-  }
-
-  .input-container {
-    background-color: white;
-    width: 100%;
-    padding: 10px;
-    box-sizing: border-box;
+    padding: 20px 16px;

    display: flex;
+    flex-direction: column;
+    gap: 16px;
+
+    .empty-state {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
      gap: 8px;
+      color: #999;
+
+      h2 {
+        margin: 0;
+        font-size: 20px;
+        color: #333;
+      }
+      p {
+        margin: 0;
+        font-size: 14px;
+      }
+      .quick-actions {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px;
+        margin-top: 12px;
+        justify-content: center;
+      }
    }

-  .loading {
-    text-align: center;
-    color: #909399;
+    .msg-row {
+      display: flex;
+      gap: 10px;
+      align-items: flex-start;
+      max-width: 85%;
+
+      .msg-body {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+
+        .msg-bubble {
+          padding: 10px 14px;
+          line-height: 1.7;
+          word-break: break-word;
+          box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
+
+          .md-preview {
+            background: transparent;
+            padding: 0;
            font-size: 14px;
-    margin: 8px 0;
+          }
+
+          .user-text {
+            white-space: pre-wrap;
+          }
+
+          &.ai {
+            background: #fff;
+            color: #333;
+          }
+          &.user {
+            background: linear-gradient(135deg, #409eff 0%, #337ecc 100%);
+            color: #fff;
+          }
+        }
+
+        .msg-time {
+          font-size: 11px;
+          color: #bbb;
+          padding-left: 4px;
+        }
+
+        .typing {
+          display: flex;
+          align-items: center;
+          gap: 5px;
+          padding: 14px 18px;
+          .dot {
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            background: #bbb;
+            animation: blink 1.2s infinite both;
+            &:nth-child(2) { animation-delay: 0.2s; }
+            &:nth-child(3) { animation-delay: 0.4s; }
+          }
+        }
+
+        @keyframes blink {
+          0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
+          40% { opacity: 1; transform: scale(1); }
+        }
+      }
+
+      .msg-avatar {
+        flex-shrink: 0;
+        margin-top: 2px;
+        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
+      }
+
+      &.user {
+        flex-direction: row-reverse;
+        align-self: flex-end;
+        .msg-bubble {
+          border-radius: 18px 18px 4px 18px;
+        }
+      }
+
+      &.ai {
+        align-self: flex-start;
+        .msg-bubble {
+          border-radius: 18px 18px 18px 4px;
+        }
+      }
+    }
+  }
+
+  .input-bar {
+    background: #fff;
+    border-top: 1px solid #e8e8e8;
+    .input-wrap {
+      display: flex;
+      gap: 10px;
+      align-items: center;
+    }
  }
 }
 </style>
--- a/src/stores/agent.ts
+++ b/src/stores/agent.ts
@@ -1,4 +1,3 @@
-// src/stores/chat.ts
 import {defineStore} from 'pinia'
 import type {IAgentMessage, IChatMessage, ISessionMessage} from "../types/agent.ts";

@@ -8,8 +7,10 @@ export const useAgentStore = defineStore('agent', {
        chatMessages: [] as IChatMessage[],
        sessionMessages: [] as ISessionMessage[],
        agentMessage: {} as IAgentMessage,
-        input: '',
+        inputMessage: '',
        loading: false,
    }),
-    actions: {}
+    actions: {
+
+    }
 })
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -8,10 +8,10 @@ export default defineConfig({
  server: {
    // 服务器代理 服务器没有部署Nginx的情况下使用
    proxy: {
-      '/chief-agent-api': {
-        target: `http://60.247.145.200:8300`,
+      '/agent-api': {
+        target: `http://192.168.1.7:8000`,
        changeOrigin: true,
-        rewrite: (item) => item.replace(/^\/chief-agent-api/, '')
+        rewrite: (item) => item.replace(/^\/agent-api/, '')
      }
    }
  }
				`@@ -0,0 +1 @@`
				<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1783005197096" class="icon" viewBox="0 0 1820 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="27777" xmlns:xlink="http://www.w3.org/1999/xlink" width="113.75" height="64"><path d="M735.573333 475.685926C750.648889 558.459259 823.087407 621.226667 910.222222 621.226667c87.134815 0 159.573333-62.672593 174.648889-145.540741 26.927407-24.936296 43.899259-60.681481 43.899259-100.219259 0-23.22963-5.783704-45.131852-16.023703-64.284445 1.611852-10.24 2.37037-20.66963 2.37037-31.288889 0-113.114074-91.685926-204.8-204.8-204.8s-204.8 91.685926-204.8 204.8c0 10.619259 0.853333 21.143704 2.37037 31.288889-10.24 19.152593-16.023704 41.054815-16.023703 64.284445-0.094815 39.632593 16.782222 75.282963 43.709629 100.219259z" p-id="27778" fill="#1296db"></path><path d="M1181.487407 717.653333c-111.881481-55.751111-61.724444-60.207407-130.18074-103.158518-2.180741-1.327407-5.025185-2.085926-7.585186-2.085926-24.367407 8.628148-18.014815 19.437037-29.961481 38.494815-14.506667 33.943704-33.28 87.703704-45.795556 124.397037l-23.04-72.343704 12.515556-43.804444c1.137778-4.077037 0.379259-8.533333-2.180741-11.946667-2.56-3.413333-6.637037-5.404444-10.903703-5.404445h-66.275556c-4.171852 0-8.154074 1.896296-10.714074 5.214815-2.56 3.318519-3.508148 7.585185-2.56 11.662223l10.714074 43.804444-25.505185 72.343704c-5.025185-16.782222-11.188148-37.072593-17.635556-57.268148-7.774815-24.557037-16.023704-49.114074-23.134815-67.887408-11.377778-19.342222-3.792593-29.961481-28.823703-39.253333-2.465185 0-5.214815 0.758519-7.395556 1.991111-68.077037 40.485926-21.522963 39.253333-133.878518 104.485926-102.968889 60.112593-111.597037 155.97037-111.407408 183.940741 0 5.12 0.284444 8.059259 0.284445 8.438518 0.663704 7.016296 6.542222 12.420741 13.558518 12.420741h737.28c7.016296 0 12.98963-5.404444 13.558519-12.420741 0-0.379259 0.379259-3.982222 0.379259-10.145185 0.18963-30.72-8.533333-129.896296-111.312593-181.475556z" p-id="27779" fill="#1296db"></path></svg>