مرفقات Composer
لوحة المحرر التي تحمل المرفقات: شريط من مربعات بحجم 56px فوق المطالبة، والصورة المصغّرة للصور وأيقونة مستند الإضافة مع اسم الملف لكل شيء آخر، مع زر الإغلاق في الزاوية. تصل الملفات المنتظرة واحداً تلو الآخر، مع رسم حلقة التمييز في اتجاه عقارب الساعة حول المربع بالطريقة التي يتتبع بها كتلة رفع الملفات منطقة الإسقاط بينما تعدّ نسبة مئوية بحجم 9px تصاعدياً في الزاوية، ثم عند 100 تتلاشى النسبة المئوية وتظهر زر الإغلاق في نفس المكان.
التثبيت
الوضع الداكن جاهز - هذا مكوّن يتبع رموز التصميم الدلالية لـ BoardUI تلقائياً. إعداد تبديل السمة.
هل تستخدم حزمة واجهة مستخدم مشتركة أو أسماء استيراد مختصرة مخصصة؟ تهيئة مسارات التثبيت قبل تشغيل CLI. تستخدم أمثلة النسخ واللصق الاستيرادات الافتراضية.
قائمة انتظار الرفع
ComposerWithAttachments يمتلك قائمة الانتظار. أي ملف في attachments مع progress: 0 ينتظر دوره، ثم يتوسع، ويرسم حلقته ويعدّ في الزاوية؛ تظهر الملفات التي لا تحتوي على قيمة تقدم كأنها وصلت فورًا. عملية الرفع محاكاة حتى تبقى الكتلة مستقلة عن الخلفية: اضبطها باستخدام uploadDuration و uploadGap، والاستماع باستخدام onUploadComplete و onAllUploaded. أضف الملفات متى شئت؛ ستنضم إلى نهاية قائمة الانتظار.
const [files, setFiles] = useState<ComposerAttachment[]>([]);
function attach(picked: File[]) { setFiles((prev) => [ ...prev, ...picked.map((file) => ({ id: crypto.randomUUID(), name: file.name, kind: kindOf(file), progress: 0, // queued: lands after the ones before it })), ]);}
<ComposerWithAttachments attachments={files} onAttachmentsChange={setFiles} // dismissals come back through here uploadDuration={1100} // one simulated upload, ms uploadGap={240} // pause before the next ring starts, ms onUploadComplete={(file) => console.log("landed", file.name)} onAllUploaded={() => console.log("all landed")}/>أنواع البلاطات
ستة أنواع. image يملأ البلاطة بـ src ويحصل على زر إغلاق أبيض مثلج؛ تحمل أنواع المستند وجدول البيانات والعرض التقديمي والشيفرة والفيديو أيقونات الإضافات بحجم 24 بكسل التي تأتي مع قائمة الإضافة، مع اسم الملف بحجم 9 بكسل في الأسفل، مقتطعاً ليناسب البلاطة. كلا ComposerAttachmentStrip والمفرد ComposerAttachmentTile يتم تصديرها للأسطح خارج المحرر.
{/* Six tile kinds: images show the thumbnail, the rest carry the plugin document icons */}<ComposerAttachmentStrip attachments={[ { id: "1", name: "cat.jpg", kind: "image", src: "/uploads/cat.jpg" }, { id: "2", name: "payroll.docx", kind: "document" }, { id: "3", name: "timetable.xlsx", kind: "spreadsheet" }, { id: "4", name: "launch.key", kind: "presentation" }, { id: "5", name: "types.tsx", kind: "code" }, { id: "6", name: "birthday.mp4", kind: "video" }, ]} onRemove={(id) => remove(id)}/>
{/* Or one tile at a time */}<ComposerAttachmentTile attachment={file} onRemove={() => remove(file.id)} />أحضر أداة الرفع الخاصة بك
الحلقة مجرد رقم. تخطَّ الطابور وسلّم ComposerPanel المرفقات بنفسك، مع تعيين تقدم النقل الفعلي لكل ملف على progress: يتبعها الحلقة، ومسح القيمة يُشير إلى وصول الملف.
{/* Real uploads: feed the ring from your own progress events on the core panel */}<ComposerPanel attachments={files.map((file) => ({ ...file, progress: uploads[file.id], // 0–100 draws the ring, undefined means landed }))} onRemoveAttachment={(id) => cancel(id)}/>