From 005b80360c36d4501416717e300a903a1e78cf62 Mon Sep 17 00:00:00 2001 From: hamster1963 <1410514192@qq.com> Date: Fri, 22 Nov 2024 09:39:12 +0800 Subject: [PATCH 1/5] chore(deps): bump tailwindcss to v4 --- app/(main)/header.tsx | 2 +- app/(main)/layout.tsx | 2 +- bun.lockb | Bin 535718 -> 539798 bytes components/BlurLayer.tsx | 4 +- components/GlobalBackButton.tsx | 2 +- components/Icon.tsx | 4 +- components/ui/animated-tooltip.tsx | 2 +- components/ui/badge.tsx | 2 +- components/ui/button.tsx | 2 +- components/ui/chart.tsx | 4 +- components/ui/dropdown-menu.tsx | 8 +- components/ui/input.tsx | 2 +- components/ui/navigation-menu.tsx | 4 +- components/ui/popover.tsx | 2 +- components/ui/sheet.tsx | 2 +- package.json | 8 +- postcss.config.js | 3 +- styles/globals.css | 130 +++++++++++++++++++++++++---- tailwind.config.ts | 84 ------------------- 19 files changed, 141 insertions(+), 126 deletions(-) delete mode 100644 tailwind.config.ts diff --git a/app/(main)/header.tsx b/app/(main)/header.tsx index 2cb28a6..00eecf9 100644 --- a/app/(main)/header.tsx +++ b/app/(main)/header.tsx @@ -36,7 +36,7 @@ function Header() { unoptimized alt="apple-touch-icon" src={customLogo ? customLogo : "/apple-touch-icon.png"} - className="relative !m-0 border-2 border-transparent h-6 w-6 object-cover object-top !p-0" + className="relative m-0! border-2 border-transparent h-6 w-6 object-cover object-top p-0!" /> {customTitle ? customTitle : "NezhaDash"} diff --git a/app/(main)/layout.tsx b/app/(main)/layout.tsx index 8df46a4..0bec7e5 100644 --- a/app/(main)/layout.tsx +++ b/app/(main)/layout.tsx @@ -11,7 +11,7 @@ type DashboardProps = { export default function MainLayout({ children }: DashboardProps) { return (
-
+
{children}
diff --git a/components/ui/badge.tsx b/components/ui/badge.tsx index 7c304ec..f82116b 100644 --- a/components/ui/badge.tsx +++ b/components/ui/badge.tsx @@ -3,7 +3,7 @@ import { type VariantProps, cva } from "class-variance-authority"; import * as React from "react"; const badgeVariants = cva( - "inline-flex items-center text-nowarp rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors pointer-events-none focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", + "inline-flex items-center text-nowarp rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors pointer-events-none focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2", { variants: { variant: { diff --git a/components/ui/button.tsx b/components/ui/button.tsx index 7223303..80cbcbe 100644 --- a/components/ui/button.tsx +++ b/components/ui/button.tsx @@ -4,7 +4,7 @@ import { type VariantProps, cva } from "class-variance-authority"; import * as React from "react"; const buttonVariants = cva( - "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50", + "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50", { variants: { variant: { diff --git a/components/ui/chart.tsx b/components/ui/chart.tsx index 808f500..3bd9d50 100644 --- a/components/ui/chart.tsx +++ b/components/ui/chart.tsx @@ -51,7 +51,7 @@ const ChartContainer = React.forwardRef< data-chart={chartId} ref={ref} className={cn( - "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none", + "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-hidden [&_.recharts-surface]:outline-hidden", className, )} {...props} @@ -211,7 +211,7 @@ const ChartTooltipContent = React.forwardRef< !hideIndicator && (
( {children} - + Close diff --git a/package.json b/package.json index fb5dd3f..7bfda4c 100644 --- a/package.json +++ b/package.json @@ -53,19 +53,19 @@ "typescript-eslint": "^8.15.0" }, "devDependencies": { - "eslint-plugin-turbo": "^2.3.0", - "eslint-plugin-unused-imports": "^4.1.4", "@next/bundle-analyzer": "^15.0.3", + "@tailwindcss/postcss": "^4.0.0-beta.1", "@types/node": "^22.9.1", "@types/react": "npm:types-react@19.0.0-rc.1", "@types/react-dom": "npm:types-react-dom@19.0.0-rc.1", - "autoprefixer": "^10.4.20", "eslint": "^9.15.0", "eslint-config-next": "^15.0.3", + "eslint-plugin-turbo": "^2.3.1", + "eslint-plugin-unused-imports": "^4.1.4", "postcss": "^8.4.49", "prettier": "^3.3.3", "prettier-plugin-tailwindcss": "^0.6.9", - "tailwindcss": "^3.4.15", + "tailwindcss": "^4.0.0-beta.1", "typescript": "^5.6.3" }, "overrides": { diff --git a/postcss.config.js b/postcss.config.js index 12a703d..483f378 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -1,6 +1,5 @@ module.exports = { plugins: { - tailwindcss: {}, - autoprefixer: {}, + "@tailwindcss/postcss": {}, }, }; diff --git a/styles/globals.css b/styles/globals.css index 64de661..78d6ba4 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -1,6 +1,118 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; +@import "tailwindcss"; + +@variant dark (&:is(.dark *)); + +@theme { + --font-sans: var(--font-sans), ui-sans-serif, system-ui, sans-serif, + "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + + --color-border: hsl(var(--border)); + --color-input: hsl(var(--input)); + --color-ring: hsl(var(--ring)); + --color-background: hsl(var(--background)); + --color-foreground: hsl(var(--foreground)); + + --color-primary: hsl(var(--primary)); + --color-primary-foreground: hsl(var(--primary-foreground)); + + --color-secondary: hsl(var(--secondary)); + --color-secondary-foreground: hsl(var(--secondary-foreground)); + + --color-destructive: hsl(var(--destructive)); + --color-destructive-foreground: hsl(var(--destructive-foreground)); + + --color-muted: hsl(var(--muted)); + --color-muted-foreground: hsl(var(--muted-foreground)); + + --color-accent: hsl(var(--accent)); + --color-accent-foreground: hsl(var(--accent-foreground)); + + --color-popover: hsl(var(--popover)); + --color-popover-foreground: hsl(var(--popover-foreground)); + + --color-card: hsl(var(--card)); + --color-card-foreground: hsl(var(--card-foreground)); + + --radius-lg: var(--radius); + --radius-md: calc(var(--radius) - 2px); + --radius-sm: calc(var(--radius) - 4px); + + --animate-accordion-down: accordion-down 0.2s ease-out; + --animate-accordion-up: accordion-up 0.2s ease-out; + + @keyframes accordion-down { + from { + height: 0; + } + to { + height: var(--radix-accordion-content-height); + } + } + @keyframes accordion-up { + from { + height: var(--radix-accordion-content-height); + } + to { + height: 0; + } + } +} + +@utility container { + margin-inline: auto; + padding-inline: 2rem; + @media (width >= theme(--breakpoint-sm)) { + max-width: none; + } + @media (width >= 1400px) { + max-width: 1400px; + } +} + +/* + In Tailwind CSS v4, basic styles are applied to form elements by default. To + maintain compatibility with v3, the following resets have been added: +*/ +@layer base { + input, + textarea, + select, + button { + border: 0px solid; + border-radius: 0; + padding: 0; + color: inherit; + background-color: transparent; + } +} + +/* + The default border color has changed to `currentColor` in Tailwind CSS v4, + so we've added these compatibility styles to make sure everything still + looks the same as it did with Tailwind CSS v3. + + If we ever want to remove these styles, we need to add an explicit border + color utility to any element that depends on these defaults. +*/ +@layer base { + *, + ::after, + ::before, + ::backdrop, + ::file-selector-button { + border-color: var(--color-gray-200, currentColor); + } +} + +@utility step { + counter-increment: step; + + &:before { + @apply border-background bg-muted absolute inline-flex h-9 w-9 items-center justify-center rounded-full border-4 text-center -indent-px font-mono text-base font-medium; + @apply mt-[-4px] ml-[-50px]; + content: counter(step); + } +} @layer base { :root { @@ -84,18 +196,6 @@ } } -@layer utilities { - .step { - counter-increment: step; - } - - .step:before { - @apply absolute inline-flex h-9 w-9 items-center justify-center rounded-full border-4 border-background bg-muted text-center -indent-px font-mono text-base font-medium; - @apply ml-[-50px] mt-[-4px]; - content: counter(step); - } -} - @media (max-width: 640px) { .container { @apply px-4; diff --git a/tailwind.config.ts b/tailwind.config.ts deleted file mode 100644 index 0628323..0000000 --- a/tailwind.config.ts +++ /dev/null @@ -1,84 +0,0 @@ -import type { Config } from "tailwindcss"; -import { fontFamily } from "tailwindcss/defaultTheme"; - -const config = { - darkMode: "class", - content: [ - "./pages/**/*.{ts,tsx}", - "./components/**/*.{ts,tsx}", - "./app/**/*.{ts,tsx}", - "./src/**/*.{ts,tsx}", - ], - prefix: "", - theme: { - container: { - center: true, - padding: "2rem", - screens: { - "2xl": "1400px", - }, - }, - extend: { - fontFamily: { - sans: ["var(--font-sans)", ...fontFamily.sans], - }, - colors: { - border: "hsl(var(--border))", - input: "hsl(var(--input))", - ring: "hsl(var(--ring))", - background: "hsl(var(--background))", - foreground: "hsl(var(--foreground))", - primary: { - DEFAULT: "hsl(var(--primary))", - foreground: "hsl(var(--primary-foreground))", - }, - secondary: { - DEFAULT: "hsl(var(--secondary))", - foreground: "hsl(var(--secondary-foreground))", - }, - destructive: { - DEFAULT: "hsl(var(--destructive))", - foreground: "hsl(var(--destructive-foreground))", - }, - muted: { - DEFAULT: "hsl(var(--muted))", - foreground: "hsl(var(--muted-foreground))", - }, - accent: { - DEFAULT: "hsl(var(--accent))", - foreground: "hsl(var(--accent-foreground))", - }, - popover: { - DEFAULT: "hsl(var(--popover))", - foreground: "hsl(var(--popover-foreground))", - }, - card: { - DEFAULT: "hsl(var(--card))", - foreground: "hsl(var(--card-foreground))", - }, - }, - borderRadius: { - lg: "var(--radius)", - md: "calc(var(--radius) - 2px)", - sm: "calc(var(--radius) - 4px)", - }, - keyframes: { - "accordion-down": { - from: { height: "0" }, - to: { height: "var(--radix-accordion-content-height)" }, - }, - "accordion-up": { - from: { height: "var(--radix-accordion-content-height)" }, - to: { height: "0" }, - }, - }, - animation: { - "accordion-down": "accordion-down 0.2s ease-out", - "accordion-up": "accordion-up 0.2s ease-out", - }, - }, - }, - plugins: [require("tailwindcss-animate")], -} satisfies Config; - -export default config; From 16da9c3f0ff94d79cfd4abbb61f6550a8344ef3b Mon Sep 17 00:00:00 2001 From: hamster1963 <1410514192@qq.com> Date: Fri, 22 Nov 2024 09:39:49 +0800 Subject: [PATCH 2/5] fix(global): back button cursor --- app/(main)/ClientComponents/Global.tsx | 4 ++-- app/(main)/ClientComponents/ServerListClient.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/app/(main)/ClientComponents/Global.tsx b/app/(main)/ClientComponents/Global.tsx index 882aba2..ba6c3b8 100644 --- a/app/(main)/ClientComponents/Global.tsx +++ b/app/(main)/ClientComponents/Global.tsx @@ -49,7 +49,7 @@ export async function Global({ countries = [] }: GlobalProps) { turf.bbox({ type: "Polygon", coordinates: polygon }), ); - const spacing = 20; // 单位为千米 + const spacing = 10; // 单位为千米 const options = { units: "kilometers" }; bboxList.forEach((bbox: any) => { @@ -82,7 +82,7 @@ export async function Global({ countries = [] }: GlobalProps) { // 获取国家的边界框 const bbox = turf.bbox(feature); - const spacing = 50; // 单位为千米，值越小点越密集 + const spacing = 10; // 单位为千米，值越小点越密集 const options = { units: "kilometers" }; // @ts-expect-error ignore const pointGrid = turf.pointGrid(bbox, spacing, options); diff --git a/app/(main)/ClientComponents/ServerListClient.tsx b/app/(main)/ClientComponents/ServerListClient.tsx index 5a2f50a..a63d87f 100644 --- a/app/(main)/ClientComponents/ServerListClient.tsx +++ b/app/(main)/ClientComponents/ServerListClient.tsx @@ -121,7 +121,7 @@ export default function ServerListClient() { onClick={() => { router.push(`/?global=true`); }} - className="rounded-[50px] bg-stone-100 p-[10px] transition-all hover:bg-stone-200 dark:hover:bg-stone-700 dark:bg-stone-800" + className="rounded-[50px] cursor-pointer bg-stone-100 p-[10px] transition-all hover:bg-stone-200 dark:hover:bg-stone-700 dark:bg-stone-800" > From a4f641a3dd4cef6f660717bda556154a6138488a Mon Sep 17 00:00:00 2001 From: hamster1963 <1410514192@qq.com> Date: Fri, 22 Nov 2024 09:50:53 +0800 Subject: [PATCH 3/5] fix(networkChart): border color --- app/(main)/ClientComponents/NetworkChart.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/(main)/ClientComponents/NetworkChart.tsx b/app/(main)/ClientComponents/NetworkChart.tsx index 6256975..074b0b1 100644 --- a/app/(main)/ClientComponents/NetworkChart.tsx +++ b/app/(main)/ClientComponents/NetworkChart.tsx @@ -128,7 +128,7 @@ export const NetworkChart = React.memo(function NetworkChart({