ui(product): improve formula sections and group visibility switches

- FormulaPriceSection: compact inline guide with variables and functions
- TvFormulaPriceSection: same compact guide style, remove verbose text
- Product specs tab: group visibility switches (list, assets, TV) in single bordered panel

Co-authored-by: Cursor <cursoragent@cursor.com>

src/pages/menuPages/products/base/components/FormulaPriceSection.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="formula-price-section mb-4 flex flex-col gap-2 rounded-lg border border-solid px-3 py-2">
+  <div class="formula-price-section flex flex-col gap-2 rounded-lg border border-solid px-3 py-2">
     <div class="flex items-center justify-between gap-2">
       <div class="flex items-center gap-1.5">
         <DashboardLabelWithHelp
@@ -27,15 +27,28 @@
           dir="ltr"
           class="formula-price-input font-mono text-sm"
           style="direction: ltr; text-align: left"
-          placeholder="مثال: ROUND(((P)/MG)*W+100000, -3)"
+          placeholder="((P)/MG)*W+100000"
           @focus="isEditingFormula = true"
           @blur="onFormulaBlur"
           @update:value="onFormulaInput"
         />
       </a-form-item>
 
+      <div class="formula-price-section__guide rounded-md px-2.5 py-2 text-xs leading-6">
+        <div class="flex flex-wrap gap-x-3 gap-y-0.5">
+          <span><code>P</code> قیمت وسط مرجع</span>
+          <span><code>W</code> وزن ({{ formulaWeight }})</span>
+          <span><code>MG</code> مثقال→گرم ({{ MG }})</span>
+        </div>
+        <div class="flex flex-wrap gap-x-3 gap-y-0.5 mt-0.5">
+          <span><code>ROUND(x,-3)</code> رند هزار</span>
+          <span><code>FLOOR(x)</code> کف</span>
+          <span><code>CEIL(x)</code> سقف</span>
+        </div>
+      </div>
+
       <div class="formula-price-section__result flex items-center justify-between gap-2 rounded-md px-2 py-1 text-sm">
-        <span class="formula-price-section__result-label">قیمت محصول (محاسبه‌شده)</span>
+        <span class="formula-price-section__result-label">قیمت محاسبه‌شده</span>
         <span class="formula-price-section__result-value font-bold">{{ usePrice(computedProductPrice) }}</span>
       </div>
     </template>
@@ -46,7 +59,7 @@
 import { computed, ref, watch } from 'vue'
 import {
   DEFAULT_PRICE_FORMULA,
-  getFormulaVariableHelp,
+  FORMULA_MG,
   resolveFormulaWeight,
   computeFormulaProductPrice
 } from '@/utils/formulaPrice'
