|
@@ -0,0 +1,170 @@
|
|
|
+<template>
|
|
|
+ <div class="flex h-screen bg-white">
|
|
|
+ <!-- Left Sidebar -->
|
|
|
+ <div class="w-64 bg-[#1a1a2e] text-white flex flex-col">
|
|
|
+ <!-- Logo -->
|
|
|
+ <div class="p-4 flex items-center space-x-2">
|
|
|
+ <div class="bg-purple-600 rounded p-1">
|
|
|
+ <PlaySquare class="w-5 h-5" />
|
|
|
+ </div>
|
|
|
+ <span class="font-bold">GEN <span class="text-purple-400">LITEX</span></span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Navigation -->
|
|
|
+ <nav class="flex-1 p-4">
|
|
|
+ <div class="space-y-2">
|
|
|
+ <a href="#" class="flex items-center space-x-2 text-gray-300 hover:text-white">
|
|
|
+ <Home class="w-4 h-4" />
|
|
|
+ <span>Home</span>
|
|
|
+ </a>
|
|
|
+
|
|
|
+ <!-- Sessions Section -->
|
|
|
+ <div class="mt-6">
|
|
|
+ <div class="flex items-center justify-between">
|
|
|
+ <span class="text-sm text-gray-400">Sessions</span>
|
|
|
+ <button class="text-xs bg-purple-600 px-2 py-1 rounded-md">
|
|
|
+ + New Requirement
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Session Items -->
|
|
|
+ <div class="mt-3 space-y-2">
|
|
|
+ <div v-for="(item, index) in sessionItems" :key="index"
|
|
|
+ class="flex items-center justify-between text-sm text-gray-300 hover:text-white group">
|
|
|
+ <div class="flex items-center space-x-2">
|
|
|
+ <FileText class="w-4 h-4" />
|
|
|
+ <span class="truncate">{{ item }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="hidden group-hover:flex space-x-2">
|
|
|
+ <PencilLine class="w-3 h-3" />
|
|
|
+ <Trash2 class="w-3 h-3" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </nav>
|
|
|
+
|
|
|
+ <!-- Bottom Admin Section -->
|
|
|
+ <div class="p-4 border-t border-gray-700">
|
|
|
+ <div class="flex items-center space-x-3">
|
|
|
+ <div class="w-8 h-8 bg-gray-600 rounded-full"></div>
|
|
|
+ <div>
|
|
|
+ <div class="text-sm font-medium">admin</div>
|
|
|
+ <div class="text-xs text-gray-400">platform admin</div>
|
|
|
+ </div>
|
|
|
+ <ChevronRight class="w-4 h-4 ml-auto" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Main Content -->
|
|
|
+ <div class="flex-1 flex flex-col">
|
|
|
+ <!-- Top Bar -->
|
|
|
+ <div class="h-14 border-b flex items-center justify-end px-4">
|
|
|
+ <div class="flex items-center space-x-2">
|
|
|
+ <span class="text-gray-600">qwen-turbo</span>
|
|
|
+ <ChevronDown class="w-4 h-4 text-gray-400" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Chat Area -->
|
|
|
+ <div class="flex-1 overflow-auto p-6">
|
|
|
+ <div class="max-w-4xl mx-auto space-y-6">
|
|
|
+ <!-- Chat Messages -->
|
|
|
+ <div class="bg-white rounded-lg p-4 shadow-sm">
|
|
|
+ <h2 class="text-lg font-medium mb-4">Snowflake Training Registration</h2>
|
|
|
+ <div class="space-y-4 text-gray-600">
|
|
|
+ <p>根据您提供的内容片段,"Snowflake Training Registration"</p>
|
|
|
+ <p>文件包含以下功能描述:</p>
|
|
|
+ <ol class="list-decimal pl-6 space-y-2">
|
|
|
+ <li>在步骤七中输入培训券,最终结算时费用应为零。</li>
|
|
|
+ <li>注意:在第四步不要直接点击Play按钮,基于之前的体验,
|
|
|
+ 这可能导致屏幕变白,正确的做法是点击Details,
|
|
|
+ 然后点击仪表板链接进入。</li>
|
|
|
+ </ol>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Input Area -->
|
|
|
+ <div class="border-t p-4">
|
|
|
+ <div class="max-w-4xl mx-auto">
|
|
|
+ <div class="flex items-center space-x-2 mb-2">
|
|
|
+ <div class="bg-gray-100 rounded-full px-3 py-1 text-sm flex items-center space-x-1">
|
|
|
+ <span>User Story Agent</span>
|
|
|
+ <X class="w-3 h-3" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="flex items-end space-x-2">
|
|
|
+ <textarea
|
|
|
+ class="flex-1 border rounded-lg p-3 resize-none focus:outline-none focus:ring-2 focus:ring-purple-500"
|
|
|
+ placeholder="Chat with GentLiteX Chatbot ..."
|
|
|
+ rows="1"
|
|
|
+ ></textarea>
|
|
|
+ <button class="p-2 bg-purple-500 text-white rounded-lg hover:bg-purple-600">
|
|
|
+ <Send class="w-5 h-5" />
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Right Panel -->
|
|
|
+ <div class="w-80 border-l p-4">
|
|
|
+ <div class="space-y-4">
|
|
|
+ <h3 class="text-lg font-medium">You uploaded the document</h3>
|
|
|
+ <div class="space-y-2">
|
|
|
+ <div v-for="(file, index) in uploadedFiles" :key="index"
|
|
|
+ class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
|
|
|
+ <div class="flex-1">
|
|
|
+ <div class="text-sm font-medium truncate">{{ file.name }}</div>
|
|
|
+ <div class="text-xs text-gray-500">{{ file.type }}</div>
|
|
|
+ </div>
|
|
|
+ <Trash2 class="w-4 h-4 text-gray-400 hover:text-gray-600 cursor-pointer" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { ref } from 'vue'
|
|
|
+import {
|
|
|
+ Home,
|
|
|
+ FileText,
|
|
|
+ PencilLine,
|
|
|
+ Trash2,
|
|
|
+ ChevronRight,
|
|
|
+ ChevronDown,
|
|
|
+ PlaySquare,
|
|
|
+ Send,
|
|
|
+ X
|
|
|
+} from 'lucide-vue-next'
|
|
|
+
|
|
|
+const sessionItems = ref([
|
|
|
+ 'UserStory-2025-02-2...',
|
|
|
+ 'UserStory-2025-02-2...',
|
|
|
+ '测试用例/lw-2',
|
|
|
+ '测试用例/lw-1',
|
|
|
+ '测试2',
|
|
|
+ '测试'
|
|
|
+])
|
|
|
+
|
|
|
+const uploadedFiles = ref([
|
|
|
+ {
|
|
|
+ name: 'Snowflake Training Registration-d604-30b2-4ec4-9f3e-be068b2c9bb4.txt',
|
|
|
+ type: 'text-image.table.testing.doucument'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'text-image.table.testing.doucument-c9267fb7-f962-4857-bf3f-16820a220f',
|
|
|
+ type: 'document'
|
|
|
+ }
|
|
|
+])
|
|
|
+</script>
|
|
|
+
|
|
|
+<style>
|
|
|
+/* Add any custom styles here if needed */
|
|
|
+</style>
|