From a4eddb15e3a1466e3b4dcb4f23e7f3c6db4868e7 Mon Sep 17 00:00:00 2001
From: rdmclin2 <rdmclin2@gmail.com>
Date: Sun, 14 Apr 2024 13:43:23 +0800
Subject: [PATCH] =?UTF-8?q?:sparkles:=20=E6=8A=BD=E8=B1=A1=20GridList?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../{ => GridList}/ListItem/index.tsx         |  0
 .../{ => GridList}/ListItem/style.ts          |  0
 src/components/GridList/index.tsx             | 45 +++++++++++++++++++
 src/components/GridList/style.ts              | 17 +++++++
 src/constants/common.ts                       |  4 ++
 src/panels/AgentPanel/Agent/List/index.tsx    | 40 +++++++----------
 src/panels/AgentPanel/Agent/List/style.ts     | 17 -------
 src/panels/AgentPanel/index.tsx               |  2 +-
 8 files changed, 83 insertions(+), 42 deletions(-)
 rename src/components/{ => GridList}/ListItem/index.tsx (100%)
 rename src/components/{ => GridList}/ListItem/style.ts (100%)
 create mode 100644 src/components/GridList/index.tsx
 create mode 100644 src/components/GridList/style.ts
 delete mode 100644 src/panels/AgentPanel/Agent/List/style.ts

diff --git a/src/components/ListItem/index.tsx b/src/components/GridList/ListItem/index.tsx
similarity index 100%
rename from src/components/ListItem/index.tsx
rename to src/components/GridList/ListItem/index.tsx
diff --git a/src/components/ListItem/style.ts b/src/components/GridList/ListItem/style.ts
similarity index 100%
rename from src/components/ListItem/style.ts
rename to src/components/GridList/ListItem/style.ts
diff --git a/src/components/GridList/index.tsx b/src/components/GridList/index.tsx
new file mode 100644
index 00000000..124d326a
--- /dev/null
+++ b/src/components/GridList/index.tsx
@@ -0,0 +1,45 @@
+import classNames from 'classnames';
+import React, { memo } from 'react';
+
+import ListItem from './ListItem';
+import { useStyles } from './style';
+
+interface Item {
+  avatar: string;
+  id: string;
+  name: string;
+}
+
+interface GridListProps {
+  className?: string;
+  isActivated?: (id: string) => boolean;
+  items: Item[];
+  onClick?: (id: string) => void;
+  style?: React.CSSProperties;
+}
+
+const GridList = (props: GridListProps) => {
+  const { items, className, style, onClick, isActivated } = props;
+  const { styles } = useStyles();
+
+  return (
+    <div className={classNames(className, styles.list)} style={style}>
+      {items.map((item) => {
+        const { avatar, name, id } = item;
+        return (
+          <ListItem
+            key={id}
+            title={name}
+            avatar={avatar}
+            onClick={() => {
+              if (onClick) onClick(id);
+            }}
+            active={isActivated ? isActivated(id) : false}
+          />
+        );
+      })}
+    </div>
+  );
+};
+
+export default memo(GridList);
diff --git a/src/components/GridList/style.ts b/src/components/GridList/style.ts
new file mode 100644
index 00000000..797e5d49
--- /dev/null
+++ b/src/components/GridList/style.ts
@@ -0,0 +1,17 @@
+import { createStyles } from 'antd-style';
+
+import { LIST_GRID_GAP, LIST_GRID_HEIGHT, LIST_GRID_WIDTH } from '@/constants/common';
+
+export const useStyles = createStyles(({ css }) => ({
+  list: css`
+    overflow: auto;
+    display: grid;
+    grid-auto-flow: row;
+    grid-gap: ${LIST_GRID_GAP}px;
+    grid-template-columns: repeat(auto-fill, ${LIST_GRID_WIDTH}px);
+    grid-template-rows: repeat(auto-fill, ${LIST_GRID_HEIGHT}px);
+    justify-items: center;
+
+    height: 100%;
+  `,
+}));
diff --git a/src/constants/common.ts b/src/constants/common.ts
index c42641e6..051ae8d6 100644
--- a/src/constants/common.ts
+++ b/src/constants/common.ts
@@ -21,3 +21,7 @@ export const CHAT_TEXTAREA_HEIGHT = 200;
 export const HEADER_HEIGHT = 64;
 
 export const DEFAULT_USER_AVATAR = '😀';
