قائمة المهام
سجل متدفق لما فعله الوكيل فعليًا. تظهر المهام وحدة واحدة في كل مرة، كل منها يحرّك ارتفاعه الخاص مع تلاشٍ وارتفاع قصيرين، فيكبر الخيط كما يكبر العمل بدلًا من القفز. تومض المهمة عنوانها الجاري حتى تستقر كل خطوة، ثم تهدأ.
في محادثة دردشة
السطح الذي بُني من أجله. إرسال الرسالة يبدأ التشغيل، ويتدفق السجل أسفل دور المستخدم، ولا تصل الإجابة إلا بمجرد onComplete يُطلَق. إسناد مفتاح للقائمة بناءً على معرّف الدور يمنح كل إرسال تشغيلاً جديداً.
const [phase, setPhase] = useState("idle");
// The log is keyed on the turn, so each send starts a fresh run.{phase !== "idle" && ( <TaskList key={turnId} tasks={tasks} onComplete={() => setPhase("answered")} />)}التثبيت
قائمة المهام جزء من BoardUI Pro.
الوضع الداكن جاهز - هذا مكوّن يتبع رموز التصميم الدلالية لـ BoardUI تلقائياً. إعداد تبديل السمة.
هل تستخدم حزمة واجهة مستخدم مشتركة أو أسماء استيراد مختصرة مخصصة؟ تهيئة مسارات التثبيت قبل تشغيل CLI. تستخدم أمثلة النسخ واللصق الاستيرادات الافتراضية.
رقائق الموارد
يمكن للخطوة تسمية الملفات أو الموارد التي لمستها. مرّر chips وكل منها يُصيَّر مضمّناً بعد التسمية، مع رمز اختياري لنوع الملف. تُقتطع الأسماء الطويلة بدلاً من التفاف الصف.
import { RiReactjsLine } from "@remixicon/react";
const steps = [ { label: "Read", chips: [ { label: "page.tsx", icon: <RiReactjsLine className="size-3.5 text-[#61dafb]" /> }, { label: "layout.tsx", icon: <RiReactjsLine className="size-3.5 text-[#61dafb]" /> }, ], },];التوقيت والطي
startDelay يحتفظ بأول ظهور حتى لا يقع السجل في نفس الإطار الزمني لدور المستخدم، و stepInterval يضبط إيقاع الباقي. اضبط collapseOnComplete عندما يكون السجل تاريخًا لا الحدث الرئيسي، وتُطوى كل مهمة فور اكتمال خطواتها. مرِّر "all" بدلاً من ذلك لإبقاء كل مهمة مفتوحة حتى انتهاء التشغيل ثم إغلاقها دفعةً واحدة، وهو ما يناسب الخيط الذي تتبع فيه الإجابة السجل. في كلتا الحالتين يمكن للقارئ فتح أي مهمة بالنقر على عنوانها.
// Each task folds away as soon as its own steps land.<TaskList tasks={tasks} startDelay={320} stepInterval={850} collapseOnComplete/>
// Every task stays open until the whole run lands, then they close together.<TaskList tasks={tasks} collapseOnComplete="all" />تشغيله من أحداث حقيقية
الفاصل الزمني هو بديل مؤقت. الخطوات الحقيقية لا تستغرق وقتاً متساوياً، لذا بمجرد حصولك على بث مباشر، مرّر revealed وتقدّمه مع حل استدعاءات الأدوات. يتوقف المؤقت الداخلي وتبقى كل الرسوم المتحركة كما هي.
// Each task contributes one unit for its header plus one per step, so// `revealed` counts units rather than steps. Drive it from real events// and the internal timer stays out of the way.<TaskList tasks={tasks} revealed={unitsSeen} />