Upload 6 files

templates/dashboard.html

@@ -1297,6 +1297,279 @@
                 display: none;
             }
         }
+
+        /* 跳转链接样式 */
+        .skip-link {
+            position: absolute;
+            top: -40px;
+            left: 0;
+            background: var(--primary-color);
+            color: white;
+            padding: 8px 16px;
+            z-index: 100;
+            transition: top 0.2s;
+        }
+
+        .skip-link:focus {
+            top: 0;
+        }
+
+        /* 加载动画优化 */
+        .loading-overlay {
+            backdrop-filter: blur(8px);
+            -webkit-backdrop-filter: blur(8px);
+        }
+
+        .loader {
+            position: relative;
+        }
+
+        .loader::before {
+            content: '';
+            position: absolute;
+            inset: -8px;
+            border-radius: 50%;
+            background: conic-gradient(
+                from 0deg,
+                transparent 0%,
+                var(--primary-color) 25%,
+                transparent 100%
+            );
+            animation: pulse 2s linear infinite;
+        }
+
+        @keyframes pulse {
+            0% {
+                transform: scale(1);
+                opacity: 0.5;
+            }
+            50% {
+                transform: scale(1.2);
+                opacity: 0.2;
+            }
+            100% {
+                transform: scale(1);
+                opacity: 0.5;
+            }
+        }
+
+        /* 卡片内容动画 */
+        .card-body {
+            transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            overflow: hidden;
+        }
+
+        .card.collapsed .card-body {
+            max-height: 0;
+        }
+
+        /* 表格优化 */
+        .table-container {
+            position: relative;
+            border-radius: 8px;
+            background: var(--surface-1);
+            padding: 1rem;
+            margin: 1rem 0;
+        }
+
+        .table-search {
+            margin: -0.5rem -0.5rem 0.5rem -0.5rem;
+            width: calc(100% + 1rem);
+            border-radius: 8px 8px 0 0;
+            border-bottom: 1px solid var(--surface-2);
+        }
+
+        table {
+            width: 100%;
+            border-collapse: separate;
+            border-spacing: 0;
+        }
+
+        th, td {
+            padding: 0.75rem;
+            text-align: left;
+            border-bottom: 1px solid var(--surface-2);
+        }
+
+        th {
+            font-weight: 600;
+            color: var(--text-light);
+            position: relative;
+            user-select: none;
+        }
+
+        th[aria-sort]:not([aria-sort="none"])::after {
+            content: '';
+            position: absolute;
+            right: 0.5rem;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 0;
+            height: 0;
+            border-left: 4px solid transparent;
+            border-right: 4px solid transparent;
+        }
+
+        th[aria-sort="ascending"]::after {
+            border-bottom: 4px solid var(--primary-color);
+        }
+
+        th[aria-sort="descending"]::after {
+            border-top: 4px solid var(--primary-color);
+        }
+
+        tbody tr {
+            transition: all 0.2s;
+        }
+
+        tbody tr:hover {
+            background: var(--surface-2);
+        }
+
+        /* 状态指示器优化 */
+        .status-indicator {
+            position: relative;
+            display: inline-block;
+            width: 12px;
+            height: 12px;
+            border-radius: 50%;
+            margin-right: 0.5rem;
+        }
+
+        .status-indicator::before {
+            content: '';
+            position: absolute;
+            inset: -4px;
+            border-radius: 50%;
+            background: currentColor;
+            opacity: 0.2;
+            animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
+        }
+
+        /* 按钮优化 */
+        .btn {
+            position: relative;
+            overflow: hidden;
+        }
+
+        .btn::after {
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            width: 5px;
+            height: 5px;
+            background: rgba(255, 255, 255, 0.5);
+            opacity: 0;
+            border-radius: 100%;
+            transform: scale(1, 1) translate(-50%);
+            transform-origin: 50% 50%;
+        }
+
+        .btn:focus:not(:active)::after {
+            animation: ripple 1s ease-out;
+        }
+
+        @keyframes ripple {
+            0% {
+                transform: scale(0, 0);
+                opacity: 0.5;
+            }
+            20% {
+                transform: scale(25, 25);
+                opacity: 0.5;
+            }
+            100% {
+                opacity: 0;
+                transform: scale(40, 40);
+            }
+        }
+
+        /* 主题切换按��优化 */
+        .theme-toggle {
+            overflow: hidden;
+        }
+
+        .theme-toggle .material-icons {
+            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+
+        .theme-toggle:hover .material-icons {
+            transform: rotate(180deg);
+        }
+
+        [data-theme="dark"] .theme-toggle .material-icons {
+            transform: rotate(180deg);
+        }
+
+        /* 响应式优化 */
+        @media (max-width: 768px) {
+            .card {
+                margin: 0.5rem;
+            }
+
+            .table-container {
+                margin: 0.5rem 0;
+                padding: 0.5rem;
+            }
+
+            th, td {
+                padding: 0.5rem;
+            }
+
+            .status-grid {
+                gap: 0.5rem;
+            }
+        }
+
+        @media (max-width: 480px) {
+            .navbar {
+                flex-direction: column;
+                text-align: center;
+                padding: 0.5rem;
+            }
+
+            .nav-actions {
+                margin-top: 0.5rem;
+            }
+
+            .card-header {
+                flex-direction: column;
+                gap: 0.5rem;
+            }
+
+            .btn-toggle {
+                width: 100%;
+            }
+        }
+
+        /* 打印优化 */
+        @media print {
+            .card {
+                break-inside: avoid;
+                page-break-inside: avoid;
+                border: 1px solid #ddd;
+                margin: 1rem 0;
+                padding: 1rem;
+                box-shadow: none;
+            }
+
+            .table-container {
+                overflow: visible;
+            }
+
+            .table-container::after {
+                display: none;
+            }
+
+            th, td {
+                border-bottom: 1px solid #ddd;
+            }
+
+            .status-indicator::before {
+                display: none;
+            }
+        }
     </style>
 </head>
 <body class="loading">