refactor: style css -> tailwindcss

This commit is contained in:
tao.chen
2026-09-02 10:10:41 +08:00
committed by tao.chen
parent c6e931d1bc
commit b2870fb568
9 changed files with 475 additions and 2142 deletions
@@ -23,49 +23,63 @@ export function ScheduleList({
: schedules;
return (
<section className="schedule-panel schedule-list-panel">
<section className="flex min-h-0 flex-col overflow-hidden border-b border-[#e3e9ef]">
<div
className="schedule-panel__title"
className="flex min-h-[48px] items-center justify-between px-3"
onContextMenu={(event) => onContextMenu(event, null)}
>
<div><strong></strong><span>{schedules.length}</span></div>
<div className="flex items-center gap-[7px]">
<strong className="text-[14px] text-[#223247]"></strong>
<span className="inline-grid h-[20px] min-w-[20px] place-items-center rounded-[10px] bg-[#eef3f8] px-[5px] text-[10px] text-[#718195]">
{schedules.length}
</span>
</div>
</div>
<label className="schedule-search">
<label className="mx-[10px] mb-[7px] flex min-h-[35px] items-center gap-[7px] rounded-[6px] border border-[#dce5ed] bg-white px-[9px] text-[#95a3b2] focus-within:border-[#8db9e8] focus-within:shadow-[0_0_0_3px_rgb(38_124_216_/_8%)]">
<Icon name="search" size={15} />
<input
className="min-w-0 flex-1 border-0 bg-transparent text-[12px] text-[#33475d] outline-none placeholder:text-[#a6b2be]"
value={keyword}
placeholder="搜索调度名称"
onChange={(event) => onKeywordChange(event.target.value)}
/>
</label>
<div
className="schedule-list"
className="min-h-0 overflow-auto px-2 pb-[9px]"
onContextMenu={(event) => onContextMenu(event, null)}
>
{loading ? (
<p className="schedule-empty"></p>
<p className="my-[18px_10px] text-center text-[11px] leading-[1.6] text-[#95a2b0]">
</p>
) : filtered.length ? (
filtered.map((item) => (
<button
className={`schedule-card${
selectedScheduleId === item.schedule_id ? " schedule-card--active" : ""
}`}
className={`relative mb-1.5 flex min-h-[62px] w-full cursor-pointer items-center gap-[9px] rounded-[6px] border border-[#e1e8ef] bg-white px-[10px] py-2 text-left text-[#526276] hover:border-[#b9cfe7] hover:bg-[#f8fbff] data-[state=active]:border-[#89b8ec] data-[state=active]:bg-brand-soft data-[state=active]:text-[#1c64b1] data-[state=active]:shadow-[inset_3px_0_#247fdc]`}
data-state={selectedScheduleId === item.schedule_id ? "active" : "idle"}
key={item.schedule_id}
type="button"
onClick={() => onSelect(item.schedule_id)}
onContextMenu={(event) => onContextMenu(event, item)}
>
<span className={`schedule-status${item.enabled ? " is-enabled" : ""}`} />
<span>
<strong>{item.schedule_name}</strong>
<small>
<span
data-state={item.enabled ? "enabled" : "disabled"}
className="h-2 w-2 flex-none rounded-full bg-[#aeb9c5] shadow-[0_0_0_3px_rgb(142_156_171_/_11%)] data-[state=enabled]:bg-success data-[state=enabled]:shadow-[0_0_0_3px_rgb(24_185_121_/_12%)]"
/>
<span className="flex min-w-0 flex-col gap-1">
<strong className="max-w-[205px] truncate text-[12px] text-[#283b50]">
{item.schedule_name}
</strong>
<small className="text-[10px] text-[#8d9aab]">
{item.node_count} · {item.enabled ? "已启用" : "未启用"}
</small>
</span>
</button>
))
) : (
<p className="schedule-empty"></p>
<p className="my-[18px_10px] text-center text-[11px] leading-[1.6] text-[#95a2b0]">
</p>
)}
</div>
</section>