feat:初始化工程

2026-05-27 20:02:57 +08:00
commit fa8787c77a
18 changed files with 2195 additions and 0 deletions
--- a/src/App.vue
+++ b/src/App.vue
@@ -0,0 +1,152 @@
+<template>
+  <div class="app">
+    <!-- 头部 -->
+    <header class="header">🍳 私厨 AI</header>
+
+    <!-- 聊天区域 -->
+    <main v-if="messages.length" class="chat-box" ref="chatBox">
+      <div v-if="loading" class="loading">
+        <el-icon class="is-loading"><Loading /></el-icon>
+        思考中…
+      </div>
+
+      <div v-for="(item, index) in messages" :key="index" class="message" :class="item.role">
+        <!-- 用户 -->
+        <div v-if="item.role === 'user'" class="bubble">
+          {{ item.text }}
+        </div>
+
+        <!-- AI -->
+        <MdPreview v-else :modelValue="item.text" class="md"/>
+      </div>
+    </main>
+
+    <!-- 输入区 -->
+    <footer class="input-area">
+      <el-input v-model="input" placeholder="请输入你的食材" @keyup.enter="send" clearable/>
+      <el-button type="primary" :loading="loading" @click="send">发送</el-button>
+    </footer>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, nextTick } from "vue";
+import { Loading } from "@element-plus/icons-vue";
+import { MdPreview } from 'md-editor-v3';
+import 'md-editor-v3/lib/preview.css';
+
+interface Message {
+  role: "user" | "ai";
+  text: string;
+}
+
+const input = ref("");
+const messages = ref<Message[]>([]);
+const loading = ref(false);
+const chatBox = ref<HTMLElement>();
+
+const send = async () => {
+  if (!input.value.trim()) return;
+
+  const userMsg = input.value;
+  input.value = "";
+
+  messages.value.push({ role: "user", text: userMsg });
+  messages.value.push({ role: "ai", text: "" });
+
+  loading.value = true;
+  await nextTick();
+
+  try {
+    const response = await fetch(
+        "/chief-agent-api/chat/stream",
+        {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ message: userMsg })
+        }
+    );
+
+    const reader = response.body!.getReader();
+    const decoder = new TextDecoder("utf-8");
+    let aiText = "";
+
+    while (true) {
+      const { value, done } = await reader.read();
+      if (done) break;
+
+      aiText += decoder.decode(value, { stream: true });
+      messages.value[messages.value.length - 1].text = aiText;
+
+      chatBox.value!.scrollTop = chatBox.value!.scrollHeight;
+    }
+  } finally {
+    loading.value = false;
+  }
+};
+</script>
+
+<style scoped>
+.app {
+  display: flex;
+  flex-direction: column;
+}
+
+.header {
+  padding: 14px;
+  text-align: center;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.chat-box {
+  background-color: #FBF9F5;
+  flex: 1;
+  overflow-y: auto;
+  padding: 12px;
+}
+
+.message {
+  margin-bottom: 12px;
+}
+
+.user {
+  text-align: right;
+}
+
+.ai {
+  text-align: left;
+}
+
+.bubble {
+  display: inline-block;
+  padding: 10px 14px;
+  border-radius: 14px;
+  max-width: 85%;
+  word-break: break-word;
+  font-size: 15px;
+  line-height: 1.6;
+  background: #409eff;
+  color: #fff;
+}
+
+.md {
+  background: #f0f2f5;
+  border-radius: 14px;
+  padding: 8px;
+}
+
+.input-area {
+  display: flex;
+  gap: 8px;
+  padding: 10px;
+  background: #fff;
+}
+
+.loading {
+  text-align: center;
+  color: #909399;
+  font-size: 14px;
+  margin: 8px 0;
+}
+</style>