fix：system-settings.component

industry-monitor-web/src/app/pages/system-settings/system-settings.component.html

@@ -14,36 +14,40 @@
             </button>
         </div>
     </div>
+
+     <!-- 顶部导航标签 -->
+  <div class="settings-tabs-container">
+    <div class="settings-tabs">
+      <div class="settings-tab active" (click)="setActiveTab('users')" [class.active]="activeTab === 'users'">
+        <i class="fas fa-users"></i> 用户管理
+      </div>
+      <div class="settings-tab" (click)="setActiveTab('alerts')" [class.active]="activeTab === 'alerts'">
+        <i class="fas fa-bell"></i> 警报设置
+      </div>
+      <div class="settings-tab" (click)="setActiveTab('templates')" [class.active]="activeTab === 'templates'">
+        <i class="fas fa-cubes"></i> 设备模板
+      </div>
+      <div class="settings-tab" (click)="setActiveTab('system')" [class.active]="activeTab === 'system'">
+        <i class="fas fa-server"></i> 系统参数
+      </div>
+      <div class="settings-tab" (click)="setActiveTab('roles')" [class.active]="activeTab === 'roles'">
+        <i class="fas fa-key"></i> 权限管理
+      </div>
+      <div class="settings-tab" (click)="setActiveTab('logs')" [class.active]="activeTab === 'logs'">
+        <i class="fas fa-clipboard-list"></i> 系统日志
+      </div>
+      <div class="settings-tab" (click)="setActiveTab('license')" [class.active]="activeTab === 'license'">
+        <i class="fas fa-id-card"></i> 许可证信息
+      </div>
+      <div class="settings-tab" (click)="setActiveTab('backup')" [class.active]="activeTab === 'backup'">
+        <i class="fas fa-cloud-download-alt"></i> 备份与恢复
+      </div>
+    </div>
+  </div>
     
     <!-- 主体内容区域 -->
     <div class="settings-body">
-        <!-- 左侧导航菜单 -->
-        <div class="settings-sidebar">
-            <div class="settings-tab active" data-tab="users">
-                <i class="fas fa-users"></i> 用户管理
-            </div>
-            <div class="settings-tab" data-tab="alerts">
-                <i class="fas fa-bell"></i> 警报设置
-            </div>
-            <div class="settings-tab" data-tab="templates">
-                <i class="fas fa-cubes"></i> 设备模板
-            </div>
-            <div class="settings-tab" data-tab="system">
-                <i class="fas fa-server"></i> 系统参数
-            </div>
-            <div class="settings-tab" data-tab="roles">
-                <i class="fas fa-key"></i> 权限管理
-            </div>
-            <div class="settings-tab" data-tab="logs">
-                <i class="fas fa-clipboard-list"></i> 系统日志
-            </div>
-            <div class="settings-tab" data-tab="license">
-                <i class="fas fa-id-card"></i> 许可证信息
-            </div>
-            <div class="settings-tab" data-tab="backup">
-                <i class="fas fa-cloud-download-alt"></i> 备份与恢复
-            </div>
-        </div>
+        
         
         <!-- 右侧设置内容 -->
         <div class="settings-content">

industry-monitor-web/src/app/pages/system-settings/system-settings.component.ts

@@ -11,6 +11,7 @@ import { DatePipe } from '@angular/common';
 })
 export class SystemSettingsComponent {
 currentTime: Date = new Date();
+activeTab: string = 'users';
    ngOnInit(): void {
     // 更新时间，每秒更新一次
     setInterval(() => {
@@ -18,4 +19,7 @@ currentTime: Date = new Date();
     }, 1000);
 
    }
+   setActiveTab(tab: string): void {
+    this.activeTab = tab;
+  }
 }

industry-monitor-web/src/app/pages/system-settings/system-settings.css

@@ -1,6 +1,6 @@
-/* 系统设置中心页面CSS样式 */
+/* 系统设置中心页面CSS样式 - 优化版 */
 
-/* 基础变量 - 与整体应用保持一致 */
+/* 基础变量 */
 :root {
   --primary: #3498db;
   --primary-dark: #2980b9;
@@ -65,114 +65,49 @@
   gap: 10px;
 }
 
