08-12-周三_16-44-56

03.数据库/03.数据库开发项目代码示例/01.笔记网站/css/style.css

@@ -543,7 +543,78 @@ input, textarea, select { font-family: inherit; outline: none; }
 .badge-user { background: #e0e7ff; color: #4f46e5; }
 .badge-category { background: #d1fae5; color: #059669; }
 
-/* ==================== Admin Tabs ==================== */
+/* ==================== Admin Sidebar Layout ==================== */
+.admin-layout {
+  display: flex; min-height: calc(100vh - 64px);
+  max-width: 1280px; margin: 0 auto; padding: 1.5rem;
+  gap: 1.5rem;
+}
+
+.admin-sidebar {
+  width: 220px; flex-shrink: 0;
+  background: var(--bg-card); border-radius: var(--radius-lg);
+  border: 1px solid var(--border); padding: 1rem;
+  height: fit-content; position: sticky; top: 80px;
+  animation: fadeInUp 0.4s ease both;
+}
+
+.admin-nav { display: flex; flex-direction: column; gap: 0.25rem; }
+
+.admin-nav-item {
+  display: flex; align-items: center; gap: 0.65rem;
+  padding: 0.75rem 1rem; border-radius: var(--radius-sm);
+  font-size: 0.9rem; font-weight: 600; color: var(--text-secondary);
+  transition: all var(--transition); text-decoration: none;
+}
+.admin-nav-item:hover { background: var(--bg-hover); color: var(--text); }
+.admin-nav-item.active {
+  background: linear-gradient(135deg, var(--primary), #8b5cf6);
+  color: white; box-shadow: var(--shadow-sm);
+}
+.admin-nav-item span { font-size: 1.1rem; }
+
+.admin-main {
+  flex: 1; min-width: 0;
+  animation: fadeInUp 0.4s 0.05s ease both;
+}
+
+.admin-panel {
+  background: var(--bg-card); border-radius: var(--radius-lg);
+  border: 1px solid var(--border); overflow: hidden;
+}
+
+.admin-panel-header {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 1.25rem 1.5rem;
+  border-bottom: 1px solid var(--border);
+}
+.admin-panel-header h3 {
+  font-size: 1.1rem; font-weight: 700;
+  display: flex; align-items: center; gap: 0.4rem;
+}
+
+.admin-panel-body { padding: 0; }
+
+.admin-table { width: 100%; border-collapse: collapse; }
+.admin-table thead { background: var(--bg); }
+.admin-table th {
+  text-align: left; padding: 0.75rem 1.25rem;
+  font-size: 0.78rem; font-weight: 700; color: var(--text-muted);
+  text-transform: uppercase; letter-spacing: 0.05em;
+  border-bottom: 2px solid var(--border);
+}
+.admin-table td {
+  padding: 0.85rem 1.25rem; font-size: 0.9rem;
+  border-bottom: 1px solid var(--border-light);
+  color: var(--text);
+}
+.admin-table tbody tr { transition: var(--transition); }
+.admin-table tbody tr:hover { background: var(--bg-hover); }
+.admin-table tbody tr:last-child td { border-bottom: none; }
+.admin-table td.actions { white-space: nowrap; }
+.admin-table td.actions .btn + .btn { margin-left: 0.35rem; }
+
+/* ==================== Admin Tabs (legacy) ==================== */
 .admin-header {
   text-align: center; padding: 2rem 0 1.5rem;
   animation: fadeInUp 0.5s ease both;