From 7d445240461074be95199effe91beea00abe58ce Mon Sep 17 00:00:00 2001
From: zhangyahui <xiao7li@qq.com>
Date: Wed, 5 Nov 2025 10:24:53 +0800
Subject: [PATCH 01/11] =?UTF-8?q?bugfix:=20=E8=B0=B7=E6=AD=8C=E7=99=BB?=
 =?UTF-8?q?=E5=BD=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 env.d.ts                                   |  27 ++++
 src/views/login/components/GoogleLogin.vue | 177 +++++++++++++++++----
 2 files changed, 176 insertions(+), 28 deletions(-)

diff --git a/env.d.ts b/env.d.ts
index 11f02fe..4d291ae 100644
--- a/env.d.ts
+++ b/env.d.ts
@@ -1 +1,28 @@
 /// <reference types="vite/client" />
+
+// Google Identity Services 类型声明
+interface GoogleAccounts {
+  accounts: {
+    id: {
+      initialize: (config: {
+        client_id: string
+        auto_select?: boolean
+        callback: (response: { credential: string }) => void
+        ux_mode?: 'popup' | 'redirect'
+        itp_support?: boolean
+      }) => void
+      renderButton: (element: Element | null, config: {
+        type?: 'standard' | 'icon'
+        shape?: 'rectangular' | 'pill' | 'circle' | 'square'
+        theme?: 'outline' | 'filled_blue' | 'filled_black'
+        size?: 'large' | 'medium' | 'small'
+        logo_alignment?: 'left' | 'center'
+      }) => void
+    }
+  }
+}
+
+interface Window {
+  google?: GoogleAccounts
+  isAddGmail?: boolean
+}
\ No newline at end of file
diff --git a/src/views/login/components/GoogleLogin.vue b/src/views/login/components/GoogleLogin.vue
index 8562882..5e8da87 100644
--- a/src/views/login/components/GoogleLogin.vue
+++ b/src/views/login/components/GoogleLogin.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="Container">
+  <div class="Container" @click="handleContainerClick">
     <div class="g_id_signin" id="g_id_signin"></div>
     <div class="icon">
       <img :src="google" class="google-icon" />
