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

update: style

Browse Source
This commit is contained in:
tao.chen
2026-09-02 10:10:41 +08:00
committed by tao.chen
parent 250d953eb3
commit 1f9c4a2cd9
34 changed files with 207 additions and 237 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/app/features/platform/CreateFolderModal.tsx
+3 -3
View File
@@ -1,5 +1,5 @@
import { type FormEvent } from "react";
import { Folder } from "lucide-react";
import { Folder, Loader2Icon } from "lucide-react";
import {
AppFormDialog,
dialogPrimaryButtonClass,
@@ -57,7 +57,7 @@ export function CreateFolderModal({
onChange={(event) => onNameChange(event.target.value)}
/>
</label>
<div className="mt-[3px] flex shrink-0 justify-end gap-2 border-t border-[#e8edf2] bg-white -mx-[22px] px-[22px] py-3.5">
<div className="mt-[3px] flex shrink-0 justify-end gap-2 border-t border-line bg-white -mx-[22px] px-[22px] py-3.5">
<Button
variant="outline"
size="sm"
@@ -75,7 +75,7 @@ export function CreateFolderModal({
className={dialogPrimaryButtonClass}
>
{busy
? <span className="button-spinner" />
? <Loader2Icon className="size-4 animate-spin" />
: <Folder size={16} />}
{busy ? "正在创建…" : "创建文件夹"}
</Button>
frontend/app/features/platform/CreateScriptModal.tsx
+4 -4
View File
@@ -1,5 +1,5 @@
import { type FormEvent } from "react";
import { BookOpen, Check, FileCode, Folder, Plus } from "lucide-react";
import { BookOpen, Check, FileCode, Folder, Loader2Icon, Plus } from "lucide-react";
import type { ScriptType, Visibility } from "../../services/api";
import {
AppFormDialog,
@@ -113,7 +113,7 @@ export function CreateScriptModal({
key={item.type}
className={`relative flex min-h-[72px] cursor-pointer items-center gap-[9px] rounded-[7px] border p-2.5 text-left ${
selected
? "border-[#4d98df] bg-[#f4f9ff] shadow-[0_0_0_2px_rgb(49_133_216/7%)]"
? "border-[#4d98df] bg-[#f4f9ff] ring-2 ring-brand/10"
: "border-[#dae2ea] bg-white hover:border-[#a9c6e1]"
}`}
type="button"
@@ -162,7 +162,7 @@ export function CreateScriptModal({
</select>
</label>
<div className="mt-[3px] flex shrink-0 justify-end gap-2 border-t border-[#e8edf2] bg-white -mx-[22px] px-[22px] py-3.5">
<div className="mt-[3px] flex shrink-0 justify-end gap-2 border-t border-line bg-white -mx-[22px] px-[22px] py-3.5">
<Button
variant="outline"
size="sm"
@@ -179,7 +179,7 @@ export function CreateScriptModal({
disabled={creating || !form.name.trim()}
className={dialogPrimaryButtonClass}
>
{creating ? <span className="button-spinner" /> : <Plus size={16} />}
{creating ? <Loader2Icon className="size-4 animate-spin" /> : <Plus size={16} />}
{creating ? "正在创建…" : "创建脚本"}
</Button>
</div>
frontend/app/features/platform/DataResourceUploadModal.tsx
+3 -3
View File
@@ -1,5 +1,5 @@
import { type FormEvent } from "react";
import { Upload } from "lucide-react";
import { Loader2Icon, Upload } from "lucide-react";
import type { Visibility } from "../../services/api";
import {
AppFormDialog,
@@ -121,7 +121,7 @@ export function DataResourceUploadModal({
onChange={(event) => onDescriptionChange(event.target.value)}
/>
</label>
<div className="mt-[3px] flex shrink-0 justify-end gap-2 border-t border-[#e8edf2] bg-white -mx-[22px] px-[22px] py-3.5">
<div className="mt-[3px] flex shrink-0 justify-end gap-2 border-t border-line bg-white -mx-[22px] px-[22px] py-3.5">
<Button
variant="outline"
size="sm"
@@ -140,7 +140,7 @@ export function DataResourceUploadModal({
className={dialogPrimaryButtonClass}
>
{uploading ? (
<span className="button-spinner" />
<Loader2Icon className="size-4 animate-spin" />
) : (
<Upload size={16} />
)}
frontend/app/features/platform/PublishModal.tsx
+3 -3
View File
@@ -1,5 +1,5 @@
import { type FormEvent } from "react";
import { ArrowUpFromLine } from "lucide-react";
import { ArrowUpFromLine, Loader2Icon } from "lucide-react";
import type { ScriptItem, Visibility } from "../../services/api";
import { scriptIcon } from "../../features/platform/WorkspaceTree";
import {
@@ -97,7 +97,7 @@ export function PublishModal({
<option value="public">公开</option>
</select>
</label>
<div className="mt-[3px] flex shrink-0 justify-end gap-2 border-t border-[#e8edf2] bg-white -mx-[22px] px-[22px] py-3.5">
<div className="mt-[3px] flex shrink-0 justify-end gap-2 border-t border-line bg-white -mx-[22px] px-[22px] py-3.5">
<Button
variant="outline"
size="sm"
@@ -115,7 +115,7 @@ export function PublishModal({
className={dialogPrimaryButtonClass}
>
{publishing
? <span className="button-spinner" />
? <Loader2Icon className="size-4 animate-spin" />
: <ArrowUpFromLine size={16} />}
{publishing ? "正在发布…" : "确认发布"}
</Button>
frontend/app/features/platform/PythonEditor.tsx
+4 -4
View File
@@ -1,6 +1,6 @@
import { useEffect, useRef, useState } from "react";
import Editor from "@monaco-editor/react";
import { Info } from "lucide-react";
import { Info, Loader2Icon } from "lucide-react";
import type { ScriptItem } from "../../services/api";
@@ -68,11 +68,11 @@ export function PythonEditor({
return (
<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%)]"
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-line bg-white/95 p-9 text-center text-[#66788d] shadow-md"
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]" />
<Loader2Icon className="size-6 animate-spin text-brand" />
</div>
<strong className="text-base text-[#1d344d]">正在打开 Python 编辑器</strong>
<p className="mt-[9px] max-w-[430px] text-xs leading-[1.7] text-[#7a8a9b]">
@@ -87,7 +87,7 @@ export function PythonEditor({
return (
<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%)]"
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-md"
aria-live="polite"
>
<div className="mb-4 grid size-[54px] place-items-center rounded-full bg-[#fff1f0] text-[#c84f49]">
frontend/app/features/platform/ScriptExplorer.tsx
+3 -3
View File
@@ -163,8 +163,8 @@ export function ScriptExplorer({
}, [filteredScripts, directories, user, dataByOwner, members]);
return (
<aside className="flex min-h-0 flex-col overflow-hidden rounded-[7px] border border-[#dce4ec] bg-white shadow-[0_2px_7px_rgb(25_46_73/3%)]">
<div className="flex min-h-16 items-center justify-between border-b border-[#e8edf2] px-3.5">
<aside className="flex min-h-0 flex-col overflow-hidden rounded-[7px] border border-[#dce4ec] bg-white shadow-md">
<div className="flex min-h-16 items-center justify-between border-b border-line px-3.5">
<div>
<h2 className="mb-0.5 text-base text-[#1d2d42]">脚本目录</h2>
</div>
@@ -197,7 +197,7 @@ export function ScriptExplorer({
</div>
</div>
<div className="mx-3 mt-[11px] mb-[7px] flex h-[38px] items-center gap-[7px] rounded-md border border-[#dce5ed] bg-[#fbfcfd] px-[9px] text-[#95a2b1] focus-within:border-[#6aa9e9] focus-within:shadow-[0_0_0_3px_rgb(31_119_207/8%)]">
<div className="mx-3 mt-[11px] mb-[7px] flex h-[38px] items-center gap-[7px] rounded-md border border-line bg-[#fbfcfd] px-[9px] text-[#95a2b1] focus-within:border-[#6aa9e9] focus-within:ring-3 focus-within:ring-brand/10">
<Search size={17} />
<input
className="min-w-0 flex-1 border-0 bg-transparent text-xs text-[#26384d] outline-none placeholder:text-[#a7b2bf]"
frontend/app/features/platform/ScriptWorkspace.tsx
+13 -12
View File
@@ -5,6 +5,7 @@ import {
ExternalLink,
FileCode,
Info,
Loader2Icon,
Lock,
Plus,
RefreshCw,
@@ -504,7 +505,7 @@ export function ScriptWorkspace({
onClick={() => onSavePythonEditor(script.script_id)}
>
{activePythonBuf?.saving
? <><span className="button-spinner button-spinner--blue size-3" /> 保存中</>
? <><Loader2Icon className="size-3 animate-spin text-brand" /> 保存中</>
: "保存"}
</button>
)}
@@ -592,7 +593,7 @@ export function ScriptWorkspace({
<div className="min-h-0 flex-1 overflow-y-auto">
{readOnlyLoading ? (
<div className="flex min-h-[200px] flex-col items-center justify-center gap-4 text-sm text-[#666]">
<span className="button-spinner button-spinner--blue" />
<Loader2Icon className="size-4 animate-spin text-brand" />
<span>加载内容中...</span>
</div>
) : readOnlyError ? (
@@ -683,7 +684,7 @@ export function ScriptWorkspace({
>
<div className="flex min-h-[34px] items-center gap-[18px] border-b border-[#dfe6ec] bg-[#f8fafc] px-3.5 text-[9px] text-[#718195]">
<span className="inline-flex items-center gap-1.5 font-[650] text-[#197b59]">
<i className="size-[7px] rounded-full bg-[#20b77d] shadow-[0_0_0_3px_rgb(32_183_125/12%)]" />
<i className="size-[7px] rounded-full bg-[#20b77d] ring-3 ring-success/10" />
Workspace Jupyter Server
</span>
<span className="inline-flex items-center gap-1.5">
@@ -709,10 +710,10 @@ export function ScriptWorkspace({
{!sessionCache.has(script.script_id) ? (
isNotebook ? (
<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 p-9 text-center text-[#66788d] shadow-[0_12px_34px_rgb(31_64_98/7%)] ${
className={`mx-auto my-16 flex w-[min(520px,calc(100%-48px))] min-h-[260px] flex-col items-center justify-center rounded-[10px] border p-9 text-center text-[#66788d] shadow-md ${
openError
? "border-[#f0cfcc] bg-white/95"
: "border-[#dce5ed] bg-white/95"
: "border-line bg-white/95"
}`}
aria-live="polite"
>
@@ -725,7 +726,7 @@ export function ScriptWorkspace({
>
{openError
? <Info size={28} />
: <span className="button-spinner button-spinner--blue size-6 border-[3px]" />}
: <Loader2Icon className="size-6 animate-spin text-brand" />}
</div>
<strong className="text-base text-[#1d344d]">
{openError ? "Notebook 打开失败" : "正在打开 Notebook"}
@@ -743,7 +744,7 @@ export function ScriptWorkspace({
onClick={onOpenEditor}
>
{editBusy
? <span className="button-spinner button-spinner--blue" />
? <Loader2Icon className="size-4 animate-spin text-brand" />
: <RefreshCw size={16} />}
{editBusy ? "正在重试…" : "重试打开"}
</button>
@@ -751,7 +752,7 @@ export function ScriptWorkspace({
</section>
) : isPython && !activePythonBuf ? (
<section className="mx-auto mb-[38px] mt-6 w-[min(1020px,calc(100%-48px))] max-xl:w-[calc(100%-30px)]">
<div className="flex items-start justify-between gap-5 rounded-t-[9px] border border-[#dce5ed] bg-white px-[26px] py-[23px]">
<div className="flex items-start justify-between gap-5 rounded-t-[9px] border border-line bg-white px-[26px] py-[23px]">
<div>
<span className="text-[9px] font-extrabold tracking-[0.13em] text-[#2b7fca]">
PYTHON SCRIPT
@@ -774,7 +775,7 @@ export function ScriptWorkspace({
onClick={onOpenEditor}
>
{editBusy
? <span className="button-spinner button-spinner--blue" />
? <Loader2Icon className="size-4 animate-spin text-brand" />
: <ExternalLink size={17} />}
{editBusy
? "正在准备编辑器…"
@@ -784,7 +785,7 @@ export function ScriptWorkspace({
</button>
</div>
<div className="grid grid-cols-4 border-x border-b border-[#dce5ed] bg-[#f9fbfd]">
<div className="grid grid-cols-4 border-x border-b border-line bg-[#f9fbfd]">
{[
["脚本类型", "Python"],
[
@@ -804,12 +805,12 @@ export function ScriptWorkspace({
index < 3 ? "border-r border-[#e4eaf0]" : ""
}`}
>
<span className="text-[10px] text-[#8a9aaa]">{label}</span>
<span className="text-[10px] text-ink-subtle">{label}</span>
<strong className="text-[13px] text-[#2a3f55]">{value}</strong>
</div>
))}
</div>
<div className="overflow-hidden rounded-b-[9px] border border-t-0 border-[#dce5ed] bg-white">
<div className="overflow-hidden rounded-b-[9px] border border-t-0 border-line bg-white">
<div className="flex items-center justify-between border-b border-[#e8edf3] bg-[#f7f9fb] px-3.5 py-2 text-[11px] text-[#6b7c8f]">
<div className="flex items-center gap-1.5">
<span className="size-2.5 rounded-full bg-[#ef6b62]" />
frontend/app/features/platform/ScriptsPage.tsx
+1 -1
View File
@@ -323,7 +323,7 @@ export default function ScriptsPage() {
onHandleUpload={handleUpload}
/>
<section className="flex min-h-0 flex-col overflow-hidden rounded-[7px] border border-[#dce4ec] bg-white shadow-[0_2px_7px_rgb(25_46_73/3%)]">
<section className="flex min-h-0 flex-col overflow-hidden rounded-[7px] border border-[#dce4ec] bg-white shadow-md">
{selected ? (
<ScriptWorkspace
script={selected}
frontend/app/features/platform/TreeContextMenu.tsx
+2 -2
View File
@@ -59,7 +59,7 @@ export function TreeContextMenu({
return (
<div
className="fixed z-[1000] flex w-[180px] flex-col rounded-lg border border-[#d9e2ea] bg-white p-1.5 shadow-[0_14px_34px_rgb(18_43_68/20%)]"
className="fixed z-[1000] flex w-[180px] flex-col rounded-lg border border-[#d9e2ea] bg-white p-1.5 shadow-lg"
role="menu"
style={{
left: contextMenu.x,
@@ -179,7 +179,7 @@ export function TreeContextMenu({
</button>
{contextMenu.kind === "directory" && (
<>
<span className="mx-[3px] my-[5px] h-px bg-[#e7ecf1]" />
<span className="mx-[3px] my-[5px] h-px bg-line-soft" />
<button
className={dangerItemClass}
type="button"
frontend/app/features/platform/VersionReceiptModal.tsx
+1 -1
View File
@@ -29,7 +29,7 @@ export function VersionReceiptModal({
contentClassName="sm:max-w-[min(470px,calc(100vw-40px))] px-7 py-[30px] pb-[25px] text-center"
bodyClassName="overflow-visible"
>
<div className="mx-auto mb-3.5 grid size-[58px] place-items-center rounded-full bg-gradient-to-br from-[#24b67d] to-[#149566] text-white shadow-[0_9px_24px_rgb(25_157_104/25%)]">
<div className="mx-auto mb-3.5 grid size-[58px] place-items-center rounded-full bg-gradient-to-br from-[#24b67d] to-[#149566] text-white shadow-lg">
<Check size={28} />
</div>
<span className={modalEyebrowClass}>STABLE VERSION</span>
frontend/app/features/platform/WelcomePanel.tsx
+1 -1
View File
@@ -9,7 +9,7 @@ type WelcomePanelProps = {
export function WelcomePanel({ onCreateScript }: WelcomePanelProps) {
return (
<div className="welcome-panel-shell flex min-h-full flex-col items-center justify-center p-[35px] text-center">
<div className="mb-[21px] grid size-[86px] place-items-center rounded-[25px] border border-[#cfe0f0] bg-gradient-to-br from-white to-[#eaf4fd] text-[#3d8cd9] shadow-[0_16px_35px_rgb(40_103_165/12%)]">
<div className="mb-[21px] grid size-[86px] place-items-center rounded-[25px] border border-[#cfe0f0] bg-gradient-to-br from-white to-[#eaf4fd] text-[#3d8cd9] shadow-lg">
<SquareChartGantt size={42}/>
</div>
<span className="text-[10px] font-extrabold tracking-[0.12em] text-[#2e81ce]">
frontend/app/features/platform/WorkspaceTree.tsx
+1 -1
View File
@@ -302,7 +302,7 @@ function WorkspaceTreeItems({
)}
{item.visibility !== "private" && (
<span
className="size-1.5 shrink-0 rounded-full bg-[#1dbd7c] shadow-[0_0_0_3px_rgb(29_189_124/10%)]"
className="size-1.5 shrink-0 rounded-full bg-[#1dbd7c] ring-3 ring-success/10"
title="Workspace 可见"
/>
)}
frontend/app/features/platform/modalUi.ts
+7 -8
View File
@@ -4,13 +4,13 @@ export const modalBackdropClass =
"fixed inset-0 z-20 grid place-items-center bg-[rgb(10_27_45/43%)] backdrop-blur-[2px]";
export const modalPanelClass =
"modal-panel w-[min(520px,calc(100vw-40px))] overflow-visible rounded-[11px] border border-[#dce4eb] bg-white shadow-[0_24px_70px_rgb(8_27_48/25%)]";
"modal-panel w-[min(520px,calc(100vw-40px))] overflow-visible rounded-[11px] border border-[#dce4eb] bg-white shadow-xl";
export const modalCompactClass =
"modal-panel flex max-h-[80vh] w-[min(480px,calc(100vw-40px))] flex-col overflow-visible rounded-[11px] border border-[#dce4eb] bg-white shadow-[0_24px_70px_rgb(8_27_48/25%)]";
"modal-panel flex max-h-[80vh] w-[min(480px,calc(100vw-40px))] flex-col overflow-visible rounded-[11px] border border-[#dce4eb] bg-white shadow-xl";
export const modalHeaderClass =
"flex shrink-0 items-center justify-between border-b border-[#e7ecf1] px-[22px] pb-4 pt-5";
"flex shrink-0 items-center justify-between border-b border-line px-[22px] pb-4 pt-5";
export const modalEyebrowClass =
"text-[9px] font-extrabold tracking-[0.12em] text-[#2d82d4]";
@@ -20,13 +20,12 @@ export const modalTitleClass = "mt-1 text-[19px] text-[#1c2d42]";
export const modalFormClass = "flex-1 overflow-y-auto px-[22px] pt-[19px]";
export const modalFooterClass =
"mt-[3px] flex shrink-0 justify-end gap-2 border-t border-[#e8edf2] bg-white rounded-b-[11px] px-[22px] py-3.5";
"mt-[3px] flex shrink-0 justify-end gap-2 border-t border-line bg-white rounded-b-[11px] px-[22px] py-3.5";
export const iconButtonClass =
"grid size-[34px] cursor-pointer place-items-center rounded-[7px] border border-[#dfe6ed] bg-white hover:border-[#b9c9da] hover:bg-[#f7faff]";
"grid size-[34px] cursor-pointer place-items-center rounded-[7px] border border-line bg-white hover:border-[#b9c9da] hover:bg-[#f7faff]";
export const primaryButtonClass =
"inline-flex min-h-[37px] cursor-pointer items-center justify-center gap-[7px] rounded-md border border-[#126ac3] bg-gradient-to-br from-[#1881e7] to-[#1268c9] px-[15px] text-xs font-[650] text-white shadow-[0_6px_15px_rgb(20_111_202/18%)] hover:from-[#1175d8] hover:to-[#0e5bad] disabled:cursor-not-allowed disabled:opacity-[0.58]";
export { primaryGradientButtonClass as primaryButtonClass } from "~/components/common/buttonClasses";
export const secondaryButtonClass =
"inline-flex min-h-[37px] cursor-pointer items-center justify-center gap-[7px] rounded-md border border-[#d8e1e9] bg-white px-[15px] text-xs font-[650] text-[#56687c]";
@@ -38,7 +37,7 @@ export const formFieldClass =
"mb-[17px] flex flex-col gap-[7px] text-xs font-[650] text-[#3c4e62]";
export const formControlClass =
"w-full rounded-md border border-[#d6e0e9] bg-white px-[11px] text-xs text-[#283a4e] outline-none focus:border-[#5b9ddb] focus:shadow-[0_0_0_3px_rgb(38_125_207/8%)]";
"w-full rounded-md border border-[#d6e0e9] bg-white px-[11px] text-xs text-[#283a4e] outline-none focus:border-[#5b9ddb] focus:ring-3 focus:ring-brand/10";
export const formInputClass = `${formControlClass} h-[39px]`;