本节将介绍如何使用 Tailwind CSS 开发一个功能完整的企业级后台管理系统，包括布局设计、组件开发、主题定制等方面。

系统布局

布局框架

  1. // components/layout/AdminLayout.tsx
  2. import { useState } from 'react';
  4. interface AdminLayoutProps {
  5.   children: React.ReactNode;
  6. }
  8. const AdminLayout: React.FC<AdminLayoutProps> = ({ children }) => {
  9.   const [sidebarOpen, setSidebarOpen] = useState(false);
  11.   return (
  12.     <div className="min-h-screen bg-gray-100">
  13.       {/* 顶部导航 */}
  14.       <nav className="bg-white shadow-sm">
  15.         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
  16.           <div className="flex justify-between h-16">
  17.             <div className="flex">
  18.               {/* 移动端菜单按钮 */}
  19.               <button
  20.                 className="md:hidden p-2"
  21.                 onClick={() => setSidebarOpen(!sidebarOpen)}
  22.               >
  23.                 <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
  24.                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
  25.                 </svg>
  26.               </button>
  28.               {/* Logo */}
  29.               <div className="flex-shrink-0 flex items-center">
  30.                 <img
  31.                   className="h-8 w-auto"
  32.                   src="/logo.svg"
  33.                   alt="Logo"
  34.                 />
  35.               </div>
  36.             </div>
  38.             {/* 用户菜单 */}
  39.             <div className="flex items-center">
  40.               <div className="ml-3 relative">
  41.                 <div className="flex items-center space-x-4">
  42.                   <button className="bg-gray-800 flex text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
  43.                     <img
  44.                       className="h-8 w-8 rounded-full"
  45.                       src="/avatar.jpg"
  46.                       alt="User avatar"
  47.                     />
  48.                   </button>
  49.                 </div>
  50.               </div>
  51.             </div>
  52.           </div>
  53.         </div>
  54.       </nav>
  56.       {/* 侧边栏 */}
  57.       <div className={`
  58.         fixed inset-y-0 left-0 w-64 bg-white shadow-lg transform transition-transform duration-300 ease-in-out
  59.         ${sidebarOpen ? 'translate-x-0' : '-translate-x-full'}
  60.         md:translate-x-0 md:static
  61.       `}>
  62.         <div className="h-full flex flex-col">
  63.           <nav className="flex-1 py-4 overflow-y-auto">
  64.             <div className="px-2 space-y-1">
  65.               {/* 导航菜单项 */}
  66.               <a href="/dashboard" className="group flex items-center px-2 py-2 text-sm font-medium text-gray-600 rounded-md hover:bg-gray-50 hover:text-gray-900">
  67.                 <svg className="mr-3 h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
  68.                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
  69.                 </svg>
  70.                 仪表盘
  71.               </a>
  72.             </div>
  73.           </nav>
  74.         </div>
  75.       </div>
  77.       {/* 主要内容区域 */}
  78.       <main className="flex-1 py-6">
  79.         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
  80.           {children}
  81.         </div>
  82.       </main>
  83.     </div>
  84.   );
  85. };

组件系统

