优化发布页默认输入与在线时间校验

This commit is contained in:
yml2213
2026-06-08 07:12:26 +08:00
parent 04f42e5a96
commit ff2aa2df9d
6 changed files with 203 additions and 55 deletions
@@ -210,6 +210,14 @@
color: #fff;
}
.radio-btn.disabled,
.radio-btn:disabled {
border-color: #e5e7eb;
background: #f3f4f6;
color: #a8b0bd;
cursor: not-allowed;
}
.time-row,
.result-grid {
display: grid;
@@ -23,6 +23,8 @@ const {
quantityValues,
quantityModes,
selectedSkins,
disabledOnlineStartOptions,
disabledOnlineEndOptions,
serverOptions,
faceOptions,
rankOptions,
@@ -61,6 +63,14 @@ const {
isMultiScreenshotSlot,
canAddScreenshot,
getScreenshotLimitHint,
isAllDayOnline,
isOnlineStartPresetActive,
isOnlineEndPresetActive,
selectAllDayOnline,
selectOnlineStart,
selectOnlineEnd,
handleOnlineStartChange,
handleOnlineEndChange,
handleFireLevelInput,
handleAcceleratedSaleRatioInput,
useRecommendedDeposit,
@@ -100,31 +110,6 @@ function openPublishAgreement(agreement: AgreementContent) {
function selectRadio<T extends string>(value: T, setter: (value: T) => void) {
setter(value)
}
function isAllDayOnline() {
return form.online_start === '00:00' && form.online_end === '23:59'
}
function isOnlineStartPresetActive(value: string) {
return !isAllDayOnline() && form.online_start === value
}
function isOnlineEndPresetActive(value: string) {
return !isAllDayOnline() && form.online_end === value
}
function selectAllDayOnline() {
form.online_start = '00:00'
form.online_end = '23:59'
}
function selectOnlineStart(value: string) {
form.online_start = value
}
function selectOnlineEnd(value: string) {
form.online_end = value
}
</script>
<template>
@@ -373,6 +358,7 @@ function selectOnlineEnd(value: string) {
label="在线开始"
type="time"
class="publish-field time-field"
@update:model-value="handleOnlineStartChange"
/>
<div class="radio-group small time-preset-chips">
<button
@@ -388,7 +374,11 @@ function selectOnlineEnd(value: string) {
:key="`start-${opt}`"
type="button"
class="radio-btn"
:class="{ active: isOnlineStartPresetActive(opt) }"
:class="{
active: isOnlineStartPresetActive(opt),
disabled: disabledOnlineStartOptions.includes(opt),
}"
:disabled="disabledOnlineStartOptions.includes(opt)"
@click="selectOnlineStart(opt)"
>
{{ opt }}
@@ -401,6 +391,7 @@ function selectOnlineEnd(value: string) {
label="在线结束"
type="time"
class="publish-field time-field"
@update:model-value="handleOnlineEndChange"
/>
<div class="radio-group small time-preset-chips">
<button
@@ -416,7 +407,11 @@ function selectOnlineEnd(value: string) {
:key="`end-${opt}`"
type="button"
class="radio-btn"
:class="{ active: isOnlineEndPresetActive(opt) }"
:class="{
active: isOnlineEndPresetActive(opt),
disabled: disabledOnlineEndOptions.includes(opt),
}"
:disabled="disabledOnlineEndOptions.includes(opt)"
@click="selectOnlineEnd(opt)"
>
{{ opt }}
@@ -32,6 +32,8 @@ const {
selectedSkins,
uploadedScreenshotCount,
requiredScreenshotCount,
disabledOnlineStartOptions,
disabledOnlineEndOptions,
serverOptions,
faceOptions,
rankOptions,
@@ -74,6 +76,12 @@ const {
isMultiScreenshotSlot,
canAddScreenshot,
getScreenshotLimitHint,
isAllDayOnline,
selectAllDayOnline,
selectOnlineStart,
selectOnlineEnd,
handleOnlineStartChange,
handleOnlineEndChange,
handleFireLevelInput,
handleAcceleratedSaleRatioInput,
useRecommendedDeposit,
@@ -116,23 +124,6 @@ function openPublishAgreement(agreement: AgreementContent) {
function selectDailyLoss(value: string | number) {
form.daily_loss_m = Number(value)
}
function isAllDayOnline() {
return form.online_start === '00:00' && form.online_end === '23:59'
}
function selectAllDayOnline() {
form.online_start = '00:00'
form.online_end = '23:59'
}
function selectOnlineStart(value: string | number) {
form.online_start = String(value)
}
function selectOnlineEnd(value: string | number) {
form.online_end = String(value)
}
</script>
<template>
@@ -161,29 +152,32 @@ function selectOnlineEnd(value: string | number) {
<div class="compact-grid panel-input-grid">
<label class="input-block">
<span>哈夫币/M<b>*</b></span>
<el-input-number
<el-input
v-model="form.haf_coin_amount"
:min="0"
:controls="false"
type="number"
inputmode="decimal"
min="0"
placeholder="100M 写 100"
/>
</label>
<label class="input-block">
<span>绝密KD</span>
<el-input-number
<el-input
v-model="form.secret_kd"
:min="0"
:controls="false"
:step="0.1"
type="number"
inputmode="decimal"
min="0"
step="0.1"
placeholder="填写绝密KD"
/>
</label>
<label class="input-block">
<span>烽火等级<b>*</b></span>
<el-input-number
<el-input
:model-value="form.fire_level"
:min="0"
:controls="false"
type="number"
inputmode="numeric"
min="0"
:placeholder="fireLevelPlaceholder"
@update:model-value="handleFireLevelInput"
/>
@@ -335,6 +329,7 @@ function selectOnlineEnd(value: string | number) {
format="HH:mm"
placeholder="开始时间"
class="time-input"
@change="handleOnlineStartChange"
/>
<div class="time-preset-actions">
<button
@@ -348,6 +343,7 @@ function selectOnlineEnd(value: string | number) {
<OptionChips
:options="commonOnlineTimes"
:model-value="isAllDayOnline() ? '' : form.online_start"
:disabled-values="disabledOnlineStartOptions"
key-prefix="start-"
@select="selectOnlineStart"
/>
@@ -363,6 +359,7 @@ function selectOnlineEnd(value: string | number) {
format="HH:mm"
placeholder="结束时间"
class="time-input"
@change="handleOnlineEndChange"
/>
<div class="time-preset-actions">
<button
@@ -376,6 +373,7 @@ function selectOnlineEnd(value: string | number) {
<OptionChips
:options="commonOnlineTimes"
:model-value="isAllDayOnline() ? '' : form.online_end"
:disabled-values="disabledOnlineEndOptions"
key-prefix="end-"
@select="selectOnlineEnd"
/>
@@ -4,6 +4,7 @@ const props = withDefaults(
options: Array<string | number>
modelValue?: string | number
activeValues?: Array<string | number>
disabledValues?: Array<string | number>
keyPrefix?: string
compact?: boolean
suffix?: string
@@ -11,6 +12,7 @@ const props = withDefaults(
{
modelValue: undefined,
activeValues: () => [],
disabledValues: () => [],
keyPrefix: '',
compact: false,
suffix: '',
@@ -26,7 +28,12 @@ function isActive(value: string | number) {
return props.activeValues.includes(value) || props.modelValue === value
}
function isDisabled(value: string | number) {
return props.disabledValues.includes(value)
}
function selectValue(value: string | number) {
if (isDisabled(value)) return
emit('update:modelValue', value)
emit('select', value)
}
@@ -39,7 +46,8 @@ function selectValue(value: string | number) {
:key="`${keyPrefix}${option}`"
type="button"
class="chip"
:class="{ active: isActive(option) }"
:class="{ active: isActive(option), disabled: isDisabled(option) }"
:disabled="isDisabled(option)"
@click="selectValue(option)"
>
{{ option }}{{ suffix }}
@@ -81,4 +89,11 @@ function selectValue(value: string | number) {
background: #ff6a00;
color: #fff;
}
.chip.disabled {
border-color: #e5e7eb;
background: #f3f4f6;
color: #a8b0bd;
cursor: not-allowed;
}
</style>