|
@@ -1,95 +1,90 @@
|
|
|
<template>
|
|
|
- <div class="min-h-screen bg-gradient-to-r from-white to-purple-100">
|
|
|
- <!-- Top Navigation -->
|
|
|
- <header class="bg-white border-b">
|
|
|
- <div class="flex items-center justify-between px-4 py-2">
|
|
|
- <div class="flex items-center space-x-2">
|
|
|
- <div class="text-blue-600">
|
|
|
- <div class="w-8 h-8">
|
|
|
- <div class="w-full h-full" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <span class="text-xl font-medium">ProductName</span>
|
|
|
+ <div class="portal-container">
|
|
|
+ <div class="sidebar">
|
|
|
+ <ul>
|
|
|
+ <li><a href="#/portal">首页</a></li>
|
|
|
+ <li><a href="#/project-management">项目管理</a></li>
|
|
|
+ <li><a href="#/data-analysis">数据分析</a></li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="content">
|
|
|
+ <div class="lightweight-module">
|
|
|
+ <div class="module-item">
|
|
|
+ <h3>生成用户故事</h3>
|
|
|
+ <a href="#/user-story-chat">点击这里</a>
|
|
|
</div>
|
|
|
-
|
|
|
- <div class="flex-1 max-w-xl mx-4">
|
|
|
- <div class="relative">
|
|
|
- <Search class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={20} />
|
|
|
- <input
|
|
|
- type="text"
|
|
|
- placeholder="输入内容查询"
|
|
|
- class="w-full pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
|
- />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="flex items-center space-x-4">
|
|
|
- <MessageCircle class="w-6 h-6 text-blue-500" />
|
|
|
- <Bell class="w-6 h-6 text-blue-500" />
|
|
|
- <Settings class="w-6 h-6 text-gray-400" />
|
|
|
- <div class="w-8 h-8 rounded-full bg-gray-200"></div>
|
|
|
+ <div class="module-item">
|
|
|
+ <h3>生成测试脚本</h3>
|
|
|
+ <a href="#">点击这里</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </header>
|
|
|
-
|
|
|
- <div class="flex">
|
|
|
- <!-- Sidebar -->
|
|
|
- <aside class="w-64 min-h-screen bg-[#08002E] text-white border-r">
|
|
|
- <nav class="p-4">
|
|
|
- <ul class="space-y-2">
|
|
|
- <li>
|
|
|
- <a href="#/" class="flex items-center px-4 py-2 text-white hover:bg-[#11113D] rounded-lg">
|
|
|
- <Home class="w-5 h-5 mr-3" />
|
|
|
- 首页
|
|
|
- </a>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <a href="#/project-management" class="flex items-center px-4 py-2 text-white hover:bg-[#11113D] rounded-lg">
|
|
|
- <Box class="w-5 h-5 mr-3" />
|
|
|
- 项目管理
|
|
|
- </a>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <a href="#/data-analysis" class="flex items-center px-4 py-2 text-white hover:bg-[#11113D] rounded-lg">
|
|
|
- <LayoutGrid class="w-5 h-5 mr-3" />
|
|
|
- 数据分析
|
|
|
- </a>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </nav>
|
|
|
- </aside>
|
|
|
-
|
|
|
- <!-- Main Content -->
|
|
|
- <main class="flex-1 p-6">
|
|
|
- <!-- Lightweight and Easy-to-Use Module -->
|
|
|
- <div class="grid grid-cols-2 gap-6 mb-6">
|
|
|
- <div class="bg-white rounded-lg p-6 shadow-sm">
|
|
|
- <h2 class="text-lg font-medium mb-4">生成用户故事模块</h2>
|
|
|
- <a href="#/user-story" class="text-blue-600 hover:underline">
|
|
|
- 跳转到生成用户故事界面
|
|
|
- </a>
|
|
|
- </div>
|
|
|
- <div class="bg-white rounded-lg p-6 shadow-sm">
|
|
|
- <h2 class="text-lg font-medium mb-4">生成测试脚本模块</h2>
|
|
|
- <a href="#/test-script" class="text-blue-600 hover:underline">
|
|
|
- 跳转到生成测试脚本界面
|
|
|
- </a>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- Intelligent Project Analysis Module -->
|
|
|
- <div class="bg-white rounded-lg p-6 shadow-sm">
|
|
|
- <h2 class="text-lg font-medium mb-4">智能项目分析模块</h2>
|
|
|
- <!-- Content for intelligent project analysis goes here -->
|
|
|
- </div>
|
|
|
- </main>
|
|
|
+ <div class="smart-analysis-module">
|
|
|
+ <h3>智能项目分析</h3>
|
|
|
+ <!-- Placeholder for smart project analysis content -->
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
-<script setup>
|
|
|
-import {
|
|
|
- Search, MessageCircle, Bell, Settings,
|
|
|
- Home, Box, LayoutGrid
|
|
|
-} from 'lucide-vue-next'
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name: 'PortalView'
|
|
|
+};
|
|
|
</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.portal-container {
|
|
|
+ display: flex;
|
|
|
+ height: 100vh;
|
|
|
+}
|
|
|
+
|
|
|
+.sidebar {
|
|
|
+ background-color: #08002E;
|
|
|
+ color: white;
|
|
|
+ width: 200px;
|
|
|
+ padding: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.sidebar ul {
|
|
|
+ list-style-type: none;
|
|
|
+ padding: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.sidebar li {
|
|
|
+ margin-bottom: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.sidebar a {
|
|
|
+ color: white;
|
|
|
+ text-decoration: none;
|
|
|
+}
|
|
|
+
|
|
|
+.content {
|
|
|
+ flex-grow: 1;
|
|
|
+ background: linear-gradient(to bottom, white, purple);
|
|
|
+ padding: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.lightweight-module, .smart-analysis-module {
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.module-item {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 10px;
|
|
|
+ background-color: #f0f0f0;
|
|
|
+ border-radius: 8px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.module-item h3 {
|
|
|
+ margin: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.module-item a {
|
|
|
+ color: #6A5ACD;
|
|
|
+ text-decoration: none;
|
|
|
+}
|
|
|
+</style>
|