增加自定义Scheme的激活和删除功能。

src/App.tsx

@@ -29,6 +29,7 @@ const routes = createBrowserRouter([
         path: 'schemes',
         element: <Schemes />,
         children: [
+          { index: true, element: <div /> },
           { path: 'new', element: <NewScheme /> },
           { path: 'not-found', element: <SchemeNotFound /> },
           { path: ':id', element: <SchemeDetail /> },

src/page-components/schemes/SchemeList.module.css

@@ -20,6 +20,7 @@
       display: flex;
       flex-direction: column;
       align-items: stretch;
+      gap: var(--spacing-s);
       .scheme_item {
         padding: calc(var(--spacing) * 2) calc(var(--spacing) * 8);
         &.selected {
@@ -53,6 +54,42 @@
         font-size: var(--font-size-xs);
         color: var(--color-accent);
       }
+      .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);
+        }
+      }
+      .active_btn {
+        font-size: var(--font-size-xs);
+        color: var(--color-yuebai);
+        background-color: oklch(from var(--color-info) l c h / 0.25);
+        &:hover {
+          background-color: oklch(from var(--color-info-hover) l c h / 0.65);
+        }
+        &:active {
+          background-color: oklch(from var(--color-info-active) l c h / 0.65);
+        }
+        &.deactive {
+          background-color: oklch(from var(--color-warn) l c h / 0.25);
+          &:hover {
+            background-color: oklch(from var(--color-warn-hover) l c h / 0.65);
+          }
+          &:active {
+            background-color: oklch(from var(--color-warn-active) l c h / 0.65);
+          }
+        }
+      }
+      .active_badge {
+        font-size: var(--font-size-xs);
+        color: var(--color-yuebai);
+        background-color: var(--color-success);
+      }
     }
     .empty_prompt {
       padding-inline: calc(var(--spacing) * 6);

src/page-components/schemes/SchemeList.tsx

@@ -1,12 +1,12 @@
-import { Icon } from '@iconify/react/dist/iconify.js';
 import cx from 'clsx';
-import dayjs from 'dayjs';
+import { useAtom } from 'jotai';
-import { useAtomValue } from 'jotai';
 import { isEmpty, isEqual } from 'lodash-es';
-import { useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
 import { Link, useNavigate, useParams } from 'react-router-dom';
+import { ActionIcon } from '../../components/ActionIcon';
+import { Badge } from '../../components/Badge';
 import { SchemeSign } from '../../components/SchemeSign';
-import { activeSchemeAtom, useSchemeList } from '../../stores/schemes';
+import { activeSchemeAtom, useRemoveScheme, useSchemeList } from '../../stores/schemes';
 import styles from './SchemeList.module.css';
 
 function OperateButtons() {
@@ -26,9 +26,20 @@ type SchemeItemProps = {
 function SchemeItem({ item }: SchemeItemProps) {
   const navParams = useParams();
   const navigate = useNavigate();
-  const activedScheme = useAtomValue(activeSchemeAtom);
+  const [activedScheme, setActiveScheme] = useAtom(activeSchemeAtom);
+  const removeScheme = useRemoveScheme(item.id);
   const isActived = useMemo(() => isEqual(activedScheme, item.id), [activedScheme, item.id]);
   const isSelected = useMemo(() => isEqual(navParams['id'], item.id), [navParams, item.id]);
+  const handleActiveScheme = useCallback(() => {
+    setActiveScheme((prev) => (prev ? null : item.id));
+  }, [item]);
+  const handleRemoveScheme = useCallback(() => {
+    removeScheme();
+    if (isActived) {
+      setActiveScheme(null);
+    }
+    navigate(-1);
+  }, [item, isActived]);
 
   return (
     <div
@@ -37,11 +48,22 @@ function SchemeItem({ item }: SchemeItemProps) {
       <div className={styles.name}>{item.name}</div>
       <div className={styles.status}>
         <SchemeSign scheme={item.type} short />
-        <div className={styles.create_time}>
+        {isActived && <Badge extendClassName={styles.active_badge}>ACTIVE</Badge>}
-          created at {dayjs(item.createdAt).format('YYYY-MM-DD')}
-        </div>
         <div className="spacer"></div>
-        {isActived && <Icon icon="tabler:check" className={styles.active_icon} />}
+        {isSelected && (
+          <>
+            <ActionIcon
+              icon="tabler:trash"
+              extendClassName={styles.delete_btn}
+              onClick={handleRemoveScheme}
+            />
+            <ActionIcon
+              icon="tabler:checkbox"
+              extendClassName={cx(styles.active_btn, isActived && styles.deactive)}
+              onClick={handleActiveScheme}
+            />
+          </>
+        )}
       </div>
     </div>
   );

src/pages/SchemeDetail.module.css

@@ -13,6 +13,10 @@
       flex-direction: row;
       align-items: center;
       gap: var(--spacing-m);
+      .create_time {
+        font-size: var(--font-size-xs);
+        color: var(--color-neutral);
+      }
     }
   }
 }

src/pages/SchemeDetail.tsx

@@ -1,3 +1,4 @@
+import dayjs from 'dayjs';
 import { isNil, set } from 'lodash-es';
 import { useCallback, useEffect } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
@@ -43,6 +44,9 @@ export function SchemeDetail() {
       <EditableTitle title={scheme?.name} onChange={updateTitle} />
       <div className={styles.badge_layout}>
         <SchemeSign scheme={scheme?.type} />
+        <div className={styles.create_time}>
+          created at {dayjs(scheme?.createdAt).format('YYYY-MM-DD')}
+        </div>
       </div>
       <EditableDescription content={scheme?.description} onChange={updateDescription} />
     </div>