fix(product): add inline guide for TV formula variables and functions
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
@@ -27,13 +27,28 @@
|
|||||||
dir="ltr"
|
dir="ltr"
|
||||||
class="tv-formula-input font-mono text-sm"
|
class="tv-formula-input font-mono text-sm"
|
||||||
style="direction: ltr; text-align: left"
|
style="direction: ltr; text-align: left"
|
||||||
placeholder="مثال: ROUND(((P)/MG)*W+100000, -3)"
|
placeholder="((P)/MG)*W+100000"
|
||||||
@focus="isEditingFormula = true"
|
@focus="isEditingFormula = true"
|
||||||
@blur="onFormulaBlur"
|
@blur="onFormulaBlur"
|
||||||
@update:value="onFormulaInput"
|
@update:value="onFormulaInput"
|
||||||
/>
|
/>
|
||||||
</a-form-item>
|
</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>
|
||||||
|
<span><code>P</code> = قیمت وسط مرجع (ریال)</span> ·
|
||||||
|
<span><code>W</code> = وزن محصول ({{ formulaWeight }} گرم)</span> ·
|
||||||
|
<span><code>MG</code> = ضریب مثقال به گرم ({{ MG }})</span>
|
||||||
|
<div class="font-bold mt-1 mb-0.5">توابع:</div>
|
||||||
|
<span><code>ROUND(x, -3)</code> رند به هزار</span> ·
|
||||||
|
<span><code>FLOOR(x)</code> گرد به پایین</span> ·
|
||||||
|
<span><code>CEIL(x)</code> گرد به بالا</span>
|
||||||
|
<div class="mt-1">
|
||||||
|
<span class="font-bold">مثال: </span>
|
||||||
|
<code dir="ltr">ROUND(((P)/MG)*W+100000, -3)</code>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="tv-formula-section__result flex items-center justify-between gap-2 rounded-md px-2 py-1 text-sm">
|
<div class="tv-formula-section__result flex items-center justify-between gap-2 rounded-md px-2 py-1 text-sm">
|
||||||
<span class="tv-formula-section__result-label">قیمت TV (محاسبهشده)</span>
|
<span class="tv-formula-section__result-label">قیمت TV (محاسبهشده)</span>
|
||||||
<span class="tv-formula-section__result-value font-bold">{{ usePrice(computedProductPrice) }}</span>
|
<span class="tv-formula-section__result-value font-bold">{{ usePrice(computedProductPrice) }}</span>
|
||||||
@@ -46,6 +61,7 @@
|
|||||||
import { computed, ref, watch } from 'vue'
|
import { computed, ref, watch } from 'vue'
|
||||||
import {
|
import {
|
||||||
DEFAULT_PRICE_FORMULA,
|
DEFAULT_PRICE_FORMULA,
|
||||||
|
FORMULA_MG,
|
||||||
resolveFormulaWeight,
|
resolveFormulaWeight,
|
||||||
computeFormulaProductPrice
|
computeFormulaProductPrice
|
||||||
} from '@/utils/formulaPrice'
|
} from '@/utils/formulaPrice'
|
||||||
@@ -80,6 +96,7 @@ watch(
|
|||||||
}
|
}
|
||||||
)
|
)
|
||||||
|
|
||||||
|
const MG = FORMULA_MG
|
||||||
const formulaWeight = computed(() => resolveFormulaWeight(props.productAmount))
|
const formulaWeight = computed(() => resolveFormulaWeight(props.productAmount))
|
||||||
|
|
||||||
const formulaHelp = computed((): DashboardHelp => ({
|
const formulaHelp = computed((): DashboardHelp => ({
|
||||||
@@ -131,6 +148,20 @@ function onToggle(checked: boolean) {
|
|||||||
color: #1e3a5f;
|
color: #1e3a5f;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.tv-formula-section__guide {
|
||||||
|
background: #f0f7ff;
|
||||||
|
color: #1e3a5f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tv-formula-section__guide code {
|
||||||
|
background: rgba(59, 130, 246, 0.12);
|
||||||
|
padding: 0 4px;
|
||||||
|
border-radius: 3px;
|
||||||
|
font-family: monospace;
|
||||||
|
direction: ltr;
|
||||||
|
unicode-bidi: embed;
|
||||||
|
}
|
||||||
|
|
||||||
.tv-formula-section__result {
|
.tv-formula-section__result {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
}
|
}
|
||||||
@@ -161,6 +192,16 @@ html.is-dark .tv-formula-section__label {
|
|||||||
color: #93c5fd;
|
color: #93c5fd;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
html.is-dark .tv-formula-section__guide {
|
||||||
|
background: rgba(30, 58, 95, 0.5);
|
||||||
|
color: #bfdbfe;
|
||||||
|
}
|
||||||
|
|
||||||
|
html.is-dark .tv-formula-section__guide code {
|
||||||
|
background: rgba(96, 165, 250, 0.18);
|
||||||
|
color: #93c5fd;
|
||||||
|
}
|
||||||
|
|
||||||
html.is-dark .tv-formula-section__result {
|
html.is-dark .tv-formula-section__result {
|
||||||
background: rgba(0, 0, 0, 0.28);
|
background: rgba(0, 0, 0, 0.28);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user