初始化鸿蒙应用展示平台项目 - 前后端分离架构

frontend/src/App.vue

@@ -0,0 +1,106 @@
+<template>
+  <div id="app">
+    <main class="main-content">
+      <router-view />
+    </main>
+    <nav class="bottom-nav">
+      <router-link to="/" class="nav-item">
+        <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
+        </svg>
+        <span>探索</span>
+      </router-link>
+      <router-link to="/apps" class="nav-item">
+        <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <rect x="3" y="3" width="7" height="7" rx="1"/>
+          <rect x="14" y="3" width="7" height="7" rx="1"/>
+          <rect x="14" y="14" width="7" height="7" rx="1"/>
+          <rect x="3" y="14" width="7" height="7" rx="1"/>
+        </svg>
+        <span>应用</span>
+      </router-link>
+      <router-link to="/profile" class="nav-item">
+        <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M4 6h16M4 12h16M4 18h16"/>
+        </svg>
+        <span>我的</span>
+      </router-link>
+    </nav>
+  </div>
+</template>
+
+<script setup lang="ts">
+</script>
+
+<style scoped>
+.bottom-nav {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: rgba(255, 255, 255, 0.8);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  display: flex;
+  justify-content: space-around;
+  padding: 8px 0;
+  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
+  z-index: 1000;
+  border-top: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+.nav-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-decoration: none;
+  color: #666;
+  font-size: 12px;
+  gap: 4px;
+  padding: 4px 20px;
+  transition: color 0.3s ease;
+}
+
+.nav-icon {
+  width: 24px;
+  height: 24px;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.nav-item span {
+  font-weight: 400;
+}
+
+.nav-item.router-link-active {
+  color: #007AFF;
+}
+
+.main-content {
+  min-height: 100vh;
+  padding-bottom: 70px;
+  background: #fff;
+}
+
+/* 确保在 Safari 上也有毛玻璃效果 */
+@supports not (backdrop-filter: blur(10px)) {
+  .bottom-nav {
+    background: rgba(255, 255, 255, 0.95);
+  }
+}
+
+@media (max-width: 768px) {
+  .nav-item {
+    padding: 4px 16px;
+  }
+
+  .nav-icon {
+    width: 22px;
+    height: 22px;
+  }
+
+  .nav-item span {
+    font-size: 11px;
+  }
+}
+</style>