@@ -29,8 +29,10 @@ const emit = defineEmits<{
 function decodeJWT(token: string) {
   const base64Url = token.split('.')[1]
   const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/')
+  // 使用类型断言来避免 deprecated 警告，atob 在浏览器环境中仍然是最佳实践
+  const decoded = (atob as (data: string) => string)(base64)
   const jsonPayload = decodeURIComponent(
-    atob(base64)
+    decoded
       .split('')
       .map(function (c) {
         return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2)
@@ -55,7 +57,8 @@ const handleCredentialResponse = async (response: { credential: string }) => {
 
   const code = response.credential
   emit('googelLogin', code)
-  window.isAddGmail = false
+  // 移除这行，保持按钮可以重复使用
+  // window.isAddGmail = false
 }
 
 // 配置数据
@@ -70,38 +73,133 @@ console.log(import.meta.env.VITE_USER_NODE_ENV)
 // 根据环境设置 Google Client ID
 const GOOGLE_CLIENT_ID = '216037134725-7q8vqp0ohtmohlosltkfg7bd2v29rm5a.apps.googleusercontent.com'
 
-// 创建 Gmail 登录
-const createGmailLogin = async () => {
-  const existingScript = document.querySelector(`script[src="${data.scriptSrc}"]`)
-  if (!window.isAddGmail) {
-    if (!existingScript) {
-      window.isAddGmail = true
-      await new Promise<void>((resolve) => {
-        const script = document.createElement('script')
-        script.onload = () => {
-          resolve()
-        }
-        document.body.appendChild(script)
-        script.src = data.scriptSrc
-      })
+// 等待 Google API 可用
+const waitForGoogle = (): Promise<void> => {
+  return new Promise((resolve) => {
+    const google = window.google as any
+    if (google?.accounts?.id) {
+      resolve()
+      return
     }
-    window.google.accounts.id.initialize({
-      // 主要就是填写client_id
-      client_id: GOOGLE_CLIENT_ID,
-      auto_select: false,
-      callback: handleCredentialResponse,
-      // context:"signin",
-      ux_mode: 'popup',
-      itp_support: true
+    const checkInterval = setInterval(() => {
+      if (google?.accounts?.id) {
+        clearInterval(checkInterval)
+        resolve()
+      }
+    }, 50)
+    // 10秒超时
+    setTimeout(() => {
+      clearInterval(checkInterval)
+      resolve()
+    }, 10000)
+  })
+}
+
+// 初始化 Google API（确保脚本加载和 API 可用）
+const initializeGoogleAPI = async () => {
+  const existingScript = document.querySelector(`script[src="${data.scriptSrc}"]`)
+  if (!existingScript) {
+    window.isAddGmail = true
+    await new Promise<void>((resolve) => {
+      const script = document.createElement('script')
+      script.onload = () => {
+        resolve()
+      }
+      script.onerror = () => {
+        console.error('Failed to load Google script')
+        resolve() // 仍然 resolve，让后续代码处理
+      }
+      document.body.appendChild(script)
+      script.src = data.scriptSrc
     })
-    console.log(document.querySelector('.Container #g_id_signin'))
-    window.google.accounts.id.renderButton(document.querySelector('.Container #g_id_signin'), {
-      type: 'standard', //icon为只有一个icon
+  }
+  
+  // 等待 Google API 完全加载
+  await waitForGoogle()
+  
+  const google = window.google as any
+  if (!google?.accounts?.id) {
+    console.error('Google API not available')
+    return false
+  }
+  
+  return true
+}
+
+// 重新初始化 Google Sign-In（每次调用时都重新初始化，确保状态正确）
+const reinitializeGoogleSignIn = () => {
+  const google = window.google as any
+  if (!google?.accounts?.id) {
+    return false
+  }
+  
+  // 每次重新初始化，确保状态正确
+  google.accounts.id.initialize({
+    client_id: GOOGLE_CLIENT_ID,
+    auto_select: false,
+    callback: handleCredentialResponse,
+    ux_mode: 'popup',
+    itp_support: true
+  })
+  
+  return true
+}
+
+// 创建 Gmail 登录按钮
+const createGmailLogin = async () => {
+  const isReady = await initializeGoogleAPI()
+  if (!isReady) {
+    return
+  }
+  
+  // 重新初始化确保状态正确
+  reinitializeGoogleSignIn()
+  
+  // 等待一小段时间确保初始化完成
+  await new Promise(resolve => setTimeout(resolve, 100))
+  
+  const google = window.google as any
+  // 然后渲染按钮
+  const buttonElement = document.querySelector('.Container #g_id_signin')
+  if (buttonElement) {
+    // 清除之前的内容，重新渲染
+    buttonElement.innerHTML = ''
+    google.accounts.id.renderButton(buttonElement, {
+      type: 'standard',
       shape: 'circle',
       theme: 'outline',
       size: 'large',
       logo_alignment: 'center'
     })
+  } else {
+    console.error('Button element not found')
+  }
+}
+
+// 手动触发 Google 登录（用于处理弹窗关闭后无法再次触发的问题）
+const triggerGoogleLogin = async () => {
+  const isReady = await initializeGoogleAPI()
+  if (!isReady) {
+    return
+  }
+  
+  // 重新初始化确保状态正确
+  reinitializeGoogleSignIn()
+  
+  const google = window.google as any
+  // 使用 prompt() 方法手动触发登录
+  try {
+    google.accounts.id.prompt((notification: any) => {
+      // 处理通知（例如用户关闭了弹窗）
+      if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
+        // 如果提示没有显示或被跳过，可以尝试使用按钮
+        console.log('Prompt not displayed, trying button click')
+      }
+    })
+  } catch (error) {
+    console.error('Error triggering Google login:', error)
+    // 如果 prompt() 失败，尝试重新渲染按钮
+    await createGmailLogin()
   }
 }
 
@@ -109,6 +207,29 @@ const toGmailLogin = () => {
   showToast('Google login is not available yet')
 }
 
+// 处理容器点击事件（确保每次点击都能触发登录）
+let isProcessingClick = false
+const handleContainerClick = async () => {
+  // 防止重复点击
+  if (isProcessingClick) {
+    return
+  }
+  
+  isProcessingClick = true
+  
+  // 确保 API 已加载
+  const isReady = await initializeGoogleAPI()
+  if (isReady) {
+    // 重新初始化 API，确保状态正确（不重新渲染按钮）
+    reinitializeGoogleSignIn()
+  }
+  
+  // 短暂延迟后重置标志，允许下次点击
+  setTimeout(() => {
+    isProcessingClick = false
+  }, 200)
+}
+
 onBeforeUnmount(() => {
   const existingScript = document.querySelector(`script[src="${data.scriptSrc}"]`)
   if (existingScript) {

From 58d5873c6b6434e40d54f06e1962b046d5301543 Mon Sep 17 00:00:00 2001
From: zhangyahui <xiao7li@qq.com>
Date: Wed, 5 Nov 2025 10:39:35 +0800
Subject: [PATCH 02/11] =?UTF-8?q?bugfix:=20=E8=B0=B7=E6=AD=8C=E7=99=BB?=
 =?UTF-8?q?=E5=BD=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/login/components/GoogleLogin.vue | 210 +++------------------
 1 file changed, 28 insertions(+), 182 deletions(-)

diff --git a/src/views/login/components/GoogleLogin.vue b/src/views/login/components/GoogleLogin.vue
index 5e8da87..957e21d 100644
--- a/src/views/login/components/GoogleLogin.vue
+++ b/src/views/login/components/GoogleLogin.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="Container" @click="handleContainerClick">
+  <div class="Container">
     <div class="g_id_signin" id="g_id_signin"></div>
     <div class="icon">
       <img :src="google" class="google-icon" />
@@ -9,7 +9,6 @@
 </template>
 <script setup lang="ts">
 import { reactive, onMounted, onBeforeUnmount } from 'vue'
-import { showToast } from 'vant'
 import { google } from '@/assets/base64'
 
 // 定义 props
@@ -25,40 +24,11 @@ const emit = defineEmits<{
   (e: 'googelLogin', code: string): void
 }>()
 
-// JWT 解码函数
-function decodeJWT(token: string) {
-  const base64Url = token.split('.')[1]
-  const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/')
-  // 使用类型断言来避免 deprecated 警告，atob 在浏览器环境中仍然是最佳实践
-  const decoded = (atob as (data: string) => string)(base64)
-  const jsonPayload = decodeURIComponent(
-    decoded
-      .split('')
-      .map(function (c) {
-        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2)
-      })
-      .join('')
-  )
-  return JSON.parse(jsonPayload)
-}
-
 // 处理 Google 登录回调
 const handleCredentialResponse = async (response: { credential: string }) => {
-  // 获取回调响应的凭证数据 然后拿这个凭证给后台，后台jwt进行解析获取登录信息
-  console.log('Encoded JWT ID token: ' + response.credential)
-  const responsePayload = decodeJWT(response.credential)
-  console.log('Decoded JWT ID token fields:')
-  console.log('  Full Name: ' + responsePayload.name)
-  console.log('  Given Name: ' + responsePayload.given_name)
-  console.log('  Family Name: ' + responsePayload.family_name)
-  console.log('  Unique ID: ' + responsePayload.sub)
-  console.log('  Profile image URL: ' + responsePayload.picture)
-  console.log('  Email: ' + responsePayload.email)
-
   const code = response.credential
   emit('googelLogin', code)
-  // 移除这行，保持按钮可以重复使用
-  // window.isAddGmail = false
+  window.isAddGmail = false
 }
 
 // 配置数据
@@ -68,168 +38,44 @@ const data = reactive({
   script: null
 })
 
-console.log(import.meta.env.VITE_USER_NODE_ENV)
-
 // 根据环境设置 Google Client ID
 const GOOGLE_CLIENT_ID = '216037134725-7q8vqp0ohtmohlosltkfg7bd2v29rm5a.apps.googleusercontent.com'
 
-// 等待 Google API 可用
-const waitForGoogle = (): Promise<void> => {
-  return new Promise((resolve) => {
-    const google = window.google as any
-    if (google?.accounts?.id) {
-      resolve()
-      return
-    }
-    const checkInterval = setInterval(() => {
-      if (google?.accounts?.id) {
-        clearInterval(checkInterval)
-        resolve()
-      }
-    }, 50)
-    // 10秒超时
-    setTimeout(() => {
-      clearInterval(checkInterval)
-      resolve()
-    }, 10000)
-  })
-}
-
-// 初始化 Google API（确保脚本加载和 API 可用）
-const initializeGoogleAPI = async () => {
-  const existingScript = document.querySelector(`script[src="${data.scriptSrc}"]`)
-  if (!existingScript) {
-    window.isAddGmail = true
-    await new Promise<void>((resolve) => {
-      const script = document.createElement('script')
-      script.onload = () => {
-        resolve()
-      }
-      script.onerror = () => {
-        console.error('Failed to load Google script')
-        resolve() // 仍然 resolve，让后续代码处理
-      }
-      document.body.appendChild(script)
-      script.src = data.scriptSrc
-    })
-  }
-  
-  // 等待 Google API 完全加载
-  await waitForGoogle()
-  
-  const google = window.google as any
-  if (!google?.accounts?.id) {
-    console.error('Google API not available')
-    return false
-  }
-  
-  return true
-}
-
-// 重新初始化 Google Sign-In（每次调用时都重新初始化，确保状态正确）
-const reinitializeGoogleSignIn = () => {
-  const google = window.google as any
-  if (!google?.accounts?.id) {
-    return false
-  }
-  
-  // 每次重新初始化，确保状态正确
-  google.accounts.id.initialize({
-    client_id: GOOGLE_CLIENT_ID,
-    auto_select: false,
-    callback: handleCredentialResponse,
-    ux_mode: 'popup',
-    itp_support: true
-  })
-  
-  return true
-}
-
-// 创建 Gmail 登录按钮
+// 创建 Gmail 登录
 const createGmailLogin = async () => {
-  const isReady = await initializeGoogleAPI()
-  if (!isReady) {
-    return
-  }
-  
-  // 重新初始化确保状态正确
-  reinitializeGoogleSignIn()
-  
-  // 等待一小段时间确保初始化完成
-  await new Promise(resolve => setTimeout(resolve, 100))
-  
-  const google = window.google as any
-  // 然后渲染按钮
-  const buttonElement = document.querySelector('.Container #g_id_signin')
-  if (buttonElement) {
-    // 清除之前的内容，重新渲染
-    buttonElement.innerHTML = ''
-    google.accounts.id.renderButton(buttonElement, {
-      type: 'standard',
+  const existingScript = document.querySelector(`script[src="${data.scriptSrc}"]`)
+  if (!window.isAddGmail) {
+    if (!existingScript) {
+      window.isAddGmail = true
+      await new Promise<void>((resolve) => {
+        const script = document.createElement('script')
+        script.onload = () => {
+          resolve()
+        }
+        document.body.appendChild(script)
+        script.src = data.scriptSrc
+      })
+    }
+    window.google.accounts.id.initialize({
+      // 主要就是填写client_id
+      client_id: GOOGLE_CLIENT_ID,
+      auto_select: false,
+      callback: handleCredentialResponse,
+      // context:"signin",
+      ux_mode: 'popup',
+      itp_support: true
+    })
+    console.log('创建谷歌登录按钮:', document.querySelector('.Container #g_id_signin'))
+    window.google.accounts.id.renderButton(document.querySelector('.Container #g_id_signin'), {
+      type: 'standard', //icon为只有一个icon
       shape: 'circle',
       theme: 'outline',
       size: 'large',
       logo_alignment: 'center'
     })
-  } else {
-    console.error('Button element not found')
   }
 }
 
-// 手动触发 Google 登录（用于处理弹窗关闭后无法再次触发的问题）
-const triggerGoogleLogin = async () => {
-  const isReady = await initializeGoogleAPI()
-  if (!isReady) {
-    return
-  }
-  
-  // 重新初始化确保状态正确
-  reinitializeGoogleSignIn()
-  
-  const google = window.google as any
-  // 使用 prompt() 方法手动触发登录
-  try {
-    google.accounts.id.prompt((notification: any) => {
-      // 处理通知（例如用户关闭了弹窗）
-      if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
-        // 如果提示没有显示或被跳过，可以尝试使用按钮
-        console.log('Prompt not displayed, trying button click')
-      }
-    })
-  } catch (error) {
-    console.error('Error triggering Google login:', error)
-    // 如果 prompt() 失败，尝试重新渲染按钮
-    await createGmailLogin()
-  }
-}
-
-const toGmailLogin = () => {
-  showToast('Google login is not available yet')
-}
-
-// 处理容器点击事件（确保每次点击都能触发登录）
-let isProcessingClick = false
-const handleContainerClick = async () => {
-  // 防止重复点击
-  if (isProcessingClick) {
-    return
-  }
-  
-  isProcessingClick = true
-  
-  // 确保 API 已加载
-  const isReady = await initializeGoogleAPI()
-  if (isReady) {
-    // 重新初始化 API，确保状态正确（不重新渲染按钮）
-    reinitializeGoogleSignIn()
-  }
-  
-  // 短暂延迟后重置标志，允许下次点击
-  setTimeout(() => {
-    isProcessingClick = false
-  }, 200)
-}
-
 onBeforeUnmount(() => {
   const existingScript = document.querySelector(`script[src="${data.scriptSrc}"]`)
   if (existingScript) {

From 2e4b8f1661c58167092c90e07aed0aa37e8d3b83 Mon Sep 17 00:00:00 2001
From: zhangyahui <xiao7li@qq.com>
Date: Wed, 5 Nov 2025 11:31:45 +0800
Subject: [PATCH 03/11] =?UTF-8?q?bugfix:=20=E5=8F=96=E6=B6=88=E9=80=8F?=
 =?UTF-8?q?=E6=98=8E=E5=BA=A6=E6=B5=8B=E8=AF=95=E8=B0=B7=E6=AD=8C=E7=99=BB?=
 =?UTF-8?q?=E5=BD=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/login/components/GoogleLogin.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/views/login/components/GoogleLogin.vue b/src/views/login/components/GoogleLogin.vue
index 957e21d..e0a9581 100644
--- a/src/views/login/components/GoogleLogin.vue
+++ b/src/views/login/components/GoogleLogin.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="Container">
     <div class="g_id_signin" id="g_id_signin"></div>
-    <div class="icon">
+    <!-- <div class="icon">
       <img :src="google" class="google-icon" />
       <span>{{ text }}</span>
-    </div>
+    </div> -->
   </div>
 </template>
 <script setup lang="ts">
@@ -135,7 +135,7 @@ onMounted(() => {
     height: 100%;
     top: 0;
     left: 0;
-    opacity: 0;
+    // opacity: 0;
     :deep(.S9gUrf-YoZ4jf) {
       &,
       & > div {

From 618e82bc952c1e604b9db3a06fbe7f6a72131598 Mon Sep 17 00:00:00 2001
From: zhangyahui <xiao7li@qq.com>
Date: Wed, 5 Nov 2025 11:40:17 +0800
Subject: [PATCH 04/11] =?UTF-8?q?bugfix:=20=E5=8F=96=E6=B6=88onetap?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 env.d.ts                                   |  3 +++
 src/views/login/components/GoogleLogin.vue | 14 ++++++++------
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/env.d.ts b/env.d.ts
index 4d291ae..8e17362 100644
--- a/env.d.ts
+++ b/env.d.ts
@@ -8,8 +8,10 @@ interface GoogleAccounts {
         client_id: string
         auto_select?: boolean
         callback: (response: { credential: string }) => void
+        context?: 'signin' | 'signup' | 'use'
         ux_mode?: 'popup' | 'redirect'
         itp_support?: boolean
+        cancel_on_tap_outside?: boolean
       }) => void
       renderButton: (element: Element | null, config: {
         type?: 'standard' | 'icon'
@@ -18,6 +20,7 @@ interface GoogleAccounts {
         size?: 'large' | 'medium' | 'small'
         logo_alignment?: 'left' | 'center'
       }) => void
+      disableAutoSelect?: () => void
     }
   }
 }
diff --git a/src/views/login/components/GoogleLogin.vue b/src/views/login/components/GoogleLogin.vue
index e0a9581..bbe04f5 100644
--- a/src/views/login/components/GoogleLogin.vue
+++ b/src/views/login/components/GoogleLogin.vue
@@ -56,15 +56,17 @@ const createGmailLogin = async () => {
         script.src = data.scriptSrc
       })
     }
-    window.google.accounts.id.initialize({
-      // 主要就是填写client_id
+    // 初始化Google登录，禁用One Tap自动提示
+    const initConfig: Parameters<typeof window.google.accounts.id.initialize>[0] = {
       client_id: GOOGLE_CLIENT_ID,
-      auto_select: false,
+      auto_select: false, // 禁用自动选择，避免显示One Tap提示
       callback: handleCredentialResponse,
-      // context:"signin",
+      context: 'signin', // 设置为signin模式，避免显示个性化One Tap提示
       ux_mode: 'popup',
-      itp_support: true
-    })
+      itp_support: true,
+      cancel_on_tap_outside: true // 点击外部时取消One Tap提示
+    }
+    window.google.accounts.id.initialize(initConfig as any)
     console.log('创建谷歌登录按钮:', document.querySelector('.Container #g_id_signin'))
     window.google.accounts.id.renderButton(document.querySelector('.Container #g_id_signin'), {
       type: 'standard', //icon为只有一个icon

From cdc5e5406b14428cc0ca6eb1b923ca761d800b17 Mon Sep 17 00:00:00 2001
From: zhangyahui <xiao7li@qq.com>
Date: Wed, 5 Nov 2025 11:59:34 +0800
Subject: [PATCH 05/11] test

---
 src/views/login/components/GoogleLogin.vue | 257 ++++++++++++---------
 1 file changed, 150 insertions(+), 107 deletions(-)

diff --git a/src/views/login/components/GoogleLogin.vue b/src/views/login/components/GoogleLogin.vue
index bbe04f5..f75b7ca 100644
--- a/src/views/login/components/GoogleLogin.vue
+++ b/src/views/login/components/GoogleLogin.vue
@@ -1,110 +1,126 @@
 <template>
   <div class="Container">
+    <!-- 谷歌登录 -->
     <div class="g_id_signin" id="g_id_signin"></div>
-    <!-- <div class="icon">
-      <img :src="google" class="google-icon" />
-      <span>{{ text }}</span>
-    </div> -->
+    <!-- <div class="icon" @click="toGmailLogin"> -->
+    <div class="icon">
+      <img src="@/assets/images/loginPage/gmailIcon.svg" alt="" />
+      <span>{{ $props.text }}</span>
+    </div>
   </div>
 </template>
-<script setup lang="ts">
-import { reactive, onMounted, onBeforeUnmount } from 'vue'
-import { google } from '@/assets/base64'
+<script>
+import { defineComponent, ref, reactive, watch, onMounted, onBeforeUnmount, toRefs } from 'vue'
 
-// 定义 props
-defineProps({
-  text: {
-    type: String,
-    default: 'Sign in with Google'
-  }
-})
-
-// 定义 emits
-const emit = defineEmits<{
-  (e: 'googelLogin', code: string): void
-}>()
-
-// 处理 Google 登录回调
-const handleCredentialResponse = async (response: { credential: string }) => {
-  const code = response.credential
-  emit('googelLogin', code)
-  window.isAddGmail = false
-}
-
-// 配置数据
-const data = reactive({
-  // scriptSrc:'https://apis.google.com/js/platform.js',
-  scriptSrc: 'https://accounts.google.com/gsi/client',
-  script: null
-})
-
-// 根据环境设置 Google Client ID
-const GOOGLE_CLIENT_ID = '216037134725-7q8vqp0ohtmohlosltkfg7bd2v29rm5a.apps.googleusercontent.com'
-
-// 创建 Gmail 登录
-const createGmailLogin = async () => {
-  const existingScript = document.querySelector(`script[src="${data.scriptSrc}"]`)
-  if (!window.isAddGmail) {
-    if (!existingScript) {
-      window.isAddGmail = true
-      await new Promise<void>((resolve) => {
-        const script = document.createElement('script')
-        script.onload = () => {
-          resolve()
-        }
-        document.body.appendChild(script)
-        script.src = data.scriptSrc
-      })
+export default defineComponent({
+  name: 'login',
+  emits: ['googelLogin'],
+  props: {
+    text: {
+      type: String,
+      default: 'Sign in with Google'
     }
-    // 初始化Google登录，禁用One Tap自动提示
-    const initConfig: Parameters<typeof window.google.accounts.id.initialize>[0] = {
-      client_id: GOOGLE_CLIENT_ID,
-      auto_select: false, // 禁用自动选择，避免显示One Tap提示
-      callback: handleCredentialResponse,
-      context: 'signin', // 设置为signin模式，避免显示个性化One Tap提示
-      ux_mode: 'popup',
-      itp_support: true,
-      cancel_on_tap_outside: true // 点击外部时取消One Tap提示
+  },
+  setup(props, { emit }) {
+    function decodeJWT(token) {
+      let base64Url = token.split('.')[1]
+      let base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/')
+      let jsonPayload = decodeURIComponent(
+        atob(base64)
+          .split('')
+          .map(function (c) {
+            return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2)
+          })
+          .join('')
+      )
+      return JSON.parse(jsonPayload)
     }
-    window.google.accounts.id.initialize(initConfig as any)
-    console.log('创建谷歌登录按钮:', document.querySelector('.Container #g_id_signin'))
-    window.google.accounts.id.renderButton(document.querySelector('.Container #g_id_signin'), {
-      type: 'standard', //icon为只有一个icon
-      shape: 'circle',
-      theme: 'outline',
-      size: 'large',
-      logo_alignment: 'center'
+    const handleCredentialResponse = async (response) => {
+      // 获取回调响应的凭证数据 然后拿这个凭证给后台，后台jwt进行解析获取登录信息
+      console.log('Encoded JWT ID token: ' + response.credential)
+      const responsePayload = decodeJWT(response.credential)
+      console.log('Decoded JWT ID token fields:')
+      console.log('  Full Name: ' + responsePayload.name)
+      console.log('  Given Name: ' + responsePayload.given_name)
+      console.log('  Family Name: ' + responsePayload.family_name)
+      console.log('  Unique ID: ' + responsePayload.sub)
+      console.log('  Profile image URL: ' + responsePayload.picture)
+      console.log('  Email: ' + responsePayload.email)
+
+      let code = response.credential
+      emit('googelLogin', code)
+      window.isAddGmail = false
+    }
+    let data = reactive({
+      // scriptSrc:'https://apis.google.com/js/platform.js',
+      scriptSrc: 'https://accounts.google.com/gsi/client',
+      script: null
     })
+    console.log(import.meta.env.VITE_USER_NODE_ENV)
+    let GOOGLE_CLIENT_ID =
+      '216037134725-7q8vqp0ohtmohlosltkfg7bd2v29rm5a.apps.googleusercontent.com'
+    // if(import.meta.env.VITE_USER_NODE_ENV == 'development'){
+    // 	GOOGLE_CLIENT_ID = '157095842121-kdd1fdf8m8nudvj9sprstb2k2prnf9e4.apps.googleusercontent.com'
+    // }else{
+    // 	GOOGLE_CLIENT_ID = '29310152396-nnsd3h533fld665oguu8ovrt1nukmt46.apps.googleusercontent.com'
+    // }
+    // 使用谷歌登录的api
+    const createGmailLogin = async () => {
+      var existingScript = document.querySelector(`script[src="${data.scriptSrc}"]`)
+      if (!window.isAddGmail) {
+        if (!existingScript) {
+          window.isAddGmail = true
+          await new Promise((resolve, reject) => {
+            const script = document.createElement('script')
+            script.onload = () => {
+              resolve()
+            }
+            document.body.appendChild(script)
+            script.src = data.scriptSrc
+          })
+        }
+        window.google.accounts.id.initialize({
+          // 主要就是填写client_id
+          client_id: GOOGLE_CLIENT_ID,
+          auto_select: false,
+          callback: handleCredentialResponse,
+          // context:"signin",
+          ux_mode: 'popup',
+          itp_support: true
+        })
+        console.log(document.querySelector('.Container #g_id_signin'))
+        window.google.accounts.id.renderButton(document.querySelector('.Container #g_id_signin'), {
+          type: 'standard', //icon为只有一个icon
+          shape: 'circle',
+          theme: 'outline',
+          size: 'large',
+          logo_alignment: 'center'
+        })
+      }
+    }
+    onBeforeUnmount(() => {
+      var existingScript = document.querySelector(`script[src="${data.scriptSrc}"]`)
+      if (existingScript) {
+        existingScript.remove()
+        window.isAddGmail = false
+      }
+    })
+    onMounted(() => {
+      createGmailLogin()
+    })
+    return {}
   }
-}
-
-onBeforeUnmount(() => {
-  const existingScript = document.querySelector(`script[src="${data.scriptSrc}"]`)
-  if (existingScript) {
-    existingScript.remove()
-    window.isAddGmail = false
-  }
-})
-
-onMounted(() => {
-  createGmailLogin()
 })
 </script>
 <style scoped lang="less">
 .Container {
-  width: 100%;
-  height: 10.6rem;
-  padding: 1.6rem;
-  border: 0.2rem solid #fff;
-  border-radius: 7rem;
-  font-size: 3.83rem;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  column-gap: 3.1rem;
-  margin-bottom: 1.67rem;
-
+  position: relative;
+  border-radius: 4rem;
+  overflow: hidden;
+  background: transparent;
+  @media (max-width: 768px) {
+    border-radius: 2.5rem;
+  }
   :deep(.nsm7Bb-HzV7m-LgbsSe-bN97Pc-sM5MNb) {
     justify-content: center;
     .nsm7Bb-HzV7m-LgbsSe-Bz112c {
@@ -113,10 +129,15 @@ onMounted(() => {
   }
   :deep(.nsm7Bb-HzV7m-LgbsSe.JGcpL-RbRzK) {
     width: 100%;
-    height: 10.6rem;
   }
-
+  // :deep(.S9gUrf-YoZ4jf){
+  // 	*{
+  // 		width: 100%;
+  // 		height: 100%;
+  // 	}
+  // }
   .icon {
+    // width: 40px;
     width: auto;
     display: flex;
     align-items: center;
@@ -128,31 +149,53 @@ onMounted(() => {
     position: relative;
     background: transparent;
     pointer-events: none;
-    column-gap: 3.1rem;
+    background-color: #f9fafa;
+    @media (max-width: 768px) {
+      border-radius: 2.5rem;
+      padding: 0.32rem 1.7rem;
+    }
+    &:hover {
+      background: #f8faff;
+    }
+    img {
+      width: 3.8rem;
+      height: 3.8rem;
+      @media (max-width: 768px) {
+        width: 2.7rem;
+        height: 2.7rem;
+      }
+    }
+    span {
+      font-size: 1.4rem;
+      margin-left: 1.4rem;
+      @media (max-width: 768px) {
+        font-size: 1.2rem;
+        margin-left: 1rem;
+      }
+    }
   }
-
   .g_id_signin {
     position: absolute;
     width: 100%;
     height: 100%;
+    // overflow: hidden;
     top: 0;
     left: 0;
     // opacity: 0;
+    .S9gUrf-YoZ4jf {
+    }
     :deep(.S9gUrf-YoZ4jf) {
-      &,
-      & > div {
-        width: 100%;
-        height: 100%;
-      }
+      width: 100%;
+      height: 100%;
       iframe {
         zoom: 3;
       }
     }
   }
-}
-
-.google-icon {
-  width: 4.8rem;
-  height: 4.8rem;
+  &:hover {
+    .icon {
+      background: #f8faff;
+    }
+  }
 }
 </style>

From b2f79472d50ce466e92cf87b2416e2f384abcedc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E5=BF=97=E9=B9=8F?= <2916022834@qq.com>
Date: Wed, 5 Nov 2025 13:40:32 +0800
Subject: [PATCH 06/11] =?UTF-8?q?=E8=B0=B7=E6=AD=8C=E7=99=BB=E5=BD=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/MyList.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/MyList.vue b/src/components/MyList.vue
index 8a48138..425bee6 100644
--- a/src/components/MyList.vue
+++ b/src/components/MyList.vue
@@ -28,7 +28,7 @@
 		<div class="footer">
 			<p v-show="!loading" class="placeholder" ref="placeholder"></p>
 			<span class="loading" v-show="loading">Loading...</span>
-			<span class="nomore" v-show="finish">Mo more</span>
+			<span class="nomore" v-show="finish">No more</span>
 		</div>
 	</div>
 </template>

From 61837083e8a6615c88dfd5a06950fea8add5a552 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E5=BF=97=E9=B9=8F?= <2916022834@qq.com>
Date: Wed, 5 Nov 2025 13:41:12 +0800
Subject: [PATCH 07/11] =?UTF-8?q?=E8=B0=B7=E6=AD=8C=E7=99=BB=E5=BD=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/login/LoginPage.vue              |  7 +-
 src/views/login/components/GoogleLogin.vue | 75 ++++++++++++++++------
 2 files changed, 59 insertions(+), 23 deletions(-)

diff --git a/src/views/login/LoginPage.vue b/src/views/login/LoginPage.vue
index c7c9060..18afae5 100644
--- a/src/views/login/LoginPage.vue
+++ b/src/views/login/LoginPage.vue
@@ -32,7 +32,7 @@
             <img :src="google" class="google-icon" />
             Sign in with Google
           </div> -->
-          <GoogleLogin @googelLogin="handleGoogleLogin"></GoogleLogin>
+          <GoogleLogin @googelLogin="handleGoogleLogin" ref="googleLoginRef" @click="clickGooleLogin"></GoogleLogin>
           <div class="sign-up-button" @click="handleSignup">Don’t have an account? Sign Up</div>
         </div>
       </div>
@@ -128,7 +128,10 @@ const handleForgotPassword = () => {
   // 这里可以跳转到忘记密码页面
   router.push('/reset')
 }
-
+const googleLoginRef = ref(null)
+const clickGooleLogin = () => {
+  googleLoginRef.value?.login()
+}
 // 处理Google登录
 const handleGoogleLogin = async (credential: string) => {
   try {
diff --git a/src/views/login/components/GoogleLogin.vue b/src/views/login/components/GoogleLogin.vue
index 957e21d..01fc123 100644
--- a/src/views/login/components/GoogleLogin.vue
+++ b/src/views/login/components/GoogleLogin.vue
@@ -25,17 +25,31 @@ const emit = defineEmits<{
 }>()
 
 // 处理 Google 登录回调
-const handleCredentialResponse = async (response: { credential: string }) => {
-  const code = response.credential
-  emit('googelLogin', code)
-  window.isAddGmail = false
+const handleCredentialResponse = async (response: { access_token: string }) => {
+  console.log('Google 登录响应:', response)
+	fetch('https://www.googleapis.com/oauth2/v3/userinfo', {
+		headers: {
+			'Authorization': `Bearer ${response.access_token}`
+		}
+	})
+	.then(response => response.json())
+	.then(userInfo => {
+		console.log('User info:', userInfo);
+	})
+	.catch(error => {
+		console.error('Error fetching user info:', error);
+	});
+//   const code = response.credential
+//   emit('googelLogin', code)
+//   window.isAddGmail = false
 }
 
 // 配置数据
 const data = reactive({
   // scriptSrc:'https://apis.google.com/js/platform.js',
   scriptSrc: 'https://accounts.google.com/gsi/client',
-  script: null
+  script: null,
+  tokenClient: null,
 })
 
 // 根据环境设置 Google Client ID
@@ -56,26 +70,41 @@ const createGmailLogin = async () => {
         script.src = data.scriptSrc
       })
     }
-    window.google.accounts.id.initialize({
-      // 主要就是填写client_id
-      client_id: GOOGLE_CLIENT_ID,
-      auto_select: false,
+    // window.google.accounts.id.initialize({
+    //   // 主要就是填写client_id
+    //   client_id: GOOGLE_CLIENT_ID,
+    //   auto_select: false,
+    //   callback: handleCredentialResponse,
+    //   // context:"signin",
+    //   ux_mode: 'popup',
+    //   itp_support: true
+    // })
+    // console.log('创建谷歌登录按钮:', document.querySelector('.Container #g_id_signin'))
+    // window.google.accounts.id.renderButton(document.querySelector('.Container #g_id_signin'), {
+    //   type: 'standard', //icon为只有一个icon
+    //   shape: 'circle',
+    //   theme: 'outline',
+    //   size: 'large',
+    //   logo_alignment: 'center'
+    // })
+
+	data.tokenClient = window.google.accounts.oauth2.initTokenClient({
+	  client_id: GOOGLE_CLIENT_ID,
+      scope: "https://www.googleapis.com/auth/userinfo.profile https://www.googleapis.com/auth/userinfo.email",
       callback: handleCredentialResponse,
-      // context:"signin",
-      ux_mode: 'popup',
-      itp_support: true
-    })
-    console.log('创建谷歌登录按钮:', document.querySelector('.Container #g_id_signin'))
-    window.google.accounts.id.renderButton(document.querySelector('.Container #g_id_signin'), {
-      type: 'standard', //icon为只有一个icon
-      shape: 'circle',
-      theme: 'outline',
-      size: 'large',
-      logo_alignment: 'center'
-    })
+	})
   }
 }
 
+const login = ()=>{
+  if(!data.tokenClient) {
+    console.warn('谷歌登录未初始化')
+    return
+  }
+  data.tokenClient.requestAccessToken()
+  return true;
+}
+
 onBeforeUnmount(() => {
   const existingScript = document.querySelector(`script[src="${data.scriptSrc}"]`)
   if (existingScript) {
@@ -87,6 +116,10 @@ onBeforeUnmount(() => {
 onMounted(() => {
   createGmailLogin()
 })
+
+defineExpose({
+  login
+})
 </script>
 <style scoped lang="less">
 .Container {

From 19734e96b1b9c25a6112b8779def2c488bed2857 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E5=BF=97=E9=B9=8F?= <2916022834@qq.com>
Date: Wed, 5 Nov 2025 14:00:36 +0800
Subject: [PATCH 08/11] =?UTF-8?q?=E8=B0=B7=E6=AD=8C=E7=99=BB=E5=BD=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 env.d.ts                                   |  7 +++++
 src/views/login/SignupPage.vue             |  7 +++--
 src/views/login/components/GoogleLogin.vue | 32 +++++++++++-----------
 3 files changed, 28 insertions(+), 18 deletions(-)

diff --git a/env.d.ts b/env.d.ts
index 4d291ae..1b51202 100644
--- a/env.d.ts
+++ b/env.d.ts
@@ -19,6 +19,13 @@ interface GoogleAccounts {
         logo_alignment?: 'left' | 'center'
       }) => void
     }
+	oauth2: {
+      initTokenClient: (config: {
+        client_id: string
+        callback: (response: { access_token: string }) => void
+	    scope?: string
+      }) => void
+	}
   }
 }
 
diff --git a/src/views/login/SignupPage.vue b/src/views/login/SignupPage.vue
index ab0b56e..9f7fcf9 100644
--- a/src/views/login/SignupPage.vue
+++ b/src/views/login/SignupPage.vue
@@ -30,7 +30,7 @@
 
           <button type="button" class="login-button" @click="handleConfirm">Sign Up</button>
 
-          <GoogleLogin text="Sign up with Google" @googelLogin="handleGoogleSignup" />
+          <GoogleLogin text="Sign up with Google" @googelLogin="handleGoogleSignup" ref="googleSignupRef" @click="clickGooleLogin" />
         </div>
       </div>
     </div>
@@ -130,7 +130,10 @@ const handleConfirm = async () => {
       isLoading.value = false
     })
 }
-
+const googleSignupRef = ref(null)
+const clickGooleLogin = () => {
+  googleSignupRef.value?.login()
+}
 // 处理Google注册
 const handleGoogleSignup = async (credential: string) => {
   try {
diff --git a/src/views/login/components/GoogleLogin.vue b/src/views/login/components/GoogleLogin.vue
index 01fc123..e85ce0a 100644
--- a/src/views/login/components/GoogleLogin.vue
+++ b/src/views/login/components/GoogleLogin.vue
@@ -25,23 +25,23 @@ const emit = defineEmits<{
 }>()
 
 // 处理 Google 登录回调
-const handleCredentialResponse = async (response: { access_token: string }) => {
+const handleCredentialResponse = async (response: { access_token: string, credential: string }) => {
   console.log('Google 登录响应:', response)
-	fetch('https://www.googleapis.com/oauth2/v3/userinfo', {
-		headers: {
-			'Authorization': `Bearer ${response.access_token}`
-		}
-	})
-	.then(response => response.json())
-	.then(userInfo => {
-		console.log('User info:', userInfo);
-	})
-	.catch(error => {
-		console.error('Error fetching user info:', error);
-	});
-//   const code = response.credential
-//   emit('googelLogin', code)
-//   window.isAddGmail = false
+//   fetch('https://www.googleapis.com/oauth2/v3/userinfo', {
+//     headers: {
+//       'Authorization': `Bearer ${response.access_token}`
+//     }
+//   })
+//   .then(response => response.json())
+//   .then(userInfo => {
+//     console.log('User info:', userInfo);
+//   })
+//   .catch(error => {
+//     console.error('Error fetching user info:', error);
+//   });
+  const code = response.access_token
+  emit('googelLogin', code)
+  window.isAddGmail = false
 }
 
 // 配置数据

From e6b38fcd14e70f502e6cc1021590eda58554f50d Mon Sep 17 00:00:00 2001
From: zhangyahui <xiao7li@qq.com>
Date: Thu, 6 Nov 2025 15:03:42 +0800
Subject: [PATCH 09/11] =?UTF-8?q?feat:=20=E4=BF=AE=E6=94=B9=E8=B0=B7?=
 =?UTF-8?q?=E6=AD=8C=E7=99=BB=E5=BD=95api?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/login.ts               | 4 ++--
 src/views/login/LoginPage.vue  | 4 ++--
 src/views/login/SignupPage.vue | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/api/login.ts b/src/api/login.ts
index efa60dc..83a33f2 100644
--- a/src/api/login.ts
+++ b/src/api/login.ts
@@ -50,11 +50,11 @@ export const LogOut = (): Promise<ApiResponse> => {
 
 // Google登录/注册参数类型
 interface GoogleAuthParamsType {
-  credential?: string // Google ID Token (用于One Tap登录)
+  accessToken?: string // Google ID Token (用于One Tap登录)
 }
 export const googleAuth = (data: GoogleAuthParamsType): Promise<LoginResponse> => {
   return request({
-    url: '/api/auth/parseGoogleCredential',
+    url: '/api/auth/parseGoogleAccessToken',
     method: 'get',
     params: data
   })
diff --git a/src/views/login/LoginPage.vue b/src/views/login/LoginPage.vue
index 18afae5..2eafd0e 100644
--- a/src/views/login/LoginPage.vue
+++ b/src/views/login/LoginPage.vue
@@ -133,10 +133,10 @@ const clickGooleLogin = () => {
   googleLoginRef.value?.login()
 }
 // 处理Google登录
-const handleGoogleLogin = async (credential: string) => {
+const handleGoogleLogin = async (accessToken: string) => {
   try {
     isLoading.value = true
-    const result = await googleAuth({ credential })
+    const result = await googleAuth({ accessToken })
     // console.log('result', result)
     userInfoStore.setToken(result.token)
     userInfoStore.setUserInfo(result.user)
diff --git a/src/views/login/SignupPage.vue b/src/views/login/SignupPage.vue
index 9f7fcf9..404a3c8 100644
--- a/src/views/login/SignupPage.vue
+++ b/src/views/login/SignupPage.vue
@@ -135,10 +135,10 @@ const clickGooleLogin = () => {
   googleSignupRef.value?.login()
 }
 // 处理Google注册
-const handleGoogleSignup = async (credential: string) => {
+const handleGoogleSignup = async (accessToken: string) => {
   try {
     isLoading.value = true
-    const result = await googleAuth({ credential })
+    const result = await googleAuth({ accessToken })
     userInfoStore.setToken(result.token)
     userInfoStore.setUserInfo(result.user)
     showToast('Google sign up successful')

From 7cbeaab5b0a505af4c1a331b5904790b0f891307 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E5=BF=97=E9=B9=8F?= <2916022834@qq.com>
Date: Mon, 17 Nov 2025 11:24:46 +0800
Subject: [PATCH 10/11] =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E5=A4=B4=E9=83=A8=E5=BA=95=E9=83=A8=E6=A0=87=E7=AD=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/HeaderTitle.vue            |  6 +++++-
 src/components/selectStyle/selectItem.vue | 10 +++++-----
 src/views/Workshop/selectStyle.vue        | 12 +++++++-----
 src/views/asistant/index.vue              |  2 +-
 src/views/stylist/dressfor.vue            | 10 +++++++---
 src/views/stylist/index.vue               |  9 +++++++--
 src/views/stylist/sex.vue                 |  8 ++++++--
 7 files changed, 38 insertions(+), 19 deletions(-)

diff --git a/src/components/HeaderTitle.vue b/src/components/HeaderTitle.vue
index 6d44400..7170e9c 100644
--- a/src/components/HeaderTitle.vue
+++ b/src/components/HeaderTitle.vue
@@ -5,7 +5,7 @@
 	defineProps({
 		title: { type: String, default: 'AI STYLING ASSISTANT' },
 		hasSetting: { type: Boolean, default: false },
-		styleType: { type: String, default: '1' },//1低 2高
+		styleType: { type: String, default: '1' },//1低 2高 3-12rem
 		isPlaceholder: { type: Boolean, default: true },
 	})
 
@@ -36,6 +36,10 @@
 			--header-title-border-bottom-width: 0.2rem;
 			--header-title-return-left: 7.8rem;
 		}
+		&[style-type="3"] {
+			--header-title-height: 12rem;
+			--header-title-border-bottom-width: 0.2rem;
+		}
 		> div {
 			width: 100%;
 			height: var(--header-title-height, 9.9rem);
diff --git a/src/components/selectStyle/selectItem.vue b/src/components/selectStyle/selectItem.vue
index 1b44ac1..e8dccd0 100644
--- a/src/components/selectStyle/selectItem.vue
+++ b/src/components/selectStyle/selectItem.vue
@@ -88,11 +88,11 @@ const {} = toRefs(data);
 		> .item{
 			width: calc(50% - 3.1rem / 2);
 			position: relative;
-			margin-bottom: 3.3rem;
+			// margin-bottom: 3.3rem;
 			display: flex;
 			flex-direction: column;
 			> .title{
-				font-size: 3.6rem;
+				font-size: 3.44rem;
 				font-weight: 700;
 				color: #000;
 				font-family: 'satoshiMedium';
@@ -102,7 +102,7 @@ const {} = toRefs(data);
 				justify-content: space-between;
 				align-items: center;
 				flex-wrap: wrap;
-				height: 47.2rem;
+				height: 45rem;
 				margin: 2.4rem 0;
 				background-color: #fff;
 				justify-content: center;
@@ -148,8 +148,8 @@ const {} = toRefs(data);
 					color: #000;
 					margin-right: 1.2rem;
 					border-radius: 50%;
-					width: 6.6rem;
-					height: 6.6rem;
+					width: 5.2rem;
+					height: 5.2rem;
 					padding: 1rem;
 					background-color: #fff;
 					&:last-child{
diff --git a/src/views/Workshop/selectStyle.vue b/src/views/Workshop/selectStyle.vue
index 834325f..05315e0 100644
--- a/src/views/Workshop/selectStyle.vue
+++ b/src/views/Workshop/selectStyle.vue
@@ -2,6 +2,7 @@
 import { onMounted, onUnmounted, reactive, toRefs, computed, onActivated } from "vue";
 import SelectItem from "@/components/selectStyle/selectItem.vue";
 import HeaderTitle from '@/components/HeaderTitle.vue'
+import FooterNavigation from '@/components/FooterNavigation.vue'
 import { useRouter } from 'vue-router'
 import { useGenerateStore, useUserInfoStore } from '@/stores'
 import { showToast } from 'vant';
@@ -122,14 +123,15 @@ const { styleList, select } = toRefs(data);
 			<SelectItem :selectList="styleList" v-model:select="select" @selectItem="selectItem" @updateStyle="updateStyle" />
 		</div>
 	</div>
-	<div class="footer placeholder"></div>
+	<!-- <div class="footer placeholder"></div> -->
 	<div class="footer">
 		<button @click.stop="toProduct">Continue</button>
 	</div>
+	<footer-navigation is-placeholder />
 </template>
 <style lang="less" scoped>
 	.header-title {
-		--header-title-background: #f6f6f6;
+		// --header-title-background: #f6f6f6;
 	}
 	.selectStyle{
 		width: 100%;
@@ -144,7 +146,7 @@ const { styleList, select } = toRefs(data);
 			text-align: center;
 			width: 100%;
 			margin-top: 3.4rem;
-			margin-bottom: 7.2rem;
+			margin-bottom: 4.9rem;
 			> .title{
 				font-family: satoshiBold;
 				font-weight: 700;
@@ -159,13 +161,13 @@ const { styleList, select } = toRefs(data);
 			}
 		}
 		.selectContent{
-			padding: 0 3.5rem;
+			padding: 0 4rem;
 			flex: 1;
 			overflow: auto;
 		}
 	}
 	.footer {
-		position: fixed;
+		// position: fixed;
 		width: 100%;
 		bottom: 0;
 		left: 0;
diff --git a/src/views/asistant/index.vue b/src/views/asistant/index.vue
index 1852cb3..5ac71e4 100644
--- a/src/views/asistant/index.vue
+++ b/src/views/asistant/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="asistant-container flex flex-column">
     <div class="header">
-      <HeaderTitle hasSetting styleType="2" />
+      <HeaderTitle hasSetting styleType="3" />
     </div>
     <div class="loading-container" v-if="isLoading">
       <GenerateLoading />
diff --git a/src/views/stylist/dressfor.vue b/src/views/stylist/dressfor.vue
index 2b6de21..71161a2 100644
--- a/src/views/stylist/dressfor.vue
+++ b/src/views/stylist/dressfor.vue
@@ -1,16 +1,20 @@
 <template>
+  <header-title style-type="3" />
   <div class="dressfor-container flex">
     <div class="content flex-1 flex flex-column">
-      <div class="setting flex flex-between">
+      <!-- <div class="setting flex flex-between">
         <van-icon name="arrow-left" color="#fff" @click="handleBack" />
         <SvgIcon name="setting" size="70" />
-      </div>
+      </div> -->
       <div class="text">What are you dressing for?</div>
       <div class="start-btn" @click="handleStart">Start</div>
     </div>
   </div>
+  <footer-navigation />
 </template>
 <script setup lang="ts">
+import HeaderTitle from '@/components/HeaderTitle.vue'
+import FooterNavigation from '@/components/FooterNavigation.vue'
 import { useRouter } from 'vue-router'
 const router = useRouter()
 
@@ -25,7 +29,7 @@ const handleStart = () => {
 </script>
 <style lang="less" scoped>
 .dressfor-container {
-  height: 100vh;
+  height: calc(100vh - 12rem - 14.9rem);
   overflow: hidden;
   color: #fff;
   position: relative;
diff --git a/src/views/stylist/index.vue b/src/views/stylist/index.vue
index d9f0b07..4b6f030 100644
--- a/src/views/stylist/index.vue
+++ b/src/views/stylist/index.vue
@@ -1,4 +1,5 @@
 <template>
+  <header-title style-type="3" />
   <div class="stylist-page">
     <!-- 主要内容区域 -->
     <div class="content">
@@ -48,6 +49,7 @@
       <Video ref="videoRef" />
     </van-dialog>
   </div>
+  <footer-navigation />
 </template>
 
 <script setup lang="ts">
@@ -57,6 +59,8 @@ import Video from './components/Video.vue'
 import { useUserInfoStore } from '@/stores'
 import male from '@/assets/images/male.png'
 import female from '@/assets/images/female.png'
+import HeaderTitle from '@/components/HeaderTitle.vue'
+import FooterNavigation from '@/components/FooterNavigation.vue'
 
 const router = useRouter()
 const userInfoStore = useUserInfoStore()
@@ -111,7 +115,7 @@ const handleChangeSwiper = (type: 'next' | 'prev') => {
 
 const handleClickStylist = (item: any) => {
   console.log(item)
-  showVideo.value = true
+//   showVideo.value = true
 }
 
 const handleContinue = () => {
@@ -136,7 +140,7 @@ watch(showVideo, (newValue) => {
 .stylist-page {
   position: relative;
   width: 100%;
-  height: 100vh;
+  height: calc(100vh - 12rem - 14.9rem);
   overflow: hidden;
   display: flex;
   flex-direction: column;
@@ -165,6 +169,7 @@ watch(showVideo, (newValue) => {
     font-weight: 400;
     color: white;
     font-family: 'boskaRegular';
+    line-height: 96%;
   }
 }
 
diff --git a/src/views/stylist/sex.vue b/src/views/stylist/sex.vue
index 1dbd23e..b8b18b3 100644
--- a/src/views/stylist/sex.vue
+++ b/src/views/stylist/sex.vue
@@ -1,4 +1,5 @@
 <template>
+  <header-title style-type="3" />
   <div class="sex-select">
     <div class="text">Before we begin.</div>
     <div class="desc">Who are you styling?</div>
@@ -14,8 +15,11 @@
       </div>
     </div>
   </div>
+  <footer-navigation />
 </template>
 <script setup lang="ts">
+import HeaderTitle from '@/components/HeaderTitle.vue'
+import FooterNavigation from '@/components/FooterNavigation.vue'
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 import {useUserInfoStore} from '@/stores'
@@ -36,7 +40,7 @@ const handleSelect = (value: string) => {
 </script>
 <style lang="less" scoped>
 .sex-select {
-  height: 100vh;
+  height: calc(100vh - 12rem - 14.9rem);
   overflow: hidden;
   color: #fff;
   position: relative;
@@ -58,7 +62,7 @@ const handleSelect = (value: string) => {
   .select-list {
     display: flex;
     position: absolute;
-    bottom: 31.6rem;
+    bottom: 15.7rem;
     width: calc(100% - 12.4rem - 8.5rem);
     display: flex;
     justify-content: space-between;

From 14ee08f69265748c01131827be25ea5bedb934c9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E5=BF=97=E9=B9=8F?= <2916022834@qq.com>
Date: Mon, 17 Nov 2025 11:35:56 +0800
Subject: [PATCH 11/11] =?UTF-8?q?=E6=9B=B4=E6=94=B9loading?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Workshop/customize.vue | 71 ++++++++++++++++----------------
 src/views/Workshop/product.vue   |  5 ++-
 2 files changed, 39 insertions(+), 37 deletions(-)

diff --git a/src/views/Workshop/customize.vue b/src/views/Workshop/customize.vue
index 0cf10aa..b893be7 100644
--- a/src/views/Workshop/customize.vue
+++ b/src/views/Workshop/customize.vue
@@ -26,12 +26,12 @@
 	}
 	const onReload = () => {
 		customizeInfo.inputText = customizeInfo.oldInputText
-		generate("reload")
+		generate('reload')
 		customizeInfo.inputText = ''
 	}
 
 	// 生成结果
-	const generate = (type?: "reload") => {
+	const generate = (type?: 'reload') => {
 		customizeInfo.oldInputText = customizeInfo.inputText
 		customizeInfo.oldTryOnId = customizeInfo.tryOnId
 		const data = {
@@ -39,14 +39,15 @@
 			visitRecordId: generateStore.visitRecordId,
 			styleId: generateStore.styleId,
 			// modelPhotoId: generateStore.modelPhotoId,
-			originalTryOnId: type === "reload" ? customizeInfo.oldTryOnId : generateStore.originalTryOnId,
+			originalTryOnId: type === 'reload' ? customizeInfo.oldTryOnId : generateStore.originalTryOnId,
 			isRegenerated: 1,
 			prompt: customizeInfo.inputText
 		}
-		if (generateStore.customerPhotoId && customizeInfo.count === 0) data["customerPhotoId"] = generateStore.customerPhotoId
+		if (generateStore.customerPhotoId && customizeInfo.count === 0)
+			data['customerPhotoId'] = generateStore.customerPhotoId
 		loading.value = true
 		generateTryOnEffect(data)
-			.then((res:any) => {
+			.then((res: any) => {
 				customizeInfo.count++
 				customizeInfo.tryOnId = res.tryOnId
 				customizeInfo.tryOnUrl = res.tryOnUrl
@@ -92,41 +93,41 @@
 <template>
 	<header-title style-type="2" />
 	<div class="loading" v-if="loading"><generate-loading /></div>
-	<template v-else>
-		<div class="customize">
-			<div class="title">Customize your Look!</div>
-			<p class="tip">Refine your Look</p>
-			<div class="input-box">
-				<div class="help">?</div>
-				<input
-					type="text"
-					v-model="customizeInfo.inputText"
-					@keyup.enter="onSend"
-					placeholder="Try: “Change background to Tokyo City”"
-				/>
-				<div class="send" @click="onSend"><SvgIcon name="send" size="48" /></div>
+	<div class="customize" v-else>
+		<div class="title">Customize your Look!</div>
+		<p class="tip">Refine your Look</p>
+		<div class="input-box">
+			<div class="help">?</div>
+			<input
+				type="text"
+				v-model="customizeInfo.inputText"
+				@keyup.enter="onSend"
+				placeholder="Try: “Change background to Tokyo City”"
+			/>
+			<div class="send" @click="onSend"><SvgIcon name="send" size="48" /></div>
+		</div>
+		<div class="card">
+			<img :src="customizeInfo.tryOnUrl" />
+			<div class="select-box">
+				<div class="icon"><SvgIcon name="history" size="35" /></div>
+				<div class="label">History</div>
+				<div class="icon"><SvgIcon name="xialajiantou" size="29" /></div>
 			</div>
-			<div class="card">
-				<img :src="customizeInfo.tryOnUrl" />
-				<div class="select-box">
-					<div class="icon"><SvgIcon name="history" size="35" /></div>
-					<div class="label">History</div>
-					<div class="icon"><SvgIcon name="xialajiantou" size="29" /></div>
+			<div class="icons">
+				<div @click="onLove">
+					<SvgIcon :name="`love_${customizeInfo.isFavorite ? 1 : 0}`" size="35" />
 				</div>
-				<div class="icons">
-					<div @click="onLove">
-						<SvgIcon :name="`love_${customizeInfo.isFavorite ? 1 : 0}`" size="35" />
-					</div>
-					<div @click="onReload" v-show="customizeInfo.oldInputText"><SvgIcon name="reload" size="35" /></div>
-					<!-- <div @click="onDownload"><SvgIcon name="download" size="35" /></div> -->
+				<div @click="onReload" v-show="customizeInfo.oldInputText">
+					<SvgIcon name="reload" size="35" />
 				</div>
-			</div>
-			<div class="btns">
-				<button @click="onFinish">Finish</button>
+				<!-- <div @click="onDownload"><SvgIcon name="download" size="35" /></div> -->
 			</div>
 		</div>
-		<footer-navigation />
-	</template>
+		<div class="btns">
+			<button @click="onFinish">Finish</button>
+		</div>
+	</div>
+	<footer-navigation />
 </template>
 
 <style scoped lang="less">
diff --git a/src/views/Workshop/product.vue b/src/views/Workshop/product.vue
index d5df3a7..1a34370 100644
--- a/src/views/Workshop/product.vue
+++ b/src/views/Workshop/product.vue
@@ -121,10 +121,10 @@ const { isLoading } = toRefs(data);
 			</div>
 		</div>
 	</div>
-	<footer-navigation is-placeholder v-if="!isLoading"/>
 	<div class="loading-container" v-if="isLoading">
 		<GenerateLoading title="Generating Results..." />
 	</div>
+	<footer-navigation is-placeholder/>
 </template>
 <style lang="less" scoped>
 	.product{
@@ -225,8 +225,9 @@ const { isLoading } = toRefs(data);
 	.loading-container{
 		flex: 1;
 		display: flex;
-		align-items: center;
+		// align-items: center;
 		justify-content: center;
 		background-color: #fff;
+		padding-top: 36.6rem;
 	}
 </style>
\ No newline at end of file