优化了部分ui
This commit is contained in:
yml
@@ -912,80 +912,104 @@ onMounted(loadConfigs)
|
||||
<span>核销店铺：{{ getConsumeShopSummary(item) }}</span>
|
||||
</div>
|
||||
|
||||
<div v-else class="binding-grid">
|
||||
<label class="field-block">
|
||||
<span>内部 SKU</span>
|
||||
<input v-model="item.internalSkuCode" class="text-input" maxlength="80" placeholder="必填，用于生成任务" />
|
||||
</label>
|
||||
<label class="field-block field-wide">
|
||||
<span>内部商品名</span>
|
||||
<input v-model="item.internalSkuName" class="text-input" maxlength="120" placeholder="展示用，可选但建议填" />
|
||||
</label>
|
||||
<label class="field-block">
|
||||
<span>优先级</span>
|
||||
<input v-model.number="item.priority" class="text-input" min="1" type="number" />
|
||||
</label>
|
||||
<label class="field-block">
|
||||
<span>来源 provider</span>
|
||||
<input v-model="item.provider" class="text-input" maxlength="32" placeholder="默认 khhao" />
|
||||
</label>
|
||||
<label class="field-block">
|
||||
<span>来源 platform</span>
|
||||
<input v-model="item.platform" class="text-input" maxlength="32" placeholder="默认 kuaishou" />
|
||||
</label>
|
||||
<label class="field-block">
|
||||
<span>店铺 ID</span>
|
||||
<input v-model="item.shopId" class="text-input" maxlength="80" placeholder="留空表示跨店铺共用" />
|
||||
</label>
|
||||
<label class="field-block field-wide">
|
||||
<span>解析商品名</span>
|
||||
<input v-model="item.resolvedSkuName" class="text-input" maxlength="120" placeholder="可作为商品名兜底" />
|
||||
</label>
|
||||
<div v-else class="mapping-editor">
|
||||
<section class="mapping-panel mapping-panel--external">
|
||||
<div class="mapping-panel-head">
|
||||
<strong>外部商品</strong>
|
||||
<span>khhao / 快手侧命中条件</span>
|
||||
</div>
|
||||
|
||||
<label class="field-block">
|
||||
<span>外部 SKU</span>
|
||||
<input v-model="item.externalSkuCode" class="text-input" maxlength="120" placeholder="例如 khhao 的 skuCode" />
|
||||
</label>
|
||||
<label class="field-block">
|
||||
<span>外部商品 ID</span>
|
||||
<input v-model="item.externalItemId" class="text-input" maxlength="120" placeholder="平台商品 ID" />
|
||||
</label>
|
||||
<label class="field-block field-wide">
|
||||
<span>外部商品名</span>
|
||||
<input v-model="item.externalSkuName" class="text-input" maxlength="200" placeholder="用于名称匹配" />
|
||||
</label>
|
||||
<div class="mapping-grid">
|
||||
<label class="field-block">
|
||||
<span>来源 provider</span>
|
||||
<input v-model="item.provider" class="text-input" maxlength="32" placeholder="默认 khhao" />
|
||||
</label>
|
||||
<label class="field-block">
|
||||
<span>来源 platform</span>
|
||||
<input v-model="item.platform" class="text-input" maxlength="32" placeholder="默认 kuaishou" />
|
||||
</label>
|
||||
<label class="field-block field-wide">
|
||||
<span>店铺 ID</span>
|
||||
<input v-model="item.shopId" class="text-input" maxlength="80" placeholder="留空表示跨店铺共用" />
|
||||
</label>
|
||||
<label class="field-block">
|
||||
<span>外部 SKU</span>
|
||||
<input v-model="item.externalSkuCode" class="text-input" maxlength="120" placeholder="例如 khhao 的 skuCode" />
|
||||
</label>
|
||||
<label class="field-block">
|
||||
<span>外部商品 ID</span>
|
||||
<input v-model="item.externalItemId" class="text-input" maxlength="120" placeholder="平台商品 ID" />
|
||||
</label>
|
||||
<label class="field-block field-wide">
|
||||
<span>外部商品名</span>
|
||||
<input v-model="item.externalSkuName" class="text-input" maxlength="200" placeholder="用于名称匹配" />
|
||||
</label>
|
||||
<label class="field-block field-wide">
|
||||
<span>解析商品名</span>
|
||||
<input v-model="item.resolvedSkuName" class="text-input" maxlength="120" placeholder="可作为商品名兜底" />
|
||||
</label>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<label class="field-block">
|
||||
<span>cloudSourceKey</span>
|
||||
<input v-model="item.cloudSourceKey" class="text-input" maxlength="60" placeholder="默认 default" />
|
||||
</label>
|
||||
<label class="field-block">
|
||||
<span>cloud SKU ID</span>
|
||||
<select
|
||||
v-model.number="item.cloudSkuId"
|
||||
class="text-input"
|
||||
@change="handleCloudSkuSelected(item, item.cloudSkuId)"
|
||||
@focus="handleCloudSkuDropdownVisible(item, true)"
|
||||
>
|
||||
<option :value="0">请选择 cloud SKU</option>
|
||||
<option v-for="sku in getCloudSkuOptions(item)" :key="sku.id" :value="sku.id">
|
||||
{{ formatCloudSkuOptionLabel(sku) }}
|
||||
</option>
|
||||
</select>
|
||||
<small class="field-help">先填内部 SKU / 商品名，再选择会更容易匹配。</small>
|
||||
</label>
|
||||
<label class="field-block field-wide">
|
||||
<span>cloud SKU 名称</span>
|
||||
<input :value="item.cloudSkuName" class="text-input text-input--readonly" placeholder="选择 cloud SKU 后自动带出" readonly />
|
||||
</label>
|
||||
<label class="field-block">
|
||||
<span>虚拟号 VN Key</span>
|
||||
<input class="text-input text-input--readonly" value="1" readonly />
|
||||
</label>
|
||||
<label class="field-block">
|
||||
<span>最低保留余额</span>
|
||||
<input v-model.number="item.minAssetReserve" class="text-input" min="0" type="number" />
|
||||
</label>
|
||||
<div class="mapping-arrow" aria-hidden="true">
|
||||
<span>映射到</span>
|
||||
</div>
|
||||
|
||||
<section class="mapping-panel mapping-panel--internal">
|
||||
<div class="mapping-panel-head">
|
||||
<strong>内部履约</strong>
|
||||
<span>内部 SKU + cloud 资源</span>
|
||||
</div>
|
||||
|
||||
<div class="mapping-grid">
|
||||
<label class="field-block">
|
||||
<span>内部 SKU</span>
|
||||
<input v-model="item.internalSkuCode" class="text-input" maxlength="80" placeholder="必填，用于生成任务" />
|
||||
</label>
|
||||
<label class="field-block">
|
||||
<span>优先级</span>
|
||||
<input v-model.number="item.priority" class="text-input" min="1" type="number" />
|
||||
</label>
|
||||
<label class="field-block field-wide">
|
||||
<span>内部商品名</span>
|
||||
<input v-model="item.internalSkuName" class="text-input" maxlength="120" placeholder="展示用，可选但建议填" />
|
||||
</label>
|
||||
<label class="field-block">
|
||||
<span>cloudSourceKey</span>
|
||||
<input v-model="item.cloudSourceKey" class="text-input" maxlength="60" placeholder="默认 default" />
|
||||
</label>
|
||||
<label class="field-block">
|
||||
<span>cloud SKU ID</span>
|
||||
<select
|
||||
v-model.number="item.cloudSkuId"
|
||||
class="text-input"
|
||||
@change="handleCloudSkuSelected(item, item.cloudSkuId)"
|
||||
@focus="handleCloudSkuDropdownVisible(item, true)"
|
||||
>
|
||||
<option :value="0">请选择 cloud SKU</option>
|
||||
<option v-for="sku in getCloudSkuOptions(item)" :key="sku.id" :value="sku.id">
|
||||
{{ formatCloudSkuOptionLabel(sku) }}
|
||||
</option>
|
||||
</select>
|
||||
<small class="field-help">先填内部 SKU / 商品名，再选择会更容易匹配。</small>
|
||||
</label>
|
||||
<label class="field-block field-wide">
|
||||
<span>cloud SKU 名称</span>
|
||||
<input :value="item.cloudSkuName" class="text-input text-input--readonly" placeholder="选择 cloud SKU 后自动带出" readonly />
|
||||
</label>
|
||||
<label class="field-block">
|
||||
<span>虚拟号 VN Key</span>
|
||||
<input class="text-input text-input--readonly" value="1" readonly />
|
||||
</label>
|
||||
<label class="field-block">
|
||||
<span>最低保留余额</span>
|
||||
<input v-model.number="item.minAssetReserve" class="text-input" min="0" type="number" />
|
||||
</label>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div v-if="!isCollapsed(item.localId)" class="mapping-extra">
|
||||
<label class="field-block">
|
||||
<span>快手核销店铺 ID</span>
|
||||
<input v-model="item.kuaishouConsumeShopId" class="text-input" maxlength="80" placeholder="预留给后续自动核销" />
|
||||
@@ -2040,6 +2064,81 @@ onMounted(loadConfigs)
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.mapping-editor {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) 74px minmax(0, 1fr);
|
||||
gap: 12px;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.mapping-panel {
|
||||
display: grid;
|
||||
align-content: start;
|
||||
gap: 12px;
|
||||
padding: 14px;
|
||||
border-radius: 16px;
|
||||
border: 1px solid rgba(148, 163, 184, 0.18);
|
||||
}
|
||||
|
||||
.mapping-panel--external {
|
||||
background: rgba(239, 246, 255, 0.72);
|
||||
}
|
||||
|
||||
.mapping-panel--internal {
|
||||
background: rgba(255, 255, 255, 0.86);
|
||||
border-color: rgba(15, 93, 216, 0.16);
|
||||
}
|
||||
|
||||
.mapping-panel-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.mapping-panel-head strong {
|
||||
color: #1d3555;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.mapping-panel-head span {
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.mapping-grid,
|
||||
.mapping-extra {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 10px 12px;
|
||||
}
|
||||
|
||||
.mapping-arrow {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: #175cd3;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.mapping-arrow span {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 30px;
|
||||
min-width: 54px;
|
||||
padding: 0 10px;
|
||||
border-radius: 999px;
|
||||
background: rgba(15, 93, 216, 0.08);
|
||||
border: 1px solid rgba(15, 93, 216, 0.14);
|
||||
}
|
||||
|
||||
.mapping-extra {
|
||||
margin-top: 12px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px dashed rgba(86, 108, 138, 0.18);
|
||||
}
|
||||
|
||||
.checkbox-line {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
@@ -2068,10 +2167,15 @@ onMounted(loadConfigs)
|
||||
@media (max-width: 1100px) {
|
||||
.overview-stats,
|
||||
.khhao-toolbar,
|
||||
.binding-grid {
|
||||
.binding-grid,
|
||||
.mapping-editor {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.mapping-arrow {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.field-wide {
|
||||
grid-column: span 2;
|
||||
}
|
||||
@@ -2089,7 +2193,10 @@ onMounted(loadConfigs)
|
||||
|
||||
.overview-stats,
|
||||
.khhao-toolbar,
|
||||
.binding-grid {
|
||||
.binding-grid,
|
||||
.mapping-editor,
|
||||
.mapping-grid,
|
||||
.mapping-extra {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user