boursecu/boursecu_user
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(convert): keep units before amounts in the copper calculator

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
safavimohadeseh78
2026-11-01 19:30:03 +03:30
co-authored by Cursor
parent f6fdce4c20
commit 0fba52f3e7
2 changed files with 44 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/base/convert/components/CopperConvertCalculator.vue
+42 -28
View File
@@ -21,7 +21,10 @@
:class="{ 'copper-convert__chip--muted': row.missing }" :class="{ 'copper-convert__chip--muted': row.missing }"
> >
<span class="copper-convert__chip-label">{{ row.label }}</span> <span class="copper-convert__chip-label">{{ row.label }}</span>
<span class="copper-convert__chip-value" dir="ltr">{{ row.value }}</span> <span class="copper-convert__measure">
<bdi v-if="row.unit">{{ row.unit }}</bdi>
<bdi>{{ row.value }}</bdi>
</span>
</li> </li>
</ul> </ul>
</div> </div>
@@ -35,7 +38,10 @@
class="copper-convert__chip copper-convert__chip--accent" class="copper-convert__chip copper-convert__chip--accent"
> >
<span class="copper-convert__chip-label">{{ row.label }}</span> <span class="copper-convert__chip-label">{{ row.label }}</span>
<span class="copper-convert__chip-value" dir="ltr">{{ row.value }}</span> <span class="copper-convert__measure">
<bdi v-if="row.unit">{{ row.unit }}</bdi>
<bdi>{{ row.value }}</bdi>
</span>
</li> </li>
</ul> </ul>
</div> </div>
@@ -60,12 +66,12 @@
<div class="copper-convert__weight"> <div class="copper-convert__weight">
<label class="copper-convert__field-label">مقدار</label> <label class="copper-convert__field-label">مقدار</label>
<div class="copper-convert__weight-wrap"> <div class="copper-convert__weight-wrap" dir="ltr">
<span class="copper-convert__weight-value" dir="ltr">{{ formatAssetAmount(sliderAmount) }}</span> <span class="copper-convert__weight-value">{{ formatAssetAmount(sliderAmount) }}</span>
<span class="copper-convert__weight-unit">{{ assetUnit }}</span> <span class="copper-convert__weight-unit">{{ assetUnit }}</span>
</div> </div>
<p class="copper-convert__asset-hint"> <p class="copper-convert__asset-hint">
<template v-if="assetAmount > 0">از دارایی شما؛ انتهای زبانه {{ formatAssetAmount(assetAmount) }} {{ assetUnit }} است</template> <template v-if="assetAmount > 0">از دارایی شما؛ انتهای زبانه <span class="copper-convert__measure"><bdi>{{ assetUnit }}</bdi><bdi>{{ formatAssetAmount(assetAmount) }}</bdi></span> است</template>
<template v-else>موجودی این دارایی صفر است.</template> <template v-else>موجودی این دارایی صفر است.</template>
</p> </p>
<div <div
@@ -85,7 +91,7 @@
</div> </div>
<div class="copper-convert__slider-scale"> <div class="copper-convert__slider-scale">
<span>۰</span> <span>۰</span>
<span dir="ltr">{{ formatAssetAmount(assetAmount) }} {{ assetUnit }}</span> <span class="copper-convert__measure"><bdi>{{ assetUnit }}</bdi><bdi>{{ formatAssetAmount(assetAmount) }}</bdi></span>
</div> </div>
</div> </div>
</section> </section>
@@ -98,12 +104,12 @@
<div class="copper-convert__rings"> <div class="copper-convert__rings">
<article class="copper-convert__ring-card"> <article class="copper-convert__ring-card">
<span class="copper-convert__ring-badge">۱.۵ mm²</span> <span class="copper-convert__ring-badge" dir="ltr">۱.۵ mm²</span>
<p class="copper-convert__ring-count" dir="ltr">{{ formatRings(result.rings15ByValue) }}</p> <p class="copper-convert__ring-count" dir="ltr">{{ formatRings(result.rings15ByValue) }}</p>
<p class="copper-convert__ring-caption">حلقه سیم</p> <p class="copper-convert__ring-caption">حلقه سیم</p>
</article> </article>
<article class="copper-convert__ring-card"> <article class="copper-convert__ring-card">
<span class="copper-convert__ring-badge">۲.۵ mm²</span> <span class="copper-convert__ring-badge" dir="ltr">۲.۵ mm²</span>
<p class="copper-convert__ring-count" dir="ltr">{{ formatRings(result.rings25ByValue) }}</p> <p class="copper-convert__ring-count" dir="ltr">{{ formatRings(result.rings25ByValue) }}</p>
<p class="copper-convert__ring-caption">حلقه سیم</p> <p class="copper-convert__ring-caption">حلقه سیم</p>
</article> </article>
@@ -112,11 +118,11 @@
<div class="copper-convert__summary"> <div class="copper-convert__summary">
<div class="copper-convert__summary-row"> <div class="copper-convert__summary-row">
<span>ارزش معادل</span> <span>ارزش معادل</span>
<strong dir="ltr">{{ formatRial(result.totalValueRial) }} <small>ریال</small></strong> <strong class="copper-convert__measure"><small>ریال</small><bdi>{{ formatRial(result.totalValueRial) }}</bdi></strong>
</div> </div>
<div class="copper-convert__summary-row"> <div class="copper-convert__summary-row">
<span>معادل مفتول</span> <span>معادل مفتول</span>
<strong dir="ltr">{{ formatKg(result.equivalentMaftoulKg) }} <small>کیلو</small></strong> <strong class="copper-convert__measure"><small>کیلو</small><bdi>{{ formatKg(result.equivalentMaftoulKg) }}</bdi></strong>
</div> </div>
</div> </div>
</section> </section>
@@ -127,13 +133,13 @@
<span class="copper-convert__result-title">تقسیم بین دو سیم</span> <span class="copper-convert__result-title">تقسیم بین دو سیم</span>
</div> </div>
<p class="copper-convert__asset-hint"> <p class="copper-convert__asset-hint">
مانده {{ formatAssetAmount(remainderAmount) }} {{ assetUnit }} است. هر زبانه فقط عدد صحیح حلقه است؛ اعشاری که به یک حلقه نرسد در دارایی می‌ماند. مانده <span class="copper-convert__measure"><bdi>{{ assetUnit }}</bdi><bdi>{{ formatAssetAmount(remainderAmount) }}</bdi></span> است. هر زبانه فقط عدد صحیح حلقه است؛ اعشاری که به یک حلقه نرسد در دارایی می‌ماند.
</p> </p>
<div class="copper-convert__weight"> <div class="copper-convert__weight">
<label class="copper-convert__field-label">سیم ۱.۵ mm²</label> <label class="copper-convert__field-label">سیم <span dir="ltr">۱.۵ mm²</span></label>
<div class="copper-convert__weight-wrap"> <div class="copper-convert__weight-wrap" dir="ltr">
<span class="copper-convert__weight-value" dir="ltr">{{ wire15Rings }}</span> <span class="copper-convert__weight-value">{{ wire15Rings }}</span>
<span class="copper-convert__weight-unit">عدد حلقه</span> <span class="copper-convert__weight-unit">عدد حلقه</span>
</div> </div>
<div <div
@@ -153,14 +159,14 @@
</div> </div>
<div class="copper-convert__slider-scale"> <div class="copper-convert__slider-scale">
<span>۰</span> <span>۰</span>
<span dir="ltr">{{ maxRings15 }} عدد حلقه</span> <span class="copper-convert__measure"><bdi>عدد حلقه</bdi><bdi>{{ maxRings15 }}</bdi></span>
</div> </div>
</div> </div>
<div class="copper-convert__weight"> <div class="copper-convert__weight">
<label class="copper-convert__field-label">سیم ۲.۵ mm²</label> <label class="copper-convert__field-label">سیم <span dir="ltr">۲.۵ mm²</span></label>
<div class="copper-convert__weight-wrap"> <div class="copper-convert__weight-wrap" dir="ltr">
<span class="copper-convert__weight-value" dir="ltr">{{ wire25Rings }}</span> <span class="copper-convert__weight-value">{{ wire25Rings }}</span>
<span class="copper-convert__weight-unit">عدد حلقه</span> <span class="copper-convert__weight-unit">عدد حلقه</span>
</div> </div>
<div <div
@@ -180,12 +186,12 @@
</div> </div>
<div class="copper-convert__slider-scale"> <div class="copper-convert__slider-scale">
<span>۰</span> <span>۰</span>
<span dir="ltr">{{ maxRings25 }} عدد حلقه</span> <span class="copper-convert__measure"><bdi>عدد حلقه</bdi><bdi>{{ maxRings25 }}</bdi></span>
</div> </div>
</div> </div>
<p class="copper-convert__asset-hint"> <p class="copper-convert__asset-hint">
اعشار مانده: {{ formatAssetAmount(leftoverAmount) }} {{ assetUnit }} نگه داشته می‌شود. اعشار مانده: <span class="copper-convert__measure"><bdi>{{ assetUnit }}</bdi><bdi>{{ formatAssetAmount(leftoverAmount) }}</bdi></span> نگه داشته می‌شود.
</p> </p>
<BasicButton <BasicButton
type="primary" type="primary"
@@ -252,11 +258,11 @@ function formatAssetAmount(value: number) {
} }
function sliderTip(value?: number) { function sliderTip(value?: number) {
return `${formatAssetAmount(Number(value ?? 0))} ${assetUnit.value}` return `${assetUnit.value} ${formatAssetAmount(Number(value ?? 0))}`
} }
function ringTip(value?: number) { function ringTip(value?: number) {
return `${Math.floor(Number(value ?? 0))} عدد حلقه` return `عدد حلقه ${Math.floor(Number(value ?? 0))}`
} }
function formatRial(value: number) { function formatRial(value: number) {
@@ -371,17 +377,14 @@ function formatRings(value: number) {
border-color: #d4e3de; border-color: #d4e3de;
} }
.copper-convert__chip--muted .copper-convert__chip-value {
color: #94a3b8;
}
.copper-convert__chip-label { .copper-convert__chip-label {
font-size: 0.625rem; font-size: 0.625rem;
line-height: 1.45; line-height: 1.45;
color: #64748b; color: #64748b;
} }
.copper-convert__chip-value { .copper-convert__chip-value,
.copper-convert__price-grid .copper-convert__measure {
font-size: 0.6875rem; font-size: 0.6875rem;
font-weight: 700; font-weight: 700;
color: #0f172a; color: #0f172a;
@@ -390,6 +393,17 @@ function formatRings(value: number) {
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.copper-convert__measure {
display: inline-flex;
direction: ltr;
align-items: baseline;
gap: 0.25rem;
}
.copper-convert__chip--muted .copper-convert__measure {
color: #94a3b8;
}
.copper-convert__form, .copper-convert__form,
.copper-convert__split { .copper-convert__split {
display: flex; display: flex;
@@ -451,7 +465,7 @@ function formatRings(value: number) {
font-weight: 800; font-weight: 800;
color: #0f172a; color: #0f172a;
direction: ltr; direction: ltr;
text-align: right; text-align: left;
} }
.copper-convert__asset-hint { .copper-convert__asset-hint {
src/views/base/convert/composables/useCopperConvertPage.ts
+2 -1
View File
@@ -289,7 +289,8 @@ export function useCopperConvertPage() {
const p = prices.value const p = prices.value
const row = (label: string, amount: number) => ({ const row = (label: string, amount: number) => ({
label, label,
value: amount > 0 ? `${Math.round(amount).toLocaleString('en-US')} ریال` : '—', value: amount > 0 ? Math.round(amount).toLocaleString('en-US') : '—',
unit: amount > 0 ? 'ریال' : '',
missing: amount <= 0, missing: amount <= 0,
}) })
return [ return [