ui(product): use 2-column grid layout for formula/live-price and visibility/TV formula
- Pricing tab: formula section and live price preview side by side in 2-col grid - Specs tab: visibility switches and TV formula side by side in 2-col grid - Reduces wasted horizontal space Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Cursor
@@ -222,48 +222,52 @@
|
||||
|
||||
</div>
|
||||
|
||||
<FormulaPriceSection
|
||||
:model-value="form"
|
||||
:reference-middle-price="formulaReferenceMiddlePrice"
|
||||
:product-amount="Number(form.amount) || 0"
|
||||
@update:model-value="onFormulaFormPatch"
|
||||
@enabled-change="onFormulaEnabledChange"
|
||||
/>
|
||||
<div class="grid gap-4 md:grid-cols-2">
|
||||
<FormulaPriceSection
|
||||
:model-value="form"
|
||||
:reference-middle-price="formulaReferenceMiddlePrice"
|
||||
:product-amount="Number(form.amount) || 0"
|
||||
@update:model-value="onFormulaFormPatch"
|
||||
@enabled-change="onFormulaEnabledChange"
|
||||
/>
|
||||
|
||||
<div class="live-price-preview rounded-lg border border-solid px-3 py-2">
|
||||
<div class="flex flex-col gap-2 md:flex-row md:items-center md:justify-between md:gap-3">
|
||||
<div class="flex flex-wrap items-center gap-x-3 gap-y-1 md:min-w-0 md:flex-1">
|
||||
<DashboardLabelWithHelp
|
||||
label="قیمت لحظهای"
|
||||
:help="livePriceHelp"
|
||||
size="sm"
|
||||
text-class="live-price-preview__label"
|
||||
/>
|
||||
<span
|
||||
v-if="livePricePreview.status === 'ready'"
|
||||
class="live-price-preview__amount text-base font-700"
|
||||
>
|
||||
{{ usePrice(livePricePreview.amount) }}
|
||||
</span>
|
||||
<span
|
||||
v-else-if="livePricePreview.message"
|
||||
class="live-price-preview__message text-sm"
|
||||
>
|
||||
{{ livePricePreview.message }}
|
||||
</span>
|
||||
<span
|
||||
v-if="livePricePreview.status === 'ready'"
|
||||
class="live-price-preview__source truncate text-xs"
|
||||
>
|
||||
مبنا: {{ livePricePreview.source }}
|
||||
<span v-if="!form.price_formula_enabled && Number(form.price_offset_percent) !== 0">
|
||||
— تعدیل {{ form.price_offset_percent }}٪
|
||||
<div class="live-price-preview rounded-lg border border-solid px-3 py-2 self-start">
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="flex flex-wrap items-center gap-x-3 gap-y-1">
|
||||
<DashboardLabelWithHelp
|
||||
label="قیمت لحظهای"
|
||||
:help="livePriceHelp"
|
||||
size="sm"
|
||||
text-class="live-price-preview__label"
|
||||
/>
|
||||
<span
|
||||
v-if="livePricePreview.status === 'ready'"
|
||||
class="live-price-preview__amount text-base font-700"
|
||||
>
|
||||
{{ usePrice(livePricePreview.amount) }}
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
v-else-if="livePricePreview.message"
|
||||
class="live-price-preview__message text-sm"
|
||||
>
|
||||
{{ livePricePreview.message }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between gap-2">
|
||||
<span
|
||||
v-if="livePricePreview.status === 'ready'"
|
||||
class="live-price-preview__source truncate text-xs"
|
||||
>
|
||||
مبنا: {{ livePricePreview.source }}
|
||||
<span v-if="!form.price_formula_enabled && Number(form.price_offset_percent) !== 0">
|
||||
— تعدیل {{ form.price_offset_percent }}٪
|
||||
</span>
|
||||
</span>
|
||||
<AButton size="small" class="shrink-0" @click="$emit('refreshPrices')">
|
||||
بروزرسانی
|
||||
</AButton>
|
||||
</div>
|
||||
</div>
|
||||
<AButton size="small" class="shrink-0 self-end md:self-auto" @click="$emit('refreshPrices')">
|
||||
بروزرسانی
|
||||
</AButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -398,27 +402,29 @@
|
||||
<!-- نمایش -->
|
||||
<div class="product-section">
|
||||
<div class="product-section__title">تنظیمات نمایش</div>
|
||||
<div class="product-visibility-panel">
|
||||
<div class="product-visibility-row">
|
||||
<span class="text-sm">نمایش در لیست محصولات</span>
|
||||
<a-switch v-model:checked="form.show_in_list" />
|
||||
</div>
|
||||
<div class="product-visibility-row">
|
||||
<span class="text-sm">نمایش در داراییها</span>
|
||||
<a-switch v-model:checked="form.show_in_assets" />
|
||||
</div>
|
||||
<div class="product-visibility-row">
|
||||
<span class="text-sm">نمایش در تابلو TV</span>
|
||||
<a-switch v-model:checked="form.show_on_tv" />
|
||||
<div class="grid gap-4 md:grid-cols-2">
|
||||
<div class="product-visibility-panel">
|
||||
<div class="product-visibility-row">
|
||||
<span class="text-sm">نمایش در لیست محصولات</span>
|
||||
<a-switch v-model:checked="form.show_in_list" />
|
||||
</div>
|
||||
<div class="product-visibility-row">
|
||||
<span class="text-sm">نمایش در داراییها</span>
|
||||
<a-switch v-model:checked="form.show_in_assets" />
|
||||
</div>
|
||||
<div class="product-visibility-row">
|
||||
<span class="text-sm">نمایش در تابلو TV</span>
|
||||
<a-switch v-model:checked="form.show_on_tv" />
|
||||
</div>
|
||||
</div>
|
||||
<TvFormulaPriceSection
|
||||
v-if="form.show_on_tv"
|
||||
:model-value="form"
|
||||
:reference-middle-price="formulaReferenceMiddlePrice"
|
||||
:product-amount="Number(form.amount) || 0"
|
||||
@update:model-value="onTvFormulaFormPatch"
|
||||
/>
|
||||
</div>
|
||||
<TvFormulaPriceSection
|
||||
v-if="form.show_on_tv"
|
||||
:model-value="form"
|
||||
:reference-middle-price="formulaReferenceMiddlePrice"
|
||||
:product-amount="Number(form.amount) || 0"
|
||||
@update:model-value="onTvFormulaFormPatch"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</a-tab-pane>
|
||||
|
||||
Reference in New Issue
Block a user