feat: 说明的底部弹窗搭建

src/views/components/PhotoGuide.vue

@@ -0,0 +1,189 @@
+<template>
+  <div class="guide-wrapper">
+    <!-- 顶部标题栏 -->
+    <div class="guide-header">
+      选图说明
+    </div>
+
+    <!-- 中间滚动区域 -->
+    <div class="guide-content">
+      <!-- 正确示例 -->
+      <section class="example-section">
+        <h2 class="section-title">正确照片示例</h2>
+        <div class="example-grid">
+          <div v-for="(item, index) in correctExamples" :key="index" class="example-item">
+            <div class="img-box border-success">
+              <img :src="item.url" class="main-img" />
+            </div>
+            <div class="status-label color-success">
+              <!-- 替换为成功图标图片 -->
+              <img src="@/assets/images/guide_success.png" class="status-icon-img" />
+              {{ item.text }}
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- 错误示例 -->
+      <section class="example-section">
+        <h2 class="section-title">错误照片示例</h2>
+        <div class="example-grid">
+          <div v-for="(item, index) in errorExamples" :key="index" class="example-item">
+            <div class="img-box border-error">
+              <img :src="item.url" class="main-img" />
+            </div>
+            <div class="status-label color-error">
+              <!-- 替换为错误图标图片 -->
+              <img src="@/assets/images/guide_error.png" class="status-icon-img" />
+              {{ item.text }}
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+
+    <!-- 底部固定按钮 -->
+    <div class="guide-footer">
+      <button class="action-btn" @click="$emit('start')">
+        已了解，开始选图
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const emit = defineEmits(['start']);
+
+// 测试数据保持不变
+const correctExamples = [
+  { url: 'https://picsum.photos/id/64/200', text: '单人正脸' },
+  { url: 'https://picsum.photos/id/65/200', text: '多表情' },
+  { url: 'https://picsum.photos/id/66/200', text: '多背景' },
+];
+
+const errorExamples = [
+  { url: 'https://picsum.photos/id/177/200', text: '非清晰正脸' },
+  { url: 'https://picsum.photos/id/103/200', text: '面部有遮挡' },
+  { url: 'https://picsum.photos/id/104/200', text: '多人合照' },
+];
+</script>
+
+<style scoped>
+.guide-wrapper {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background-color: #fff;
+  font-family: -apple-system, system-ui, sans-serif;
+}
+
+.guide-header {
+  height: 60px;
+  line-height: 60px;
+  text-align: center;
+  font-size: 18px;
+  font-weight: 600;
+  color: #333;
+  flex-shrink: 0;
+}
+
+.guide-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0 20px;
+  -webkit-overflow-scrolling: touch;
+}
+
+.example-section {
+  margin-bottom: 25px;
+}
+
+.section-title {
+  font-size: 14px;
+  color: #999;
+  margin-bottom: 12px;
+}
+
+.example-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 12px;
+}
+
+.example-item {
+  text-align: center;
+}
+
+.img-box {
+  width: 100%;
+  aspect-ratio: 1 / 1;
+  border-radius: 8px;
+  overflow: hidden;
+  background-color: #f5f5f5;
+  border: 1px dashed #ddd;
+  box-sizing: border-box;
+}
+
+.main-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* 状态标签样式 */
+.status-label {
+  margin-top: 8px;
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  line-height: 1;
+}
+
+/* 状态图标图片样式 */
+.status-icon-img {
+  width: 14px;
+  /* 根据UI图调整大小 */
+  height: 14px;
+  object-fit: contain;
+}
+
+.color-success {
+  color: #07c160;
+}
+
+.color-error {
+  color: #ee0a24;
+}
+
+/* 特殊边框色微调（可选） */
+.border-success {
+  border-color: rgba(7, 193, 96, 0.3);
+}
+
+.border-error {
+  border-color: rgba(238, 10, 36, 0.3);
+}
+
+.guide-footer {
+  padding: 15px 20px 30px;
+  flex-shrink: 0;
+}
+
+.action-btn {
+  width: 100%;
+  height: 50px;
+  background-color: #000;
+  color: #fff;
+  border: none;
+  border-radius: 25px;
+  font-size: 16px;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.action-btn:active {
+  opacity: 0.8;
+}
+</style>

src/views/generate/index.vue

@@ -31,7 +31,7 @@
 <script setup lang="ts">
 import { useRouter } from 'vue-router';
 // @ts-ignore
-import NavBar from '../components/navBar.vue';
+import NavBar from '../components/NavBar.vue';
 
 const router = useRouter();
 

src/views/history/index.vue

@@ -43,7 +43,7 @@
 <script setup lang="ts">
 import { useRouter } from 'vue-router';
 // @ts-ignore
-import NavBar from '../components/navBar.vue';
+import NavBar from '../components/NavBar.vue';
 
 interface TaskItem {
   id: number

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] || {});

src/views/prepicture/index.vue

@@ -32,7 +32,7 @@
 <script setup lang="ts">
 import { useRouter, useRoute } from 'vue-router';
 // @ts-ignore
-import NavBar from '../components/navBar.vue';
+import NavBar from '../components/NavBar.vue';
 import { ref, computed } from 'vue';
 // @ts-ignore 
 import VueEasyLightbox from 'vue-easy-lightbox';