yml/hfb_sys
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 优化卖家发布页面消耗品表格响应式布局、补充输入框与比例选择圆角并统一橙色主题

Browse Source
This commit is contained in:
yml
2026-05-25 03:03:46 +08:00
parent bc04b43db6
commit 433b6a4152
4 changed files with 186 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/composables/usePublishForm.ts
+23
View File
@@ -120,6 +120,13 @@ export function usePublishForm(options: UsePublishFormOptions) {
])
publishOptions.value = nextPublishOptions
salePriceConfig.value = nextSalePriceConfig
// 默认数字都是0
for (const item of nextPublishOptions.quantity_items) {
if (quantityValues[item.key] === undefined) {
quantityValues[item.key] = 0
}
}
} catch {
publishOptions.value = emptyListingPublishOptions
salePriceConfig.value = emptyListingSalePriceConfig
@@ -198,6 +205,11 @@ export function usePublishForm(options: UsePublishFormOptions) {
revokeAllScreenshotPreviews()
selectedSkins.value = []
activeUploadKey.value = 'coin'
// Also re-initialize quantityValues to 0
for (const item of publishOptions.value.quantity_items) {
quantityValues[item.key] = 0
}
}
async function handleResetDraft() {
@@ -427,6 +439,17 @@ export function usePublishForm(options: UsePublishFormOptions) {
for (const item of pricing.screenshotSlots.value) {
if (isScreenshotRequired(item) && !screenshotFiles[item.key]) return `请上传${item.label}`
}
for (const item of pricing.quantityItems.value) {
if (!pricing.isQuantityItemDisabled(item)) {
const val = quantityValues[item.key]
if (val === undefined || val === null || (val as unknown) === '') {
return `请填写${item.label}的数量`
}
if (Number(val) < 0) {
return `${item.label}的数量不能为负数`
}
}
}
for (const item of pricing.quantityItems.value) {
if (pricing.isQuantityItemDisabled(item) && Number(quantityValues[item.key] || 0) > 0) {
return '赛季保险选择 3*3 时不能填写 9格体验卡'
frontend/src/views/seller/SellerListingCreateView.css
+141 -26
View File
@@ -13,6 +13,23 @@
min-width: 0;
color: var(--color-text-dark);
:deep(.el-input__wrapper),
:deep(.el-textarea__inner) {
border-radius: var(--radius-8);
box-shadow: 0 0 0 1px var(--color-border) inset;
transition: all 0.2s ease;
}
:deep(.el-input__wrapper:hover),
:deep(.el-textarea__inner:hover) {
box-shadow: 0 0 0 1px var(--color-orange-primary) inset !important;
}
:deep(.el-input__wrapper.is-focus),
:deep(.el-textarea__inner:focus) {
box-shadow: 0 0 0 1px var(--color-orange-primary) inset, 0 0 8px rgba(255, 106, 0, 0.15) !important;
}
}
.publish-layout {
@@ -52,7 +69,19 @@
}
.panel-input-grid {
align-items: end;
align-items: center;
& .input-block {
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 10px;
}
/* 输入框不需要太长，限制最大宽度 */
& :deep(.el-input-number),
& :deep(.el-input) {
max-width: 140px;
}
}
.summary-panel {
@@ -101,8 +130,8 @@
.level-btn,
.region-btn {
&.active {
border-color: #1477ff;
background: #1477ff;
border-color: var(--color-orange-primary);
background: var(--color-orange-primary);
color: #fff;
}
}
@@ -127,6 +156,10 @@
&.two {
grid-template-columns: repeat(2, minmax(0, 1fr));
padding: 14px 16px;
border-radius: var(--radius-8);
background: var(--color-bg-gray);
gap: 16px;
}
@media (max-width: 860px) {
@@ -144,6 +177,7 @@
font-size: 13px;
font-weight: 800;
line-height: 22px;
white-space: nowrap;
}
& b {
@@ -155,12 +189,6 @@
:deep(.el-date-editor) {
width: 100%;
}
:deep(.el-input__wrapper),
:deep(.el-textarea__inner) {
border-radius: var(--radius-8);
box-shadow: 0 0 0 1px var(--color-border) inset;
}
}
.level-panel {
@@ -216,8 +244,8 @@
.quantity-header,
.quantity-item {
display: grid;
grid-template-columns: minmax(160px, 1fr) 90px 112px 112px 92px;
gap: 12px;
grid-template-columns: minmax(180px, 3fr) minmax(80px, 1fr) minmax(100px, 1.2fr) minmax(140px, 1.5fr) minmax(80px, 1fr);
gap: 10px;
align-items: center;
@media (max-width: 860px) {
@@ -235,6 +263,11 @@
@media (max-width: 860px) {
display: none;
}
& b {
color: var(--color-danger);
margin-left: 2px;
}
}
.quantity-item {
@@ -244,9 +277,11 @@
opacity: 0.62;
}
:deep(.el-input-number) {
width: 100%;
min-width: 0;
/* 强制 el-input-number 所在的 Grid 单元格裁剪溢出 */
& > :deep(.el-input-number) {
width: 100% !important;
min-width: 0 !important;
overflow: hidden;
}
}
@@ -260,6 +295,11 @@
font-size: 13px;
text-overflow: ellipsis;
white-space: nowrap;
& span {
color: var(--color-danger);
margin-right: 2px;
}
}
& small {
@@ -280,7 +320,7 @@
.mode-toggle {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
gap: 4px;
min-width: 0;
& button {
@@ -289,6 +329,7 @@
border-radius: var(--radius-8);
font-size: 12px;
white-space: nowrap;
padding: 0 6px;
&:disabled {
cursor: not-allowed;
@@ -313,16 +354,30 @@
font-size: 12px;
font-weight: 800;
cursor: pointer;
transition: all 0.2s ease;
&:hover {
background: #ffe3cd;
border-color: var(--color-orange-primary);
}
}
.deposit-control {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
display: flex;
gap: 8px;
align-items: center;
& :deep(.el-input-number) {
width: 140px !important;
flex: 0 0 140px;
}
@media (max-width: 860px) {
grid-template-columns: 1fr;
width: 100%;
& :deep(.el-input-number) {
width: 100% !important;
flex: 1;
}
}
}
@@ -407,11 +462,6 @@
@media (max-width: 860px) {
width: 140px;
}
& :deep(.el-input__wrapper) {
border-radius: var(--radius-8);
box-shadow: 0 0 0 1px var(--color-border) inset;
}
}
.login-region-panel {
@@ -564,10 +614,9 @@
}
}
.ratio-mode-grid,
.price-grid {
.ratio-mode-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
@media (max-width: 860px) {
@@ -575,12 +624,50 @@
}
}
.ratio-custom-card {
display: flex;
flex-direction: column;
justify-content: center;
gap: 6px;
min-height: 72px;
padding: 10px 12px;
border: 1px solid #d6dce5;
border-radius: var(--radius-8);
background: #fff;
transition: all 0.16s ease;
& strong {
color: #596474;
font-size: 13px;
font-weight: 800;
}
& :deep(.el-input-number) {
width: 100% !important;
}
& :deep(.el-input__wrapper) {
background-color: #fff !important;
}
&.active {
border-color: var(--color-orange-primary);
background: var(--color-bg-orange);
color: var(--color-orange-primary);
& strong {
color: var(--color-orange-primary);
}
}
}
.ratio-mode-btn {
display: grid;
gap: 6px;
min-height: 72px;
padding: 12px;
text-align: left;
border-radius: var(--radius-8);
& span {
color: var(--color-text-sub);
@@ -600,8 +687,14 @@
}
.price-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
margin-top: 14px;
@media (max-width: 860px) {
grid-template-columns: 1fr;
}
}
.price-cell {
@@ -609,6 +702,13 @@
gap: 6px;
min-height: 82px;
padding: 14px;
border-left: 4px solid #ccd5e0;
transition: all 0.2s ease;
&:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}
& span {
color: #6f7a89;
@@ -625,6 +725,7 @@
&.accent {
background: var(--color-bg-orange);
border-left-color: var(--color-orange-primary);
}
}
@@ -703,5 +804,19 @@
& :deep(.el-button) {
width: 100%;
margin-left: 0;
border-radius: var(--radius-8);
}
& :deep(.el-button.btn-publish) {
background-color: var(--color-orange-primary);
border-color: var(--color-orange-primary);
color: #fff;
font-weight: 800;
transition: all 0.2s ease;
&:hover {
background-color: var(--color-orange-dark);
border-color: var(--color-orange-dark);
}
}
}
frontend/src/views/seller/SellerListingCreateView.vue
+20 -17
View File
@@ -115,7 +115,7 @@ function selectDailyLoss(value: string | number) {
</label>
<label class="input-block">
<span>绝密KD</span>
<el-input v-model="form.secret_kd" type="number" placeholder="填写绝密KD" />
<el-input-number v-model="form.secret_kd" :min="0" :controls="false" :step="0.1" placeholder="填写绝密KD" />
</label>
<label class="input-block">
<span>烽火等级<b>*</b></span>
@@ -182,7 +182,7 @@ function selectDailyLoss(value: string | number) {
<div class="quantity-header">
<span>物资</span>
<span>单价</span>
<span>数量</span>
<span>数量<b>*</b></span>
<span>计费</span>
<span>状态</span>
</div>
@@ -193,7 +193,7 @@ function selectDailyLoss(value: string | number) {
:class="{ disabled: isQuantityItemDisabled(item) }"
>
<div class="quantity-meta">
<strong :title="item.placeholder || item.label">{{ item.label }}</strong>
<strong :title="item.placeholder || item.label"><span>*</span>{{ item.label }}</strong>
<small v-if="item.placeholder">{{ item.placeholder }}</small>
</div>
<span class="quantity-price">{{ item.price }}</span>
@@ -398,25 +398,28 @@ function selectDailyLoss(value: string | number) {
<button
type="button"
class="ratio-mode-btn"
:class="{ active: hasAcceleratedSaleRatioInput() }"
:class="{ active: form.accelerated_sale_ratio === maxAcceleratedSaleRatio && maxAcceleratedSaleRatio > 0 }"
:disabled="maxAcceleratedSaleRatio <= 0"
@click="useMaxAcceleratedSaleRatio"
>
<strong>加速比例</strong>
<strong>最高比例 (加速)</strong>
<span>{{ maxAcceleratedSaleRatio > 0 ? `最高 1元=${formatNumber(maxAcceleratedSaleRatio)}万` : '自动计算' }}</span>
</button>
<div
class="ratio-custom-card"
:class="{ active: hasAcceleratedSaleRatioInput() && form.accelerated_sale_ratio !== maxAcceleratedSaleRatio }"
>
<strong>自定比例</strong>
<el-input-number
:model-value="form.accelerated_sale_ratio"
:min="0"
:controls="false"
:placeholder="acceleratedSaleRatioPlaceholder"
@update:model-value="handleAcceleratedSaleRatioInput"
@blur="clampAcceleratedSaleRatioInput"
/>
</div>
</div>
<label class="input-block">
<span>自定比例</span>
<el-input-number
:model-value="form.accelerated_sale_ratio"
:min="0"
:controls="false"
:placeholder="acceleratedSaleRatioPlaceholder"
@update:model-value="handleAcceleratedSaleRatioInput"
@blur="clampAcceleratedSaleRatioInput"
/>
</label>
</div>
<div class="price-grid">
@@ -479,7 +482,7 @@ function selectDailyLoss(value: string | number) {
</div>
</div>
<div class="summary-actions">
<el-button :icon="UploadFilled" type="primary" :loading="loading" @click="handleSubmit">保存发布</el-button>
<el-button :icon="UploadFilled" class="btn-publish" type="primary" :loading="loading" @click="handleSubmit">立即发布</el-button>
<el-button :icon="DocumentChecked" :disabled="loading" @click="handleSaveDraft">保存草稿</el-button>
<el-button :icon="RefreshRight" :disabled="loading" @click="handleResetDraft">重置草稿</el-button>
</div>
frontend/src/views/seller/components/OptionChips.vue
+2 -2
View File
@@ -75,8 +75,8 @@ function selectValue(value: ChipValue) {
}
.chip.active {
border-color: #1477ff;
background: #1477ff;
border-color: #ff6a00;
background: #ff6a00;
color: #fff;
}
</style>