上传文件至 /

App.vue

@@ -0,0 +1,88 @@
+<template>
+  <div id="app">
+    <!-- 导航栏 -->
+    <nav class="app-nav" v-if="currentPage !== 'campusMap'">
+      <button @click="goToCampusMap" class="nav-btn">
+        ← 返回园区地图
+      </button>
+      <h1>建筑平面图</h1>
+    </nav>
+    
+    <!-- 页面内容 -->
+    <CampusMap v-if="currentPage === 'campusMap'" @navigate="handleNavigation" />
+    <HelloWorld v-else />
+  </div>
+</template>
+
+<script>
+import { ref } from 'vue'
+import HelloWorld from './components/HelloWorld.vue'
+import CampusMap from './components/CampusMap.vue'
+
+export default {
+  name: 'App',
+  components: {
+    HelloWorld,
+    CampusMap
+  },
+  setup() {
+    const currentPage = ref('campusMap') // 默认显示园区地图
+    
+    const handleNavigation = (page) => {
+      currentPage.value = page
+    }
+    
+    const goToCampusMap = () => {
+      currentPage.value = 'campusMap'
+    }
+    
+    return {
+      currentPage,
+      handleNavigation,
+      goToCampusMap
+    }
+  }
+}
+</script>
+
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: #2c3e50;
+  height: 100vh;
+  margin: 0;
+}
+
+.app-nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 15px 20px;
+  background: #fff;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  border-bottom: 1px solid #e8e8e8;
+}
+
+.nav-btn {
+  padding: 8px 16px;
+  background: #1890ff;
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  transition: background 0.3s ease;
+}
+
+.nav-btn:hover {
+  background: #40a9ff;
+}
+
+.app-nav h1 {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+}
+</style>