💄 优化颜色面板和快速启动面板的UI

Author: Littlefean

app/src/pages/_start_file_panel.tsx

@@ -9,6 +9,7 @@ import {
   FolderTree,
   HardDriveDownload,
   Pin,
+  PinOff,
   RefreshCw,
   Trash2,
 } from "lucide-react";
@@ -265,14 +266,18 @@ export default function StartFilePanel({ open = false }: { open: boolean }) {
                 </td>
               )}
               <td className="flex justify-center">
-                <button className="mx-0.5 px-2 py-1" onClick={onLoadCurrentStartFile(file.path)}>
-                  <HardDriveDownload />
+                <button className="mx-0.5 px-2 py-1 hover:cursor-pointer" onClick={onLoadCurrentStartFile(file.path)}>
+                  <HardDriveDownload className="hover:cursor-pointer" />
                 </button>
-                <button className="mx-0.5 px-2 py-1" onClick={onSetCurrentStartFile(file.path)}>
-                  <Pin />
+                <button className="mx-0.5 px-2 py-1 hover:cursor-pointer" onClick={onSetCurrentStartFile(file.path)}>
+                  {currentStartFile === file.path ? (
+                    <Pin className="hover:cursor-pointer" />
+                  ) : (
+                    <PinOff className="hover:cursor-pointer" />
+                  )}
                 </button>
-                <button className="mx-0.5 px-2 py-1" onClick={onRemoveFile(file.path)}>
-                  <Delete />
+                <button className="mx-0.5 px-2 py-1 hover:cursor-pointer" onClick={onRemoveFile(file.path)}>
+                  <Delete className="hover:cursor-pointer" />
                 </button>
               </td>
             </tr>
@@ -281,10 +286,19 @@ export default function StartFilePanel({ open = false }: { open: boolean }) {
       </table>
       <div>
         <div className="text-panel-details-text mt-3 text-sm">
-          <p>{t("tips.0")}</p>
-          <p>{t("tips.1")}</p>
-          <p>{t("tips.2")}</p>
-          <p>{t("tips.3")}</p>
+          <p className="flex h-8 items-center">{t("tips.0")}</p>
+          <p className="flex h-8 items-center">
+            <HardDriveDownload />
+            {t("tips.1")}
+          </p>
+          <p className="flex h-8 items-center">
+            <Pin />
+            {t("tips.2")}
+          </p>
+          <p className="flex h-8 items-center">
+            <Delete />
+            {t("tips.3")}
+          </p>
         </div>
         <div>
           <div className="flex flex-nowrap items-center justify-center">

app/src/pages/_toolbar.tsx

@@ -79,7 +79,7 @@ export function ColorPanel() {
     });
   }, []);
   return (
-    <>
+    <div className="bg-panel-bg rounded-lg">
       <div className="flex flex-wrap items-center justify-center">
         <div
           className="m-1 h-5 w-5 cursor-pointer rounded-full bg-red-500 hover:scale-125"
@@ -126,7 +126,9 @@ export function ColorPanel() {
         >
           <span>x</span>
         </div>
-        {/* 自定义 */}
+      </div>
+      <div className="flex flex-wrap items-center justify-center">
+        {/* 临时自定义 */}
         <input
           type="color"
           id="colorPicker"
@@ -165,7 +167,7 @@ export function ColorPanel() {
           );
         })}
       </div>
-    </>
+    </div>
   );
 }
 
@@ -178,12 +180,12 @@ function GenerateNodePanel() {
   const [indention, setIndention] = useState(4);
 
   return (
-    <div className="flex flex-col gap-4">
+    <div className="bg-panel-bg flex flex-col gap-4 rounded-lg p-2">
       <Input value={inputValue} onChange={setInputValue} multiline />
       <div>
-        <span>缩进</span>
+        <span className="text-panel-text">缩进数量</span>
         <Input value={indention.toString()} onChange={setIndention} number />
-        <p className="text-xs text-neutral-400">会按照您的缩进等级来生成对应的节点结构</p>
+        <p className="text-panel-details-text text-xs">会按照您的缩进等级来生成对应的节点结构</p>
       </div>
       <Button
         onClick={() => {