refactor: style css -> tailwindcss
This commit is contained in:
tao.chen
@@ -19,33 +19,48 @@ export function NodeInspector({
|
||||
onDelete: () => void;
|
||||
}) {
|
||||
return (
|
||||
<div className="schedule-inspector">
|
||||
<section className="node-inspector-title">
|
||||
<span className={`artifact-card__icon artifact-card__icon--${node.version.script_type}`}>
|
||||
<div className="flex min-h-full flex-col">
|
||||
<section className="flex flex-row items-center gap-[10px] border-b border-[#e7ecf1] p-[14px]">
|
||||
<span
|
||||
className={`grid h-[31px] w-[31px] flex-none place-items-center rounded-[6px] ${
|
||||
node.version.script_type === "notebook"
|
||||
? "bg-[#fff0ee] text-[#e05e53]"
|
||||
: "bg-[#eaf3ff] text-[#326fc1]"
|
||||
}`}
|
||||
>
|
||||
<Icon
|
||||
name={node.version.script_type === "notebook" ? "notebook" : "python"}
|
||||
size={17}
|
||||
/>
|
||||
</span>
|
||||
<div>
|
||||
<small>节点配置</small>
|
||||
<strong>{node.node_key}</strong>
|
||||
<div className="flex min-w-0 flex-col gap-[3px]">
|
||||
<small className="text-[9px] text-[#96a2af]">节点配置</small>
|
||||
<strong className="truncate font-mono text-[11px] text-[#30465d]">
|
||||
{node.node_key}
|
||||
</strong>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<h3>稳定版本</h3>
|
||||
<div className="version-readonly">
|
||||
<strong>{node.version.script_name}</strong>
|
||||
<span>{node.version.version_label}</span>
|
||||
<small>versions_id: {node.versions_id}</small>
|
||||
<small>SHA-256: {shortHash(node.version.content_hash)}</small>
|
||||
<section className="flex flex-col gap-[10px] border-b border-[#e7ecf1] p-[14px]">
|
||||
<h3 className="mb-[2px] text-[13px] text-[#273b50]">稳定版本</h3>
|
||||
<div className="flex flex-col gap-[5px] rounded-[6px] border border-[#dae6f2] bg-[#f6faff] p-[9px]">
|
||||
<strong className="text-[11px] text-[#35516e]">{node.version.script_name}</strong>
|
||||
<span className="w-fit rounded-[8px] bg-[#e3f0fd] px-1.5 py-[2px] text-[9px] font-bold text-[#176ec5]">
|
||||
{node.version.version_label}
|
||||
</span>
|
||||
<small className="truncate font-mono text-[8px] text-[#8190a0]">
|
||||
versions_id: {node.versions_id}
|
||||
</small>
|
||||
<small className="truncate font-mono text-[8px] text-[#8190a0]">
|
||||
SHA-256: {shortHash(node.version.content_hash)}
|
||||
</small>
|
||||
</div>
|
||||
</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>
|
||||
<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.nodeName}
|
||||
onChange={(event) => onChange({
|
||||
...form,
|
||||
@@ -53,12 +68,13 @@ export function NodeInspector({
|
||||
})}
|
||||
/>
|
||||
</label>
|
||||
<div className="inspector-grid">
|
||||
<label>
|
||||
<span>超时（秒）</span>
|
||||
<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"
|
||||
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.timeoutSeconds}
|
||||
onChange={(event) => onChange({
|
||||
...form,
|
||||
@@ -66,12 +82,13 @@ export function NodeInspector({
|
||||
})}
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
<span>重试次数</span>
|
||||
<label className="flex flex-col gap-[5px]">
|
||||
<span className="text-[10px] font-semibold text-[#758497]">重试次数</span>
|
||||
<input
|
||||
type="number"
|
||||
min="0"
|
||||
max="10"
|
||||
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.retryCount}
|
||||
onChange={(event) => onChange({
|
||||
...form,
|
||||
@@ -80,12 +97,13 @@ export function NodeInspector({
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div className="inspector-grid">
|
||||
<label>
|
||||
<span>重试间隔（秒）</span>
|
||||
<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="0"
|
||||
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.retryIntervalSec}
|
||||
onChange={(event) => onChange({
|
||||
...form,
|
||||
@@ -93,9 +111,10 @@ export function NodeInspector({
|
||||
})}
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
<span>Python 版本</span>
|
||||
<label className="flex flex-col gap-[5px]">
|
||||
<span className="text-[10px] font-semibold text-[#758497]">Python 版本</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.pythonVersion}
|
||||
onChange={(event) => onChange({
|
||||
...form,
|
||||
@@ -111,12 +130,12 @@ export function NodeInspector({
|
||||
</label>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<h3>运行参数</h3>
|
||||
<label>
|
||||
<span>arguments_json</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]">arguments_json</span>
|
||||
<textarea
|
||||
className="json-editor"
|
||||
className="w-full resize-y rounded-[5px] border border-line p-[7px_8px] font-mono text-[10px] leading-[1.5] !bg-[#f8fafc] !text-[#37516a] outline-none focus:border-[#81b2e7] focus:shadow-[0_0_0_3px_rgb(38_124_216_/_8%)]"
|
||||
rows={5}
|
||||
spellCheck={false}
|
||||
value={form.argumentsJson}
|
||||
@@ -126,10 +145,10 @@ export function NodeInspector({
|
||||
})}
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
<span>env_refs_json</span>
|
||||
<label className="flex flex-col gap-[5px]">
|
||||
<span className="text-[10px] font-semibold text-[#758497]">env_refs_json</span>
|
||||
<textarea
|
||||
className="json-editor"
|
||||
className="w-full resize-y rounded-[5px] border border-line p-[7px_8px] font-mono text-[10px] leading-[1.5] !bg-[#f8fafc] !text-[#37516a] outline-none focus:border-[#81b2e7] focus:shadow-[0_0_0_3px_rgb(38_124_216_/_8%)]"
|
||||
rows={4}
|
||||
spellCheck={false}
|
||||
value={form.envRefsJson}
|
||||
@@ -140,9 +159,9 @@ export function NodeInspector({
|
||||
/>
|
||||
</label>
|
||||
</section>
|
||||
<div className="node-inspector-actions">
|
||||
<div className="mt-auto grid grid-cols-[1fr_90px] gap-[7px] p-[14px]">
|
||||
<button
|
||||
className="inspector-primary-button"
|
||||
className="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}
|
||||
@@ -150,7 +169,7 @@ export function NodeInspector({
|
||||
保存节点
|
||||
</button>
|
||||
<button
|
||||
className="inspector-danger-button"
|
||||
className="flex min-h-[34px] cursor-pointer items-center justify-center rounded-[6px] border border-[#efc6c6] bg-[#fff7f7] text-[11px] text-[#bd4f4f] [font-weight:650] disabled:cursor-not-allowed disabled:opacity-[0.55]"
|
||||
type="button"
|
||||
disabled={busy}
|
||||
onClick={onDelete}
|
||||
|
||||
Reference in New Issue
Block a user