feat: 说明的底部弹窗搭建

src/views/home/index.vue

@@ -33,12 +33,18 @@
       </div>
     </div>
   </div>
+
+  <van-popup v-model:show="showGuide" round position="bottom" closeable close-icon-position="top-left">
+    <PhotoGuide @start="onStartSelect" />
+  </van-popup>
+
 </template>
 
 <script setup>
 import { ref, computed } from 'vue';
 import { useRouter } from 'vue-router';
-import NavBar from '../components/navBar.vue';
+import NavBar from '../components/NavBar.vue';
+import PhotoGuide from '../components/PhotoGuide.vue';
 
 // --- 测试数据 ---
 const styles = [
@@ -65,6 +71,7 @@ const mockData = {
 // --- 状态 ---
 const activeStyleId = ref('real');
 const activeSceneIndex = ref(0);
+const showGuide = ref(false);
 
 const router = useRouter();
 
@@ -77,9 +84,17 @@ const onHistory = () => {
 };
 
 const generateAction = () => {
-  router.push('/generate');
+  showGuide.value = true;
 }
 
+const onStartSelect = () => {
+  console.log("用户已阅读说明，开始打开相册逻辑...");
+  showGuide.value = false;
+  // 这里写调用系统相册的代码
+  router.push('/generate');
+};
+
+
 // --- 计算属性 ---
 const currentScenes = computed(() => mockData[activeStyleId.value] || []);
 const activeScene = computed(() => currentScenes.value[activeSceneIndex.value] || {});