# تصميم لوحة الإدارة ومعاينة Studio المحلية

آخر تحديث 2026-10-18. يسجل هذا المرجع نظام تصميم لوحة الإدارة والتنقل فيها ومعاينة Studio المؤقتة. لا يمنح موافقة للنشر الإنتاجي. راجع [جاهزية النشر](https://base.sbarah.com/docs/reference/deployment-readiness/).

## رموز تصميم Supabase ومكوناتها

تعتمد لوحة الإدارة لغة تصميم Supabase نفسها. ألوانها هي الرموز الدلالية في [حزمة واجهة Supabase](https://github.com/supabase/supabase/tree/master/packages/ui) (الملف `build/css/source/semantic.css` مع `themes/light.css` و`themes/dark.css`، الإيداع `7425d493`)، محسوبة إلى قيم ثابتة في `ui/style.css`. وتتبع الأزرار والحقول ومربعات النص والبطاقات والتنبيهات والشارات والجداول وحلقة التركيز وصفات مكونات [Button](https://github.com/supabase/supabase/blob/master/packages/ui/src/components/Button/Button.tsx) و[Input](https://github.com/supabase/supabase/blob/master/packages/ui/src/components/shadcn/ui/input.tsx) و[Card](https://github.com/supabase/supabase/blob/master/packages/ui/src/components/shadcn/ui/card.tsx) و[Alert](https://github.com/supabase/supabase/blob/master/packages/ui/src/components/shadcn/ui/alert.tsx) و[Badge](https://github.com/supabase/supabase/blob/master/packages/ui/src/components/shadcn/ui/badge.tsx) و[Table](https://github.com/supabase/supabase/blob/master/packages/ui/src/components/shadcn/ui/table.tsx)، ووصفات حلقة التركيز وظلال العناصر في `packages/config/css/utilities.css`، مكتوبة بـ CSS عادي على أسماء الأصناف الموجودة في اللوحة. لا نثبّت أي مكوّن React من Supabase ولا Tailwind ولا Radix. المستودع مرخّص بـ Apache 2.0، والحزمتان `packages/ui` و`packages/config` تعلنان MIT، والإسناد ونص ترخيص MIT في `NOTICE`.

يبقى النص والأسطح على إعداد التباين الافتراضي في Supabase (0.5). أما الحدود فترفع إعداد التباين نفسه في Supabase إلى 0.75، وتأخذ الحقول القابلة للتعديل حدّ حالة المرور حتى وهي ساكنة، لأن البطاقات والحقول والأزرار تذوب في رمادي واحد على الإعداد الافتراضي. وتختلف بعض القيم عن الأصل لتحقيق WCAG AA: أفتح درجة نص في الوضع الفاتح أغمق قليلًا، ولون المرور على زر الحذف في الوضع الداكن يغمق بدل أن يفتح حتى يبقى النص الأبيض بتباين 4.5:1. وعُدّل كذلك النص الصغير في لوحة الصورة بصفحة الدخول إلى 4.5:1.

ماذا يعني كل عنصر:

- **الإجراء الأساسي**: الزر الأخضر المصمت، زر واحد في كل مرة للمهمة التي أمامك. باقي الأزرار على السطح المرتفع الافتراضي، وتأكيدات الحذف حمراء مصمتة.
- **الحقول القابلة للتعديل** غائرة، وحدّها بتباين 3:1 على الأقل مع البطاقة. **القيم للقراءة فقط** (الرموز والمفاتيح والعناوين والأوامر) مملوءة بخط ثابت العرض وحدّ هادئ، فتُقرأ على أنها شيء يُنسخ.
- **البطاقات** لها شريط عنوان، ويصير أول عنوان في القسم هو هذا الشريط. لوحة السر الذي يظهر مرة واحدة لها إطار وعنوان أخضران.
- **التنبيهات** ثلاثة: تحذير (كهرماني) وخطأ (أحمر) ونجاح (أخضر)، ولكل منها طرف ملوّن. وشارات الحالة بالألوان الثلاثة نفسها.
- **التركيز** حلقة بعرض 2px وبُعد 2px باللون الأخضر، بتباين 3:1 على الأقل مع كل سطح.

يفحص `tests/ui-contrast.test.ts` كل أزواج النص والحدود السابقة في الوضعين. على الكمبيوتر ارتفاع الأزرار 32px والحقول 34px، وعلى الهاتف لا يقل ارتفاع الأزرار عن 36px. لم يتغير ترتيب التركيز ولا أخطاء الحقول ولا سلوك القوائم الأصلية ولا خيار الوضع الفاتح أو الداكن أو وضع النظام.

تظهر المشاريع كبطاقات، وللفريق وإعدادات المؤسسة عناصر منفصلة في القائمة الجانبية. تنقسم صفحة البيئة إلى النظرة العامة وStudio والمصادقة والخدمات والاستهلاك ومفاتيح API. تُفك الأقسام غير المحددة لإيقاف طلباتها واستطلاعها الدوري. الانتقال بين الأقسام يتخلى عن المسودات غير المحفوظة داخل نماذجها الفرعية؛ إعادة المحاولة في القسم نفسه تحفظ القيم. إذا أزالت الصلاحيات القسم المحدد يعود العرض إلى النظرة العامة.

## التنقل داخل مساحة Studio

تحديث 2026-10-10: تدخل التذكرة إلى `/project/default` مباشرة. يظهر Studio الأصلي كصفحة كاملة، مع الحفاظ على HTML والتنقل والترويسات الأمنية الأصلية. يبقى `/__sbarbase/workspace` محدداً اختيارياً للبيئة فقط دون محرر مضمّن. يدير النظام اختيار المنظمة والمشروع، ويفتح Studio تلقائياً بعد جاهزية production الجديدة. يبقى دخول المشاريع الموجودة بنقرة واحدة. راجع [تحليل التجربة](https://github.com/M7MMAD-OMAR/sbarbase/blob/main/docs/design/USER-JOURNEY.ar.md).

يبقى التبديل مشروطاً بطلب POST من المصدر نفسه، ومدخلات محدودة، وصلاحيات حالية للمصدر والهدف، وخدمة هدف عاملة. تصدر تذكرة جديدة خاصة بالهدف. تشمل هذه الضوابط المحدد الاختياري أيضاً. المعاينة أدناه دليل تاريخي من 2026-10-06 وليست صورة لمسار الدخول الافتراضي المحدّث.

تحتوي المعاينة المحلية على http://127.0.0.1:8790/__sbarbase/workspace قاعدة فعلية واحدة، Sbar Shop / Production. تأتي أسماء المنظمات والمشاريع الأخرى من نموذج لوحة الإدارة ولا تفتح قاعدة فعلية ثانية. فُحص تبديل التذاكر بين المضيفين بصورة منفصلة باستخدام نموذج متصفح، وليس تثبيتاً فعلياً ثانياً.

## لقطة الخادم والمراقبة الكاملة

يمكن لمشغّل التثبيت طلب GET /management/v1/server. يتحقق كل طلب من الهوية ومن صلاحية المشغّل قبل قراءة التخزين المؤقت الكسول الذي يستمر خمس ثوان. لا يمكن للمستخدمين الآخرين جمع هذه العدادات. تحمل الردود Cache-Control: no-store.

تعرض البطاقات أنوية المعالج ومتوسط الحمل ومدة التشغيل والذاكرة والمبادلة وسعة نظام الملفات المتاح للتطبيق. قد تتضمن العدادات قيماً عامة للمضيف حتى عندما يعمل التطبيق داخل حاوية. لا تقيس حدود cgroup أو سجل Docker أو أداء قاعدة البيانات. تبقى العدادات المفقودة أو غير المتسقة غير متاحة. التحديث يدوي.

[Beszel](https://beszel.dev/guide/what-is-beszel) مراقب مستقل بترخيص MIT لسجل استهلاك المضيف وحاويات Docker والتنبيهات. توفر اللوحة رابط دليل إعداده. لم نثبته أو نربط تسجيل دخوله بهذا التغيير. استخدم حساب إدارة خاصاً ومستقلاً، ولا تضع رموز خدمة Sbarbase في روابط المراقبة. واجهة [Supabase Metrics API](https://supabase.com/docs/guides/observability/metrics) المستضافة غير متاحة للتثبيت الذاتي.

## حدود العرض المحلي

تستخدم لوحة الإدارة على http://127.0.0.1:8787 حساباً نموذجياً معلناً داخل الذاكرة. ليس تسجيل دخول إنتاجياً عاملاً. يفتح Sbar Shop / Production وحده Studio الأصلية المنفصلة على http://127.0.0.1:8790/__sbarbase/workspace.

تستخدم Studio قاعدة PostgreSQL تجريبية فعلية اسمها sbarbase_preview، تحتوي public.preview_tasks وصفّين نموذجيين. تحققنا من تحميل الجدول وتنفيذ استعلام العد من واجهة Studio نفسها. تعمل صور Studio وpostgres-meta الأصلية المثبتة بالملخص والموجودة محلياً مع تهيئة PostgreSQL مستقلة ومؤقتة. لا يثبت ذلك مسار التجهيز الكامل أو الإعداد الأصلي أو الترحيل في التطبيق.

لا تعمل Auth أو REST أو Storage أو Realtime أو Functions أو Logs في هذا العرض المحلي. فحوص المستشار غير متاحة دون التهيئة الأصلية الكاملة. تستخدم الاستعلامات المحفوظة مجلداً مؤقتاً خاصاً. لم نربط بيانات محفوظة للتطبيق أو حاويات مشاريع أخرى.

تستخدم الحاويات الثلاث المملوكة شبكة داخلية وجذور ملفات للقراءة فقط وتخزيناً مؤقتاً خاصاً، دون مجلدات مضيف أو مقبس Docker، مع سجلات محدودة ودون مبادلة للحاويات. مجموع حدود الذاكرة 1792 MiB ومجموع حدود المعالج نواة واحدة. يحذف المتحكم موارده وحدها بعد ساعتين أو قبل ذلك إذا انخفضت ذاكرة المضيف المتاحة عن 2 GiB. تختفي الجداول والاستعلامات المحفوظة عند انتهاء العرض. الرابط محلي فقط ولا يتطلب حساب معاينة، ويجب ألا يُعرض للعموم.

## نطاق التحقق

فُحصت اللوحة بمجموعة اختبارات Bun الحالية وفحص أنواع الواجهة وبنائها وفحوص اللغتين والروابط والمراجع ومسارات المتصفح. تشمل فحوص المتصفح التحقق من الحقول وإعادة المحاولة والتنقل المنفصل وتبديل المؤسسات وعدم تجاوز عرض الهاتف والعدادات الفعلية. للجداول وSQL في Studio الأصلية فحص متصفح منفصل. ما زال قبول التثبيت الكامل وجاهزية الإنتاج مفتوحين.

نجح التحقق من مساحة التنقل في 362 اختبار Bun وفحص أنواع الواجهة وفحص أنواع محدد لمصادر التطبيق واختبارات التنقل الجديدة. ما زال فحص أنواع لوحة التحكم الأوسع يبلغ عن 16 خطأ أنواع في اختبارات موجودة. يشمل فحص المتصفح تسمية القوائم والتبديل الموقّع بين المضيفين والأهداف غير المتاحة والأسماء غير الموثوقة وإعادة المحاولة بعد فشل الطلب وعدم تجاوز عرض الهاتف. لا يمنح موافقة للتثبيت الكامل أو الإنتاج.