feat: migrate from Next.js to Vite and React Router, updating routing and environment variable handling

This commit is contained in:
HouYunFei
2026-06-26 16:41:32 +08:00
parent ef7a218ba6
commit e635ec6908
24 changed files with 314 additions and 238 deletions
+4 -5
View File
@@ -1,8 +1,7 @@
"use client";
import { Menu } from "lucide-react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { Link, useLocation } from "react-router-dom";
import { navigationTools, type NavigationToolSlug } from "@/constant/navigation-tools";
import { AppConfigModal } from "@/components/layout/app-config-modal";
@@ -12,7 +11,7 @@ import { cn } from "@/lib/utils";
import { useState } from "react";
export function AppTopNav() {
const pathname = usePathname();
const { pathname } = useLocation();
const [mobileNavOpen, setMobileNavOpen] = useState(false);
const hideHeader = /^\/canvas\/[^/]+/.test(pathname);
const slug = pathname.split("/").filter(Boolean)[0];
@@ -24,7 +23,7 @@ export function AppTopNav() {
<header className="sticky top-0 z-20 h-16 shrink-0 border-b border-stone-200 bg-background/90 backdrop-blur-xl dark:border-stone-800">
<div className="mx-auto flex h-full max-w-7xl items-stretch justify-between gap-5 px-6">
<div className="flex min-w-0 items-center">
<Link href="/" className="flex h-full shrink-0 items-center gap-2 text-sm font-semibold leading-none tracking-tight text-stone-950 transition hover:text-stone-600 dark:text-stone-100 dark:hover:text-stone-300">
<Link to="/" className="flex h-full shrink-0 items-center gap-2 text-sm font-semibold leading-none tracking-tight text-stone-950 transition hover:text-stone-600 dark:text-stone-100 dark:hover:text-stone-300">
<span
className="size-5 shrink-0 bg-current"
style={{
@@ -52,7 +51,7 @@ export function AppTopNav() {
return (
<Link
key={tool.slug}
href={`/${tool.slug}`}
to={`/${tool.slug}`}
className={cn(
"relative flex h-16 shrink-0 items-center gap-2 text-sm leading-6 transition after:absolute after:inset-x-0 after:bottom-0 after:h-px",
active
@@ -1,7 +1,7 @@
"use client";
import { Drawer } from "antd";
import Link from "next/link";
import { Link } from "react-router-dom";
import { navigationTools, type NavigationToolSlug } from "@/constant/navigation-tools";
import { cn } from "@/lib/utils";
@@ -22,7 +22,7 @@ export function MobileNavDrawer({ open, activeToolSlug, onClose }: MobileNavDraw
return (
<Link
key={tool.slug}
href={`/${tool.slug}`}
to={`/${tool.slug}`}
onClick={onClose}
className={cn(
"flex items-center gap-3 rounded-lg px-3 py-3 text-base transition",