update:css样式拆分
This commit is contained in:
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user