feat: 重构编辑页面，优化表单布局和样式，增强用户体验
This commit is contained in:
@@ -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) {
|
||||
|
||||
@@ -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,71 +149,7 @@
|
||||
</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">
|
||||
<section class="panel entry-guide edit-guide-panel">
|
||||
<h2>轻量入库规范</h2>
|
||||
<p class="hint">先保证可检索，再补充关键参数，不追求一次填很全。</p>
|
||||
<ul class="guide-list">
|
||||
@@ -159,7 +163,6 @@
|
||||
数量: 10
|
||||
备注: LCSC item 9243</pre>
|
||||
</section>
|
||||
</aside>
|
||||
</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, '&')
|
||||
@@ -205,6 +227,7 @@
|
||||
}
|
||||
|
||||
generateBtn.addEventListener('click', function () {
|
||||
setStandardizePanelExpanded(true);
|
||||
if (!partNoInput.value.trim() && !nameInput.value.trim()) {
|
||||
status.textContent = '请先填写料号或名称';
|
||||
return;
|
||||
|
||||
Reference in New Issue
Block a user