update:css样式拆分

This commit is contained in:
xiaozhu
2026-09-02 10:10:41 +08:00
committed by tao.chen
parent ef0000ebe5
commit f452ba70fb
27 changed files with 1404 additions and 3059 deletions
+32 -17
View File
@@ -67,13 +67,18 @@ export function PythonEditor({
if (loading) {
return (
<div className="python-editor" ref={containerRef}>
<section className="editor-opening-state" aria-live="polite" style={{ display: "block" }}>
<div className="editor-opening-state__icon">
<span className="button-spinner button-spinner--blue" />
<div className="flex h-full min-h-0 flex-col bg-white" ref={containerRef}>
<section
className="mx-auto my-16 flex w-[min(520px,calc(100%-48px))] min-h-[260px] flex-col items-center justify-center rounded-[10px] border border-[#dce5ed] bg-white/95 p-9 text-center text-[#66788d] shadow-[0_12px_34px_rgb(31_64_98/7%)]"
aria-live="polite"
>
<div className="mb-4 grid size-[54px] place-items-center rounded-full bg-[#edf6ff] text-[#247bc5]">
<span className="button-spinner button-spinner--blue size-6 border-[3px]" />
</div>
<strong> Python </strong>
<p></p>
<strong className="text-base text-[#1d344d]"> Python </strong>
<p className="mt-[9px] max-w-[430px] text-xs leading-[1.7] text-[#7a8a9b]">
</p>
</section>
</div>
);
@@ -81,28 +86,38 @@ export function PythonEditor({
if (loadError) {
return (
<div className="python-editor" ref={containerRef}>
<section className="editor-opening-state has-error" aria-live="polite" style={{ display: "block" }}>
<div className="editor-opening-state__icon">
<div className="flex h-full min-h-0 flex-col bg-white" ref={containerRef}>
<section
className="mx-auto my-16 flex w-[min(520px,calc(100%-48px))] min-h-[260px] flex-col items-center justify-center rounded-[10px] border border-[#f0cfcc] bg-white/95 p-9 text-center text-[#66788d] shadow-[0_12px_34px_rgb(31_64_98/7%)]"
aria-live="polite"
>
<div className="mb-4 grid size-[54px] place-items-center rounded-full bg-[#fff1f0] text-[#c84f49]">
<Icon name="info" size={28} />
</div>
<strong>Python </strong>
<p>{loadError}</p>
<strong className="text-base text-[#1d344d]">Python </strong>
<p className="mt-[9px] max-w-[430px] text-xs leading-[1.7] text-[#7a8a9b] [overflow-wrap:anywhere]">
{loadError}
</p>
</section>
</div>
);
}
return (
<div className="python-editor" ref={containerRef}>
{dirty && <div className="editor-dirty-banner"></div>}
<div className="python-editor__status">
<span>
<i /> Workspace Python Editor
<div className="flex h-full min-h-0 flex-col bg-white" ref={containerRef}>
{dirty && (
<div className="flex items-center gap-2 border-b border-[#f0d8a8] bg-[#fff7e6] px-3.5 py-1.5 text-xs font-medium text-[#9b6a18] before:text-[10px] before:text-[#d49b00] before:content-['●']">
</div>
)}
<div className="flex items-center gap-4 border-b border-[#e6e8ec] bg-[#f5f7fa] px-3.5 py-1 text-[11px] text-[#6b7280]">
<span className="inline-flex items-center gap-1.5">
<i className="size-1.5 rounded-full bg-[#20b77d]" />
Workspace Python Editor
</span>
<span>{script.relative_path}</span>
</div>
<div className="python-editor__canvas">
<div className="relative min-h-0 flex-1 overflow-hidden">
<Editor
height="100%"
language="python"