zbytest003-2025-02-28 06:40:49

src/router/index.js

@@ -1,11 +1,17 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
 import HomeView from '../views/HomeView.vue'
+import PortalView from '../views/PortalView.vue'
 
 const routes = [
   {
     path: '/',
-    name: 'home',
+    name: 'Home',
     component: HomeView
+  },
+  {
+    path: '/portal',
+    name: 'Portal',
+    component: PortalView
   }
 ]
 

src/views/PortalView.vue

@@ -0,0 +1,107 @@
+<template>
+  <div class="min-h-screen bg-gray-50">
+    <!-- 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>
+
+        <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>
+      </div>
+    </header>
+
+    <div class="flex">
+      <!-- Sidebar -->
+      <aside class="w-64 min-h-screen bg-white border-r">
+        <nav class="p-4">
+          <div class="mb-4 text-gray-500">菜单类别标题</div>
+          <ul class="space-y-2">
+            <li>
+              <a href="#/home" class="flex items-center px-4 py-2 text-blue-600 bg-blue-50 rounded-lg">
+                <Home class="w-5 h-5 mr-3" />
+                首页
+              </a>
+            </li>
+            <li>
+              <a href="#/about" class="flex items-center px-4 py-2 text-gray-600 hover:bg-gray-50 rounded-lg">
+                <Info class="w-5 h-5 mr-3" />
+                关于我们
+              </a>
+            </li>
+            <li>
+              <a href="#/products" class="flex items-center px-4 py-2 text-gray-600 hover:bg-gray-50 rounded-lg">
+                <Package class="w-5 h-5 mr-3" />
+                产品
+              </a>
+            </li>
+            <li>
+              <a href="#/services" class="flex items-center px-4 py-2 text-gray-600 hover:bg-gray-50 rounded-lg">
+                <Tool class="w-5 h-5 mr-3" />
+                服务
+              </a>
+            </li>
+            <li>
+              <a href="#/news" class="flex items-center px-4 py-2 text-gray-600 hover:bg-gray-50 rounded-lg">
+                <Newspaper class="w-5 h-5 mr-3" />
+                新闻
+              </a>
+            </li>
+            <li>
+              <a href="#/contact" class="flex items-center px-4 py-2 text-gray-600 hover:bg-gray-50 rounded-lg">
+                <Mail class="w-5 h-5 mr-3" />
+                联系我们
+              </a>
+            </li>
+          </ul>
+        </nav>
+      </aside>
+
+      <!-- Main Content -->
+      <main class="flex-1 p-6">
+        <!-- Breadcrumb -->
+        <div class="flex items-center text-gray-500 mb-6">
+          <span>首页</span>>>
+          <span>门户主页</span>
+        </div>
+
+        <!-- Main Content Area -->
+        <div class="grid grid-cols-1 gap-6 mb-6">
+          <div class="bg-white rounded-lg p-6 flex items-center space-x-4 shadow-sm">
+            <div class="text-gray-900">
+              欢迎来到门户主页！这里是您获取最新信息和管理各项任务的地方。
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {
+  Search, MessageCircle, Bell, Settings,
+  Home, Info, Package, Newspaper, Mail
+} from 'lucide-vue-next'
+</script>