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:
2026-08-19 12:28:30 +03:30
co-authored by Cursor
parent eeaf0ce94a
commit 2471a447b7
@@ -222,6 +222,7 @@
</div> </div>
<div class="grid gap-4 md:grid-cols-2">
<FormulaPriceSection <FormulaPriceSection
:model-value="form" :model-value="form"
:reference-middle-price="formulaReferenceMiddlePrice" :reference-middle-price="formulaReferenceMiddlePrice"
@@ -230,9 +231,9 @@
@enabled-change="onFormulaEnabledChange" @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"
@@ -251,6 +252,8 @@
> >
{{ livePricePreview.message }} {{ livePricePreview.message }}
</span> </span>
</div>
<div class="flex items-center justify-between gap-2">
<span <span
v-if="livePricePreview.status === 'ready'" v-if="livePricePreview.status === 'ready'"
class="live-price-preview__source truncate text-xs" class="live-price-preview__source truncate text-xs"
@@ -260,13 +263,14 @@
— تعدیل {{ form.price_offset_percent }}٪ — تعدیل {{ form.price_offset_percent }}٪
</span> </span>
</span> </span>
</div> <AButton size="small" class="shrink-0" @click="$emit('refreshPrices')">
<AButton size="small" class="shrink-0 self-end md:self-auto" @click="$emit('refreshPrices')">
بروزرسانی بروزرسانی
</AButton> </AButton>
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
</a-tab-pane> </a-tab-pane>
<a-tab-pane key="1" tab="مشخصات محصول" force-render> <a-tab-pane key="1" tab="مشخصات محصول" force-render>
@@ -398,6 +402,7 @@
<!-- نمایش --> <!-- نمایش -->
<div class="product-section"> <div class="product-section">
<div class="product-section__title">تنظیمات نمایش</div> <div class="product-section__title">تنظیمات نمایش</div>
<div class="grid gap-4 md:grid-cols-2">
<div class="product-visibility-panel"> <div class="product-visibility-panel">
<div class="product-visibility-row"> <div class="product-visibility-row">
<span class="text-sm">نمایش در لیست محصولات</span> <span class="text-sm">نمایش در لیست محصولات</span>
@@ -421,6 +426,7 @@
/> />
</div> </div>
</div> </div>
</div>
</a-tab-pane> </a-tab-pane>
<a-tab-pane key="2" tab="اختلاف خرید و فروش" force-render> <a-tab-pane key="2" tab="اختلاف خرید و فروش" force-render>