tao.chen/model-platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: style css -> tailwindcss

Browse Source
This commit is contained in:
tao.chen
2026-08-24 18:34:43 +08:00
parent 9ce0b106fa
commit 6b7701852f
9 changed files with 475 additions and 2142 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/app/features/schedules/ArtifactList.tsx
+45 -25
View File
@@ -58,24 +58,27 @@ function ArtifactListImpl({
}
return (
<section className="schedule-panel schedule-artifacts-panel">
<div className="schedule-panel__title">
<div>
<strong>稳定版本脚本</strong>
<span className="schedule-panel__count">{artifacts.length}</span>
<section className="flex min-h-0 flex-col overflow-hidden">
<div className="flex min-h-[48px] items-center justify-between px-3">
<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]">
{artifacts.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="artifact-list">
<div className="scrollbar-thin min-h-0 overflow-auto px-2 pb-[9px]">
{groups.length === 0 ? (
<p className="schedule-empty">
<p className="my-[18px_10px] text-center text-[10px] leading-[1.6] text-[#9aa6b3]">
暂无稳定版本，请先在"构建脚本"中发布
</p>
) : (
@@ -84,33 +87,50 @@ function ArtifactListImpl({
const scriptType = items[0].script_type;
const iconName = scriptType === "notebook" ? "notebook" : "python";
return (
<div key={scriptName} className="artifact-group">
<div
key={scriptName}
className="mb-1.5 overflow-hidden rounded-[8px] border border-line-soft bg-white transition-[border-color,box-shadow] duration-[160ms] hover:border-[#e1e8ef]"
>
<button
type="button"
className="artifact-group__header"
className="flex min-h-[42px] w-full cursor-pointer select-none items-center justify-between gap-2 border-0 bg-transparent px-[7px] py-[7px] text-left text-inherit hover:bg-[#f8fafc] min-[1281px]:px-2"
aria-expanded={isExpanded}
onClick={() => toggle(scriptName)}
>
<span className="artifact-group__main">
<span className={`artifact-group__chevron${isExpanded ? " is-open" : ""}`}>
<span className="flex min-w-0 items-center gap-[7px]">
<span
data-state={isExpanded ? "open" : "closed"}
className="h-[14px] w-[14px] flex-none text-[#9aa7b5] transition-transform duration-[180ms] data-[state=open]:rotate-90"
>
<Icon name="chevron" size={14} />
</span>
<span className={`artifact-group__icon artifact-group__icon--${scriptType}`}>
<span
className={`grid h-[27px] w-[27px] flex-none place-items-center rounded-[6px] ${
scriptType === "notebook"
? "bg-[#fff0ee] text-[#dc5c52]"
: "bg-[#eaf3ff] text-[#326fc1]"
}`}
>
<Icon name={iconName} size={14} />
</span>
<span className="artifact-group__name" title={scriptName}>
<span
className="max-w-[125px] min-w-0 truncate text-[11px] font-semibold text-[#33465a] min-[1281px]:max-w-none"
title={scriptName}
>
{scriptName}
</span>
</span>
{items.length > 1 && (
<span className="artifact-group__count">{items.length}</span>
<span className="inline-flex flex-none items-center rounded-full border border-[#e5eaf0] bg-[#f5f7fa] px-1.5 py-[2px] text-[9px] leading-[1.3] whitespace-nowrap text-[#8794a3]">
{items.length}
</span>
)}
</button>
{isExpanded && (
<div className="artifact-versions">
<div className="flex flex-col gap-[5px] border-t border-line-soft bg-[#f8fafc] p-[7px_7px_7px_27px] min-[1281px]:pl-[29px]">
{items.map((artifact) => (
<div
className="artifact-version"
className="group flex min-h-[34px] cursor-grab select-none items-center justify-between gap-[7px] rounded-[6px] border border-[#e4e9ee] bg-white p-1.5 transition-[border-color,background-color] duration-[140ms] hover:border-[#a8c8e9] hover:bg-[#fbfdff] active:cursor-grabbing min-[1281px]:px-[7px]"
draggable
key={artifact.versions_id}
onDragStart={(event) => {
@@ -124,18 +144,18 @@ function ArtifactListImpl({
onContextMenu={(event) => onContextMenu(event, artifact)}
onDoubleClick={() => onDoubleClick(artifact)}
>
<span className="artifact-version__main">
<span className="artifact-version__handle">
<span className="flex min-w-0 items-center gap-[5px]">
<span className="h-[13px] w-[13px] flex-none text-[#c4cdd6] group-hover:text-[#7e8d9d]">
<Icon name="grip-vertical" size={13} />
</span>
<span className="artifact-version__name">
<span className="flex-none text-[10px] font-semibold text-[#526477]">
{artifact.version_label}
</span>
<span className="artifact-version__commit">
<span className="min-w-0 truncate font-mono text-[8px] text-[#9aa5b1]">
{shortHash(artifact.content_hash)}
</span>
</span>
<span className="artifact-version__action">
<span className="grid h-[18px] w-[18px] flex-none place-items-center rounded-[4px] text-[#c1cad3] group-hover:bg-[#eef6ff] group-hover:text-[#287ac5]">
<Icon name="external" size={12} />
</span>
</div>
@@ -147,9 +167,9 @@ function ArtifactListImpl({
})
)}
</div>
<p className="artifact-tip artifact-tip--footer">
<p className="mx-[10px] mb-[9px] mt-[3px] flex items-center justify-center gap-1 rounded-[6px] border border-line-soft bg-[#f8fafc] p-[7px_8px] text-center text-[9px] leading-[1.45] text-[#8795a4]">
<span>按住</span>
<span className="artifact-tip__grip">
<span className="inline-flex items-center justify-center text-[#9eabb8]">
<Icon name="grip-vertical" size={12} />
</span>
<span>拖拽卡片到画布即可绑定节点</span>
@@ -158,4 +178,4 @@ function ArtifactListImpl({
);
}
export const ArtifactList = memo(ArtifactListImpl);
export const ArtifactList = memo(ArtifactListImpl);