|
|
@@ -1,80 +1,111 @@
|
|
|
<template>
|
|
|
<div class="flex h-screen">
|
|
|
<!-- Sidebar -->
|
|
|
- <aside class="w-64 bg-[#08002E] text-white flex flex-col">
|
|
|
- <!-- Logo -->
|
|
|
- <div class="p-6">
|
|
|
- <div class="flex items-center gap-2">
|
|
|
- <img src="@/assets/img/user_logo.png" alt="User Logo" class="w-16 h-16 rounded-full shadow-md" />
|
|
|
+ <aside class="w-64 bg-[#08002E] text-white flex flex-col justify-between">
|
|
|
+ <!-- Top Section -->
|
|
|
+ <div class="flex-1">
|
|
|
+ <!-- Logo -->
|
|
|
+ <div class="p-4">
|
|
|
+ <div class="flex items-center gap-2">
|
|
|
+ <img src="@/assets/img/prompt_view.png" alt="App Logo" class="w-12 h-12 rounded-full shadow-md object-cover" />
|
|
|
+ <span class="text-lg font-semibold">用户故事工坊</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
|
- <!-- Navigation -->
|
|
|
- <nav class="flex-1 px-4">
|
|
|
- <div class="mb-8">
|
|
|
- <div class="flex items-center justify-between mb-4">
|
|
|
- <span class="text-sm">Contacts</span>
|
|
|
+ <!-- Navigation -->
|
|
|
+ <nav class="px-4 mt-4">
|
|
|
+ <div class="mb-8">
|
|
|
+ <div class="flex items-center justify-between mb-4">
|
|
|
+ <span class="text-sm">联系人</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
|
- <div class="space-y-6">
|
|
|
- <div class="text-xs text-gray-400 uppercase">MANAGE CONTACTS</div>
|
|
|
- <div class="space-y-2">
|
|
|
- <a v-for="(contact, index) in contacts"
|
|
|
- :key="index"
|
|
|
- href="#"
|
|
|
- class="flex items-center gap-3 px-3 py-2 text-gray-300 rounded-lg hover:bg-purple-600/20">
|
|
|
- <div class="w-10 h-10 bg-gray-600 rounded-full"></div>
|
|
|
- <div>{{ contact.name }}</div>
|
|
|
- </a>
|
|
|
+ <div class="space-y-6">
|
|
|
+ <div class="text-xs text-gray-400 uppercase">最近联系</div>
|
|
|
+ <div class="space-y-2">
|
|
|
+ <a v-for="(contact, index) in contacts"
|
|
|
+ :key="index"
|
|
|
+ href="#"
|
|
|
+ class="flex items-center gap-3 px-3 py-2 text-gray-300 rounded-lg hover:bg-purple-600/20">
|
|
|
+ <div class="w-10 h-10 bg-gray-600 rounded-full"></div>
|
|
|
+ <div>{{ contact.name }}</div>
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </nav>
|
|
|
+ </nav>
|
|
|
+ </div>
|
|
|
|
|
|
<!-- User Profile -->
|
|
|
- <div class="p-4 border-t border-gray-700">
|
|
|
+ <div class="p-4 border-t border-gray-700 hover:bg-purple-900/20 transition-colors cursor-pointer group">
|
|
|
<div class="flex items-center gap-3">
|
|
|
- <img src="@/assets/img/user_logo.png" alt="User Logo" class="w-10 h-10 rounded-full" />
|
|
|
- <div>
|
|
|
- <div class="text-sm font-medium">User Name</div>
|
|
|
- <div class="text-xs text-gray-400">User Role</div>
|
|
|
+ <div class="relative">
|
|
|
+ <img
|
|
|
+ src="@/assets/img/prompt_view.png"
|
|
|
+ alt="User Logo"
|
|
|
+ class="w-12 h-12 rounded-full object-cover border-2 border-purple-400 group-hover:border-purple-300 transition-all"
|
|
|
+ />
|
|
|
+ <div class="absolute bottom-0 right-0 w-3 h-3 bg-green-400 rounded-full border-2 border-white"></div>
|
|
|
+ </div>
|
|
|
+ <div class="flex-1">
|
|
|
+ <div class="text-sm font-medium text-white group-hover:text-purple-200">当前用户</div>
|
|
|
+ <div class="text-xs text-gray-300 group-hover:text-purple-100">管理员</div>
|
|
|
</div>
|
|
|
- <ChevronRight class="w-4 h-4 ml-auto text-gray-400" />
|
|
|
+ <ChevronRight class="w-4 h-4 ml-2 text-gray-400 group-hover:text-purple-300" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</aside>
|
|
|
|
|
|
<!-- Main Content -->
|
|
|
- <main class="flex-1 overflow-auto bg-gradient-to-r from-white to-purple-200">
|
|
|
- <div class="max-w-4xl mx-auto p-8">
|
|
|
- <!-- Header -->
|
|
|
- <div class="flex justify-between items-center mb-8">
|
|
|
- <h1 class="text-2xl font-semibold mb-2">User Stories Generator</h1>
|
|
|
- </div>
|
|
|
+ <main class="flex-1 flex flex-col">
|
|
|
+ <!-- Chat Container -->
|
|
|
+ <div class="flex-1 overflow-auto bg-gradient-to-br from-white via-purple-50 to-purple-100">
|
|
|
+ <div class="max-w-4xl mx-auto p-8 pb-24">
|
|
|
+ <!-- Header -->
|
|
|
+ <div class="flex justify-between items-center mb-8">
|
|
|
+ <h1 class="text-2xl font-semibold text-purple-900">用户故事生成器</h1>
|
|
|
+ </div>
|
|
|
|
|
|
- <!-- Chat Area -->
|
|
|
- <div class="bg-white p-6 rounded-lg shadow-sm mb-6">
|
|
|
- <div v-for="(message, index) in messages"
|
|
|
- :key="index"
|
|
|
- :class="[message.sender === 'user' ? 'bg-gradient-to-r from-white to-purple-200' : 'bg-gray-100']"
|
|
|
- class="p-4 rounded-lg mb-4">
|
|
|
- <p>{{ message.content }}</p>
|
|
|
+ <!-- Chat Area -->
|
|
|
+ <div class="space-y-4 mb-6">
|
|
|
+ <div v-for="(message, index) in messages"
|
|
|
+ :key="index"
|
|
|
+ :class="[message.sender === 'user' ? 'ml-20' : 'mr-20']">
|
|
|
+ <div :class="[
|
|
|
+ 'p-4 rounded-lg shadow-sm',
|
|
|
+ message.sender === 'user'
|
|
|
+ ? 'bg-gradient-to-r from-white to-purple-200'
|
|
|
+ : 'bg-gray-50'
|
|
|
+ ]">
|
|
|
+ <p class="whitespace-pre-wrap text-gray-800">{{ message.content }}</p>
|
|
|
+ <div class="mt-2 text-xs text-gray-500 text-right">{{ message.timestamp }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
|
|
|
- <!-- Chat Input -->
|
|
|
- <div class="flex gap-2">
|
|
|
+ <!-- Chat Input -->
|
|
|
+ <div class="sticky bottom-0 bg-white/95 backdrop-blur-sm border-t border-purple-100">
|
|
|
+ <div class="max-w-4xl mx-auto p-8 pt-4">
|
|
|
<div class="flex-1 relative">
|
|
|
<input
|
|
|
v-model="newMessage"
|
|
|
type="text"
|
|
|
- placeholder="Type your message..."
|
|
|
- class="w-full p-3 pr-12 border rounded-lg"
|
|
|
+ placeholder="输入消息..."
|
|
|
+ class="w-full p-3 pr-12 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
|
|
|
+ @keyup.enter="sendMessage"
|
|
|
/>
|
|
|
- <Upload class="absolute right-4 top-1/2 -translate-y-1/2 text-gray-400 cursor-pointer" @click="uploadFile" />
|
|
|
+ <button
|
|
|
+ @click="uploadFile"
|
|
|
+ class="absolute right-12 top-1/2 -translate-y-1/2 p-2 text-purple-500 hover:text-purple-600">
|
|
|
+ <Upload class="w-5 h-5" />
|
|
|
+ </button>
|
|
|
</div>
|
|
|
- <button class="p-3 bg-[#08002E] text-white rounded-lg hover:bg-purple-600" @click="sendMessage">
|
|
|
+ <button
|
|
|
+ @click="sendMessage"
|
|
|
+ class="p-3 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors flex items-center gap-2">
|
|
|
<Send class="w-5 h-5" />
|
|
|
+ <span>发送</span>
|
|
|
</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -83,41 +114,107 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import {
|
|
|
- ChevronRight,
|
|
|
- Upload,
|
|
|
- Send
|
|
|
-} from 'lucide-vue-next'
|
|
|
+import { ChevronRight, Upload, Send } from 'lucide-vue-next'
|
|
|
+import { ref } from 'vue'
|
|
|
|
|
|
const contacts = [
|
|
|
- { name: 'Contact 1' },
|
|
|
- { name: 'Contact 2' },
|
|
|
- { name: 'Contact 3' },
|
|
|
+ { name: '产品经理' },
|
|
|
+ { name: '开发团队' },
|
|
|
+ { name: '测试团队' },
|
|
|
]
|
|
|
|
|
|
-const messages = [
|
|
|
- { sender: 'user', content: 'Hello, how can I generate user stories?' },
|
|
|
- { sender: 'assistant', content: 'You can start by providing details about your project.' },
|
|
|
-]
|
|
|
+const messages = ref([
|
|
|
+ {
|
|
|
+ sender: 'assistant',
|
|
|
+ content: '欢迎使用用户故事生成器！\n请通过以下步骤开始：\n1. 上传需求文档\n2. 描述业务场景\n3. 选择生成模式',
|
|
|
+ timestamp: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
|
|
|
+ },
|
|
|
+ {
|
|
|
+ sender: 'user',
|
|
|
+ content: '我们需要一个电商平台的用户注册功能',
|
|
|
+ timestamp: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
|
|
|
+ }
|
|
|
+])
|
|
|
|
|
|
-let newMessage = ''
|
|
|
+const newMessage = ref('')
|
|
|
|
|
|
const sendMessage = () => {
|
|
|
- if (newMessage.trim()) {
|
|
|
- messages.push({ sender: 'user', content: newMessage })
|
|
|
- newMessage = ''
|
|
|
- // Simulate assistant response
|
|
|
+ if (newMessage.value.trim()) {
|
|
|
+ messages.value.push({
|
|
|
+ sender: 'user',
|
|
|
+ content: newMessage.value,
|
|
|
+ timestamp: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
|
|
|
+ })
|
|
|
+ newMessage.value = ''
|
|
|
+
|
|
|
+ // 模拟AI回复
|
|
|
setTimeout(() => {
|
|
|
- messages.push({ sender: 'assistant', content: 'Great, let\'s get started!' })
|
|
|
+ messages.value.push({
|
|
|
+ sender: 'assistant',
|
|
|
+ content: '已收到您的需求，正在生成用户故事...',
|
|
|
+ timestamp: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
|
|
|
+ })
|
|
|
}, 1000)
|
|
|
}
|
|
|
}
|
|
|
|
|
|
const uploadFile = () => {
|
|
|
- // File upload logic here
|
|
|
+ // 文件上传逻辑
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
-/* Additional styles can be added here if needed */
|
|
|
+/* 自定义滚动条样式 */
|
|
|
+main::-webkit-scrollbar {
|
|
|
+ width: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+main::-webkit-scrollbar-track {
|
|
|
+ @apply bg-purple-50;
|
|
|
+}
|
|
|
+
|
|
|
+main::-webkit-scrollbar-thumb {
|
|
|
+ @apply bg-purple-200 rounded-full;
|
|
|
+}
|
|
|
+
|
|
|
+main::-webkit-scrollbar-thumb:hover {
|
|
|
+ @apply bg-purple-300;
|
|
|
+}
|
|
|
+
|
|
|
+/* 确保对齐和颜色渐进 */
|
|
|
+.aside-section {
|
|
|
+ @apply bg-[#08002E] text-white flex flex-col justify-between;
|
|
|
+}
|
|
|
+
|
|
|
+.main-content {
|
|
|
+ @apply flex-1 flex flex-col bg-gradient-to-br from-white via-purple-50 to-purple-100;
|
|
|
+}
|
|
|
+
|
|
|
+.chat-container {
|
|
|
+ @apply flex-1 overflow-auto p-8 pb-24;
|
|
|
+}
|
|
|
+
|
|
|
+.chat-input {
|
|
|
+ @apply sticky bottom-0 bg-white/95 backdrop-blur-sm border-t border-purple-100;
|
|
|
+}
|
|
|
+
|
|
|
+.chat-input-inner {
|
|
|
+ @apply max-w-4xl mx-auto p-8 pt-4;
|
|
|
+}
|
|
|
+
|
|
|
+.input-area {
|
|
|
+ @apply flex-1 relative;
|
|
|
+}
|
|
|
+
|
|
|
+.input-field {
|
|
|
+ @apply w-full p-3 pr-12 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent;
|
|
|
+}
|
|
|
+
|
|
|
+.upload-button {
|
|
|
+ @apply absolute right-12 top-1/2 -translate-y-1/2 p-2 text-purple-500 hover:text-purple-600;
|
|
|
+}
|
|
|
+
|
|
|
+.send-button {
|
|
|
+ @apply p-3 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors flex items-center gap-2;
|
|
|
+}
|
|
|
</style>
|
genlitex
