zbytest003-2025-02-20 12:38:29

src/assets/common.css

@@ -75,4 +75,7 @@
       background-color: #f9f9f9;
     }
   }
-  
+  
+  #app{
+    width: 100%;
+  }

src/router/index.js

@@ -12,6 +12,11 @@ const routes = [
     path: '/login',
     name: 'login',
     component: LoginView
+  },
+  {
+    path: '/user-stories',
+    name: 'user-stories',
+    component: UserStoriesView
   }
 ]
 

src/views/UserStoriesView.vue

@@ -0,0 +1,131 @@
+<template>
+  <div class="flex h-screen bg-[#08002E]">
+    <!-- Sidebar -->
+    <aside class="w-64 bg-[#08002E] text-white flex flex-col">
+      <!-- Logo -->
+      <div class="p-6 bg-[#4A235A] text-center">
+        <h1 class="text-18px font-bold">用户故事生成器</h1>
+      </div>
+
+      <!-- Navigation -->
+      <nav class="flex-1 px-4">
+        <div class="space-y-6 mt-8">
+          <div class="text-xs text-gray-400 uppercase">CONTACTS</div>
+          <div class="space-y-2">
+            <div v-for="(contact, index) in contacts"
+                 :key="index"
+                 @click="selectedContact = contact"
+                 class="flex items-center gap-3 px-3 py-2 text-gray-300 rounded-lg cursor-pointer hover:bg-[#6B429C]/20"
+                 :class="{ 'bg-[#6B429C]/20': selectedContact === contact }">
+              <div class="w-10 h-10 bg-gray-600 rounded-full"></div>
+              <div>
+                <div class="text-sm font-medium">{{ contact.name }}</div>
+                <div class="text-xs text-gray-400 flex items-center">
+                  <Circle class="w-2 h-2 mr-1" :class="{'bg-green-500': contact.online, 'bg-gray-400': !contact.online}" />
+                  {{ contact.status }}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </nav>
+
+      <!-- User Profile -->
+      <div class="p-4 border-t border-gray-700 bg-[#4A235A]">
+        <div class="flex items-center gap-3">
+          <div class="w-10 h-10 bg-gray-600 rounded-full"></div>
+          <div>
+            <div class="text-sm font-medium">zbytest003</div>
+            <div class="text-xs text-gray-400">平台管理员</div>
+          </div>
+        </div>
+      </div>
+    </aside>
+
+    <!-- Main Content -->
+    <main class="flex-1 overflow-auto bg-[#08002E]">
+      <div class="max-w-4xl mx-auto p-8">
+        <!-- Header -->
+        <div class="flex justify-between items-center mb-8">
+          <div>
+            <h1 class="text-2xl font-semibold mb-2 text-white">与 {{ selectedContact ? selectedContact.name : '选择联系人' }} 的对话</h1>
+          </div>
+        </div>
+
+        <!-- Chat Messages -->
+        <div class="space-y-4">
+          <div v-for="(message, index) in messages"
+               :key="index"
+               class="flex"
+               :class="{'justify-end': message.sender === 'user'}">
+            <div class="max-w-sm p-3 rounded-lg"
+                 :class="{'bg-[#6B429C]': message.sender === 'user', 'bg-[#3D3D3D]': message.sender === 'system'}"
+                 style="border-radius: 10px;">
+              <p class="text-white">{{ message.text }}</p>
+              <div class="mt-1 text-xs text-gray-300">{{ message.time }}</div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Chat Input -->
+        <div class="flex gap-2 mt-8">
+          <div class="flex-1 relative">
+            <input
+                v-model="newMessage"
+                type="text"
+                placeholder="输入您的消息..."
+                class="w-full p-3 pr-12 border rounded-lg bg-[#1A1A2E] text-white"
+            />
+            <Upload class="absolute right-4 top-1/2 -translate-y-1/2 text-white" />
+          </div>
+          <button @click="sendMessage" class="p-3 bg-[#6B429C] text-white rounded-lg hover:bg-[#8A62BC]">
+            <Send class="w-5 h-5" />
+          </button>
+        </div>
+      </div>
+    </main>
+  </div>
+</template>
+
+<script setup>
+import {
+  Circle,
+  Upload,
+  Send,
+} from 'lucide-vue-next'
+
+import { ref } from 'vue'
+
+const contacts = [
+  { name: 'Alice', online: true, status: '在线' },
+  { name: 'Bob', online: false, status: '离线' },
+  { name: 'Charlie', online: true, status: '在线' },
+]
+
+const selectedContact = ref(null)
+const messages = ref([])
+const newMessage = ref('')
+
+const sendMessage = () => {
+  if (newMessage.value.trim()) {
+    messages.value.push({
+      sender: 'user',
+      text: newMessage.value,
+      time: new Date().toLocaleTimeString()
+    })
+    newMessage.value = ''
+    // Simulate system response
+    setTimeout(() => {
+      messages.value.push({
+        sender: 'system',
+        text: '这是系统回复的消息。',
+        time: new Date().toLocaleTimeString()
+      })
+    }, 1000)
+  }
+}
+</script>
+
+<style scoped>
+/* Additional styles can be added here if needed */
+</style>