创建vue项目

src/App.vue

@@ -0,0 +1,125 @@
+<template>
+  <div class="layout">
+    <aside class="sidebar">
+      <div class="logo">我的毕业设计</div>
+      <nav class="nav">
+        <RouterLink
+          v-for="item in menu"
+          :key="item.path"
+          :to="item.path"
+          class="nav-item"
+          active-class="nav-item-active"
+        >
+          {{ item.label }}
+        </RouterLink>
+      </nav>
+    </aside>
+
+    <main class="content">
+      <header class="content-header">
+        <h1>{{ currentTitle }}</h1>
+      </header>
+      <section class="content-body">
+        <RouterView />
+      </section>
+    </main>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRoute, RouterLink, RouterView } from 'vue-router'
+
+const menu = [
+  { path: '/', label: '首页', title: '首页' },
+  { path: '/analysis', label: '数据分析', title: '数据分析' },
+  { path: '/report', label: '报告中心', title: '报告中心' },
+  { path: '/settings', label: '系统设置', title: '系统设置' }
+]
+
+const route = useRoute()
+
+const currentTitle = computed(() => {
+  const found = menu.find((item) => item.path === route.path)
+  return found?.title ?? '页面'
+})
+</script>
+
+<style scoped>
+.layout {
+  display: flex;
+  min-height: 100vh;
+  background: #f5f7fb;
+  color: #1f2933;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui,
+    sans-serif;
+}
+
+.sidebar {
+  width: 240px;
+  background: linear-gradient(180deg, #1e3a8a, #0f172a);
+  color: #e5e7eb;
+  padding: 20px 16px;
+  display: flex;
+  flex-direction: column;
+}
+
+.logo {
+  font-size: 20px;
+  font-weight: 600;
+  margin-bottom: 24px;
+}
+
+.nav {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.nav-item {
+  padding: 10px 12px;
+  border-radius: 8px;
+  color: #e5e7eb;
+  text-decoration: none;
+  font-size: 14px;
+  transition: background 0.2s ease, color 0.2s ease, transform 0.1s ease;
+}
+
+.nav-item:hover {
+  background: rgba(255, 255, 255, 0.08);
+  transform: translateX(2px);
+}
+
+.nav-item-active {
+  background: #f97316;
+  color: #111827;
+}
+
+.content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  padding: 24px 28px;
+}
+
+.content-header {
+  padding-bottom: 12px;
+  border-bottom: 1px solid #e5e7eb;
+  margin-bottom: 16px;
+}
+
+.content-header h1 {
+  margin: 0;
+  font-size: 22px;
+  font-weight: 600;
+}
+
+.content-body {
+  background: #ffffff;
+  border-radius: 16px;
+  padding: 20px 24px;
+  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
+  min-height: 400px;
+}
+</style>
+

src/main.ts

@@ -0,0 +1,10 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
+import './style.css'
+
+const app = createApp(App)
+
+app.use(router)
+app.mount('#app')
+

src/router/index.ts

@@ -0,0 +1,36 @@
+import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
+import Home from '../views/Home.vue'
+import Analysis from '../views/Analysis.vue'
+import Report from '../views/Report.vue'
+import Settings from '../views/Settings.vue'
+
+const routes: RouteRecordRaw[] = [
+  {
+    path: '/',
+    name: 'Home',
+    component: Home
+  },
+  {
+    path: '/analysis',
+    name: 'Analysis',
+    component: Analysis
+  },
+  {
+    path: '/report',
+    name: 'Report',
+    component: Report
+  },
+  {
+    path: '/settings',
+    name: 'Settings',
+    component: Settings
+  }
+]
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes
+})
+
+export default router
+

src/style.css

@@ -0,0 +1,11 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  background: #f5f7fb;
+}
+

src/views/Analysis.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="page">
+    <h2>数据分析页</h2>
+    <p>后续可以在这里放图表、统计数据等可视化内容。</p>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped>
+.page h2 {
+  margin-top: 0;
+  margin-bottom: 8px;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.page p {
+  margin: 0;
+  color: #4b5563;
+  font-size: 14px;
+}
+</style>
+

src/views/Home.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="page">
+    <h2>欢迎来到首页</h2>
+    <p>这里可以展示项目的总体介绍、关键指标和快捷入口。</p>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped>
+.page h2 {
+  margin-top: 0;
+  margin-bottom: 8px;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.page p {
+  margin: 0;
+  color: #4b5563;
+  font-size: 14px;
+}
+</style>
+

src/views/Report.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="page">
+    <h2>报告中心</h2>
+    <p>在这里管理、查看和导出各类报告。</p>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped>
+.page h2 {
+  margin-top: 0;
+  margin-bottom: 8px;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.page p {
+  margin: 0;
+  color: #4b5563;
+  font-size: 14px;
+}
+</style>
+

src/views/Settings.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="page">
+    <h2>系统设置</h2>
+    <p>这里可以配置系统参数、主题、用户等。</p>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped>
+.page h2 {
+  margin-top: 0;
+  margin-bottom: 8px;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.page p {
+  margin: 0;
+  color: #4b5563;
+  font-size: 14px;
+}
+</style>
+