بنِ واجهات ذكاء اصطناعي صناعية باستخدام سمة Solid Glass لـ shadcn/ui

شنو كيدير Solid Glass

Solid Glass هو ثيم بصري لـ shadcn/ui، مصمّم للوحات الذكاء الاصطناعي الصناعية، وواجهات تحكم المشغّلين، ولوحات البيانات. كيعطي للواجهات ألواح سميكة ودخانية كيبانو صلبين من بعيد، وكيتكشف الطابع الزجاجي ديالهم بالأساس فالحواف.

بخلاف تأثيرات الزجاج السائل، Solid Glass ما كيخليش الخلفية تنافس النص. السطح ديالو كيستعمل لون رمادي محايد ما كينحنيش، ما كيتدفقش، وما كياخدش اللون من المحتوى اللي وراه. اللمسة النهائية كتجي من خط خفيف فالجزء الفوقاني، وحد رقيق، وظل تحت السطح.

المشروع كيشمل مجموعة مكوّنات shadcn/ui ومجموعة أخرى ديال المكوّنات للواجهات اللي كيخدم فيها وكيل ذكاء اصطناعي. الموقع الرسمي ديال Solid Glass كيعرض هاد المادة عبر المكوّنات المتوفرة، وكيشمل صفحة Create لضبط المتغيّرات البصرية ديالها.

الخصائص والمكوّنات الرئيسية

• ورقة أنماط وحدة كتطبّق الثيم على مكوّنات shadcn/ui باستعمال سمات وclasses ديال data-slot الموجودة أصلاً.
• الثيم كيعرّف أسماء المتغيّرات ديال shadcn/ui، بما فيها ثلاث درجات ديال سماكة الزجاج، والألوان، والحركة، والحالة البصرية الوحيدة ديالو.
• الوضع الداكن هو التصميم الأساسي للمادة، وكاين حتى ثيم فاتح.
• صفحة Create كتخليك تضبط السماكة، والصبغة، ولون المخططات، والنوع، ونصف القطر، والحافة، والضبابية، ومن بعد تنسخ CSS الناتج.
• السجل كيوفّر مكوّنات Solid Glass قابلة للتثبيت عبر واجهة shadcn.

المكوّنات الخاصة بـ Solid Glass كتشمل status-glyph وpanel وtag وdot-loader. والمكوّنات الموجّهة للوكلاء كتشمل turn-status وcomposer وtool-steps وdiff-view وask-card وcontext-ring وtask-notice وreasoning.

ثبّت الثيم

1. بدا بمشروع shadcn/ui

استعمل مشروع shadcn/ui مبني على React 19 وTailwind CSS 4 ومكوّنات Base UI. إلا كنت غادي تبدا من الصفر، هيّئو بهاد الأمر:

npx shadcn@latest init

2. زِد ورقة أنماط Solid Glass

تقدر تثبّت ورقة الأنماط من السجل المستضاف أو مباشرة من المستودع:

npx shadcn@latest add https://deeplethe.github.io/solid-glass/r/solid-glass.json
npx shadcn@latest add deeplethe/solid-glass/solid-glass

3. استوردها من بعد الأنماط الموجودة

استورد Solid Glass من بعد ورقة أنماط Tailwind وshadcn/ui. الثيم كيعرّف نفس أسماء متغيّرات الألوان اللي كينشئها shadcn init، لذلك حيد كتل متغيّرات الألوان :root و.dark اللي تولدات قبل ما تزيد الاستيراد.

@import "tailwindcss";
@import "tw-animate-css";
@import "shadcn/tailwind.css";
@import "./solid-glass.css";

من بعد هاد الاستيراد، مكوّنات shadcn/ui الموجودة عندك تقدر تستعمل المادة بلا تغييرات فالمكوّنات. باش تشوف شرح التثبيت كامل، راجع صفحة تثبيت Solid Glass.

ثبّت مكوّنات Solid Glass

المكوّنات الخاصة بـ Solid Glass كتستعمل نفس طريقة العمل ديال سجل shadcn. مثلاً، ثبّت مؤشّر الحالة بهاد الأمر:

npx shadcn@latest add https://deeplethe.github.io/solid-glass/r/status-glyph.json

عاود نفس الأمر مع رابط السجل الخاص بأي مكوّن آخر. الإدخالات المتوفرة فالسجل كتشمل عروضا للحالة، ولوحات، وتسميات، ومؤشرات التحميل، ومعلومات دور الوكيل، ومناطق الكتابة، وخطوات الأدوات، والفروقات، والأسئلة، واستعمال السياق، وإشعارات المهام، وواجهات عرض الاستدلال.

شغّل المشروع محلياً

