中科集团HTML托管
返回管理
编辑页面
页面标题
有效期
7天
30天
90天
修改后将从当前时间重新计算过期时间
CSS文件（可选）
JS文件（可选）
HTML内容
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>车间管理系统</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f5f6f8; min-height: 100vh; } /* 顶部导航栏 */ .header { position: fixed; top: 0; left: 0; right: 0; height: 60px; background: linear-gradient(135deg, #2d8c2d 0%, #3ca03c 100%); display: flex; align-items: center; justify-content: space-between; padding: 0 24px; box-shadow: 0 2px 8px rgba(0,0,0,0.15); z-index: 1000; } .header-left { display: flex; align-items: center; gap: 12px; } .header-logo { width: 36px; height: 36px; background: rgba(255,255,255,0.2); border-radius: 8px; display: flex; align-items: center; justify-content: center; } .header-logo svg { width: 24px; height: 24px; fill: white; } .header-title { color: white; font-size: 20px; font-weight: 600; } .header-right { display: flex; align-items: center; gap: 20px; } .header-icon { width: 36px; height: 36px; background: rgba(255,255,255,0.15); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.3s; } .header-icon:hover { background: rgba(255,255,255,0.3); } .header-icon svg { width: 20px; height: 20px; fill: white; } .user-info { display: flex; align-items: center; gap: 10px; color: white; cursor: pointer; } .user-avatar { width: 36px; height: 36px; background: rgba(255,255,255,0.25); border-radius: 50%; display: flex; align-items: center; justify-content: center; } .user-avatar svg { width: 20px; height: 20px; fill: white; } .user-name { font-size: 14px; } /* 侧边栏 */ .sidebar { position: fixed; top: 60px; left: 0; bottom: 0; width: 220px; background: white; box-shadow: 2px 0 8px rgba(0,0,0,0.08); overflow-y: auto; z-index: 900; } .sidebar-menu { padding: 16px 0; } .menu-group { margin-bottom: 8px; } .menu-title { padding: 12px 20px 8px; font-size: 12px; color: #999; text-transform: uppercase; letter-spacing: 1px; } .menu-item { display: flex; align-items: center; padding: 12px 20px; cursor: pointer; transition: all 0.3s; border-left: 3px solid transparent; gap: 12px; } .menu-item:hover { background: #f0f9f0; border-left-color: #3ca03c; } .menu-item.active { background: #e8f5e8; border-left-color: #3ca03c; } .menu-item.active .menu-icon svg { fill: #3ca03c; } .menu-item.active .menu-text { color: #2d8c2d; } .menu-icon { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; } .menu-icon svg { width: 20px; height: 20px; fill: #666; transition: fill 0.3s; } .menu-text { font-size: 14px; color: #333; } /* 主内容区 */ .main-content { margin-left: 220px; margin-top: 60px; padding: 24px; min-height: calc(100vh - 60px); background: #f5f6f8; } /* 面包屑 */ .breadcrumb { margin-bottom: 20px; display: flex; align-items: center; gap: 8px; font-size: 13px; color: #666; } .breadcrumb-item { color: #999; cursor: pointer; } .breadcrumb-item:hover { color: #3ca03c; } .breadcrumb-item.current { color: #333; cursor: default; } .breadcrumb-separator { color: #ddd; } /* 页面标题 */ .page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; } .page-title { font-size: 24px; font-weight: 600; color: #333; } .page-actions { display: flex; gap: 12px; } /* 按钮 */ .btn { padding: 10px 20px; border-radius: 6px; font-size: 14px; cursor: pointer; transition: all 0.3s; border: none; display: flex; align-items: center; gap: 6px; } .btn-primary { background: linear-gradient(135deg, #2d8c2d 0%, #3ca03c 100%); color: white; } .btn-primary:hover { box-shadow: 0 4px 12px rgba(60,160,60,0.4); transform: translateY(-1px); } .btn-secondary { background: white; color: #666; border: 1px solid #ddd; } .btn-secondary:hover { border-color: #3ca03c; color: #3ca03c; } .btn-danger { background: #ff4d4f; color: white; } .btn-danger:hover { background: #ff6b6b; } .btn-sm { padding: 6px 12px; font-size: 12px; } .btn svg { width: 16px; height: 16px; } /* 统计卡片 */ .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 24px; } .stat-card { background: white; border-radius: 12px; padding: 24px; box-shadow: 0 2px 12px rgba(0,0,0,0.05); transition: all 0.3s; cursor: pointer; } .stat-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.1); } .stat-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; } .stat-icon.blue { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } .stat-icon.green { background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); } .stat-icon.orange { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); } .stat-icon.purple { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); } .stat-icon svg { width: 24px; height: 24px; fill: white; } .stat-label { font-size: 13px; color: #999; } .stat-value { font-size: 28px; font-weight: 700; color: #333; margin: 8px 0; } .stat-trend { font-size: 12px; display: flex; align-items: center; gap: 4px; } .stat-trend.up { color: #52c41a; } .stat-trend.down { color: #ff4d4f; } /* 内容卡片 */ .content-card { background: white; border-radius: 12px; padding: 24px; box-shadow: 0 2px 12px rgba(0,0,0,0.05); margin-bottom: 24px; } .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid #f0f0f0; } .card-title { font-size: 16px; font-weight: 600; color: #333; } /* 表格 */ .table { width: 100%; border-collapse: collapse; } .table th { text-align: left; padding: 12px 16px; background: #fafafa; font-size: 13px; font-weight: 500; color: #666; } .table td { padding: 16px; border-bottom: 1px solid #f0f0f0; font-size: 14px; color: #333; } .table tr:hover { background: #fafafa; } .table tr { cursor: pointer; } .status-badge { padding: 4px 10px; border-radius: 12px; font-size: 12px; } .status-badge.success { background: #e6f7e6; color: #52c41a; } .status-badge.warning { background: #fff7e6; color: #fa8c16; } .status-badge.info { background: #e6f7ff; color: #1890ff; } .status-badge.danger { background: #fff1f0; color: #ff4d4f; } .action-link { color: #3ca03c; text-decoration: none; padding: 4px 8px; border-radius: 4px; transition: background 0.3s; } .action-link:hover { background: #e8f5e8; } /* 二级页面容器 */ .sub-page { display: none; } .sub-page.active { display: block; animation: fadeIn 0.3s ease; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* 工单卡片 */ .order-list { display: flex; flex-direction: column; gap: 12px; } .order-card { background: white; border-radius: 8px; padding: 16px; border: 1px solid #f0f0f0; transition: all 0.3s; cursor: pointer; } .order-card:hover { border-color: #3ca03c; box-shadow: 0 2px 8px rgba(60,160,60,0.1); } .order-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .order-id { font-weight: 600; color: #333; } .order-info { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .order-item { display: flex; flex-direction: column; gap: 4px; } .order-label { font-size: 12px; color: #999; } .order-value { font-size: 14px; color: #333; } /* 搜索栏 */ .search-bar { display: flex; gap: 12px; margin-bottom: 20px; } .search-input { flex: 1; max-width: 300px; padding: 10px 16px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px; outline: none; transition: border-color 0.3s; } .search-input:focus { border-color: #3ca03c; } .filter-select { padding: 10px 16px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px; outline: none; cursor: pointer; } /* 分页 */ .pagination { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 20px; } .pagination-btn { min-width: 32px; height: 32px; border: 1px solid #ddd; border-radius: 6px; background: white; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s; padding: 0 10px; } .pagination-btn:hover { border-color: #3ca03c; color: #3ca03c; } .pagination-btn.active { background: #3ca03c; border-color: #3ca03c; color: white; } .pagination-btn svg { width: 14px; height: 14px; fill: #666; } /* 详情页样式 */ .detail-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; } .back-btn { display: flex; align-items: center; gap: 8px; color: #666; cursor: pointer; transition: color 0.3s; } .back-btn:hover { color: #3ca03c; } .back-btn svg { width: 20px; height: 20px; fill: currentColor; } .detail-section { background: white; border-radius: 12px; padding: 24px; margin-bottom: 20px; box-shadow: 0 2px 12px rgba(0,0,0,0.05); } .detail-section-title { font-size: 16px; font-weight: 600; color: #333; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid #f0f0f0; } .detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .detail-item { display: flex; flex-direction: column; gap: 4px; } .detail-label { font-size: 13px; color: #999; } .detail-value { font-size: 15px; color: #333; } /* 表单弹窗 */ .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); display: none; align-items: center; justify-content: center; z-index: 2000; } .modal-overlay.active { display: flex; } .modal { background: white; border-radius: 12px; width: 500px; max-width: 90%; max-height: 80vh; overflow-y: auto; animation: modalIn 0.3s ease; } @keyframes modalIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; border-bottom: 1px solid #f0f0f0; } .modal-title { font-size: 18px; font-weight: 600; color: #333; } .modal-close { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 50%; transition: background 0.3s; } .modal-close:hover { background: #f5f5f5; } .modal-close svg { width: 20px; height: 20px; fill: #999; } .modal-body { padding: 24px; } .modal-footer { display: flex; justify-content: flex-end; gap: 12px; padding: 20px 24px; border-top: 1px solid #f0f0f0; } .form-group { margin-bottom: 20px; } .form-label { display: block; font-size: 14px; color: #333; margin-bottom: 8px; font-weight: 500; } .form-input { width: 100%; padding: 10px 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px; outline: none; transition: border-color 0.3s; } .form-input:focus { border-color: #3ca03c; } .form-select { width: 100%; padding: 10px 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px; outline: none; } /* 标签页 */ .tabs { display: flex; border-bottom: 1px solid #f0f0f0; margin-bottom: 20px; } .tab { padding: 12px 20px; font-size: 14px; color: #666; cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.3s; } .tab:hover { color: #3ca03c; } .tab.active { color: #3ca03c; border-bottom-color: #3ca03c; } /* 时间线 */ .timeline { padding-left: 20px; } .timeline-item { position: relative; padding-left: 30px; padding-bottom: 20px; border-left: 2px solid #e8e8e8; } .timeline-item:last-child { border-left-color: transparent; } .timeline-item::before { content: ''; position: absolute; left: -6px; top: 0; width: 10px; height: 10px; border-radius: 50%; background: #3ca03c; } .timeline-time { font-size: 12px; color: #999; margin-bottom: 4px; } .timeline-content { font-size: 14px; color: #333; } /* 空状态 */ .empty-state { text-align: center; padding: 60px 20px; color: #999; } .empty-state svg { width: 80px; height: 80px; fill: #ddd; margin-bottom: 16px; } .empty-state-text { font-size: 14px; } /* Toast提示 */ .toast { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); background: #333; color: white; padding: 12px 24px; border-radius: 8px; font-size: 14px; z-index: 3000; opacity: 0; transition: opacity 0.3s; } .toast.show { opacity: 1; } </style> </head> <body> <!-- 顶部导航栏 --> <header class="header"> <div class="header-left"> <div class="header-logo"> <svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg> </div> <span class="header-title">车间管理系统</span> </div> <div class="header-right"> <div class="header-icon" title="消息" onclick="showToast('暂无新消息')"> <svg viewBox="0 0 24 24"><path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"/></svg> </div> <div class="user-info"> <div class="user-avatar"> <svg viewBox="0 0 24 24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg> </div> <span class="user-name">管理员</span> </div> </div> </header> <!-- 侧边栏 --> <aside class="sidebar"> <nav class="sidebar-menu"> <div class="menu-group"> <div class="menu-title">数据中心</div> <div class="menu-item active" data-page="dashboard"> <div class="menu-icon"><svg viewBox="0 0 24 24"><path d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z"/></svg></div> <span class="menu-text">工作台</span> </div> <div class="menu-item" data-page="statistics"> <div class="menu-icon"><svg viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 17H7v-7h2v7zm4 0h-2V7h2v10zm4 0h-2v-4h2v4z"/></svg></div> <span class="menu-text">数据统计</span> </div> </div> <div class="menu-group"> <div class="menu-title">生产管理</div> <div class="menu-item" data-page="production"> <div class="menu-icon"><svg viewBox="0 0 24 24"><path d="M20 18c1.1 0 1.99-.9 1.99-2L22 6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2H0v2h24v-2h-4zM4 6h16v10H4V6z"/></svg></div> <span class="menu-text">生产工单</span> </div> <div class="menu-item" data-page="equipment"> <div class="menu-icon"><svg viewBox="0 0 24 24"><path d="M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 7.4 1.3L12 15l3 3 3.7-3c1.1.9 2.7 1.3 4.1 1.1l-.1.9z"/></svg></div> <span class="menu-text">设备管理</span> </div> <div class="menu-item" data-page="quality"> <div class="menu-icon"><svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg></div> <span class="menu-text">质量管理</span> </div> </div> <div class="menu-group"> <div class="menu-title">物料管理</div> <div class="menu-item" data-page="material"> <div class="menu-icon"><svg viewBox="0 0 24 24"><path d="M20 2H4c-1 0-2 .9-2 2v3.01c0 .72.43 1.34 1 1.69V20c0 1.1 1.1 2 2 2h14c.9 0 2-.9 2-2V8.7c.57-.35 1-.97 1-1.69V4c0-1.1-1-2-2-2zm-5 12H9v-2h6v2zm5-7H4V4h16v3z"/></svg></div> <span class="menu-text">物料清单</span> </div> <div class="menu-item" data-page="inventory"> <div class="menu-icon"><svg viewBox="0 0 24 24"><path d="M20 2H4c-1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 5h-3v5h3V7zm-5 0H7v5h6V7zM17 17H7v-3h10v3zm1-10H6V4h12v3z"/></svg></div> <span class="menu-text">库存管理</span> </div> </div> <div class="menu-group"> <div class="menu-title">人员管理</div> <div class="menu-item" data-page="staff"> <div class="menu-icon"><svg viewBox="0 0 24 24"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg></div> <span class="menu-text">员工管理</span> </div> <div class="menu-item" data-page="attendance"> <div class="menu-icon"><svg viewBox="0 0 24 24"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z"/></svg></div> <span class="menu-text">考勤管理</span> </div> </div> <div class="menu-group"> <div class="menu-title">系统设置</div> <div class="menu-item" data-page="settings"> <div class="menu-icon"><svg viewBox="0 0 24 24"><path d="M19.14 12.94c.04-.31.06-.63.06-.94 0-.31-.02-.63-.06-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.04.31-.06.63-.06.94s.02.63.06.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"/></svg></div> <span class="menu-text">基础设置</span> </div> <div class="menu-item" data-page="permissions"> <div class="menu-icon"><svg viewBox="0 0 24 24"><path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z"/></svg></div> <span class="menu-text">权限管理</span> </div> </div> </nav> </aside> <!-- 主内容区 --> <main class="main-content"> <!-- ========== 工作台页面 ========== --> <div class="sub-page active" id="page-dashboard"> <div class="breadcrumb"> <span class="breadcrumb-item current">首页</span> </div> <div class="page-header"> <h1 class="page-title">工作台</h1> </div> <div class="stats-grid"> <div class="stat-card" onclick="navigateTo('production')"> <div class="stat-icon blue"><svg viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/></svg></div> <div class="stat-label">今日工单</div> <div class="stat-value">128</div> <div class="stat-trend up">较昨日 +12%</div> </div> <div class="stat-card" onclick="navigateTo('production')"> <div class="stat-icon green"><svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg></div> <div class="stat-label">完成工单</div> <div class="stat-value">96</div> <div class="stat-trend up">完成率 75%</div> </div> <div class="stat-card" onclick="navigateTo('production')"> <div class="stat-icon orange"><svg viewBox="0 0 24 24"><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/></svg></div> <div class="stat-label">进行中</div> <div class="stat-value">32</div> <div class="stat-trend down">进行中数量</div> </div> <div class="stat-card" onclick="navigateTo('material')"> <div class="stat-icon purple"><svg viewBox="0 0 24 24"><path d="M20 2H4c-1 0-2 .9-2 2v3.01c0 .72.43 1.34 1 1.69V20c0 1.1 1.1 2 2 2h14c.9 0 2-.9 2-2V8.7c.57-.35 1-.97 1-1.69V4c0-1.1-1-2-2-2z"/></svg></div> <div class="stat-label">物料预警</div> <div class="stat-value">8</div> <div class="stat-trend down">需要补充库存</div> </div> </div> <div class="content-card"> <div class="card-header"> <h3 class="card-title">待处理工单</h3> <button class="btn btn-secondary" onclick="navigateTo('production')">查看全部</button> </div> <table class="table"> <thead> <tr><th>工单编号</th><th>产品名称</th><th>计划数量</th><th>完成数量</th><th>负责人</th><th>状态</th><th>操作</th></tr> </thead> <tbody> <tr onclick="showOrderDetail('WO-20260501')"> <td>WO-20260501</td><td>电机组件 A型</td><td>1000</td><td>680</td><td>张师傅</td><td><span class="status-badge warning">进行中</span></td><td onclick="event.stopPropagation(); showOrderDetail('WO-20260501')"><span class="action-link">查看详情</span></td> </tr> <tr onclick="showOrderDetail('WO-20260502')"> <td>WO-20260502</td><td>控制器 B型</td><td>500</td><td>500</td><td>李师傅</td><td><span class="status-badge success">已完成</span></td><td onclick="event.stopPropagation(); showOrderDetail('WO-20260502')"><span class="action-link">查看详情</span></td> </tr> <tr onclick="showOrderDetail('WO-20260503')"> <td>WO-20260503</td><td>传感器组件</td><td>800</td><td>0</td><td>王师傅</td><td><span class="status-badge info">待开始</span></td><td onclick="event.stopPropagation(); showOrderDetail('WO-20260503')"><span class="action-link">查看详情</span></td> </tr> </tbody> </table> </div> </div> <!-- ========== 数据统计页面 ========== --> <div class="sub-page" id="page-statistics"> <div class="breadcrumb"> <span class="breadcrumb-item" onclick="navigateTo('dashboard')">首页</span> <span class="breadcrumb-separator">/</span> <span class="breadcrumb-item current">数据统计</span> </div> <div class="page-header"> <h1 class="page-title">数据统计</h1> </div> <div class="stats-grid"> <div class="stat-card"><div class="stat-icon green"><svg viewBox="0 0 24 24"><path d="M16 6l2.29 2.29-4.88 4.88-4-4L2 16.59 3.41 18l6-6 4 4 6.3-6.29L22 12V6z"/></svg></div><div class="stat-label">本月产量</div><div class="stat-value">12,580</div><div class="stat-trend up">件</div></div> <div class="stat-card"><div class="stat-icon blue"><svg viewBox="0 0 24 24"><path d="M11.8 10.9c-2.27-.59-3-1.2-3-2.15 0-1.09 1.01-1.85 2.7-1.85 1.78 0 2.44.85 2.5 2.1h2.21c-.07-1.72-1.12-3.3-3.21-3.81V3h-3v2.16c-1.94.42-3.5 1.68-3.5 3.61 0 2.31 1.91 3.46 4.7 4.13 2.5.6 3 1.48 3 2.41 0 .69-.49 1.79-2.7 1.79-2.06 0-2.87-.92-2.98-2.1h-2.2c.12 2.19 1.76 3.42 3.68 3.83V21h3v-2.15c1.95-.37 3.5-1.5 3.5-3.55 0-2.84-2.43-3.81-4.7-4.4z"/></svg></div><div class="stat-label">良品率</div><div class="stat-value">98.5%</div><div class="stat-trend up">较上月 +0.8%</div></div> <div class="stat-card"><div class="stat-icon orange"><svg viewBox="0 0 24 24"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z"/></svg></div><div class="stat-label">平均工时</div><div class="stat-value">4.2h</div><div class="stat-trend down">小时/件</div></div> <div class="stat-card"><div class="stat-icon purple"><svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/></svg></div><div class="stat-label">设备利用率</div><div class="stat-value">85.3%</div><div class="stat-trend up">较上月 +2.1%</div></div> </div> <div class="content-card"> <div class="card-header"><h3 class="card-title">产量趋势图</h3></div> <div style="height:300px; background:linear-gradient(135deg, #f5f7fa 0%, #e8ecef 100%); border-radius:8px; display:flex; align-items:center; justify-content:center; color:#999;">产量趋势图表区域</div> </div> </div> <!-- ========== 生产工单页面 ========== --> <div class="sub-page" id="page-production"> <div class="breadcrumb"> <span class="breadcrumb-item" onclick="navigateTo('dashboard')">首页</span> <span class="breadcrumb-separator">/</span> <span class="breadcrumb-item current">生产工单</span> </div> <div class="page-header"> <h1 class="page-title">生产工单</h1> <div class="page-actions"> <button class="btn btn-primary" onclick="showModal('createOrderModal')"> <svg viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg> 创建工单 </button> </div> </div> <div class="search-bar"> <input type="text" class="search-input" placeholder="搜索工单编号或产品名称"> <select class="filter-select"> <option>全部状态</option><option>待开始</option><option>进行中</option><option>已完成</option> </select> </div> <div class="content-card"> <div class="order-list"> <div class="order-card" onclick="showOrderDetail('WO-20260501')"> <div class="order-header"> <span class="order-id">WO-20260501</span> <span class="status-badge warning">进行中</span> </div> <div class="order-info"> <div class="order-item"><span class="order-label">产品名称</span><span class="order-value">电机组件 A型</span></div> <div class="order-item"><span class="order-label">计划数量</span><span class="order-value">1000 件</span></div> <div class="order-item"><span class="order-label">完成数量</span><span class="order-value">680 件</span></div> <div class="order-item"><span class="order-label">负责人</span><span class="order-value">张师傅</span></div> <div class="order-item"><span class="order-label">计划日期</span><span class="order-value">2026-05-01</span></div> <div class="order-item"><span class="order-label">完成日期</span><span class="order-value">-</span></div> </div> </div> <div class="order-card" onclick="showOrderDetail('WO-20260502')"> <div class="order-header"> <span class="order-id">WO-20260502</span> <span class="status-badge success">已完成</span> </div> <div class="order-info"> <div class="order-item"><span class="order-label">产品名称</span><span class="order-value">控制器 B型</span></div> <div class="order-item"><span class="order-label">计划数量</span><span class="order-value">500 件</span></div> <div class="order-item"><span class="order-label">完成数量</span><span class="order-value">500 件</span></div> <div class="order-item"><span class="order-label">负责人</span><span class="order-value">李师傅</span></div> <div class="order-item"><span class="order-label">计划日期</span><span class="order-value">2026-04-28</span></div> <div class="order-item"><span class="order-label">完成日期</span><span class="order-value">2026-05-05</span></div> </div> </div> <div class="order-card" onclick="showOrderDetail('WO-20260503')"> <div class="order-header"> <span class="order-id">WO-20260503</span> <span class="status-badge info">待开始</span> </div> <div class="order-info"> <div class="order-item"><span class="order-label">产品名称</span><span class="order-value">传感器组件</span></div> <div class="order-item"><span class="order-label">计划数量</span><span class="order-value">800 件</span></div> <div class="order-item"><span class="order-label">完成数量</span><span class="order-value">0 件</span></div> <div class="order-item"><span class="order-label">负责人</span><span class="order-value">王师傅</span></div> <div class="order-item"><span class="order-label">计划日期</span><span class="order-value">2026-05-15</span></div> <div class="order-item"><span class="order-label">完成日期</span><span class="order-value">-</span></div> </div> </div> </div> <div class="pagination"> <div class="pagination-btn"><svg viewBox="0 0 24 24"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg></div> <div class="pagination-btn active">1</div> <div class="pagination-btn">2</div> <div class="pagination-btn">3</div> <div class="pagination-btn"><svg viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg></div> </div> </div> </div> <!-- ========== 生产工单详情页面 ========== --> <div class="sub-page" id="page-order-detail"> <div class="breadcrumb"> <span class="breadcrumb-item" onclick="navigateTo('dashboard')">首页</span> <span class="breadcrumb-separator">/</span> <span class="breadcrumb-item" onclick="navigateTo('production')">生产工单</span> <span class="breadcrumb-separator">/</span> <span class="breadcrumb-item current" id="orderDetailTitle">工单详情</span> </div> <div class="detail-header"> <div class="page-header" style="margin-bottom:0;"> <h1 class="page-title" id="orderDetailId">WO-20260501</h1> </div> <button class="btn btn-secondary" onclick="goBack()"> <svg viewBox="0 0 24 24" style="width:16px;height:16px;fill:currentColor;"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg> 返回 </button> </div> <div class="detail-section"> <div class="detail-section-title">基本信息</div> <div class="detail-grid"> <div class="detail-item"><span class="detail-label">工单编号</span><span class="detail-value" id="detailId">WO-20260501</span></div> <div class="detail-item"><span class="detail-label">产品名称</span><span class="detail-value" id="detailProduct">电机组件 A型</span></div> <div class="detail-item"><span class="detail-label">计划数量</span><span class="detail-value" id="detailPlanQty">1000 件</span></div> <div class="detail-item"><span class="detail-label">完成数量</span><span class="detail-value" id="detailFinishQty">680 件</span></div> <div class="detail-item"><span class="detail-label">负责人</span><span class="detail-value" id="detailLeader">张师傅</span></div> <div class="detail-item"><span class="detail-label">状态</span><span class="detail-value"><span class="status-badge warning" id="detailStatus">进行中</span></span></div> <div class="detail-item"><span class="detail-label">计划开始</span><span class="detail-value">2026-05-01</span></div> <div class="detail-item"><span class="detail-label">计划完成</span><span class="detail-value">2026-05-10</span></div> </div> </div> <div class="detail-section"> <div class="detail-section-title">生产进度</div> <div style="display:flex; align-items:center; gap:16px; margin-bottom:16px;"> <div style="flex:1; height:8px; background:#e8e8e8; border-radius:4px; overflow:hidden;"> <div style="width:68%; height:100%; background:linear-gradient(90deg, #3ca03c, #52c41a); border-radius:4px;"></div> </div> <span style="font-size:14px; color:#3ca03c; font-weight:600;">68%</span> </div> <div class="detail-grid"> <div class="detail-item"><span class="detail-label">已投料</span><span class="detail-value">720 件</span></div> <div class="detail-item"><span class="detail-label">合格品</span><span class="detail-value">665 件</span></div> <div class="detail-item"><span class="detail-label">不合格</span><span class="detail-value">15 件</span></div> <div class="detail-item"><span class="detail-label">报废</span><span class="detail-value">0 件</span></div> </div> </div> <div class="detail-section"> <div class="detail-section-title">操作记录</div> <div class="timeline"> <div class="timeline-item"> <div class="timeline-time">2026-05-13 11:30</div> <div class="timeline-content">张师傅 更新生产进度 +100件</div> </div> <div class="timeline-item"> <div class="timeline-time">2026-05-13 09:15</div> <div class="timeline-content">系统 自动补充物料 螺丝M5x20 x50</div> </div> <div class="timeline-item"> <div class="timeline-time">2026-05-12 17:45</div> <div class="timeline-content">张师傅 提交检验报告 合格98件</div> </div> <div class="timeline-item"> <div class="timeline-time">2026-05-01 08:30</div> <div class="timeline-content">系统 创建工单</div> </div> </div> </div> </div> <!-- ========== 设备管理页面 ========== --> <div class="sub-page" id="page-equipment"> <div class="breadcrumb"> <span class="breadcrumb-item" onclick="navigateTo('dashboard')">首页</span> <span class="breadcrumb-separator">/</span> <span class="breadcrumb-item current">设备管理</span> </div> <div class="page-header"> <h1 class="page-title">设备管理</h1> <div class="page-actions"> <button class="btn btn-primary" onclick="showModal('addEquipmentModal')"> <svg viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg> 添加设备 </button> </div> </div> <div class="stats-grid"> <div class="stat-card"><div class="stat-label">设备总数</div><div class="stat-value">45</div></div> <div class="stat-card"><div class="stat-label">运行中</div><div class="stat-value" style="color:#52c41a;">38</div></div> <div class="stat-card"><div class="stat-label">维保中</div><div class="stat-value" style="color:#fa8c16;">5</div></div> <div class="stat-card"><div class="stat-label">故障</div><div class="stat-value" style="color:#ff4d4f;">2</div></div> </div> <div class="content-card"> <table class="table"> <thead><tr><th>设备编号</th><th>设备名称</th><th>设备型号</th><th>所在车间</th><th>状态</th><th>操作</th></tr></thead> <tbody> <tr onclick="showEquipmentDetail('EQ-001')"> <td>EQ-001</td><td>数控车床</td><td>CNC-500</td><td>一车间</td><td><span class="status-badge success">运行中</span></td> <td onclick="event.stopPropagation(); showEquipmentDetail('EQ-001')"><span class="action-link">详情</span></td> </tr> <tr onclick="showEquipmentDetail('EQ-002')"> <td>EQ-002</td><td>铣床</td><td>Milling-300</td><td>一车间</td><td><span class="status-badge warning">维保中</span></td> <td onclick="event.stopPropagation(); showEquipmentDetail('EQ-002')"><span class="action-link">详情</span></td> </tr> <tr onclick="showEquipmentDetail('EQ-003')"> <td>EQ-003</td><td>激光切割机</td><td>Laser-1000</td><td>二车间</td><td><span class="status-badge info">待机</span></td> <td onclick="event.stopPropagation(); showEquipmentDetail('EQ-003')"><span class="action-link">详情</span></td> </tr> </tbody> </table> </div> </div> <!-- ========== 设备详情页面 ========== --> <div class="sub-page" id="page-equipment-detail"> <div class="breadcrumb"> <span class="breadcrumb-item" onclick="navigateTo('dashboard')">首页</span> <span class="breadcrumb-separator">/</span> <span class="breadcrumb-item" onclick="navigateTo('equipment')">设备管理</span> <span class="breadcrumb-separator">/</span> <span class="breadcrumb-item current">设备详情</span> </div> <div class="detail-header"> <div class="page-header" style="margin-bottom:0;"> <h1 class="page-title" id="equipDetailName">数控车床</h1> </div> <button class="btn btn-secondary" onclick="goBack()"> <svg viewBox="0 0 24 24" style="width:16px;height:16px;fill:currentColor;"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg> 返回 </button> </div> <div class="detail-section"> <div class="detail-section-title">基本信息</div> <div class="detail-grid"> <div class="detail-item"><span class="detail-label">设备编号</span><span class="detail-value">EQ-001</span></div> <div class="detail-item"><span class="detail-label">设备名称</span><span class="detail-value">数控车床</span></div> <div class="detail-item"><span class="detail-label">设备型号</span><span class="detail-value">CNC-500</span></div> <div class="detail-item"><span class="detail-label">所在车间</span><span class="detail-value">一车间</span></div> <div class="detail-item"><span class="detail-label">购置日期</span><span class="detail-value">2023-06-15</span></div> <div class="detail-item"><span class="detail-label">状态</span><span class="detail-value"><span class="status-badge success">运行中</span></span></div> </div> </div> <div class="detail-section"> <div class="detail-section-title">运行数据</div> <div class="detail-grid"> <div class="detail-item"><span class="detail-label">运行时长</span><span class="detail-value">2,580 小时</span></div> <div class="detail-item"><span class="detail-label">今日运行时长</span><span class="detail-value">8.5 小时</span></div> <div class="detail-item"><span class="detail-label">累计产量</span><span class="detail-value">15,680 件</span></div> <div class="detail-item"><span class="detail-label">维保周期</span><span class="detail-value">90 天</span></div> <div class="detail-item"><span class="detail-label">下次维保</span><span class="detail-value" style="color:#fa8c16;">2026-06-01</span></div> <div class="detail-item"><span class="detail-label">设备利用率</span><span class="detail-value">92.3%</span></div> </div> </div> </div> <!-- ========== 质量管理页面 ========== --> <div class="sub-page" id="page-quality"> <div class="breadcrumb"> <span class="breadcrumb-item" onclick="navigateTo('dashboard')">首页</span> <span class="breadcrumb-separator">/</span> <span class="breadcrumb-item current">质量管理</span> </div> <div class="page-header"> <h1 class="page-title">质量管理</h1> <div class="page-actions"> <button class="btn btn-primary" onclick="showToast('检验报告已导出')"> <svg viewBox="0 0 24 24"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/></svg> 导出报表 </button> </div> </div> <div class="stats-grid"> <div class="stat-card"><div class="stat-label">今日检验</div><div class="stat-value">56</div></div> <div class="stat-card"><div class="stat-label">合格</div><div class="stat-value" style="color:#52c41a;">55</div></div> <div class="stat-card"><div class="stat-label">不合格</div><div class="stat-value" style="color:#ff4d4f;">1</div></div> <div class="stat-card"><div class="stat-label">合格率</div><div class="stat-value">98.2%</div></div> </div> <div class="content-card"> <div class="card-header"><h3 class="card-title">检验记录</h3></div> <table class="table"> <thead><tr><th>检验单号</th><th>产品名称</th><th>检验数量</th><th>合格数量</th><th>检验员</th><th>检验时间</th><th>结果</th></tr></thead> <tbody> <tr><td>QC-20260501</td><td>电机组件 A型</td><td>100</td><td>98</td><td>质管员A</td><td>2026-05-13 10:30</td><td><span class="status-badge success">合格</span></td></tr> <tr><td>QC-20260502</td><td>控制器 B型</td><td>50</td><td>50</td><td>质管员B</td><td>2026-05-13 11:00</td><td><span class="status-badge success">合格</span></td></tr> </tbody> </table> </div> </div> <!-- ========== 物料清单页面 ========== --> <div class="sub-page" id="page-material"> <div class="breadcrumb"> <span class="breadcrumb-item" onclick="navigateTo('dashboard')">首页</span> <span class="breadcrumb-separator">/</span> <span class="breadcrumb-item current">物料清单</span> </div> <div class="page-header"> <h1 class="page-title">物料清单</h1> <div class="page-actions"> <button class="btn btn-primary" onclick="showModal('addMaterialModal')"> <svg viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg> 新增物料 </button> </div> </div> <div class="content-card"> <table class="table"> <thead><tr><th>物料编码</th><th>物料名称</th><th>规格型号</th><th>单位</th><th>安全库存</th><th>当前库存</th><th>状态</th></tr></thead> <tbody> <tr><td>MT-001</td><td>螺丝 M5x20</td><td>M5*20mm</td><td>个</td><td>1000</td><td>3500</td><td><span class="status-badge success">正常</span></td></tr> <tr><td>MT-002</td><td>轴承 6205</td><td>内径25mm</td><td>个</td><td>500</td><td>480</td><td><span class="status-badge warning">预警</span></td></tr> <tr><td>MT-003</td><td>电机线</td><td>2.5平方</td><td>米</td><td>200</td><td>180</td><td><span class="status-badge warning">预警</span></td></tr> </tbody> </table> </div> </div> <!-- ========== 库存管理页面 ========== --> <div class="sub-page" id="page-inventory"> <div class="breadcrumb"> <span class="breadcrumb-item" onclick="navigateTo('dashboard')">首页</span> <span class="breadcrumb-separator">/</span> <span class="breadcrumb-item current">库存管理</span> </div> <div class="page-header"> <h1 class="page-title">库存管理</h1> <div class="page-actions"> <button class="btn btn-primary" onclick="showModal('inboundModal')"> <svg viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/></svg> 入库 </button> <button class="btn btn-secondary" onclick="showModal('outboundModal')"> <svg viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7V7h10v2zm0-4H7V3h10v2z"/></svg> 出库 </button> </div> </div> <div class="stats-grid"> <div class="stat-card"><div class="stat-label">物料种类</div><div class="stat-value">126</div></div> <div class="stat-card"><div class="stat-label">总库存量</div><div class="stat-value">58,420</div></div> <div class="stat-card"><div class="stat-label">今日入库</div><div class="stat-value" style="color:#52c41a;">3,250</div></div> <div class="stat-card"><div class="stat-label">今日出库</div><div class="stat-value" style="color:#1890ff;">2,180</div></div> </div> <div class="content-card"> <div class="card-header"><h3 class="card-title">库存流水</h3></div> <table class="table"> <thead><tr><th>单号</th><th>物料名称</th><th>类型</th><th>数量</th><th>操作员</th><th>时间</th></tr></thead> <tbody> <tr><td>IN-20260513-001</td><td>螺丝 M5x20</td><td><span class="status-badge success">入库</span></td><td style="color:#52c41a;">+500</td><td>仓库管理员</td><td>2026-05-13 09:30</td></tr> <tr><td>OUT-20260513-001</td><td>轴承 6205</td><td><span class="status-badge info">出库</span></td><td style="color:#1890ff;">-50</td><td>张师傅</td><td>2026-05-13 10:15</td></tr> </tbody> </table> </div> </div> <!-- ========== 员工管理页面 ========== --> <div class="sub-page" id="page-staff"> <div class="breadcrumb"> <span class="breadcrumb-item" onclick="navigateTo('dashboard')">首页</span> <span class="breadcrumb-separator">/</span> <span class="breadcrumb-item current">员工管理</span> </div> <div class="page-header"> <h1 class="page-title">员工管理</h1> <div class="page-actions"> <button class="btn btn-primary" onclick="showModal('addStaffModal')"> <svg viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg> 新增员工 </button> </div> </div> <div class="content-card"> <table class="table"> <thead><tr><th>工号</th><th>姓名</th><th>部门</th><th>岗位</th><th>电话</th><th>入职日期</th><th>状态</th><th>操作</th></tr></thead> <tbody> <tr onclick="showStaffDetail('EMP-001')"> <td>EMP-001</td><td>张师傅</td><td>生产部</td><td>车间组长</td><td>138****1234</td><td>2020-03-15</td><td><span class="status-badge success">在职</span></td> <td onclick="event.stopPropagation(); showStaffDetail('EMP-001')"><span class="action-link">详情</span></td> </tr> <tr onclick="showStaffDetail('EMP-002')"> <td>EMP-002</td><td>李师傅</td><td>生产部</td><td>操作工</td><td>139****5678</td><td>2021-06-20</td><td><span class="status-badge success">在职</span></td> <td onclick="event.stopPropagation(); showStaffDetail('EMP-002')"><span class="action-link">详情</span></td> </tr> <tr onclick="showStaffDetail('EMP-003')"> <td>EMP-003</td><td>王师傅</td><td>生产部</td><td>操作工</td><td>137****9012</td><td>2022-01-10</td><td><span class="status-badge success">在职</span></td> <td onclick="event.stopPropagation(); showStaffDetail('EMP-003')"><span class="action-link">详情</span></td> </tr> </tbody> </table> </div> </div> <!-- ========== 员工详情页面 ========== --> <div class="sub-page" id="page-staff-detail"> <div class="breadcrumb"> <span class="breadcrumb-item" onclick="navigateTo('dashboard')">首页</span> <span class="breadcrumb-separator">/</span> <span class="breadcrumb-item" onclick="navigateTo('staff')">员工管理</span> <span class="breadcrumb-separator">/</span> <span class="breadcrumb-item current">员工详情</span> </div> <div class="detail-header"> <div class="page-header" style="margin-bottom:0;"> <h1 class="page-title" id="staffDetailName">张师傅</h1> </div> <button class="btn btn-secondary" onclick="goBack()"> <svg viewBox="0 0 24 24" style="width:16px;height:16px;fill:currentColor;"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg> 返回 </button> </div> <div class="detail-section"> <div class="detail-section-title">基本信息</div> <div class="detail-grid"> <div class="detail-item"><span class="detail-label">工号</span><span class="detail-value">EMP-001</span></div> <div class="detail-item"><span class="detail-label">姓名</span><span class="detail-value">张师傅</span></div> <div class="detail-item"><span class="detail-label">部门</span><span class="detail-value">生产部</span></div> <div class="detail-item"><span class="detail-label">岗位</span><span class="detail-value">车间组长</span></div> <div class="detail-item"><span class="detail-label">电话</span><span class="detail-value">138****1234</span></div> <div class="detail-item"><span class="detail-label">入职日期</span><span class="detail-value">2020-03-15</span></div> <div class="detail-item"><span class="detail-label">状态</span><span class="detail-value"><span class="status-badge success">在职</span></span></div> <div class="detail-item"><span class="detail-label">工龄</span><span class="detail-value">6 年 2 个月</span></div> </div> </div> <div class="detail-section"> <div class="detail-section-title">本月出勤</div> <div class="detail-grid"> <div class="detail-item"><span class="detail-label">出勤天数</span><span class="detail-value">22 天</span></div> <div class="detail-item"><span class="detail-label">迟到次数</span><span class="detail-value">1 次</span></div> <div class="detail-item"><span class="detail-label">请假天数</span><span class="detail-value">0 天</span></div> <div class="detail-item"><span class="detail-label">加班时长</span><span class="detail-value">12 小时</span></div> </div> </div> </div> <!-- ========== 考勤管理页面 ========== --> <div class="sub-page" id="page-attendance"> <div class="breadcrumb"> <span class="breadcrumb-item" onclick="navigateTo('dashboard')">首页</span> <span class="breadcrumb-separator">/</span> <span class="breadcrumb-item current">考勤管理</span> </div> <div class="page-header"> <h1 class="page-title">考勤管理</h1> <div class="page-actions"> <button class="btn btn-secondary" onclick="showToast('考勤表已导出')">导出考勤表</button> </div> </div> <div class="stats-grid"> <div class="stat-card"><div class="stat-label">应到人数</div><div class="stat-value">42</div></div> <div class="stat-card"><div class="stat-label">已签到</div><div class="stat-value" style="color:#52c41a;">40</div></div> <div class="stat-card"><div class="stat-label">迟到</div><div class="stat-value" style="color:#fa8c16;">1</div></div> <div class="stat-card"><div class="stat-label">请假</div><div class="stat-value" style="color:#1890ff;">1</div></div> </div> <div class="content-card"> <div class="card-header"> <h3 class="card-title">今日考勤</h3> <span style="color:#999;">2026年5月13日</span> </div> <table class="table"> <thead><tr><th>工号</th><th>姓名</th><th>部门</th><th>签到时间</th><th>签退时间</th><th>状态</th></tr></thead> <tbody> <tr><td>EMP-001</td><td>张师傅</td><td>生产部</td><td>08:30</td><td>17:45</td><td><span class="status-badge success">正常</span></td></tr> <tr><td>EMP-002</td><td>李师傅</td><td>生产部</td><td>08:55</td><td>-</td><td><span class="status-badge warning">迟到</span></td></tr> <tr><td>EMP-003</td><td>王师傅</td><td>生产部</td><td>-</td><td>-</td><td><span class="status-badge info">请假</span></td></tr> </tbody> </table> </div> </div> <!-- ========== 基础设置页面 ========== --> <div class="sub-page" id="page-settings"> <div class="breadcrumb"> <span class="breadcrumb-item" onclick="navigateTo('dashboard')">首页</span> <span class="breadcrumb-separator">/</span> <span class="breadcrumb-item current">基础设置</span> </div> <div class="page-header"> <h1 class="page-title">基础设置</h1> </div> <div class="content-card"> <div class="card-header"><h3 class="card-title">系统参数</h3></div> <table class="table"> <tbody> <tr><td style="width:200px;">系统名称</td><td>车间管理系统</td></tr> <tr><td>当前版本</td><td>V1.0.0</td></tr> <tr><td>数据备份周期</td><td>每日凌晨 02:00</td></tr> <tr><td>会话超时时间</td><td>30 分钟</td></tr> </tbody> </table> </div> </div> <!-- ========== 权限管理页面 ========== --> <div class="sub-page" id="page-permissions"> <div class="breadcrumb"> <span class="breadcrumb-item" onclick="navigateTo('dashboard')">首页</span> <span class="breadcrumb-separator">/</span> <span class="breadcrumb-item current">权限管理</span> </div> <div class="page-header"> <h1 class="page-title">权限管理</h1> <div class="page-actions"> <button class="btn btn-primary" onclick="showModal('addRoleModal')"> <svg viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg> 新增角色 </button> </div> </div> <div class="content-card"> <table class="table"> <thead><tr><th>角色名称</th><th>角色描述</th><th>创建时间</th><th>状态</th><th>操作</th></tr></thead> <tbody> <tr><td>系统管理员</td><td>拥有系统全部权限</td><td>2026-01-01</td><td><span class="status-badge success">启用</span></td><td><span class="action-link">编辑</span></td></tr> <tr><td>生产主管</td><td>管理生产相关模块</td><td>2026-01-05</td><td><span class="status-badge success">启用</span></td><td><span class="action-link">编辑</span></td></tr> <tr><td>普通操作员</td><td>基础操作权限</td><td>2026-01-10</td><td><span class="status-badge success">启用</span></td><td><span class="action-link">编辑</span></td></tr> </tbody> </table> </div> </div> </main> <!-- ========== 弹窗区域 ========== --> <!-- 创建工单弹窗 --> <div class="modal-overlay" id="createOrderModal"> <div class="modal"> <div class="modal-header"> <h3 class="modal-title">创建工单</h3> <div class="modal-close" onclick="closeModal('createOrderModal')"><svg viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg></div> </div> <div class="modal-body"> <div class="form-group"><label class="form-label">产品名称</label><input type="text" class="form-input" placeholder="请输入产品名称"></div> <div class="form-group"><label class="form-label">计划数量</label><input type="number" class="form-input" placeholder="请输入计划数量"></div> <div class="form-group"><label class="form-label">负责人</label><select class="form-select"><option>请选择负责人</option><option>张师傅</option><option>李师傅</option><option>王师傅</option></select></div> <div class="form-group"><label class="form-label">计划完成日期</label><input type="date" class="form-input"></div> </div> <div class="modal-footer"> <button class="btn btn-secondary" onclick="closeModal('createOrderModal')">取消</button> <button class="btn btn-primary" onclick="closeModal('createOrderModal'); showToast('工单创建成功')">创建</button> </div> </div> </div> <!-- 添加设备弹窗 --> <div class="modal-overlay" id="addEquipmentModal"> <div class="modal"> <div class="modal-header"> <h3 class="modal-title">添加设备</h3> <div class="modal-close" onclick="closeModal('addEquipmentModal')"><svg viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg></div> </div> <div class="modal-body"> <div class="form-group"><label class="form-label">设备名称</label><input type="text" class="form-input" placeholder="请输入设备名称"></div> <div class="form-group"><label class="form-label">设备型号</label><input type="text" class="form-input" placeholder="请输入设备型号"></div> <div class="form-group"><label class="form-label">所在车间</label><select class="form-select"><option>请选择车间</option><option>一车间</option><option>二车间</option><option>三车间</option></select></div> </div> <div class="modal-footer"> <button class="btn btn-secondary" onclick="closeModal('addEquipmentModal')">取消</button> <button class="btn btn-primary" onclick="closeModal('addEquipmentModal'); showToast('设备添加成功')">添加</button> </div> </div> </div> <!-- 入库弹窗 --> <div class="modal-overlay" id="inboundModal"> <div class="modal"> <div class="modal-header"> <h3 class="modal-title">物料入库</h3> <div class="modal-close" onclick="closeModal('inboundModal')"><svg viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg></div> </div> <div class="modal-body"> <div class="form-group"><label class="form-label">物料名称</label><select class="form-select"><option>请选择物料</option><option>螺丝 M5x20</option><option>轴承 6205</option><option>电机线</option></select></div> <div class="form-group"><label class="form-label">入库数量</label><input type="number" class="form-input" placeholder="请输入数量"></div> <div class="form-group"><label class="form-label">备注</label><input type="text" class="form-input" placeholder="选填"></div> </div> <div class="modal-footer"> <button class="btn btn-secondary" onclick="closeModal('inboundModal')">取消</button> <button class="btn btn-primary" onclick="closeModal('inboundModal'); showToast('入库成功')">确认入库</button> </div> </div> </div> <!-- 出库弹窗 --> <div class="modal-overlay" id="outboundModal"> <div class="modal"> <div class="modal-header"> <h3 class="modal-title">物料出库</h3> <div class="modal-close" onclick="closeModal('outboundModal')"><svg viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg></div> </div> <div class="modal-body"> <div class="form-group"><label class="form-label">物料名称</label><select class="form-select"><option>请选择物料</option><option>螺丝 M5x20</option><option>轴承 6205</option><option>电机线</option></select></div> <div class="form-group"><label class="form-label">出库数量</label><input type="number" class="form-input" placeholder="请输入数量"></div> <div class="form-group"><label class="form-label">用途说明</label><input type="text" class="form-input" placeholder="请输入用途"></div> </div> <div class="modal-footer"> <button class="btn btn-secondary" onclick="closeModal('outboundModal')">取消</button> <button class="btn btn-primary" onclick="closeModal('outboundModal'); showToast('出库成功')">确认出库</button> </div> </div> </div> <!-- 新增员工弹窗 --> <div class="modal-overlay" id="addStaffModal"> <div class="modal"> <div class="modal-header"> <h3 class="modal-title">新增员工</h3> <div class="modal-close" onclick="closeModal('addStaffModal')"><svg viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg></div> </div> <div class="modal-body"> <div class="form-group"><label class="form-label">姓名</label><input type="text" class="form-input" placeholder="请输入姓名"></div> <div class="form-group"><label class="form-label">部门</label><select class="form-select"><option>请选择部门</option><option>生产部</option><option>质检部</option><option>仓储部</option></select></div> <div class="form-group"><label class="form-label">岗位</label><input type="text" class="form-input" placeholder="请输入岗位"></div> <div class="form-group"><label class="form-label">电话</label><input type="tel" class="form-input" placeholder="请输入电话"></div> </div> <div class="modal-footer"> <button class="btn btn-secondary" onclick="closeModal('addStaffModal')">取消</button> <button class="btn btn-primary" onclick="closeModal('addStaffModal'); showToast('员工添加成功')">添加</button> </div> </div> </div> <!-- 新增物料弹窗 --> <div class="modal-overlay" id="addMaterialModal"> <div class="modal"> <div class="modal-header"> <h3 class="modal-title">新增物料</h3> <div class="modal-close" onclick="closeModal('addMaterialModal')"><svg viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg></div> </div> <div class="modal-body"> <div class="form-group"><label class="form-label">物料名称</label><input type="text" class="form-input" placeholder="请输入物料名称"></div> <div class="form-group"><label class="form-label">规格型号</label><input type="text" class="form-input" placeholder="请输入规格型号"></div> <div class="form-group"><label class="form-label">单位</label><input type="text" class="form-input" placeholder="个/件/米等"></div> <div class="form-group"><label class="form-label">安全库存</label><input type="number" class="form-input" placeholder="请输入安全库存"></div> </div> <div class="modal-footer"> <button class="btn btn-secondary" onclick="closeModal('addMaterialModal')">取消</button> <button class="btn btn-primary" onclick="closeModal('addMaterialModal'); showToast('物料添加成功')">添加</button> </div> </div> </div> <!-- 新增角色弹窗 --> <div class="modal-overlay" id="addRoleModal"> <div class="modal"> <div class="modal-header"> <h3 class="modal-title">新增角色</h3> <div class="modal-close" onclick="closeModal('addRoleModal')"><svg viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg></div> </div> <div class="modal-body"> <div class="form-group"><label class="form-label">角色名称</label><input type="text" class="form-input" placeholder="请输入角色名称"></div> <div class="form-group"><label class="form-label">角色描述</label><input type="text" class="form-input" placeholder="请输入角色描述"></div> </div> <div class="modal-footer"> <button class="btn btn-secondary" onclick="closeModal('addRoleModal')">取消</button> <button class="btn btn-primary" onclick="closeModal('addRoleModal'); showToast('角色添加成功')">添加</button> </div> </div> </div> <!-- Toast提示 --> <div class="toast" id="toast"></div> <script> // 页面导航历史 let pageHistory = ['dashboard']; // 页面导航 function navigateTo(pageId) { // 记录历史 pageHistory.push(pageId); // 更新菜单状态 document.querySelectorAll('.menu-item').forEach(item => { item.classList.remove('active'); if (item.getAttribute('data-page') === pageId) { item.classList.add('active'); } }); // 切换页面 document.querySelectorAll('.sub-page').forEach(page => page.classList.remove('active')); document.getElementById('page-' + pageId).classList.add('active'); // 滚动到顶部 document.querySelector('.main-content').scrollTop = 0; } // 返回上一页 function goBack() { if (pageHistory.length > 1) { pageHistory.pop(); // 移除当前页 const prevPage = pageHistory[pageHistory.length - 1]; // 更新菜单状态 document.querySelectorAll('.menu-item').forEach(item => { item.classList.remove('active'); if (item.getAttribute('data-page') === prevPage) { item.classList.add('active'); } }); // 切换页面 document.querySelectorAll('.sub-page').forEach(page => page.classList.remove('active')); document.getElementById('page-' + prevPage).classList.add('active'); document.querySelector('.main-content').scrollTop = 0; } } // 显示工单详情 function showOrderDetail(orderId) { // 更新详情数据 document.getElementById('orderDetailId').textContent = orderId; document.getElementById('orderDetailTitle').textContent = orderId; document.getElementById('detailId').textContent = orderId; // 导航到详情页 navigateTo('order-detail'); } // 显示设备详情 function showEquipmentDetail(equipId) { navigateTo('equipment-detail'); } // 显示员工详情 function showStaffDetail(staffId) { navigateTo('staff-detail'); } // 显示弹窗 function showModal(modalId) { document.getElementById(modalId).classList.add('active'); } // 关闭弹窗 function closeModal(modalId) { document.getElementById(modalId).classList.remove('active'); } // 显示Toast提示 function showToast(message) { const toast = document.getElementById('toast'); toast.textContent = message; toast.classList.add('show'); setTimeout(() => { toast.classList.remove('show'); }, 2000); } // 侧边栏菜单点击事件 document.querySelectorAll('.menu-item').forEach(item => { item.addEventListener('click', function() { const pageId = this.getAttribute('data-page'); if (pageId) { navigateTo(pageId); } }); }); // 分页按钮点击 document.querySelectorAll('.pagination-btn').forEach(btn => { btn.addEventListener('click', function() { if (!this.classList.contains('active') && !this.querySelector('svg')) { document.querySelectorAll('.pagination-btn').forEach(b => b.classList.remove('active')); this.classList.add('active'); } }); }); // 点击弹窗外部关闭 document.querySelectorAll('.modal-overlay').forEach(overlay => { overlay.addEventListener('click', function(e) { if (e.target === this) { this.classList.remove('active'); } }); }); </script> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; } .inland-security-footer { position: fixed; z-index: 10; bottom: 0; right: 0; width: fit-content; display: flex; justify-content: flex-end; } .tooltip-container { position: relative; } .trigger-content { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; padding: 8px; background-color: transparent; border-radius: 8px; cursor: pointer; } .minimax-link { display: flex; align-items: center; cursor: pointer; font-weight: 300; color: #adadad; text-decoration: none; } .minimax-link:visited { color: #adadad; } .minimax-link:hover { color: #666666; } .tooltip-content { position: absolute; bottom: 100%; right: 0; display: none; flex-direction: column; align-items: center; gap: 8px; padding: 8px; padding-bottom: 16px; /* 8px 内容间距 + 8px 用于鼠标移动的透明区域 */ font-size: 12px; line-height: 17px; background-color: #fafafa; border-radius: 12px; white-space: nowrap; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); color: #171717; } /* 创建透明的连接区域，让鼠标可以平滑移动到 tooltip */ .tooltip-content::after { content: ''; position: absolute; bottom: -8px; left: 0; right: 0; height: 16px; } .tooltip-container:hover .tooltip-content { display: flex; } .info-section { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; } .beian-link { display: flex; align-items: center; text-decoration: none; color: #171717; } .beian-icon { width: 14px; height: 14px; margin-right: 2px; } .underline-text { color: #171717; text-decoration: underline; } .underline-text:hover { color: #000000; } /* 深色模式支持 */ @media (prefers-color-scheme: dark) { .trigger-content { background-color: transparent; } .minimax-link, .minimax-link:visited { color: #666666; } .minimax-link:hover { color: #adadad; } .tooltip-content { background-color: #262626; color: #ededed; } .beian-link, .underline-text { color: #ededed; } .underline-text:hover { color: #ffffff; } } </style> <div class="inland-security-footer"> <div class="tooltip-container"> <div class="trigger-content"> <a href="https://www.minimaxi.com/" target="_blank" rel="noreferrer" class="minimax-link"> <span>© 2026 MiniMax</span> </a> </div> <div class="tooltip-content"> <section class="info-section"> <span>上海稀宇科技有限公司</span> </section> <section class="info-section"> <a class="beian-link" href="https://www.beian.gov.cn/portal/registerSystemInfo?recordcode=31010402010179" target="_blank" rel="noreferrer"> <img alt="hailuo-beian-icon" src="https://cdn.hailuoai.com/hailuo-video-web/public_assets/223037d3-79fd-4db0-a456-749f38a6a14b.png" class="beian-icon"> <span class="underline-text">沪公网安备31010402010179号</span> </a> <a href="https://beian.miit.gov.cn/" target="_blank" rel="noreferrer" class="underline-text"> 沪ICP备2023003282号-38 </a> </section> <section class="info-section"> <span>模型名称：MiniMax</span> <span>备案号：Shanghai-MiniMax-202505230046</span> </section> <section class="info-section"> <a href="https://agent.minimaxi.com/doc/zh/terms-of-service.html" target="_blank" rel="noreferrer" class="underline-text"> 用户协议 </a> <a href="https://agent.minimaxi.com/doc/zh/privacy-policy.html" target="_blank" rel="noreferrer" class="underline-text"> 隐私政策 </a> </section> </div> </div> </div> <script> /** * Iframe 元素高亮注入脚本 * 需要在目标网站中引入此脚本来支持跨域 iframe 高亮功能 * * 使用方法： * 1. 将此脚本添加到目标网站的 HTML 中 * 2. 或通过浏览器扩展、用户脚本等方式注入 */ (function () { "use strict"; // 检查是否在 iframe 中 if (window.self === window.top) { return; // 不在 iframe 中，不执行 } // 检查是否已经初始化过 if (window.__iframeHighlightInitialized) { return; } window.__iframeHighlightInitialized = true; console.log("Iframe 高亮脚本已加载"); // 创建高亮覆盖层 var overlay = document.createElement("div"); overlay.id = "iframe-highlight-overlay"; overlay.style.cssText = "\n position: fixed;\n top: 0;\n left: 0;\n width: 100vw;\n height: 100vh;\n pointer-events: none;\n z-index: 999999;\n overflow: hidden;\n "; // 创建悬停高亮框（虚线边框） var highlightBox = document.createElement("div"); highlightBox.id = "iframe-highlight-box"; highlightBox.style.cssText = "\n position: absolute;\n border: 2px dashed #007AFF;\n background: rgba(0, 122, 255, 0.08);\n pointer-events: none;\n display: none;\n transition: all 0.1s ease;\n box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.8);\n border-radius: 2px;\n "; // 创建选中节点的常驻高亮框（实线边框） var selectedBox = document.createElement("div"); selectedBox.id = "iframe-selected-box"; selectedBox.style.cssText = "\n position: absolute;\n border: 2px solid #007AFF;\n pointer-events: none;\n display: none;\n box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.9), 0 0 8px rgba(255, 107, 53, 0.4);\n border-radius: 2px;\n z-index: 1000000;\n "; // 创建悬停标签显示 var tagLabel = document.createElement("div"); tagLabel.id = "iframe-tag-label"; tagLabel.style.cssText = "\n position: absolute;\n background: #007AFF;\n color: white;\n padding: 2px 6px;\n font-size: 11px;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n border-radius: 2px;\n pointer-events: none;\n display: none;\n white-space: nowrap;\n z-index: 1000001;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);\n font-weight: 500;\n "; // 创建选中节点标签 var selectedLabel = document.createElement("div"); selectedLabel.id = "iframe-selected-label"; selectedLabel.style.cssText = "\n position: absolute;\n background: #007AFF;\n color: white;\n padding: 3px 8px;\n font-size: 11px;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n border-radius: 3px;\n pointer-events: none;\n display: none;\n white-space: nowrap;\n z-index: 1000002;\n box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);\n font-weight: 600;\n "; overlay.appendChild(highlightBox); overlay.appendChild(selectedBox); overlay.appendChild(tagLabel); overlay.appendChild(selectedLabel); document.body.appendChild(overlay); // 存储当前选中的元素 var selectedElement = null; var highlightEnabled = false; // 更新选中元素的高亮显示 function updateSelectedHighlight(element) { console.log("updateSelectedHighlight called with:", element); if (!element) { selectedBox.style.display = "none"; selectedLabel.style.display = "none"; selectedElement = null; console.log("Cleared selected highlight"); return; } selectedElement = element; var rect = element.getBoundingClientRect(); console.log("Selected element rect:", rect); // 更新选中高亮框位置 selectedBox.style.display = "block"; selectedBox.style.left = "".concat(rect.left - 2, "px"); selectedBox.style.top = "".concat(rect.top - 2, "px"); selectedBox.style.width = "".concat(rect.width + 4, "px"); selectedBox.style.height = "".concat(rect.height + 4, "px"); // 更新选中标签位置和内容 selectedLabel.style.display = "block"; selectedLabel.textContent = "\u2713 <".concat(element.tagName.toLowerCase(), ">"); // 计算标签位置，确保不超出视窗 var labelTop = rect.top - 28; var labelLeft = rect.left; // 如果标签会超出顶部，显示在元素下方 if (labelTop < 5) { labelTop = rect.bottom + 5; } // 如果标签会超出右侧，向左调整 var labelWidth = selectedLabel.offsetWidth || 100; // 预估宽度 if (labelLeft + labelWidth > window.innerWidth - 10) { labelLeft = window.innerWidth - labelWidth - 10; } selectedLabel.style.left = "".concat(Math.max(5, labelLeft), "px"); selectedLabel.style.top = "".concat(labelTop, "px"); console.log("Selected highlight positioned at:", { left: selectedBox.style.left, top: selectedBox.style.top, width: selectedBox.style.width, height: selectedBox.style.height }); } function getElementSelector(element) { if (!(element instanceof Element)) throw new Error('Argument must be a DOM element'); var segments = []; var current = element; while (current !== document.documentElement) { var selector = ''; // 优先检查唯一ID if (current.id && document.querySelectorAll("#".concat(current.id)).length === 1) { segments.unshift("#".concat(current.id)); break; // ID唯一，无需继续向上 } // 生成类名选择器（取第一个有效类名） var classes = Array.from(current.classList).filter(function (c) { return !c.startsWith('js-'); }); var className = classes.length > 0 ? ".".concat(classes[0]) : ''; // 生成位置索引（nth-child） var tag = current.tagName.toLowerCase(); if (!className) { var siblings = Array.from(current.parentNode.children); var index = siblings.findIndex(function (el) { return el === current; }) + 1; selector = "".concat(tag, ":nth-child(").concat(index, ")"); } else { selector = className; } segments.unshift(selector); current = current.parentElement; } // 处理根元素 if (current === document.documentElement) { segments.unshift('html'); } return segments.join(' > '); } // 获取元素文本内容 function getElementText(element) { var _element$textContent; if (element.tagName === "INPUT") { return element.value || element.placeholder || ""; } if (element.tagName === "TEXTAREA") { return element.value || element.placeholder || ""; } var text = ((_element$textContent = element.textContent) === null || _element$textContent === void 0 ? void 0 : _element$textContent.trim()) || ""; return text.length > 50 ? text.substring(0, 50) + "..." : text; } // 获取元素属性信息 function getElementAttributes(element) { var attrs = {}; for (var i = 0; i < element.attributes.length; i++) { var attr = element.attributes[i]; attrs[attr.name] = attr.value; } return attrs; } // 鼠标悬停事件处理 function handleMouseOver(e) { if (!highlightEnabled) return; var target = e.target; if (!target || target === overlay || target === highlightBox || target === tagLabel || target === selectedBox || target === selectedLabel) { return; } // 避免高亮 html 和 body 元素 if (target === document.documentElement || target === document.body) { return; } // 如果是已选中的元素，不显示悬停高亮 if (target === selectedElement) { highlightBox.style.display = "none"; tagLabel.style.display = "none"; return; } var rect = target.getBoundingClientRect(); var selector = getElementSelector(target); var text = getElementText(target); var attributes = getElementAttributes(target); // 更新悬停高亮框位置 highlightBox.style.display = "block"; highlightBox.style.left = "".concat(rect.left - 2, "px"); highlightBox.style.top = "".concat(rect.top - 2, "px"); highlightBox.style.width = "".concat(rect.width + 4, "px"); highlightBox.style.height = "".concat(rect.height + 4, "px"); // 更新标签位置和内容 tagLabel.style.display = "block"; tagLabel.textContent = "<".concat(target.tagName.toLowerCase(), ">"); // 计算标签位置，确保不超出视窗 var labelTop = rect.top - 22; var labelLeft = rect.left; // 如果标签会超出顶部，显示在元素下方 if (labelTop < 0) { labelTop = rect.bottom + 5; } // 如果标签会超出右侧，向左调整 if (labelLeft + tagLabel.offsetWidth > window.innerWidth) { labelLeft = window.innerWidth - tagLabel.offsetWidth - 5; } tagLabel.style.left = "".concat(Math.max(0, labelLeft), "px"); tagLabel.style.top = "".concat(labelTop, "px"); // 发送消息到父窗口 var elementInfo = { tagName: target.tagName.toLowerCase(), rect: { left: rect.left, top: rect.top, right: rect.right, bottom: rect.bottom, width: rect.width, height: rect.height, x: rect.x, y: rect.y }, selector: selector, text: text, attributes: attributes, url: window.location.href, path: window.location.pathname, timestamp: Date.now() }; try { window.parent.postMessage({ type: "iframe-element-hover", data: elementInfo, source: "iframe-highlight-injector" }, "*"); } catch (error) { console.warn("无法发送消息到父窗口:", error); } } // 鼠标离开事件处理 function handleMouseOut(e) { if (!highlightEnabled) return; var relatedTarget = e.relatedTarget; // 如果鼠标移动到高亮相关元素上，不隐藏高亮 if (relatedTarget && (relatedTarget === highlightBox || relatedTarget === tagLabel || relatedTarget === overlay || relatedTarget === selectedBox || relatedTarget === selectedLabel)) { return; } highlightBox.style.display = "none"; tagLabel.style.display = "none"; try { window.parent.postMessage({ type: "iframe-element-hover", data: null, source: "iframe-highlight-injector" }, "*"); } catch (error) { console.warn("无法发送消息到父窗口:", error); } } // 点击事件处理 function handleClick(e) { var target = e.target; if (!target || target === overlay || target === highlightBox || target === tagLabel || target === selectedBox || target === selectedLabel) { return; } // 避免处理 html 和 body 元素 if (target === document.documentElement || target === document.body) { return; } // 检查是否是交互元素，这些元素需要保留默认行为 var isInteractiveElement = ['input', 'textarea', 'select', 'button', 'a'].includes(target.tagName.toLowerCase()); // 如果高亮功能启用，对于非交互元素阻止默认行为和事件传播 if (highlightEnabled) { e.preventDefault(); e.stopPropagation(); } var rect = target.getBoundingClientRect(); var selector = getElementSelector(target); var text = getElementText(target); var attributes = getElementAttributes(target); console.log("Element clicked:", { tagName: target.tagName, selector: selector, rect: rect }); // 立即更新选中高亮 updateSelectedHighlight(target); // 隐藏悬停高亮，因为现在是选中状态 highlightBox.style.display = "none"; tagLabel.style.display = "none"; var elementInfo = { tagName: target.tagName.toLowerCase(), rect: { left: rect.left, top: rect.top, right: rect.right, bottom: rect.bottom, width: rect.width, height: rect.height, x: rect.x, y: rect.y }, selector: selector, text: text, attributes: attributes, url: window.location.href, path: window.location.pathname, timestamp: Date.now() }; try { window.parent.postMessage({ type: "iframe-element-click", data: elementInfo, source: "iframe-highlight-injector" }, "*"); } catch (error) { console.warn("无法发送消息到父窗口:", error); } } // 监听来自父窗口的消息 function handleParentMessage(event) { console.log("Received message from parent:", event.data); if (event.data.type === "iframe-highlight-toggle") { var enabled = event.data.enabled; console.log("Highlight toggle:", enabled); if (enabled) { enableHighlight(); } else { disableHighlight(); } } else if (event.data.type === "enable-iframe-highlight") { console.log("Enable iframe highlight"); enableHighlight(); } else if (event.data.type === "disable-iframe-highlight") { console.log("Disable iframe highlight"); disableHighlight(); } else if (event.data.type === "toggle-iframe-highlight") { var _enabled = event.data.enabled !== undefined ? event.data.enabled : !highlightEnabled; console.log("Toggle iframe highlight to:", _enabled); if (_enabled) { enableHighlight(); } else { disableHighlight(); } } else if (event.data.type === "update-selected-element") { var selector = event.data.selector; console.log("Update selected element with selector:", selector); if (selector) { try { var element = document.querySelector(selector); console.log("Found element by selector:", element); updateSelectedHighlight(element); } catch (error) { console.warn("Failed to select element:", error); updateSelectedHighlight(null); } } else { updateSelectedHighlight(null); } } else if (event.data.type === "clear-selected-element") { console.log("Clear selected element"); updateSelectedHighlight(null); } } // 启用高亮功能 function enableHighlight() { console.log("Enabling highlight"); document.addEventListener("mouseover", handleMouseOver, true); document.addEventListener("mouseout", handleMouseOut, true); document.addEventListener("click", handleClick, true); highlightEnabled = true; overlay.style.display = "block"; } // 禁用高亮功能 function disableHighlight() { console.log("Disabling highlight"); highlightEnabled = false; // 保持事件监听器，但通过 highlightEnabled 变量控制行为 // 这样可以保留选中状态的显示 highlightBox.style.display = "none"; tagLabel.style.display = "none"; // 不隐藏 selectedBox 和 selectedLabel，保留选中状态 } // 完全禁用高亮功能（移除所有监听器） function fullyDisableHighlight() { console.log("Fully disabling highlight"); highlightEnabled = false; document.removeEventListener("mouseover", handleMouseOver, true); document.removeEventListener("mouseout", handleMouseOut, true); document.removeEventListener("click", handleClick, true); overlay.style.display = "none"; highlightBox.style.display = "none"; tagLabel.style.display = "none"; selectedBox.style.display = "none"; selectedLabel.style.display = "none"; } // 添加事件监听 enableHighlight(); window.addEventListener("message", handleParentMessage); // 暴露全局函数供外部调用 window.__iframeHighlightControl = { enable: enableHighlight, disable: disableHighlight, fullyDisable: fullyDisableHighlight, isEnabled: function isEnabled() { return highlightEnabled; }, getSelectedElement: function getSelectedElement() { return selectedElement; }, updateSelected: updateSelectedHighlight, // 通过消息发送开关控制 sendToggleMessage: function sendToggleMessage(enabled) { window.parent.postMessage({ type: 'iframe-highlight-status', enabled: enabled || highlightEnabled, source: 'iframe-highlight-injector' }, '*'); } }; // 通知父窗口脚本已加载 try { window.parent.postMessage({ type: "iframe-highlight-ready", data: { url: window.location.href, userAgent: navigator.userAgent, timestamp: Date.now() }, source: "iframe-highlight-injector" }, "*"); } catch (error) { console.warn("无法发送就绪消息到父窗口:", error); } // 清理函数 window.__iframeHighlightCleanup = function () { fullyDisableHighlight(); window.removeEventListener("message", handleParentMessage); if (overlay.parentElement) { overlay.parentElement.removeChild(overlay); } delete window.__iframeHighlightInitialized; delete window.__iframeHighlightCleanup; }; })(); </script> <style> #minimax-floating-ball { position: fixed; bottom: 20px; right: 20px; padding: 10px 12px; background: #222222; border-radius: 12px; display: flex; align-items: center; color: #F8F8F8; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; z-index: 9999; transition: all 0.3s ease; overflow: hidden; cursor: pointer; } #minimax-floating-ball:hover { transform: translateY(-2px); background: #383838; } .minimax-ball-content { display: flex; align-items: center; gap: 8px; } .minimax-logo-wave { width: 20px; height: 20px; background-image: url("data:image/svg+xml,%3Csvg%20preserveAspectRatio%3D%27none%27%20width%3D%27100%25%27%20height%3D%27100%25%27%20overflow%3D%27visible%27%20style%3D%27display%3A%20block%3B%27%20viewBox%3D%270%200%20170.136%20138.225%27%20fill%3D%27none%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cg%20id%3D%27Frame%202116748449%27%3E%3Cpath%20id%3D%27Subtract%27%20d%3D%27M170%20101.783C170%20105.144%20168.49%20108.327%20165.886%20110.453L134.963%20135.702C132.964%20137.334%20130.463%20138.225%20127.883%20138.225H10.4938C4.69824%20138.225%200%20133.527%200%20127.732V39.2289C0%2035.8597%201.51758%2032.6698%204.13162%2030.5442L38.5402%202.56547C40.536%200.942662%2043.0298%200.0567377%2045.602%200.0567377H159.506C165.302%200.0567377%20170%204.75498%20170%2010.5506V101.783Z%27%20fill%3D%27black%27%20style%3D%27fill%3Ablack%3Bfill-opacity%3A1%3B%27/%3E%3Cpath%20id%3D%27Subtract_2%27%20d%3D%27M149.011%2094.4632C149.011%2096.1471%20148.253%2097.7415%20146.946%2098.8043L125.893%20115.936C124.895%20116.748%20123.648%20117.191%20122.361%20117.191H24.6479C22.716%20117.191%2021.15%20115.625%2021.15%20113.693V46.1166C21.15%2044.4267%2021.9135%2042.8274%2023.2274%2041.7648L47.367%2022.2437C48.3638%2021.4376%2049.607%2020.9982%2050.8888%2020.9988L145.514%2021.0427C147.446%2021.0436%20149.011%2022.6094%20149.011%2024.5406V94.4632Z%27%20fill%3D%27white%27%20style%3D%27fill%3Awhite%3Bfill-opacity%3A1%3B%27/%3E%3Cpath%20id%3D%27Rectangle%20111142564%27%20d%3D%27M42.111%2080.8025C42.111%2077.7115%2044.6167%2075.2057%2047.7077%2075.2057H60.9999C64.0908%2075.2057%2066.5966%2077.7115%2066.5966%2080.8025V121.029H42.111V80.8025Z%27%20fill%3D%27black%27%20style%3D%27fill%3Ablack%3Bfill-opacity%3A1%3B%27/%3E%3Cpath%20id%3D%27Rectangle%20111142567%27%20d%3D%27M79.1894%2080.8025C79.1894%2077.7115%2081.6952%2075.2057%2084.7861%2075.2057H98.0783C101.169%2075.2057%20103.675%2077.7115%20103.675%2080.8025V121.029H79.1894V80.8025Z%27%20fill%3D%27black%27%20style%3D%27fill%3Ablack%3Bfill-opacity%3A1%3B%27/%3E%3C/g%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 14px 11px; background-color: #8FD1FF; border-radius: 4px; } .minimax-ball-text { font-size: 12px; font-weight: 500; white-space: nowrap; } .minimax-close-icon { margin-left: 8px; font-size: 16px; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; border-radius: 50%; cursor: pointer; opacity: 0.7; transition: opacity 0.2s ease; } .minimax-close-icon:hover { opacity: 1; } </style> <div id="minimax-floating-ball"> <div class="minimax-ball-content"> <div class="minimax-logo-wave"></div> <span class="minimax-ball-text">Created by MiniMax Agent</span> </div> <div class="minimax-close-icon">×</div> </div> <script> // Initialize floating ball functionality function initFloatingBall() { const ball = document.getElementById('minimax-floating-ball'); if (!ball) return; // Initial animation ball.style.opacity = '0'; ball.style.transform = 'translateY(20px)'; setTimeout(() => { ball.style.opacity = '1'; ball.style.transform = 'translateY(0)'; }, 500); // Handle logo click const ballContent = ball.querySelector('.minimax-ball-content'); ballContent.addEventListener('click', function (e) { e.stopPropagation(); window.open('https://agent.minimaxi.com/', '_blank'); ball.style.transform = 'scale(0.95)'; setTimeout(() => { ball.style.transform = 'scale(1)'; }, 100); }); // Handle close button click const closeIcon = ball.querySelector('.minimax-close-icon'); closeIcon.addEventListener('click', function (e) { e.stopPropagation(); ball.style.opacity = '0'; ball.style.transform = 'translateY(20px)'; setTimeout(() => { ball.style.display = 'none'; }, 300); }); } // Initialize when DOM is ready document.addEventListener('DOMContentLoaded', initFloatingBall); </script> </body> </html>
保存更改
取消
访问码:
acj3waw6
复制链接
重新生成