Bladeren bron

基于上传文档,回答内容

DIR\baoyu.zhang 2 maanden geleden
bovenliggende
commit
534954bc14
3 gewijzigde bestanden met toevoegingen van 180 en 4 verwijderingen
  1. 170 0
      src/assets/templates/chat_with_document.vue
  2. 6 0
      src/router/index.js
  3. 4 4
      template_desc.txt

+ 170 - 0
src/assets/templates/chat_with_document.vue

@@ -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>

+ 6 - 0
src/router/index.js

@@ -1,11 +1,17 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
 import HomeView from '../views/HomeView.vue'
+import TestView from "@/views/TestView.vue";
 
 const routes = [
   {
     path: '/',
     name: 'home',
     component: HomeView
+  },
+  {
+    path: '/test',
+    name: 'test',
+    component: TestView
   }
 ]
 

+ 4 - 4
template_desc.txt

@@ -1,4 +1,4 @@
-src/assets/templates/generate_user_stories.vue 生成用户故事模板
-src/assets/templates/login.vue 登录模板
-src/assets/templates/dashboard.vue 首页(门户网站)模板
-
+src/assets/templates/generate_user_stories.vue 生成用户故事界面的模板
+src/assets/templates/login.vue 登录界面的模板
+src/assets/templates/dashboard.vue 首页(门户网站)页面的模板
+src/assets/templates/chat_with_document.vue 基于上传文档聊天界面的模板