diff --git a/.gitignore b/.gitignore index d028be8..5422b5a 100644 --- a/.gitignore +++ b/.gitignore @@ -26,6 +26,7 @@ data/_compare_* data/notegen.db data/notegen.db-wal data/notegen.db-shm +data/redis/ # DB 备份（e2e/迁移留存），同样含 bcrypt 哈希，严禁入库 data/*.e2ebak data/user_notes/ diff --git a/data/redis/appendonlydir/appendonly.aof.1.base.rdb b/data/redis/appendonlydir/appendonly.aof.1.base.rdb deleted file mode 100644 index 2dc131e..0000000 Binary files a/data/redis/appendonlydir/appendonly.aof.1.base.rdb and /dev/null differ diff --git a/data/redis/appendonlydir/appendonly.aof.1.incr.aof b/data/redis/appendonlydir/appendonly.aof.1.incr.aof deleted file mode 100644 index e2bcbdd..0000000 Binary files a/data/redis/appendonlydir/appendonly.aof.1.incr.aof and /dev/null differ diff --git a/data/redis/appendonlydir/appendonly.aof.manifest b/data/redis/appendonlydir/appendonly.aof.manifest deleted file mode 100644 index 7f8bb72..0000000 --- a/data/redis/appendonlydir/appendonly.aof.manifest +++ /dev/null @@ -1,2 +0,0 @@ -file appendonly.aof.1.base.rdb seq 1 type b -file appendonly.aof.1.incr.aof seq 1 type i diff --git a/data/redis/dump.rdb b/data/redis/dump.rdb deleted file mode 100644 index c4e3a90..0000000 Binary files a/data/redis/dump.rdb and /dev/null differ diff --git a/docs/frontend-redesign.md b/docs/frontend-redesign.md index 362c067..9741671 100644 --- a/docs/frontend-redesign.md +++ b/docs/frontend-redesign.md @@ -94,11 +94,64 @@ **P2 · 打磨** 进行中 - [x] 加载骨架和错误态已收敛到 `WorkspaceSkeleton` / `WorkspaceError` - [x] 移动端左栏抽屉已实现 +- [x] 公开导航不再暴露 `/mm-ablation` 内部实验页入口 +- [x] 移动端 `ChatPanel` 回到内容流，避免 sticky 遮挡正文 - [ ] 浏览器 smoke：视频播放、seek、分享、导出、QA 轮询、书签同步 - [ ] a11y：三栏 landmark、章节列表 `aria-current`、Lighthouse a11y ≥ 90 - [ ] 删除确认无引用的旧视觉组件和 `AskBar` - 验收：`npx tsc --noEmit` 通过；浏览器 smoke 记录写入 `docs/memory/` +## 4.1 2026-06-25 二次升级计划：电影感首页 + 品牌系统 + 沉浸式登录 + +本轮升级不推翻已经完成的 NotebookLM 式工作台，而是在“入口、品牌、登录注册、关键转场”上增加记忆点。原则是：工作台继续克制高效，品牌表达集中在首页和认证流，避免动效干扰阅读、输入和视频学习。 + +### A. 首页：电影感滚动入口 + +- 首页采用电影感首屏：深色/纸面双色基调、大标题、低速镜头感位移、产品片段分层进入。（已完成首版） +- 滚动节奏参考已确认的视频方向，但不复制房地产内容；改成“导入视频 → 时间线解析 → 笔记生成 → 可追问”的学习叙事。（已完成首版） +- 首页允许使用更明显的动效：纸页展开、时间线滑入、播放指针定位、章节卡片错位进入。 +- 首页 CTA 分清两个动作：`开始使用` 进入登录/笔记本库，`查看示例` 进入公开演示或示例笔记。 +- 移动端不做复杂 scroll takeover，改成一屏一段的线性叙事，保留核心品牌转场。 +- `prefers-reduced-motion: reduce` 下关闭镜头位移和连续动画，只保留静态层级与必要状态变化。 + +### B. Logo：折叠笔记页 + 时间播放指针 + +- Logo 采用“折叠笔记页 + 时间播放指针”的组合，形成简洁的 `N`。 +- 输出三档：完整标志、图形标志、favicon，分别用于导航栏、小尺寸图标和品牌展示。 +- 静态状态保持单色、专业、清晰，保证在导航栏和深浅主题下可读。 +- 动态状态只用于首页和关键转场：纸页展开、时间线滑入、播放指针定位，形成品牌记忆点。 +- 工作台内不高频播放 Logo 动效，避免分散注意力。 + +### C. 登录 / 注册：独立沉浸式认证界面 + +- 登录/注册页不使用普通全站导航，改成独立沉浸式界面。（已完成首版） +- 左侧构建品牌角色系统：由纸页、书签、时间戳组成，角色不是拟真人卡通，而是“笔记人格化”的视觉表达。（已完成首版） +- 邮箱输入聚焦时，角色视线跟随输入位置。（已完成） +- 密码输入时，角色遮住眼睛；显示密码时轻微张开一条缝。（已完成） +- 校验失败时，用轻微动作辅助提示，不使用夸张晃动。（已完成） +- 登录成功时，以轻碰、点头或纸页合拢完成庆祝反馈。（已完成组件状态） +- 背景使用书签和时间线结合的柔性飘带，鼠标经过时产生轻微布料波动，作为品牌化空间元素。（已完成首版） +- 注册页保留更亲切的互动反馈，强调“创建第一个笔记空间”的引导感；登录页更简洁、快速、可信。 +- 移动端保留一个主角色和核心密码反馈，取消复杂悬停交互。 +- 减少动态效果模式下，Logo、角色、飘带全部回落为静态状态。 + +### D. 工作台：延续克制优化 + +- 工作台不做电影感 scroll takeover，保持三栏效率模型。 +- 修复移动端内容优先级：视频不能长期挤占首屏，笔记内容和提问入口要更早出现。 +- 问答入口避免遮挡正文，移动端改成稳定的底部输入或内容流内卡片。 +- 章节抽屉补齐焦点管理、`aria-modal` 语义和关闭后的焦点恢复。 +- 公开导航不暴露内部实验页，`/mm-ablation` 保留为直接访问或开发入口。（已完成） +- 继续清理 lint、无效 eslint-disable、废弃组件引用和图片加载 warning。 + +### E. 分批落地顺序 + +1. **基础修复批次**：计划文档、公开导航收敛、lint 清理、可访问性低风险修复。（已完成首批） +2. **品牌批次**：完善 Logo 三档资产、favicon、导航栏品牌使用规范。（已有 Logo 组件，favicon 待单独验收） +3. **认证批次**：重做登录/注册独立页面，先实现静态布局，再加入角色状态机和密码互动。（已完成首版） +4. **首页批次**：电影感首页和滚动叙事，加入 reduced-motion 回退。（已完成首版） +5. **工作台批次**：移动端排序、问答入口、章节抽屉焦点和浏览器 smoke。 + ## 5. QA 接口（已落地，2026-06-11） GPU 串行约束下走异步队列（RQ "qa" 高优队列，插队在排队 pipeline 任务前）： diff --git a/web/app/__tests__/landing-model.test.ts b/web/app/__tests__/landing-model.test.ts new file mode 100644 index 0000000..7f64e6e --- /dev/null +++ b/web/app/__tests__/landing-model.test.ts @@ -0,0 +1,18 @@ +import { describe, expect, it } from "vitest"; + +import { CINEMATIC_BEATS } from "../landing-model"; + +describe("landing cinematic model", () => { + it("tells the product story from import to grounded replay", () => { + expect(CINEMATIC_BEATS.map((beat) => beat.id)).toEqual([ + "import", + "timeline", + "notes", + "ask", + ]); + }); + + it("keeps every beat tied to a visible time cue", () => { + expect(CINEMATIC_BEATS.every((beat) => beat.timecode && beat.title && beat.copy)).toBe(true); + }); +}); diff --git a/web/app/bookmarks/page.tsx b/web/app/bookmarks/page.tsx index cc1db76..c0d75cd 100644 --- a/web/app/bookmarks/page.tsx +++ b/web/app/bookmarks/page.tsx @@ -1,5 +1,6 @@ "use client"; import { useMemo, useState } from "react"; +import Image from "next/image"; import Link from "next/link"; import { Bookmark as BookmarkIcon, Play, X, Layers, BookOpen, Settings2, Trash2, Plus, @@ -235,9 +236,13 @@ export default function BookmarksPage() { {b.kind === "chunk" && b.keyframeRel ? ( - + ) : ( + + + diff --git a/web/app/landing-model.ts b/web/app/landing-model.ts new file mode 100644 index 0000000..a85379c --- /dev/null +++ b/web/app/landing-model.ts @@ -0,0 +1,26 @@ +export const CINEMATIC_BEATS = [ + { + id: "import", + timecode: "00:00", + title: "镜头一：导入视频", + copy: "把课程、讲座或教程拖入 NoteGen，系统先建立来源和时间轴。", + }, + { + id: "timeline", + timecode: "03:11", + title: "镜头二：时间线拆分", + copy: "长视频被切成可回看的章节，每个片段都保留原始时间点。", + }, + { + id: "notes", + timecode: "08:42", + title: "镜头三：纸页展开", + copy: "章节、重点和术语折叠成一页可复习的结构化笔记。", + }, + { + id: "ask", + timecode: "12:06", + title: "镜头四：带引用追问", + copy: "围绕视频继续提问，答案回到对应片段，而不是脱离原始内容。", + }, +] as const; diff --git a/web/app/login/page.tsx b/web/app/login/page.tsx index 5e32848..0dc180a 100644 --- a/web/app/login/page.tsx +++ b/web/app/login/page.tsx @@ -3,11 +3,11 @@ import { Suspense, useState } from "react"; import Link from "next/link"; import { useRouter, useSearchParams } from "next/navigation"; -import { ArrowRight, CheckCircle2, LogIn } from "lucide-react"; +import { ArrowRight, Eye, EyeOff, LogIn } from "lucide-react"; import { BrandMark } from "@/components/brand/BrandMark"; -import NavBar from "@/components/NavBar"; -import { Button, Card, Chip, Input } from "@/components/ui"; +import { AccountCompanion, type AccountCompanionState } from "@/components/auth/AccountCompanion"; +import { Button, IconButton, Input } from "@/components/ui"; import { useAuth } from "@/components/AuthContext"; import { ApiError } from "@/lib/api"; @@ -18,6 +18,17 @@ function getSafeNextPath(value: string | null) { return value; } +type AuthFocus = "email" | "password" | "idle"; +type AuthStatus = "idle" | "error" | "success"; + +function companionState(focus: AuthFocus, passwordVisible: boolean, status: AuthStatus): AccountCompanionState { + if (status === "success") return "success"; + if (status === "error") return "error"; + if (focus === "email") return "emailFocus"; + if (focus === "password") return passwordVisible ? "passwordReveal" : "passwordFocus"; + return "idle"; +} + function LoginInner() { const { login } = useAuth(); const router = useRouter(); @@ -28,15 +39,20 @@ function LoginInner() { const [err, setErr] = useState(null); const [unverified, setUnverified] = useState(false); const [busy, setBusy] = useState(false); + const [focus, setFocus] = useState("idle"); + const [showPassword, setShowPassword] = useState(false); + const [authStatus, setAuthStatus] = useState("idle"); async function submit(e: React.FormEvent) { e.preventDefault(); setErr(null); setUnverified(false); + setAuthStatus("idle"); setBusy(true); try { await login(email.trim(), password); + setAuthStatus("success"); router.push(next); } catch (e) { if (e instanceof ApiError && e.status === 403) { @@ -45,45 +61,36 @@ function LoginInner() { } else { setErr(e instanceof ApiError ? e.message : "登录失败，请确认后端服务是否已启动。"); } + setAuthStatus("error"); setBusy(false); } } const errorId = err ? "login-error" : undefined; + const stageStatus = err ? "error" : authStatus; return ( -
- -
-
- - - NoteGen Account - -

