Spec Workflow MCP

# دليل الواجهات يغطي هذا الدليل الواجهتين الأساسيتين لـ Spec Workflow MCP: لوحة تحكم الويب وإضافة VSCode. ## نظرة عامة يوفر Spec Workflow MCP واجهتين: 1. **لوحة تحكم الويب** - واجهة قائمة على المتصفح لمستخدمي CLI 2. **إضافة VSCode** - تجربة IDE متكاملة لمستخدمي VSCode توفر كلتا الواجهتين نفس الوظائف الأساسية مع تحسينات خاصة بالمنصة. ## لوحة تحكم الويب ### نظرة عامة لوحة تحكم الويب هي تطبيق ويب فوري يوفر وصولاً مرئيًا إلى مواصفاتك ومهامك وسير عمل الموافقات. ### بدء لوحة التحكم #### لوحة تحكم مستقلة ```bash # يستخدم منفذًا مؤقتًا npx -y @pimzino/spec-workflow-mcp@latest /path/to/project --dashboard # منفذ مخصص npx -y @pimzino/spec-workflow-mcp@latest /path/to/project --dashboard --port 3000 ``` #### مع خادم MCP ```bash # البدء التلقائي مع MCP npx -y @pimzino/spec-workflow-mcp@latest /path/to/project --AutoStartDashboard ``` ### ميزات لوحة التحكم #### العرض الرئيسي تعرض الصفحة الرئيسية للوحة التحكم: - **نظرة عامة على المشروع** - عدد المواصفات النشطة - إجمالي المهام - نسبة الإنجاز - النشاط الأخير - **بطاقات المواصفات** - اسم المواصفة والحالة - شريط التقدم - مؤشرات المستندات - إجراءات سريعة #### عرض تفاصيل المواصفة النقر على مواصفة يُظهر: - **علامات تبويب المستند** - المتطلبات - التصميم - المهام - **محتوى المستند** - markdown معروض - تمييز بناء الجملة - جدول المحتويات - **إجراءات الموافقة** - زر الموافقة - طلب التغييرات - خيار الرفض - حقل التعليق #### إدارة المهام يوفر عرض المهام: - **قائمة مهام هرمية** - مهام مرقمة (1.0, 1.1, 1.1.1) - مؤشرات الحالة - تتبع التقدم - **إجراءات المهام** - زر نسخ الأمر - وضع علامة مكتمل - إضافة ملاحظات - عرض التبعيات - **تصور التقدم** - شريط التقدم الإجمالي - تقدم القسم - تقديرات الوقت #### مستندات التوجيه الوصول إلى إرشادات المشروع: - **توجيه المنتج** - الرؤية والأهداف - شخصيات المستخدم - مقاييس النجاح - **التوجيه التقني** - قرارات الهندسة المعمارية - خيارات التكنولوجيا - أهداف الأداء - **توجيه الهيكل** - تنظيم الملفات - اصطلاحات التسمية - حدود الوحدات ### التنقل في لوحة التحكم #### اختصارات لوحة المفاتيح | الاختصار | الإجراء | |----------|--------| | `Alt + S` | التركيز على قائمة المواصفات | | `Alt + T` | عرض المهام | | `Alt + R` | عرض المتطلبات | | `Alt + D` | عرض التصميم | | `Alt + A` | فتح مربع حوار الموافقة | | `Esc` | إغلاق مربع الحوار | #### هيكل URL روابط مباشرة لطرق عرض محددة: - `/` - لوحة التحكم الرئيسية - `/spec/{name}` - مواصفة محددة - `/spec/{name}/requirements` - مستند المتطلبات - `/spec/{name}/design` - مستند التصميم - `/spec/{name}/tasks` - قائمة المهام - `/steering/{type}` - مستندات التوجيه ### التحديثات الفورية تستخدم لوحة التحكم WebSockets للتحديثات المباشرة: - **التحديث التلقائي** - تظهر المواصفات الجديدة فورًا - تحديثات حالة المهمة - تغييرات التقدم - إشعارات الموافقة - **حالة الاتصال** - أخضر: متصل - أصفر: إعادة الاتصال - أحمر: غير متصل - **نظام الإشعارات** - طلبات الموافقة - إنجازات المهام - تنبيهات الأخطاء - رسائل النجاح ### تخصيص لوحة التحكم #### إعدادات السمة التبديل بين الأوضاع الفاتحة والداكنة: - انقر على أيقونة السمة في الرأس - يستمر عبر الجلسات - يحترم تفضيلات النظام #### اختيار اللغة تغيير لغة الواجهة: 1. انقر على أيقونة الإعدادات 2. اختر اللغة من القائمة المنسدلة 3. تتحدث الواجهة فورًا اللغات المدعومة: - الإنجليزية (en) - اليابانية (ja) - الصينية (zh) - الإسبانية (es) - البرتغالية (pt) - الألمانية (de) - الفرنسية (fr) - الروسية (ru) - الإيطالية (it) - الكورية (ko) - العربية (ar) #### خيارات العرض تخصيص تفضيلات العرض: - بطاقات المواصفات المدمجة/الموسعة - إظهار/إخفاء المهام المكتملة - حجم خط المستند - سمة بناء جملة الكود ## إضافة VSCode ### التثبيت التثبيت من سوق VSCode: 1. افتح امتدادات VSCode (Ctrl+Shift+X) 2. ابحث عن "Spec Workflow MCP" 3. انقر على تثبيت 4. أعد تحميل VSCode أو عبر سطر الأوامر: ```bash code --install-extension Pimzino.spec-workflow-mcp ``` ### ميزات الإضافة #### لوحة الشريط الجانبي الوصول عبر أيقونة شريط النشاط: - **مستكشف المواصفات** - عرض شجري لجميع المواصفات - توسيع لرؤية المستندات - مؤشرات الحالة - إجراءات قائمة السياق - **قائمة المهام** - عرض مهام قابل للتصفية - تتبع التقدم - إجراءات سريعة - وظيفة البحث - **عرض الأرشيف** - المواصفات المكتملة - البيانات التاريخية - خيار الاستعادة - عمليات مجمعة #### عارض المستندات فتح المستندات في المحرر: - **تمييز بناء الجملة** - عرض Markdown - كتل الكود - مربعات اختيار المهام - الروابط والمراجع - **إجراءات المستند** - التحرير في مكانه - وضع المعاينة - عرض مقسم - خيارات التصدير #### الموافقات المتكاملة مربعات حوار VSCode الأصلية لـ: - **طلبات الموافقة** - إشعارات منبثقة - تعليقات مضمنة - الموافقة/الرفض السريع - ملاحظات مفصلة - **سير عمل المراجعة** - تتبع التغييرات - سلاسل التعليقات - مقارنة الإصدارات - سجل الموافقة #### إجراءات قائمة السياق إجراءات النقر بزر الماوس الأيمن في المحرر: - **على ملفات المواصفات** - الموافقة على المستند - طلب التغييرات - عرض في لوحة التحكم - نسخ مسار المواصفة - **على عناصر المهام** - وضع علامة مكتمل - نسخ الأمر - إضافة مهمة فرعية - عرض التفاصيل ### إعدادات الإضافة التكوين في إعدادات VSCode: ```json { "specWorkflow.language": "en", "specWorkflow.notifications.enabled": true, "specWorkflow.notifications.sound": true, "specWorkflow.notifications.volume": 0.5, "specWorkflow.archive.showInExplorer": true, "specWorkflow.tasks.autoRefresh": true, "specWorkflow.tasks.refreshInterval": 5000, "specWorkflow.theme.followVSCode": true } ``` #### أوصاف الإعدادات | الإعداد | الوصف | الافتراضي | |---------|-------------|---------| | `language` | لغة الواجهة | "en" | | `notifications.enabled` | إظهار الإشعارات | true | | `notifications.sound` | تشغيل تنبيهات صوتية | true | | `notifications.volume` | حجم الصوت (0-1) | 0.5 | | `archive.showInExplorer` | إظهار المواصفات المؤرشفة | true | | `tasks.autoRefresh` | التحديث التلقائي للمهام | true | | `tasks.refreshInterval` | فترة التحديث (ms) | 5000 | | `theme.followVSCode` | مطابقة سمة VSCode | true | ### أوامر الإضافة متاحة في لوحة الأوامر (Ctrl+Shift+P): | الأمر | الوصف | |---------|-------------| | `Spec Workflow: Create Spec` | بدء مواصفة جديدة | | `Spec Workflow: List Specs` | إظهار جميع المواصفات | | `Spec Workflow: View Dashboard` | فتح لوحة تحكم الويب | | `Spec Workflow: Archive Spec` | نقل إلى الأرشيف | | `Spec Workflow: Restore Spec` | استعادة من الأرشيف | | `Spec Workflow: Refresh` | إعادة تحميل بيانات المواصفة | | `Spec Workflow: Show Steering` | عرض مستندات التوجيه | | `Spec Workflow: Export Spec` | التصدير إلى markdown | ### الإشعارات الصوتية تتضمن الإضافة تنبيهات صوتية لـ: - **طلبات الموافقة** - رنين لطيف - **إنجاز المهمة** - صوت نجاح - **الأخطاء** - نغمة تنبيه - **التحديثات** - إشعار ناعم التكوين في الإعدادات: ```json { "specWorkflow.notifications.sound": true, "specWorkflow.notifications.volume": 0.3 } ``` ## مقارنة الميزات | الميزة | لوحة تحكم الويب | إضافة VSCode | |---------|--------------|------------------| | عرض المواصفات | ✅ | ✅ | | إدارة المهام | ✅ | ✅ | | الموافقات | ✅ | ✅ | | التحديثات الفورية | ✅ | ✅ | | نظام الأرشفة | ❌ | ✅ | | الإشعارات الصوتية | ❌ | ✅ | | تكامل المحرر | ❌ | ✅ | | قوائم السياق | ❌ | ✅ | | اختصارات لوحة المفاتيح | محدود | كامل | | متعدد المشاريع | يدوي | تلقائي | | الوصول دون اتصال | ❌ | ✅ | | خيارات التصدير | أساسي | متقدم | ## اختيار الواجهة المناسبة ### استخدم لوحة تحكم الويب عندما: - تستخدم أدوات AI قائمة على CLI - تعمل عبر IDEs متعددة - تحتاج وصولاً قائمًا على المتصفح - تشارك مع أعضاء الفريق - تحتاج نظرة عامة سريعة للمشروع ### استخدم إضافة VSCode عندما: - IDE الأساسي هو VSCode - تريد تجربة متكاملة - تحتاج ميزات المحرر - تفضل مربعات الحوار الأصلية - تريد إشعارات صوتية ## مزامنة الواجهة تشترك كلتا الواجهتين في نفس البيانات: - **المزامنة الفورية** - التغييرات في واحدة تنعكس في الأخرى - حالة موافقة مشتركة - حالة مهمة متسقة - تتبع تقدم موحد - **تخزين البيانات** - مصدر واحد للحقيقة - تخزين قائم على الملفات - لا حاجة للمزامنة - تحديثات فورية ## الوصول عبر الجوال والأجهزة اللوحية ### لوحة تحكم الويب على الجوال لوحة التحكم متجاوبة: - **عرض الهاتف** - بطاقات مواصفات مكدسة - تنقل قابل للطي - أزرار محسّنة للمس - إيماءات التمرير - **عرض الجهاز اللوحي** - تخطيط جنبًا إلى جنب - تفاعلات اللمس - تباعد محسّن - دعم الوضع الأفقي ### القيود على الجوال - لا يوجد إضافة VSCode - اختصارات لوحة مفاتيح محدودة - تعدد مهام مخفض - تفاعلات مبسطة ## ميزات إمكانية الوصول ### لوحة تحكم الويب - **التنقل بلوحة المفاتيح** - Tab عبر العناصر - Enter للتنشيط - Escape للإلغاء - مفاتيح الأسهم للقوائم - **دعم قارئ الشاشة** - تسميات ARIA - سمات الدور - إعلانات الحالة - إدارة التركيز - **إمكانية الوصول البصرية** - وضع التباين العالي - حجم خط قابل للتعديل - ملائم لعمى الألوان - مؤشرات التركيز ### إضافة VSCode ترث إمكانية وصول VSCode: - دعم قارئ الشاشة - التنقل بلوحة المفاتيح - سمات التباين العالي - وظيفة التكبير ## تحسين الأداء ### أداء لوحة التحكم - **التحميل الكسول** - المستندات تُحمل عند الطلب - ترقيم الصفحات للقوائم الطويلة - العرض التدريجي - تحسين الصور - **استراتيجية التخزين المؤقت** - التخزين المؤقت للمتصفح - Service worker - دعم محدود دون اتصال - تنقل سريع ### أداء الإضافة - **إدارة الموارد** - استخدام حد أدنى للذاكرة - مراقبة فعالة للملفات - تحديثات debounced - معالجة الخلفية ## استكشاف مشكلات الواجهة وإصلاحها ### مشكلات لوحة التحكم | المشكلة | الحل | |-------|----------| | لن يتم التحميل | تحقق من تشغيل الخادم، تحقق من URL | | لا توجد تحديثات | تحقق من اتصال WebSocket، أعد تحميل الصفحة | | الموافقة لا تعمل | تأكد من اتصال لوحة التحكم وMCP | | تنسيق معطل | امسح ذاكرة التخزين المؤقت للمتصفح، تحقق من وحدة التحكم | ### مشكلات الإضافة | المشكلة | الحل | |-------|----------| | لا تظهر المواصفات | تحقق من وجود دليل .spec-workflow في المشروع | | الأوامر لا تعمل | أعد تحميل نافذة VSCode | | لا توجد إشعارات | تحقق من إعدادات الإضافة | | الأرشيف غير مرئي | مكّن في الإعدادات | ## الاستخدام المتقدم ### URL لوحة تحكم مخصص التكوين في نوافذ طرفية متعددة: ```bash # النافذة الطرفية 1: خادم MCP npx -y @pimzino/spec-workflow-mcp@latest /project # النافذة الطرفية 2: لوحة التحكم npx -y @pimzino/spec-workflow-mcp@latest /project --dashboard --port 3000 ``` ### مساحات عمل متعددة الجذور للإضافة تدعم الإضافة مساحات عمل VSCode متعددة الجذور: 1. أضف مجلدات مشروع متعددة 2. كل منها يعرض مواصفات منفصلة 3. التبديل بين المشاريع 4. تكوينات مستقلة ## التوثيق ذو الصلة - [دليل التكوين](CONFIGURATION.md) - الإعداد والتكوين - [دليل المستخدم](USER-GUIDE.md) - استخدام الواجهات - [عملية سير العمل](WORKFLOW.md) - سير عمل التطوير - [استكشاف الأخطاء وإصلاحها](TROUBLESHOOTING.md) - المشكلات الشائعة