refactor: style css -> tailwindcss
This commit is contained in:
tao.chen
@@ -32,20 +32,23 @@ export function ScheduleInspector({
|
||||
}) {
|
||||
if (!schedule) {
|
||||
return (
|
||||
<div className="schedule-inspector-empty">
|
||||
<div className="flex min-h-full flex-col items-center justify-center p-[30px] text-center text-[#9aa8b6] [&>svg]:mb-[10px] [&>svg]:text-[#93b4d6]">
|
||||
<Icon name="settings" size={28} />
|
||||
<strong>调度属性</strong>
|
||||
<p>选中调度方案后可配置触发方式、Cron 和执行策略。</p>
|
||||
<strong className="text-[14px] text-[#516a82]">调度属性</strong>
|
||||
<p className="text-[11px] leading-[1.6]">
|
||||
选中调度方案后可配置触发方式、Cron 和执行策略。
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div className="schedule-inspector">
|
||||
<section>
|
||||
<h3>基本信息</h3>
|
||||
<label>
|
||||
<span>调度名称</span>
|
||||
<div className="flex min-h-full flex-col">
|
||||
<section className="flex flex-col gap-[10px] border-b border-[#e7ecf1] p-[14px]">
|
||||
<h3 className="mb-[2px] text-[13px] text-[#273b50]">基本信息</h3>
|
||||
<label className="flex flex-col gap-[5px]">
|
||||
<span className="text-[10px] font-semibold text-[#758497]">调度名称</span>
|
||||
<input
|
||||
className="h-[33px] w-full rounded-[5px] border border-line bg-white px-2 text-[11px] text-[#32475d] outline-none focus:border-[#81b2e7] focus:shadow-[0_0_0_3px_rgb(38_124_216_/_8%)]"
|
||||
value={form.scheduleName}
|
||||
onChange={(event) => onChange({
|
||||
...form,
|
||||
@@ -53,9 +56,10 @@ export function ScheduleInspector({
|
||||
})}
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
<span>说明</span>
|
||||
<label className="flex flex-col gap-[5px]">
|
||||
<span className="text-[10px] font-semibold text-[#758497]">说明</span>
|
||||
<textarea
|
||||
className="w-full resize-y rounded-[5px] border border-line bg-white p-[7px_8px] text-[11px] leading-[1.5] text-[#32475d] outline-none focus:border-[#81b2e7] focus:shadow-[0_0_0_3px_rgb(38_124_216_/_8%)]"
|
||||
rows={2}
|
||||
value={form.description}
|
||||
onChange={(event) => onChange({
|
||||
@@ -64,13 +68,14 @@ export function ScheduleInspector({
|
||||
})}
|
||||
/>
|
||||
</label>
|
||||
<label className="schedule-switch-row">
|
||||
<span>
|
||||
<b>启用调度</b>
|
||||
<small>DAG 有效后才能启用</small>
|
||||
<label className="flex flex-row items-center justify-between rounded-[6px] bg-[#f5f8fb] p-[8px_9px]">
|
||||
<span className="flex flex-col gap-[2px]">
|
||||
<b className="text-[11px] text-[#45596f]">启用调度</b>
|
||||
<small className="text-[9px] font-normal text-[#94a1ae]">DAG 有效后才能启用</small>
|
||||
</span>
|
||||
<input
|
||||
type="checkbox"
|
||||
className="h-[18px] w-[34px] accent-brand"
|
||||
checked={form.enabled}
|
||||
onChange={(event) => onChange({
|
||||
...form,
|
||||
@@ -80,11 +85,12 @@ export function ScheduleInspector({
|
||||
</label>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3>触发器</h3>
|
||||
<label>
|
||||
<span>触发方式</span>
|
||||
<section className="flex flex-col gap-[10px] border-b border-[#e7ecf1] p-[14px]">
|
||||
<h3 className="mb-[2px] text-[13px] text-[#273b50]">触发器</h3>
|
||||
<label className="flex flex-col gap-[5px]">
|
||||
<span className="text-[10px] font-semibold text-[#758497]">触发方式</span>
|
||||
<select
|
||||
className="h-[33px] w-full rounded-[5px] border border-line bg-white px-2 text-[11px] text-[#32475d] outline-none focus:border-[#81b2e7] focus:shadow-[0_0_0_3px_rgb(38_124_216_/_8%)]"
|
||||
value={form.triggerType}
|
||||
onChange={(event) => onChange({
|
||||
...form,
|
||||
@@ -99,9 +105,10 @@ export function ScheduleInspector({
|
||||
</label>
|
||||
{form.triggerType === "cron" && (
|
||||
<>
|
||||
<label>
|
||||
<span>Cron（分 时 日 月 周）</span>
|
||||
<label className="flex flex-col gap-[5px]">
|
||||
<span className="text-[10px] font-semibold text-[#758497]">Cron（分 时 日 月 周）</span>
|
||||
<input
|
||||
className="h-[33px] w-full rounded-[5px] border border-line bg-white px-2 text-[11px] text-[#32475d] outline-none focus:border-[#81b2e7] focus:shadow-[0_0_0_3px_rgb(38_124_216_/_8%)]"
|
||||
value={form.cronExpression}
|
||||
onChange={(event) => onChange({
|
||||
...form,
|
||||
@@ -109,9 +116,10 @@ export function ScheduleInspector({
|
||||
})}
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
<span>时区</span>
|
||||
<label className="flex flex-col gap-[5px]">
|
||||
<span className="text-[10px] font-semibold text-[#758497]">时区</span>
|
||||
<input
|
||||
className="h-[33px] w-full rounded-[5px] border border-line bg-white px-2 text-[11px] text-[#32475d] outline-none focus:border-[#81b2e7] focus:shadow-[0_0_0_3px_rgb(38_124_216_/_8%)]"
|
||||
value={form.timezone}
|
||||
onChange={(event) => onChange({
|
||||
...form,
|
||||
@@ -120,7 +128,7 @@ export function ScheduleInspector({
|
||||
/>
|
||||
</label>
|
||||
<button
|
||||
className="inspector-secondary-button"
|
||||
className="flex min-h-[34px] cursor-pointer items-center justify-center rounded-[6px] border border-[#bcd2e9] bg-[#f7fbff] text-[11px] text-[#2871bb] [font-weight:650] disabled:cursor-not-allowed disabled:opacity-[0.55]"
|
||||
type="button"
|
||||
disabled={busy}
|
||||
onClick={onPreview}
|
||||
@@ -128,7 +136,7 @@ export function ScheduleInspector({
|
||||
预览未来 5 次
|
||||
</button>
|
||||
{cronResult && (
|
||||
<ol className="cron-preview-list">
|
||||
<ol className="m-0 list-decimal rounded-[5px] bg-[#f5f8fb] p-[8px_8px_8px_28px] font-mono text-[9px] leading-[1.7] text-ink-muted">
|
||||
{cronResult.occurrences.map((item) => (
|
||||
<li key={item.utc_time}>
|
||||
{new Date(item.local_time).toLocaleString("zh-CN", {
|
||||
@@ -142,15 +150,16 @@ export function ScheduleInspector({
|
||||
)}
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3>执行策略</h3>
|
||||
<div className="inspector-grid">
|
||||
<label>
|
||||
<span>最大并发</span>
|
||||
<section className="flex flex-col gap-[10px] border-b border-[#e7ecf1] p-[14px]">
|
||||
<h3 className="mb-[2px] text-[13px] text-[#273b50]">执行策略</h3>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<label className="flex flex-col gap-[5px]">
|
||||
<span className="text-[10px] font-semibold text-[#758497]">最大并发</span>
|
||||
<input
|
||||
type="number"
|
||||
min="1"
|
||||
max="64"
|
||||
className="h-[33px] w-full rounded-[5px] border border-line bg-white px-2 text-[11px] text-[#32475d] outline-none focus:border-[#81b2e7] focus:shadow-[0_0_0_3px_rgb(38_124_216_/_8%)]"
|
||||
value={form.maxConcurrency}
|
||||
onChange={(event) => onChange({
|
||||
...form,
|
||||
@@ -158,9 +167,10 @@ export function ScheduleInspector({
|
||||
})}
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
<span>失败策略</span>
|
||||
<label className="flex flex-col gap-[5px]">
|
||||
<span className="text-[10px] font-semibold text-[#758497]">失败策略</span>
|
||||
<select
|
||||
className="h-[33px] w-full rounded-[5px] border border-line bg-white px-2 text-[11px] text-[#32475d] outline-none focus:border-[#81b2e7] focus:shadow-[0_0_0_3px_rgb(38_124_216_/_8%)]"
|
||||
value={form.failurePolicy}
|
||||
onChange={(event) => onChange({
|
||||
...form,
|
||||
@@ -172,14 +182,14 @@ export function ScheduleInspector({
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
<div className="schedule-next-run">
|
||||
<div className="flex items-center justify-between rounded-[5px] bg-[#f5f8fb] p-[8px_9px] text-[10px] text-ink-subtle">
|
||||
<span>下一次执行</span>
|
||||
<strong>{formatTime(schedule.next_run_at)}</strong>
|
||||
<strong className="text-[10px] text-[#425970]">{formatTime(schedule.next_run_at)}</strong>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<button
|
||||
className="inspector-primary-button"
|
||||
className="m-[14px] flex min-h-[34px] cursor-pointer items-center justify-center rounded-[6px] border border-brand bg-brand text-[11px] text-white [font-weight:650] disabled:cursor-not-allowed disabled:opacity-[0.55]"
|
||||
type="button"
|
||||
disabled={busy}
|
||||
onClick={onSave}
|
||||
|
||||
Reference in New Issue
Block a user