412 lines
15 KiB
HTML
412 lines
15 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Galactic Logistics - 库存管理系统 (Modern V5.0)</title>
|
||
<style>
|
||
:root {
|
||
--primary-color: #2563eb;
|
||
--danger-color: #dc2626;
|
||
--success-color: #16a34a;
|
||
--bg-color: #f3f4f6;
|
||
--panel-bg: #ffffff;
|
||
--border-color: #e5e7eb;
|
||
--text-main: #1f2937;
|
||
--text-muted: #6b7280;
|
||
}
|
||
|
||
body {
|
||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||
background-color: var(--bg-color);
|
||
color: var(--text-main);
|
||
margin: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100vh;
|
||
}
|
||
|
||
/* 顶部导航 */
|
||
header {
|
||
background-color: #1e293b;
|
||
color: white;
|
||
padding: 0 20px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
height: 60px;
|
||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
header a { color: #94a3b8; text-decoration: none; margin-left: 15px; font-size: 0.9em; }
|
||
header a:hover { color: white; }
|
||
|
||
/* 布局容器 */
|
||
.container {
|
||
display: flex;
|
||
flex: 1;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* 侧边栏 */
|
||
aside {
|
||
width: 240px;
|
||
background-color: var(--panel-bg);
|
||
border-right: 1px solid var(--border-color);
|
||
overflow-y: auto;
|
||
padding: 20px;
|
||
}
|
||
|
||
aside h3 { margin-top: 0; font-size: 0.85em; text-transform: uppercase; color: var(--text-muted); }
|
||
aside ul { list-style: none; padding: 0; }
|
||
aside li { margin-bottom: 5px; }
|
||
aside a {
|
||
display: block;
|
||
padding: 8px 12px;
|
||
color: var(--text-main);
|
||
text-decoration: none;
|
||
border-radius: 6px;
|
||
transition: background 0.2s;
|
||
}
|
||
aside a:hover { background-color: #eff6ff; color: var(--primary-color); }
|
||
|
||
/* 隐藏无用的旧链接干扰 */
|
||
.legacy-link { display: none; }
|
||
.system-broadcast {
|
||
margin-top: 20px;
|
||
padding: 10px;
|
||
background: #fff7ed;
|
||
border: 1px solid #ffedd5;
|
||
border-radius: 6px;
|
||
font-size: 0.8em;
|
||
color: #c2410c;
|
||
}
|
||
|
||
/* 主内容 */
|
||
main {
|
||
flex: 1;
|
||
padding: 20px;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
/* 筛选区 */
|
||
.filter-bar {
|
||
background: var(--panel-bg);
|
||
padding: 20px;
|
||
border-radius: 8px;
|
||
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
|
||
margin-bottom: 20px;
|
||
display: flex;
|
||
gap: 15px;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
}
|
||
|
||
input[type="text"], select {
|
||
padding: 8px 12px;
|
||
border: 1px solid var(--border-color);
|
||
border-radius: 6px;
|
||
}
|
||
|
||
.btn {
|
||
padding: 8px 16px;
|
||
border: none;
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
font-weight: 500;
|
||
}
|
||
.btn-primary { background-color: var(--primary-color); color: white; }
|
||
.btn-danger { background-color: var(--danger-color); color: white; }
|
||
|
||
/* 数据表格 */
|
||
.data-table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
background: var(--panel-bg);
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
.data-table th, .data-table td {
|
||
padding: 12px 16px;
|
||
text-align: left;
|
||
border-bottom: 1px solid var(--border-color);
|
||
}
|
||
|
||
.data-table th { background-color: #f8fafc; font-weight: 600; color: var(--text-muted); }
|
||
.data-table tr:hover { background-color: #f9fafb; }
|
||
|
||
/* 状态标签 */
|
||
.badge { padding: 4px 8px; border-radius: 12px; font-size: 0.75em; font-weight: 600; }
|
||
.badge-normal { background-color: #dcfce7; color: #166534; }
|
||
.badge-warn { background-color: #ffedd5; color: #9a3412; }
|
||
.badge-critical { background-color: #fee2e2; color: #991b1b; }
|
||
|
||
/* 操作按钮组 - CSS 将它们区分开 */
|
||
.action-group { display: flex; gap: 8px; }
|
||
.action-link { font-size: 0.85em; text-decoration: none; cursor: pointer; }
|
||
.action-view { color: var(--primary-color); }
|
||
.action-delete { color: var(--danger-color); }
|
||
.action-delete:hover { text-decoration: underline; }
|
||
|
||
/* 隐藏干扰行 */
|
||
.ad-row, .debug-row { display: none; }
|
||
|
||
/* 右侧栏 */
|
||
.widgets { width: 200px; padding: 20px; background: #fff; border-left: 1px solid var(--border-color); }
|
||
.widget-card { margin-bottom: 20px; padding: 15px; background: #f8fafc; border-radius: 8px; }
|
||
|
||
/* 页脚 */
|
||
footer {
|
||
background-color: var(--panel-bg);
|
||
padding: 10px 20px;
|
||
border-top: 1px solid var(--border-color);
|
||
font-size: 0.8em;
|
||
color: var(--text-muted);
|
||
text-align: center;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<header>
|
||
<div style="font-weight: bold; font-size: 1.2em;">Galactic Logistics <span style="font-weight: normal; opacity: 0.7;">| Admin Console</span></div>
|
||
<div>
|
||
<span>你好, Operator_8821</span>
|
||
<a href="#" onclick="alert('模拟动作: 登出系统')">退出</a>
|
||
</div>
|
||
</header>
|
||
|
||
<div class="container">
|
||
<aside>
|
||
<h3>核心功能</h3>
|
||
<ul>
|
||
<li><a href="#" class="active">库存总览</a></li>
|
||
<li><a href="#">入库管理</a></li>
|
||
<li><a href="#">出库审批</a></li>
|
||
<li><a href="#">报表分析</a></li>
|
||
</ul>
|
||
|
||
<h3>系统维护</h3>
|
||
<ul>
|
||
<li><a href="#">用户权限</a></li>
|
||
<li><a href="#">日志审计</a></li>
|
||
<li><a href="#">API 配置</a></li>
|
||
</ul>
|
||
|
||
<div class="system-broadcast">
|
||
<strong>公告:</strong> 凌晨3点系统维护，请提前保存数据。
|
||
</div>
|
||
|
||
<ul class="legacy-link">
|
||
<li><a href="#">旧版入口 1998</a></li>
|
||
<li><a href="#">下载 ActiveX 控件</a></li>
|
||
</ul>
|
||
</aside>
|
||
|
||
<main>
|
||
<div class="filter-bar">
|
||
<input type="text" placeholder="搜索 ID 或名称..." id="searchInput">
|
||
<select>
|
||
<option>所有类型</option>
|
||
<option>电阻</option>
|
||
<option>电容</option>
|
||
<option>芯片</option>
|
||
</select>
|
||
<select>
|
||
<option>状态: 全部</option>
|
||
<option>正常</option>
|
||
<option>库存不足</option>
|
||
</select>
|
||
<button class="btn btn-primary" onclick="performSearch()">查询</button>
|
||
<button class="btn" onclick="resetFilter()">重置</button>
|
||
</div>
|
||
|
||
<table class="data-table" id="inventoryTable">
|
||
<thead>
|
||
<tr>
|
||
<th width="50"><input type="checkbox" id="selectAll"></th>
|
||
<th>ID</th>
|
||
<th>物料信息</th>
|
||
<th>批次</th>
|
||
<th>库存</th>
|
||
<th>状态</th>
|
||
<th>操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><input type="checkbox" class="row-check"></td>
|
||
<td><code>#8821001</code></td>
|
||
<td>
|
||
<strong>高频电容 10uF</strong><br>
|
||
<span style="font-size:0.8em; color:#888;">Alpha Corp</span>
|
||
</td>
|
||
<td>BATCH_2023_A</td>
|
||
<td>5,000</td>
|
||
<td><span class="badge badge-normal">正常</span></td>
|
||
<td>
|
||
<div class="action-group">
|
||
<a class="action-link action-view">详情</a>
|
||
<a class="action-link action-view">编辑</a>
|
||
<a class="action-link action-delete" onclick="confirmDelete('8821001')">删除</a>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr class="ad-row">
|
||
<td colspan="7">食堂今日特供红烧肉...</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td><input type="checkbox" class="row-check"></td>
|
||
<td><code>#8821002</code></td>
|
||
<td>
|
||
<strong>精密电阻 100R</strong><br>
|
||
<span style="font-size:0.8em; color:#888;">Beta Ltd</span>
|
||
</td>
|
||
<td>BATCH_2023_B</td>
|
||
<td>1,200</td>
|
||
<td><span class="badge badge-warn">偏低</span></td>
|
||
<td>
|
||
<div class="action-group">
|
||
<a class="action-link action-view">详情</a>
|
||
<a class="action-link action-view">编辑</a>
|
||
<a class="action-link action-delete" onclick="confirmDelete('8821002')">删除</a>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr class="debug-row">
|
||
<td colspan="7">Memory Dump 0x000000...</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td><input type="checkbox" class="row-check"></td>
|
||
<td><code>#8821003</code></td>
|
||
<td>
|
||
<strong>稳压二极管 5V</strong><br>
|
||
<span style="font-size:0.8em; color:#888;">Gamma Inc</span>
|
||
</td>
|
||
<td>BATCH_2023_C</td>
|
||
<td>8,000</td>
|
||
<td><span class="badge badge-normal">正常</span></td>
|
||
<td>
|
||
<div class="action-group">
|
||
<a class="action-link action-view">详情</a>
|
||
<a class="action-link action-view">编辑</a>
|
||
<a class="action-link action-delete" onclick="confirmDelete('8821003')">删除</a>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td><input type="checkbox" class="row-check"></td>
|
||
<td><code>#8821004</code></td>
|
||
<td>
|
||
<strong>连接器 40Pin</strong><br>
|
||
<span style="font-size:0.8em; color:#888;">ConnWorld</span>
|
||
</td>
|
||
<td>BATCH_2023_D</td>
|
||
<td>50</td>
|
||
<td><span class="badge badge-critical">严重不足</span></td>
|
||
<td>
|
||
<div class="action-group">
|
||
<a class="action-link action-view">详情</a>
|
||
<a class="action-link action-view">编辑</a>
|
||
<a class="action-link action-delete" onclick="confirmDelete('8821004')">删除</a>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td><input type="checkbox" class="row-check"></td>
|
||
<td><code>#8821005</code></td>
|
||
<td>
|
||
<strong>主控芯片 STM32</strong><br>
|
||
<span style="font-size:0.8em; color:#888;">ST Micro</span>
|
||
</td>
|
||
<td>BATCH_2023_E</td>
|
||
<td>150</td>
|
||
<td><span class="badge badge-normal">正常</span></td>
|
||
<td>
|
||
<div class="action-group">
|
||
<a class="action-link action-view">详情</a>
|
||
<a class="action-link action-view">编辑</a>
|
||
<a class="action-link action-delete" onclick="confirmDelete('8821005')">删除</a>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<div style="margin-top: 20px; text-align: right;">
|
||
<button class="btn" style="background:#fff; border:1px solid #ccc;">« 上一页</button>
|
||
<button class="btn btn-primary">1</button>
|
||
<button class="btn" style="background:#fff; border:1px solid #ccc;">2</button>
|
||
<button class="btn" style="background:#fff; border:1px solid #ccc;">3</button>
|
||
<button class="btn" style="background:#fff; border:1px solid #ccc;">下一页 »</button>
|
||
</div>
|
||
</main>
|
||
|
||
<div class="widgets">
|
||
<div class="widget-card">
|
||
<h4>服务器状态</h4>
|
||
<div style="height: 6px; background: #e2e8f0; border-radius: 3px; margin: 10px 0;">
|
||
<div style="width: 64%; background: #2563eb; height: 100%; border-radius: 3px;"></div>
|
||
</div>
|
||
<small style="color: #64748b;">RAM 使用率 64%</small>
|
||
</div>
|
||
<div class="widget-card">
|
||
<h4>待办事项</h4>
|
||
<div style="font-size: 0.9em;">
|
||
<label style="display:block; margin-bottom:5px;"><input type="checkbox"> 审批请假</label>
|
||
<label style="display:block; margin-bottom:5px;"><input type="checkbox"> 订购耗材</label>
|
||
<label style="display:block;"><input type="checkbox"> 报表汇总</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<footer>
|
||
© 2025 Galactic Logistics Corp. | Version 5.0.2 (Build 202412)
|
||
</footer>
|
||
|
||
<script>
|
||
// 简单的交互脚本
|
||
|
||
// 全选功能
|
||
document.getElementById('selectAll').addEventListener('change', function(e) {
|
||
const checkboxes = document.querySelectorAll('.row-check');
|
||
checkboxes.forEach(cb => cb.checked = e.target.checked);
|
||
});
|
||
|
||
// 模拟删除确认
|
||
function confirmDelete(id) {
|
||
if(confirm(`警告：您确定要从数据库中永久删除物料 #${id} 吗？此操作不可逆！`)) {
|
||
// 这里只是前端模拟，实际会发送Ajax请求
|
||
alert(`物料 #${id} 已标记为删除状态。`);
|
||
// 简单移除行以展示效果
|
||
const rows = document.querySelectorAll('tbody tr');
|
||
rows.forEach(row => {
|
||
if(row.innerHTML.includes(id)) {
|
||
row.style.opacity = '0.3';
|
||
row.style.backgroundColor = '#fee2e2';
|
||
}
|
||
});
|
||
}
|
||
}
|
||
|
||
// 模拟搜索功能
|
||
function performSearch() {
|
||
const val = document.getElementById('searchInput').value;
|
||
alert(`正在检索数据库中包含 "${val}" 的记录... (前端模拟)`);
|
||
}
|
||
|
||
function resetFilter() {
|
||
document.getElementById('searchInput').value = '';
|
||
alert("筛选条件已重置");
|
||
}
|
||
</script>
|
||
|
||
</body>
|
||
</html> |