17 | {props.list.map((item) => {
18 | const className =
19 | selectItem?.id === item.id
20 | ? `${styles.goodsList_item} ${styles.goodsList_item_select}`
21 | : styles.goodsList_item
22 | return (
23 |
41 | )
42 | }
43 |
44 | export default GoodsList
45 |
--------------------------------------------------------------------------------
/src/components/HeaderRender/index.module.less:
--------------------------------------------------------------------------------
1 | .header{
2 | height: 56px;
3 | display: flex;
4 | align-items: center;
5 | padding: 0 12px;
6 | &__menuIcon{
7 | font-size: 18px;
8 | margin-right: 12px;
9 | }
10 | &__logo{
11 | display: flex;
12 | height: 28px;
13 | img{
14 | width: 28px;
15 | }
16 | h1{
17 | margin-block: 0;
18 | margin-inline: 0;
19 | margin-inline-start: 8px;
20 | font-weight: 600;
21 | color: rgba(0, 0, 0, 0.88);
22 | font-size: 18px;
23 | line-height: 1.6;
24 | }
25 | }
26 |
27 | &__actives{
28 | display: flex;
29 | align-items: center;
30 | margin-left: auto;
31 | &_menu{
32 | font-size: 24px;
33 | margin-left: 12px;
34 | color: #666;
35 | cursor: pointer;
36 | &:hover{
37 | color: #1877ff;
38 | }
39 | }
40 | }
41 | &__balance {
42 | height: 34px;
43 | padding: 0 8px;
44 | margin: 0 8px;
45 | background-color: #f1f1f1;
46 | border-radius: 4px;
47 | display: flex;
48 | align-items: center;
49 | justify-content: center;
50 | cursor: pointer;
51 | transition: all 0.3s ease-in-out;
52 | &:hover{
53 | background-color: #d9d9d9;
54 | }
55 | p{
56 | margin-right: 12px;
57 | }
58 | }
59 | }
60 |
--------------------------------------------------------------------------------
/src/components/MenuList/index.module.less:
--------------------------------------------------------------------------------
1 | .menuList{
2 | display: flex;
3 | .item{
4 | display: flex;
5 | align-items: center;
6 | cursor: pointer;
7 | height: 100%;
8 | color: #999;
9 | transition: all 0.3s ease-in-out;
10 | &_text{
11 | height: 100%;
12 | display: flex;
13 | flex-direction: column;
14 | align-items: start;
15 | }
16 | }
17 |
18 | &_horizontal{
19 | align-items: center;
20 | height: 56px;
21 | margin-left: 50px;
22 | .item{
23 | padding: 0 12px;
24 | margin: 0 8px;
25 | border-bottom-width: 1px;
26 | border-bottom-style: solid;
27 | border-bottom-color: transparent;
28 | &:hover{
29 | color: #1877ff;
30 | border-bottom-color: #1877ff;
31 | }
32 | &_icon{
33 | font-size: 16px;
34 | }
35 | &_title {
36 | font-size: 14px;
37 | margin-left: 8px;
38 | }
39 | }
40 | .select_item{
41 | color: #1877ff;
42 | border-bottom-color: #1877ff;
43 | }
44 | }
45 | &_inline{
46 | background-color: #fff;
47 | padding: 20px;
48 | border-radius: 12px;
49 | flex-wrap: wrap;
50 | gap: 20px;
51 | max-width: 500px;
52 | box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
53 | .item{
54 | min-width: 200px;
55 | padding:6px 20px;
56 | border-radius: 8px;
57 | font-size: 30px;
58 | &:hover{
59 | background-color: rgba(0, 0, 0, 0.06);
60 | }
61 | &_text{
62 | margin-left: 12px;
63 | justify-content: center;
64 | }
65 | &_icon{
66 | font-size: 28px;
67 | color: #333;
68 | }
69 | &_title {
70 | font-size: 14px;
71 | color: #333;
72 | }
73 | &_message {
74 | font-size: 12px;
75 | }
76 | }
77 | .select_item{
78 | background-color: rgba(0, 0, 0, 0.06);
79 | }
80 | }
81 |
82 | }
83 |
--------------------------------------------------------------------------------
/src/components/MenuList/index.tsx:
--------------------------------------------------------------------------------
1 | import menuList from '@/routers/menu_list'
2 | import styles from './index.module.less'
3 | import { joinTrim } from '@/utils'
4 | import { Link, useLocation } from 'react-router-dom'
5 | import { useMemo } from 'react'
6 |
7 | type Props = {
8 | mode?: 'vertical' | 'horizontal' | 'inline'
9 | }
10 |
11 | function MenuList(props: Props) {
12 | const location = useLocation()
13 |
14 | const pathname = useMemo(() => {
15 | return location.pathname
16 | }, [location])
17 |
18 | const { mode = 'horizontal' } = props
19 |
20 | return (
21 | {
27 | setSelectItem(item)
28 | }}
29 | >
30 |
38 | )
39 | })}
40 | { item.level === 1 ? '会员' : item.level === 2 ? '超级会员' : '超级特惠' }
31 | {item.type === 'integral' ?{item.value}积分
:{item.value}天
} 32 |
33 |
36 | {item.badge}
37 | {(item.price / 100).toFixed(2)}元
34 | {item.original_price &&¥{(item.original_price / 100).toFixed(2)}
} 35 |
22 | {menuList.web.map((item) => {
23 | const isExternal = /^(http:\/\/|https:\/\/)/.test(item.path)
24 | return (
25 |
26 |
41 | )
42 | }
43 |
44 | export default MenuList
45 |
--------------------------------------------------------------------------------
/src/components/OpenAiLogo/index.module.less:
--------------------------------------------------------------------------------
1 | .openAiLogo{
2 | animation: rotate 2s linear infinite;
3 | }
4 |
5 | @keyframes rotate {
6 | from {
7 | transform: rotate(0deg);
8 | }
9 | to {
10 | transform: rotate(360deg);
11 | }
12 | }
--------------------------------------------------------------------------------
/src/components/OpenAiLogo/index.tsx:
--------------------------------------------------------------------------------
1 | import styles from './index.module.less'
2 |
3 | function OpenAiLogo(props: { rotate?: boolean; width?: string; height?: string }) {
4 | const { rotate, width = '1.2em', height = '1.2em' } = props
5 |
6 | return (
7 |
20 | )
21 | }
22 |
23 | export default OpenAiLogo
24 |
--------------------------------------------------------------------------------
/src/components/Reminder/index.module.less:
--------------------------------------------------------------------------------
1 | .reminder{
2 | padding-top: 120px;
3 | flex: 1;
4 | display: flex;
5 | flex-direction: column;
6 | &_title{
7 | font-size: 38px;
8 | color: #333;
9 | font-weight: 600;
10 | display: flex;
11 | align-items: center;
12 | font-family: PingFang SC-Semibold,PingFang SC;
13 | img{
14 | width: 60px;
15 | }
16 | }
17 | &_message{
18 | font-size: 16px;
19 | color: #26334b;
20 | margin-top: 4px;
21 | span{
22 | padding: 2px 8px;
23 | border: 1px solid #26334b;
24 | border-radius: 4px;;
25 | }
26 | }
27 | &_question{
28 | margin-top: 100px;
29 | display: flex;
30 | align-items: center;
31 | justify-content: space-between;
32 | gap: 12px;
33 | flex-flow: wrap;
34 | &_item{
35 | min-width: 212px;
36 | min-height: 138px;
37 | flex: 1;
38 | padding: 16px;
39 | border-radius: 12px;
40 | background-color: #f5f5f5;
41 | img{
42 | width: 24px;
43 | margin-bottom: 12px;
44 | }
45 | h3{
46 | font-size: 16px;
47 | margin-bottom: 5px;
48 | color: #26334b;
49 | font-weight: 700;
50 | }
51 | p{
52 | font-size: 12px;
53 | color: #26334b;
54 | }
55 | }
56 | }
57 | }
58 |
--------------------------------------------------------------------------------
/src/components/Reminder/index.tsx:
--------------------------------------------------------------------------------
1 | import useDocumentResize from '@/hooks/useDocumentResize';
2 | import styles from './index.module.less';
3 |
4 | function Reminder(){
5 | const { width } = useDocumentResize()
6 | const list = [
7 | {
8 | id: 'zhichangzhuli',
9 | icon: 'https://www.imageoss.com/images/2023/04/23/Frame2x11dd9e54d8caafc4b2.png',
10 | name: '职场助理',
11 | desc: '作为手机斗地主游戏的产品经理，该如何做成国内爆款？'
12 | },
13 | {
14 | id: 'dianyingjiaoben',
15 | icon: 'https://www.imageoss.com/images/2023/04/23/Frame2x12ff8d52b031b85fbe.png',
16 | name: '电影脚本',
17 | desc: '写一段电影脚本，讲一个北漂草根创业逆袭的故事'
18 | },
19 | {
20 | id: 'cuanxieduanwen',
21 | icon: 'https://www.imageoss.com/images/2023/04/23/Frame2x132f6276a56cf44e81.png',
22 | name: '撰写短文',
23 | desc: '写一篇短文，用故事阐释幸福的意义'
24 | },{
25 | id: 'daimabianxie',
26 | icon: 'https://www.imageoss.com/images/2023/04/23/Frame2x14a0f6c48d4355c6ea.png',
27 | name: '代码编写',
28 | desc: '使用JavaScript写一个获取随机数的函数'
29 | }
30 | ]
31 |
32 | return (
33 |
29 | {item.icon}
30 |
37 |
38 | )
39 | })}
40 |
31 |
36 | {item.name}
32 | {mode !== 'horizontal' && ( 33 | {item.message} 34 | )} 35 |
34 |
35 |
52 | );
53 | }
54 |
55 | export default Reminder;
56 |
--------------------------------------------------------------------------------
/src/components/RichEdit/index.tsx:
--------------------------------------------------------------------------------
1 | // mK10yOvqbRX+fCUPIysUWbowJD9YR4jqRdSr7qDjXEkEnoUfhlzhYMUdHeBPfvRXZdGPPvwUaGvNtSC3QHxuSrVW7+9y5gNPU0zIooWqLus8avJUP9tqaiaU8KhE8SJ/iuGenBvG4XxWpvmiF3g+EB9+Eo9jZoJfnDoCgP7TpRE=
2 | import ReactQuill from 'react-quill'
3 | import 'react-quill/dist/quill.snow.css'
4 |
5 | type Props = {
6 | value?: string,
7 | onChange: (value: string) => void;
8 | }
9 |
10 | function RichEdit(props: Props) {
11 | return (
12 | 
欢迎来到 {import.meta.env.VITE_APP_TITLE}
35 | 与AI智能聊天，畅想无限可能！基于先进的AI引擎，让你的交流更加智能、高效、便捷！
36 |Shift + Enter 换行。开头输入 / 召唤 Prompt 角色预设。
37 |
38 | {
39 | width > 600 && list.map((item)=>{
40 | return (
41 |
51 |
42 | 
43 |
46 | )
47 | })
48 | }
49 |
50 | {item.name}
44 |{item.desc}
45 |
11 | 
18 | {nickname}
19 |
20 | )
21 | }
22 |
23 | export default UserHead;
--------------------------------------------------------------------------------
/src/components/UserInfoCard/index.module.less:
--------------------------------------------------------------------------------
1 | .userInfo{
2 | background-color: #f8f9fa;
3 | padding: 12px 20px;
4 | border-radius: 12px;
5 | &_card{
6 | display: flex;
7 | align-items: center;
8 | flex-wrap: wrap;
9 | }
10 | &_avatar{
11 | width: 60px;
12 | height: 60px;
13 | border-radius: 50%;
14 | }
15 | &_info{
16 | margin-left: 12px;
17 | &_title{
18 | display: flex;
19 | span{
20 | font-size: 20px;
21 | font-weight: 500;
22 | }
23 | img{
24 | cursor: pointer;
25 | margin-left: 8px;
26 | width: 22px;
27 | }
28 | }
29 | &_account{
30 | font-size: 14px;
31 | color: #555;
32 | }
33 | }
34 | &_vip{
35 | margin-left: auto;
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/src/hooks/useDocumentResize.ts:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from 'react';
2 |
3 | function useDocumentResize(target: HTMLElement = document.body) {
4 | const [rect, setRect] = useState({
5 | width: 0,
6 | height: 0
7 | });
8 |
9 | useEffect(() => {
10 | const handleResize = () => {
11 | if (target) {
12 | setRect({
13 | width: target.offsetWidth,
14 | height: target.offsetHeight
15 | });
16 | }
17 | };
18 |
19 | // 添加resize事件监听器
20 | window.addEventListener('resize', handleResize);
21 |
22 | // 获取初始宽度
23 | if (target) {
24 | setRect({
25 | width: target.offsetWidth,
26 | height: target.offsetHeight
27 | });
28 | }
29 |
30 | // 在组件卸载时移除监听器
31 | return () => {
32 | window.removeEventListener('resize', handleResize);
33 | };
34 | }, [target]);
35 |
36 | return rect;
37 | }
38 |
39 | export default useDocumentResize;
--------------------------------------------------------------------------------
/src/hooks/useScroll.ts:
--------------------------------------------------------------------------------
1 |
2 | type ScrollElement = HTMLDivElement | null
3 |
4 | interface ScrollReturn {
5 | scrollElement: ScrollElement
6 | scrollToBottom: () => Promise
18 | {nickname}
19 |
6 | 
7 |
18 | )
19 | }
20 |
21 | export default Page404;
--------------------------------------------------------------------------------
/src/pages/App.tsx:
--------------------------------------------------------------------------------
1 | import { useRoutes } from 'react-router-dom'
2 | import { webRouter, adminRouter } from '../routers'
3 | import { useMemo } from 'react'
4 | import { userStore } from '@/store'
5 |
6 | function App() {
7 | const { user_info } = userStore()
8 |
9 | const routers: Array
7 |
8 |
11 | 抱歉，您访问的页面不存在!
9 |请确认链接地址是否正确后重新尝试
10 |{
12 | location.href = '/'
13 | }}
14 | >
15 | 回到首页
16 |
17 |
11 |
14 | )
15 | }
16 |
17 |
18 | export default FormCard;
19 |
--------------------------------------------------------------------------------
/src/pages/admin/config/index.module.less:
--------------------------------------------------------------------------------
1 | .config{
2 | padding: 20px;
3 | border-radius: 20px;
4 | background-color: #fff;
5 | &_form{
6 | padding: 20px;
7 | border-radius: 20px;
8 | background-color: #fbfbfb;
9 | h3{
10 | color: #333;
11 | }
12 | p{
13 | margin-top: 4px;
14 | color: #999;
15 | font-size: 14px;
16 | }
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/src/pages/admin/index.module.less:
--------------------------------------------------------------------------------
1 | .admin {
2 |
3 | }
4 |
--------------------------------------------------------------------------------
/src/pages/admin/order/index.module.less:
--------------------------------------------------------------------------------
1 | .jsonPre {
2 | padding: 5px;
3 | margin: 5px;
4 | white-space: pre-wrap;
5 |
6 | [class*='string'] {
7 | color: green;
8 | }
9 |
10 | [class*='number'] {
11 | color: darkorange;
12 | }
13 |
14 | [class*='boolean'] {
15 | color: blue;
16 | }
17 |
18 | [class*='null'] {
19 | color: magenta;
20 | }
21 |
22 | [class*='key'] {
23 | color: red;
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/src/pages/chat/components/AllInput/index.module.less:
--------------------------------------------------------------------------------
1 | .allInput{
2 | display: flex;
3 | align-items: flex-end;
4 | justify-content: center;
5 | &_icon{
6 | font-size: 24px;
7 | min-width: 40px;
8 | min-height: 40px;
9 | line-height: 40px;
10 | margin-right: 12px;
11 | color: #333;
12 | cursor: pointer;
13 | border-radius: 8px;
14 | text-align: center;
15 | background-color: transparent;
16 | transition: background-color 0.3s ease-in-out;
17 | border: 1px solid #d9d9d9;
18 | &:hover{
19 | background-color: #d9d9d9;
20 | }
21 | }
22 | &_button{
23 | margin-left: 12px;
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/src/pages/chat/components/ChatMessage/index.module.less:
--------------------------------------------------------------------------------
1 | .chatMessage{
2 | display: flex;
3 | margin-top: 12px;
4 | &_avatar{
5 | width: 34px;
6 | height: 34px;
7 | border-radius: 4px;
8 | }
9 | &_content{
10 | display: flex;
11 | flex-direction: column;
12 | width: calc(100% - 42px);
13 | &_time{
14 | margin-top: 4px;
15 | margin-bottom: 4px;
16 | font-size: 12px;
17 | color: #999;
18 | }
19 | &_text{
20 | max-width: calc(100% - 42px);
21 | display: inline-block;
22 | padding: 12px;
23 | }
24 | .left{
25 | margin-right: auto;
26 | background-color: #f4f6f8;
27 | border-top-left-radius: 2px;
28 | border-top-right-radius: 12px;
29 | border-bottom-left-radius: 12px;
30 | border-bottom-right-radius: 12px;
31 | }
32 | .right{
33 | margin-left: auto;
34 | background-color: #cdeeff;
35 | border-top-left-radius: 12px;
36 | border-top-right-radius: 2px;
37 | border-bottom-left-radius: 12px;
38 | border-bottom-right-radius: 12px;
39 | }
40 | }
41 |
42 | }
43 |
--------------------------------------------------------------------------------
/src/pages/chat/components/RoleLocal/index.module.less:
--------------------------------------------------------------------------------
1 | .roleLocal{
2 | display: flex;
3 | flex-direction: column;
4 | align-items: center;
5 | justify-content: center;
6 | &_operate{
7 | text-align: right;
8 | }
9 | .promptCard{
10 | width: 100%;
11 | padding: 12px;
12 | border: 1px solid #ddd;
13 | box-sizing: border-box;
14 | border-radius: 12px;
15 | display: flex;
16 | justify-content: space-between;
17 | align-items: center;
18 | flex-wrap: wrap;
19 | &_content{
20 | flex: 1;
21 | max-width: 80%;
22 | p{
23 | font-size: 14px;
24 | }
25 | span{
26 | display: block;
27 | overflow: hidden; //超出的文本隐藏
28 | text-overflow: ellipsis; //溢出用省略号显示
29 | white-space: nowrap; //溢出不换行
30 | font-size: 12px;
31 | color: #999;
32 | }
33 | }
34 | &_operate{
35 | margin-left: auto;
36 | display: flex;
37 | font-size: 18px;
38 | cursor: pointer;
39 | span{
40 | width: 20px;
41 | height: 20px;
42 | padding: 4px;
43 | border: 1px solid #333;
44 | margin-left: 20px;
45 | border-radius: 50%;
46 | display: flex;
47 | align-items: center;
48 | justify-content: center;
49 | &:hover{
50 | color: blue;
51 | border-color: blue;
52 | }
53 | }
54 | }
55 | }
56 | }
--------------------------------------------------------------------------------
/src/pages/chat/components/RoleNetwork/index.module.less:
--------------------------------------------------------------------------------
1 | .roleNetwork{
2 | display: flex;
3 | flex-direction: column;
4 |
5 | &_item{
6 | padding: 12px;
7 | border-radius: 12px;
8 | border: 1px solid #eee;
9 | margin-bottom: 12px;
10 | width: 100%;
11 | box-sizing: border-box;
12 |
13 | display: flex;
14 | align-items: center;
15 | justify-content: space-between;
16 | flex-wrap: wrap;
17 |
18 | p{
19 | font-size: 16px;
20 | color: #333;
21 | max-width: 450px;
22 | }
23 | &_operate {
24 | margin-left: auto;
25 | display: flex;
26 | font-size: 18px;
27 | cursor: pointer;
28 | span{
29 | width: 20px;
30 | height: 20px;
31 | padding: 4px;
32 | border: 1px solid #333;
33 | margin-left: 20px;
34 | border-radius: 50%;
35 | display: flex;
36 | align-items: center;
37 | justify-content: center;
38 | &:hover{
39 | color: blue;
40 | border-color: blue;
41 | }
42 | }
43 | }
44 | }
45 | }
--------------------------------------------------------------------------------
/src/pages/login/index.module.less:
--------------------------------------------------------------------------------
1 | .login{
2 | height: 100vh;
3 | background-image: url('https://p0.meituan.net/travelcube/6ebe78cb765815fdc628c5620ed0c6ac174555.png');
4 | background-repeat: no-repeat;
5 | background-size: 100%;
6 | box-sizing: border-box;
7 | [class*='ant-pro-form-login-container']{
8 | padding-top: 150px;
9 | box-sizing: border-box;
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/src/pages/login/index.tsx:
--------------------------------------------------------------------------------
1 | import { Form } from 'antd'
2 | import styles from './index.module.less'
3 | import { useNavigate } from 'react-router-dom'
4 | import { LoginCard } from '@/components/LoginModal'
5 |
6 | function LoginPage() {
7 | const [loginForm] = Form.useForm()
8 | const navigate = useNavigate()
9 |
10 | return (
11 | {props?.title}
12 | {props?.children} 13 |
12 | {
15 | loginForm.resetFields()
16 | navigate('/')
17 | }}
18 | />
19 |
20 | )
21 | }
22 |
23 | export default LoginPage
24 |
--------------------------------------------------------------------------------
/src/pages/result/index.module.less:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yancyuu/ChatGPT-Web-Admin/5fed680ecc503f97484762a5601d5f1eb8205aa7/src/pages/result/index.module.less
--------------------------------------------------------------------------------
/src/pages/result/index.tsx:
--------------------------------------------------------------------------------
1 | import { Button, Result } from 'antd'
2 | import { useNavigate } from 'react-router-dom'
3 |
4 | function ResultPage() {
5 | const navigate = useNavigate()
6 | return (
7 |