From ef62e52746468edb0cb9f440301f1cc5c7f4d1ee Mon Sep 17 00:00:00 2001
From: zoujing <zoujing@gogpay.cn>
Date: Thu, 2 Apr 2026 11:14:20 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=AF=B4=E6=98=8E=E7=9A=84=E5=BA=95?=
 =?UTF-8?q?=E9=83=A8=E5=BC=B9=E7=AA=97=E6=90=AD=E5=BB=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/images/guide_error.png   | Bin 0 -> 1165 bytes
 src/assets/images/guide_success.png | Bin 0 -> 998 bytes
 src/views/components/PhotoGuide.vue | 189 ++++++++++++++++++++++++++++
 src/views/generate/index.vue        |   2 +-
 src/views/history/index.vue         |   2 +-
 src/views/home/index.vue            |  19 ++-
 src/views/prepicture/index.vue      |   2 +-
 7 files changed, 209 insertions(+), 5 deletions(-)
 create mode 100644 src/assets/images/guide_error.png
 create mode 100644 src/assets/images/guide_success.png
 create mode 100644 src/views/components/PhotoGuide.vue

diff --git a/src/assets/images/guide_error.png b/src/assets/images/guide_error.png
new file mode 100644
index 0000000000000000000000000000000000000000..7599c98838bfae8756d4591dd4ea9c18dcb9817c
GIT binary patch
literal 1165
zcmV;81akX{P)<h;3K|Lk000e1NJLTq001@s001@!1^@s6j74hQ000C+Nkl<ZcmeF#
zO>)#o5C!0BvzcMZ#N5F57<00Lli|6CZ!iH%V1pZd3MwdNS4&m;!G@qC(v_7zFW)Q4
zvfMZ67ybMe_Oo5s!>-u>f85?>d;jwG&4)j4-&wQe+))R%t1x5<`0(=f{Ng6P%XUiX
z-*ifM)@(VaHj7O=el`n>VhHHvm&In0z5TWNO~RbClV2mIMn;UtJp`^2Mv&o1AajJl
zHp8qn_}#(`GIY(bH9cmT+1uMC%!9$8-XUA-&FmG|ER3i<f0ug25;t;aY-|!Xp4RZV
zZp1vUY~au;Zc!LfPU|?foydbYoR+#~g#mb0qQ0rY3Ab<C>M|<~K(*@`1eds76}EID
z&p=z6<9Jor(utJ9&MCe9@|a#*%XqhcPWL@HIC`b4&8Z5TJBbKF%wHcL-u(Uf;ofQ=
zYg+dDUVVCaopA_k>3eY+Ua%{LRbft|Qd<o@KBoIreAb8~N?!q!2rTziUvPLzTB2PD
z>$zIMYA1#yvhqu&PJOKF;ZeICFNDPbi~HfkY9x?FdahqyU95rEbJx@k_d-|?U?!vo
znY_;{(#Yq1xr)n|F+Lo4{AL>tH`Y#s)h=mlxVA?IshCHeh%#<3UdH(P;qZGca-Rt6
z1&j4aAs6FB5F>82=a;5We;M22PlVmvq`S27gB+3(h8T}<Ys{(F7vo#@6Jc9`%3dUq
zEo1!JBV3(&`7IVN$|1rKL>6iOHIr9&E#DJAozp*M{X|$ymW6A4q~kAj#u1m#`>pHw
zl>RF*Cc<K}EL`JzP}FWeSmN^hBWxlpz8-BEh;;2iQDVxgD`R{46JdLSB8zmybNj`Z
zI`uK$yN?%TcVS2(8;N;P_;S@6bL#cQ_?G=dnEQSU7;;EP3}W(w!fGFD^y!cB)_vqY
z5jKJh|Ll!x=MSWii)};@Q^xJZ%NSoj9Da}0dM<>0Ij6ThplSgl#V-wcBFb3y#pUxp
zuW;by{o3_HSiGc5z(^ny>ySo1#>>6Dx-!Ne@jC9Dv0h_g7sAF|2k2NIejtl<2v@i2
z)W>A&o#S9*uYFZmD=2{Ywt^(Ga;>IbUs?bC-LH&Z`n9X2sw&Lwc<m%KO>Fol4=I16
zeEp2%B;UBv2Pd2TQtKSYsxW}pPC_mk68=V|L1fJJ?BQf<>6_ztRT$v86On&PTjDk=
z%!w=kJcT%%aGRSwD@@}Eu<<DgXD@3JW!9oFMZTd;&q3V4VLWK07OY7a4C0&?|0&FD
z99m~L3j^r14B-DrGt=yznO(vF8(<LsN7%J*ww7jh3j;{ptB()EOGoN{Vb<Sb4$llP
z3oZ4rW|goEa)`j;0YMP#JZH_iNmw3;1Ts#U<#_Wth;hro=y^cQ;qM|W4<L{sh$tg8
zn?D(R@oZ{|S$oUn*>T-fSP70OBQzTUeDQ2$&z}Ba!uBM&2J4p<_7wmC|Np_Nn+pH{
f00v1!K~w_(hLRSG<~0Fm00000NkvXXu0mjfvtTum

literal 0
HcmV?d00001

diff --git a/src/assets/images/guide_success.png b/src/assets/images/guide_success.png
new file mode 100644
index 0000000000000000000000000000000000000000..67de733cab7442ab49c0fdde49a4c44313b79a46
GIT binary patch
literal 998
zcmV<C0~!2@P)<h;3K|Lk000e1NJLTq001@s001@!1^@s6j74hQ000A<Nkl<ZcmdRz
z4RYHc5QUL4)AUreeG}g#$xVC{J3Up?nb_TrvKow$1V}=%Cu?M2AMfiT{L|LV{P=l3
z?uj4g<NNFH<GG8^<L#AjeT-|&Y{AOS0_KC<T5~3v*1VaU*>_>w!}T$)p}>Hm<z`N5
zCV^psirj&e+7Vzt(E=36QYrF^z<eNE5tL>QAb}%Fq_e<k0QnHW5hZZRU_h}=ma32s
z6kY?DyFHV@_!qNK;fj@C1BjQDWk<mfLNG<F#vHuhX>6@QFa!`96RACpC%g@<+Y3e_
z0z=7bj^PcDeIBA<B#_vbw3U85a;U}pM8QaiP2OT3hguBo0gP&G5n#yE?Zv!><9A>{
zJyW$h82LCBR_zX~oA`tmVbwaYr>&M2A*fmh_LN&tp<L@%&4Pvd)6HAIY0SkCCh_4_
z&4OKx*_(|$Zddd1_3L!7u{$+Uz=&sMv0%-M*+u58)&<nx!|B~O(0rQ@|8?KBvRE)9
zCG4A6yFUhn2dxCxgCQ*3S}mvH;KYi9eNb4)J>33RjLel|2#ViTa_mvvO@NI;$@a<t
z<34M7%1N4g?%Yu7FTY~)zS3OH0YfTM+M*GjeyU}+UuLB=m$uD05i!F1%AdpOf*}AA
zDG9XDh~-X&f+?$FGWp^g0k8yaQ7C7yHL|tb^=RXN7SqYOa5bP{YSmy;D|?<dzi@6U
zToov1E)PtS`o4;f!PSJieVfmgC-Iy0mkU=DN<msF+1-Jl17mF}+!|1L7cQEz7=v32
zino!LdxKM?49%D!I2MTMPJW+?iE5ua<!!}E?laY)?So@1j76bjF=eq}@>F!6iB9*I
z0=G02W|T!*W2SCL1c@QIawwG3!?MV93nr~e{p!u!p@_lNg5t1JZylH=bvK?4mbN}z
zO(_4c>cD`Qt7>QgR||^u!ngyQvubuB`D|(1g`e1hezjQc4vdaDtA<{U2%%W>0gS4Z
ze8)m;ji6ewbsxZ(1YBPN<68+l#;S$CC>R4IkjV8G18;cj^VSPS0*MH4y`{ht-iAC4
zf{};-LR@bl@Pel?FQZ@xAcP>-YX*lJUQ#?Hfgyz8*Y4D;0w|w|fZ|ZYOG+ezsThF3
z5!$y{>wxsP%$#+y!4L<ISPX6g5dMfFFcJyi*q&??3n_-^FAB*;1Fez@g=<a%Q!)0w
zh2+0h-F=8j!v5?argd)jTKX6Vga8H&w7R(yF8%=k0RR75Jhk2c000I_L_t&o0HH)c
U!^Se~9RL6T07*qoM6N<$f(X>sS^xk5

literal 0
HcmV?d00001

diff --git a/src/views/components/PhotoGuide.vue b/src/views/components/PhotoGuide.vue
new file mode 100644
index 0000000..e97a082
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/views/generate/index.vue b/src/views/generate/index.vue
index 53681e5..8ba4140 100644
--- a/src/views/generate/index.vue
+++ b/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();
 
diff --git a/src/views/history/index.vue b/src/views/history/index.vue
index a650f3d..3f0c9aa 100644
--- a/src/views/history/index.vue
+++ b/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
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 350dc82..9c1ea64 100644
--- a/src/views/home/index.vue
+++ b/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] || {});
diff --git a/src/views/prepicture/index.vue b/src/views/prepicture/index.vue
index f97accc..e887dba 100644
--- a/src/views/prepicture/index.vue
+++ b/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';