|
|
@@ -0,0 +1,107 @@
|
|
|
+<template>
|
|
|
+ <div class="flex h-screen bg-gradient-to-br from-white to-purple-500">
|
|
|
+ <!-- Sidebar -->
|
|
|
+ <aside class="w-64 bg-[#08002E] text-white flex flex-col">
|
|
|
+ <!-- Chat History -->
|
|
|
+ <div class="p-6">
|
|
|
+ <h2 class="text-xl font-semibold mb-4">聊天历史记录</h2>
|
|
|
+ <div class="space-y-2">
|
|
|
+ <div v-for="(message, index) in chatHistory" :key="index" class="p-3 rounded-lg bg-gray-700 text-white">
|
|
|
+ {{ message }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </aside>
|
|
|
+
|
|
|
+ <!-- Main Content -->
|
|
|
+ <main class="flex-1 overflow-auto p-6">
|
|
|
+ <div class="max-w-4xl mx-auto">
|
|
|
+ <!-- Header -->
|
|
|
+ <div class="flex justify-between items-center mb-8">
|
|
|
+ <h1 class="text-2xl font-semibold mb-2">用户故事生成</h1>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Chat Content -->
|
|
|
+ <div class="bg-white p-6 rounded-lg shadow-sm mb-6">
|
|
|
+ <div class="chat-container">
|
|
|
+ <div v-for="(message, index) in chatMessages" :key="index" class="message">
|
|
|
+ <div :class="{'user-message': message.sender === 'user', 'bot-message': message.sender === 'bot'}">
|
|
|
+ <p>{{ message.text }}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Chat Input -->
|
|
|
+ <div class="flex gap-2">
|
|
|
+ <div class="flex-1 relative">
|
|
|
+ <input
|
|
|
+ type="text"
|
|
|
+ v-model="userInput"
|
|
|
+ placeholder="与聊天机器人对话..."
|
|
|
+ class="w-full p-3 pr-12 border rounded-lg"
|
|
|
+ @keyup.enter="sendMessage"
|
|
|
+ />
|
|
|
+ <Upload class="absolute right-4 top-1/2 -translate-y-1/2 text-gray-400 cursor-pointer" @click="uploadFile" />
|
|
|
+ </div>
|
|
|
+ <button class="p-3 bg-purple-500 text-white rounded-lg hover:bg-purple-600" @click="sendMessage">
|
|
|
+ <Send class="w-5 h-5" />
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </main>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { ref } from 'vue'
|
|
|
+import { Upload, Send } from 'lucide-vue-next'
|
|
|
+
|
|
|
+const chatHistory = ref(['之前的对话记录'])
|
|
|
+const chatMessages = ref([
|
|
|
+ { sender: 'bot', text: '你好！我是GenLiteX聊天机器人，很高兴帮助你生成用户故事。' }
|
|
|
+])
|
|
|
+const userInput = ref('')
|
|
|
+
|
|
|
+const sendMessage = () => {
|
|
|
+ if (userInput.value.trim()) {
|
|
|
+ chatMessages.value.push({ sender: 'user', text: userInput.value })
|
|
|
+ // Simulate bot response
|
|
|
+ setTimeout(() => {
|
|
|
+ chatMessages.value.push({ sender: 'bot', text: '这是你的用户故事：...' })
|
|
|
+ }, 1000)
|
|
|
+ userInput.value = ''
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const uploadFile = () => {
|
|
|
+ // Handle file upload logic here
|
|
|
+ alert('文件上传功能暂未实现')
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.chat-container {
|
|
|
+ max-height: 400px;
|
|
|
+ overflow-y: auto;
|
|
|
+ padding-bottom: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.message {
|
|
|
+ margin-bottom: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.user-message {
|
|
|
+ background-color: #f1f1f1;
|
|
|
+ padding: 10px;
|
|
|
+ border-radius: 10px;
|
|
|
+ text-align: right;
|
|
|
+}
|
|
|
+
|
|
|
+.bot-message {
|
|
|
+ background-color: #e0e0ff;
|
|
|
+ padding: 10px;
|
|
|
+ border-radius: 10px;
|
|
|
+ text-align: left;
|
|
|
+}
|
|
|
+</style>
|
genlitex