数据表格组件

  1. // components/DataTable/index.tsx
  2. interface Column<T> {
  3.   title: string;
  4.   key: keyof T;
  5.   render?: (value: any, record: T) => React.ReactNode;
  6. }
  8. interface DataTableProps<T> {
  9.   columns: Column<T>[];
  10.   dataSource: T[];
  11.   loading?: boolean;
  12.   pagination?: {
  13.     current: number;
  14.     pageSize: number;
  15.     total: number;
  16.     onChange: (page: number, pageSize: number) => void;
  17.   };
  18. }
  20. function DataTable<T extends { id: string | number }>({
  21.   columns,
  22.   dataSource,
  23.   loading,
  24.   pagination
  25. }: DataTableProps<T>) {
  26.   return (
  27.     <div className="overflow-x-auto">
  28.       <table className="min-w-full divide-y divide-gray-200">
  29.         <thead className="bg-gray-50">
  30.           <tr>
  31.             {columns.map((column) => (
  32.               <th
  33.                 key={String(column.key)}
  34.                 className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
  35.               >
  36.                 {column.title}
  37.               </th>
  38.             ))}
  39.           </tr>
  40.         </thead>
  41.         <tbody className="bg-white divide-y divide-gray-200">
  42.           {loading ? (
  43.             <tr>
  44.               <td colSpan={columns.length} className="px-6 py-4 text-center">
  45.                 <div className="flex justify-center">
  46.                   <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-gray-900"></div>
  47.                 </div>
  48.               </td>
  49.             </tr>
  50.           ) : (
  51.             dataSource.map((record) => (
  52.               <tr key={record.id}>
  53.                 {columns.map((column) => (
  54.                   <td
  55.                     key={String(column.key)}
  56.                     className="px-6 py-4 whitespace-nowrap text-sm text-gray-500"
  57.                   >
  58.                     {column.render
  59.                       ? column.render(record[column.key], record)
  60.                       : record[column.key]}
  61.                   </td>
  62.                 ))}
  63.               </tr>
  64.             ))
  65.           )}
  66.         </tbody>
  67.       </table>
  69.       {pagination && (
  70.         <div className="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
  71.           <div className="flex-1 flex justify-between items-center">
  72.             <div>
  73.               <p className="text-sm text-gray-700">
  74.                 显示 {(pagination.current - 1) * pagination.pageSize + 1} 到{' '}
  75.                 {Math.min(pagination.current * pagination.pageSize, pagination.total)} 条，
  76.                 共 {pagination.total} 条
  77.               </p>
  78.             </div>
  79.             <div className="flex space-x-2">
  80.               <button
  81.                 onClick={() => pagination.onChange(pagination.current - 1, pagination.pageSize)}
  82.                 disabled={pagination.current === 1}
  83.                 className="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 disabled:opacity-50"
  84.               >
  85.                 上一页
  86.               </button>
  87.               <button
  88.                 onClick={() => pagination.onChange(pagination.current + 1, pagination.pageSize)}
  89.                 disabled={pagination.current * pagination.pageSize >= pagination.total}
  90.                 className="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 disabled:opacity-50"
  91.               >
  92.                 下一页
  93.               </button>
  94.             </div>
  95.           </div>
  96.         </div>
  97.       )}
  98.     </div>
  99.   );
  100. }

表单组件

  1. // components/Form/index.tsx
  2. interface FormItemProps {
  3.   label: string;
  4.   required?: boolean;
  5.   error?: string;
  6.   children: React.ReactNode;
  7. }
  9. const FormItem: React.FC<FormItemProps> = ({
  10.   label,
  11.   required,
  12.   error,
  13.   children
  14. }) => {
  15.   return (
  16.     <div className="mb-4">
  17.       <label className="block text-sm font-medium text-gray-700">
  18.         {required && <span className="text-red-500 mr-1">*</span>}
  19.         {label}
  20.       </label>
  21.       <div className="mt-1">
  22.         {children}
  23.       </div>
  24.       {error && (
  25.         <p className="mt-1 text-sm text-red-600">
  26.           {error}
  27.         </p>
  28.       )}
  29.     </div>
  30.   );
  31. };
  33. interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
  34.   error?: boolean;
  35. }
  37. const Input: React.FC<InputProps> = ({ error, ...props }) => {
  38.   return (
  39.     <input
  40.       {...props}
  41.       className={`
  42.         block w-full rounded-md shadow-sm
  43.         sm:text-sm
  44.         ${error
  45.           ? 'border-red-300 text-red-900 placeholder-red-300 focus:ring-red-500 focus:border-red-500'
  46.           : 'border-gray-300 focus:ring-blue-500 focus:border-blue-500'
  47.         }
  48.       `}
  49.     />
  50.   );
  51. };

业务功能实现

