wangbeihong
10da4c2859
- 增加了 LCSC API 集成，可利用 app_id、access_key 和 secret_key 获取产品详情。 - 实现了用于安全 API 请求的一次性和签名生成。 - 通过新端点提升包容量管理，更新插槽容量。 - 更新界面，支持 LCSC 产品直接导入袋口。 - 改进了 API 响应和用户输入验证的错误处理。 - 重构箱子渲染逻辑，以适应新的包包功能和展示产品详情。 - 为与 LCSC 产品信息相关的新 UI 元素添加了 CSS 样式。 - 更新了 AI 设置页面，包含了 LCSC API 配置选项。
223 lines
8.2 KiB
HTML
223 lines
8.2 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>{{ box.name }} - 容器详情</title>
|
||
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
|
||
</head>
|
||
<body>
|
||
<header class="hero slim">
|
||
<div>
|
||
<h1>{{ box.name }} - {{ box_types.get(box.box_type, box_types['small_28']).label }}</h1>
|
||
<p>核心操作: 新增/编辑/快速入库，路径最短化</p>
|
||
</div>
|
||
<nav class="hero-actions">
|
||
<a class="btn btn-light" href="{{ url_for('index') }}">返回首页</a>
|
||
{% if box.box_type == 'bag' %}
|
||
<a class="btn btn-light" href="{{ url_for('types_page') }}">返回仓库概览</a>
|
||
{% else %}
|
||
<a class="btn btn-light" href="{{ url_for('type_page', box_type=box.box_type) }}">返回上一级容器</a>
|
||
{% endif %}
|
||
<a class="btn btn-light" href="{{ url_for('search_page') }}">快速搜索</a>
|
||
<a class="btn btn-light" href="{{ url_for('stats_page') }}">统计页</a>
|
||
<a class="btn btn-light" href="{{ url_for('export_box_labels_csv', box_id=box.id) }}">导出打标CSV</a>
|
||
</nav>
|
||
</header>
|
||
|
||
<main class="container">
|
||
{% if error %}
|
||
<p class="alert">{{ error }}</p>
|
||
{% endif %}
|
||
{% if notice %}
|
||
<p class="notice">{{ notice }}</p>
|
||
{% endif %}
|
||
|
||
<div class="entry-shell">
|
||
<section class="entry-main">
|
||
<p class="group-desc">容量: {{ box.slot_capacity }} 位 | 编号范围: {{ slot_range }}</p>
|
||
<div class="slot-toolbar">
|
||
<button class="btn btn-light" type="button" id="slot-density-toggle" aria-pressed="false">切换到精简模式</button>
|
||
</div>
|
||
<section class="slot-grid{% if box.box_type == 'small_28' %} slot-grid-28-fixed{% endif %}{% if box.box_type == 'medium_14' %} slot-grid-14-fixed{% endif %}{% if box.box_type == 'bag' %} slot-grid-bag-fixed{% elif box.slot_capacity <= 4 %} slot-grid-bag{% endif %}">
|
||
{% for item in slots %}
|
||
<a class="slot {% if item.component %}filled{% endif %}{% if item.component and item.component.quantity < low_stock_threshold %} low-stock{% endif %}" href="{{ url_for('edit_component', box_id=box.id, slot=item.slot) }}">
|
||
<span class="slot-no">{{ item.slot_code }}</span>
|
||
{% if item.component %}
|
||
<small class="slot-part" title="{{ item.component.part_no }}">{{ item.component.part_no }}</small>
|
||
<small class="slot-name" title="{{ item.component.name }}"><span class="slot-name-text">{{ item.component.name }}</span></small>
|
||
<div class="slot-details">
|
||
{% if item.spec_fields.package %}
|
||
<small class="slot-field" title="封装">封装: {{ item.spec_fields.package }}</small>
|
||
{% endif %}
|
||
{% if item.spec_fields.usage %}
|
||
<small class="slot-field" title="用途/分类">用途: {{ item.spec_fields.usage }}</small>
|
||
{% endif %}
|
||
</div>
|
||
<small class="slot-meta">数量: {{ item.component.quantity }}</small>
|
||
<div class="slot-details">
|
||
{% if item.lcsc_code %}
|
||
<small class="slot-lcsc" title="点击复制立创编号" data-copy="{{ item.lcsc_code }}">编号: {{ item.lcsc_code }}</small>
|
||
{% endif %}
|
||
</div>
|
||
{% if item.component.quantity < low_stock_threshold %}
|
||
<small class="slot-alert">低库存预警</small>
|
||
{% endif %}
|
||
{% else %}
|
||
<small class="slot-meta">空位</small>
|
||
{% endif %}
|
||
</a>
|
||
{% endfor %}
|
||
</section>
|
||
|
||
<div class="modal-backdrop" id="quick-inbound-modal" hidden>
|
||
<div class="modal-card panel" role="dialog" aria-modal="true" aria-labelledby="quick-inbound-title">
|
||
<div class="group-title-row">
|
||
<h2 id="quick-inbound-title">快速入库</h2>
|
||
<button class="btn btn-light" type="button" id="close-quick-inbound">关闭</button>
|
||
</div>
|
||
<p class="hint">每行一条: 料号, 名称, 数量, 规格, 备注。支持英文逗号或Tab分隔；同料号会自动累加数量。</p>
|
||
<form method="post" action="{{ url_for('quick_inbound', box_id=box.id) }}">
|
||
<textarea class="batch-input" name="lines" rows="8" placeholder="10K-0603, 电阻10K 0603, 500, 1%, 常用\n100nF-0603, 电容100nF 0603, 300, 50V X7R, 去耦"></textarea>
|
||
<p class="hint">建议: part_no 用厂家型号，name 用品类+型号，specification 只写关键参数。</p>
|
||
<div class="actions">
|
||
<button class="btn" type="submit">批量快速入库</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<aside class="entry-sidebar">
|
||
{% if box.box_type == 'bag' %}
|
||
<section class="panel quick-inbound-panel">
|
||
<h2>袋位设置</h2>
|
||
<p class="hint">袋装清单是固定大容器，但袋位数量可以按实际需要调整。</p>
|
||
<form class="form-grid" method="post" action="{{ url_for('update_bag_capacity', box_id=box.id) }}">
|
||
<label>
|
||
袋位数量
|
||
<input type="number" name="slot_capacity" min="1" value="{{ box.slot_capacity }}">
|
||
</label>
|
||
<div class="actions full">
|
||
<button class="btn" type="submit">更新袋位数量</button>
|
||
</div>
|
||
</form>
|
||
</section>
|
||
{% endif %}
|
||
|
||
<section class="panel quick-inbound-panel">
|
||
<h2>快速入库</h2>
|
||
<div class="card-actions quick-inbound-entry">
|
||
<button class="btn btn-light" type="button" id="open-quick-inbound">打开快速入库</button>
|
||
</div>
|
||
<p class="hint">弹窗录入，不占主页面空间。</p>
|
||
</section>
|
||
|
||
<section class="panel entry-guide">
|
||
<h2>轻量入库规范</h2>
|
||
<p class="hint">先保证可检索，再补充关键参数，不追求一次填很全。</p>
|
||
<ul class="guide-list">
|
||
<li>必填: 料号(part_no) + 名称(name) + 数量(quantity)</li>
|
||
<li>建议: 规格(specification)写 2-4 个关键参数</li>
|
||
<li>备注(note): 来源编号或链接，如 LCSC item 9243</li>
|
||
</ul>
|
||
<pre class="guide-code">料号: STM32F103C8T6
|
||
名称: MCU STM32F103C8T6
|
||
规格: Cortex-M3 / 64KB Flash / LQFP-48
|
||
数量: 10
|
||
备注: LCSC item 9243</pre>
|
||
</section>
|
||
</aside>
|
||
</div>
|
||
</main>
|
||
<script>
|
||
(function () {
|
||
var grid = document.querySelector('.slot-grid');
|
||
var toggleBtn = document.getElementById('slot-density-toggle');
|
||
if (!grid || !toggleBtn) {
|
||
return;
|
||
}
|
||
|
||
var storageKey = 'slot-density-mode';
|
||
var mode = window.localStorage.getItem(storageKey) || 'detailed';
|
||
|
||
function applyMode(nextMode) {
|
||
var compact = nextMode === 'compact';
|
||
grid.classList.toggle('compact', compact);
|
||
toggleBtn.textContent = compact ? '切换到详细模式' : '切换到精简模式';
|
||
toggleBtn.setAttribute('aria-pressed', compact ? 'true' : 'false');
|
||
}
|
||
|
||
applyMode(mode);
|
||
|
||
toggleBtn.addEventListener('click', function () {
|
||
mode = mode === 'compact' ? 'detailed' : 'compact';
|
||
window.localStorage.setItem(storageKey, mode);
|
||
applyMode(mode);
|
||
});
|
||
})();
|
||
|
||
(function () {
|
||
var openBtn = document.getElementById('open-quick-inbound');
|
||
var closeBtn = document.getElementById('close-quick-inbound');
|
||
var modal = document.getElementById('quick-inbound-modal');
|
||
|
||
if (!openBtn || !modal) {
|
||
return;
|
||
}
|
||
|
||
function openModal() {
|
||
modal.hidden = false;
|
||
document.body.classList.add('modal-open');
|
||
}
|
||
|
||
function closeModal() {
|
||
modal.hidden = true;
|
||
document.body.classList.remove('modal-open');
|
||
}
|
||
|
||
openBtn.addEventListener('click', openModal);
|
||
if (closeBtn) {
|
||
closeBtn.addEventListener('click', closeModal);
|
||
}
|
||
|
||
modal.addEventListener('click', function (event) {
|
||
if (event.target === modal) {
|
||
closeModal();
|
||
}
|
||
});
|
||
|
||
document.addEventListener('keydown', function (event) {
|
||
if (event.key === 'Escape' && !modal.hidden) {
|
||
closeModal();
|
||
}
|
||
});
|
||
})();
|
||
|
||
(function () {
|
||
var codeNodes = document.querySelectorAll('.slot-lcsc[data-copy]');
|
||
if (!codeNodes.length) {
|
||
return;
|
||
}
|
||
|
||
codeNodes.forEach(function (node) {
|
||
node.addEventListener('click', function (event) {
|
||
event.preventDefault();
|
||
event.stopPropagation();
|
||
var text = (node.getAttribute('data-copy') || '').trim();
|
||
if (!text || !navigator.clipboard || !navigator.clipboard.writeText) {
|
||
return;
|
||
}
|
||
navigator.clipboard.writeText(text).then(function () {
|
||
node.classList.add('copied');
|
||
window.setTimeout(function () {
|
||
node.classList.remove('copied');
|
||
}, 900);
|
||
});
|
||
});
|
||
});
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html>
|