From 786c6e6a8186e13d945efaf2cc504a13d0c3e09d Mon Sep 17 00:00:00 2001
From: moux1024 <403053463@qq.com>
Date: Tue, 23 Sep 2025 13:42:44 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=20=E9=82=80=E8=AF=B7?=
 =?UTF-8?q?=E9=93=BE=E6=8E=A5=E6=A0=B7=E5=BC=8F=E4=B8=8E=E9=82=80=E8=AF=B7?=
 =?UTF-8?q?=E6=B5=81=E7=A8=8B=E6=8F=8F=E8=BF=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/share/page.tsx | 59 +++++++++++++++++++++++++++++-----------------
 1 file changed, 38 insertions(+), 21 deletions(-)

diff --git a/app/share/page.tsx b/app/share/page.tsx
index 66c97cd..3454566 100644
--- a/app/share/page.tsx
+++ b/app/share/page.tsx
@@ -151,7 +151,7 @@ export default function SharePage(): JSX.Element {
 
 
     const toggleRow = React.useCallback((id: string) => {
-        setExpandedRowIds((prev) => {
+        setExpandedRowIds((prev: any) => {
             const next = new Set(prev);
             if (next.has(id)) {
                 next.delete(id);
@@ -185,45 +185,62 @@ export default function SharePage(): JSX.Element {
                                 <span className="text-sm font-medium text-custom-blue/50">Step 1</span>
                                 <span className="rounded bg-white/10 px-2 py-0.5 text-xs text-white bg-custom-purple/50">Share</span>
                             </div>
-                            <p data-alt="step-desc" className="mt-2 text-sm text-white/70">Copy your invitation code and share it with friends.</p>
+                            <p data-alt="step-desc" className="mt-2 text-sm text-white/70">Copy your invitation link and share it with friends.</p>
                         </li>
                         <li data-alt="step" className="rounded-md border border-white/20 p-4">
                             <div data-alt="step-header" className="flex items-center justify-between">
                                 <span className="text-sm font-medium text-custom-blue/50">Step 2</span>
                                 <span className="rounded bg-white/10 px-2 py-0.5 text-xs text-white bg-custom-purple/50">Register</span>
                             </div>
-                            <p data-alt="step-desc" className="mt-2 text-sm text-white/70">Friends register and enter your invitation code.</p>
+                            <p data-alt="step-desc" className="mt-2 text-sm text-white/70">Friends click the link and register directly.</p>
                         </li>
                         <li data-alt="step" className="rounded-md border border-white/20 p-4">
                             <div data-alt="step-header" className="flex items-center justify-between">
                                 <span className="text-sm font-medium text-custom-blue/50">Step 3</span>
                                 <span className="rounded bg-white/10 px-2 py-0.5 text-xs text-white bg-custom-purple/50">Reward</span>
                             </div>
-                            <p data-alt="step-desc" className="mt-2 text-sm text-white/70">You both receive rewards after successful registration.</p>
+                            <p data-alt="step-desc" className="mt-2 text-sm text-white/70">You both receive rewards after your friend activates their account.</p>
                         </li>
                     </ol>
                 </section>
 
-                {/* Section 2: My Invitation Code */}
-                <section data-alt="my-invite-code" className="mb-8 rounded-lg border border-white/20 bg-black p-6 shadow-sm">
-                    <div data-alt="code-panel" className="mt-4 grid gap-6 sm:grid-cols-4">
-                        <div data-alt="code-box" className="sm:col-span-2">
-                            <h2 data-alt="section-title" className="text-lg font-medium text-white">My Invitation Code</h2>
+                {/* Section 2: My Invitation Link */}
+                <section data-alt="my-invite-link" className="mb-8 rounded-lg border border-white/20 bg-black p-6 shadow-sm">
+                    <div data-alt="link-panel" className="mt-4 grid gap-6 sm:grid-cols-4">
+                        <div data-alt="link-box" className="sm:col-span-2">
+                            <h2 data-alt="section-title" className="text-lg font-medium text-white">My Invitation Link</h2>
                             <div className="flex items-center gap-3">
-                                <div data-alt="code" className="rounded-md border border-white/20 bg-white/10 px-4 py-2 text-lg font-semibold tracking-wider text-white">
-                                    {inviteCode}
+                                <div data-alt="link-container" className="relative w-full max-w-2xl overflow-hidden rounded-md border border-white/20 bg-white/10">
+                                    <div 
+                                        data-alt="link-content" 
+                                        className="relative px-4 py-2 text-sm font-mono text-white/90 whitespace-nowrap overflow-hidden"
+                                        style={{
+                                            background: 'linear-gradient(90deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.7) 50%, rgba(255,255,255,0.3) 70%, rgba(255,255,255,0.1) 90%, rgba(255,255,255,0) 100%)',
+                                            WebkitBackgroundClip: 'text',
+                                            backgroundClip: 'text',
+                                            maskImage: 'linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 70%, rgba(0,0,0,0.5) 85%, rgba(0,0,0,0) 100%)',
+                                            WebkitMaskImage: 'linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 70%, rgba(0,0,0,0.5) 85%, rgba(0,0,0,0) 100%)'
+                                        }}
+                                    >
+                                        {inviteCode ? `${'https://www.movieflow.ai'}/signup?inviteCode=${inviteCode}` : '-'}
+                                    </div>
+                                    {/* 右侧渐变遮挡 */}
+                                    <div 
+                                        data-alt="right-mask" 
+                                        className="absolute right-0 top-0 h-full w-16 bg-gradient-to-l from-black/80 to-transparent pointer-events-none"
+                                    />
                                 </div>
                                 <button
                                     data-alt="copy-button"
-                                    className="inline-flex h-9 items-center justify-center rounded-full bg-gradient-to-r from-custom-blue to-custom-purple px-3 text-sm font-medium text-black/90 hover:opacity-90 active:translate-y-px"
+                                    className="inline-flex h-9 items-center justify-center rounded-full bg-gradient-to-r from-custom-blue to-custom-purple px-3 text-sm font-medium text-black/90 hover:opacity-90 active:translate-y-px flex-shrink-0"
                                     onClick={handleCopy}
                                     type="button"
-                                    aria-label="Copy invitation code"
+                                    aria-label="Copy invitation link"
                                 >
                                     {copyState === 'copied' ? 'Copied' : copyState === 'error' ? 'Failed' : 'Copy'}
                                 </button>
                             </div>
-                            <p data-alt="hint" className="mt-2 text-xs text-white/60">Share this code. Your friends can enter it during registration.</p>
+                            <p data-alt="hint" className="mt-2 text-xs text-white/60">Share this link. Your friends can register directly through it.</p>
                         </div>
                         <div data-alt="total-credits" className="flex flex-col items-start justify-center rounded-md border border-white/20 bg-white/5 p-4">
                             <span className="text-sm text-white/70">Total Credits</span>
@@ -233,7 +250,7 @@ export default function SharePage(): JSX.Element {
                         <div data-alt="invited-count" className="flex flex-col items-start justify-center rounded-md border border-white/20 bg-white/5 p-4">
                             <span className="text-sm text-white/70">Invited Friends</span>
                             <span className="mt-1 text-2xl font-semibold text-transparent bg-clip-text bg-gradient-to-r from-custom-blue to-custom-purple">{invitedCount}</span>
-                            <span className="mt-2 text-xs text-white/60">Points detail will be available soon.</span>
+                            <span className="mt-2 text-xs text-white/60">Point details will be available soon.</span>
                         </div>
                     </div>
                 </section>
@@ -245,9 +262,9 @@ export default function SharePage(): JSX.Element {
                         <div data-alt="pagination" className="flex items-center gap-2">
                             <button
                                 data-alt="prev-page"
-                                className="inline-flex h-8 items-center justify-center rounded border border-gray-300 bg-white px-2 text-sm text-gray-700 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50"
+                                className="inline-flex h-6 items-center justify-center rounded border border-gray-300 bg-white px-2 text-sm text-gray-700 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50"
                                 type="button"
-                                onClick={() => setPageIndex((p) => Math.max(0, p - 1))}
+                                onClick={() => setPageIndex((p: number) => Math.max(0, p - 1))}
                                 disabled={!pagination.has_prev}
                                 aria-label="Previous page"
                             >
@@ -258,9 +275,9 @@ export default function SharePage(): JSX.Element {
                             </span>
                             <button
                                 data-alt="next-page"
-                                className="inline-flex h-8 items-center justify-center rounded border border-gray-300 bg-white px-2 text-sm text-gray-700 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50"
+                                className="inline-flex h-6 items-center justify-center rounded border border-gray-300 bg-white px-2 text-sm text-gray-700 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50"
                                 type="button"
-                                onClick={() => setPageIndex((p) => Math.min(totalPages - 1, p + 1))}
+                                onClick={() => setPageIndex((p: number) => Math.min(totalPages - 1, p + 1))}
                                 disabled={!pagination.has_next}
                                 aria-label="Next page"
                             >
@@ -279,7 +296,7 @@ export default function SharePage(): JSX.Element {
                                 </tr>
                             </thead>
                             <tbody data-alt="table-body" className="divide-y divide-white/10 bg-black">
-                                {pagedRecords.map((r) => {
+                                {pagedRecords.map((r: any) => {
                                     const inviteRewardDisplay = r.reward_status === 1 ? r.activation_credits : 0;
                                     const payRewardDisplay = r.first_payment_credits;
                                     const totalReward = inviteRewardDisplay + payRewardDisplay;
@@ -321,7 +338,7 @@ export default function SharePage(): JSX.Element {
                                                                     </tr>
                                                                     <tr>
                                                                         <td className="px-2 py-2">{payRewardDisplay ? payRewardDisplay : 'Unpaid'}</td>
-                                                                        <td className="px-2 py-2">First Pay Reward</td>
+                                                                        <td className="px-2 py-2">First Payment Reward</td>
                                                                     </tr>
                                                                 </tbody>
                                                             </table>