ADAMANT Explorer: تحسين تجربة المستخدم على الأجهزة المحمولة والشاشات الصغيرة

أكمل ADAMANT Explorer مراجعة شاملة لسلوك واجهة المستخدم على الأجهزة المحمولة والشاشات الصغيرة، وذلك لضمان بقاء بيانات البلوكشين المكثفة — مثل الجداول، والعناوين، وشاشات المراقبة، وخريطة الأقران، ورسم الشبكة — قابلة للقراءة والاستخدام على الهواتف وواجهات العرض الضيقة بعد إعادة تصميم Vue. تم دمج هذا العمل في فرع dev ضمن Adamant-im/adamant-explorer#42، مما أدى إلى إغلاق مشكلات واجهة المستخدم على الأجهزة المحمولة وضوضاء تأكيد البلوك عبر WebSocket، بالإضافة إلى إصلاح لاحق لتكبير الشاشة عند التركيز في نظام iOS.

التغييرات حسب الواجهة

تم نقل البحث الشامل من القائمة المطوية إلى الشريط العلوي بين الشعار وزر تبديل القائمة، حيث يتم تصغيره على الشاشات الصغيرة بينما يحافظ شريط الشبكة على وضع مريح. في الصفحة الرئيسية، تم استبدال جدول البيانات الضيق ببطاقات العمليات. تستخدم صفحات البلوك، والمعاملات، والعناوين الآن جداول معاملات مدمجة وقابلة للتمرير على الأجهزة المحمولة؛ وتعرض قائمة البلوكات عموداً لعدد المعاملات (TXS)، بينما تخفي صفحة المعاملات صف السجل المكرر. حصل كل من مراقب المندوبين، ومراقب أقران الشبكة، وأعلى الحسابات، والمحافظ المحجوزة على بدائل بطاقات .table-mobile، وعناصر تحكم في الفرز للهواتف، وتحسينات في ARIA. يتم إغلاق تلميحات الأدوات المخصصة عند النقر بحيث لا تظل عالقة على أجهزة اللمس، ولم يعد حقل البحث يسبب تكبير وتمرير متصفح Safari عند التركيز.

ملاحظات التنفيذ

يتم التحكم في التخطيط بواسطة نقطتي توقف هيكليتين. عند عرض <=720px، تنهار جداول البيانات إلى بطاقات أو جداول تمرير مدمجة؛ وعند <=420px، يتم إعادة ترتيب تلك البطاقات عمودياً. تظل تخطيطات سطح المكتب والأجهزة اللوحية الأكبر من 720px دون تغيير.

كل صف في الصفحة الرئيسية عبارة عن بطاقة بتنسيق CSS-grid. عند <=720px يظهر المسار في سطر واحد كـ sender -> recipient amount open؛ وعند <=420px يتم إعادة ترتيبه مع سهم لأسفل في المنتصف والمبلغ بجانبه، مع توسيط المرسل والمستقبل أفقياً. يتم ربط التنقل وتلميح الأدوات بعنصر التحكم المفتوح الصريح فقط، وليس بالبطاقة بأكملها.

تظل قوائم معاملات البلوك والعنوان جداول حقيقية على الأجهزة المحمولة — قابلة للتمرير أفقياً داخل حاويتها مع مجموعة أعمدة مدمجة ثابتة (النوع، المعرف، المرسل، المستقبل، المبلغ؛ بالإضافة إلى التاريخ في صفحة العنوان) وبدون أزرار نسخ لكل صف. تلغي قائمة البلوكات الفرز على الأجهزة المحمولة.

أثر خطأ طفيف في الالتفاف على قيم الملخص: كانت العناوين ومعرفات المعاملات تنكسر عند حرف واحد في النهاية حتى مع وجود مساحة كافية. كان السبب الجذري هو عنصر flex بخصائص min-width: 0 و overflow-wrap: anywhere الذي ينهار إلى مساهمة محتوى دنيا بحرف واحد، مما أجبر زر النسخ على إحداث كسر. تنمو القيمة الآن لملء الخلية (flex: 1)، مما يحافظ على العناوين ومعرفات المعاملات في سطر واحد بينما تستمر المفاتيح العامة في الالتفاف بشكل نظيف.

يصبح تلميح الأدوات الوحيد على مستوى الجسم تفاعلياً مع المؤشر فقط أثناء ظهوره ويختفي عند pointerdown، مما يضمن الخروج على أجهزة اللمس حيث لا يكون مؤقت الإخفاء التلقائي موثوقاً دائماً. بالنسبة لنظام iOS، يقوم Mobile Safari بتكبير أي حقل إدخال بتركيز إذا كان حجم الخط أقل من 16 بكسل، مما يترك الصفحة في حالة تمرير؛ تم تثبيت حقل البحث عند 16 بكسل، بينما تحافظ ميتا العرض على تمكين تكبير المستخدم لتسهيل الوصول.

تأكيد البلوك عبر WebSocket

يتم ترطيب إشعارات البلوك المدمجة عبر WebSocket من خلال Node REST API مع محاولة إعادة محاولة واحدة محدودة لتجاوز تأخير رؤية SQL المتوقع عبر العقد Block not found. لا يزال يجب تأكيد معرف البلوك والارتفاع المعلن عنه بواسطة احتياطي الارتفاع. يتم تسجيل الخطأ الأول في debug ويتم إصدار warn فقط عندما يتم استنفاد التأكيد تماماً، بحيث لا تنتج توقيتات العقد الروتينية ضوضاء خطأ. تغطي اختبارات الوحدة الخاصة بـ Node مسارات إعادة المحاولة، والاحتياطي، والتحقق، والتسجيل.

التحقق

تم اجتياز npm run lint و npm run format:check و npm run test:unit (225 اختباراً، بما في ذلك ترطيب البلوك عبر WebSocket). git diff --check نظيف، وتخطيطات سطح المكتب والأجهزة اللوحية فوق 720 بكسل لم تتغير ولا يوجد أي تراجع في الأداء.