将前端 TailwindCSS 版本从v3 升级到 v4

dashboard/src/index.css

@@ -1,6 +1,104 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+@source "./**/*.{js,ts,jsx,tsx}";
+@custom-variant dark (&:where(.dark, .dark *));
+
+@theme inline {
+  --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-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+  --color-popover: hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+  --radius-sm: var(--visual-radius-sm);
+  --radius-md: var(--visual-radius-md);
+  --radius-lg: var(--visual-radius-lg);
+  --radius-xl: var(--visual-radius-xl);
+  --font-sans: var(--typography-font-family-base);
+  --font-mono: var(--typography-font-family-code);
+  --shadow-sm: var(--visual-shadow-sm);
+  --shadow-md: var(--visual-shadow-md);
+  --shadow-lg: var(--visual-shadow-lg);
+  --shadow-xl: var(--visual-shadow-xl);
+  --animate-slide-in-from-right: slide-in-from-right 0.3s ease-out;
+  --animate-slide-out-to-right: slide-out-to-right 0.2s ease-in;
+  --animate-slide-in-from-top: slide-in-from-top 0.3s ease-out;
+  --animate-slide-out-to-top: slide-out-to-top 0.2s ease-in;
+  --animate-fade-in: fade-in 0.2s ease-out;
+  --animate-fade-out: fade-out 0.15s ease-in;
+}
+
+@keyframes slide-in-from-right {
+  from {
+    transform: translateX(100%);
+  }
+
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes slide-out-to-right {
+  from {
+    transform: translateX(0);
+  }
+
+  to {
+    transform: translateX(100%);
+  }
+}
+
+@keyframes slide-in-from-top {
+  from {
+    transform: translateY(-100%);
+  }
+
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes slide-out-to-top {
+  from {
+    transform: translateY(0);
+  }
+
+  to {
+    transform: translateY(-100%);
+  }
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fade-out {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
 
 /* JetBrains Mono 字体 - 用于代码编辑器 */
 @font-face {

dashboard/src/routes/settings/AboutTab.tsx

@@ -13,9 +13,9 @@ export function AboutTab() {
   return (
     <div className="space-y-4 sm:space-y-6">
       {/* GitHub 开源地址 */}
-      <div className="rounded-lg border-2 border-primary/30 bg-gradient-to-r from-primary/5 to-primary/10 p-4 sm:p-6">
+      <div className="rounded-lg border-2 border-primary/30 bg-linear-to-r from-primary/5 to-primary/10 p-4 sm:p-6">
         <div className="flex items-start gap-3 sm:gap-4">
-          <div className="flex-shrink-0 rounded-lg bg-primary/10 p-2 sm:p-3">
+          <div className="shrink-0 rounded-lg bg-primary/10 p-2 sm:p-3">
             <svg
               className="h-6 w-6 sm:h-8 sm:w-8 text-primary"
               fill="currentColor"
@@ -120,7 +120,7 @@ export function AboutTab() {
             <ul className="space-y-0.5 list-disc list-inside">
               <li>shadcn/ui</li>
               <li>Radix UI</li>
-              <li>Tailwind CSS 3.4.17</li>
+              <li>Tailwind CSS 4.2.1</li>
               <li>Lucide Icons</li>
             </ul>
           </div>
@@ -138,7 +138,6 @@ export function AboutTab() {
             <ul className="space-y-0.5 list-disc list-inside">
               <li>Bun / npm</li>
               <li>ESLint 9.17.0</li>
-              <li>PostCSS</li>
             </ul>
           </div>
         </div>
@@ -220,7 +219,6 @@ export function AboutTab() {
                 <LibraryItem name="TypeScript" description={t('settings.about.lib.typescript')} license="Apache-2.0" />
                 <LibraryItem name="Vite" description={t('settings.about.lib.vite')} license="MIT" />
                 <LibraryItem name="ESLint" description={t('settings.about.lib.eslint')} license="MIT" />
-                <LibraryItem name="PostCSS" description={t('settings.about.lib.postcss')} license="MIT" />
               </div>
             </div>
           </div>
@@ -233,7 +231,7 @@ export function AboutTab() {
         <div className="space-y-3">
           <div className="rounded-lg bg-primary/5 border border-primary/20 p-3 sm:p-4">
             <div className="flex items-start gap-2 sm:gap-3">
-              <div className="flex-shrink-0 mt-0.5">
+              <div className="mt-0.5 shrink-0">
                 <div className="rounded-md bg-primary/10 px-2 py-1">
                   <span className="text-xs sm:text-sm font-bold text-primary">GPLv3</span>
                 </div>