'界面功能优化'

This commit is contained in:
eric
2026-03-13 21:45:12 -05:00
parent 04995f91dd
commit df12c7af4a
11 changed files with 135 additions and 35 deletions

View File

@@ -1,13 +1,14 @@
"use client";
import { useState, useEffect } from "react";
import Link from "next/link";
import { isPaid } from "../lib/payment";
import { InstantQaVipModal } from "@/app/components/InstantQaVipModal";
const CHAT_URL = "https://chatwoot.hackrobot.cn/livechat?user_id=hackrobot";
export function ChatFloatButton() {
const [paid, setPaid] = useState(false);
const [modalOpen, setModalOpen] = useState(false);
useEffect(() => {
setPaid(isPaid());
@@ -39,16 +40,20 @@ export function ChatFloatButton() {
}
return (
<Link
href="/"
className={`${baseClass} ${lockedClass}`}
style={{ animationDelay: "0.5s", animationFillMode: "both" }}
aria-label="即时问答开通VIP解锁"
title="开通VIP解锁即时问答"
>
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<path d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
</svg>
</Link>
<>
<button
type="button"
onClick={() => setModalOpen(true)}
className={`${baseClass} ${lockedClass}`}
style={{ animationDelay: "0.5s", animationFillMode: "both" }}
aria-label="即时问答开通VIP解锁"
title="即时问答"
>
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<path d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
</svg>
</button>
<InstantQaVipModal open={modalOpen} onClose={() => setModalOpen(false)} />
</>
);
}

View File

@@ -4,11 +4,13 @@ import { useState, useEffect } from "react";
import Link from "next/link";
import { SITE_CONFIG } from "../config/course";
import { isPaid } from "../lib/payment";
import { InstantQaVipModal } from "@/app/components/InstantQaVipModal";
const CHAT_URL = "https://chatwoot.hackrobot.cn/livechat?user_id=hackrobot";
export function Footer() {
const [paid, setPaid] = useState(false);
const [modalOpen, setModalOpen] = useState(false);
useEffect(() => {
setPaid(isPaid());
@@ -40,22 +42,23 @@ export function Footer() {
</a>
) : (
<Link
href="/"
<button
type="button"
onClick={() => setModalOpen(true)}
className="inline-flex items-center gap-1.5 rounded-full bg-[var(--accent)]/15 px-4 py-2 text-sm font-medium text-[var(--accent)] transition hover:bg-[var(--accent)]/25 hover:text-[var(--accent)]"
title="开通VIP解锁即时问答"
>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<path d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
</svg>
</Link>
</button>
)}
</div>
<div className="text-center text-sm text-[var(--muted-foreground)]">
{SITE_CONFIG.footer}
</div>
</div>
<InstantQaVipModal open={modalOpen} onClose={() => setModalOpen(false)} />
</footer>
);
}

View File

@@ -6,9 +6,11 @@ import { SITE_CONFIG } from "../config/course";
import { isPaid } from "../lib/payment";
import { triggerPay } from "@/app/lib/triggerPay";
import { ThemeToggle } from "@/app/components/ThemeToggle";
import { InstantQaVipModal } from "@/app/components/InstantQaVipModal";
export function Header() {
const [paid, setPaid] = useState(false);
const [qaModalOpen, setQaModalOpen] = useState(false);
useEffect(() => {
setPaid(isPaid());
const onPayUpdate = () => setPaid(isPaid());
@@ -17,6 +19,7 @@ export function Header() {
}, []);
return (
<>
<header className="animate__animated animate__fadeInDown fixed left-0 right-0 top-0 z-50 border-b border-[var(--border)] bg-[var(--background)]/90 backdrop-blur-xl" style={{ animationFillMode: "both" }}>
<div className="mx-auto flex h-12 max-w-6xl items-center justify-between gap-2 px-3 sm:h-14 sm:gap-4 sm:px-4 md:h-16 md:px-6">
<Link href="/cloudphone" className="min-w-0 truncate text-sm font-medium sm:text-base md:text-xl">
@@ -37,16 +40,16 @@ export function Header() {
</a>
) : (
<Link
href="/"
<button
type="button"
onClick={() => setQaModalOpen(true)}
className="hidden items-center gap-1.5 rounded-full border border-[var(--accent)]/40 bg-[var(--accent)]/10 px-3 py-1.5 text-xs font-medium text-[var(--accent)] transition hover:bg-[var(--accent)]/20 sm:inline-flex sm:px-4 sm:py-2 sm:text-sm"
title="开通VIP解锁即时问答"
>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<path d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
</svg>
</Link>
</button>
)}
<Link href="/" className="text-sm text-[var(--muted-foreground)] hover:text-[var(--foreground)]">
@@ -92,5 +95,7 @@ export function Header() {
</div>
</div>
</header>
<InstantQaVipModal open={qaModalOpen} onClose={() => setQaModalOpen(false)} />
</>
);
}

View File

@@ -78,7 +78,7 @@ export function CurriculumSection() {
{isOpen && (
<ul className="border-t border-[var(--border)]">
{c.lessons.map((l) => {
const free = l.moduleIndex === 0 && l.lessonIndex < 2;
const free = false; /* 暂时全部加锁 */
const unlocked = canWatchLesson(l.moduleIndex, l.lessonIndex);
const key = `${l.moduleIndex}-${l.lessonIndex}`;
const bookmarked = isBookmarked(l.moduleIndex, l.lessonIndex);

View File

@@ -24,7 +24,7 @@ export default function LessonPage() {
const lesson = getLesson(moduleIndex, lessonIndex);
const unlocked = canWatchLesson(moduleIndex, lessonIndex);
const isFreeTrial = moduleIndex === 0 && lessonIndex < 2;
const isFreeTrial = false; /* 暂时全部加锁,仅 VIP 可看 */
const [completed, setCompleted] = useState(() => getCompletedLessons().size);
const { prev: prevLesson, next: nextLesson } = getPrevNextLesson(
CURRICULUM_CONFIG.modules,

View File

@@ -10,9 +10,8 @@ export function isPaid(): boolean {
return localStorage.getItem("paidType") === "vip";
}
/** 前 2 节试看,无需支付 */
export function isFreeTrial(moduleIndex: number, lessonIndex: number): boolean {
if (moduleIndex === 0 && lessonIndex < 2) return true;
/** 暂时全部加锁,仅 VIP 可看(原前 2 节试看已关闭) */
export function isFreeTrial(_moduleIndex: number, _lessonIndex: number): boolean {
return false;
}