From 5d3fc2903b93c3cb41ea2abefa134305a82c2beb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BE=90=E6=B6=9B?= <midnite@outlook.com>
Date: Sat, 8 Feb 2025 10:11:02 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E5=8F=96=E7=94=A8=E6=9D=A5=E5=BD=95?=
 =?UTF-8?q?=E5=85=A5=E8=87=AA=E5=AE=9A=E4=B9=89=E9=A2=9C=E8=89=B2=E7=9A=84?=
 =?UTF-8?q?=E5=85=AC=E5=85=B1ColorEntry=E7=BB=84=E4=BB=B6=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../scheme/ColorEntry.module.css              | 13 +++++++
 src/page-components/scheme/ColorEntry.tsx     | 38 +++++++++++++++++++
 .../scheme/swatch-scheme/Builder.tsx          | 37 +-----------------
 3 files changed, 52 insertions(+), 36 deletions(-)
 create mode 100644 src/page-components/scheme/ColorEntry.module.css
 create mode 100644 src/page-components/scheme/ColorEntry.tsx

diff --git a/src/page-components/scheme/ColorEntry.module.css b/src/page-components/scheme/ColorEntry.module.css
new file mode 100644
index 0000000..0c14011
--- /dev/null
+++ b/src/page-components/scheme/ColorEntry.module.css
@@ -0,0 +1,13 @@
+@layer components {
+  .delete_btn {
+    font-size: var(--font-size-xs);
+    color: var(--color-yuebai);
+    background-color: oklch(from var(--color-danger) l c h / 0.25);
+    &:hover {
+      background-color: oklch(from var(--color-danger-hover) l c h / 0.65);
+    }
+    &:active {
+      background-color: oklch(from var(--color-danger-active) l c h / 0.65);
+    }
+  }
+}
diff --git a/src/page-components/scheme/ColorEntry.tsx b/src/page-components/scheme/ColorEntry.tsx
new file mode 100644
index 0000000..11a3b8e
--- /dev/null
+++ b/src/page-components/scheme/ColorEntry.tsx
@@ -0,0 +1,38 @@
+import { isEmpty } from 'lodash-es';
+import { ActionIcon } from '../../components/ActionIcon';
+import { FloatColorPicker } from '../../components/FloatcolorPicker';
+import styles from './colorEntry.module.css';
+
+export type IdenticalColorEntry = {
+  id: string;
+  name: string;
+  color: string;
+};
+
+type ColorEntryProps = {
+  entry: IdenticalColorEntry;
+  onDelete?: (index: string) => void;
+};
+
+export function ColorEntry({ entry, onDelete }: ColorEntryProps) {
+  return (
+    <>
+      <div className="input_wrapper">
+        <input type="text" name={`name_${entry.id}`} defaultValue={entry.name} />
+      </div>
+      <div>
+        <FloatColorPicker
+          name={`color_${entry.id}`}
+          color={isEmpty(entry.color) ? undefined : entry.color}
+        />
+      </div>
+      <div>
+        <ActionIcon
+          icon="tabler:trash"
+          extendClassName={styles.delete_btn}
+          onClick={() => onDelete?.(entry.id)}
+        />
+      </div>
+    </>
+  );
+}
diff --git a/src/page-components/scheme/swatch-scheme/Builder.tsx b/src/page-components/scheme/swatch-scheme/Builder.tsx
index 9d6e301..b5a386a 100644
--- a/src/page-components/scheme/swatch-scheme/Builder.tsx
+++ b/src/page-components/scheme/swatch-scheme/Builder.tsx
@@ -6,50 +6,15 @@ import {
   SwatchSchemeSetting,
 } from '../../../color_functions/color_module';
 import { useColorFunction } from '../../../ColorFunctionContext';
-import { ActionIcon } from '../../../components/ActionIcon';
-import { FloatColorPicker } from '../../../components/FloatColorPicker';
 import { ScrollArea } from '../../../components/ScrollArea';
 import { Switch } from '../../../components/Switch';
 import { SchemeContent } from '../../../models';
 import { useUpdateScheme } from '../../../stores/schemes';
 import { QSwatchEntry, QSwatchSchemeSetting, SwatchSchemeStorage } from '../../../swatch_scheme';
 import { mapToObject } from '../../../utls';
+import { ColorEntry, IdenticalColorEntry } from '../ColorEntry';
 import styles from './Builder.module.css';
 
-type IdenticalColorEntry = {
-  id: string;
-  name: string;
-  color: string;
-};
-
-type ColorEntryProps = {
-  entry: IdenticalColorEntry;
-  onDelete?: (index: string) => void;
-};
-
-function ColorEntry({ entry, onDelete }: ColorEntryProps) {
-  return (
-    <>
-      <div className="input_wrapper">
-        <input type="text" name={`name_${entry.id}`} defaultValue={entry.name} />
-      </div>
-      <div>
-        <FloatColorPicker
-          name={`color_${entry.id}`}
-          color={isEmpty(entry.color) ? undefined : entry.color}
-        />
-      </div>
-      <div>
-        <ActionIcon
-          icon="tabler:trash"
-          extendClassName={styles.delete_btn}
-          onClick={() => onDelete?.(entry.id)}
-        />
-      </div>
-    </>
-  );
-}
-
 type SwatchSchemeBuilderProps = {
   scheme: SchemeContent<SwatchSchemeStorage>;
   onBuildCompleted?: () => void;