update:css样式拆分

frontend/app/features/platform/WorkspaceTree.tsx

@@ -143,9 +143,9 @@ export function WorkspaceTreeGroup({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [groupKey]);
   return (
-    <div className="tree-group">
+    <div className="mb-[7px]">
       <button
-        className={`tree-group__title${open ? " is-open" : ""}`}
+        className="flex h-[33px] w-full cursor-pointer items-center gap-1.5 border-0 bg-transparent px-[7px] text-left text-xs font-[650] text-[#43556a] hover:bg-[#f4f8fc]"
         type="button"
         aria-expanded={open}
         onClick={() => onToggle(groupKey, undefined, ownerUserId)}
@@ -153,12 +153,20 @@ export function WorkspaceTreeGroup({
           ? (event) => onContextMenu(event, { kind: "root", path: "" })
           : undefined}
       >
-        <Icon name="chevron" size={14} />
-        <Icon name="folder" size={17} />
+        <span
+          className={`inline-flex text-[#98a5b2] transition-transform duration-150 ease-in-out ${
+            open ? "rotate-90" : ""
+          }`}
+        >
+          <Icon name="chevron" size={14} />
+        </span>
+        <span className="inline-flex text-[#eab434] [&_svg]:fill-[#f7c84a] [&_svg]:stroke-[#e0a828]">
+          <Icon name="folder" size={17} />
+        </span>
         <span>{title}</span>
       </button>
       {open && (
-        <div className="tree-group__items">
+        <div className="flex flex-col gap-0.5 pl-[13px]">
           <WorkspaceTreeItems
             groupKey={groupKey}
             ownerUserId={ownerUserId}
@@ -180,7 +188,7 @@ export function WorkspaceTreeGroup({
             onCopyResourcePath={onCopyResourcePath}
           />
           {scripts.length === 0 && directories.length === 0 && dataResourceScripts.length === 0 && (
-            <p className="tree-group__empty">
+            <p className="mb-[7px] ml-[35px] mt-0.5 text-[11px] text-[#a5b0bc]">
               {readOnly ? "暂无文件" : "右键此目录即可新建或上传"}
             </p>
           )}
@@ -231,48 +239,67 @@ function WorkspaceTreeItems({
           onCopyResourcePath={onCopyResourcePath}
         />
       ))}
-      {childScripts.map((item) => (
-        <button
-          className={`script-row${
-            selectedId === item.script_id ? " script-row--active" : ""
-          }`}
-          style={{ paddingLeft: 20 + depth * 16 }}
-          key={item.script_id}
-          type="button"
-          onClick={() => {
-            if (item.script_id.startsWith("data:") && onCopyResourcePath) {
-              onCopyResourcePath(item.relative_path);
-            } else {
-              onSelect(item.script_id);
-            }
-          }}
-          onContextMenu={onContextMenu
-            ? (event) => onContextMenu(event, {
-              kind: "file",
-              path: ownedScriptPath(item),
-              script: item,
-            })
-            : undefined}
-        >
-            <span className={`file-icon file-icon--${
-              item.script_id.startsWith("data:") ? "data" : item.script_type
-            }`}>
-              <Icon name={item.script_id.startsWith("data:") ? "database" : scriptIcon(item)} size={17} />
+      {childScripts.map((item) => {
+        const isActive = selectedId === item.script_id;
+        const isData = item.script_id.startsWith("data:");
+        const iconTone = isData
+          ? "text-[#5a8f6a] bg-[#eef8f1]"
+          : item.script_type === "notebook"
+            ? "text-[#e15e50] bg-[#fff0ed]"
+            : "text-[#2e73c6] bg-[#eaf3ff]";
+        return (
+          <button
+            className={`flex h-[47px] w-full cursor-pointer items-center gap-2 rounded-md border pr-[9px] text-left ${
+              isActive
+                ? "border-[#c6ddf4] bg-[#eaf4ff]"
+                : "border-transparent bg-transparent hover:bg-[#f4f7fa]"
+            }`}
+            style={{ paddingLeft: 20 + depth * 16 }}
+            key={item.script_id}
+            type="button"
+            onClick={() => {
+              if (isData && onCopyResourcePath) {
+                onCopyResourcePath(item.relative_path);
+              } else {
+                onSelect(item.script_id);
+              }
+            }}
+            onContextMenu={onContextMenu
+              ? (event) => onContextMenu(event, {
+                kind: "file",
+                path: ownedScriptPath(item),
+                script: item,
+              })
+              : undefined}
+          >
+            <span className={`grid size-[25px] shrink-0 place-items-center rounded-[5px] ${iconTone}`}>
+              <Icon name={isData ? "database" : scriptIcon(item)} size={17} />
             </span>
-            <span className="script-row__copy">
-              <strong title={item.script_name}>{item.script_name}</strong>
-              <small>{formatTime(item.updated_at)}</small>
+            <span className="flex min-w-0 flex-1 flex-col">
+              <strong
+                className="truncate text-xs font-semibold text-[#34475d]"
+                title={item.script_name}
+              >
+                {item.script_name}
+              </strong>
+              <small className="mt-0.5 text-[9px] text-[#9ba8b7]">
+                {formatTime(item.updated_at)}
+              </small>
             </span>
             {item.is_locked && (
-              <span className="lock-badge" title="已锁定">
+              <span className="mr-1 inline-flex items-center justify-center text-[#c79a3a]" title="已锁定">
                 <Icon name="lock" size={12} />
               </span>
             )}
             {item.visibility !== "private" && (
-              <span className="visibility-dot" title="Workspace 可见" />
+              <span
+                className="size-1.5 shrink-0 rounded-full bg-[#1dbd7c] shadow-[0_0_0_3px_rgb(29_189_124/10%)]"
+                title="Workspace 可见"
+              />
             )}
-        </button>
-      ))}
+          </button>
+        );
+      })}
     </>
   );
 }
@@ -298,9 +325,9 @@ function DirectoryBranch({
   const open = expandedPaths.has(expandKey);
   const childrenLoading = loadingChildrenPaths.has(directory.path);
   return (
-    <div className="directory-branch">
+    <div className="flex flex-col">
       <button
-        className="directory-row"
+        className="flex h-8 w-full cursor-pointer items-center gap-1.5 rounded-[5px] border-0 bg-transparent pr-[9px] text-left text-[#45586c] hover:bg-[#f4f7fa]"
         style={{ paddingLeft: 10 + depth * 16 }}
         type="button"
         onClick={() => onToggle(expandKey, directory.path, ownerUserId)}
@@ -311,12 +338,25 @@ function DirectoryBranch({
           })
           : undefined}
       >
-        <span className={`directory-row__chevron${open ? " is-open" : ""}`}>
+        <span
+          className={`grid shrink-0 place-items-center text-[#94a2b1] transition-transform duration-150 ease-in-out ${
+            open ? "rotate-90" : ""
+          }`}
+        >
           <Icon name="chevron" size={13} />
         </span>
-        <Icon name="folder" size={17} />
-        <strong title={directory.path}>{directory.name}</strong>
-        {childrenLoading && <span className="loading-spinner" />}
+        <span className="inline-flex shrink-0 text-[#e2aa27] [&_svg]:fill-[#f7c84a]">
+          <Icon name="folder" size={17} />
+        </span>
+        <strong
+          className="truncate text-[11px] font-[650]"
+          title={directory.path}
+        >
+          {directory.name}
+        </strong>
+        {childrenLoading && (
+          <span className="ml-1 size-3.5 shrink-0 animate-spin rounded-full border-2 border-[#c5d3e0] border-t-[#6a8fb0]" />
+        )}
       </button>
       {open && (
         <WorkspaceTreeItems