leaudit-platform-frontend/app/styles/main.css

/**
 * 主样式文件
 * 包含应用所有样式
 */

/* 导入组件样式 */
@import './components/button.css';
@import './components/card.css';
@import './components/form.css';
@import './components/navigation.css';
@import './components/table.css';
@import './components/badge.css';
@import './components/pagination.css';
@import './components/search-box.css';
@import './components/filter-panel.css';
@import './components/file-icon.css';
@import './components/status-badge.css';
@import './components/file-type-tag.css';
@import './components/status-dot.css';
@import './components/tag.css';
@import './components/file-progress.css';
@import './components/processing-steps.css';
@import './components/upload-area.css';
/* @import './components/modal.css'; */

/* Tailwind 基础指令 */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* 全局变量和基础样式 */
@layer base {
  :root {
    /* 主题颜色变量 */
    --color-primary: #00684a;
    --color-primary-hover: #005a3f;
    --color-primary-light: rgba(0, 104, 74, 0.1);
    
    /* 成功、警告、错误颜色 */
    --color-success: #52c41a;
    --color-warning: #faad14;
    --color-error: #f5222d;
    
    /* 中性色 */
    --color-gray-50: #f8f9fa;
    --color-gray-100: #f1f3f5;
    --color-gray-200: #e9ecef;
    --color-gray-300: #dee2e6;
    --color-gray-400: #ced4da;
    --color-gray-500: #adb5bd;
    --color-gray-600: #868e96;
    --color-gray-700: #495057;
    --color-gray-800: #343a40;
    --color-gray-900: #212529;
  }
  
  /* 基本元素样式 */
  html, body {
    @apply text-gray-800 antialiased;
    font-smooth: always;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    scroll-behavior: smooth;
  }
  
  /* 文字选择颜色 */
  ::selection {
    @apply bg-[rgba(0,104,74,0.2)] text-[#00684a];
  }
  
  /* 滚动条美化 */
  ::-webkit-scrollbar {
    @apply w-2 h-2;
  }
  
  ::-webkit-scrollbar-track {
    @apply bg-gray-100;
  }
  
  ::-webkit-scrollbar-thumb {
    @apply bg-gray-300 rounded-full hover:bg-gray-400;
  }
  
  /* 链接样式 */
  a {
    @apply text-[#00684a] hover:text-[#005a3f] transition-colors duration-200;
  }

}

/* 组件相关样式 */
@layer components {
  /* 文本颜色工具类 */
  .text-primary {
    @apply !text-[--color-primary];
  }
  .text-error {
    @apply !text-[--color-error];
  }
  
  .bg-primary {
    @apply bg-[#00684a];
  }
  
  .transition-all-ease {
    @apply transition-all duration-200 ease-in-out;
  }
  
  /* === 布局组件 === */
  .layout-container {
    @apply flex min-h-screen bg-gray-50;
  }
  
  /* 用户资料 */
  .user-profile {
    @apply p-4 border-b border-gray-100 flex items-center;
  }
  
  .avatar {
    @apply w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center;
  }
  
  /* === 侧边栏 === */
  .sidebar {
    @apply w-[280px] h-screen bg-white border-r border-gray-100 flex flex-col 
         transition-all duration-300 fixed left-0 top-0 z-[100] overflow-y-auto
         shadow-[0_0_15px_rgba(0,0,0,0.05)];
  }
  
  .sidebar.collapsed {
    @apply w-20;
  }
  
  .sidebar-menu {
    @apply flex-1 overflow-y-auto py-4 px-3;
  }
  
  .sidebar-menu-item {
    @apply flex items-center py-3 px-4 text-gray-800 no-underline rounded-md 
         cursor-pointer transition-all duration-200 mb-1 relative
         hover:bg-[rgba(0,104,74,0.05)];
    /* 确保点击事件可以正常工作 */
    pointer-events: auto;
    z-index: 10;
  }
  
  .sidebar-menu-item i {
    @apply text-base w-6 text-center;
  }
  
  .sidebar-menu-text {
    @apply ml-2.5 transition-opacity duration-200;
  }
  
  .sidebar.collapsed .sidebar-menu-text {
    @apply opacity-0 invisible;
  }
  
  .sidebar-menu-item.active {
    @apply bg-[rgba(0,104,74,0.1)] text-[#00684A] font-medium;
  }
  
  .submenu-container {
    @apply mt-1 mb-2 space-y-1 overflow-hidden border-l border-gray-100 ml-4 pl-3 relative;
    /* 确保子菜单在父菜单之上 */
    z-index: 5;
  }
  
  .sidebar.collapsed .submenu-container {
    @apply border-l-0 pl-0;
  }
  
  .submenu-container .sidebar-menu-item {
    @apply py-2 pl-2 text-sm;
  }
  
  .sidebar-menu-item:hover {
    @apply bg-[rgba(0,104,74,0.05)];
  }
  
  .sidebar-toggle {
    @apply bg-transparent border-none text-xl text-gray-500 cursor-pointer p-1 
           rounded transition-all duration-200;
  }
  
  .sidebar-toggle:hover {
    @apply bg-gray-100;
  }
  
  /* === 主内容区域 === */
  .main-content {
    @apply flex-1 ml-[280px] transition-all duration-300 min-h-screen flex flex-col;
  }
  
  .main-content.sidebar-collapsed {
    @apply ml-20;
  }
  
  .content-container {
    @apply flex-1 p-5 overflow-auto;
  }
  
  /* === 面包屑导航 === */
  .breadcrumb {
    @apply flex items-center text-sm text-gray-500 mb-4;
  }
  
  .breadcrumb-item {
    @apply flex items-center;
  }
  
  .breadcrumb-item:not(:last-child)::after {
    content: "/";
    @apply mx-2;
  }
  
  .breadcrumb-item:last-child {
    @apply text-gray-700 font-medium;
  }
  
  /* === UI组件 === */
  
  /* 卡片组件 */
  .card {
    @apply bg-white rounded-lg shadow-sm border border-gray-200 p-4;
  }
  
  /* === 响应式调整 === */
  @screen sm {
    .content-container {
      @apply p-6;
    }
  }
  
  @screen md {
    .sidebar-toggle {
      @apply block;
    }
  }
  
  /* === 暗色模式 === */
  .dark .layout-container {
    @apply bg-gray-900;
  }
  
  .dark .content-container {
    @apply bg-gray-900 text-gray-200;
  }
}