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>
|
</div>
|
||||||
|
|
||||||
<FormulaPriceSection
|
<div class="grid gap-4 md:grid-cols-2">
|
||||||
:model-value="form"
|
<FormulaPriceSection
|
||||||
:reference-middle-price="formulaReferenceMiddlePrice"
|
:model-value="form"
|
||||||
:product-amount="Number(form.amount) || 0"
|
:reference-middle-price="formulaReferenceMiddlePrice"
|
||||||
@update:model-value="onFormulaFormPatch"
|
:product-amount="Number(form.amount) || 0"
|
||||||
@enabled-change="onFormulaEnabledChange"
|
@update:model-value="onFormulaFormPatch"
|
||||||
/>
|
@enabled-change="onFormulaEnabledChange"
|
||||||
|
/>
|
||||||
|
|
||||||
<div class="live-price-preview rounded-lg border border-solid px-3 py-2">
|
<div class="live-price-preview rounded-lg border border-solid px-3 py-2 self-start">
|
||||||
<div class="flex flex-col gap-2 md:flex-row md:items-center md:justify-between md:gap-3">
|
<div class="flex flex-col gap-2">
|
||||||
<div class="flex flex-wrap items-center gap-x-3 gap-y-1 md:min-w-0 md:flex-1">
|
<div class="flex flex-wrap items-center gap-x-3 gap-y-1">
|
||||||
<DashboardLabelWithHelp
|
<DashboardLabelWithHelp
|
||||||
label="قیمت لحظهای"
|
label="قیمت لحظهای"
|
||||||
:help="livePriceHelp"
|
:help="livePriceHelp"
|
||||||
size="sm"
|
size="sm"
|
||||||
text-class="live-price-preview__label"
|
text-class="live-price-preview__label"
|
||||||
/>
|
/>
|
||||||
<span
|
<span
|
||||||
v-if="livePricePreview.status === 'ready'"
|
v-if="livePricePreview.status === 'ready'"
|
||||||
class="live-price-preview__amount text-base font-700"
|
class="live-price-preview__amount text-base font-700"
|
||||||
>
|
>
|
||||||
{{ usePrice(livePricePreview.amount) }}
|
{{ 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 }}٪
|
|
||||||
</span>
|
</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>
|
</div>
|
||||||
<AButton size="small" class="shrink-0 self-end md:self-auto" @click="$emit('refreshPrices')">
|
|
||||||
بروزرسانی
|
|
||||||
</AButton>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -398,27 +402,29 @@
|
|||||||
<!-- نمایش -->
|
<!-- نمایش -->
|
||||||
<div class="product-section">
|
<div class="product-section">
|
||||||
<div class="product-section__title">تنظیمات نمایش</div>
|
<div class="product-section__title">تنظیمات نمایش</div>
|
||||||
<div class="product-visibility-panel">
|
<div class="grid gap-4 md:grid-cols-2">
|
||||||
<div class="product-visibility-row">
|
<div class="product-visibility-panel">
|
||||||
<span class="text-sm">نمایش در لیست محصولات</span>
|
<div class="product-visibility-row">
|
||||||
<a-switch v-model:checked="form.show_in_list" />
|
<span class="text-sm">نمایش در لیست محصولات</span>
|
||||||
</div>
|
<a-switch v-model:checked="form.show_in_list" />
|
||||||
<div class="product-visibility-row">
|
</div>
|
||||||
<span class="text-sm">نمایش در داراییها</span>
|
<div class="product-visibility-row">
|
||||||
<a-switch v-model:checked="form.show_in_assets" />
|
<span class="text-sm">نمایش در داراییها</span>
|
||||||
</div>
|
<a-switch v-model:checked="form.show_in_assets" />
|
||||||
<div class="product-visibility-row">
|
</div>
|
||||||
<span class="text-sm">نمایش در تابلو TV</span>
|
<div class="product-visibility-row">
|
||||||
<a-switch v-model:checked="form.show_on_tv" />
|
<span class="text-sm">نمایش در تابلو TV</span>
|
||||||
|
<a-switch v-model:checked="form.show_on_tv" />
|
||||||
|
</div>
|
||||||
</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>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
</a-tab-pane>
|
</a-tab-pane>
|
||||||
|
|||||||
Reference in New Issue
Block a user