تبديل العملات في الواجهة

1) المبادئ

1. أولاً المعنى، ثم واجهة المستخدم. عملة حساب منفصلة (الحقيقة المحاسبية) عن عملة العرض (الراحة) وعملة المعاملات (تحويل النقود الفعلي).
2. صفر غموض. أظهر رمز + رمز معرض لخطر الارتباك («$ US»، «$ CA»، «MXN»، «$ R»). بالنسبة ₴/₸/₼، أضف دائمًا رمزًا في التفاصيل.
3. نزاهة الدورة. يمكنك أن ترى: مصدر الدورة، لحظة التحديث الأخير، ما إذا تم تضمين العمولات/الانتشار.
4. استقرار المدخلات. يجب ألا «يقفز» تبديل العملة قيم الدخول دون موافقة صريحة (خاصة في نماذج الأسعار/الودائع).
5. توطين الأشكال. تعيين الحدود، والمساحات، وعلامة العملة - حسب موقع المستخدم ؛ الدقة - حسب العملة.

2) تبديل النماذج

العرض فقط - تظل جميع الحسابات في عملة الحساب، ويظهر واجهة المستخدم المعادل بالعملة المختارة. استخدم للكتالوج، الملف الشخصي، البعد.
هجين (تحويل ناعم): عرض بالعملة المختارة + تأكيد المعاملة بعملة الحساب (أظهر كلاهما).
التشغيل (تحويل صعب): يغير المستخدم عملة المعاملة (الإيداع/السحب/السعر). نحن بحاجة إلى دورات صريحة وعمولات ووقت تثبيت.

القاعدة: بشكل افتراضي - العرض فقط، وتشغيل التحويل «الصعب» فقط في التدفقات المقابلة (النقد والسحب وتحويل الأموال).

3) الضوابط والتنسيب

تبديل العملة في لوحة الترويسة/الملف الشخصي (أيقونة «₴/€/$» أو رمز العملة).
محدد: البحث بالرمز/الاسم/الرمز ؛ عملات مختارة/متكررة - أعلى.
داخل النماذج (الإيداع/السعر): محدد مدمج على يمين حقل الكمية، بجانب التلميح «≈ مكافئ في XXX».
نمط الهاتف المحمول: ورقة سفلية مع قائمة ومدخلات للتصفية.

html
<button aria-haspopup="listbox" aria-expanded="false" class="currency-switch">UAH</button>
<ul role="listbox" class="currency-menu" hidden>
<li role="option" aria-selected="true">UAH — ₴</li>
<li role="option">USD — US$</li>
<li role="option">EUR — €</li>
<li role="option">TRY — ₺</li>
</ul>

4) التنسيق والدقة

الوحدات الصغيرة: تخزين المبالغ في وحدات دنيا كاملة (بنسات، سنتات، ساتوشي).

• 0: JPY، KRW، CLP
• 2: دولار أمريكي، يورو، UAH، TRY
• 3 +: بعض العملات ZAR (2)، KWD (3)، التشفير (4-8)
• العملات المشفرة: أظهر ما يصل إلى 8 أحرف (دقة ديناميكية، ولكن مع حد أدنى للقراءة).
• أرقام الجدول: «خط-متغير-رقم: جدول-nums ؛» لمحاذاة العمود.

js const fmt = (amountMinor, currency, locale) => {
const fraction = { JPY:0, KRW:0, KWD:3 }[currency]?? 2;
return new Intl.NumberFormat(locale, { style:'currency', currency, minimumFractionDigits:fraction, maximumFractionDigits:fraction })
.format(amountMinor / 10fraction);
};
fmt(200000, 'UAH', 'uk-UA'); // 2 000,00 ₴

5) الدورات والتحديثات

المصدر: إصلاح مزود الدورة (التسعير الداخلي/البنك/FX-API).
المخبأ: تحديث الدورات بتواتر معقول (على سبيل المثال كل 60-300 ثانية) + التحديثات الإضافية عند الطلب.
وقت التثبيت: عرض «تم تحديث N منذ دقائق» ووقت التثبيت عند الخروج.
Spread/Commission: أظهر سطرًا صريحًا: "معدل 1 دولار أمريكي = 36. 60 UAH (Spread 1 بما في ذلك. 5%)».
التقريب: بنك أو عادي - اختر واحدًا وأصلحه في السياسة.

6) نص وشروح UX

