From e7332e331bb7a1c31933d72041b47a42762a54c3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BE=90=E6=B6=9B?= <midnite@outlook.com>
Date: Wed, 25 Dec 2024 17:11:04 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0Scheme=E5=88=97=E8=A1=A8?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E5=92=8C=E7=82=B9=E5=87=BB=E6=95=88=E6=9E=9C?=
 =?UTF-8?q?=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../schemes/SchemeList.module.css             | 33 +++++++++++++++++++
 src/page-components/schemes/SchemeList.tsx    | 21 ++++++++----
 2 files changed, 48 insertions(+), 6 deletions(-)

diff --git a/src/page-components/schemes/SchemeList.module.css b/src/page-components/schemes/SchemeList.module.css
index a0589d1..7a8db83 100644
--- a/src/page-components/schemes/SchemeList.module.css
+++ b/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);
diff --git a/src/page-components/schemes/SchemeList.tsx b/src/page-components/schemes/SchemeList.tsx
index ab60db0..a035a72 100644
--- a/src/page-components/schemes/SchemeList.tsx
+++ b/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>{item.name}</div>
-      <div>
-        <div>created at {dayjs(item.createdAt).format('YYYY-MM-DD')}</div>
-        <div>{isActived && <Icon icon="tabler:check" />}</div>
+    <div
+      className={cx(styles.scheme_item, isSelected && styles.selected)}
+      onClick={() => navigate(item.id)}>
+      <div className={styles.name}>{item.name}</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>
   );