fdb2 1.0.7 → 1.0.9

package/dist/public/index.css

@@ -1,1071 +1,1071 @@
-/* 数据库管理工具全局样式 - 现代桌面应用设计 */
-
-/* 基础变量 - 现代色彩方案 */
-:root {
-  /* 主色调 - 紫色渐变 */
-  --db-primary-color: #667eea;
-  --db-primary-dark: #5a67d8;
-  --db-primary-light: #7c8bf8;
-  --db-primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  
-  /* 辅助色彩 */
-  --db-secondary-color: #6c757d;
-  --db-accent-color: #10b981;
-  --db-warning-color: #f59e0b;
-  --db-danger-color: #ef4444;
-  --db-info-color: #3b82f6;
-  
-  /* 中性色彩 */
-  --db-light-color: #f8fafc;
-  --db-gray-light: #f1f5f9;
-  --db-gray-medium: #e2e8f0;
-  --db-gray-dark: #94a3b8;
-  --db-darker-color: #64748b;
-  --db-dark-color: #1e293b;
-  --db-black: #0f172a;
-  
-  /* 背景渐变 */
-  --db-bg-gradient: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
-  --db-card-gradient: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
-  
-  /* 阴影 */
-  --db-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
-  --db-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.05);
-  --db-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
-  --db-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);
-  --db-shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.15), 0 12px 24px rgba(0, 0, 0, 0.08);
-  
-  /* 圆角 */
-  --db-radius-sm: 6px;
-  --db-radius-md: 12px;
-  --db-radius-lg: 16px;
-  --db-radius-xl: 20px;
-  --db-radius-2xl: 24px;
-  
-  /* 间距 */
-  --db-spacing-xs: 0.5rem;
-  --db-spacing-sm: 0.75rem;
-  --db-spacing-md: 1rem;
-  --db-spacing-lg: 1.5rem;
-  --db-spacing-xl: 2rem;
-  --db-spacing-2xl: 3rem;
-  
-  /* 字体 */
-  --db-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-  --db-font-mono: 'SF Mono', Monaco, Inconsolata, 'Roboto Mono', monospace;
-}
-
-/* 全局布局 - 现代桌面应用风格 */
-* {
-  box-sizing: border-box;
-}
-
-body {
-  font-family: var(--db-font-family);
-  background: var(--db-bg-gradient);
-  color: var(--db-dark-color);
-  line-height: 1.6;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-/* 滚动条现代化 */
-::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-
-::-webkit-scrollbar-track {
-  background: var(--db-gray-light);
-  border-radius: var(--db-radius-sm);
-}
-
-::-webkit-scrollbar-thumb {
-  background: var(--db-gray-medium);
-  border-radius: var(--db-radius-sm);
-  transition: background 0.3s ease;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: var(--db-gray-dark);
-}
-
-/* 选择文本样式 */
-::selection {
-  background: rgba(102, 126, 234, 0.2);
-  color: var(--db-dark-color);
-}
-
-::-moz-selection {
-  background: rgba(102, 126, 234, 0.2);
-  color: var(--db-dark-color);
-}
-
-/* 现代卡片样式 */
-.card {
-  background: var(--db-card-gradient);
-  border: 1px solid var(--db-gray-medium);
-  border-radius: var(--db-radius-lg);
-  box-shadow: var(--db-shadow-md);
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  overflow: hidden;
-  backdrop-filter: blur(10px);
-}
-
-.card:hover {
-  transform: translateY(-4px);
-  box-shadow: var(--db-shadow-xl);
-  border-color: var(--db-primary-color);
-}
-
-.card-header {
-  background: linear-gradient(135deg, var(--db-light-color) 0%, var(--db-gray-light) 100%);
-  border-bottom: 1px solid var(--db-gray-medium);
-  padding: var(--db-spacing-lg);
-  font-weight: 700;
-  color: var(--db-dark-color);
-  position: relative;
-}
-
-.card-header::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 4px;
-  height: 100%;
-  background: var(--db-primary-gradient);
-  opacity: 0;
-  transition: opacity 0.3s ease;
-}
-
-.card:hover .card-header::before {
-  opacity: 1;
-}
-
-.card-body {
-  padding: var(--db-spacing-lg);
-}
-
-.card-footer {
-  background: var(--db-gray-light);
-  border-top: 1px solid var(--db-gray-medium);
-  padding: var(--db-spacing-md) var(--db-spacing-lg);
-}
-
-/* 现代表格样式 */
-.table {
-  background: white;
-  border-radius: var(--db-radius-lg);
-  overflow: hidden;
-  box-shadow: var(--db-shadow-sm);
-}
-
-.table th {
-  border-top: none;
-  font-weight: 700;
-  color: var(--db-dark-color);
-  background: var(--db-gray-light);
-  padding: var(--db-spacing-md) var(--db-spacing-lg);
-  letter-spacing: 0.025em;
-  text-transform: uppercase;
-  font-size: 0.875rem;
-}
-
-.table td {
-  padding: var(--db-spacing-md) var(--db-spacing-lg);
-  border-color: var(--db-gray-medium);
-  vertical-align: middle;
-}
-
-.table-striped tbody tr:nth-of-type(odd) {
-  background-color: rgba(248, 250, 252, 0.5);
-}
-
-.table-hover tbody tr:hover {
-  background-color: rgba(102, 126, 234, 0.05);
-  transform: translateX(2px);
-  transition: all 0.3s ease;
-}
-
-.table-responsive {
-  border-radius: var(--db-radius-lg);
-  box-shadow: var(--db-shadow-sm);
-}
-
-/* 现代按钮样式 */
-.btn {
-  border-radius: var(--db-radius-md);
-  font-weight: 600;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  border: none;
-  position: relative;
-  overflow: hidden;
-  letter-spacing: 0.025em;
-  box-shadow: var(--db-shadow-sm);
-}
-
-.btn::before {
-  content: '';
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 0;
-  height: 0;
-  border-radius: 50%;
-  background: rgba(255, 255, 255, 0.2);
-  transform: translate(-50%, -50%);
-  transition: width 0.6s, height 0.6s;
-}
-
-.btn:active::before {
-  width: 300px;
-  height: 300px;
-}
-
-.btn:hover {
-  transform: translateY(-2px);
-  box-shadow: var(--db-shadow-lg);
-}
-
-.btn:active {
-  transform: translateY(0);
-}
-
-/* 主要按钮 */
-.btn-primary {
-  background: var(--db-primary-gradient);
-  color: white;
-}
-
-.btn-primary:hover {
-  background: var(--db-primary-dark);
-  color: white;
-}
-
-/* 次要按钮 */
-.btn-secondary {
-  background: var(--db-gray-light);
-  color: var(--db-darker-color);
-  border: 1px solid var(--db-gray-medium);
-}
-
-.btn-secondary:hover {
-  background: var(--db-gray-medium);
-  color: var(--db-dark-color);
-}
-
-/* 成功按钮 */
-.btn-success {
-  background: linear-gradient(135deg, var(--db-accent-color) 0%, #059669 100%);
-  color: white;
-}
-
-/* 警告按钮 */
-.btn-warning {
-  background: linear-gradient(135deg, var(--db-warning-color) 0%, #d97706 100%);
-  color: white;
-}
-
-/* 危险按钮 */
-.btn-danger {
-  background: linear-gradient(135deg, var(--db-danger-color) 0%, #dc2626 100%);
-  color: white;
-}
-
-/* 信息按钮 */
-.btn-info {
-  background: linear-gradient(135deg, var(--db-info-color) 0%, #2563eb 100%);
-  color: white;
-}
-
-/* 轮廓按钮 */
-.btn-outline-primary {
-  background: transparent;
-  color: var(--db-primary-color);
-  border: 2px solid var(--db-primary-color);
-}
-
-.btn-outline-primary:hover {
-  background: var(--db-primary-gradient);
-  color: white;
-  border-color: transparent;
-}
-
-/* 按钮组 */
-.btn-group-sm > .btn {
-  font-size: 0.875rem;
-  padding: 0.5rem var(--db-spacing-md);
-  border-radius: var(--db-radius-sm);
-}
-
-/* 现代徽章样式 */
-.badge {
-  font-size: 0.75rem;
-  font-weight: 600;
-  border-radius: var(--db-radius-sm);
-  padding: 0.25rem 0.75rem;
-  letter-spacing: 0.025em;
-  text-transform: uppercase;
-  box-shadow: var(--db-shadow-sm);
-}
-
-.badge.bg-primary {
-  background: var(--db-primary-gradient) !important;
-}
-
-.badge.bg-success {
-  background: linear-gradient(135deg, var(--db-accent-color) 0%, #059669 100%) !important;
-}
-
-.badge.bg-warning {
-  background: linear-gradient(135deg, var(--db-warning-color) 0%, #d97706 100%) !important;
-}
-
-.badge.bg-danger {
-  background: linear-gradient(135deg, var(--db-danger-color) 0%, #dc2626 100%) !important;
-}
-
-.badge.bg-info {
-  background: linear-gradient(135deg, var(--db-info-color) 0%, #2563eb 100%) !important;
-}
-
-/* 现代导航样式 */
-.navbar {
-  background: var(--db-card-gradient);
-  border-bottom: 1px solid var(--db-gray-medium);
-  box-shadow: var(--db-shadow-md);
-  backdrop-filter: blur(10px);
-}
-
-.navbar-brand {
-  font-weight: 800;
-  font-size: 1.25rem;
-  color: var(--db-primary-color);
-  text-decoration: none;
-  transition: all 0.3s ease;
-  display: flex;
-  align-items: center;
-  gap: var(--db-spacing-sm);
-}
-
-.navbar-brand:hover {
-  color: var(--db-primary-dark);
-  transform: translateX(2px);
-}
-
-.navbar-nav .nav-link {
-  font-weight: 600;
-  border-radius: var(--db-radius-md);
-  margin: 0 var(--db-spacing-xs);
-  transition: all 0.3s ease;
-  position: relative;
-  overflow: hidden;
-}
-
-.navbar-nav .nav-link::before {
-  content: '';
-  position: absolute;
-  bottom: 0;
-  left: 50%;
-  width: 0;
-  height: 2px;
-  background: var(--db-primary-gradient);
-  transform: translateX(-50%);
-  transition: width 0.3s ease;
-}
-
-.navbar-nav .nav-link:hover {
-  background-color: rgba(102, 126, 234, 0.1);
-  color: var(--db-primary-color);
-}
-
-.navbar-nav .nav-link:hover::before {
-  width: 80%;
-}
-
-.navbar-nav .nav-link.active {
-  background: var(--db-primary-gradient);
-  color: white;
-  font-weight: 700;
-  box-shadow: var(--db-shadow-md);
-}
-
-.navbar-nav .nav-link.active::before {
-  width: 100%;
-}
-
-/* 现代模态框样式 */
-.modal-content {
-  border: none;
-  border-radius: var(--db-radius-xl);
-  box-shadow: var(--db-shadow-2xl);
-  overflow: hidden;
-  backdrop-filter: blur(10px);
-}
-
-.modal-header {
-  background: var(--db-card-gradient);
-  border-bottom: 1px solid var(--db-gray-medium);
-  padding: var(--db-spacing-xl);
-  position: relative;
-}
-
-.modal-header::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 4px;
-  background: var(--db-primary-gradient);
-}
-
-.modal-title {
-  font-weight: 700;
-  color: var(--db-dark-color);
-  font-size: 1.5rem;
-}
-
-.modal-body {
-  padding: var(--db-spacing-xl);
-  max-height: 70vh;
-  overflow-y: auto;
-}
-
-.modal-footer {
-  background: var(--db-gray-light);
-  border-top: 1px solid var(--db-gray-medium);
-  padding: var(--db-spacing-lg) var(--db-spacing-xl);
-  display: flex;
-  justify-content: flex-end;
-  gap: var(--db-spacing-md);
-}
-
-.btn-close {
-  background: var(--db-gray-light);
-  border: none;
-  border-radius: var(--db-radius-md);
-  width: 32px;
-  height: 32px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.3s ease;
-}
-
-.btn-close:hover {
-  background: var(--db-danger-color);
-  color: white;
-  transform: rotate(90deg);
-}
-
-/* 现代表单样式 */
-.form-control {
-  border-radius: var(--db-radius-md);
-  border: 2px solid var(--db-gray-medium);
-  padding: 0.75rem var(--db-spacing-md);
-  font-size: 0.95rem;
-  transition: all 0.3s ease;
-  background: white;
-  font-weight: 500;
-}
-
-.form-control:focus {
-  outline: none;
-  border-color: var(--db-primary-color);
-  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
-  transform: translateY(-1px);
-}
-
-.form-select {
-  border-radius: var(--db-radius-md);
-  border: 2px solid var(--db-gray-medium);
-  padding: 0.75rem var(--db-spacing-md);
-  font-size: 0.95rem;
-  transition: all 0.3s ease;
-  background: white;
-  font-weight: 500;
-  cursor: pointer;
-}
-
-.form-select:focus {
-  outline: none;
-  border-color: var(--db-primary-color);
-  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
-  transform: translateY(-1px);
-}
-
-.form-label {
-  font-weight: 700;
-  color: var(--db-dark-color);
-  margin-bottom: var(--db-spacing-sm);
-  font-size: 0.9rem;
-  letter-spacing: 0.025em;
-  display: flex;
-  align-items: center;
-  gap: var(--db-spacing-xs);
-}
-
-.form-text {
-  font-size: 0.875rem;
-  color: var(--db-gray-dark);
-  margin-top: var(--db-spacing-xs);
-}
-
-.form-check-input {
-  width: 1.25rem;
-  height: 1.25rem;
-  border: 2px solid var(--db-gray-medium);
-  border-radius: var(--db-radius-sm);
-  cursor: pointer;
-  transition: all 0.3s ease;
-  accent-color: var(--db-primary-color);
-}
-
-.form-check-input:checked {
-  background: var(--db-primary-gradient);
-  border-color: var(--db-primary-color);
-}
-
-.form-check-label {
-  font-weight: 500;
-  color: var(--db-darker-color);
-  cursor: pointer;
-  margin-left: var(--db-spacing-sm);
-}
-
-/* 代码样式 */
-code {
-  background-color: #e9ecef;
-  color: #d63384;
-  padding: 0.2rem 0.4rem;
-  border-radius: 3px;
-  font-size: 0.875em;
-}
-
-pre {
-  background-color: #f8f9fa;
-  border: 1px solid #e9ecef;
-  border-radius: 6px;
-  padding: 1rem;
-  margin: 0;
-  white-space: pre-wrap;
-  word-wrap: break-word;
-}
-
-/* 警告框样式 */
-.alert {
-  border: none;
-  border-radius: 6px;
-  font-weight: 500;
-}
-
-.alert-success {
-  background-color: #d4edda;
-  color: #155724;
-}
-
-.alert-danger {
-  background-color: #f8d7da;
-  color: #721c24;
-}
-
-.alert-warning {
-  background-color: #fff3cd;
-  color: #856404;
-}
-
-.alert-info {
-  background-color: #d1ecf1;
-  color: #0c5460;
-}
-
-/* 工具提示样式 */
-.tooltip {
-  font-size: 0.875rem;
-}
-
-/* 下拉菜单样式 */
-.dropdown-menu {
-  border: none;
-  border-radius: 6px;
-  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
-}
-
-.dropdown-item {
-  border-radius: 4px;
-  margin: 2px 4px;
-  transition: all 0.2s ease;
-}
-
-.dropdown-item:hover {
-  background-color: #f8f9fa;
-  transform: translateX(2px);
-}
-
-/* 列表组样式 */
-.list-group-item {
-  border: none;
-  border-radius: 6px;
-  margin-bottom: 4px;
-  transition: all 0.2s ease;
-}
-
-.list-group-item:hover {
-  background-color: #f8f9fa;
-  transform: translateX(4px);
-}
-
-/* 页面头部样式 */
-.page-header {
-  background: linear-gradient(135deg, var(--db-primary-color) 0%, #0056b3 100%);
-  color: white;
-  padding: 2rem 0;
-  margin-bottom: 2rem;
-}
-
-.page-header h1 {
-  font-weight: 700;
-  margin-bottom: 0.5rem;
-}
-
-.page-header p {
-  opacity: 0.9;
-  font-size: 1.1rem;
-}
-
-/* 响应式设计 */
-@media (max-width: 768px) {
-  .container-fluid {
-    padding-left: 15px;
-    padding-right: 15px;
-  }
-  
-  .card {
-    margin-bottom: 1rem;
-  }
-  
-  .btn-group {
-    flex-direction: column;
-  }
-  
-  .table-responsive {
-    font-size: 0.875rem;
-  }
-}
-
-/* 现代动画效果 */
-@keyframes fadeIn {
-  from { opacity: 0; transform: translateY(20px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-
-@keyframes slideInRight {
-  from { opacity: 0; transform: translateX(30px); }
-  to { opacity: 1; transform: translateX(0); }
-}
-
-@keyframes slideInLeft {
-  from { opacity: 0; transform: translateX(-30px); }
-  to { opacity: 1; transform: translateX(0); }
-}
-
-@keyframes scaleIn {
-  from { opacity: 0; transform: scale(0.9); }
-  to { opacity: 1; transform: scale(1); }
-}
-
-@keyframes float {
-  0%, 100% { transform: translateY(0px); }
-  50% { transform: translateY(-10px); }
-}
-
-@keyframes pulse {
-  0%, 100% { opacity: 1; transform: scale(1); }
-  50% { opacity: 0.8; transform: scale(1.05); }
-}
-
-@keyframes glow {
-  0%, 100% { box-shadow: 0 0 5px rgba(102, 126, 234, 0.3); }
-  50% { box-shadow: 0 0 20px rgba(102, 126, 234, 0.6); }
-}
-
-/* 动画类 */
-.fade-in {
-  animation: fadeIn 0.5s ease-out;
-}
-
-.slide-in-right {
-  animation: slideInRight 0.5s ease-out;
-}
-
-.slide-in-left {
-  animation: slideInLeft 0.5s ease-out;
-}
-
-.scale-in {
-  animation: scaleIn 0.3s ease-out;
-}
-
-.float-animation {
-  animation: float 3s ease-in-out infinite;
-}
-
-.pulse-animation {
-  animation: pulse 2s ease-in-out infinite;
-}
-
-.glow-animation {
-  animation: glow 2s ease-in-out infinite;
-}
-
-/* 滚动条样式 */
-::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-
-::-webkit-scrollbar-track {
-  background: #f1f1f1;
-  border-radius: 4px;
-}
-
-::-webkit-scrollbar-thumb {
-  background: #c1c1c1;
-  border-radius: 4px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: #a8a8a8;
-}
-
-/* 加载状态 */
-.loading {
-  opacity: 0.6;
-  pointer-events: none;
-}
-
-.loading::after {
-  content: '';
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 20px;
-  height: 20px;
-  margin: -10px 0 0 -10px;
-  border: 2px solid #f3f3f3;
-  border-top: 2px solid var(--db-primary-color);
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
-}
-
-/* 现代状态样式 */
-.status-online {
-  color: var(--db-accent-color);
-  display: flex;
-  align-items: center;
-  gap: var(--db-spacing-xs);
-}
-
-.status-offline {
-  color: var(--db-gray-dark);
-  display: flex;
-  align-items: center;
-  gap: var(--db-spacing-xs);
-}
-
-.status-error {
-  color: var(--db-danger-color);
-  display: flex;
-  align-items: center;
-  gap: var(--db-spacing-xs);
-}
-
-.status-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: currentColor;
-  animation: pulse 2s ease-in-out infinite;
-}
-
-/* 数据库类型样式 */
-.db-icon-mysql { 
-  color: #00758f; 
-  background: linear-gradient(135deg, #00758f 0%, #005a70 100%);
-}
-.db-icon-postgres { 
-  color: #336791; 
-  background: linear-gradient(135deg, #336791 0%, #2a5278 100%);
-}
-.db-icon-sqlite { 
-  color: #003b57; 
-  background: linear-gradient(135deg, #003b57 0%, #002d42 100%);
-}
-.db-icon-mssql { 
-  color: #cc2927; 
-  background: linear-gradient(135deg, #cc2927 0%, #a62220 100%);
-}
-.db-icon-oracle { 
-  color: #f80000; 
-  background: linear-gradient(135deg, #f80000 0%, #d40000 100%);
-}
-
-/* 现代工具类 */
-.text-gradient {
-  background: var(--db-primary-gradient);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-}
-
-.bg-gradient {
-  background: var(--db-primary-gradient);
-}
-
-.bg-glass {
-  background: rgba(255, 255, 255, 0.8);
-  backdrop-filter: blur(10px);
-  border: 1px solid rgba(255, 255, 255, 0.2);
-}
-
-.shadow-soft {
-  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
-}
-
-.border-gradient {
-  border: 1px solid;
-  border-image: var(--db-primary-gradient) 1;
-}
-
-.hover-lift {
-  transition: transform 0.3s ease;
-}
-
-.hover-lift:hover {
-  transform: translateY(-4px);
-}
-
-.hover-scale {
-  transition: transform 0.3s ease;
-}
-
-.hover-scale:hover {
-  transform: scale(1.02);
-}
-
-/* 加载状态 */
-.loading-overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(255, 255, 255, 0.9);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 9999;
-  backdrop-filter: blur(2px);
-}
-
-.loading-spinner {
-  width: 40px;
-  height: 40px;
-  border: 4px solid var(--db-gray-light);
-  border-top: 4px solid var(--db-primary-color);
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
-}
-
-/* 响应式工具类 */
-.container-fluid {
-  padding-left: var(--db-spacing-lg);
-  padding-right: var(--db-spacing-lg);
-}
-
-@media (max-width: 768px) {
-  .container-fluid {
-    padding-left: var(--db-spacing-md);
-    padding-right: var(--db-spacing-md);
-  }
-}
-
-@media (max-width: 480px) {
-  .container-fluid {
-    padding-left: var(--db-spacing-sm);
-    padding-right: var(--db-spacing-sm);
-  }
-}
-
-/* 暗色模式支持 */
-@media (prefers-color-scheme: dark) {
-  :root {
-    --db-light-color: #1e293b;
-    --db-gray-light: #334155;
-    --db-gray-medium: #475569;
-    --db-gray-dark: #64748b;
-    --db-darker-color: #94a3b8;
-    --db-dark-color: #f1f5f9;
-    --db-black: #f8fafc;
-    
-    --db-bg-gradient: linear-gradient(135deg, #1e293b 0%, #334155 100%);
-    --db-card-gradient: linear-gradient(135deg, #334155 0%, #1e293b 100%);
-  }
-  
-  .card {
-    border-color: #475569;
-  }
-  
-  .form-control,
-  .form-select {
-    background: #1e293b;
-    border-color: #475569;
-    color: #f1f5f9;
-  }
-  
-  .navbar {
-    background: linear-gradient(135deg, #334155 0%, #1e293b 100%);
-  }
-  
-  .table {
-    background: #1e293b;
-  }
-  
-  .table th {
-    background: #475569;
-    color: #f1f5f9;
-  }
-}
+/* 数据库管理工具全局样式 - 现代桌面应用设计 */
+
+/* 基础变量 - 现代色彩方案 */
+:root {
+  /* 主色调 - 紫色渐变 */
+  --db-primary-color: #667eea;
+  --db-primary-dark: #5a67d8;
+  --db-primary-light: #7c8bf8;
+  --db-primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  
+  /* 辅助色彩 */
+  --db-secondary-color: #6c757d;
+  --db-accent-color: #10b981;
+  --db-warning-color: #f59e0b;
+  --db-danger-color: #ef4444;
+  --db-info-color: #3b82f6;
+  
+  /* 中性色彩 */
+  --db-light-color: #f8fafc;
+  --db-gray-light: #f1f5f9;
+  --db-gray-medium: #e2e8f0;
+  --db-gray-dark: #94a3b8;
+  --db-darker-color: #64748b;
+  --db-dark-color: #1e293b;
+  --db-black: #0f172a;
+  
+  /* 背景渐变 */
+  --db-bg-gradient: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
+  --db-card-gradient: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
+  
+  /* 阴影 */
+  --db-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
+  --db-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.05);
+  --db-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
+  --db-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);
+  --db-shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.15), 0 12px 24px rgba(0, 0, 0, 0.08);
+  
+  /* 圆角 */
+  --db-radius-sm: 6px;
+  --db-radius-md: 12px;
+  --db-radius-lg: 16px;
+  --db-radius-xl: 20px;
+  --db-radius-2xl: 24px;
+  
+  /* 间距 */
+  --db-spacing-xs: 0.5rem;
+  --db-spacing-sm: 0.75rem;
+  --db-spacing-md: 1rem;
+  --db-spacing-lg: 1.5rem;
+  --db-spacing-xl: 2rem;
+  --db-spacing-2xl: 3rem;
+  
+  /* 字体 */
+  --db-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --db-font-mono: 'SF Mono', Monaco, Inconsolata, 'Roboto Mono', monospace;
+}
+
+/* 全局布局 - 现代桌面应用风格 */
+* {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: var(--db-font-family);
+  background: var(--db-bg-gradient);
+  color: var(--db-dark-color);
+  line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* 滚动条现代化 */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--db-gray-light);
+  border-radius: var(--db-radius-sm);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--db-gray-medium);
+  border-radius: var(--db-radius-sm);
+  transition: background 0.3s ease;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--db-gray-dark);
+}
+
+/* 选择文本样式 */
+::selection {
+  background: rgba(102, 126, 234, 0.2);
+  color: var(--db-dark-color);
+}
+
+::-moz-selection {
+  background: rgba(102, 126, 234, 0.2);
+  color: var(--db-dark-color);
+}
+
+/* 现代卡片样式 */
+.card {
+  background: var(--db-card-gradient);
+  border: 1px solid var(--db-gray-medium);
+  border-radius: var(--db-radius-lg);
+  box-shadow: var(--db-shadow-md);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  overflow: hidden;
+  backdrop-filter: blur(10px);
+}
+
+.card:hover {
+  transform: translateY(-4px);
+  box-shadow: var(--db-shadow-xl);
+  border-color: var(--db-primary-color);
+}
+
+.card-header {
+  background: linear-gradient(135deg, var(--db-light-color) 0%, var(--db-gray-light) 100%);
+  border-bottom: 1px solid var(--db-gray-medium);
+  padding: var(--db-spacing-lg);
+  font-weight: 700;
+  color: var(--db-dark-color);
+  position: relative;
+}
+
+.card-header::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 4px;
+  height: 100%;
+  background: var(--db-primary-gradient);
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.card:hover .card-header::before {
+  opacity: 1;
+}
+
+.card-body {
+  padding: var(--db-spacing-lg);
+}
+
+.card-footer {
+  background: var(--db-gray-light);
+  border-top: 1px solid var(--db-gray-medium);
+  padding: var(--db-spacing-md) var(--db-spacing-lg);
+}
+
+/* 现代表格样式 */
+.table {
+  background: white;
+  border-radius: var(--db-radius-lg);
+  overflow: hidden;
+  box-shadow: var(--db-shadow-sm);
+}
+
+.table th {
+  border-top: none;
+  font-weight: 700;
+  color: var(--db-dark-color);
+  background: var(--db-gray-light);
+  padding: var(--db-spacing-md) var(--db-spacing-lg);
+  letter-spacing: 0.025em;
+  text-transform: uppercase;
+  font-size: 0.875rem;
+}
+
+.table td {
+  padding: var(--db-spacing-md) var(--db-spacing-lg);
+  border-color: var(--db-gray-medium);
+  vertical-align: middle;
+}
+
+.table-striped tbody tr:nth-of-type(odd) {
+  background-color: rgba(248, 250, 252, 0.5);
+}
+
+.table-hover tbody tr:hover {
+  background-color: rgba(102, 126, 234, 0.05);
+  transform: translateX(2px);
+  transition: all 0.3s ease;
+}
+
+.table-responsive {
+  border-radius: var(--db-radius-lg);
+  box-shadow: var(--db-shadow-sm);
+}
+
+/* 现代按钮样式 */
+.btn {
+  border-radius: var(--db-radius-md);
+  font-weight: 600;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  border: none;
+  position: relative;
+  overflow: hidden;
+  letter-spacing: 0.025em;
+  box-shadow: var(--db-shadow-sm);
+}
+
+.btn::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 0;
+  height: 0;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.2);
+  transform: translate(-50%, -50%);
+  transition: width 0.6s, height 0.6s;
+}
+
+.btn:active::before {
+  width: 300px;
+  height: 300px;
+}
+
+.btn:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--db-shadow-lg);
+}
+
+.btn:active {
+  transform: translateY(0);
+}
+
+/* 主要按钮 */
+.btn-primary {
+  background: var(--db-primary-gradient);
+  color: white;
+}
+
+.btn-primary:hover {
+  background: var(--db-primary-dark);
+  color: white;
+}
+
+/* 次要按钮 */
+.btn-secondary {
+  background: var(--db-gray-light);
+  color: var(--db-darker-color);
+  border: 1px solid var(--db-gray-medium);
+}
+
+.btn-secondary:hover {
+  background: var(--db-gray-medium);
+  color: var(--db-dark-color);
+}
+
+/* 成功按钮 */
+.btn-success {
+  background: linear-gradient(135deg, var(--db-accent-color) 0%, #059669 100%);
+  color: white;
+}
+
+/* 警告按钮 */
+.btn-warning {
+  background: linear-gradient(135deg, var(--db-warning-color) 0%, #d97706 100%);
+  color: white;
+}
+
+/* 危险按钮 */
+.btn-danger {
+  background: linear-gradient(135deg, var(--db-danger-color) 0%, #dc2626 100%);
+  color: white;
+}
+
+/* 信息按钮 */
+.btn-info {
+  background: linear-gradient(135deg, var(--db-info-color) 0%, #2563eb 100%);
+  color: white;
+}
+
+/* 轮廓按钮 */
+.btn-outline-primary {
+  background: transparent;
+  color: var(--db-primary-color);
+  border: 2px solid var(--db-primary-color);
+}
+
+.btn-outline-primary:hover {
+  background: var(--db-primary-gradient);
+  color: white;
+  border-color: transparent;
+}
+
+/* 按钮组 */
+.btn-group-sm > .btn {
+  font-size: 0.875rem;
+  padding: 0.5rem var(--db-spacing-md);
+  border-radius: var(--db-radius-sm);
+}
+
+/* 现代徽章样式 */
+.badge {
+  font-size: 0.75rem;
+  font-weight: 600;
+  border-radius: var(--db-radius-sm);
+  padding: 0.25rem 0.75rem;
+  letter-spacing: 0.025em;
+  text-transform: uppercase;
+  box-shadow: var(--db-shadow-sm);
+}
+
+.badge.bg-primary {
+  background: var(--db-primary-gradient) !important;
+}
+
+.badge.bg-success {
+  background: linear-gradient(135deg, var(--db-accent-color) 0%, #059669 100%) !important;
+}
+
+.badge.bg-warning {
+  background: linear-gradient(135deg, var(--db-warning-color) 0%, #d97706 100%) !important;
+}
+
+.badge.bg-danger {
+  background: linear-gradient(135deg, var(--db-danger-color) 0%, #dc2626 100%) !important;
+}
+
+.badge.bg-info {
+  background: linear-gradient(135deg, var(--db-info-color) 0%, #2563eb 100%) !important;
+}
+
+/* 现代导航样式 */
+.navbar {
+  background: var(--db-card-gradient);
+  border-bottom: 1px solid var(--db-gray-medium);
+  box-shadow: var(--db-shadow-md);
+  backdrop-filter: blur(10px);
+}
+
+.navbar-brand {
+  font-weight: 800;
+  font-size: 1.25rem;
+  color: var(--db-primary-color);
+  text-decoration: none;
+  transition: all 0.3s ease;
+  display: flex;
+  align-items: center;
+  gap: var(--db-spacing-sm);
+}
+
+.navbar-brand:hover {
+  color: var(--db-primary-dark);
+  transform: translateX(2px);
+}
+
+.navbar-nav .nav-link {
+  font-weight: 600;
+  border-radius: var(--db-radius-md);
+  margin: 0 var(--db-spacing-xs);
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.navbar-nav .nav-link::before {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  width: 0;
+  height: 2px;
+  background: var(--db-primary-gradient);
+  transform: translateX(-50%);
+  transition: width 0.3s ease;
+}
+
+.navbar-nav .nav-link:hover {
+  background-color: rgba(102, 126, 234, 0.1);
+  color: var(--db-primary-color);
+}
+
+.navbar-nav .nav-link:hover::before {
+  width: 80%;
+}
+
+.navbar-nav .nav-link.active {
+  background: var(--db-primary-gradient);
+  color: white;
+  font-weight: 700;
+  box-shadow: var(--db-shadow-md);
+}
+
+.navbar-nav .nav-link.active::before {
+  width: 100%;
+}
+
+/* 现代模态框样式 */
+.modal-content {
+  border: none;
+  border-radius: var(--db-radius-xl);
+  box-shadow: var(--db-shadow-2xl);
+  overflow: hidden;
+  backdrop-filter: blur(10px);
+}
+
+.modal-header {
+  background: var(--db-card-gradient);
+  border-bottom: 1px solid var(--db-gray-medium);
+  padding: var(--db-spacing-xl);
+  position: relative;
+}
+
+.modal-header::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 4px;
+  background: var(--db-primary-gradient);
+}
+
+.modal-title {
+  font-weight: 700;
+  color: var(--db-dark-color);
+  font-size: 1.5rem;
+}
+
+.modal-body {
+  padding: var(--db-spacing-xl);
+  max-height: 70vh;
+  overflow-y: auto;
+}
+
+.modal-footer {
+  background: var(--db-gray-light);
+  border-top: 1px solid var(--db-gray-medium);
+  padding: var(--db-spacing-lg) var(--db-spacing-xl);
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--db-spacing-md);
+}
+
+.btn-close {
+  background: var(--db-gray-light);
+  border: none;
+  border-radius: var(--db-radius-md);
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease;
+}
+
+.btn-close:hover {
+  background: var(--db-danger-color);
+  color: white;
+  transform: rotate(90deg);
+}
+
+/* 现代表单样式 */
+.form-control {
+  border-radius: var(--db-radius-md);
+  border: 2px solid var(--db-gray-medium);
+  padding: 0.75rem var(--db-spacing-md);
+  font-size: 0.95rem;
+  transition: all 0.3s ease;
+  background: white;
+  font-weight: 500;
+}
+
+.form-control:focus {
+  outline: none;
+  border-color: var(--db-primary-color);
+  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+  transform: translateY(-1px);
+}
+
+.form-select {
+  border-radius: var(--db-radius-md);
+  border: 2px solid var(--db-gray-medium);
+  padding: 0.75rem var(--db-spacing-md);
+  font-size: 0.95rem;
+  transition: all 0.3s ease;
+  background: white;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.form-select:focus {
+  outline: none;
+  border-color: var(--db-primary-color);
+  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+  transform: translateY(-1px);
+}
+
+.form-label {
+  font-weight: 700;
+  color: var(--db-dark-color);
+  margin-bottom: var(--db-spacing-sm);
+  font-size: 0.9rem;
+  letter-spacing: 0.025em;
+  display: flex;
+  align-items: center;
+  gap: var(--db-spacing-xs);
+}
+
+.form-text {
+  font-size: 0.875rem;
+  color: var(--db-gray-dark);
+  margin-top: var(--db-spacing-xs);
+}
+
+.form-check-input {
+  width: 1.25rem;
+  height: 1.25rem;
+  border: 2px solid var(--db-gray-medium);
+  border-radius: var(--db-radius-sm);
+  cursor: pointer;
+  transition: all 0.3s ease;
+  accent-color: var(--db-primary-color);
+}
+
+.form-check-input:checked {
+  background: var(--db-primary-gradient);
+  border-color: var(--db-primary-color);
+}
+
+.form-check-label {
+  font-weight: 500;
+  color: var(--db-darker-color);
+  cursor: pointer;
+  margin-left: var(--db-spacing-sm);
+}
+
+/* 代码样式 */
+code {
+  background-color: #e9ecef;
+  color: #d63384;
+  padding: 0.2rem 0.4rem;
+  border-radius: 3px;
+  font-size: 0.875em;
+}
+
+pre {
+  background-color: #f8f9fa;
+  border: 1px solid #e9ecef;
+  border-radius: 6px;
+  padding: 1rem;
+  margin: 0;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+/* 警告框样式 */
+.alert {
+  border: none;
+  border-radius: 6px;
+  font-weight: 500;
+}
+
+.alert-success {
+  background-color: #d4edda;
+  color: #155724;
+}
+
+.alert-danger {
+  background-color: #f8d7da;
+  color: #721c24;
+}
+
+.alert-warning {
+  background-color: #fff3cd;
+  color: #856404;
+}
+
+.alert-info {
+  background-color: #d1ecf1;
+  color: #0c5460;
+}
+
+/* 工具提示样式 */
+.tooltip {
+  font-size: 0.875rem;
+}
+
+/* 下拉菜单样式 */
+.dropdown-menu {
+  border: none;
+  border-radius: 6px;
+  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
+}
+
+.dropdown-item {
+  border-radius: 4px;
+  margin: 2px 4px;
+  transition: all 0.2s ease;
+}
+
+.dropdown-item:hover {
+  background-color: #f8f9fa;
+  transform: translateX(2px);
+}
+
+/* 列表组样式 */
+.list-group-item {
+  border: none;
+  border-radius: 6px;
+  margin-bottom: 4px;
+  transition: all 0.2s ease;
+}
+
+.list-group-item:hover {
+  background-color: #f8f9fa;
+  transform: translateX(4px);
+}
+
+/* 页面头部样式 */
+.page-header {
+  background: linear-gradient(135deg, var(--db-primary-color) 0%, #0056b3 100%);
+  color: white;
+  padding: 2rem 0;
+  margin-bottom: 2rem;
+}
+
+.page-header h1 {
+  font-weight: 700;
+  margin-bottom: 0.5rem;
+}
+
+.page-header p {
+  opacity: 0.9;
+  font-size: 1.1rem;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .container-fluid {
+    padding-left: 15px;
+    padding-right: 15px;
+  }
+  
+  .card {
+    margin-bottom: 1rem;
+  }
+  
+  .btn-group {
+    flex-direction: column;
+  }
+  
+  .table-responsive {
+    font-size: 0.875rem;
+  }
+}
+
+/* 现代动画效果 */
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(20px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes slideInRight {
+  from { opacity: 0; transform: translateX(30px); }
+  to { opacity: 1; transform: translateX(0); }
+}
+
+@keyframes slideInLeft {
+  from { opacity: 0; transform: translateX(-30px); }
+  to { opacity: 1; transform: translateX(0); }
+}
+
+@keyframes scaleIn {
+  from { opacity: 0; transform: scale(0.9); }
+  to { opacity: 1; transform: scale(1); }
+}
+
+@keyframes float {
+  0%, 100% { transform: translateY(0px); }
+  50% { transform: translateY(-10px); }
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50% { opacity: 0.8; transform: scale(1.05); }
+}
+
+@keyframes glow {
+  0%, 100% { box-shadow: 0 0 5px rgba(102, 126, 234, 0.3); }
+  50% { box-shadow: 0 0 20px rgba(102, 126, 234, 0.6); }
+}
+
+/* 动画类 */
+.fade-in {
+  animation: fadeIn 0.5s ease-out;
+}
+
+.slide-in-right {
+  animation: slideInRight 0.5s ease-out;
+}
+
+.slide-in-left {
+  animation: slideInLeft 0.5s ease-out;
+}
+
+.scale-in {
+  animation: scaleIn 0.3s ease-out;
+}
+
+.float-animation {
+  animation: float 3s ease-in-out infinite;
+}
+
+.pulse-animation {
+  animation: pulse 2s ease-in-out infinite;
+}
+
+.glow-animation {
+  animation: glow 2s ease-in-out infinite;
+}
+
+/* 滚动条样式 */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
+}
+
+/* 加载状态 */
+.loading {
+  opacity: 0.6;
+  pointer-events: none;
+}
+
+.loading::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 20px;
+  height: 20px;
+  margin: -10px 0 0 -10px;
+  border: 2px solid #f3f3f3;
+  border-top: 2px solid var(--db-primary-color);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+/* 现代状态样式 */
+.status-online {
+  color: var(--db-accent-color);
+  display: flex;
+  align-items: center;
+  gap: var(--db-spacing-xs);
+}
+
+.status-offline {
+  color: var(--db-gray-dark);
+  display: flex;
+  align-items: center;
+  gap: var(--db-spacing-xs);
+}
+
+.status-error {
+  color: var(--db-danger-color);
+  display: flex;
+  align-items: center;
+  gap: var(--db-spacing-xs);
+}
+
+.status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: currentColor;
+  animation: pulse 2s ease-in-out infinite;
+}
+
+/* 数据库类型样式 */
+.db-icon-mysql { 
+  color: #00758f; 
+  background: linear-gradient(135deg, #00758f 0%, #005a70 100%);
+}
+.db-icon-postgres { 
+  color: #336791; 
+  background: linear-gradient(135deg, #336791 0%, #2a5278 100%);
+}
+.db-icon-sqlite { 
+  color: #003b57; 
+  background: linear-gradient(135deg, #003b57 0%, #002d42 100%);
+}
+.db-icon-mssql { 
+  color: #cc2927; 
+  background: linear-gradient(135deg, #cc2927 0%, #a62220 100%);
+}
+.db-icon-oracle { 
+  color: #f80000; 
+  background: linear-gradient(135deg, #f80000 0%, #d40000 100%);
+}
+
+/* 现代工具类 */
+.text-gradient {
+  background: var(--db-primary-gradient);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.bg-gradient {
+  background: var(--db-primary-gradient);
+}
+
+.bg-glass {
+  background: rgba(255, 255, 255, 0.8);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.shadow-soft {
+  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
+}
+
+.border-gradient {
+  border: 1px solid;
+  border-image: var(--db-primary-gradient) 1;
+}
+
+.hover-lift {
+  transition: transform 0.3s ease;
+}
+
+.hover-lift:hover {
+  transform: translateY(-4px);
+}
+
+.hover-scale {
+  transition: transform 0.3s ease;
+}
+
+.hover-scale:hover {
+  transform: scale(1.02);
+}
+
+/* 加载状态 */
+.loading-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(255, 255, 255, 0.9);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 9999;
+  backdrop-filter: blur(2px);
+}
+
+.loading-spinner {
+  width: 40px;
+  height: 40px;
+  border: 4px solid var(--db-gray-light);
+  border-top: 4px solid var(--db-primary-color);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+/* 响应式工具类 */
+.container-fluid {
+  padding-left: var(--db-spacing-lg);
+  padding-right: var(--db-spacing-lg);
+}
+
+@media (max-width: 768px) {
+  .container-fluid {
+    padding-left: var(--db-spacing-md);
+    padding-right: var(--db-spacing-md);
+  }
+}
+
+@media (max-width: 480px) {
+  .container-fluid {
+    padding-left: var(--db-spacing-sm);
+    padding-right: var(--db-spacing-sm);
+  }
+}
+
+/* 暗色模式支持 */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --db-light-color: #1e293b;
+    --db-gray-light: #334155;
+    --db-gray-medium: #475569;
+    --db-gray-dark: #64748b;
+    --db-darker-color: #94a3b8;
+    --db-dark-color: #f1f5f9;
+    --db-black: #f8fafc;
+    
+    --db-bg-gradient: linear-gradient(135deg, #1e293b 0%, #334155 100%);
+    --db-card-gradient: linear-gradient(135deg, #334155 0%, #1e293b 100%);
+  }
+  
+  .card {
+    border-color: #475569;
+  }
+  
+  .form-control,
+  .form-select {
+    background: #1e293b;
+    border-color: #475569;
+    color: #f1f5f9;
+  }
+  
+  .navbar {
+    background: linear-gradient(135deg, #334155 0%, #1e293b 100%);
+  }
+  
+  .table {
+    background: #1e293b;
+  }
+  
+  .table th {
+    background: #475569;
+    color: #f1f5f9;
+  }
+}
   /* 覆盖Bootstrap默认样式 */
-.toast-container[data-v-a1eb4510] {
+.toast-container[data-v-7d639c44] {
     z-index: 1100;
 }
-.fade-out[data-v-a1eb4510] {
-    animation: fadeOut-a1eb4510 1s forwards;
+.fade-out[data-v-7d639c44] {
+    animation: fadeOut-7d639c44 1s forwards;
 }
-@keyframes fadeOut-a1eb4510 {
+@keyframes fadeOut-7d639c44 {
 0% { opacity: 1; transform: translateY(0);
 }
 100% { opacity: 0;  transform: translateY(-120%);}
-}
+}
   
-.loading-overlay[data-v-48d1b926] {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.3);
-    display: flex;
-    justify-content: center;
-    align-items: center;
+.loading-overlay[data-v-d5892680] {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.3);
+    display: flex;
+    justify-content: center;
+    align-items: center;
     z-index: 1050;
 }
-.loading-spinner[data-v-48d1b926] {
+.loading-spinner[data-v-d5892680] {
     text-align: center;
-}
+}
   
-.modal-dialog[data-v-0f64e462] {
-    z-index: var(--bs-modal-zindex);
+.modal-dialog[data-v-6653cff9] {
+    z-index: var(--bs-modal-zindex);
     max-width:none !important;
 }
-.modal-success .modal-header[data-v-0f64e462] {
-  background-color: var(--bs-success);
+.modal-success .modal-header[data-v-6653cff9] {
+  background-color: var(--bs-success);
   color: white;
 }
-.modal-error .modal-header[data-v-0f64e462] {
-  background-color: var(--bs-danger);
+.modal-error .modal-header[data-v-6653cff9] {
+  background-color: var(--bs-danger);
   color: white;
 }
-.modal-warning .modal-header[data-v-0f64e462] {
-  background-color: var(--bs-warning);
+.modal-warning .modal-header[data-v-6653cff9] {
+  background-color: var(--bs-warning);
   color: var(--bs-dark);
 }
-.modal-info .modal-header[data-v-0f64e462] {
-  background-color: var(--bs-info);
+.modal-info .modal-header[data-v-6653cff9] {
+  background-color: var(--bs-info);
   color: white;
 }
-.modal-body[data-v-0f64e462] {
-  min-height: 80px;
-  display: flex;
-  flex-direction: column;
+.modal-body[data-v-6653cff9] {
+  min-height: 80px;
+  display: flex;
+  flex-direction: column;
   align-items: stretch;
 }
-.error-details[data-v-0f64e462] {
-    width: 100%;
+.error-details[data-v-6653cff9] {
+    width: 100%;
     margin-top: 1rem;
 }
-.error-content[data-v-0f64e462] {
-    background-color: #f8f9fa;
-    border: 1px solid #e9ecef;
-    border-radius: 0.375rem;
-    padding: 1rem;
-    margin: 0;
-    max-height: 200px;
-    overflow-y: auto;
-    white-space: pre-wrap;
-    word-break: break-word;
-    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
-    font-size: 0.875rem;
+.error-content[data-v-6653cff9] {
+    background-color: #f8f9fa;
+    border: 1px solid #e9ecef;
+    border-radius: 0.375rem;
+    padding: 1rem;
+    margin: 0;
+    max-height: 200px;
+    overflow-y: auto;
+    white-space: pre-wrap;
+    word-break: break-word;
+    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+    font-size: 0.875rem;
     line-height: 1.5;
 }
-.error-details-toggle[data-v-0f64e462] {
+.error-details-toggle[data-v-6653cff9] {
     width: 100%;
 }
-.error-details-content[data-v-0f64e462] {
-    background-color: #f8f9fa;
-    border: 1px solid #e9ecef;
-    border-radius: 0.375rem;
-    padding: 1rem;
+.error-details-content[data-v-6653cff9] {
+    background-color: #f8f9fa;
+    border: 1px solid #e9ecef;
+    border-radius: 0.375rem;
+    padding: 1rem;
     margin-top: 0.5rem;
 }
-.error-json[data-v-0f64e462] {
-    background-color: #212529;
-    color: #f8f9fa;
-    border-radius: 0.25rem;
-    padding: 0.75rem;
-    font-size: 0.8rem;
-    line-height: 1.4;
-    max-height: 300px;
-    overflow-y: auto;
-    white-space: pre-wrap;
+.error-json[data-v-6653cff9] {
+    background-color: #212529;
+    color: #f8f9fa;
+    border-radius: 0.25rem;
+    padding: 0.75rem;
+    font-size: 0.8rem;
+    line-height: 1.4;
+    max-height: 300px;
+    overflow-y: auto;
+    white-space: pre-wrap;
     word-break: break-word;
 }
-.error-meta[data-v-0f64e462] {
-    border-bottom: 1px solid #dee2e6;
-    padding-bottom: 0.5rem;
+.error-meta[data-v-6653cff9] {
+    border-bottom: 1px solid #dee2e6;
+    padding-bottom: 0.5rem;
     margin-bottom: 0.5rem;
 }
-.modal-body .fs-1[data-v-0f64e462] {
-  font-size: 2.5rem;
+.modal-body .fs-1[data-v-6653cff9] {
+  font-size: 2.5rem;
   margin-bottom: 1rem;
-}
-
+}
+
 /* 响应式调整 */
 @media (max-width: 576px) {
-.error-content[data-v-0f64e462],
-    .error-json[data-v-0f64e462] {
-        font-size: 0.75rem;
+.error-content[data-v-6653cff9],
+    .error-json[data-v-6653cff9] {
+        font-size: 0.75rem;
         max-height: 150px;
 }
-}
+}
 
-.datagrid-inner[data-v-f1c2cf28] {
-    overflow: auto;
+.datagrid-inner[data-v-9bff1755] {
+    overflow: auto;
     margin-bottom: 10px;
 }
-.datagrid-th[data-v-f1c2cf28] {
+.datagrid-th[data-v-9bff1755] {
     min-width: 80px;
-}
+}