✨ 抽象 GridList

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);

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%;
+  `,
+}));

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;

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;

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 (