+
+export const LIST_GRID_WIDTH = 108;
+export const LIST_GRID_GAP = 4;
+export const LIST_GRID_HEIGHT = 108;
diff --git a/src/panels/AgentPanel/Agent/List/index.tsx b/src/panels/AgentPanel/Agent/List/index.tsx
index 50bde8f5..2b1c547c 100644
--- a/src/panels/AgentPanel/Agent/List/index.tsx
+++ b/src/panels/AgentPanel/Agent/List/index.tsx
@@ -1,12 +1,9 @@
-import classNames from 'classnames';
-import React, { memo } from 'react';
+import React from 'react';
 
-import ListItem from '@/components/ListItem';
+import GridList from '@/components/GridList';
 import { useAgentStore } from '@/store/agent';
 import { Agent } from '@/types/agent';
 
-import { useStyles } from './style';
-
 interface AgentListProps {
   className?: string;
   dataSource: Agent[];
@@ -19,27 +16,22 @@ const AgentList = (props: AgentListProps) => {
     s.activateAgent,
     s.currentIdentifier,
   ]);
-  const { styles } = useStyles();
 
   return (
-    <div className={classNames(className, styles.list)} style={style}>
-      {dataSource.map((item) => {
-        const { avatar, name } = item.meta;
-        const isSelected = item.agentId === currentIdentifier;
-        return (
-          <ListItem
-            key={item.agentId}
-            title={name}
-            avatar={avatar}
-            onClick={() => {
-              activateAgent(item.agentId);
-            }}
-            active={isSelected}
-          />
-        );
-      })}
-    </div>
+    <GridList
+      className={className}
+      style={style}
+      items={dataSource.map((items) => ({
+        avatar: items.meta.avatar,
+        id: items.agentId,
+        name: items.meta.name,
+      }))}
+      onClick={(id) => {
+        activateAgent(id);
+      }}
+      isActivated={(id) => id === currentIdentifier}
+    />
   );
 };
 
-export default memo(AgentList);
+export default AgentList;
diff --git a/src/panels/AgentPanel/Agent/List/style.ts b/src/panels/AgentPanel/Agent/List/style.ts
deleted file mode 100644
index 4f9a5c0f..00000000
--- a/src/panels/AgentPanel/Agent/List/style.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { createStyles } from 'antd-style';
-
-const GRID_WIDTH = 100;
-const GRID_GAP = 4;
-const GRID_HEIGHT = 100;
-
-export const useStyles = createStyles(({ css }) => ({
-  list: css`
-    overflow: auto;
-    display: grid;
-    grid-auto-flow: row;
-    grid-gap: ${GRID_GAP}px;
-    grid-template-columns: repeat(auto-fill, ${GRID_WIDTH}px);
-    grid-template-rows: repeat(auto-fill, ${GRID_HEIGHT}px);
-    justify-items: center;
-  `,
-}));
diff --git a/src/panels/AgentPanel/index.tsx b/src/panels/AgentPanel/index.tsx
index ae66d72c..56698d19 100644
--- a/src/panels/AgentPanel/index.tsx
+++ b/src/panels/AgentPanel/index.tsx
@@ -20,7 +20,7 @@ const ControlPanel = (props: ControlPanelProps) => {
 
   const options = [
     { value: 'agent', label: '已订阅', icon: <BarsOutlined /> },
-    { value: 'market', label: '创意工坊', icon: <AppstoreOutlined /> },
+    { value: 'market', label: '发现', icon: <AppstoreOutlined /> },
   ];
 
   return (