用户管理页面

  1. // pages/UserManagement.tsx
  2. import { useState, useEffect } from 'react';
  3. import DataTable from '../components/DataTable';
  4. import { Form, FormItem, Input } from '../components/Form';
  6. interface User {
  7.   id: number;
  8.   name: string;
  9.   email: string;
  10.   role: string;
  11.   status: 'active' | 'inactive';
  12. }
  14. const UserManagement = () => {
  15.   const [users, setUsers] = useState<User[]>([]);
  16.   const [loading, setLoading] = useState(false);
  17.   const [pagination, setPagination] = useState({
  18.     current: 1,
  19.     pageSize: 10,
  20.     total: 0
  21.   });
  23.   const columns = [
  24.     {
  25.       title: '用户名',
  26.       key: 'name',
  27.     },
  28.     {
  29.       title: '邮箱',
  30.       key: 'email',
  31.     },
  32.     {
  33.       title: '角色',
  34.       key: 'role',
  35.     },
  36.     {
  37.       title: '状态',
  38.       key: 'status',
  39.       render: (value: string) => (
  40.         <span className={`
  41.           px-2 py-1 text-xs rounded-full
  42.           ${value === 'active'
  43.             ? 'bg-green-100 text-green-800'
  44.             : 'bg-red-100 text-red-800'
  45.           }
  46.         `}>
  47.           {value === 'active' ? '激活' : '禁用'}
  48.         </span>
  49.       )
  50.     },
  51.     {
  52.       title: '操作',
  53.       key: 'action',
  54.       render: (_: any, record: User) => (
  55.         <div className="flex space-x-2">
  56.           <button
  57.             onClick={() => handleEdit(record)}
  58.             className="text-blue-600 hover:text-blue-800"
  59.           >
  60.             编辑
  61.           </button>
  62.           <button
  63.             onClick={() => handleDelete(record.id)}
  64.             className="text-red-600 hover:text-red-800"
  65.           >
  66.             删除
  67.           </button>
  68.         </div>
  69.       )
  70.     }
  71.   ];
  73.   const handleEdit = (user: User) => {
  74.     // 实现编辑逻辑
  75.   };
  77.   const handleDelete = (id: number) => {
  78.     // 实现删除逻辑
  79.   };
  81.   return (
  82.     <div className="space-y-6">
  83.       <div className="bg-white shadow rounded-lg">
  84.         <div className="px-4 py-5 sm:p-6">
  85.           <h3 className="text-lg leading-6 font-medium text-gray-900">
  86.             用户管理
  87.           </h3>
  88.           <div className="mt-4">
  89.             <DataTable
  90.               columns={columns}
  91.               dataSource={users}
  92.               loading={loading}
  93.               pagination={pagination}
  94.             />
  95.           </div>
  96.         </div>
  97.       </div>
  98.     </div>
  99.   );
  100. };

主题定制

主题配置

  1. // tailwind.config.js
  2. const colors = require('tailwindcss/colors');
  4. module.exports = {
  5.   theme: {
  6.     extend: {
  7.       colors: {
  8.         primary: colors.blue,
  9.         success: colors.green,
  10.         warning: colors.yellow,
  11.         danger: colors.red,
  12.         // 自定义企业主题色
  13.         brand: {
  14.           light: '#60A5FA',
  15.           DEFAULT: '#3B82F6',
  16.           dark: '#2563EB',
  17.         },
  18.       },
  19.       spacing: {
  20.         '18': '4.5rem',
  21.         '72': '18rem',
  22.         '84': '21rem',
  23.         '96': '24rem',
  24.       },
  25.     },
  26.   },
  27.   variants: {
  28.     extend: {
  29.       backgroundColor: ['active', 'disabled'],
  30.       textColor: ['active', 'disabled'],
  31.       opacity: ['disabled'],
  32.     },
  33.   },
  34. };

暗色主题支持

  1. // hooks/useTheme.ts
  2. import { useState, useEffect } from 'react';
  4. type Theme = 'light' | 'dark';
  6. export const useTheme = () => {
  7.   const [theme, setTheme] = useState<Theme>('light');
  9.   useEffect(() => {
  10.     const savedTheme = localStorage.getItem('theme') as Theme;
  11.     if (savedTheme) {
  12.       setTheme(savedTheme);
  13.     } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
  14.       setTheme('dark');
  15.     }
  16.   }, []);
  18.   const toggleTheme = () => {
  19.     const newTheme = theme === 'light' ? 'dark' : 'light';
  20.     setTheme(newTheme);
  21.     localStorage.setItem('theme', newTheme);
  22.     document.documentElement.classList.toggle('dark');
  23.   };
  25.   return { theme, toggleTheme };
  26. };

性能优化

路由懒加载

  1. // routes/index.tsx
  2. import { lazy, Suspense } from 'react';
  4. const UserManagement = lazy(() => import('../pages/UserManagement'));
  5. const RoleManagement = lazy(() => import('../pages/RoleManagement'));
  6. const Dashboard = lazy(() => import('../pages/Dashboard'));
  8. const Routes = () => {
  9.   return (
  10.     <Suspense fallback={<div>Loading...</div>}>
  11.       <Switch>
  12.         <Route path="/dashboard" component={Dashboard} />
  13.         <Route path="/users" component={UserManagement} />
  14.         <Route path="/roles" component={RoleManagement} />
  15.       </Switch>
  16.     </Suspense>
  17.   );
  18. };