باش تخدم على عرض Solid Glass أو تفحص المصدر ديالو، نسخ المستودع، وثبّت التبعيات، وشغّل خادم التطوير:

npm install
npm run dev

موقع التطوير كيتشغّل فـ http://localhost:5191. وأوامر الإنتاج والتحقق هي:

npm run build
npm run typecheck

البناء كيكتب ناتج الإنتاج فـ dist/.

استكشف أدوات التطوير

المستودع كيشمل مسارات خاصة بالتطوير كتعاونك تفحص الثيم والأمثلة:

• /dev/banner كيعرض شريط التطوير المستعمل فالمشروع.
• /dev/examples كيركّب جميع الأمثلة وكيبلّغ على الأمثلة اللي كتفشل.
• /dev/examples?q=button,card كيسّفي الأمثلة المعروضة.
• /dev/examples?theme=light كيعرض معاينة الأمثلة بالثيم الفاتح.
• /dev/examples?hover=<selector> كيعرض عنصراً مطابقاً كما إلا كان المؤشر فوقو.
• /dev/examples?click=<selector> كيضغط على عنصر مطابق باش تفحص شنو كيفتح.

إلا نشرت الموقع خارج مسار GitHub Pages الافتراضي ديال المستودع، عيّن SOLID_GLASS_ORIGIN للعنوان اللي كيتخدم فيه الموقع، وSOLID_GLASS_BASE للمسار ديالو. مكوّنات Solid Glass كتستعمل الأصل ملي كتكون كتشير لبعضياتها.

فهم بنية المشروع

أهم الملفات والمجلدات هي:

• src/solid-glass.css فيه الثيم الكامل ديال المادة.
• registry.json كيشرح شنو كيثبّت shadcn CLI. وبناء الـregistry كينشئ حتى public/r/ ديال الموقع.
• src/components/ui/ فيه مكوّنات shadcn/ui وSolid Glass اللي كيبانو فالموقع.
• src/create/ وsrc/pages/create.tsx كينفّذو صفحة تخصيص المادة.
• src/examples/ فيه ملف صغير لكل مثال.
• content/ كيخزّن توثيق المكوّنات والمشروع.
• scripts/build-docs.mjs كيحوّل التوثيق إلى src/docs/generated.json.

إنشاء مكوّن Solid Glass

باش تزيد مكوّناً من عندك، تبع نفس التنظيم اللي مستعمل فالمشروع:

1. أنشئ src/components/ui/<name>.tsx. كتبُه بحال مكوّن shadcn/ui، استعمل مكوّنات مبنية على الدوال، زِد data-slot لكل جزء، واستعمل cn() من @/lib/utils.
2. زِد src/examples/<name>-demo.tsx، ومعاه ملف لكل مثال إضافي.
3. أنشئ content/solid/<name>.mdx. ضمّن فيه front matter فيه العنوان والوصف، ومعاينة المكوّن، وتعليمات التثبيت والاستعمال، وعنواناً لكل مثال.

خلي المادة منسجمة مع قواعد التصميم الأربعة ديالها: اللمسة النهائية كتكون فالحافة، والأسطح خاصها تبان ثقيلة ماشي خفيفة، والعمق كيتعبّر عليه بالسُّمك، والواجهة كتستعمل حالة وحدة.

تخصيص متقدّم باستعمال صفحة Create

حلّ صفحة Create باش تضبط المادة بشكل تفاعلي. بدّل السُّمك، والصبغة، ولون المخطط، والنوع، ونصف القطر، والحافة، والضبابية، والمعاينة غادي تتحدّث مباشرة. ملي توصل لنتيجة مناسبة للواجهة ديالك، نسخ إخراج CSS الصغير وكيّف المتغيّرات المعنية فملف الأنماط ديال المشروع.

الاختيارات المتاحة محددة فـsrc/create/options.ts، بينما بطاقات المعاينة كتستعمل مكوّنات shadcn/ui. هاد الشي كيخلي الصفحة مفيدة كأداة للتصميم وكمرجع لفهم كيفاش كتأثر متغيّرات الثيم على المادة.

الخلاصة

Solid Glass طريقة بسيطة باش تعطي لتطبيق shadcn/ui موجود مظهراً زجاجياً واضحاً وكيبان متين. ثبّت ملف الأنماط ديالو من بعد ملفات الثيم العادية، وزِد المكوّنات الموجّهة للوكلاء من الـregistry ملي تحتاجها، واستعمل الأمثلة المحلية أو صفحة Create باش تصقل النتيجة. المشروع منشور برخصة MIT؛ والمكوّنات والتوثيق اللي جايين من shadcn/ui باقين خاضعين لرخصة MIT ديال المؤلفين ديالهم، كيفما مذكور فـNOTICE.md.