|
|
@@ -0,0 +1,155 @@
|
|
|
+<template>
|
|
|
+ <div class="flex h-screen bg-[#f8f5ff]">
|
|
|
+ <!-- Sidebar -->
|
|
|
+ <div class="w-64 bg-[#0a0225] text-white p-4 flex flex-col">
|
|
|
+ <!-- Logo -->
|
|
|
+ <div class="flex items-center gap-2 mb-8">
|
|
|
+ <div class="text-xl font-bold">
|
|
|
+ GEN <span class="text-purple-500">LITEX</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Navigation -->
|
|
|
+ <div class="space-y-6">
|
|
|
+ <div>
|
|
|
+ <div class="flex items-center gap-2 text-sm text-gray-400 mb-2">
|
|
|
+ <Home class="w-4 h-4" />
|
|
|
+ <span>Home</span>
|
|
|
+ </div>
|
|
|
+ <div class="flex items-center justify-between mb-2">
|
|
|
+ <div class="text-sm text-gray-400">Sessions</div>
|
|
|
+ <button class="h-7 px-2 text-xs border border-gray-600 rounded-md flex items-center gap-1 hover:bg-white/10">
|
|
|
+ <Plus class="w-3 h-3" />
|
|
|
+ New Requirement
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Context Manager -->
|
|
|
+ <div>
|
|
|
+ <div class="text-xs text-gray-500 mb-2">MANAGER YOUR CONTEXT</div>
|
|
|
+ <nav class="space-y-2">
|
|
|
+ <div v-for="item in navItems"
|
|
|
+ :key="item.label"
|
|
|
+ class="flex items-center gap-2 text-sm text-gray-400 p-2 hover:bg-white/10 rounded-lg cursor-pointer">
|
|
|
+ <component :is="item.icon" class="w-4 h-4" />
|
|
|
+ <span>{{ item.label }}</span>
|
|
|
+ </div>
|
|
|
+ </nav>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Notifications -->
|
|
|
+ <div class="flex items-center gap-2 text-sm text-gray-400 p-2 hover:bg-white/10 rounded-lg cursor-pointer">
|
|
|
+ <Bell class="w-4 h-4" />
|
|
|
+ <span>Notifications</span>
|
|
|
+ <div class="ml-auto bg-purple-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">
|
|
|
+ 0
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- User Profile -->
|
|
|
+ <div class="mt-auto flex items-center gap-3 p-2 hover:bg-white/10 rounded-lg cursor-pointer">
|
|
|
+ <div class="w-8 h-8 bg-gray-600 rounded-full flex items-center justify-center text-sm">
|
|
|
+ ZB
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div class="text-sm">zbytest003</div>
|
|
|
+ <div class="text-xs text-gray-400">platform admin</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Main Content -->
|
|
|
+ <div class="flex-1 overflow-auto">
|
|
|
+ <div class="max-w-5xl mx-auto p-6">
|
|
|
+ <!-- Welcome Card -->
|
|
|
+ <div class="bg-white rounded-xl p-6 shadow-sm mb-4">
|
|
|
+ <h2 class="text-xl font-semibold mb-4">Hi, zbytest003</h2>
|
|
|
+ <p class="text-gray-600 mb-2">
|
|
|
+ I am GenliteX User Story generator, I'm here to help.
|
|
|
+ </p>
|
|
|
+ <p class="text-gray-600 mb-2">
|
|
|
+ Simply upload the related documents you have so that I can understand the background and generate user stories more accurately.
|
|
|
+ </p>
|
|
|
+ <p class="text-gray-600">
|
|
|
+ You can also constantly clarify your requests through the conversation.
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Chat Input -->
|
|
|
+ <div class="relative">
|
|
|
+ <input
|
|
|
+ type="text"
|
|
|
+ placeholder="Chat with GenliteX Chatbot ..."
|
|
|
+ class="w-full px-4 py-2 rounded-md border focus:outline-none focus:ring-2 focus:ring-purple-500 pr-24"
|
|
|
+ />
|
|
|
+ <div class="absolute right-2 top-1/2 -translate-y-1/2 flex gap-2">
|
|
|
+ <button class="p-2 text-gray-500 hover:bg-gray-100 rounded-md">
|
|
|
+ <Upload class="w-4 h-4" />
|
|
|
+ </button>
|
|
|
+ <button class="p-2 bg-purple-500 text-white rounded-md hover:bg-purple-600">
|
|
|
+ <Send class="w-4 h-4" />
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Warning Message -->
|
|
|
+ <div class="mt-4 text-xs text-red-500">
|
|
|
+ **Important: The content generated by artificial intelligence (AI) tools or platforms may contain inaccuracies, errors, and omissions. This AI-generated content should not be considered a replacement for human expertise, review, and judgement. Users are urged to verify any information or content derived from AI sources with qualified professionals before making any decisions or taking any actions based on such content.
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Right Panel -->
|
|
|
+ <div class="w-80 border-l bg-white p-4">
|
|
|
+ <!-- Model Selector -->
|
|
|
+ <select class="w-full p-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500">
|
|
|
+ <option value="" disabled selected>Select a model</option>
|
|
|
+ <option value="gpt-4">GPT-4</option>
|
|
|
+ <option value="gpt-3.5">GPT-3.5</option>
|
|
|
+ </select>
|
|
|
+
|
|
|
+ <!-- File Upload Section -->
|
|
|
+ <div class="mt-6">
|
|
|
+ <h3 class="text-lg mb-2">你上传的文档</h3>
|
|
|
+ <div class="flex justify-between text-sm text-gray-500 mb-2">
|
|
|
+ <span>文件名</span>
|
|
|
+ <span>Action</span>
|
|
|
+ </div>
|
|
|
+ <div class="bg-gray-50 rounded p-4 text-center text-gray-500">
|
|
|
+ No Data
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import {
|
|
|
+ Home,
|
|
|
+ Plus,
|
|
|
+ Workflow,
|
|
|
+ FileText,
|
|
|
+ MessageSquare,
|
|
|
+ Link as LinkIcon,
|
|
|
+ User,
|
|
|
+ Bell,
|
|
|
+ Upload,
|
|
|
+ Send
|
|
|
+} from 'lucide-vue-next'
|
|
|
+
|
|
|
+const navItems = [
|
|
|
+ { icon: Workflow, label: 'Workspace' },
|
|
|
+ { icon: FileText, label: 'Knowledge' },
|
|
|
+ { icon: MessageSquare, label: 'Prompt' },
|
|
|
+ { icon: LinkIcon, label: 'Link' },
|
|
|
+ { icon: User, label: 'User' },
|
|
|
+]
|
|
|
+</script>
|
|
|
+
|
|
|
+<style>
|
|
|
+@tailwind base;
|
|
|
+@tailwind components;
|
|
|
+@tailwind utilities;
|
|
|
+</style>
|
genlitex