feat: 完成生成等界面的编码

src/views/home/index.vue

@@ -6,10 +6,7 @@
 
     <div class="gradient-overlay"></div>
 
-    <div class="top-nav">
-      <span class="icon">〈</span>
-      <span class="icon-history">🕙</span>
-    </div>
+    <NavBar color="white" :showHistory="true" @back="onBack" @history="onHistory" />
 
     <div class="content-layer">
       <div class="style-tabs">
@@ -32,7 +29,7 @@
       <div class="quota-text">✨ 今日还可生成 <span>2</span> 张</div>
 
       <div class="footer-section">
-        <button class="generate-btn">立即生成</button>
+        <button class="generate-btn" @click="generateAction">立即生成</button>
       </div>
     </div>
   </div>
@@ -40,6 +37,8 @@
 
 <script setup>
 import { ref, computed } from 'vue';
+import { useRouter } from 'vue-router';
+import NavBar from '../components/navBar.vue';
 
 // --- 测试数据 ---
 const styles = [
@@ -67,6 +66,20 @@ const mockData = {
 const activeStyleId = ref('real');
 const activeSceneIndex = ref(0);
 
+const router = useRouter();
+
+const onBack = () => {
+  router.back();
+};
+
+const onHistory = () => {
+  router.push('/history');
+};
+
+const generateAction = () => {
+  router.push('/generate');
+}
+
 // --- 计算属性 ---
 const currentScenes = computed(() => mockData[activeStyleId.value] || []);
 const activeScene = computed(() => currentScenes.value[activeSceneIndex.value] || {});
@@ -108,28 +121,7 @@ const handleStyleChange = (id) => {
   background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 70%, rgba(0, 0, 0, 0.7) 85%, #000 100%);
 }
 
-/* 顶部导航 */
-.top-nav {
-  position: absolute;
-  top: 50px;
-  left: 20px;
-  right: 20px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  z-index: 10;
-}
 
-.top-nav .icon {
-  font-size: 24px;
-  font-weight: bold;
-  cursor: pointer;
-}
-
-.top-nav .icon-history {
-  font-size: 22px;
-  cursor: pointer;
-}
 
 /* 内容布局层 */
 .content-layer {