From 51f2455ee17aab0acf513929fc453f789fd9cd36 Mon Sep 17 00:00:00 2001 From: DrSmoothl <1787882683@qq.com> Date: Sat, 14 Mar 2026 18:11:37 +0800 Subject: [PATCH] =?UTF-8?q?=E5=B0=86=E5=89=8D=E7=AB=AF=20TailwindCSS=20?= =?UTF-8?q?=E7=89=88=E6=9C=AC=E4=BB=8Ev3=20=E5=8D=87=E7=BA=A7=E5=88=B0=20v?= =?UTF-8?q?4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- dashboard/README.md | 8 +- dashboard/electron.vite.config.ts | 3 +- dashboard/package.json | 5 +- dashboard/postcss.config.js | 6 -- dashboard/src/index.css | 104 ++++++++++++++++++++- dashboard/src/routes/settings/AboutTab.tsx | 10 +- dashboard/tailwind.config.js | 103 +------------------- dashboard/vite.config.ts | 5 +- 8 files changed, 118 insertions(+), 126 deletions(-) delete mode 100644 dashboard/postcss.config.js diff --git a/dashboard/README.md b/dashboard/README.md index b2a260f8..74a7e9f5 100644 --- a/dashboard/README.md +++ b/dashboard/README.md @@ -7,7 +7,7 @@ [![React](https://img.shields.io/badge/React-19.2-61DAFB?logo=react&logoColor=white)](https://react.dev/) [![TypeScript](https://img.shields.io/badge/TypeScript-5.9-3178C6?logo=typescript&logoColor=white)](https://www.typescriptlang.org/) [![Vite](https://img.shields.io/badge/Vite-7.2-646CFF?logo=vite&logoColor=white)](https://vitejs.dev/) -[![TailwindCSS](https://img.shields.io/badge/TailwindCSS-3.4-38B2AC?logo=tailwind-css&logoColor=white)](https://tailwindcss.com/) +[![TailwindCSS](https://img.shields.io/badge/TailwindCSS-4.2-38B2AC?logo=tailwind-css&logoColor=white)](https://tailwindcss.com/) @@ -134,7 +134,7 @@ React 19.2.0 # UI 框架 ├── TanStack Router # 路由管理 ├── TanStack Virtual # 虚拟滚动 ├── Jotai # 状态管理 -├── Tailwind CSS 3.4 # 样式框架 +├── Tailwind CSS 4.2 # 样式框架 ├── ReactFlow # 知识图谱可视化 ├── Recharts # 数据图表 └── shadcn/ui # 组件库 @@ -213,7 +213,7 @@ MaiBot-Dashboard/ │ └── index.css # 全局样式 ├── public/ # 静态资源 ├── vite.config.ts # Vite 配置 -├── tailwind.config.js # Tailwind 配置 +├── tailwind.config.js # Tailwind v4 兼容占位配置 ├── tsconfig.json # TypeScript 配置 └── package.json # 依赖管理 ``` @@ -328,7 +328,7 @@ proxy: { |------|------|------| | @radix-ui/react-* | ^1.x | 无障碍组件基础 | | lucide-react | ^0.553.0 | 图标库 | -| tailwindcss | ^3.4 | CSS 框架 | +| tailwindcss | ^4.2.1 | CSS 框架 | | class-variance-authority | ^0.7.1 | 类名管理 | | tailwind-merge | ^3.4.0 | Tailwind 类合并 | | date-fns | ^3.x | 日期处理 | diff --git a/dashboard/electron.vite.config.ts b/dashboard/electron.vite.config.ts index b332bcfd..0d8cc531 100644 --- a/dashboard/electron.vite.config.ts +++ b/dashboard/electron.vite.config.ts @@ -1,3 +1,4 @@ +import tailwindcss from '@tailwindcss/vite' import react from '@vitejs/plugin-react' import { defineConfig } from 'electron-vite' import path from 'path' @@ -40,7 +41,7 @@ export default defineConfig({ '@': path.resolve(__dirname, './src'), }, }, - plugins: [react()], + plugins: [tailwindcss(), react()], server: { port: 7999, proxy: { diff --git a/dashboard/package.json b/dashboard/package.json index 8b57e2db..63417a2c 100644 --- a/dashboard/package.json +++ b/dashboard/package.json @@ -159,6 +159,7 @@ "@use-gesture/react": "^10.3.1" }, "devDependencies": { + "@tailwindcss/vite": "^4.2.1", "@eslint/js": "^9.39.1", "@testing-library/dom": "^10.4.1", "@testing-library/jest-dom": "^6.9.1", @@ -169,7 +170,6 @@ "@types/react-dom": "^19.2.3", "@vitejs/plugin-react": "^5.1.2", "@vitest/ui": "^4.0.18", - "autoprefixer": "^10.4.22", "electron": "^40.6.1", "electron-builder": "^26.8.1", "electron-store": "11.0.2", @@ -179,10 +179,9 @@ "eslint-plugin-react-refresh": "^0.4.24", "globals": "^16.5.0", "jsdom": "^28.1.0", - "postcss": "^8.5.6", "prettier": "^3.7.4", "prettier-plugin-tailwindcss": "^0.7.2", - "tailwindcss": "^3", + "tailwindcss": "^4.2.1", "typescript": "~5.9.3", "typescript-eslint": "^8.49.0", "vite": "^7.2.7", diff --git a/dashboard/postcss.config.js b/dashboard/postcss.config.js deleted file mode 100644 index 2e7af2b7..00000000 --- a/dashboard/postcss.config.js +++ /dev/null @@ -1,6 +0,0 @@ -export default { - plugins: { - tailwindcss: {}, - autoprefixer: {}, - }, -} diff --git a/dashboard/src/index.css b/dashboard/src/index.css index ba558b9e..1de0334c 100644 --- a/dashboard/src/index.css +++ b/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 { diff --git a/dashboard/src/routes/settings/AboutTab.tsx b/dashboard/src/routes/settings/AboutTab.tsx index 38386dcb..4af88929 100644 --- a/dashboard/src/routes/settings/AboutTab.tsx +++ b/dashboard/src/routes/settings/AboutTab.tsx @@ -13,9 +13,9 @@ export function AboutTab() { return (
{/* GitHub 开源地址 */} -
+
-
+
  • shadcn/ui
  • Radix UI
    • -
  • Tailwind CSS 3.4.17
    • +
  • Tailwind CSS 4.2.1
  • Lucide Icons
    • @@ -138,7 +138,6 @@ export function AboutTab() {
    • Bun / npm
    • ESLint 9.17.0
      • -
    • PostCSS
    @@ -220,7 +219,6 @@ export function AboutTab() { -
    @@ -233,7 +231,7 @@ export function AboutTab() {
    -
    +
    GPLv3
    diff --git a/dashboard/tailwind.config.js b/dashboard/tailwind.config.js index 38a487c0..3cf80090 100644 --- a/dashboard/tailwind.config.js +++ b/dashboard/tailwind.config.js @@ -1,101 +1,2 @@ -/** @type {import('tailwindcss').Config} */ -export default { - darkMode: ['class'], - content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'], - theme: { - extend: { - colors: { - border: 'hsl(var(--color-border))', - input: 'hsl(var(--color-input))', - ring: 'hsl(var(--color-ring))', - background: 'hsl(var(--color-background))', - foreground: 'hsl(var(--color-foreground))', - primary: { - DEFAULT: 'hsl(var(--color-primary))', - foreground: 'hsl(var(--color-primary-foreground))', - }, - secondary: { - DEFAULT: 'hsl(var(--color-secondary))', - foreground: 'hsl(var(--color-secondary-foreground))', - }, - muted: { - DEFAULT: 'hsl(var(--color-muted))', - foreground: 'hsl(var(--color-muted-foreground))', - }, - accent: { - DEFAULT: 'hsl(var(--color-accent))', - foreground: 'hsl(var(--color-accent-foreground))', - }, - card: { - DEFAULT: 'hsl(var(--color-card))', - foreground: 'hsl(var(--color-card-foreground))', - }, - popover: { - DEFAULT: 'hsl(var(--color-popover))', - foreground: 'hsl(var(--color-popover-foreground))', - }, - destructive: { - DEFAULT: 'hsl(var(--color-destructive))', - foreground: 'hsl(var(--color-destructive-foreground))', - }, - }, - borderRadius: { - lg: 'var(--visual-radius-lg)', - md: 'var(--visual-radius-md)', - sm: 'var(--visual-radius-sm)', - xl: 'var(--visual-radius-xl)', - full: 'var(--visual-radius-full)', - }, - fontFamily: { - sans: 'var(--typography-font-family-base)', - mono: 'var(--typography-font-family-code)', - }, - boxShadow: { - sm: 'var(--visual-shadow-sm)', - md: 'var(--visual-shadow-md)', - lg: 'var(--visual-shadow-lg)', - xl: 'var(--visual-shadow-xl)', - }, - transitionDuration: { - fast: 'var(--animation-anim-duration-fast)', - normal: 'var(--animation-anim-duration-normal)', - slow: 'var(--animation-anim-duration-slow)', - }, - keyframes: { - 'slide-in-from-right': { - from: { transform: 'translateX(100%)' }, - to: { transform: 'translateX(0)' }, - }, - 'slide-out-to-right': { - from: { transform: 'translateX(0)' }, - to: { transform: 'translateX(100%)' }, - }, - 'slide-in-from-top': { - from: { transform: 'translateY(-100%)' }, - to: { transform: 'translateY(0)' }, - }, - 'slide-out-to-top': { - from: { transform: 'translateY(0)' }, - to: { transform: 'translateY(-100%)' }, - }, - 'fade-in': { - from: { opacity: '0' }, - to: { opacity: '1' }, - }, - 'fade-out': { - from: { opacity: '1' }, - to: { opacity: '0' }, - }, - }, - animation: { - 'slide-in-from-right': 'slide-in-from-right 0.3s ease-out', - 'slide-out-to-right': 'slide-out-to-right 0.2s ease-in', - 'slide-in-from-top': 'slide-in-from-top 0.3s ease-out', - 'slide-out-to-top': 'slide-out-to-top 0.2s ease-in', - 'fade-in': 'fade-in 0.2s ease-out', - 'fade-out': 'fade-out 0.15s ease-in', - }, - }, - }, - plugins: [], -} +// Tailwind v4 theme tokens and custom utilities are defined in src/index.css. +export default {} diff --git a/dashboard/vite.config.ts b/dashboard/vite.config.ts index 57fb2810..d7747699 100644 --- a/dashboard/vite.config.ts +++ b/dashboard/vite.config.ts @@ -1,10 +1,11 @@ -import { defineConfig } from 'vite' +import tailwindcss from '@tailwindcss/vite' import react from '@vitejs/plugin-react' +import { defineConfig } from 'vite' import path from 'path' // https://vite.dev/config/ export default defineConfig({ - plugins: [react()], + plugins: [tailwindcss(), react()], server: { port: 7999, proxy: {