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

<div class="settings-container">
    <!-- 顶部标题栏 -->
    <div class="settings-header">
        <h1>
            <i class="fas fa-cog"></i>
            系统设置中心
        </h1>
        <div class="setting-actions">
            <button class="btn btn-outline">
                <i class="fas fa-sync-alt"></i> 刷新
            </button>
            <button class="btn btn-primary">
                <i class="fas fa-save"></i> 保存设置
            </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-content">
            <!-- 用户管理 -->
            <div id="users" class="tab-content active">
                <div class="users-header">
                    <h2><i class="fas fa-users"></i> 用户账户管理</h2>
                    <button class="btn btn-primary">
                        <i class="fas fa-user-plus"></i> 添加新用户
                    </button>
                </div>

                <div class="users-grid">
                    <!-- 管理员用户 -->
                    <div class="user-card">
                        <div class="user-header">
                            <div class="user-avatar">A</div>
                            <div class="user-info">
                                <h3>张明</h3>
                                <p>系统管理员</p>
                            </div>
                        </div>
                        <div class="user-body">
                            <div class="user-detail">
                                <strong>用户名：</strong> admin&#64;factory.com
                            </div>
                            <div class="user-detail">
                                <strong>角色：</strong>
                                <span class="role-badge badge-admin">管理员</span>
                            </div>
                            <div class="user-detail">
                                <strong>最后登录：</strong> 2023-07-15 14:32
                            </div>
                            <div class="user-detail">
                                <strong>状态：</strong> <span style="color: var(--success);">激活</span>
                            </div>
                            <div class="user-actions">
                                <button class="btn btn-sm btn-edit">
                                    <i class="fas fa-edit"></i> 编辑
                                </button>
                                <button class="btn btn-sm btn-delete">
                                    <i class="fas fa-trash"></i> 删除
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- 工程师用户 -->
                    <div class="user-card">
                        <div class="user-header">
                            <div class="user-avatar">L</div>
                            <div class="user-info">
                                <h3>李强</h3>
                                <p>设备工程师</p>
                            </div>
                        </div>
                        <div class="user-body">
                            <div class="user-detail">
                                <strong>用户名：</strong> liqiang&#64;factory.com
                            </div>
                            <div class="user-detail">
                                <strong>角色：</strong>
                                <span class="role-badge badge-engineer">工程师</span>
                            </div>
                            <div class="user-detail">
                                <strong>最后登录：</strong> 2023-07-15 09:18
                            </div>
                            <div class="user-detail">
                                <strong>状态：</strong> <span style="color: var(--success);">激活</span>
                            </div>
                            <div class="user-actions">
                                <button class="btn btn-sm btn-edit">
                                    <i class="fas fa-edit"></i> 编辑
                                </button>
                                <button class="btn btn-sm btn-delete">
                                    <i class="fas fa-trash"></i> 删除
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- 操作员用户 -->
                    <div class="user-card">
                        <div class="user-header">
                            <div class="user-avatar">W</div>
                            <div class="user-info">
                                <h3>王芳</h3>
                                <p>生产线操作员</p>
                            </div>
                        </div>
                        <div class="user-body">
                            <div class="user-detail">
                                <strong>用户名：</strong> wangfang&#64;factory.com
                            </div>
                            <div class="user-detail">
                                <strong>角色：</strong>
                                <span class="role-badge badge-operator">操作员</span>
                            </div>
                            <div class="user-detail">
                                <strong>最后登录：</strong> 2023-07-15 07:45
                            </div>
                            <div class="user-detail">
                                <strong>状态：</strong> <span style="color: var(--success);">激活</span>
                            </div>
                            <div class="user-actions">
                                <button class="btn btn-sm btn-edit">
                                    <i class="fas fa-edit"></i> 编辑
                                </button>
                                <button class="btn btn-sm btn-delete">
                                    <i class="fas fa-trash"></i> 删除
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- 只读用户 -->
                    <div class="user-card">
                        <div class="user-header">
                            <div class="user-avatar">Z</div>
                            <div class="user-info">
                                <h3>赵宇</h3>
                                <p>车间主管</p>
                            </div>
                        </div>
                        <div class="user-body">
                            <div class="user-detail">
                                <strong>用户名：</strong> zhaoyu&#64;factory.com
                            </div>
                            <div class="user-detail">
                                <strong>角色：</strong>
                                <span class="role-badge badge-viewer">主管</span>
                            </div>
                            <div class="user-detail">
                                <strong>最后登录：</strong> 2023-07-14 16:20
                            </div>
                            <div class="user-detail">
                                <strong>状态：</strong> <span style="color: var(--warning);">未激活</span>
                            </div>
                            <div class="user-actions">
                                <button class="btn btn-sm btn-edit">
                                    <i class="fas fa-edit"></i> 编辑
                                </button>
                                <button class="btn btn-sm btn-delete">
                                    <i class="fas fa-trash"></i> 删除
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 警报设置 -->
            <div id="alerts" class="tab-content">
                <div class="section-header">
                    <h2><i class="fas fa-bell"></i> 警报设置</h2>
                    <p>自定义系统警报阈值和通知方式</p>
                </div>

                <div class="settings-card">
                    <div class="form-group">
                        <label>振动警报阈值 (mm/s)</label>
                        <div class="slider-container">
                            <input type="range" min="0" max="2" step="0.1" value="0.8" class="form-control">
                            <div class="slider-value">0.8 mm/s</div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label>温度警报阈值 (°C)</label>
                        <div class="slider-container">
                            <input type="range" min="50" max="100" step="5" value="75" class="form-control">
                            <div class="slider-value">75°C</div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label>转速偏差阈值 (%)</label>
                        <div class="slider-container">
                            <input type="range" min="0" max="30" step="5" value="15" class="form-control">
                            <div class="slider-value">15%</div>
                        </div>
                    </div>

                    <h3 class="section-subheader">
                        <i class="fas fa-envelope"></i> 通知设置
                    </h3>

                    <div class="notification-item">
                        <div class="notification-icon">
                            <i class="fas fa-envelope"></i>
                        </div>
                        <div class="notification-info">
                            <h4>电子邮件警报</h4>
                            <p>当系统检测到异常时发送电子邮件通知</p>
                        </div>
                        <label class="notification-switch">
                            <input type="checkbox" checked>
                            <span class="slider"></span>
                        </label>
                    </div>

                    <div class="notification-item">
                        <div class="notification-icon">
                            <i class="fas fa-mobile-alt"></i>
                        </div>
                        <div class="notification-info">
                            <h4>短信通知</h4>
                            <p>发送短信到注册手机号进行警报通知</p>
                        </div>
                        <label class="notification-switch">
                            <input type="checkbox">
                            <span class="slider"></span>
                        </label>
                    </div>

                    <div class="notification-item">
                        <div class="notification-icon">
                            <i class="fas fa-bell"></i>
                        </div>
                        <div class="notification-info">
                            <h4>系统内通知</h4>
                            <p>在系统界面显示警报通知</p>
                        </div>
                        <label class="notification-switch">
                            <input type="checkbox" checked>
                            <span class="slider"></span>
                        </label>
                    </div>

                    <div class="form-footer">
                        <button class="btn btn-outline">取消</button>
                        <button class="btn btn-primary">保存设置</button>
                    </div>
                </div>
            </div>

            <!-- 系统参数 -->
            <div id="system" class="tab-content">
                <div class="section-header">
                    <h2><i class="fas fa-server"></i> 系统参数配置</h2>
                    <p>调整系统核心参数和配置选项</p>
                </div>

                <div class="system-status">
                    <div class="status-card">
                        <div class="status-icon system">
                            <i class="fas fa-server"></i>
                        </div>
                        <div class="status-info">
                            <h3>系统状态</h3>
                            <p>正常运行时间</p>
                            <div class="status-value">98.7%</div>
                        </div>
                    </div>

                    <div class="status-card">
                        <div class="status-icon database">
                            <i class="fas fa-database"></i>
                        </div>
                        <div class="status-info">
                            <h3>数据库状态</h3>
                            <p>存储空间使用</p>
                            <div class="status-value">64%</div>
                        </div>
                    </div>

                    <div class="status-card">
                        <div class="status-icon security">
                            <i class="fas fa-shield-alt"></i>
                        </div>
                        <div class="status-info">
                            <h3>安全状态</h3>
                            <p>安全威胁检测</p>
                            <div class="status-value">无威胁</div>
                        </div>
                    </div>

                    <div class="status-card">
                        <div class="status-icon analytics">
                            <i class="fas fa-chart-line"></i>
                        </div>
                        <div class="status-info">
                            <h3>数据统计</h3>
                            <p>今日处理数据</p>
                            <div class="status-value">24.5K</div>
                        </div>
                    </div>
                </div>

                <div class="settings-card">
                    <h3 class="section-subheader">
                        <i class="fas fa-cogs"></i> 高级配置
                    </h3>

                    <div class="form-row">
                        <div class="form-group">
                            <label>数据采集频率</label>
                            <select class="form-control">
                                <option>每5秒</option>
                                <option selected>每10秒</option>
                                <option>每30秒</option>
                                <option>每分钟</option>
                            </select>
                        </div>

                        <div class="form-group">
                            <label>数据保留策略</label>
                            <select class="form-control">
                                <option>30天</option>
                                <option selected>90天</option>
                                <option>180天</option>
                                <option>1年</option>
                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <label>系统API密钥</label>
                        <div class="api-key-container">
                            <input type="text" class="form-control" value="sk_live_51HvT8SGh27aV7zTd..." readonly>
                            <button class="btn btn-outline btn-sm">
                                <i class="fas fa-copy"></i> 复制
                            </button>
                            <button class="btn btn-outline btn-sm">
                                <i class="fas fa-redo"></i> 重置
                            </button>
                        </div>
                    </div>

                    <div class="form-group">
                        <label>系统维护模式</label>
                        <div class="toggle-container">
                            <label class="toggle-switch">
                                <input type="checkbox">
                                <span class="slider"></span>
                            </label>
                            <div class="toggle-info">
                                <p>启用维护模式将限制普通用户访问系统</p>
                            </div>
                        </div>
                    </div>

                    <div class="form-footer">
                        <button class="btn btn-outline">取消</button>
                        <button class="btn btn-primary">保存配置</button>
                    </div>
                </div>
            </div>

            <!-- 备份与恢复 -->
            <div id="backup" class="tab-content">
                <div class="section-header">
                    <h2><i class="fas fa-cloud-download-alt"></i> 备份与恢复</h2>
                    <p>管理您的系统备份和数据恢复</p>
                </div>

                <div class="settings-card">
                    <h3 class="section-subheader">
                        <i class="fas fa-history"></i> 最近备份
                    </h3>

                    <div class="backup-list">
                        <div class="backup-item">
                            <div class="backup-icon">
                                <i class="fas fa-database"></i>
                            </div>
                            <div class="backup-info">
                                <h4>完整系统备份</h4>
                                <p>2023-07-15 02:30 AM · 4.2 GB</p>
                            </div>
                            <div class="backup-actions">
                                <button class="btn btn-sm btn-outline">
                                    <i class="fas fa-download"></i> 下载
                                </button>
                                <button class="btn btn-sm btn-danger">
                                    <i class="fas fa-trash"></i> 删除
                                </button>
                            </div>
                        </div>

                        <div class="backup-item">
                            <div class="backup-icon">
                                <i class="fas fa-file-alt"></i>
                            </div>
                            <div class="backup-info">
                                <h4>配置备份</h4>
                                <p>2023-07-14 02:30 AM · 24.5 MB</p>
                            </div>
                            <div class="backup-actions">
                                <button class="btn btn-sm btn-outline">
                                    <i class="fas fa-download"></i> 下载
                                </button>
                                <button class="btn btn-sm btn-danger">
                                    <i class="fas fa-trash"></i> 删除
                                </button>
                            </div>
                        </div>

                        <div class="backup-item">
                            <div class="backup-icon">
                                <i class="fas fa-users"></i>
                            </div>
                            <div class="backup-info">
                                <h4>用户数据备份</h4>
                                <p>2023-07-13 02:30 AM · 128.7 MB</p>
                            </div>
                            <div class="backup-actions">
                                <button class="btn btn-sm btn-outline">
                                    <i class="fas fa-download"></i> 下载
                                </button>
                                <button class="btn btn-sm btn-danger">
                                    <i class="fas fa-trash"></i> 删除
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="form-footer">
                        <button class="btn btn-primary">
                            <i class="fas fa-plus"></i> 创建新备份
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>