fdb2 1.0.13 → 1.0.14

package/dist/public/index.css

@@ -1,1099 +0,0 @@
-/* 数据库管理工具全局样式 - 现代桌面应用设计 */
-
-/* 基础变量 - 现代色彩方案 */
-: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-7d639c44] {
-    z-index: 1100;
-}
-.fade-out[data-v-7d639c44] {
-    animation: fadeOut-7d639c44 1s forwards;
-}
-@keyframes fadeOut-7d639c44 {
-0% { opacity: 1; transform: translateY(0);
-}
-100% { opacity: 0;  transform: translateY(-120%);}
-}
-  
-.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-d5892680] {
-    text-align: center;
-}
-  
-.modal-dialog[data-v-6653cff9] {
-    z-index: var(--bs-modal-zindex);
-    max-width:none !important;
-}
-.modal-success .modal-header[data-v-6653cff9] {
-  background-color: var(--bs-success);
-  color: white;
-}
-.modal-error .modal-header[data-v-6653cff9] {
-  background-color: var(--bs-danger);
-  color: white;
-}
-.modal-warning .modal-header[data-v-6653cff9] {
-  background-color: var(--bs-warning);
-  color: var(--bs-dark);
-}
-.modal-info .modal-header[data-v-6653cff9] {
-  background-color: var(--bs-info);
-  color: white;
-}
-.modal-body[data-v-6653cff9] {
-  min-height: 80px;
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-}
-.error-details[data-v-6653cff9] {
-    width: 100%;
-    margin-top: 1rem;
-}
-.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-6653cff9] {
-    width: 100%;
-}
-.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-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-6653cff9] {
-    border-bottom: 1px solid #dee2e6;
-    padding-bottom: 0.5rem;
-    margin-bottom: 0.5rem;
-}
-.modal-body .fs-1[data-v-6653cff9] {
-  font-size: 2.5rem;
-  margin-bottom: 1rem;
-}
-
-/* 响应式调整 */
-@media (max-width: 576px) {
-.error-content[data-v-6653cff9],
-    .error-json[data-v-6653cff9] {
-        font-size: 0.75rem;
-        max-height: 150px;
-}
-}
-
-.datagrid-container[data-v-ae552d25] {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-}
-.datagrid-inner[data-v-ae552d25] {
-    flex: 1;
-    overflow: auto;
-    margin-bottom: 10px;
-}
-.datagrid-th[data-v-ae552d25] {
-    min-width: 80px;
-    white-space: nowrap;
-    position: sticky;
-    top: 0;
-    z-index: 10;
-    background-color: #f8f9fa;
-}
-.datagrid-th.sortable[data-v-ae552d25] {
-    cursor: pointer;
-    user-select: none;
-}
-.datagrid-th.sortable[data-v-ae552d25]:hover {
-    background-color: #e9ecef;
-}
-.header-content[data-v-ae552d25] {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-}
-.sort-icon[data-v-ae552d25] {
-    display: flex;
-    align-items: center;
-    font-size: 0.75rem;
-}