wangbeihong/inventory
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 重构编辑页面，优化表单布局和样式，增强用户体验

Browse Source
This commit is contained in:
wangbeihong
2026-03-13 22:11:37 +08:00
parent ccf35df0c8
commit 847ec32144
2 changed files with 143 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
static/css/style.css
View File

@@ -1212,6 +1212,35 @@ th {
overflow: auto;
}
.edit-stack {
display: grid;
grid-template-columns: minmax(0, 1.6fr) minmax(340px, 1fr);
gap: var(--space-2);
align-items: start;
}
.lcsc-import-panel .lcsc-inline-form {
grid-template-columns: 2fr 1fr;
align-items: end;
}
.edit-stack .lcsc-import-panel,
.edit-stack > .quick-inbound-panel,
.edit-stack > .edit-guide-panel {
grid-column: 1;
}
.edit-form-panel {
grid-column: 2;
grid-row: 1 / span 3;
position: sticky;
top: 92px;
}
.edit-guide-panel {
max-width: 100%;
}
.ai-standardize-preview {
display: grid;
gap: var(--space-1);
@@ -1332,6 +1361,20 @@ th {
.entry-sidebar {
position: static;
}
.lcsc-import-panel .lcsc-inline-form {
grid-template-columns: 1fr;
}
.edit-stack {
grid-template-columns: 1fr;
}
.edit-form-panel {
grid-column: auto;
grid-row: auto;
position: static;
}
}
@media (max-width: 760px) {

177
templates/edit.html
View File

@@ -30,8 +30,76 @@
<p class="notice">当前为锁仓模式: 禁止删除位置绑定，禁止替换当前位置料号。</p>
{% endif %}
<div class="entry-shell">
<section class="entry-main">
<div class="edit-stack">
<section class="panel quick-inbound-panel lcsc-import-panel">
<h2>立创编号入库</h2>
<p class="hint">当前编辑位置: {{ slot_code }}。仅支持粘贴立创商品详情页链接，系统会自动提取 itemId 并查询。</p>
<form class="form-grid lcsc-inline-form" method="post" action="{{ url_for('lcsc_import_to_edit_slot', box_id=box.id, slot=slot) }}">
<label>
立创商品详情页链接
<input type="text" name="lcsc_product_id" required placeholder="如 https://item.szlcsc.com/23913.html">
</label>
<label>
数量
<input type="number" name="quantity" min="0" value="0">
</label>
<label class="full">
<input type="checkbox" name="confirm_merge" value="1">
人工确认后合并: 若检测到同料号或同参数物料，将合并到已存在位置
</label>
<label class="full">
<input type="checkbox" name="confirm_position_change" value="1">
我确认替换当前位物料（会改变该位置原有绑定）
</label>
<div class="actions full">
<button class="btn" type="submit">拉取并写入当前位</button>
<a class="btn btn-light" href="{{ url_for('ai_settings_page') }}">接口参数</a>
</div>
</form>
</section>
<section class="panel quick-inbound-panel">
<div class="group-title-row">
<h2>AI 标签与备注标准化</h2>
<button class="btn btn-light" type="button" id="toggle-standardize-panel" aria-expanded="false">展开</button>
</div>
<div id="standardize-card-body" hidden>
<p class="hint">生成更适合标签打印的短名称，并自动补全统一搜索关键词。确认后再回填到表单。</p>
<p class="hint" id="standardize-status" aria-live="polite"></p>
<section class="ai-standardize-preview" id="standardize-preview" hidden>
<div class="standardize-grid">
<div>
<strong>短标签</strong>
<p id="standardize-short-label">-</p>
</div>
<div>
<strong>建议名称</strong>
<p id="standardize-name">-</p>
</div>
<div>
<strong>建议规格</strong>
<p id="standardize-specification">-</p>
</div>
<div class="full">
<strong>建议备注</strong>
<p id="standardize-note">-</p>
</div>
<div class="full">
<strong>搜索关键词</strong>
<div class="match-tags" id="standardize-keywords"></div>
</div>
</div>
<div class="actions">
<button class="btn" type="button" id="apply-standardization-btn">应用到表单</button>
</div>
</section>
<div class="actions">
<button class="btn btn-light" type="button" id="generate-standardization-btn">生成标准化建议</button>
</div>
</div>
</section>
<section class="edit-form-panel">
<form class="panel form-grid" method="post">
<input type="hidden" name="q" value="{{ search_query or '' }}">
<label>
@@ -81,85 +149,20 @@
</form>
</section>
<aside class="entry-sidebar">
<section class="panel quick-inbound-panel">
<h2>AI 标签与备注标准化</h2>
<p class="hint">生成更适合标签打印的短名称，并自动补全统一搜索关键词。确认后再回填到表单。</p>
<p class="hint" id="standardize-status" aria-live="polite"></p>
<section class="ai-standardize-preview" id="standardize-preview" hidden>
<div class="standardize-grid">
<div>
<strong>短标签</strong>
<p id="standardize-short-label">-</p>
</div>
<div>
<strong>建议名称</strong>
<p id="standardize-name">-</p>
</div>
<div>
<strong>建议规格</strong>
<p id="standardize-specification">-</p>
</div>
<div class="full">
<strong>建议备注</strong>
<p id="standardize-note">-</p>
</div>
<div class="full">
<strong>搜索关键词</strong>
<div class="match-tags" id="standardize-keywords"></div>
</div>
</div>
<div class="actions">
<button class="btn" type="button" id="apply-standardization-btn">应用到表单</button>
</div>
</section>
<div class="actions">
<button class="btn btn-light" type="button" id="generate-standardization-btn">生成标准化建议</button>
</div>
</section>
<section class="panel quick-inbound-panel">
<h2>立创编号入库</h2>
<p class="hint">当前编辑位置: {{ slot_code }}。仅支持粘贴立创商品详情页链接，系统会自动提取 itemId 并查询。</p>
<form class="form-grid" method="post" action="{{ url_for('lcsc_import_to_edit_slot', box_id=box.id, slot=slot) }}">
<label>
立创商品详情页链接
<input type="text" name="lcsc_product_id" required placeholder="如 https://item.szlcsc.com/23913.html">
</label>
<label>
数量
<input type="number" name="quantity" min="0" value="0">
</label>
<label class="full">
<input type="checkbox" name="confirm_merge" value="1">
人工确认后合并: 若检测到同料号或同参数物料，将合并到已存在位置
</label>
<label class="full">
<input type="checkbox" name="confirm_position_change" value="1">
我确认替换当前位物料（会改变该位置原有绑定）
</label>
<div class="actions full">
<button class="btn" type="submit">拉取并写入当前位</button>
<a class="btn btn-light" href="{{ url_for('ai_settings_page') }}">接口参数</a>
</div>
</form>
</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
<section class="panel entry-guide edit-guide-panel">
<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>
</section>
</div>
</main>
<script>
@@ -168,6 +171,8 @@
var nameInput = document.getElementById('name-input');
var specificationInput = document.getElementById('specification-input');
var noteInput = document.getElementById('note-input');
var toggleStandardizeBtn = document.getElementById('toggle-standardize-panel');
var standardizeCardBody = document.getElementById('standardize-card-body');
var generateBtn = document.getElementById('generate-standardization-btn');
var applyBtn = document.getElementById('apply-standardization-btn');
var status = document.getElementById('standardize-status');
@@ -183,6 +188,23 @@
return;
}
function setStandardizePanelExpanded(expanded) {
if (!toggleStandardizeBtn || !standardizeCardBody) {
return;
}
standardizeCardBody.hidden = !expanded;
toggleStandardizeBtn.setAttribute('aria-expanded', expanded ? 'true' : 'false');
toggleStandardizeBtn.textContent = expanded ? '收起' : '展开';
}
setStandardizePanelExpanded(false);
if (toggleStandardizeBtn) {
toggleStandardizeBtn.addEventListener('click', function () {
setStandardizePanelExpanded(standardizeCardBody.hidden);
});
}
function escapeHtml(text) {
return String(text || '')
.replace(/&/g, '&amp;')
@@ -205,6 +227,7 @@
}
generateBtn.addEventListener('click', function () {
setStandardizePanelExpanded(true);
if (!partNoInput.value.trim() && !nameInput.value.trim()) {
status.textContent = '请先填写料号或名称';
return;