xinyin025/ChatGPT-Next-Web
1
0
Fork 0
mirror of https://github.com/ChatGPTNextWeb/ChatGPT-Next-Web.git synced 2025-10-01 23:56:39 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

update ui

Browse Source
This commit is contained in:
sijinhui 2024-05-15 00:39:45 +08:00
parent 8dc76ac212
commit 71176bcc74
3 changed files with 82 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
app/components/ui-lib.module.scss
View File

@ -326,3 +326,10 @@
align-items: center;
justify-content: center;
}
.modal-mask-container {
//min-width: 80vw;
.ant-card .ant-card-body {
padding: 12px;
}
}

90
app/components/ui-lib.tsx
View File

@ -15,7 +15,8 @@ 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 } from "antd";
import { Card as AntCard, List as AntList, Row, Col, Grid, Avatar } from "antd";
const { Meta } = AntCard;
export function Popover(props: {
children: JSX.Element;
@ -501,20 +502,79 @@ export function ModalSelector<T>(props: {
console.log("-----", props);
return (
<div className={styles["modal-mask"]}>
<Modal title="test" onClose={() => props.onClose?.()}>
<AntList grid={{ gutter: 16, column: 3 }}>
<Row gutter={[16, 16]}>
<Col span={8}>
<AntList.Item>
<AntCard title="你好">Card</AntCard>
</AntList.Item>
</Col>
<Col span={8}>
<AntList.Item>
<AntCard title="你好">Card</AntCard>
</AntList.Item>
</Col>
<div
className={styles["modal-mask"] + " " + styles["modal-mask-container"]}
>
<Modal title="选择模型" onClose={() => props.onClose?.()}>
<AntList grid={{ gutter: 16 }}>
<Row
gutter={[16, 16]}
style={{ marginLeft: "-8px", marginRight: "-8px" }}
>
{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
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>
</AntList>
</Modal>

1
app/constant.ts
View File

@ -134,7 +134,6 @@ export const KnowledgeCutOffDate: Record<string, string> = {
"gpt-4-turbo": "2023-12",
"gpt-4-turbo-2024-04-09": "2023-12",
"gpt-4-turbo-preview": "2023-12",
"gpt-4o": "2023-10",
"gpt-4o-2024-05-13": "2023-10",
"gpt-4-vision-preview": "2023-04",
// After improvements,