优化模型选择ui

app/components/ui-lib.module.scss

@@ -327,9 +327,6 @@
   justify-content: center;
 }
 
-.modal-mask-container {
-  //min-width: 80vw;
-  .ant-card .ant-card-body {
-    padding: 12px;
-  }
+.cus-modal-container {
+  max-width: none !important;
 }

app/components/ui-lib.tsx

@@ -15,8 +15,19 @@ import Locale from "../locales";
 import { createRoot } from "react-dom/client";
 import React, { HTMLProps, useEffect, useState } from "react";
 import { IconButton } from "./button";
-import { Card as AntCard, List as AntList, Row, Col, Grid, Avatar } from "antd";
+import {
+  Card as AntCard,
+  List as AntList,
+  Row,
+  Col,
+  Grid,
+  Avatar,
+  Button,
+} from "antd";
+import { OpenAIOutlined, GoogleOutlined } from "@ant-design/icons";
 const { Meta } = AntCard;
+import { CheckCard } from "@ant-design/pro-components";
+import { CheckGroupValueType } from "@ant-design/pro-card/es/components/CheckCard/Group";
 
 export function Popover(props: {
   children: JSX.Element;
@@ -103,6 +114,7 @@ interface ModalProps {
   defaultMax?: boolean;
   footer?: React.ReactNode;
   onClose?: () => void;
+  is_cus?: boolean;
 }
 export function Modal(props: ModalProps) {
   useEffect(() => {
@@ -125,7 +137,9 @@ export function Modal(props: ModalProps) {
   return (
     <div
       className={
-        styles["modal-container"] + ` ${isMax && styles["modal-container-max"]}`
+        styles["modal-container"] +
+        ` ${isMax && styles["modal-container-max"]}` +
+        ` ${props.is_cus ? styles["cus-modal-container"] : ""}`
       }
     >
       <div className={styles["modal-header"]}>
@@ -488,7 +502,7 @@ export function Selector<T>(props: {
   );
 }
 
-export function ModalSelector<T>(props: {
+export function ModalSelector<T extends CheckGroupValueType>(props: {
   items: Array<{
     title: string;
     subTitle?: string;
@@ -501,81 +515,54 @@ export function ModalSelector<T>(props: {
 }) {
   console.log("-----", props);
 
+  const getCheckCardAvatar = (value: string): React.ReactNode => {
+    if (value.startsWith("gpt")) {
+      return <OpenAIOutlined />;
+    }
+    if (value.startsWith("gemini")) {
+      return <GoogleOutlined />;
+    }
+    return <></>;
+  };
+
   return (
     <div
       className={styles["modal-mask"] + " " + styles["modal-mask-container"]}
     >
-      <Modal title="选择模型" onClose={() => props.onClose?.()}>
+      <Modal
+        title="选择模型"
+        onClose={() => props.onClose?.()}
+        footer={null}
+        is_cus={true}
+      >
         <AntList grid={{ gutter: 16 }}>
-          <Row
-            gutter={[16, 16]}
-            style={{ marginLeft: "-8px", marginRight: "-8px" }}
+          <CheckCard.Group
+            size="small"
+            defaultValue={props.defaultSelectedValue}
           >
-            {props.items.map((item, i) => {
-              const selected = props.defaultSelectedValue === item.value;
-              return (
-                <Col
-                  key={i}
-                  xs={{ flex: "100%" }}
-                  sm={{ flex: "50%" }}
-                  md={{ flex: "33%" }}
-                  lg={{ flex: "33%" }}
-                  xl={{ flex: "33%" }}
-                >
-                  <AntCard>
-                    <AntList.Item
+            <Row
+              gutter={[16, 16]}
+              style={{ marginLeft: "-8px", marginRight: "-8px" }}
+            >
+              {props.items.map((item, i) => {
+                const selected = props.defaultSelectedValue === item.value;
+                return (
+                  <Col key={i} sm={{ flex: "50%" }} md={{ flex: "20%" }}>
+                    <CheckCard
+                      title={item.title}
+                      description={item.subTitle}
+                      value={item.value}
                       onClick={() => {
                         props.onSelection?.([item.value]);
                         props.onClose?.();
                       }}
-                    >
-                      <Meta title={item.title} description={item.subTitle} />
-                      {selected ? (
-                        <div
-                          style={{
-                            height: 10,
-                            width: 10,
-                            backgroundColor: "var(--primary)",
-                            borderRadius: 10,
-                          }}
-                        ></div>
-                      ) : (
-                        <></>
-                      )}
-                    </AntList.Item>
-                  </AntCard>
-                </Col>
-              );
-            })}
-
-            {/*<Col xs={{ flex: '100%' }}*/}
-            {/*     sm={{ flex: '50%' }}*/}
-            {/*     md={{ flex: '33%' }}*/}
-            {/*     lg={{ flex: '33%' }}*/}
-            {/*     xl={{ flex: '33%' }}>*/}
-            {/*  <AntList.Item>*/}
-            {/*    <AntCard title="你好">Card</AntCard>*/}
-            {/*  </AntList.Item>*/}
-            {/*</Col>*/}
-            {/*<Col xs={{ flex: '100%' }}*/}
-            {/*     sm={{ flex: '50%' }}*/}
-            {/*     md={{ flex: '33%' }}*/}
-            {/*     lg={{ flex: '33%' }}*/}
-            {/*     xl={{ flex: '33%' }}>*/}
-            {/*  <AntList.Item>*/}
-            {/*    <AntCard title="你好">Card</AntCard>*/}
-            {/*  </AntList.Item>*/}
-            {/*</Col>*/}
-            {/*<Col xs={{ flex: '100%' }}*/}
-            {/*     sm={{ flex: '50%' }}*/}
-            {/*     md={{ flex: '33%' }}*/}
-            {/*     lg={{ flex: '33%' }}*/}
-            {/*     xl={{ flex: '33%' }}>*/}
-            {/*  <AntList.Item>*/}
-            {/*    <AntCard title="你好">Card</AntCard>*/}
-            {/*  </AntList.Item>*/}
-            {/*</Col>*/}
-          </Row>
+                      avatar={getCheckCardAvatar(item.value?.toString() ?? "")}
+                    />
+                  </Col>
+                );
+              })}
+            </Row>
+          </CheckCard.Group>
         </AntList>
       </Modal>
     </div>