@@ -72,6 +85,7 @@ const emit = defineEmits<{
 
 const isEditingFormula = ref(false)
 const localFormula = ref(props.modelValue.price_formula || DEFAULT_PRICE_FORMULA)
+const MG = FORMULA_MG
 
 watch(
   () => props.modelValue.price_formula,
@@ -84,16 +98,9 @@ watch(
 
 const formulaWeight = computed(() => resolveFormulaWeight(props.productAmount))
 
-const formulaHelp = computed((): DashboardHelp => {
+const formulaHelp = computed((): DashboardHelp => ({
-  const lines = getFormulaVariableHelp(formulaWeight.value)
+  description: 'قیمت از فرمول و مظنه مرجع محاسبه می‌شود.',
-    .map((item) => `${item.symbol} = ${item.label}`)
+}))
-    .join(' | ')
-  return {
-    description:
-      'قیمت واحد از فرمول و مظنه مرجع محاسبه می‌شود. تفاوت ارائه‌دهنده در فرمول اثر ندارد و فقط قیمت وسط مرجع (P) استفاده می‌شود.',
-    formula: `${lines}. مثال: ROUND(((P)/MG)*W+100000, -3)`,
-  }
-})
 
 const computedProductPrice = computed(() =>
   computeFormulaProductPrice(
@@ -141,6 +148,20 @@ function onToggle(checked: boolean) {
   color: #78350f;
 }
 
+.formula-price-section__guide {
+  background: #fef3c7;
+  color: #78350f;
+}
+
+.formula-price-section__guide code {
+  background: rgba(180, 83, 9, 0.12);
+  padding: 0 4px;
+  border-radius: 3px;
+  font-family: monospace;
+  direction: ltr;
+  unicode-bidi: embed;
+}
+
 .formula-price-section__result {
   background: #fff;
 }
@@ -171,6 +192,16 @@ html.is-dark .formula-price-section__label {
   color: #fde68a;
 }
 
+html.is-dark .formula-price-section__guide {
+  background: rgba(120, 53, 15, 0.5);
+  color: #fde68a;
+}
+
+html.is-dark .formula-price-section__guide code {
+  background: rgba(251, 191, 36, 0.18);
+  color: #fbbf24;
+}
+
 html.is-dark .formula-price-section__result {
   background: rgba(0, 0, 0, 0.28);
 }

src/pages/menuPages/products/base/components/ProductEditorFormBody.vue

@@ -396,22 +396,27 @@
             </a-form-item>
           </div>
 
-          <div class="product-editor-panel product-spec-switch-row">
+          <div class="product-editor-panel flex flex-col gap-0 rounded-lg overflow-hidden">
-            <div class="product-spec-label">
+            <div class="product-visibility-row">
+              <DashboardLabelWithHelp label="نمایش در لیست محصولات" :help="showInListHelp" size="sm" />
+              <a-form-item name="show_in_list" class="!mb-0">
+                <a-switch v-model:checked="form.show_in_list" />
+              </a-form-item>
+            </div>
+            <div class="product-visibility-row">
               <DashboardLabelWithHelp label="نمایش در دارایی‌ها" :help="showInAssetsHelp" size="sm" />
+              <a-form-item name="show_in_assets" class="!mb-0">
+                <a-switch v-model:checked="form.show_in_assets" />
+              </a-form-item>
             </div>
-            <a-form-item name="show_in_assets" class="!mb-0">
+            <div class="product-visibility-row">
-              <a-switch v-model:checked="form.show_in_assets" />
-            </a-form-item>
-          </div>
-          <div class="product-editor-panel product-spec-switch-row">
-            <div class="product-spec-label">
               <DashboardLabelWithHelp label="نمایش در تابلو TV" :help="showOnTvHelp" size="sm" />
+              <a-form-item name="show_on_tv" class="!mb-0">
+                <a-switch v-model:checked="form.show_on_tv" />
+              </a-form-item>
             </div>
-            <a-form-item name="show_on_tv" class="!mb-0">
-              <a-switch v-model:checked="form.show_on_tv" />
-            </a-form-item>
           </div>
+
           <TvFormulaPriceSection
             v-if="form.show_on_tv"
             :model-value="form"
@@ -419,14 +424,6 @@
             :product-amount="Number(form.amount) || 0"
             @update:model-value="onTvFormulaFormPatch"
           />
-          <div class="product-editor-panel product-spec-switch-row">
-            <div class="product-spec-label">
-              <DashboardLabelWithHelp label="نمایش در لیست محصولات" :help="showInListHelp" size="sm" />
-            </div>
-            <a-form-item name="show_in_list" class="!mb-0">
-              <a-switch v-model:checked="form.show_in_list" />
-            </a-form-item>
-          </div>
         </div>
       </a-tab-pane>
 
@@ -983,6 +980,14 @@ defineExpose({
   @apply flex flex-col items-stretch gap-2;
 }
 
+.product-visibility-row {
+  @apply flex items-center justify-between gap-3 px-3 py-2;
+  border-bottom: 1px solid var(--ant-color-border-secondary, rgba(0, 0, 0, 0.06));
+}
+.product-visibility-row:last-child {
+  border-bottom: none;
+}
+
 .product-spec-label {
   @apply w-full shrink-0 text-right;
 }

src/pages/menuPages/products/base/components/TvFormulaPriceSection.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="tv-formula-section mb-4 flex flex-col gap-2 rounded-lg border border-solid px-3 py-2">
+  <div class="tv-formula-section flex flex-col gap-2 rounded-lg border border-solid px-3 py-2">
     <div class="flex items-center justify-between gap-2">
       <div class="flex items-center gap-1.5">
         <DashboardLabelWithHelp
@@ -35,17 +35,15 @@
       </a-form-item>
 
       <div class="tv-formula-section__guide rounded-md px-2.5 py-2 text-xs leading-6">
-        <div class="font-bold mb-0.5">متغیرها:</div>
+        <div class="flex flex-wrap gap-x-3 gap-y-0.5">
-        <span><code>P</code> = قیمت وسط مرجع (ریال)</span> ·
+          <span><code>P</code> قیمت وسط مرجع</span>
-        <span><code>W</code> = وزن محصول ({{ formulaWeight }} گرم)</span> ·
+          <span><code>W</code> وزن ({{ formulaWeight }})</span>
-        <span><code>MG</code> = ضریب مثقال به گرم ({{ MG }})</span>
+          <span><code>MG</code> مثقال→گرم ({{ MG }})</span>
-        <div class="font-bold mt-1 mb-0.5">توابع:</div>
+        </div>
-        <span><code>ROUND(x, -3)</code> رند به هزار</span> ·
+        <div class="flex flex-wrap gap-x-3 gap-y-0.5 mt-0.5">
-        <span><code>FLOOR(x)</code> گرد به پایین</span> ·
+          <span><code>ROUND(x,-3)</code> رند هزار</span>
-        <span><code>CEIL(x)</code> گرد به بالا</span>
+          <span><code>FLOOR(x)</code> کف</span>
-        <div class="mt-1">
+          <span><code>CEIL(x)</code> سقف</span>
-          <span class="font-bold">مثال: </span>
-          <code dir="ltr">ROUND(((P)/MG)*W+100000, -3)</code>
         </div>
       </div>