增加Scheme列表样式和点击效果。

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

@@ -20,6 +20,39 @@
       display: flex;
       flex-direction: column;
       align-items: stretch;
+      .scheme_item {
+        padding: calc(var(--spacing) * 2) calc(var(--spacing) * 8);
+        &.selected {
+          background-color: var(--color-primary-active);
+        }
+        &:hover {
+          background-color: var(--color-primary-hover);
+        }
+      }
+      .name {
+        font-size: var(--font-size-m);
+        font-weight: bold;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      .status {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: var(--spacing-xs);
+      }
+      .create_time {
+        font-size: var(--font-size-xs);
+        color: var(--color-neutral);
+        .scheme_item.selected & {
+          color: var(--color-neutral-focus);
+        }
+      }
+      .active_icon {
+        font-size: var(--font-size-xs);
+        color: var(--color-accent);
+      }
     }
     .empty_prompt {
       padding-inline: calc(var(--spacing) * 6);

src/page-components/schemes/SchemeList.tsx

@@ -1,9 +1,10 @@
 import { Icon } from '@iconify/react/dist/iconify.js';
+import cx from 'clsx';
 import dayjs from 'dayjs';
 import { useAtomValue } from 'jotai';
 import { isEmpty, isEqual } from 'lodash-es';
 import { useMemo } from 'react';
-import { Link } from 'react-router-dom';
+import { Link, useNavigate, useParams } from 'react-router-dom';
 import { activeSchemeAtom, useSchemeList } from '../../stores/schemes';
 import styles from './SchemeList.module.css';
 
@@ -22,15 +23,23 @@ type SchemeItemProps = {
 };
 
 function SchemeItem({ item }: SchemeItemProps) {
+  const navParams = useParams();
+  const navigate = useNavigate();
   const activedScheme = useAtomValue(activeSchemeAtom);
   const isActived = useMemo(() => isEqual(activedScheme, item.id), [activedScheme, item.id]);
+  const isSelected = useMemo(() => isEqual(navParams['id'], item.id), [navParams, item.id]);
 
   return (
-    <div>
+    <div
-      <div>{item.name}</div>
+      className={cx(styles.scheme_item, isSelected && styles.selected)}
-      <div>
+      onClick={() => navigate(item.id)}>
-        <div>created at {dayjs(item.createdAt).format('YYYY-MM-DD')}</div>
+      <div className={styles.name}>{item.name}</div>
-        <div>{isActived && <Icon icon="tabler:check" />}</div>
+      <div className={styles.status}>
+        <div className={styles.create_time}>
+          created at {dayjs(item.createdAt).format('YYYY-MM-DD')}
+        </div>
+        <div className="spacer"></div>
+        {isActived && <Icon icon="tabler:check" className={styles.active_icon} />}
       </div>
     </div>
   );