المعادل: "≈ 52. 10 €" - بجانب الكمية، اللون الصامت، يتم تحديثه في الوقت الفعلي.
تحذيرات قانونية: «سيتم تسجيل السعر الفعلي والعمولة في خطوة التأكيد».
الرموز الطويلة: استخدم أدوات/سلسلة ثانوية: «دولار أمريكي - دولار أمريكي».
التحويل في السلة: لا تغير «المجموع» دون تفسير ؛ إظهار خط إعادة الفرز.

7) التوافر (A11y)

«role =» listbox/option «» في محدد العملات.
دعم لوحة المفاتيح: السهام، الدخول، النوع المسبق بالرمز/الاسم.
القراءة لـ SR: «عملة العرض: UAH - hryvnia الأوكرانية».
اللون ≠ الوسيلة الوحيدة للمعنى (يوجد دائمًا رمز/نص).
RTL: الأرقام/الرموز في 'dir = «ltr»' داخل الأوتار العربية.

8) الأداء والتخزين المؤقت

الدورات - في الذاكرة + التخزين المحلي مع TTL (على سبيل المثال، 5 دقائق).
تحديثات الدفعة: إعادة حساب المكافئات على دفعات (requestAnimationFrame، فضح 100-200 ms).
لا تشغّل مُعيد القائمة الإضافية عندما يتقلب المسار <العتبة (على سبيل المثال، 0. 1%).

9) تفاصيل iGaming

عملة الحساب - الإبلاغ الأساسي (الودائع، الرصيد، التاريخ).
سعر العملة: عادة = عملة الحساب ؛ إذا تم تحديد آخر، أظهر كتلة مزدوجة: «X XXX مدين بالدولار الأمريكي (≈ Y YYY in UAH)».
إصلاح التسوية: يتم تحويل المكاسب بالمعدل في وقت التسوية، وليس الرهانات - يجب رؤية ذلك في تفاصيل القسيمة/التاريخ.
الإيداع/السحب: سعر وعمولة PSP/المصرف - في سطر مستقل ؛ ETA بالطريقة.
حدود اللعب المسؤولة: محددة في عملة الحساب ؛ إذا كان واجهة المستخدم بعملة مختلفة، أظهر كلا القيمتين.
البطولات والجوائز: يتم تحديد عملة صندوق الجائزة ؛ عند العرض، يكون المكافئ تقريبيًا ومعلمًا.

10) أنتيباترن

تغير قيمة «السحر» في مجال الإدخال عند تبديل العملة - دون موافقة صريحة.
استخدام حرف واحد «$» بدون رمز البلد.
عمولة خفية في المعرفة (لا يوجد خط حول الانتشار).
مزج الموقع والعملة (التنسيق بواسطة 'en-US' لـ 'UAH').
دقة صلبة لـ «2 حرف» لـ JPY/KRW أو «8 أحرف» لجميع العملات المشفرة.
إعادة حساب المعاملات التاريخية «بأثر رجعي» بسعر الصرف الحالي - دون علامة «إعادة الحساب».

11) رموز نظام التصميم (مثال)

json
{
"currency": {
"default": "UAH",
"displayList": ["UAH","USD","EUR","TRY","PLN","BRL","MXN"],
"fractions": { "JPY":0, "KRW":0, "KWD":3, "BTC":8 },
"showCodeWithSymbol": ["USD","CAD","AUD","NZD"],
"approxPrefix": "≈ "
},
"format": {
"tabularNums": true,
"grouping": "locale",
"negative": "−"
},
"fx": {
"ttlSec": 300,
"changeThresholdPct": 0.1,
"showSpread": true
}
}

12) مقتطفات

تبديل العملة (رد فعل، سياق + إنتل)

tsx import { createContext, useContext, useState, useMemo } from 'react';

type Cur = 'UAH'    'USD'    'EUR'    'TRY';
const CurrencyCtx = createContext<{cur:Cur,set:(c:Cur)=>void, rate:(from:Cur,to:Cur)=>number}>({cur:'UAH',set:()=>{},rate:()=>1});

export function CurrencyProvider({children}:{children:React.ReactNode}){
const [cur, set] = useState<Cur>('UAH');
// fx: получить из кэша/апи; здесь — заглушка const table = { UAH:{USD:0.027,EUR:0.025,TRY:0.89,UAH:1}, USD:{UAH:36.6,EUR:0.93,TRY:33.0,USD:1}, EUR:{UAH:39.2,USD:1.07,TRY:35.4,EUR:1}, TRY:{UAH:1.12,USD:0.030,EUR:0.028,TRY:1} };
const rate = (from:Cur,to:Cur)=> table[from][to];
const value = useMemo(()=>({cur, set, rate}),[cur]);
return <CurrencyCtx.Provider value={value}>{children}</CurrencyCtx.Provider>;
}

