ud

src/App.tsx

@@ -10,6 +10,7 @@ import { getPackage } from './api/user.ts'
 // http://localhost:5173?token=c3f52a99-c519-427a-af05-364c5f3e59cc
 function App() {
   const [isConfigReady, setIsConfigReady] = useState(false)
+  const [packageLink, setPackageLink] = useState('')
   const [searchParams] = useSearchParams()
   const navigate = useNavigate()
   const [initialToken] = useState(() => searchParams.get('token'))
@@ -24,9 +25,10 @@ function App() {
         navigate('/twins', { replace: true })
       }
 
-      await getPackage()
+      const { data: packageInfo } = await getPackage()
 
       if (isMounted) {
+        setPackageLink(typeof packageInfo.link === 'string' ? packageInfo.link : '')
         setIsConfigReady(true)
       }
     }
@@ -47,7 +49,7 @@ function App() {
       <Route path="/" element={<Navigate to="/twins" replace />} />
       <Route path="/pay" element={<PayPage />} />
       <Route path="/pay-result" element={<PayResultPage />} />
-      <Route path="/twins" element={<Twins />} />
+      <Route path="/twins" element={<Twins installUrl={packageLink} />} />
       <Route
         path="/404"
         element={<PlaceholderPage path="/404" title="404" description="页面不存在" />}

src/api/user.ts

@@ -12,6 +12,7 @@ export type ServiceConfig = {
 }
 
 export type PackageInfo = {
+  link?: string
   [key: string]: unknown
 }
 

src/index.css

@@ -557,7 +557,7 @@ p {
 }
 
 #Twins {
-  height: 100svh;
+  min-height: 100svh;
   .header {
     height: 248px;
     background: url('/images/app-twins/bg.png') no-repeat;
@@ -622,12 +622,12 @@ p {
   }
 
   .card {
-    height: calc(100dvh - 178px);
+    min-height: calc(100dvh - 178px);
     padding: 20px 16px;
     border-radius: 30px 30px 0px 0px;
     background: #FFFFFF;
-    overflow: hidden;
     margin-top: -85px;
+    position: relative;
 
     .card-title {
       font-family: PingFang SC, PingFang SC;

src/pages/Twins.tsx

@@ -2,7 +2,11 @@ import { useEffect, useState } from 'react'
 import { getConfig, getService } from '@/api/user'
 import { TEMP_TOKEN_STORAGE_KEY } from '@/utils/request'
 
-function Twins() {
+type TwinsProps = {
+  installUrl: string
+}
+
+function Twins({ installUrl }: TwinsProps) {
   const [serviceUrl, setServiceUrl] = useState('')
 
   useEffect(() => {
@@ -39,7 +43,7 @@ function Twins() {
   return (
     <div id="Twins">
       <Header />
-      <Card serviceUrl={serviceUrl} />
+      <Card serviceUrl={serviceUrl} installUrl={installUrl} />
     </div>
   )
 }
@@ -70,9 +74,10 @@ function Header() {
 
 type CardProps = {
   serviceUrl: string
+  installUrl: string
 }
 
-function Card({ serviceUrl }: CardProps) {
+function Card({ serviceUrl, installUrl }: CardProps) {
   const steps = [
     {
       label: '步骤一',
@@ -93,7 +98,7 @@ function Card({ serviceUrl }: CardProps) {
         "· 下载完成后，桌面会出现第二个微信图标；",
       ],
       linkName: "前往安装",
-      linkUrl: "",
+      linkUrl: installUrl,
       sideBg: "./images/app-twins/step2-side.png"
     }
   ]