feat: 重构编辑页面，优化表单布局和样式，增强用户体验
This commit is contained in:
@@ -1212,6 +1212,35 @@ th {
|
|||||||
overflow: auto;
|
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 {
|
.ai-standardize-preview {
|
||||||
display: grid;
|
display: grid;
|
||||||
gap: var(--space-1);
|
gap: var(--space-1);
|
||||||
@@ -1332,6 +1361,20 @@ th {
|
|||||||
.entry-sidebar {
|
.entry-sidebar {
|
||||||
position: static;
|
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) {
|
@media (max-width: 760px) {
|
||||||
|
|||||||
@@ -30,8 +30,76 @@
|
|||||||
<p class="notice">当前为锁仓模式: 禁止删除位置绑定，禁止替换当前位置料号。</p>
|
<p class="notice">当前为锁仓模式: 禁止删除位置绑定，禁止替换当前位置料号。</p>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
<div class="entry-shell">
|
<div class="edit-stack">
|
||||||
<section class="entry-main">
|
<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">
|
<form class="panel form-grid" method="post">
|
||||||
<input type="hidden" name="q" value="{{ search_query or '' }}">
|
<input type="hidden" name="q" value="{{ search_query or '' }}">
|
||||||
<label>
|
<label>
|
||||||
@@ -81,85 +149,20 @@
|
|||||||
</form>
|
</form>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<aside class="entry-sidebar">
|
<section class="panel entry-guide edit-guide-panel">
|
||||||
<section class="panel quick-inbound-panel">
|
<h2>轻量入库规范</h2>
|
||||||
<h2>AI 标签与备注标准化</h2>
|
<p class="hint">先保证可检索，再补充关键参数，不追求一次填很全。</p>
|
||||||
<p class="hint">生成更适合标签打印的短名称，并自动补全统一搜索关键词。确认后再回填到表单。</p>
|
<ul class="guide-list">
|
||||||
<p class="hint" id="standardize-status" aria-live="polite"></p>
|
<li>必填: 料号(part_no) + 名称(name) + 数量(quantity)</li>
|
||||||
<section class="ai-standardize-preview" id="standardize-preview" hidden>
|
<li>建议: 规格(specification)写 2-4 个关键参数</li>
|
||||||
<div class="standardize-grid">
|
<li>备注(note): 来源编号或链接，如 LCSC item 9243</li>
|
||||||
<div>
|
</ul>
|
||||||
<strong>短标签</strong>
|
<pre class="guide-code">料号: STM32F103C8T6
|
||||||
<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
|
|
||||||
名称: MCU STM32F103C8T6
|
名称: MCU STM32F103C8T6
|
||||||
规格: Cortex-M3 / 64KB Flash / LQFP-48
|
规格: Cortex-M3 / 64KB Flash / LQFP-48
|
||||||
数量: 10
|
数量: 10
|
||||||
备注: LCSC item 9243</pre>
|
备注: LCSC item 9243</pre>
|
||||||
</section>
|
</section>
|
||||||
</aside>
|
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
<script>
|
<script>
|
||||||
@@ -168,6 +171,8 @@
|
|||||||
var nameInput = document.getElementById('name-input');
|
var nameInput = document.getElementById('name-input');
|
||||||
var specificationInput = document.getElementById('specification-input');
|
var specificationInput = document.getElementById('specification-input');
|
||||||
var noteInput = document.getElementById('note-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 generateBtn = document.getElementById('generate-standardization-btn');
|
||||||
var applyBtn = document.getElementById('apply-standardization-btn');
|
var applyBtn = document.getElementById('apply-standardization-btn');
|
||||||
var status = document.getElementById('standardize-status');
|
var status = document.getElementById('standardize-status');
|
||||||
@@ -183,6 +188,23 @@
|
|||||||
return;
|
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) {
|
function escapeHtml(text) {
|
||||||
return String(text || '')
|
return String(text || '')
|
||||||
.replace(/&/g, '&')
|
.replace(/&/g, '&')
|
||||||
@@ -205,6 +227,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
generateBtn.addEventListener('click', function () {
|
generateBtn.addEventListener('click', function () {
|
||||||
|
setStandardizePanelExpanded(true);
|
||||||
if (!partNoInput.value.trim() && !nameInput.value.trim()) {
|
if (!partNoInput.value.trim() && !nameInput.value.trim()) {
|
||||||
status.textContent = '请先填写料号或名称';
|
status.textContent = '请先填写料号或名称';
|
||||||
return;
|
return;
|
||||||
|
|||||||
Reference in New Issue
Block a user