export function useCurrency(){ return useContext(CurrencyCtx); }

export function Money({minor, iso}:{minor:number, iso:Cur}){
const { cur, rate } = useCurrency();
const fraction = { JPY:0, KRW:0, KWD:3 }[cur as any]?? 2;
const v = (minor/10fraction) rate(iso, cur);
return <span style={{fontVariantNumeric:'tabular-nums'}}>{new Intl.NumberFormat(undefined,{style:'currency',currency:cur, minimumFractionDigits:fraction, maximumFractionDigits:fraction}).format(v)}</span>;
}

عرض مزدوج (تحويل تشغيلي)

html
<div class="amount">
<label>Сумма депозита</label>
<div class="row">
<input type="number" inputmode="decimal" aria-describedby="fxnote">
<select aria-label="Валюта операции">
<option>USD</option><option>EUR</option><option>UAH</option>
</select>
</div>
<small id="fxnote">≈ 2 000,00 ₴ · Курс будет зафиксирован на следующем шаге</small>
</div>

13) المقاييس

زمن وصول العملة الأجنبية: الوقت من تحويل العملة إلى تحديث جميع المجالات (الهدف ≤ 150 مللي ثانية).
معدل الصواب: حصة المكالمات لدعم «المبالغ غير الصحيحة» (<0. 2%).
عدم تطابق العرض مقابل الحساب: الأحداث التي يربك فيها المستخدم العملات (تلميحات أقل).
نصائح دورة CTR: نقرات على «المزيد عن الدورة/اللجنة».
الخصم النقدي عند التحويل: حصة الإخفاقات المرتبطة بالتغيير «المفاجئ» في المبلغ.

14) قائمة QA المرجعية

المعنى والشفافية

• عملة الحساب و/أو المعاملة واضحة في كل مكان.
• دولار يظهر الرمز القطري (دولار أمريكي، دولار كندي، إلخ).
• هناك سطر حول السعر وتاريخ التحديث والانتشار/العمولة.

الشكل والدقة

• الكسور العشرية حسب العملة (ين ياباني = 0، دينار كويتي = 3، التشفير = حتى 8).
• يقابل الرقم/العملة المحلية لغة واجهة المستخدم.
• لا يعاد حساب المعاملات التاريخية «بسعر الصرف الحالي» دون وضع علامات.

سلوك

• تغيير العملة لا يغير القيد دون تأكيد.
• يتم تحديث المكافئ «≈» بسلاسة وسرعة.
• محدد العملة يمكن الوصول إليه من لوحة المفاتيح، وأعمال النوع المسبق.

تفاصيل iGaming

• في القسيمة: يتم توقيع الرسوم/الربح وعملتهم، يتم تحديد معدل التثبيت.
• حتى: تظهر رسوم PSP/المصرفية بشكل منفصل.
• في الحدود: يتم عرض القيمتين (الحساب والعرض).

RTL/A11y

• تُقرأ الرموز/المبالغ بشكل صحيح في RTL ('dir = «ltr»' للأرقام).
• تتوافق مؤشرات التباين والتركيز مع AA.

15) التوثيق في نظام التصميم

المكونات: «CurrencySwitch» و «Money» و «FxNote» و «DualCounty».
سياسة الدقة/التقريب ووظيفة الصيغة الوحيدة.
القواعد: «عند العرض فقط»، «عند التحويل الصعب»، «كيفية إظهار الانتشار».
مرجع العملة: رمز، رمز، أرقام، تصادم حرف إقليمي.
Gallery Do/Don 't: «$ بدون رمز»، مدخلات القفز التلقائي، العمولات الخفية.

موجز

تبديل العملات ليس مجرد محدد ₴/€/$. هذا نموذج واضح للمال (عملة الحساب مقابل العرض مقابل التشغيل)، وسعر عادل مع العمولة، والتنسيق الصحيح من خلال الموقع والسلوك الدقيق لمجالات الإدخال. قم بإصلاح القواعد في نظام التصميم، وأتمتة تنسيق الدورات وتخزينها - وسيعمل المستخدمون بثقة بالمبالغ، دون الشك في الأرقام وعدم خسارة الأموال في الفروق «غير المرئية».