-/* 按钮样式 */
-.btn {
-  padding: 8px 18px;
-  border-radius: 30px;
-  border: none;
-  font-weight: 600;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  transition: var(--transition);
-  font-size: 14px;
-}
-
-.btn-sm {
-  padding: 6px 14px;
-  font-size: 13px;
-}
-
-.btn-primary {
-  background: var(--primary);
-  color: white;
-}
-
-.btn-primary:hover {
-  background: var(--primary-dark);
-  transform: translateY(-2px);
-  box-shadow: var(--shadow-hover);
-}
-
-.btn-outline {
-  background: transparent;
-  border: 1px solid var(--primary);
-  color: var(--primary);
-}
-
-.btn-outline:hover {
-  background: rgba(52, 152, 219, 0.1);
-}
-
-.btn-danger {
-  background: rgba(231, 76, 60, 0.1);
-  color: var(--danger);
-  border: 1px solid rgba(231, 76, 60, 0.3);
-}
-
-.btn-danger:hover {
-  background: rgba(231, 76, 60, 0.2);
-}
-
-.btn-edit {
-  background: rgba(243, 156, 18, 0.1);
-  color: var(--warning);
-  border: 1px solid rgba(243, 156, 18, 0.3);
-}
-
-.btn-delete {
-  background: rgba(231, 76, 60, 0.1);
-  color: var(--danger);
-  border: 1px solid rgba(231, 76, 60, 0.3);
+/* 顶部导航标签容器 */
+.settings-tabs-container {
+  background: white;
+  border-bottom: 1px solid var(--light-gray);
+  padding: 0 20px;
+  overflow-x: auto;
 }
 
-/* 主体内容区域 */
-.settings-body {
+.settings-tabs {
   display: flex;
-  min-height: 600px;
-}
-
-/* 左侧导航菜单 */
-.settings-sidebar {
-  width: 240px;
-  background: white;
-  border-right: 1px solid var(--light-gray);
-  padding: 20px 0;
+  min-width: max-content;
 }
 
 .settings-tab {
-  padding: 12px 24px;
+  padding: 14px 24px;
   display: flex;
   align-items: center;
   gap: 12px;
   cursor: pointer;
   transition: var(--transition);
-  border-left: 4px solid transparent;
+  border-bottom: 3px solid transparent;
   font-weight: 500;
   color: var(--dark);
   font-size: 15px;
-}
-
-.settings-tab.active {
-  background: rgba(52, 152, 219, 0.1);
-  border-left: 4px solid var(--primary);
-  color: var(--primary);
+  white-space: nowrap;
 }
 
 .settings-tab:hover:not(.active) {
   background: rgba(0, 0, 0, 0.03);
 }
 
+.settings-tab.active {
+  background: rgba(52, 152, 219, 0.05);
+  border-bottom: 3px solid var(--primary);
+  color: var(--primary);
+}
+
 .settings-tab i {
-  width: 24px;
-  text-align: center;
-  font-size: 18px;
+  font-size: 16px;
 }
 
-/* 右侧设置内容 */
-.settings-content {
-  flex: 1;
+/* 主体内容区域 */
+.settings-body {
   padding: 24px;
   background: #f9fbfd;
   min-height: 600px;
@@ -192,22 +127,68 @@
   to { opacity: 1; transform: translateY(0); }
 }
 
-/* 公共部分样式 */
-.section-header {
+/* 响应式设计 */
+@media (max-width: 992px) {
+  .settings-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 16px;
+  }
+  
+  .setting-actions {
+    width: 100%;
+    justify-content: flex-end;
+  }
+}
+
+@media (max-width: 768px) {
+  .settings-tabs {
+    gap: 0;
+  }
+  
+  .settings-tab {
+    padding: 12px 16px;
+    font-size: 14px;
+  }
+  
+  .settings-tab i {
+    display: none;
+  }
+}
+
+@media (max-width: 480px) {
+  .settings-header h1 {
+    font-size: 18px;
+  }
+  
+  .settings-tab {
+    padding: 10px 12px;
+    font-size: 13px;
+  }
+  
+  .settings-body {
+    padding: 16px;
+  }
+}
+
+/* 用户管理卡片优化样式 */
+.users-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 24px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid var(--light-gray);
 }
 
-.section-header h2 {
-  font-size: 20px;
+.users-header h2 {
   display: flex;
   align-items: center;
   gap: 12px;
+  font-size: 20px;
+  color: var(--dark);
 }
 
-/* 用户网格 */
 .users-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
@@ -220,23 +201,25 @@
   box-shadow: var(--shadow);
   overflow: hidden;
   transition: var(--transition);
+  border: 1px solid var(--light-gray);
 }
 
 .user-card:hover {
+  transform: translateY(-5px);
   box-shadow: var(--shadow-hover);
-  transform: translateY(-4px);
 }
 
 .user-header {
   display: flex;
+  align-items: center;
   padding: 20px;
-  gap: 16px;
+  background: linear-gradient(135deg, #f5f7fa 0%, #e4e8eb 100%);
   border-bottom: 1px solid var(--light-gray);
 }
 
 .user-avatar {
-  width: 56px;
-  height: 56px;
+  width: 60px;
+  height: 60px;
   border-radius: 50%;
   background: var(--primary);
   color: white;
@@ -245,19 +228,18 @@
   justify-content: center;
   font-size: 24px;
   font-weight: bold;
+  margin-right: 16px;
+  box-shadow: 0 3px 6px rgba(0,0,0,0.1);
 }
 
-.badge-admin .user-avatar { background: #e74c3c; }
-.badge-engineer .user-avatar { background: #3498db; }
-.badge-operator .user-avatar { background: #27ae60; }
-.badge-viewer .user-avatar { background: #f39c12; }
-
 .user-info h3 {
+  margin: 0;
   font-size: 18px;
-  margin-bottom: 4px;
+  color: var(--dark);
 }
 
 .user-info p {
+  margin: 4px 0 0;
   color: var(--gray);
   font-size: 14px;
 }
@@ -269,10 +251,13 @@
 .user-detail {
   margin-bottom: 12px;
   font-size: 14px;
+  display: flex;
 }
 
 .user-detail strong {
-  color: var(--dark);
+  min-width: 80px;
+  color: var(--gray);
+  font-weight: 500;
 }
 
 .role-badge {
@@ -281,329 +266,73 @@
   border-radius: 20px;
   font-size: 12px;
   font-weight: 600;
+  text-transform: uppercase;
 }
 
-.badge-admin { background: rgba(231, 76, 60, 0.1); color: #e74c3c; }
-.badge-engineer { background: rgba(52, 152, 219, 0.1); color: #3498db; }
-.badge-operator { background: rgba(39, 174, 96, 0.1); color: #27ae60; }
-.badge-viewer { background: rgba(243, 156, 18, 0.1); color: #f39c12; }
-
-.user-actions {
-  display: flex;
-  gap: 10px;
-  margin-top: 16px;
-}
-
-/* 警报设置 */
-.settings-card {
-  background: white;
-  border-radius: var(--border-radius);
-  box-shadow: var(--shadow);
-  padding: 24px;
-  margin-bottom: 24px;
-}
-
-.form-group {
-  margin-bottom: 20px;
-}
-
-.form-group label {
-  display: block;
-  margin-bottom: 8px;
-  font-weight: 600;
-  color: var(--dark);
-}
-
-.slider-container {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-}
-
-.slider-container input[type="range"] {
-  flex: 1;
-  height: 6px;
-  border-radius: 3px;
-  background: var(--light-gray);
-  outline: none;
-  -webkit-appearance: none;
-}
-
-.slider-container input[type="range"]::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  width: 18px;
-  height: 18px;
-  border-radius: 50%;
-  background: var(--primary);
-  cursor: pointer;
-}
-
-.slider-value {
-  min-width: 80px;
-  text-align: right;
-  font-weight: 600;
-  color: var(--primary);
-}
-
-.section-subheader {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  margin: 24px 0 16px;
-  font-size: 18px;
-  color: var(--secondary);
-}
-
-.notification-item {
-  display: flex;
-  align-items: center;
-  padding: 16px;
-  border-radius: var(--border-radius);
-  background: var(--light);
-  margin-bottom: 12px;
+.badge-admin {
+  background: rgba(231, 76, 60, 0.1);
+  color: #e74c3c;
 }
 
-.notification-icon {
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
+.badge-engineer {
   background: rgba(52, 152, 219, 0.1);
-  display: flex;
-  align-items: center;
-  justify-content: center;
   color: var(--primary);
-  font-size: 18px;
-}
-
-.notification-info {
-  flex: 1;
-  padding: 0 16px;
-}
-
-.notification-info h4 {
-  margin-bottom: 4px;
-}
-
-.notification-info p {
-  color: var(--gray);
-  font-size: 14px;
-}
-
-.notification-switch {
-  position: relative;
-  display: inline-block;
-  width: 50px;
-  height: 24px;
-}
-
-.notification-switch input {
-  opacity: 0;
-  width: 0;
-  height: 0;
-}
-
-.notification-switch .slider {
-  position: absolute;
-  cursor: pointer;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: var(--light-gray);
-  transition: .4s;
-  border-radius: 34px;
-}
-
-.notification-switch .slider:before {
-  position: absolute;
-  content: "";
-  height: 16px;
-  width: 16px;
-  left: 4px;
-  bottom: 4px;
-  background-color: white;
-  transition: .4s;
-  border-radius: 50%;
 }
 
-.notification-switch input:checked + .slider {
-  background-color: var(--success);
+.badge-operator {
+  background: rgba(46, 204, 113, 0.1);
+  color: #2ecc71;
 }
 
-.notification-switch input:checked + .slider:before {
-  transform: translateX(26px);
+.badge-viewer {
+  background: rgba(155, 89, 182, 0.1);
+  color: #9b59b6;
 }
 
-.form-footer {
+.user-actions {
   display: flex;
-  justify-content: flex-end;
-  gap: 12px;
-  margin-top: 24px;
+  gap: 8px;
+  margin-top: 16px;
   padding-top: 16px;
   border-top: 1px solid var(--light-gray);
 }
 
-/* 系统状态 */
-.system-status {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
-  gap: 20px;
-  margin-bottom: 24px;
-}
-
-.status-card {
-  background: white;
-  border-radius: var(--border-radius);
-  box-shadow: var(--shadow);
-  padding: 20px;
-  display: flex;
-  gap: 16px;
-  align-items: center;
-}
-
-.status-icon {
-  width: 60px;
-  height: 60px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 24px;
-}
-
-.system .status-icon { background: rgba(52, 152, 219, 0.1); color: var(--primary); }
-.database .status-icon { background: rgba(46, 204, 113, 0.1); color: #2ecc71; }
-.security .status-icon { background: rgba(243, 156, 18, 0.1); color: var(--warning); }
-.analytics .status-icon { background: rgba(155, 89, 182, 0.1); color: #9b59b6; }
-
-.status-info h3 {
-  font-size: 17px;
-  margin-bottom: 4px;
-}
-
-.status-info p {
-  color: var(--gray);
+.btn-sm {
+  padding: 6px 12px;
   font-size: 13px;
-  margin-bottom: 4px;
 }
 
-.status-value {
-  font-size: 20px;
-  font-weight: 700;
-}
-
-/* 备份列表 */
-.backup-list {
-  margin: 16px 0;
-}
-
-.backup-item {
-  display: flex;
-  align-items: center;
-  padding: 16px;
-  border-radius: var(--border-radius);
-  background: var(--light);
-  margin-bottom: 12px;
-}
-
-.backup-icon {
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
+.btn-edit {
   background: rgba(52, 152, 219, 0.1);
-  display: flex;
-  align-items: center;
-  justify-content: center;
   color: var(--primary);
-  font-size: 18px;
+  border: 1px solid rgba(52, 152, 219, 0.3);
 }
 
-.backup-info {
-  flex: 1;
-  padding: 0 16px;
+.btn-edit:hover {
+  background: rgba(52, 152, 219, 0.2);
 }
 
-.backup-info h4 {
-  margin-bottom: 4px;
-}
-
-.backup-info p {
-  color: var(--gray);
-  font-size: 14px;
-}
-
-.backup-actions {
-  display: flex;
-  gap: 8px;
+.btn-delete {
+  background: rgba(231, 76, 60, 0.1);
+  color: var(--danger);
+  border: 1px solid rgba(231, 76, 60, 0.3);
 }
 
-/* 响应式设计 */
-@media (max-width: 992px) {
-  .settings-sidebar {
-    width: 200px;
-  }
-  
-  .users-grid {
-    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-  }
+.btn-delete:hover {
+  background: rgba(231, 76, 60, 0.2);
 }
 
+/* 响应式调整 */
 @media (max-width: 768px) {
-  .settings-body {
-    flex-direction: column;
-  }
-  
-  .settings-sidebar {
-    width: 100%;
-    display: flex;
-    overflow-x: auto;
-    padding: 10px 0;
-    border-right: none;
-    border-bottom: 1px solid var(--light-gray);
-  }
-  
-  .settings-tab {
-    padding: 10px 16px;
-    white-space: nowrap;
-  }
-  
   .users-grid {
     grid-template-columns: 1fr;
   }
   
-  .system-status {
-    grid-template-columns: 1fr 1fr;
+  .user-header {
+    padding: 16px;
   }
   
-  .section-header {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 16px;
-  }
-}
-
-@media (max-width: 480px) {
-  .system-status {
-    grid-template-columns: 1fr;
-  }
-  
-  .settings-header {
-    flex-direction: column;
-    gap: 16px;
-    align-items: flex-start;
-  }
-  
-  .setting-actions {
-    width: 100%;
-    flex-wrap: wrap;
-  }
-  
-  .form-footer {
-    flex-direction: column;
-  }
-  
-  .btn {
-    width: 100%;
-    justify-content: center;
+  .user-body {
+    padding: 16px;
   }
 }