update:css样式拆分

frontend/app/features/platform/ScriptExplorer.tsx

@@ -163,14 +163,14 @@ export function ScriptExplorer({
   }, [filteredScripts, directories, user, dataByOwner, members]);
 
   return (
-    <aside className="explorer">
-      <div className="explorer__header">
+    <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">
         <div>
-          <h2>脚本目录</h2>
+          <h2 className="mb-0.5 text-base text-[#1d2d42]">脚本目录</h2>
         </div>
-        <div className="explorer__actions">
+        <div className="flex items-center gap-[9px]">
           <button
-            className="text-button"
+            className="inline-flex cursor-pointer items-center gap-0.5 border-0 bg-transparent px-px py-[5px] text-xs font-semibold text-[#1474d4] hover:text-[#0d58a2] disabled:cursor-wait disabled:opacity-55"
             type="button"
             disabled={uploading}
             onClick={onUpload}
@@ -180,14 +180,14 @@ export function ScriptExplorer({
           </button>
           <input
             ref={uploadInputRef}
-            className="visually-hidden"
+            className="sr-only"
             type="file"
             accept=".py,.ipynb,.csv,.xlsx,.xls,.tsv,.json,.parquet,.txt"
             multiple
             onChange={onHandleUpload}
           />
           <button
-            className="text-button"
+            className="inline-flex cursor-pointer items-center gap-0.5 border-0 bg-transparent px-px py-[5px] text-xs font-semibold text-[#1474d4] hover:text-[#0d58a2]"
             type="button"
             onClick={() => onOpenCreateDialog()}
           >
@@ -197,28 +197,34 @@ export function ScriptExplorer({
         </div>
       </div>
 
-      <div className="search-box">
+      <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%)]">
         <Icon name="search" size={17} />
         <input
+          className="min-w-0 flex-1 border-0 bg-transparent text-xs text-[#26384d] outline-none placeholder:text-[#a7b2bf]"
           aria-label="搜索脚本"
           placeholder="搜索脚本名称"
           value={keyword}
           onChange={(event) => onKeywordChange(event.target.value)}
         />
         <button
-          className={refreshing ? "is-spinning" : ""}
+          className="grid size-6 place-items-center border-0 bg-transparent text-[#8d9aaa]"
           type="button"
           aria-label="刷新脚本"
           onClick={onRefresh}
         >
-          <Icon name="refresh" size={16} />
+          <span className={refreshing ? "inline-flex animate-spin" : "inline-flex"}>
+            <Icon name="refresh" size={16} />
+          </span>
         </button>
       </div>
 
-      <div className="tree-scroll">
+      <div className="min-h-0 flex-1 overflow-y-auto px-[7px] pb-3.5 pt-[5px]">
         {loading ? (
-          <div className="tree-skeleton">
-            <span /><span /><span /><span />
+          <div className="flex flex-col gap-2 px-2 py-[15px]">
+            <span className="tree-skeleton-bar h-[43px] rounded-md" />
+            <span className="tree-skeleton-bar h-[43px] rounded-md" />
+            <span className="tree-skeleton-bar h-[43px] rounded-md" />
+            <span className="tree-skeleton-bar h-[43px] rounded-md" />
           </div>
         ) : (
           <>
@@ -249,18 +255,24 @@ export function ScriptExplorer({
               );
             })}
             {filteredScripts.length === 0 && directories.length === 0 && (
-              <div className="tree-empty">
-                <span className="tree-empty__icon">
+              <div className="flex flex-col items-center px-[18px] py-[34px] text-center text-[#97a4b4]">
+                <span className="mb-3 grid size-[46px] place-items-center rounded-[13px] bg-[#eff6fd] text-[#6796c5]">
                   <Icon name="script" size={24} />
                 </span>
-                <strong>{keyword ? "没有匹配脚本" : "还没有构建脚本"}</strong>
-                <p>
+                <strong className="text-xs text-[#637286]">
+                  {keyword ? "没有匹配脚本" : "还没有构建脚本"}
+                </strong>
+                <p className="mb-3.5 mt-1.5 text-[10px] leading-normal">
                   {keyword
                     ? "换个关键词试试"
                     : "新建 Notebook 或 Python 脚本开始实验"}
                 </p>
                 {!keyword && (
-                  <button type="button" onClick={() => onOpenCreateDialog()}>
+                  <button
+                    type="button"
+                    className="inline-flex cursor-pointer items-center gap-1 rounded-md border border-[#bcd6ee] bg-white px-[11px] py-[7px] text-[11px] text-[#176cc1]"
+                    onClick={() => onOpenCreateDialog()}
+                  >
                     <Icon name="plus" size={15} />
                     新建脚本
                   </button>