|
@@ -0,0 +1,58 @@
|
|
|
|
+<template>
|
|
|
|
+ <div class="flex h-screen bg-gradient-to-br from-white to-purple-500">
|
|
|
|
+ <!-- Sidebar -->
|
|
|
|
+ <aside class="w-250 bg-gradient-to-br from-white to-purple-500 p-4 space-y-4">
|
|
|
|
+ <div class="flex items-center justify-center bg-purple-500 text-white text-2xl font-bold py-3">
|
|
|
|
+ 生成用户故事
|
|
|
|
+ </div>
|
|
|
|
+ </aside>
|
|
|
|
+
|
|
|
|
+ <!-- Main Content -->
|
|
|
|
+ <main class="flex-1 overflow-auto p-8 bg-white">
|
|
|
|
+ <div class="max-w-4xl mx-auto">
|
|
|
|
+ <!-- Chat Bubbles -->
|
|
|
|
+ <div class="mb-6">
|
|
|
|
+ <div class="flex items-end mb-4">
|
|
|
|
+ <div class="bg-purple-500 text-white p-3 rounded-lg mr-2">
|
|
|
|
+ <p class="text-sm">你好!我是一个用户故事生成助手。</p>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="flex items-start mb-4">
|
|
|
|
+ <div class="bg-gray-200 p-3 rounded-lg ml-2">
|
|
|
|
+ <p class="text-sm">我想生成一个用户故事。</p>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ <!-- Chat Input -->
|
|
|
|
+ <div class="flex gap-2">
|
|
|
|
+ <div class="flex-1 relative">
|
|
|
|
+ <input
|
|
|
|
+ type="text"
|
|
|
|
+ placeholder="输入你的消息..."
|
|
|
|
+ class="w-full p-3 pr-12 border rounded-lg"
|
|
|
|
+ />
|
|
|
|
+ <label for="file-upload" class="absolute right-4 top-1/2 -translate-y-1/2 cursor-pointer">
|
|
|
|
+ <Upload class="w-5 h-5 text-gray-400" />
|
|
|
|
+ </label>
|
|
|
|
+ <input id="file-upload" type="file" class="hidden" />
|
|
|
|
+ </div>
|
|
|
|
+ <button class="p-3 bg-purple-500 text-white rounded-lg hover:bg-purple-600">
|
|
|
|
+ <Send class="w-5 h-5" />
|
|
|
|
+ </button>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </main>
|
|
|
|
+ </div>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script setup>
|
|
|
|
+import {
|
|
|
|
+ Upload,
|
|
|
|
+ Send
|
|
|
|
+} from 'lucide-vue-next'
|
|
|
|
+</script>
|
|
|
|
+
|
|
|
|
+<style>
|
|
|
|
+/* Add any custom styles here */
|
|
|
|
+</style>
|