状态管理优化

  1. // store/slices/userSlice.ts
  2. import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
  4. export const fetchUsers = createAsyncThunk(
  5.   'users/fetchUsers',
  6.   async (params: { page: number; pageSize: number }) => {
  7.     const response = await fetch(`/api/users?page=${params.page}&pageSize=${params.pageSize}`);
  8.     return response.json();
  9.   }
  10. );
  12. const userSlice = createSlice({
  13.   name: 'users',
  14.   initialState: {
  15.     list: [],
  16.     loading: false,
  17.     error: null,
  18.     pagination: {
  19.       current: 1,
  20.       pageSize: 10,
  21.       total: 0
  22.     }
  23.   },
  24.   reducers: {},
  25.   extraReducers: (builder) => {
  26.     builder
  27.       .addCase(fetchUsers.pending, (state) => {
  28.         state.loading = true;
  29.       })
  30.       .addCase(fetchUsers.fulfilled, (state, action) => {
  31.         state.loading = false;
  32.         state.list = action.payload.data;
  33.         state.pagination = action.payload.pagination;
  34.       })
  35.       .addCase(fetchUsers.rejected, (state, action) => {
  36.         state.loading = false;
  37.         state.error = action.error.message;
  38.       });
  39.   }
  40. });

扩展功能

权限控制

  1. // components/AuthWrapper.tsx
  2. interface AuthWrapperProps {
  3.   permission: string;
  4.   children: React.ReactNode;
  5. }
  7. const AuthWrapper: React.FC<AuthWrapperProps> = ({ permission, children }) => {
  8.   const { permissions } = useAuth();
  10.   if (!permissions.includes(permission)) {
  11.     return null;
  12.   }
  14.   return <>{children}</>;
  15. };
  17. // 使用示例
  18. <AuthWrapper permission="user.edit">
  19.   <button onClick={handleEdit}>编辑用户</button>
  20. </AuthWrapper>

操作日志

  1. // hooks/useLogger.ts
  2. export const useLogger = () => {
  3.   const logOperation = async (params: {
  4.     module: string;
  5.     action: string;
  6.     details: any;
  7.   }) => {
  8.     try {
  9.       await fetch('/api/logs', {
  10.         method: 'POST',
  11.         headers: {
  12.           'Content-Type': 'application/json'
  13.         },
  14.         body: JSON.stringify({
  15.           ...params,
  16.           timestamp: new Date().toISOString(),
  17.           userId: getCurrentUserId()
  18.         })
  19.       });
  20.     } catch (error) {
  21.       console.error('Failed to log operation:', error);
  22.     }
  23.   };
  25.   return { logOperation };
  26. };
  28. // 使用示例
  29. const { logOperation } = useLogger();
  31. const handleUserUpdate = async (userData) => {
  32.   try {
  33.     await updateUser(userData);
  34.     await logOperation({
  35.       module: 'User',
  36.       action: 'Update',
  37.       details: userData
  38.     });
  39.   } catch (error) {
  40.     // 错误处理
  41.   }
  42. };

数据导出

  1. // utils/exportData.ts
  2. import { saveAs } from 'file-saver';
  3. import * as XLSX from 'xlsx';
  5. export const exportToExcel = (data: any[], filename: string) => {
  6.   const worksheet = XLSX.utils.json_to_sheet(data);
  7.   const workbook = XLSX.utils.book_new();
  8.   XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
  10.   const excelBuffer = XLSX.write(workbook, {
  11.     bookType: 'xlsx',
  12.     type: 'array'
  13.   });
  15.   const dataBlob = new Blob([excelBuffer], {
  16.     type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
  17.   });
  19.   saveAs(dataBlob, `${filename}.xlsx`);
  20. };
  22. // 使用示例
  23. const handleExport = () => {
  24.   const formattedData = users.map(user => ({
  25.     用户名: user.name,
  26.     邮箱: user.email,
  27.     角色: user.role,
  28.     状态: user.status === 'active' ? '激活' : '禁用'
  29.   }));
  31.   exportToExcel(formattedData, '用户列表');
  32. };

最佳实践

  1. 布局规范

    • 采用响应式设计
    • 保持导航结构清晰
    • 合理使用空间层级

  2. 组件设计

    • 组件职责单一
    • 保持可复用性
    • 统一的样式规范

  3. 性能优化

    • 按需加载组件
    • 优化数据请求
    • 合理使用缓存

  4. 开发建议

    • 遵循代码规范
    • 完善错误处理
    • 做好单元测试