编辑页面

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,html{height:100%;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei","Hiragino Sans GB",sans-serif;background:#f1f3f6;color:#1f2937;font-size:14px;line-height:1.5}
.layout{display:flex;height:100vh;width:100vw;overflow:hidden}
.sidebar{width:232px;background:#1e293b;display:flex;flex-direction:column;flex-shrink:0}
.logo{height:64px;display:flex;align-items:center;padding:0 24px;border-bottom:1px solid #334155;background:#0f172a}
.logo h1{color:#f8fafc;font-size:15px;font-weight:600;letter-spacing:1px}
.nav{flex:1;padding:16px 0;overflow-y:auto}
.nav-group{margin-bottom:8px}
.nav-group-title{padding:8px 24px;color:#64748b;font-size:11px;font-weight:500;letter-spacing:1.2px;text-transform:uppercase}
.nav-item{display:flex;align-items:center;padding:11px 24px;color:#cbd5e1;cursor:pointer;font-size:14px;font-weight:400;transition:all 0.15s;border-left:3px solid transparent;user-select:none}
.nav-item:hover{background:#334155;color:#f8fafc}
.nav-item.active{background:#334155;color:#ffffff;border-left-color:#3b82f6;font-weight:500}



.main{flex:1;display:flex;flex-direction:column;min-width:0;background:#f1f3f6}
.topbar{height:64px;background:#ffffff;border-bottom:1px solid #e5e7eb;display:flex;align-items:center;justify-content:space-between;padding:0 32px;box-shadow:0 1px 0 rgba(0,0,0,0.02)}
.topbar-title{font-size:16px;font-weight:600;color:#111827;letter-spacing:0.2px}
.topbar-info{display:flex;align-items:center;gap:24px}
.topbar-info span{color:#6b7280;font-size:13px}
.content{flex:1;overflow-y:auto;padding:24px 32px;display:none}
.content.current{display:block}
.badge{display:inline-block;padding:2px 10px;border-radius:3px;font-size:12px;font-weight:500;line-height:1.6}
.badge-primary{background:#dbeafe;color:#1d4ed8}
.badge-success{background:#d1fae5;color:#047857}
.badge-warning{background:#fef3c7;color:#b45309}
.badge-danger{background:#fee2e2;color:#b91c1c}
.badge-info{background:#e5e7eb;color:#4b5563}
.badge-default{background:#f3f4f6;color:#6b7280}
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px}
.kpi-card{background:#fff;border:1px solid #e5e7eb;border-radius:6px;padding:20px 24px;transition:border-color 0.2s}
.kpi-card:hover{border-color:#d1d5db}
.kpi-card h3{color:#6b7280;font-size:13px;font-weight:500;margin-bottom:10px;letter-spacing:0.2px}
.kpi-card .value{font-size:26px;font-weight:600;color:#111827;line-height:1.2;letter-spacing:-0.3px}
.kpi-card .sub{color:#059669;font-size:12px;margin-top:8px;font-weight:500}
.kpi-card .sub.down{color:#dc2626}
.quick-links{background:#fff;border:1px solid #e5e7eb;border-radius:6px;padding:20px 24px;margin-bottom:20px}
.quick-links h3,.todo-list h3,.section-header h2{font-size:15px;font-weight:600;color:#111827;margin-bottom:16px;letter-spacing:0.2px}
.link-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.link-item{display:flex;align-items:center;padding:14px 16px;background:#f9fafb;border:1px solid #e5e7eb;border-radius:6px;cursor:pointer;transition:all 0.15s;user-select:none}
.link-item:hover{background:#eff6ff;border-color:#3b82f6}
.link-item:hover .link-num{background:#3b82f6;color:#fff}
.link-item .link-num{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;background:#fff;border:1px solid #d1d5db;color:#6b7280;font-size:16px;font-weight:600;border-radius:4px;margin-right:12px;transition:all 0.15s}
.link-item span{font-size:13px;color:#374151;font-weight:500}
.todo-list{background:#fff;border:1px solid #e5e7eb;border-radius:6px;padding:20px 24px;margin-bottom:20px}
.todo-item{display:flex;align-items:center;padding:14px 0;border-bottom:1px solid #f3f4f6;cursor:pointer}
.todo-item:last-child{border-bottom:none}
.todo-item:hover .todo-text{color:#111827}
.todo-checkbox{width:18px;height:18px;border:1.5px solid #d1d5db;border-radius:3px;margin-right:12px;flex-shrink:0;background:#fff;position:relative;transition:all 0.15s}
.todo-item.done .todo-checkbox{background:#3b82f6;border-color:#3b82f6}
.todo-item.done .todo-checkbox:after{content:'';position:absolute;left:5px;top:1px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.todo-item.done .todo-text{text-decoration:line-through;color:#9ca3af}
.todo-text{flex:1;color:#374151;font-size:14px;transition:color 0.15s}
.todo-meta{color:#9ca3af;font-size:12px;margin-left:12px}
.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.section-header h2{font-size:15px;font-weight:600;color:#111827;margin-bottom:0}
.table-wrap{background:#fff;border:1px solid #e5e7eb;border-radius:6px;overflow:hidden;margin-bottom:20px}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:14px 16px;text-align:left;border-bottom:1px solid #f3f4f6;font-size:13px}
.table th{background:#f9fafb;color:#6b7280;font-weight:600;font-size:12px;letter-spacing:0.3px;text-transform:uppercase}
.table tbody tr:last-child td{border-bottom:none}
.table tbody tr:hover{background:#f9fafb}
.table-actions{display:flex;gap:6px}
.btn{display:inline-flex;align-items:center;padding:7px 16px;border-radius:4px;border:1px solid transparent;cursor:pointer;font-size:13px;font-weight:500;transition:all 0.15s;user-select:none;font-family:inherit}
.btn-primary{background:#3b82f6;color:#fff;border-color:#3b82f6}
.btn-primary:hover{background:#2563eb;border-color:#2563eb}
.btn-success{background:#10b981;color:#fff;border-color:#10b981}
.btn-success:hover{background:#059669;border-color:#059669}
.btn-warning{background:#f59e0b;color:#fff;border-color:#f59e0b}
.btn-warning:hover{background:#d97706;border-color:#d97706}
.btn-danger{background:#ef4444;color:#fff;border-color:#ef4444}
.btn-danger:hover{background:#dc2626;border-color:#dc2626}
.btn-secondary{background:#fff;color:#374151;border-color:#d1d5db}
.btn-secondary:hover{background:#f9fafb;border-color:#9ca3af}
.btn-text{background:transparent;color:#3b82f6;padding:4px 8px;border-color:transparent}
.btn-text:hover{background:#eff6ff}
.btn-sm{padding:4px 10px;font-size:12px}
.toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;gap:12px}
.toolbar-left{display:flex;gap:8px;align-items:center}
.toolbar-right{display:flex;gap:8px;align-items:center}
.search-box{display:flex;align-items:center;background:#fff;border:1px solid #d1d5db;border-radius:4px;padding:0 12px;transition:border-color 0.15s}
.search-box:focus-within{border-color:#3b82f6}
.search-box input{border:none;outline:none;padding:8px 0 8px 8px;font-size:13px;width:220px;background:transparent;color:#111827;font-family:inherit}
.tabs{display:flex;border-bottom:1px solid #e5e7eb;margin-bottom:20px;background:#fff;padding:0 16px;border-radius:6px 6px 0 0}
.tab{padding:14px 20px;color:#6b7280;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;font-size:13px;font-weight:500;transition:all 0.15s;user-select:none}
.tab:hover{color:#374151}
.tab.active{color:#3b82f6;border-bottom-color:#3b82f6}
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:20px}
.card{background:#fff;border:1px solid #e5e7eb;border-radius:6px;padding:20px;transition:all 0.15s}
.card:hover{border-color:#d1d5db;box-shadow:0 1px 3px rgba(0,0,0,0.05)}
.card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px;gap:12px}
.card-title{font-size:15px;font-weight:600;color:#111827;line-height:1.4}
.card-meta{display:flex;gap:14px;color:#6b7280;font-size:12px;margin-bottom:12px;flex-wrap:wrap}
.card-meta span{display:inline-flex;align-items:center}
.card-tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.card-body{color:#4b5563;font-size:13px;line-height:1.6;margin-bottom:12px}
.card-footer{display:flex;justify-content:space-between;align-items:center;padding-top:12px;border-top:1px solid #f3f4f6;font-size:12px;color:#6b7280}
.progress{height:4px;background:#f3f4f6;border-radius:2px;overflow:hidden}
.progress-fill{height:100%;background:#3b82f6;border-radius:2px;transition:width 0.3s}
.progress-label{display:flex;justify-content:space-between;font-size:12px;color:#6b7280;margin-top:6px;margin-bottom:12px}
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(15,23,42,0.6);display:none;z-index:1000;justify-content:center;align-items:center;backdrop-filter:blur(2px)}
.modal-overlay.show{display:flex}
.modal{background:#fff;border-radius:6px;width:90%;max-width:600px;max-height:85vh;display:flex;flex-direction:column;box-shadow:0 20px 25px -5px rgba(0,0,0,0.1),0 10px 10px -5px rgba(0,0,0,0.04)}
.modal-header{padding:18px 24px;border-bottom:1px solid #e5e7eb;display:flex;justify-content:space-between;align-items:center}
.modal-header h3{font-size:16px;font-weight:600;color:#111827}
.modal-close{background:none;border:none;font-size:20px;color:#9ca3af;cursor:pointer;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:4px;line-height:1}
.modal-close:hover{background:#f3f4f6;color:#374151}
.modal-body{flex:1;overflow-y:auto;padding:20px 24px}
.modal-footer{padding:14px 24px;border-top:1px solid #e5e7eb;display:flex;justify-content:flex-end;gap:10px;background:#f9fafb;border-radius:0 0 6px 6px}
.form-group{margin-bottom:16px}
.form-label{display:block;margin-bottom:6px;color:#374151;font-size:13px;font-weight:500}
.form-input,.form-select,.form-textarea{width:100%;padding:8px 12px;border:1px solid #d1d5db;border-radius:4px;font-size:13px;outline:none;background:#fff;color:#111827;font-family:inherit;transition:border-color 0.15s}
.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,0.1)}
.form-textarea{resize:vertical;min-height:80px}
.form-row{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.form-help{color:#6b7280;font-size:12px;margin-top:4px}
.drawer{position:fixed;top:0;right:0;bottom:0;width:500px;background:#fff;box-shadow:-4px 0 24px rgba(0,0,0,0.12);transform:translateX(100%);transition:transform 0.3s;z-index:1001;display:flex;flex-direction:column}
.drawer.show{transform:translateX(0)}
.drawer-header{padding:18px 24px;border-bottom:1px solid #e5e7eb;display:flex;justify-content:space-between;align-items:center}
.drawer-header h3{font-size:16px;font-weight:600;color:#111827}
.drawer-body{flex:1;overflow-y:auto;padding:20px 24px}
.toast{position:fixed;bottom:24px;right:24px;padding:12px 20px;background:#1f2937;color:#fff;border-radius:4px;font-size:13px;transform:translateY(100px);opacity:0;transition:all 0.3s;z-index:2000;box-shadow:0 10px 15px -3px rgba(0,0,0,0.1)}
.toast.show{transform:translateY(0);opacity:1}
.confirm-box{background:#fff;border-radius:6px;padding:28px 32px;text-align:center;max-width:400px;width:90%}
.confirm-box h3{font-size:16px;font-weight:600;margin-bottom:10px;color:#111827}
.confirm-box p{color:#6b7280;margin-bottom:24px;font-size:14px;line-height:1.6}
.confirm-actions{display:flex;gap:10px;justify-content:center}
.stat-card{background:#fff;border:1px solid #e5e7eb;border-radius:6px;padding:20px 24px;position:relative;overflow:hidden}
.stat-card.primary{border-left:3px solid #3b82f6}
.stat-card.success{border-left:3px solid #10b981}
.stat-card.warning{border-left:3px solid #f59e0b}
.stat-card.danger{border-left:3px solid #ef4444}
.stat-card h3{color:#6b7280;font-size:13px;font-weight:500;margin-bottom:8px}
.stat-card .value{font-size:28px;font-weight:600;color:#111827;line-height:1.2;letter-spacing:-0.3px}
.stat-card .sub{color:#6b7280;font-size:12px;margin-top:8px}
.stat-card.primary .sub{color:#3b82f6}
.stat-card.success .sub{color:#10b981}
.stat-card.warning .sub{color:#f59e0b}
.stat-card.danger .sub{color:#ef4444}
.empty-state{padding:48px 20px;text-align:center;color:#9ca3af;font-size:13px}
.page-actions{display:flex;gap:8px;align-items:center}
.text-muted{color:#6b7280}
.text-primary{color:#3b82f6}
.text-success{color:#10b981}
.text-warning{color:#f59e0b}
.text-danger{color:#ef4444}
.mb-0{margin-bottom:0}
.mb-1{margin-bottom:8px}
.mb-2{margin-bottom:16px}
.mb-3{margin-bottom:24px}
.mt-1{margin-top:8px}
.mt-2{margin-top:16px}
.mt-3{margin-top:24px}
.flex{display:flex}
.flex-between{display:flex;justify-content:space-between;align-items:center}
.gap-1{gap:8px}
.gap-2{gap:16px}</style>
</head>
<body>
<div class="layout">
<aside class="sidebar">
<div class="logo"><h1>化工研发管理系统</h1></div>
<nav class="nav">
<div class="nav-group">
<div class="nav-group-title">主菜单</div>
<div class="nav-item active" data-section="workbench">工作台</div>
<div class="nav-item" data-section="project">项目管理</div>
<div class="nav-item" data-section="experiment">实验管理</div>
<div class="nav-item" data-section="formula">配方管理</div>
<div class="nav-item" data-section="material">物料管理</div>
<div class="nav-item" data-section="sample">样品管理</div>
<div class="nav-item" data-section="approval">审批中心</div>
<div class="nav-item" data-section="report">报表统计</div>
<div class="nav-item" data-section="system">系统管理</div>
</div>
</nav>
</aside>
<main class="main">
<header class="topbar">
<div class="topbar-title" id="currentModule">工作台</div>
<div class="topbar-info">
<span>2026-06-25 17:45</span>
<span>管理员</span>
</div>
</header>
<div id="workbench" class="content section-panel current">
<div class="kpi-grid">
<div class="kpi-card">
<h3>进行中项目</h3>
<div class="value">12</div>
<div class="sub">↑ 2 本月新增</div>
</div>
<div class="kpi-card">
<h3>待审批任务</h3>
<div class="value">8</div>
<div class="sub">↑ 3 今日新增</div>
</div>
<div class="kpi-card">
<h3>完成配方</h3>
<div class="value">156</div>
<div class="sub">↑ 5 本周新增</div>
</div>
<div class="kpi-card">
<h3>样品数量</h3>
<div class="value">892</div>
<div class="sub">库存预警 3</div>
</div>
</div>
<div class="quick-links">
<h3>快捷入口</h3>
<div class="link-grid">
<div class="link-item" data-section="project" data-link="1"><span class="link-num">+</span><span>新建项目</span></div>
<div class="link-item" data-section="experiment" data-link="1"><span class="link-num">+</span><span>记录实验</span></div>
<div class="link-item" data-section="formula" data-link="1"><span class="link-num">+</span><span>新建配方</span></div>
<div class="link-item" data-section="material" data-link="1"><span class="link-num">+</span><span>采购申请</span></div>
<div class="link-item" data-section="approval" data-link="1"><span class="link-num">+</span><span>我的审批</span></div>
<div class="link-item" data-section="report" data-link="1"><span class="link-num">+</span><span>数据报表</span></div>
</div>
</div>
<div class="todo-list">
<h3>待办事项</h3>
<div class="todo-item done"><div class="todo-checkbox"></div><span class="todo-text">审核配方变更申请 #F-2024-089</span></div>
<div class="todo-item"><div class="todo-checkbox"></div><span class="todo-text">完成三元材料正极配方实验报告</span></div>
<div class="todo-item"><div class="todo-checkbox"></div><span class="todo-text">确认下周实验计划安排</span></div>
<div class="todo-item"><div class="todo-checkbox"></div><span class="todo-text">物料库存盘点及补货申请</span></div>
<div class="todo-item"><div class="todo-checkbox"></div><span class="todo-text">参加新型导电剂技术培训</span></div>
</div>
</div>
<div id="project" class="content section-panel">
<div class="toolbar">
<div style="display:flex;gap:12px">
<button class="btn btn-primary" onclick="openModal('projectModal')">+ 新建项目</button>
<span class="badge badge-warning">待审批 8</span>
</div>
<div class="search-box">
<input type="text" placeholder="搜索项目名称...">
</div>
</div>
<div class="tabs">
<div class="tab active">全部项目</div>
<div class="tab">进行中</div>
<div class="tab">待审批</div>
<div class="tab">已结项</div>
</div>
<table class="table">
<thead><tr><th>项目名称</th><th>负责人</th><th>进度</th><th>状态</th><th>更新时间</th><th>操作</th></tr></thead>
<tbody>
<tr><td>高镍三元正极材料研发</td><td>张明</td><td><div class="progress-bar" style="width:120px"><div class="fill" style="width:75%"></div></div>75%</td><td><span class="badge badge-primary">进行中</span></td><td>2026-06-24</td><td class="table-actions"><button class="btn btn-text">详情</button><button class="btn btn-text">编辑</button></td></tr>
<tr><td>磷酸铁锂改性研究</td><td>李华</td><td><div class="progress-bar" style="width:120px"><div class="fill" style="width:45%"></div></div>45%</td><td><span class="badge badge-primary">进行中</span></td><td>2026-06-23</td><td class="table-actions"><button class="btn btn-text">详情</button><button class="btn btn-text">编辑</button></td></tr>
<tr><td>硅碳负极材料开发</td><td>王芳</td><td><div class="progress-bar" style="width:120px"><div class="fill" style="width:30%"></div></div>30%</td><td><span class="badge badge-warning">待审批</span></td><td>2026-06-22</td><td class="table-actions"><button class="btn btn-text">详情</button><button class="btn btn-text">编辑</button></td></tr>
<tr><td>电解液添加剂配方优化</td><td>陈刚</td><td><div class="progress-bar" style="width:120px"><div class="fill" style="width:90%"></div></div>90%</td><td><span class="badge badge-primary">进行中</span></td><td>2026-06-25</td><td class="table-actions"><button class="btn btn-text">详情</button><button class="btn btn-text">编辑</button></td></tr>
<tr><td>固态电池电解质研究</td><td>刘洋</td><td><div class="progress-bar" style="width:120px"><div class="fill" style="width:15%"></div></div>15%</td><td><span class="badge badge-info">暂停</span></td><td>2026-06-20</td><td class="table-actions"><button class="btn btn-text">详情</button><button class="btn btn-text">编辑</button></td></tr>
</tbody>
</table>
</div>
<div id="experiment" class="content section-panel">
<div class="toolbar">
<div style="display:flex;gap:12px">
<button class="btn btn-primary" onclick="openModal('experimentModal')">+ 新建实验</button>
<button class="btn btn-success">导出数据</button>
</div>
<div class="search-box">
<input type="text" placeholder="搜索实验名称...">
</div>
</div>
<div class="tabs">
<div class="tab active">全部实验</div>
<div class="tab">进行中</div>
<div class="tab">已完成</div>
<div class="tab">已归档</div>
</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>EXP-2024-0156</td><td>LiNi0.8Co0.1Mn0.1O2 高温存储测试</td><td>高镍三元正极材料研发</td><td>张明</td><td><span class="badge badge-primary">进行中</span></td><td>2026-06-20</td><td class="table-actions"><button class="btn btn-text">详情</button><button class="btn btn-text">导出</button></td></tr>
<tr><td>EXP-2024-0155</td><td>磷酸铁锂碳包覆实验</td><td>磷酸铁锂改性研究</td><td>李华</td><td><span class="badge badge-success">完成</span></td><td>2026-06-18</td><td class="table-actions"><button class="btn btn-text">详情</button><button class="btn btn-text">导出</button></td></tr>
<tr><td>EXP-2024-0154</td><td>硅碳复合材料倍率性能测试</td><td>硅碳负极材料开发</td><td>王芳</td><td><span class="badge badge-warning">待处理</span></td><td>2026-06-15</td><td class="table-actions"><button class="btn btn-text">详情</button><button class="btn btn-text">导出</button></td></tr>
</tbody>
</table>
</div>
<div id="formula" class="content section-panel">
<div class="toolbar">
<div style="display:flex;gap:12px">
<button class="btn btn-primary" onclick="openModal('formulaModal')">+ 新建配方</button>
<button class="btn btn-warning">配方变更申请</button>
</div>
<div class="search-box">
<input type="text" placeholder="搜索配方名称...">
</div>
</div>
<div class="tabs">
<div class="tab active">全部配方</div>
<div class="tab">正极材料</div>
<div class="tab">负极材料</div>
<div class="tab">电解液</div>
<div class="tab">待审批</div>
</div>
<div class="card-grid">
<div class="card">
<div class="card-header"><span class="card-title">NCM811正极配方</span><span class="badge badge-primary">正式</span></div>
<div class="card-meta"><span>编号: F-2024-0089</span><span>版本: v2.3</span></div>
<div class="card-tags"><span class="badge badge-info">三元材料</span><span class="badge badge-info">正极</span></div>
<div class="card-footer"><span style="color:#909399;font-size:12px">更新: 2026-06-20</span><button class="btn btn-text">查看详情</button></div>
</div>
<div class="card">
<div class="card-header"><span class="card-title">磷酸铁锂配方</span><span class="badge badge-warning">变更中</span></div>
<div class="card-meta"><span>编号: F-2024-0076</span><span>版本: v1.8</span></div>
<div class="card-tags"><span class="badge badge-info">磷酸铁锂</span><span class="badge badge-info">正极</span></div>
<div class="card-footer"><span style="color:#909399;font-size:12px">更新: 2026-06-22</span><button class="btn btn-text">查看详情</button></div>
</div>
<div class="card">
<div class="card-header"><span class="card-title">硅碳负极配方</span><span class="badge badge-primary">正式</span></div>
<div class="card-meta"><span>编号: F-2024-0065</span><span>版本: v1.2</span></div>
<div class="card-tags"><span class="badge badge-info">硅碳</span><span class="badge badge-info">负极</span></div>
<div class="card-footer"><span style="color:#909399;font-size:12px">更新: 2026-06-18</span><button class="btn btn-text">查看详情</button></div>
</div>
<div class="card">
<div class="card-header"><span class="card-title">电解液配方-LP002</span><span class="badge badge-success">正式</span></div>
<div class="card-meta"><span>编号: F-2024-0058</span><span>版本: v3.1</span></div>
<div class="card-tags"><span class="badge badge-info">电解液</span></div>
<div class="card-footer"><span style="color:#909399;font-size:12px">更新: 2026-06-15</span><button class="btn btn-text">查看详情</button></div>
</div>
<div class="card">
<div class="card-header"><span class="card-title">固态电解质配方</span><span class="badge badge-info">研发</span></div>
<div class="card-meta"><span>编号: F-2024-0102</span><span>版本: v0.5</span></div>
<div class="card-tags"><span class="badge badge-info">固态电池</span><span class="badge badge-info">电解质</span></div>
<div class="card-footer"><span style="color:#909399;font-size:12px">更新: 2026-06-10</span><button class="btn btn-text">查看详情</button></div>
</div>
<div class="card">
<div class="card-header"><span class="card-title">NCM622正极配方</span><span class="badge badge-success">正式</span></div>
<div class="card-meta"><span>编号: F-2024-0045</span><span>版本: v2.0</span></div>
<div class="card-tags"><span class="badge badge-info">三元材料</span><span class="badge badge-info">正极</span></div>
<div class="card-footer"><span style="color:#909399;font-size:12px">更新: 2026-06-08</span><button class="btn btn-text">查看详情</button></div>
</div>
</div>
</div>
<div id="material" class="content section-panel">
<div class="toolbar">
<div style="display:flex;gap:12px">
<button class="btn btn-primary" onclick="openModal('materialModal')">+ 新增物料</button>
<button class="btn btn-warning">采购申请</button>
<button class="btn btn-success">库存盘点</button>
</div>
<div class="search-box">
<input type="text" placeholder="搜索物料名称/编号...">
</div>
</div>
<div class="tabs">
<div class="tab active">全部物料</div>
<div class="tab">原材料</div>
<div class="tab">试剂</div>
<div class="tab">耗材</div>
<div class="tab">库存预警</div>
</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>MAT-001</td><td>镍钴锰氢氧化物(NCM811)</td><td>电池级</td><td>250</td><td>kg</td><td><span class="badge badge-success">充足</span></td><td class="table-actions"><button class="btn btn-text">详情</button><button class="btn btn-text">入库</button></td></tr>
<tr><td>MAT-002</td><td>磷酸铁锂</td><td>电池级</td><td>80</td><td>kg</td><td><span class="badge badge-warning">偏低</span></td><td class="table-actions"><button class="btn btn-text">详情</button><button class="btn btn-text">入库</button></td></tr>
<tr><td>MAT-003</td><td>碳酸锂</td><td>电池级</td><td>15</td><td>kg</td><td><span class="badge badge-danger">紧急</span></td><td class="table-actions"><button class="btn btn-text">详情</button><button class="btn btn-text">入库</button></td></tr>
<tr><td>MAT-004</td><td>硅碳复合材料</td><td>Si含量65%</td><td>120</td><td>kg</td><td><span class="badge badge-success">充足</span></td><td class="table-actions"><button class="btn btn-text">详情</button><button class="btn btn-text">入库</button></td></tr>
<tr><td>MAT-005</td><td>NMP溶剂</td><td>电池级</td><td>500</td><td>L</td><td><span class="badge badge-success">充足</span></td><td class="table-actions"><button class="btn btn-text">详情</button><button class="btn btn-text">入库</button></td></tr>
</tbody>
</table>
</div>
<div id="sample" class="content section-panel">
<div class="toolbar">
<div style="display:flex;gap:12px">
<button class="btn btn-primary" onclick="openModal('sampleModal')">+ 新增样品</button>
<button class="btn btn-success">样品送检</button>
</div>
<div class="search-box">
<input type="text" placeholder="搜索样品名称/编号...">
</div>
</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>SAM-2024-0892</td><td>NCM811-20240620-A</td><td>NCM811正极配方</td><td>正极材料</td><td>2026-06-20</td><td><span class="badge badge-primary">待测试</span></td><td class="table-actions"><button class="btn btn-text">详情</button><button class="btn btn-text">送检</button></td></tr>
<tr><td>SAM-2024-0891</td><td>LFP-20240618-B</td><td>磷酸铁锂配方</td><td>正极材料</td><td>2026-06-18</td><td><span class="badge badge-success">已完成</span></td><td class="table-actions"><button class="btn btn-text">详情</button><button class="btn btn-text">报告</button></td></tr>
<tr><td>SAM-2024-0890</td><td>SiC-20240615-C</td><td>硅碳负极配方</td><td>负极材料</td><td>2026-06-15</td><td><span class="badge badge-warning">测试中</span></td><td class="table-actions"><button class="btn btn-text">详情</button><button class="btn btn-text">送检</button></td></tr>
</tbody>
</table>
</div>
<div id="approval" class="content section-panel">
<div class="toolbar">
<div style="display:flex;gap:12px">
<span class="badge badge-danger">待处理 8</span>
<span class="badge badge-success">已完成 156</span>
</div>
<div class="search-box">
<input type="text" placeholder="搜索审批内容...">
</div>
</div>
<div class="tabs">
<div class="tab active">待审批</div>
<div class="tab">已通过</div>
<div class="tab">已驳回</div>
<div class="tab">我发起的</div>
</div>
<table class="table">
<thead><tr><th>申请编号</th><th>申请类型</th><th>申请人</th><th>申请内容</th><th>提交时间</th><th>操作</th></tr></thead>
<tbody>
<tr><td>APR-2024-0234</td><td><span class="badge badge-warning">配方变更</span></td><td>张明</td><td>NCM811正极配方变更申请</td><td>2026-06-24</td><td class="table-actions"><button class="btn btn-success" onclick="showToast('已通过')">通过</button><button class="btn btn-danger" onclick="showToast('已驳回')">驳回</button></td></tr>
<tr><td>APR-2024-0233</td><td><span class="badge badge-primary">物料采购</span></td><td>李华</td><td>磷酸铁锂原材料采购申请</td><td>2026-06-24</td><td class="table-actions"><button class="btn btn-success" onclick="showToast('已通过')">通过</button><button class="btn btn-danger" onclick="showToast('已驳回')">驳回</button></td></tr>
<tr><td>APR-2024-0232</td><td><span class="badge badge-info">实验记录</span></td><td>王芳</td><td>硅碳负极实验记录审核</td><td>2026-06-23</td><td class="table-actions"><button class="btn btn-success" onclick="showToast('已通过')">通过</button><button class="btn btn-danger" onclick="showToast('已驳回')">驳回</button></td></tr>
<tr><td>APR-2024-0231</td><td><span class="badge badge-warning">配方变更</span></td><td>陈刚</td><td>电解液配方LP002变更申请</td><td>2026-06-23</td><td class="table-actions"><button class="btn btn-success" onclick="showToast('已通过')">通过</button><button class="btn btn-danger" onclick="showToast('已驳回')">驳回</button></td></tr>
</tbody>
</table>
</div>
<div id="report" class="content section-panel">
<div class="toolbar">
<button class="btn btn-primary">导出报表</button>
<button class="btn btn-success">打印</button>
</div>
<div class="kpi-grid">
<div class="stat-card">
<h3>本月完成项目</h3>
<div class="value">8</div>
<div class="sub">环比增长 +25%</div>
</div>
<div class="stat-card green">
<h3>实验成功率</h3>
<div class="value">78%</div>
<div class="sub">环比增长 +5%</div>
</div>
<div class="stat-card orange">
<h3>配方使用次数</h3>
<div class="value">1,256</div>
<div class="sub">本月统计</div>
</div>
<div class="stat-card blue">
<h3>平均审批周期</h3>
<div class="value">2.3天</div>
<div class="sub">缩短 0.5天</div>
</div>
</div>
</div>
<div id="system" class="content section-panel">
<div class="toolbar">
<button class="btn btn-primary" onclick="openDrawer('userDrawer')">+ 新建用户</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><td>admin</td><td>系统管理员</td><td>信息中心</td><td><span class="badge badge-danger">超级管理员</span></td><td><span class="badge badge-success">启用</span></td><td>2026-06-25</td><td class="table-actions"><button class="btn btn-text">编辑</button><button class="btn btn-text" disabled>禁用</button></td></tr>
<tr><td>zhangming</td><td>张明</td><td>研发部</td><td><span class="badge badge-primary">研发工程师</span></td><td><span class="badge badge-success">启用</span></td><td>2026-06-25</td><td class="table-actions"><button class="btn btn-text">编辑</button><button class="btn btn-text">禁用</button></td></tr>
<tr><td>lihua</td><td>李华</td><td>研发部</td><td><span class="badge badge-primary">研发工程师</span></td><td><span class="badge badge-success">启用</span></td><td>2026-06-24</td><td class="table-actions"><button class="btn btn-text">编辑</button><button class="btn btn-text">禁用</button></td></tr>
<tr><td>wangfang</td><td>王芳</td><td>测试部</td><td><span class="badge badge-warning">测试工程师</span></td><td><span class="badge badge-success">启用</span></td><td>2026-06-24</td><td class="table-actions"><button class="btn btn-text">编辑</button><button class="btn btn-text">禁用</button></td></tr>
</tbody>
</table>
</div>

<!-- 项目新建/编辑弹窗 -->
<div id="projectModal" class="modal-overlay">
<div class="modal">
<div class="modal-header"><h3>新建项目</h3><button class="modal-close" onclick="closeModal('projectModal')">×</button></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-row"><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="form-row"><div class="form-group"><label class="form-label">开始日期</label><input type="date" class="form-input"></div><div class="form-group"><label class="form-label">结束日期</label><input type="date" class="form-input"></div></div>
<div class="form-group"><label class="form-label">项目描述</label><textarea class="form-input" rows="3" placeholder="请输入项目描述...">
编辑页面

新建实验

新建配方

新增物料

新增样品

用户详情

确认操作