- 回到你的 -
- 视频笔记工作台 -

-

- 登录后可以继续生成私有笔记、查看任务进度，并把每个视频沉淀成自己的复习资料。 -

-
- {["私有笔记库", "提交历史与任务诊断", "支持链接和本地视频"].map((item) => ( -
-
- ))} -
-
+
+
+
+ + + + + 创建账号 + +
+ +
+ - +
-

+

NoteGen Account

+

登录 -

-

进入 NoteGen 工作台。

+ +

回到视频笔记工作台，继续整理时间线、书签和问答。

@@ -98,7 +105,13 @@ function LoginInner() { autoComplete="email" placeholder="you@example.com" value={email} - onChange={(e) => setEmail(e.target.value)} + onChange={(e) => { + setEmail(e.target.value); + setFocus("email"); + }} + onClick={() => setFocus("email")} + onFocus={() => setFocus("email")} + onBlur={() => setFocus("idle")} aria-describedby={errorId} invalid={Boolean(err)} /> @@ -107,18 +120,39 @@ function LoginInner() { - setPassword(e.target.value)} - aria-describedby={errorId} - invalid={Boolean(err)} - /> +
+ { + setPassword(e.target.value); + setFocus("password"); + }} + onClick={() => setFocus("password")} + onFocus={() => setFocus("password")} + onBlur={() => setFocus("idle")} + aria-describedby={errorId} + invalid={Boolean(err)} + className="pr-11" + /> + { + setFocus("password"); + setShowPassword((v) => !v); + }} + aria-label={showPassword ? "隐藏密码" : "显示密码"} + className="absolute right-2 top-1/2 h-8 w-8 -translate-y-1/2 rounded-full" + size="sm" + > + {showPassword ? +
{err ? ( - +
); diff --git a/web/app/notebooks/__tests__/access.test.ts b/web/app/notebooks/__tests__/access.test.ts new file mode 100644 index 0000000..24e0405 --- /dev/null +++ b/web/app/notebooks/__tests__/access.test.ts @@ -0,0 +1,35 @@ +import { describe, expect, it } from "vitest"; + +import { + canCreateNotebook, + getNotebookHeroCopy, + shouldAllowPublicCatalog, + shouldShowProgressPanel, +} from "../filter"; + +describe("notebook access helpers", () => { + it("allows the public catalog without a signed-in user", () => { + expect(shouldAllowPublicCatalog("public")).toBe(true); + expect(shouldAllowPublicCatalog("mine")).toBe(false); + }); + + it("hides notebook creation for guests", () => { + expect(canCreateNotebook(null)).toBe(false); + expect(canCreateNotebook({ id: "u1" })).toBe(true); + }); + + it("uses public-example copy for guest catalog views", () => { + expect(getNotebookHeroCopy("public", null)).toEqual({ + eyebrow: "Public Examples", + title: "公开示例", + description: "先浏览 NoteGen 生成的视频笔记样例；登录后可以创建自己的私有笔记本。", + cta: "登录后创建", + }); + }); + + it("does not show personal progress to guest public viewers", () => { + expect(shouldShowProgressPanel("public", null)).toBe(false); + expect(shouldShowProgressPanel("public", { id: "u1" })).toBe(true); + expect(shouldShowProgressPanel("mine", null)).toBe(true); + }); +}); diff --git a/web/app/notebooks/__tests__/filter.test.ts b/web/app/notebooks/__tests__/filter.test.ts new file mode 100644 index 0000000..8ea6687 --- /dev/null +++ b/web/app/notebooks/__tests__/filter.test.ts @@ -0,0 +1,25 @@ +import { describe, expect, it } from "vitest"; + +import { getVisibleNotebookFilters, parseNotebookFilter } from "../filter"; + +describe("parseNotebookFilter", () => { + it("opens public examples when requested from the landing page", () => { + expect(parseNotebookFilter("public")).toBe("public"); + }); + + it("falls back to personal notes for missing or unknown values", () => { + expect(parseNotebookFilter(null)).toBe("mine"); + expect(parseNotebookFilter("debug")).toBe("mine"); + }); + + it("opens public examples by default for guests", () => { + expect(parseNotebookFilter(null, null)).toBe("public"); + expect(parseNotebookFilter("mine", null)).toBe("public"); + expect(parseNotebookFilter("all", null)).toBe("public"); + }); + + it("only exposes public examples filter to guests", () => { + expect(getVisibleNotebookFilters(null).map((item) => item.key)).toEqual(["public"]); + expect(getVisibleNotebookFilters({ id: "u1" }).map((item) => item.key)).toEqual(["mine", "all", "public"]); + }); +}); diff --git a/web/app/notebooks/filter.ts b/web/app/notebooks/filter.ts new file mode 100644 index 0000000..870dfdc --- /dev/null +++ b/web/app/notebooks/filter.ts @@ -0,0 +1,48 @@ +export type NotebookFilter = "mine" | "all" | "public"; + +export const NOTEBOOK_FILTERS: { key: NotebookFilter; label: string }[] = [ + { key: "mine", label: "我的笔记" }, + { key: "all", label: "全部" }, + { key: "public", label: "公开示例" }, +]; + +export function parseNotebookFilter(value: string | null, user?: { id: string } | null): NotebookFilter { + if (user === null) return "public"; + if (value === "all" || value === "public") return value; + return "mine"; +} + +export function getVisibleNotebookFilters(user: { id: string } | null) { + if (!user) return NOTEBOOK_FILTERS.filter((item) => item.key === "public"); + return NOTEBOOK_FILTERS; +} + +export function shouldAllowPublicCatalog(filter: NotebookFilter) { + return filter === "public"; +} + +export function canCreateNotebook(user: { id: string } | null) { + return Boolean(user); +} + +export function getNotebookHeroCopy(filter: NotebookFilter, user: { id: string } | null) { + if (filter === "public" && !user) { + return { + eyebrow: "Public Examples", + title: "公开示例", + description: "先浏览 NoteGen 生成的视频笔记样例；登录后可以创建自己的私有笔记本。", + cta: "登录后创建", + }; + } + + return { + eyebrow: "Notebook Library", + title: "我的笔记", + description: "优先查看自己的视频笔记、最近生成进度和可复习材料；公开示例保留为参考内容。", + cta: "新建笔记本", + }; +} + +export function shouldShowProgressPanel(filter: NotebookFilter, user: { id: string } | null) { + return !(filter === "public" && !user); +} diff --git a/web/app/notebooks/page.tsx b/web/app/notebooks/page.tsx index 4389dd8..ccfbadf 100644 --- a/web/app/notebooks/page.tsx +++ b/web/app/notebooks/page.tsx @@ -1,7 +1,8 @@ "use client"; -import { useEffect, useMemo, useState } from "react"; +import { Suspense, useEffect, useMemo, useState } from "react"; import Link from "next/link"; +import { useSearchParams } from "next/navigation"; import { AnimatePresence, motion, useReducedMotion } from "framer-motion"; import { BookOpen, @@ -25,12 +26,20 @@ import type { LucideIcon } from "lucide-react"; import CreateNotePanel from "@/components/CreateNotePanel"; import NavBar from "@/components/NavBar"; import RequireAuth from "@/components/RequireAuth"; +import { useAuth } from "@/components/AuthContext"; import { Button, Card, Chip, IconButton, Input } from "@/components/ui"; import { deleteNote, fetchHistory, fetchMyNotes } from "@/lib/api"; import { fetchCatalog, formatDuration } from "@/lib/notes"; import type { CatalogItem, HistoryItem, NoteView } from "@/lib/types"; - -type Filter = "mine" | "all" | "public"; +import { + canCreateNotebook, + getVisibleNotebookFilters, + getNotebookHeroCopy, + parseNotebookFilter, + shouldAllowPublicCatalog, + shouldShowProgressPanel, + type NotebookFilter as Filter, +} from "./filter"; interface CardItem { id: string; @@ -44,12 +53,6 @@ interface CardItem { recentAt?: number; } -const FILTERS: { key: Filter; label: string }[] = [ - { key: "mine", label: "我的笔记" }, - { key: "all", label: "全部" }, - { key: "public", label: "公开示例" }, -]; - const DOMAIN_STYLE: Record = { 编程教学: { icon: Code2 }, 考研专业课: { icon: GraduationCap }, @@ -199,30 +202,40 @@ function EmptyState({ ); } -function NotebooksInner() { +function NotebooksInner({ initialFilter }: { initialFilter: Filter }) { + const { loading: authLoading, user } = useAuth(); const [pub, setPub] = useState(null); const [mine, setMine] = useState(null); const [history, setHistory] = useState(null); - const [filter, setFilter] = useState("mine"); + const [filter, setFilter] = useState(initialFilter); const [query, setQuery] = useState(""); const [createOpen, setCreateOpen] = useState(false); const [confirmDelete, setConfirmDelete] = useState(null); const [delId, setDelId] = useState(null); const [deleteError, setDeleteError] = useState(null); + const canCreate = canCreateNotebook(user); + const activeFilter = !authLoading && !user ? "public" : filter; + const visibleFilters = getVisibleNotebookFilters(user); + const guestPublicCatalog = !authLoading && shouldAllowPublicCatalog(activeFilter) && !user; + const heroCopy = getNotebookHeroCopy(activeFilter, user); + const showProgressPanel = shouldShowProgressPanel(activeFilter, user); useEffect(() => { + if (authLoading) return; let alive = true; fetchCatalog() .then((d) => { if (alive) setPub(d); }) .catch(() => { if (alive) setPub([]); }); - fetchMyNotes() - .then((d) => { if (alive) setMine(d); }) - .catch(() => { if (alive) setMine([]); }); - fetchHistory() - .then((d) => { if (alive) setHistory(d); }) - .catch(() => { if (alive) setHistory([]); }); + if (!guestPublicCatalog) { + fetchMyNotes() + .then((d) => { if (alive) setMine(d); }) + .catch(() => { if (alive) setMine([]); }); + fetchHistory() + .then((d) => { if (alive) setHistory(d); }) + .catch(() => { if (alive) setHistory([]); }); + } return () => { alive = false; }; - }, []); + }, [authLoading, guestPublicCatalog]); useEffect(() => { if (!createOpen && !confirmDelete) return; @@ -236,7 +249,7 @@ function NotebooksInner() { return () => window.removeEventListener("keydown", onKey); }, [createOpen, confirmDelete]); - const loading = pub === null || mine === null || history === null; + const loading = authLoading || (guestPublicCatalog ? pub === null : pub === null || mine === null || history === null); const recentByNote = useMemo(() => { const map = new Map(); @@ -249,7 +262,7 @@ function NotebooksInner() { }, [history]); const items: CardItem[] = useMemo(() => { - const mineCards: CardItem[] = (mine ?? []).map((n) => ({ + const mineCards: CardItem[] = (user ? (mine ?? []) : []).map((n) => ({ id: n.id, title: n.title, domain: n.domain, @@ -274,14 +287,14 @@ function NotebooksInner() { mine: false, })); - const source = filter === "mine" ? mineCards : filter === "public" ? pubCards : [...mineCards, ...pubCards]; + const source = activeFilter === "mine" ? mineCards : activeFilter === "public" ? pubCards : [...mineCards, ...pubCards]; return source .filter((item) => matchesSearch(item, query)) .sort((a, b) => { if (a.mine !== b.mine) return a.mine ? -1 : 1; return (b.recentAt ?? 0) - (a.recentAt ?? 0); }); - }, [filter, mine, pub, query, recentByNote]); + }, [activeFilter, mine, pub, query, recentByNote, user]); const latestJob = useMemo(() => { return [...(history ?? [])].sort((a, b) => b.updated_at - a.updated_at)[0] ?? null; @@ -303,78 +316,86 @@ function NotebooksInner() { return (
- +
-
+

- 我的笔记 + {heroCopy.title}

- 优先查看自己的视频笔记、最近生成进度和可复习材料；公开示例保留为参考内容。 + {heroCopy.description}

- + {canCreate ? ( + + ) : ( + + {heroCopy.cta} + + )}
- -

最近进度

- {loading ? ( -
-
-
-
- ) : latestJob ? ( -
-
- - {jobStatusLabel(latestJob.status)} - - - {formatRelativeTime(latestJob.updated_at)} - + {showProgressPanel ? ( + +

最近进度

+ {loading ? ( +
+
+
-

{latestJob.source}

-
-
+ ) : latestJob ? ( +
+
+ + {jobStatusLabel(latestJob.status)} + + + {formatRelativeTime(latestJob.updated_at)} + +
+

{latestJob.source}

+
+
+
+ + 查看任务历史 +
- - 查看任务历史 - -
- ) : ( -

- 还没有生成任务。创建一本笔记后，这里会显示最近处理进度。 -

- )} - + ) : ( +

+ 还没有生成任务。创建一本笔记后，这里会显示最近处理进度。 +

+ )} + + ) : null}
- {FILTERS.map((f) => ( + {visibleFilters.map((f) => (
- + {canCreate ? ( + + ) : null} {loading ? Array.from({ length: 7 }).map((_, i) => ( @@ -435,7 +458,7 @@ function NotebooksInner() { ))} {!loading && items.length === 0 ? ( - setCreateOpen(true)} query={query} /> + setCreateOpen(true)} query={query} /> ) : null}
@@ -516,10 +539,30 @@ function NotebooksInner() { ); } -export default function NotebooksPage() { +function NotebooksRouteFallback() { return ( - - +
+
+

加载笔记库…

+
+ ); +} + +function NotebooksPageContent() { + const searchParams = useSearchParams(); + const initialFilter = parseNotebookFilter(searchParams.get("filter")); + + return ( + + ); } + +export default function NotebooksPage() { + return ( + }> + + + ); +} diff --git a/web/app/page.tsx b/web/app/page.tsx index ccf6975..e7635e9 100644 --- a/web/app/page.tsx +++ b/web/app/page.tsx @@ -6,6 +6,7 @@ import { ArrowRight, BookOpenCheck, Code2, + Film, GraduationCap, MessageCircleQuestion, Play, @@ -19,6 +20,7 @@ import type { ReactNode } from "react"; import { BrandMark } from "@/components/brand/BrandMark"; import { Card, Chip } from "@/components/ui"; import { useAuth } from "@/components/AuthContext"; +import { CINEMATIC_BEATS } from "./landing-model"; const PROCESS_STEPS = [ { @@ -234,6 +236,72 @@ function UseCaseCard({ item }: { item: (typeof USE_CASES)[number] }) { ); } +function CinematicStory() { + const reduceMotion = useReducedMotion(); + + return ( +
+
+
+
+
+
+ + +

+ 像剪一支预告片一样，把学习过程展开 +

+

+ 入口页负责建立记忆点：视频进入、时间线滑入、纸页展开、播放指针回到证据。工作台仍然保持安静和高效。 +

+
+
+
+ +
+
+ Import + Replay +
+
+
+ +
+
+
+ {CINEMATIC_BEATS.map((beat, index) => ( + + + + +

{beat.timecode}

+

{beat.title}

+

{beat.copy}

+ + ))} +
+
+
+
+
+ ); +} + export default function LandingPage() { const { user } = useAuth(); const primaryHref = user ? "/notebooks" : "/login?next=/notebooks"; @@ -267,7 +335,7 @@ export default function LandingPage() { {heroCtaLabel} - + 查看示例 @@ -277,6 +345,8 @@ export default function LandingPage() {
+ +
@@ -285,7 +355,7 @@ export default function LandingPage() { 从一段视频，到一套可以复习的笔记

- 首页只展示静态模拟流程，重点让用户理解视频、章节、笔记和问答之间的关系。 + 从章节定位到逐字稿，再从笔记跳回视频片段。NoteGen 把学习过程整理成一条可以反复回看的时间线。

diff --git a/web/app/register/page.tsx b/web/app/register/page.tsx index e0d367c..66bc66b 100644 --- a/web/app/register/page.tsx +++ b/web/app/register/page.tsx @@ -2,15 +2,26 @@ import { useState } from "react"; import Link from "next/link"; -import { ArrowRight, CheckCircle2, UserPlus } from "lucide-react"; +import { ArrowRight, CheckCircle2, Eye, EyeOff, UserPlus } from "lucide-react"; import { BrandMark } from "@/components/brand/BrandMark"; -import NavBar from "@/components/NavBar"; -import { Button, Card, Chip, Input } from "@/components/ui"; +import { AccountCompanion, type AccountCompanionState } from "@/components/auth/AccountCompanion"; +import { Button, IconButton, Input } from "@/components/ui"; import { useAuth } from "@/components/AuthContext"; import { apiRegister } from "@/lib/auth"; import { ApiError } from "@/lib/api"; +type AuthFocus = "email" | "password" | "idle"; +type AuthStatus = "idle" | "error" | "success"; + +function companionState(focus: AuthFocus, passwordVisible: boolean, status: AuthStatus): AccountCompanionState { + if (status === "success") return "success"; + if (status === "error") return "error"; + if (focus === "email") return "emailFocus"; + if (focus === "password") return passwordVisible ? "passwordReveal" : "passwordFocus"; + return "idle"; +} + export default function RegisterPage() { const { refresh } = useAuth(); const [email, setEmail] = useState(""); @@ -19,13 +30,18 @@ export default function RegisterPage() { const [err, setErr] = useState(null); const [done, setDone] = useState(null); const [busy, setBusy] = useState(false); + const [focus, setFocus] = useState("idle"); + const [showPassword, setShowPassword] = useState(false); + const [authStatus, setAuthStatus] = useState("idle"); async function submit(e: React.FormEvent) { e.preventDefault(); setErr(null); + setAuthStatus("idle"); if (password.length < 8) { setErr("密码至少需要 8 位。"); + setAuthStatus("error"); return; } @@ -33,36 +49,35 @@ export default function RegisterPage() { try { const r = await apiRegister(email.trim(), password, displayName.trim() || email.trim()); setDone(r.message); + setAuthStatus("success"); await refresh(); } catch (e) { setErr(e instanceof ApiError ? e.message : "注册失败，请确认后端服务是否已启动。"); + setAuthStatus("error"); } finally { setBusy(false); } } const errorId = err ? "register-error" : undefined; + const stageStatus = done ? "success" : err ? "error" : authStatus; return ( -
- -
-
- - - Private Workspace - -

- 为你的学习视频 -
- 建一个私有空间 -

-

- 注册后，每次提交的视频、生成的笔记和运行历史都会归到你的账号下，方便持续复习和追踪进度。 -

-
+
+
+
+ + + + + 已有账号 + +
+ +
+ - +
{done ? (
); diff --git a/web/components/ChatPanel.tsx b/web/components/ChatPanel.tsx index 0f38900..459f90b 100644 --- a/web/components/ChatPanel.tsx +++ b/web/components/ChatPanel.tsx @@ -7,6 +7,7 @@ import { useLang, pickByLang } from "./LangContext"; import { useAuth } from "./AuthContext"; import { postAsk, fetchQa, ApiError, type QaCitation, type QaHistoryItem } from "@/lib/api"; import { formatTime } from "@/lib/notes"; +import { Button, IconButton, Input } from "@/components/ui"; interface ChatMsg { role: "user" | "assistant"; @@ -205,17 +206,17 @@ export default function ChatPanel({ noteId, onSeek, chapters }: Props) { {msgs.length === 0 && !busy && suggestions.length > 0 && (
{suggestions.map(s => ( - + ))}
)} @@ -223,7 +224,7 @@ export default function ChatPanel({ noteId, onSeek, chapters }: Props) { {/* 输入行 */}
- setInput(e.target.value)} @@ -233,20 +234,21 @@ export default function ChatPanel({ noteId, onSeek, chapters }: Props) { placeholder={busy ? statusText : t("对这个视频提问，回答附时间戳引用…", "Ask about this video — answers cite timestamps…")} - className="min-w-0 flex-1 bg-transparent text-sm text-[var(--wf-text)] outline-none - placeholder:text-[var(--wf-text-tertiary)] disabled:opacity-60" + size="sm" + className="min-w-0 flex-1 border-0 bg-transparent px-0 focus-visible:outline-none disabled:opacity-60" /> - + +
); diff --git a/web/components/CreateNotePanel.tsx b/web/components/CreateNotePanel.tsx index d6eead6..45419a1 100644 --- a/web/components/CreateNotePanel.tsx +++ b/web/components/CreateNotePanel.tsx @@ -9,7 +9,6 @@ import { FileVideo, FolderUp, Link2, - Loader2, Lock, LockOpen, Search, @@ -25,6 +24,7 @@ import { type DownloadQuality, type ProbeResult, } from "@/lib/api"; +import { Button, IconButton, Input } from "@/components/ui"; type SubmitMode = "url" | "file"; @@ -172,7 +172,7 @@ export default function CreateNotePanel({ next = "/notebooks" }: { next?: string >
{!probed ? ( - + ) : ( - + )} ) : ( @@ -262,22 +252,25 @@ export default function CreateNotePanel({ next = "/notebooks" }: { next?: string {formatBytes(file.size)}
- +
); } diff --git a/web/components/TranscriptPanel.tsx b/web/components/TranscriptPanel.tsx index 4768a37..e093d29 100644 --- a/web/components/TranscriptPanel.tsx +++ b/web/components/TranscriptPanel.tsx @@ -80,7 +80,6 @@ export default function TranscriptPanel({ summary, currentTime, onSeek }: Props) ); }), - // eslint-disable-next-line react-hooks/exhaustive-deps [sentences, currentIdx, onSeek], ); diff --git a/web/components/VlogTimeline.tsx b/web/components/VlogTimeline.tsx index 70ef868..63626dc 100644 --- a/web/components/VlogTimeline.tsx +++ b/web/components/VlogTimeline.tsx @@ -1,4 +1,5 @@ "use client"; +import Image from "next/image"; import { motion } from "framer-motion"; import { Expand } from "lucide-react"; import type { Chunk } from "@/lib/types"; @@ -83,9 +84,13 @@ export default function VlogTimeline({ bg-[var(--bg-muted)] relative group/kf" title={lang === "en" ? "Open" : "查看大图"} > - + diff --git a/web/components/__tests__/NavBar.test.tsx b/web/components/__tests__/NavBar.test.tsx new file mode 100644 index 0000000..9285010 --- /dev/null +++ b/web/components/__tests__/NavBar.test.tsx @@ -0,0 +1,57 @@ +import { render, screen } from "@testing-library/react"; +import { describe, expect, it, vi } from "vitest"; + +import NavBar from "../NavBar"; + +const authState = vi.hoisted(() => ({ + user: null, + loading: false, + offline: false, +})); + +vi.mock("../AuthContext", () => ({ + useAuth: () => authState, +})); + +vi.mock("../LangContext", () => ({ + useLang: () => ({ lang: "zh" }), +})); + +vi.mock("@/lib/bookmarks", () => ({ + useBookmarksList: () => [], +})); + +vi.mock("../LangToggle", () => ({ + default: () => , +})); + +vi.mock("../ThemeToggle", () => ({ + default: () => , +})); + +vi.mock("../UserMenu", () => ({ + default: () => , +})); + +describe("NavBar", () => { + it("does not expose internal experiment routes in the public navigation", () => { + authState.offline = false; + render(); + + expect(screen.queryByRole("link", { name: /ablation/i })).not.toBeInTheDocument(); + }); + + it("can suppress the offline badge on public fallback pages", () => { + authState.offline = true; + render(); + + expect(screen.queryByText("服务离线")).not.toBeInTheDocument(); + }); + + it("shows the offline badge by default when auth status is unavailable", () => { + authState.offline = true; + render(); + + expect(screen.getByText("服务离线")).toBeInTheDocument(); + }); +}); diff --git a/web/components/__tests__/RequireAuth.test.tsx b/web/components/__tests__/RequireAuth.test.tsx new file mode 100644 index 0000000..7240c21 --- /dev/null +++ b/web/components/__tests__/RequireAuth.test.tsx @@ -0,0 +1,34 @@ +import { render, screen } from "@testing-library/react"; +import { describe, expect, it, vi } from "vitest"; + +import RequireAuth from "../RequireAuth"; + +const replace = vi.fn(); +const authState = { + user: null, + loading: false, + offline: true, + refresh: vi.fn(), +}; + +vi.mock("next/navigation", () => ({ + usePathname: () => "/notebooks", + useRouter: () => ({ replace }), +})); + +vi.mock("../AuthContext", () => ({ + useAuth: () => authState, +})); + +describe("RequireAuth", () => { + it("renders children for public routes even when auth status is offline", () => { + render( + +
Public examples
+ , + ); + + expect(screen.getByText("Public examples")).toBeInTheDocument(); + expect(replace).not.toHaveBeenCalled(); + }); +}); diff --git a/web/components/auth/AccountCompanion.tsx b/web/components/auth/AccountCompanion.tsx new file mode 100644 index 0000000..b939fd4 --- /dev/null +++ b/web/components/auth/AccountCompanion.tsx @@ -0,0 +1,143 @@ +"use client"; + +import { BrandMark } from "@/components/brand/BrandMark"; + +export type AccountCompanionState = + | "idle" + | "emailFocus" + | "passwordFocus" + | "passwordReveal" + | "error" + | "success"; + +interface AccountCompanionProps { + state: AccountCompanionState; + variant: "login" | "register"; +} + +function stateLabel(state: AccountCompanionState) { + if (state === "success") return "纸页角色把书签归档完成"; + if (state === "error") return "纸页角色停在错误时间戳旁"; + if (state === "passwordReveal") return "纸页角色从书签旁确认密码可见"; + if (state === "passwordFocus") return "纸页角色用书签遮住密码行"; + if (state === "emailFocus") return "纸页角色看向邮箱时间戳"; + return "纸页角色安静等待输入"; +} + +export function AccountCompanion({ state, variant }: AccountCompanionProps) { + const isRegister = variant === "register"; + const label = stateLabel(state); + + return ( +
+
+
+ +

+ {isRegister ? "Create first notebook" : "Back to your notebook"} +

+

+ {isRegister ? "给第一本视频笔记留一个位置" : "回到你的时间线和笔记页"} +

+

+ {isRegister + ? "创建账号后，视频、章节、提问和复习进度会收进同一个私有空间。" + : "登录后继续从视频时间点回到笔记、书签和问答记录。"} +

+
+ +
+
+ ); +} diff --git a/web/components/auth/__tests__/AccountCompanion.test.tsx b/web/components/auth/__tests__/AccountCompanion.test.tsx new file mode 100644 index 0000000..6712c0c --- /dev/null +++ b/web/components/auth/__tests__/AccountCompanion.test.tsx @@ -0,0 +1,26 @@ +import { cleanup, render, screen } from "@testing-library/react"; +import { afterEach, describe, expect, it } from "vitest"; + +import { AccountCompanion } from "../AccountCompanion"; + +afterEach(() => cleanup()); + +describe("AccountCompanion", () => { + it("maps password reveal to the reveal state", () => { + render(); + + expect(screen.getByTestId("account-companion")).toHaveAttribute("data-state", "passwordReveal"); + expect(screen.getAllByText("纸页角色从书签旁确认密码可见").length).toBeGreaterThan(0); + }); + + it("marks error and success states distinctly", () => { + const { rerender } = render(); + + expect(screen.getByTestId("account-companion")).toHaveAttribute("data-state", "error"); + + rerender(); + + expect(screen.getByTestId("account-companion")).toHaveAttribute("data-state", "success"); + expect(screen.getAllByText("纸页角色把书签归档完成").length).toBeGreaterThan(0); + }); +}); diff --git a/web/components/ui/IconButton.tsx b/web/components/ui/IconButton.tsx index e60ecf7..45ee985 100644 --- a/web/components/ui/IconButton.tsx +++ b/web/components/ui/IconButton.tsx @@ -6,7 +6,7 @@ type NativeIconButtonProps = Omit, "aria export interface IconButtonProps extends NativeIconButtonProps { "aria-label": string; - variant?: "ghost" | "secondary" | "danger"; + variant?: "primary" | "ghost" | "secondary" | "danger"; size?: "sm" | "md" | "lg"; loading?: boolean; } diff --git a/web/test/note-workspace-layout.test.ts b/web/test/note-workspace-layout.test.ts new file mode 100644 index 0000000..e4b7ef7 --- /dev/null +++ b/web/test/note-workspace-layout.test.ts @@ -0,0 +1,24 @@ +import { readFileSync } from "node:fs"; +import { join } from "node:path"; +import { describe, expect, it } from "vitest"; + +const sourcePath = join(process.cwd(), "components", "NoteWorkspace.tsx"); + +describe("NoteWorkspace layout contracts", () => { + it("keeps the chat panel in normal document flow on mobile", () => { + const source = readFileSync(sourcePath, "utf8"); + + expect(source).not.toContain('className="sticky bottom-3 mt-6"'); + expect(source).toContain('className="mt-6 lg:sticky lg:bottom-3"'); + }); + + it("traps and restores focus for the mobile chapter drawer", () => { + const source = readFileSync(sourcePath, "utf8"); + + expect(source).toContain("railTriggerRef"); + expect(source).toContain("railDialogRef"); + expect(source).toContain("railCloseButtonRef"); + expect(source).toContain("getRailFocusableElements"); + expect(source).toContain("document.activeElement"); + }); +});