fdb2 1.0.2 → 1.0.4

package/dist/public/index.css

@@ -0,0 +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;
+  }
+}
+  /* 覆盖Bootstrap默认样式 */
+.toast-container[data-v-a1eb4510] {
+    z-index: 1100;
+}
+.fade-out[data-v-a1eb4510] {
+    animation: fadeOut-a1eb4510 1s forwards;
+}
+@keyframes fadeOut-a1eb4510 {
+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;
+    z-index: 1050;
+}
+.loading-spinner[data-v-48d1b926] {
+    text-align: center;
+}
+  
+.modal-dialog[data-v-0f64e462] {
+    z-index: var(--bs-modal-zindex);
+    max-width:none !important;
+}
+.modal-success .modal-header[data-v-0f64e462] {
+  background-color: var(--bs-success);
+  color: white;
+}
+.modal-error .modal-header[data-v-0f64e462] {
+  background-color: var(--bs-danger);
+  color: white;
+}
+.modal-warning .modal-header[data-v-0f64e462] {
+  background-color: var(--bs-warning);
+  color: var(--bs-dark);
+}
+.modal-info .modal-header[data-v-0f64e462] {
+  background-color: var(--bs-info);
+  color: white;
+}
+.modal-body[data-v-0f64e462] {
+  min-height: 80px;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}
+.error-details[data-v-0f64e462] {
+    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;
+    line-height: 1.5;
+}
+.error-details-toggle[data-v-0f64e462] {
+    width: 100%;
+}
+.error-details-content[data-v-0f64e462] {
+    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;
+    word-break: break-word;
+}
+.error-meta[data-v-0f64e462] {
+    border-bottom: 1px solid #dee2e6;
+    padding-bottom: 0.5rem;
+    margin-bottom: 0.5rem;
+}
+.modal-body .fs-1[data-v-0f64e462] {
+  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;
+        max-height: 150px;
+}
+}
+
+.datagrid-inner[data-v-f1c2cf28] {
+    overflow: auto;
+    margin-bottom: 10px;
+}
+.datagrid-th[data-v-f1c2cf28] {
+    min-width: 80px;
+}