نموذج واجهة مستخدم أداة مقارنة JSON الداكنة

الهدف: إنشاء نموذج أولي لواجهة مستخدم تطبيق سطح مكتب بالوضع الداكن لأداة مقارنة JSON باسم {argument name="app name" default="Tilted Diffs"}، لعرض مقارنات استجابات واجهة برمجة التطبيقات (API) بعنوان {argument name="diff title" default="API Response — Checkout v2"}. مساحة العمل: لقطة شاشة عريضة بنسبة 16:10، بحجم 1152×768 تقريبًا، مع نافذة تطبيق بنمط macOS تطفو على خلفية زرقاء داكنة متدرجة. استخدم ظلالًا خفيفة، وزوايا مستديرة، وحواف رفيعة، وجماليات أدوات مطورين مُحسّنة. التصميم: يتكون التطبيق من أربعة أقسام رئيسية: شريط جانبي أيسر، وشريط أدوات علوي يمتد على مساحة المحرر، وثلاث لوحات رأسية لمحرر التعليمات البرمجية. يتم تحديد لوحة المحرر الأولى بهالة تركيز زرقاء ساطعة. تعرض اللوحة الوسطى تمييزات ملونة مضمنة للاختلافات. أما اللوحة الموجودة في أقصى اليمين فهي أضيق ومرئية جزئيًا، وتشبه علامة تبويب ملف إضافية أو عمود مقارنة ثالث. الشريط الجانبي الأيسر: تعرض الزاوية العلوية اليسرى زر إشارة مرور macOS: ثلاث دوائر، حمراء وصفراء وخضراء على التوالي. أسفل اسم التطبيق يوجد مربع بحث مع النص التوضيحي "بحث عن الفروقات..." واقتراحات لوحة المفاتيح. فيما يلي ثمانية عناصر محفوظة من قائمة الفروقات، كل منها يحمل أيقونة مستند صغيرة وطابعًا زمنيًا: 1) "استجابة واجهة برمجة التطبيقات - عملية الدفع الإصدار 2"، تعرض "اليوم، 10:24 صباحًا"، ومميزة باللون الأزرق كعنصر محدد؛ 2) "ملف تعريف المستخدم - واجهة برمجة التطبيقات العامة"، يعرض "أمس، 4:18 مساءً"؛ 3) "نقطة نهاية الطلبات - الإصدار 1 مقابل الإصدار 2"، يعرض "20 مايو 2025، 9:14 صباحًا"؛ 4) "كتالوج المنتجات - منطقة الاتحاد الأوروبي"، يعرض "19 مايو 2025، 2:47 مساءً"؛ 5) "استجابة المصادقة - تسجيل الدخول الموحد"، يعرض "18 مايو 2025، 11:03 صباحًا". ٦) "ملخص الفواتير - الربع الثاني"، يعرض "١٧ مايو ٢٠٢٥، الساعة ٣:٢٢ مساءً"؛ ٧) "حمولة Webhook - Stripe"، يعرض "١٦ مايو ٢٠٢٥، الساعة ١٠:١١ صباحًا"؛ ٨) تعرض رسالة "نتائج البحث - الصلة" "١٥ مايو ٢٠٢٥، الساعة ٥:٣٥ مساءً". يحتوي الجزء السفلي على زر أزرق بارز "+ مقارنة جديدة" وأيقونة ترس صغيرة. يعرض شريط الأدوات العلوي "استجابة واجهة برمجة التطبيقات - الدفع الإصدار ٢" على اليسار، مصحوبًا بأيقونة قلم تحرير صغيرة. يحتوي عنصر تحكم مجزأ في المنتصف على تسميتين: "المحررون" (محدد باللون الأزرق) و"المقارنة" (غير محدد). يحتوي الجانب الأيمن على أربعة اختصارات لوحة مفاتيح مختصرة تحمل التسميات "⌘T إضافة عمود"، و"⌘D تبديل المقارنة"، و"⌘← / ⌘→ تحريك التركيز"، مع مسافة صغيرة بين المجموعات. تستخدم لوحة المحرر خطًا ثابت المسافة لعرض التعليمات البرمجية، وأرقام الأسطر، وتمييزًا لبنية JSON، ولوحة زرقاء داكنة، وحواف دائرية رفيعة. تحمل اللوحة اليسرى عنوان "source.json" مع أيقونة مستند وقائمة بثلاث نقاط. تحمل اللوحة الوسطى عنوان "target.json" مع أيقونة مستند وقائمة بثلاث نقاط. أما اللوحة اليمنى الضيقة فتحمل عنوان "more.json" وتعرض الجانب الأيسر فقط من التعليمات البرمجية، مما يوحي بوجود محتوى زائد. تحتوي كل لوحة محرر كاملة على شريط حالة في الأسفل يعرض "السطر 1، العمود 1"، و"المسافات: 2"، و"UTF-8"، و"LF"، و"JSON". يعرض محتوى التعليمات البرمجية استجابة JSON لعملية إتمام الطلب. ويستخدم معرف الطلب "req_8f3a9b42"، ومعرف الطلب "ord_123456"، والعملة الدولار الأمريكي، ومعلومات المنتج والشحن لسماعات الرأس اللاسلكية وحقيبة السفر. يجب أن تتضمن النسخة الأصلية على اليسار الطابع الزمني "2025-05-21T10:24:31Z"، والإصدار "v1"، والحالة "معلقة"، والمبلغ الإجمالي 129.99، وسعر وحدة سماعات الرأس اللاسلكية 99.99 (الخصم غير متوفر)، وعدد حقائب السفر 1، وسعر الوحدة 30.00 (الخصم غير متوفر)، وطريقة الشحن "قياسية"، والمدة المتوقعة 5 أيام، والعنوان "123 شارع ماركت". يجب أن تعرض النسخة الوسيطة المستهدفة علامة اختلاف على الهامش الأيسر، وأن تكون مميزة بخطوط ملونة: أحمر للأسطر المحذوفة، وأخضر للأسطر المضافة، وأصفر للأسطر المعدلة. يجب أن تتضمن التغييرات ما يلي: تغيير الطابع الزمني من "2025-05-20T15:11:09Z" إلى "2025-05-21T10:24:31Z"، وتغيير الإصدار إلى الإصدار 2، وتغيير الحالة من معلق إلى مؤكد، وتغيير المبلغ الإجمالي إلى 139.99، وتغيير سعر وحدة سماعة الأذن اللاسلكية إلى 109.99 مع خصم 10.00، وتغيير عدد حقائب السفر إلى 2، وتغيير طريقة التسليم إلى الشحن السريع، وتغيير المدة المقدرة للتسليم إلى يومين. يجب عرض حوالي 32 سطرًا من التعليمات البرمجية المرقمة في كل محرر كامل. النمط المرئي: واجهة متقدمة لأداة تطوير SaaS، عرض واضح على مستوى المتجهات، سمة داكنة، لون أزرق كوبالت مميز، نص رمادي فاتح، لقطات شاشة واقعية ونظيفة لواجهة المستخدم، بدون شخصيات بشرية، بدون علامات مائية، وبدون حدود للمتصفح خارج نافذة التطبيق. حافظ على وضوح جميع النصوص ومحاذاتها مع الشبكة.