Commit 5539db75 authored by Ylg's avatar Ylg

feat: working on the prompt page

parents 8f0fc1f4 232e6205
......@@ -5,16 +5,15 @@ const Settings: LayoutSettings & {
logo?: string;
} = {
navTheme: 'light',
// 拂晓蓝
primaryColor: '#009B95',
layout: 'mix',
contentWidth: 'Fluid',
fixedHeader: false,
fixSiderbar: true,
colorWeak: false,
title: 'Ant Design Pro',
pwa: false,
logo: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg',
logo: '/logo.png',
title: '',
iconfontUrl: '',
};
......
/**
* @see https://umijs.org/zh-CN/plugins/plugin-access
* */
export default function access(initialState: { userInfo: { token: '' }; }) {
console.log('initialState', initialState)
const { token } = initialState.userInfo ?? {};
return {
token
};
export default function access(initialState: {
userInfo: { token: ''; roles: []; name: ''; userName: '' };
}) {
console.log('initialState', initialState);
return initialState.userInfo ?? {};
}
.edit_type {
display: flex;
align-items: center;
span {
width: 70px;
margin-right: 10px;
}
}
.edit_prompt {
display: flex;
align-items: flex-start;
span {
width: 70px;
margin-right: 10px;
}
}
\ No newline at end of file
import { Form, Modal, Select } from "antd";
import TextArea from "antd/lib/input/TextArea";
import { useState } from "react";
import { useEffect, useState } from "react";
import styles from './index.less';
import { CloseOutlined } from "@ant-design/icons";
import { IFormValue } from "@/pages/PromptWord";
interface IEditPromptModalProps {
open: boolean;
setOpen: (value: boolean) => void;
types: string[];
modalType: 'create' | 'edit' | '';
handleEditPrompt: (value: IFormValue) => void;
oldRow: IFormValue;
loading?: boolean;
handleCreatePrompt: (value: IFormValue) => void;
}
const EditPromptModal = (props: IEditPromptModalProps) => {
const { open, setOpen, types } = props;
const { open, setOpen, types, modalType, handleEditPrompt, loading, oldRow, handleCreatePrompt } = props;
const [loading, setLoading] = useState(false);
const [currentSelectValue, setCurrentSelectValue] = useState<string | null>("请选择");
const [textAreaValue, setTextAreaValue] = useState('');
useEffect(() => {
if(modalType === 'create') {
setTextAreaValue('');
setCurrentSelectValue('');
} else {
setTextAreaValue(oldRow.content);
setCurrentSelectValue(oldRow.type || '请选择');
}
}, [open])
const handleSavePrompt = () => {
if(modalType === 'create') {
handleCreatePrompt({
type: currentSelectValue,
content: textAreaValue,
});
}
if(modalType === 'edit') {
handleEditPrompt({
type: currentSelectValue,
content: textAreaValue,
})
}
setOpen(false);
};
const layout = {
labelCol: { span: 3 },
};
return (
......@@ -25,31 +59,45 @@ const EditPromptModal = (props: IEditPromptModalProps) => {
centered
confirmLoading={loading}
wrapClassName={styles.modal}
title='编辑提示词语'
title={modalType === 'create' ? '新增提示用语' : '编辑提示用语'}
okText='保存'
onOk={handleSavePrompt}
onCancel={() => {
setCurrentSelectValue('请选择');
setOpen(false);
}}
width={574}
bodyStyle={{
padding: '20px'
}}
>
<Form>
<Form.Item>
<span>类型</span>
<Form
labelAlign="right"
{...layout}
>
<Form.Item
label="类型:"
>
<Select
onChange={(value: string) => {
console.log(value);
}}
value={'市场营销'}
>
onChange={(value: string) => {
setCurrentSelectValue(value);
}}
value={currentSelectValue}
>
{types.map(item => <Select.Option value={item} key={item}>{item}</Select.Option>)}
</Select>
</Form.Item>
<Form.Item>
<span>提示词语</span>
<Form.Item
label="提示词语"
>
<TextArea
autoSize
style={{ height: 200 }}
style={{
height: '200px'
}}
value={textAreaValue}
onChange={(e) => {
setTextAreaValue(e.target.value);
}}
/>
</Form.Item>
</Form>
......
import { GithubOutlined } from '@ant-design/icons';
import { DefaultFooter } from '@ant-design/pro-components';
import { useIntl } from 'umi';
......@@ -6,36 +5,12 @@ const Footer: React.FC = () => {
const intl = useIntl();
const defaultMessage = intl.formatMessage({
id: 'app.copyright.produced',
defaultMessage: '蚂蚁集团体验技术部出品',
defaultMessage: '2023 长沙振升集团有限公司',
});
const currentYear = new Date().getFullYear();
return (
<DefaultFooter
copyright={`${currentYear} ${defaultMessage}`}
links={[
{
key: 'Ant Design Pro',
title: 'Ant Design Pro',
href: 'https://pro.ant.design',
blankTarget: true,
},
{
key: 'github',
title: <GithubOutlined />,
href: 'https://github.com/ant-design/ant-design-pro',
blankTarget: true,
},
{
key: 'Ant Design',
title: 'Ant Design',
href: 'https://ant.design',
blankTarget: true,
},
]}
/>
);
return <DefaultFooter copyright={`${currentYear} ${defaultMessage}`} />;
};
export default Footer;
import Icon from '@ant-design/icons';
const ExclamtionSvg = () => (
<svg
width="24px"
height="24px"
viewBox="0 0 24 24"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
>
<title>exclamation-circle</title>
<g id="页面-1" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd" opacity="0.65">
<g
id="10-3-删除账号"
transform="translate(-542.000000, -405.000000)"
fill="#FF8F00"
fillRule="nonzero"
>
<g id="编辑账号" transform="translate(470.000000, 321.000000)">
<g id="exclamation-circle" transform="translate(72.000000, 84.000000)">
<path
d="M12,0 C5.371875,0 0,5.371875 0,12 C0,18.628125 5.371875,24 12,24 C18.628125,24 24,18.628125 24,12 C24,5.371875 18.628125,0 12,0 Z M11.0625,5.4140625 C11.0625,4.89609375 11.4820312,4.4765625 12,4.4765625 C12.5179688,4.4765625 12.9375,4.89609375 12.9375,5.4140625 L12.9375,14.0625 C12.9375,14.5804688 12.5179688,15 12,15 C11.4820312,15 11.0625,14.5804688 11.0625,14.0625 L11.0625,5.4140625 Z M12,18.609375 C11.4164063,18.609375 10.9453125,18.1382812 10.9453125,17.5546875 C10.9453125,16.9710938 11.4164063,16.5 12,16.5 C12.5835937,16.5 13.0546875,16.9710938 13.0546875,17.5546875 C13.0546875,18.1359375 12.5835937,18.609375 12,18.609375 Z"
id="Shape"
/>
</g>
</g>
</g>
</g>
</svg>
);
export const Exclamtion = (props: any) => {
return <Icon component={ExclamtionSvg} {...props} />;
};
.deleteTitle {
display: flex;
height: 22px;
margin-bottom: 10px;
color: rgba(0, 0, 0, 0.85);
font-weight: 600;
font-size: 16px;
font-family: PingFangSC-Semibold, PingFang SC;
line-height: 22px;
& svg {
width: 24px;
height: 24px;
margin-right: 10px;
}
}
.deleteContent {
width: 322px;
height: 44px;
margin-left: 34px;
color: rgba(0, 0, 0, 0.65);
font-weight: 400;
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
line-height: 22px;
}
\ No newline at end of file
import { Modal } from "antd";
import styles from './index.less';
import { Exclamtion } from "../Icons/Icons";
interface IDeletePromptModalProps {
title: string;
open: boolean;
setOpen: (value: boolean) => void;
tip: string;
content: string;
handleDeletePrompt: () => void;
loading?: boolean;
}
const DeletePromptModal = (props: IDeletePromptModalProps) => {
const {
title,
open,
setOpen,
tip,
content,
loading,
} = props;
const handleDeletePrompt = () => {
handleDeletePrompt();
}
const DeletePromptModal = () => {
return (
<Modal
title={title}
okText='确认'
open={open}
onOk={handleDeletePrompt}
onCancel={() => {
setOpen(false);
}}
confirmLoading={loading}
>
<div className={styles.deleteTitle}>
<Exclamtion /> {tip}
</div>
<div className={styles.deleteContent}>
{content}
</div>
</Modal>
)
}
......
......@@ -2,8 +2,9 @@ import styles from './index.less';
import { Button, Checkbox, Form, Input, Modal } from 'antd';
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import logoSvg from '../../assets/logo.svg';
import { useState } from 'react';
import { useEffect, useRef, useState } from 'react';
import { loginChatGLM } from '@/services/chatGLM/api';
import { useModel } from 'umi';
interface ILoginModalProps {
open: boolean;
setOpen: (value: boolean) => void;
......@@ -11,14 +12,28 @@ interface ILoginModalProps {
const LoginModal = (props: ILoginModalProps) => {
const { open, setOpen } = props;
const [loading, setLoading] = useState(false);
const { initialState, setInitialState } = useModel('@@initialState');
const [form] = Form.useForm();
const submitRef = useRef<HTMLButtonElement>(null);
const reset = () => {
setOpen(false);
form.resetFields();
};
};
useEffect(() => {
if (open) {
const account = localStorage.getItem('account');
localStorage.removeItem('account');
if (account) {
setTimeout(() => {
submitRef.current?.click();
}, 300);
}
}
}, [open]);
const handleSubmit = async (values: any) => {
setLoading(true);
......@@ -28,14 +43,23 @@ const LoginModal = (props: ILoginModalProps) => {
name: username,
password,
});
if (checked) {
localStorage.setItem('account', JSON.stringify({ username, password, checked }));
}
setInitialState({ ...initialState, userInfo: result });
localStorage.setItem('user', JSON.stringify(result));
setLoading(false);
reset();
} catch(error) {
} catch (error) {
setLoading(false);
}
};
function getAccount() {
const account = localStorage.getItem('account');
return JSON.parse(account || JSON.stringify({ username: '', password: '', checked: false }));
}
return (
<Modal
open={open}
......@@ -57,31 +81,28 @@ const LoginModal = (props: ILoginModalProps) => {
</div>
<p className={styles.modal_tip}>账户密码登录</p>
<Form
initialValues={getAccount()}
name="normal_login"
initialValues={{ remember: true }}
onFinish={handleSubmit}
onValuesChange={(value) => {
console.log(value);
}}
className={styles.modal_form}
>
<Form.Item
name="username"
rules={[{ required: true, message: '请输入你的账户!' }]}
>
<Input prefix={<UserOutlined />} placeholder="账户" />
<Form.Item name="username" rules={[{ required: true, message: '请输入你的账户!' }]}>
<Input prefix={<UserOutlined />} placeholder="账户" value={''} />
</Form.Item>
<Form.Item
name="password"
rules={[{ required: true, message: '请输入你的密码!' }]}
>
<Input prefix={<LockOutlined />} type="password" placeholder="密码" />
<Form.Item name="password" rules={[{ required: true, message: '请输入你的密码!' }]}>
<Input prefix={<LockOutlined />} type="password" placeholder="密码" value={''} />
</Form.Item>
<Form.Item name="remember" valuePropName="checked" className={styles.modal_checked}>
<Form.Item name="checked" valuePropName="checked" className={styles.modal_checked}>
<Checkbox>自动登录</Checkbox>
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit" className={styles.modal_button} loading={loading}>
<Button
ref={submitRef}
type="primary"
htmlType="submit"
className={styles.modal_button}
loading={loading}
>
登录
</Button>
</Form.Item>
......
import logoSvg from '../../assets/logo.svg';
import copySvg from '../../assets/copy.svg';
import { Button, Grid } from 'antd';
import { Button, Col, Grid, Row } from 'antd';
import styles from './index.less';
import classNames from 'classnames';
interface IAnswerProps {
answerValue: string;
......@@ -17,60 +18,50 @@ const Answer = (props: IAnswerProps) => {
const isMobile = screens.xs;
return (
<div>
<p className={styles.question} style={{ marginTop: isMobile ? '20px' : '40px' }}>
<img src={logoSvg} alt="" className={styles.question_img } />
<span
className={styles.question_span}
style={{
marginLeft: isMobile ? '8px' : '16px',
fontSize: isMobile ? '18px': '20px',
}}>
回答如下:
</span>
</p>
<div className={styles.chat}>
<div
className={styles.answer}
style={{
width: isMobile ? '316px' : '900px',
fontSize: isMobile ? '16px': '18px',
lineHeight: isMobile ? '28px': '32px',
}}
>
{
!isMobile &&
<p
className={styles.copyAnswer}
onClick={() => {
}}
>
<Col span={24}>
<Row>
<Col span={24}>
<p className={styles.question} style={{ marginTop: isMobile ? '20px' : '40px' }}>
<img src={logoSvg} alt="" className={styles.question_img} />
<span
className={classNames(isMobile && styles.mobile_question_span, styles.question_span)}
style={{ marginLeft: isMobile ? '8px' : '16px' }}
>
回答如下:
</span>
</p>
</Col>
<Col span={24} className={styles.chat}>
<div className={classNames(styles.answer, isMobile && styles.mobile_answer)}>
<div className={styles.answer}>
{!answerValue ? (
<p style={{ color: '#666666' }}>请耐心等待3-5秒~</p>
) : (
<p dangerouslySetInnerHTML={{ __html: answerValue }}></p>
)}
</div>
{!isMobile && answerValue && (
<p className={styles.copyAnswer} onClick={() => {}}>
<img src={copySvg} alt="" />
<span>复制回答</span>
</p>
}
{!answerValue ? (
<p className={styles.answerValue}>请耐心等待3-5秒~</p>
) : (
<p className={styles.answerValue} dangerouslySetInnerHTML={{ __html: answerValue }}></p>
)}
</div>
{isShowRetry && !isMobile && <Button className={styles.chat_retry}>重试</Button>}
</Col>
<Col>
{isMobile && answerValue && (
<Row justify={'center'} className={styles.mobile_button}>
<Button className={styles.mobile_copyAnswer}>
<img src={copySvg} alt="" />
<span>复制回答</span>
</Button>
<Button className={styles.mobile_chat_retry}>重试</Button>
</Row>
)}
</div>
{
isShowRetry && !isMobile && <Button className={styles.chat_retry}>重试</Button>
}
</div>
{
isMobile &&
<div className={styles.mobile_button}>
<Button className={styles.mobile_copyAnswer}>
<img src={copySvg} alt="" />
<span>复制回答</span>
</Button>
<Button className={styles.mobile_chat_retry}>重试</Button>
</div>
}
</div>
</Col>
</Row>
</Col>
);
};
......
@import (reference) '~antd/es/style/themes/index';
.mobile_newSession {
width: 100% !important;
margin-top: 24px !important;
padding: 48px 16px 16px;
}
.mobile_question_span {
font-size: 18px !important;
}
.mobile_answer {
// width: 316px !important;
font-size: 16px !important;
line-height: 28px !important;
}
.newSession {
width: 1000px;
margin-top: 40px;
margin-top: 0px;
.question {
display: flex;
align-items: flex-start;
......@@ -20,25 +35,28 @@
.chat {
display: flex;
width: 100vw;
padding-left: 28px;
// justify-content: center;
.answer {
position: relative;
width: 900px;
min-height: 268px;
margin-left: 28px;
width: 100%;
padding: 4px 8px;
color: rgba(0, 0, 0, 0.85);
font-size: 18px;
font-size: 16px;
line-height: 32px;
white-space: pre-wrap;
word-wrap: break-word;
background: #f0f3f6;
border-radius: 4px;
.copyAnswer {
position: absolute;
right: 16px;
bottom: 0;
z-index: 2;
padding-right: 16px;
text-align: right;
cursor: pointer;
img {
width: 24px;
height: 24px;
padding-left: 2px;
}
span {
height: 24px;
......@@ -55,7 +73,7 @@
.chat_retry {
width: 90px;
height: 48px;
margin-left: 10px;
// margin-left: 10px;
background: #ffffff;
border: 1px solid #009b95;
border-radius: 6px;
......@@ -74,7 +92,7 @@
display: flex;
justify-content: space-around;
margin-top: 16px;
margin-left: 24px;
margin-left: 28px;
.mobile_copyAnswer {
width: 151px;
height: 40px;
......@@ -94,6 +112,7 @@
.mobile_chat_retry {
width: 151px;
height: 40px;
margin-left: 12px;
color: #009b95;
background: #ffffff;
border: 1px solid #009b95;
......
import styles from './index.less';
import Issue from './issue.component';
import Answer from './answer.component';
import { Grid } from 'antd';
import { Grid, Row } from 'antd';
import classNames from 'classnames';
interface INewSessionProps {
questionValue: string;
......@@ -17,13 +18,16 @@ const NewSession = (props: INewSessionProps) => {
const isMobile = screens.xs;
return (
<div className={styles.newSession} style={{
padding: isMobile ? '4px 16px 16px' : '0',
width: isMobile ? '100%' : '1000px'
}}>
<Row
style={{
padding: isMobile ? '' : '0 0 0 72px !important',
width: isMobile ? '100vw' : 'calc(100vw - 240px - 144px)',
}}
className={classNames(isMobile && styles.mobile_newSession, styles.newSession)}
>
<Issue questionValue={questionValue} />
<Answer answerValue={answerValue} />
</div>
</Row>
);
};
......
import classNames from 'classnames';
import userSvg from '../../assets/user.svg';
import styles from './index.less';
import { Grid } from 'antd';
import { Col, Grid } from 'antd';
interface IIssueProps {
questionValue: string;
......@@ -10,7 +10,6 @@ interface IIssueProps {
const { useBreakpoint } = Grid;
const Issue = (props: IIssueProps) => {
const { questionValue } = props;
const screens = useBreakpoint();
......@@ -19,19 +18,16 @@ const Issue = (props: IIssueProps) => {
console.log('isMobile', isMobile);
return (
<div className={styles.question} style={{ marginTop: isMobile ? '20px' : '40px' }}>
<img src={userSvg} alt="" className={styles.question_img } />
<span
className={styles.question_span}
style={{
marginLeft: isMobile ? '8px' : '16px',
fontSize: isMobile ? '18px': '20px',
}}
<Col span={24} className={styles.question} style={{ marginTop: isMobile ? '0px' : '40px' }}>
<img src={userSvg} alt="" className={styles.question_img} />
<span
className={classNames(isMobile && styles.mobile_question_span, styles.question_span)}
style={{ marginLeft: isMobile ? '8px' : '16px' }}
>
{questionValue}
</span>
</div>
</Col>
);
}
};
export default Issue;
\ No newline at end of file
export default Issue;
......@@ -6,12 +6,36 @@
@colorMainDefault: #999999;
@colorMainSubDefault: #666666;
.ant-btn-primary {
color: #fff;
background-color: #009b95;
border-color: #009b95;
border-radius: 2px;
}
:global {
.ant-input:focus,
.ant-input:hover,
.ant-input-focused {
border-color: #009b95;
}
.ant-input:focus,
.ant-input-focused {
box-shadow: 0 0 0 2px #009b95;
}
}
html,
body,
#root {
height: 100%;
}
body {
margin: 0;
padding: 0;
}
.colorWeak {
filter: invert(80%);
}
......
......@@ -11,7 +11,7 @@ export default {
'layout.user.link.help': '帮助',
'layout.user.link.privacy': '隐私',
'layout.user.link.terms': '条款',
'app.copyright.produced': '蚂蚁集团体验技术部出品',
'app.copyright.produced': '长沙振升集团有限公司',
'app.preview.down.block': '下载此页面到本地项目',
'app.welcome.link.fetch-blocks': '获取全部区块',
'app.welcome.link.block-list': '基于 block 开发,快速构建标准页面',
......
......@@ -2,8 +2,5 @@
padding: 8px;
}
.CardContent {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-bottom: 150px;
}
import { Row, Col, Grid } from 'antd';
import type { FC } from 'react';
import styles from './content.less';
import ProductionCard from './productionCard';
const { useBreakpoint } = Grid;
interface ChatFirstContentProps {
onChange?: (text: string) => void;
}
const ChatFirstContent: FC<ChatFirstContentProps> = (props) => {
const { onChange } = props;
const screen = useBreakpoint();
const isMobile = screen.xs;
const cardList = [
{
title: '市场营销',
content:
'请为我编写一个杨过大战钢铁侠的额电影脚本,要足够精彩,细节丰富,好像好莱坞大片,有场景有对话,叨叨剧本要求',
onclick: (text: string) => {
onChange && onChange(text);
},
},
{
title: '技术文档',
content: '请为我们的新款智能手表撰写一份产品说明书,包括功能,使用方法和注意事项',
onclick: (text: string) => {
onChange && onChange(text);
},
},
{
title: '灵感提示',
content: '请为我们的新款智能手表一份产品说明书,包括功能,使用方法和注意事项',
onclick: (text: string) => {
onChange && onChange(text);
},
},
{
content: '请为我们的新款智能手表一份产品说明书,包括功能,使用方法和注意事项',
onclick: (text: string) => {
onChange && onChange(text);
},
},
{
content: '请为我们的新款智能手表一份产品说明书,包括功能,使用方法和注意事项',
onclick: (text: string) => {
onChange && onChange(text);
},
},
{
content: '请为我们的新款智能手表一份产品说明书,包括功能,使用方法和注意事项',
onclick: (text: string) => {
onChange && onChange(text);
},
},
{
content: '请为我们的新款智能手表一份产品说明书,包括功能,使用方法和注意事项',
onclick: (text: string) => {
onChange && onChange(text);
},
},
{
content: '请为我们的新款智能手表一份产品说明书,包括功能,使用方法和注意事项',
onclick: (text: string) => {
onChange && onChange(text);
},
},
{
content: '请为我们的新款智能手表一份产品说明书,包括功能,使用方法和注意事项',
onclick: (text: string) => {
onChange && onChange(text);
},
},
];
return (
<div className={styles.CardContent}>
<Row gutter={1}>
{cardList.map((item, index) => {
return (
<Col lg={8} md={12} span={8} xs={24} sm={16} key={`${item.title}-card-${index}`}>
<Row justify={isMobile && 'center'} className={styles.cardPadding}>
<ProductionCard title={item.title} content={item.content} onChange={item.onclick} />
</Row>
</Col>
);
})}
</Row>
</div>
);
};
export default ChatFirstContent;
import { Row, Col, Grid } from 'antd';
import type { FC } from 'react';
import styles from './content.less';
import ProductionCard from './productionCard';
import { IPromptWord } from '@/services/chatGLM/api';
const { useBreakpoint } = Grid;
interface ChatFirstContentProps {
list: IPromptWord[];
onChange?: (text: string) => void;
}
const ChatFirstContent: FC<ChatFirstContentProps> = (props) => {
const { onChange, list } = props;
return (
<div className={styles.CardContent}>
<Row>
{list.map((item, index) => {
return (
<Col
lg={12}
md={12}
span={8}
xs={24}
sm={12}
xl={8}
xxl={8}
key={`${item.title}-card-${index}`}
>
<Row justify={'start'} style={{ marginBottom: 16, minWidth: 306 }}>
<ProductionCard
index={index}
title={item.title}
content={item.content}
onChange={() => {
onChange && onChange(item.content);
}}
/>
</Row>
</Col>
);
})}
</Row>
</div>
);
};
export default ChatFirstContent;
.CardWrapper {
width: 306px;
cursor: pointer;
&:hover .CardContent {
background-color: #0a7a73;
&:hover .content {
color: white;
}
&:hover .button {
color: #0a7a73;
background-color: white;
border: solid 1px white;
}
}
.title {
padding: 5px;
color: #333333;
font-weight: 600;
font-size: 22px;
line-height: 26px;
text-align: center;
}
.CardContent {
padding: 16px 24px;
background-color: #f8f9fb;
border-radius: 5px;
transition: all 0.25s;
.content {
height: 204px;
padding: 12px 8px;
color: #666666;
font-weight: 400;
font-size: 14px;
line-height: 28px;
}
.button {
width: 180px;
margin: 0 auto;
padding: 6px 24px;
color: #0a7a73;
font-size: 16px;
text-align: center;
border: solid 1px #0a7a73;
border-radius: 5px;
}
}
}
.CardWrapper {
width: 100%;
padding: 0 16px;
cursor: pointer;
&:hover .CardContent {
background-color: #0a7a73;
&:hover .content {
color: white;
}
&:hover .button {
color: #0a7a73;
background-color: white;
border: solid 1px white;
}
}
.title {
padding-bottom: 10px;
color: #333333;
font-weight: 600;
font-size: 20px;
text-align: center;
}
.CardContent {
padding: 16px 16px;
background-color: #f8f9fb;
border-radius: 5px;
transition: all 0.25s;
.content {
display: -webkit-box;
height: 202px;
overflow: hidden;
color: #666666;
font-weight: 400;
font-size: 18px;
line-height: 28px;
white-space: normal;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 7;
}
.button {
width: 180px;
margin: 0 auto;
padding: 6px 24px;
color: #0a7a73;
font-weight: 500;
font-size: 16px;
text-align: center;
border: solid 1px #0a7a73;
border-radius: 5px;
}
}
}
import type { ReactNode } from 'react';
import styles from './productionCard.less';
import classnames from 'classnames';
interface ProductionCardProps {
title?: string;
content: ReactNode;
onChange: (content: string) => void;
}
const ProductionCard = (props: ProductionCardProps) => {
const { title, content, onChange } = props;
const handleClick = () => {
onChange && onChange(content);
};
return (
<div className={classnames(styles.CardWrapper)}>
<div className={styles.title}>{title}</div>
<div className={styles.CardContent}>
<div className={styles.content}>{content}</div>
<div className={styles.button} onClick={handleClick}>
试一下看看
</div>
</div>
</div>
);
};
export default ProductionCard;
import type { ReactNode } from 'react';
import styles from './productionCard.less';
import classnames from 'classnames';
interface ProductionCardProps {
index: number;
title?: string;
content: ReactNode;
onChange: (content: string) => void;
}
const ProductionCard = (props: ProductionCardProps) => {
const { index, title, content, onChange } = props;
const handleClick = () => {
onChange && onChange(content);
};
return (
<div className={classnames(styles.CardWrapper)}>
<div className={styles.title}>{title}</div>
<div className={styles.CardContent}>
<div className={styles.content}>{content}</div>
<div className={styles.button} onClick={handleClick}>
试一下看看
</div>
</div>
</div>
);
};
export default ProductionCard;
......@@ -3,35 +3,33 @@
.chatContent {
background: white !important;
}
.siderWrapper {
background: white;
.sider {
position: fixed;
top: 0;
left: 0;
z-index: 100;
width: 240px;
min-height: 100vh;
padding: 30px 20px;
background-color: #001529;
.siderChatContent {
height: 70%;
min-height: 400px;
:global(.ant-btn-primary) {
background: #009b95;
border: solid 1px #009b95;
border-radius: 2px;
}
}
}
}
.header {
margin-top: 68px;
margin-top: 80px;
margin-bottom: 40px;
color: #333;
font-size: 32px;
line-height: 45px;
text-align: center;
.subTitle {
margin-bottom: 0;
color: #999999;
font-weight: 400;
}
......@@ -68,11 +66,28 @@
}
}
.chatFooter {
position: fixed;
bottom: 0;
left: 0;
width: 240px;
width: 100%;
margin-bottom: 52px;
}
.chatFooterItem {
margin-left: 64px;
padding: 19px 0px;
color: #ffffff;
font-size: 18px;
line-height: 25px;
}
.footer {
position: fixed;
bottom: 0;
left: 0;
z-index: 10;
z-index: 12;
width: 100%;
height: 150px;
padding: 16px;
......@@ -80,7 +95,7 @@
background-color: white;
box-shadow: 0 2px 8px #f0f1f2;
.chatWrapper {
padding: 0 16px 0 50px;
border-radius: 4px;
:global {
.ant-input:focus,
.ant-input:hover,
......@@ -94,10 +109,10 @@
}
}
.outputButtonWrapper {
width: 120px;
:global(.ant-btn-primary) {
background: #009b95;
border: solid 1px #009b95;
border-radius: 6px !important;
}
}
}
......
This diff is collapsed.
......@@ -2,56 +2,49 @@ import { DeleteOutlined, EditOutlined, PlusOutlined } from '@ant-design/icons';
import type { ActionType } from '@ant-design/pro-components';
import { PageContainer } from '@ant-design/pro-components';
import { ProTable } from '@ant-design/pro-components';
import { Button, Col, Divider, Form, Input, Modal, Radio, Row, Switch, message } from 'antd';
import { Button, Col, Divider, Form, Input, Modal, Radio, Row, Select, Switch, message } from 'antd';
import { isEmpty } from 'lodash';
import { useEffect, useRef, useState } from 'react';
import { SetStateAction, useEffect, useRef, useState } from 'react';
import styles from './index.less';
import EditPromptModal from '@/components/editPromptModal';
import { pagePromptWords, createPromptWords, updatePromptWords, deletePromptWords } from '@/services/chatGLM/api';
import EditPromptModal from '@/components/EditAndAddPromptModal';
import DeletePromptModal from '@/components/DeletePromptModal';
import { pagePromptWords, createPromptWords, updatePromptWords, deletePromptWords, typePromptWords } from '@/services/chatGLM/api';
const { Item } = Form;
interface DataType {
key: string;
sequenceNumber: number;
promptWord: string;
interface IPromptList {
id: string;
title?: string;
content: string;
type: string;
creationTime: string;
sequenceNumber: number;
}
const data: DataType[] = [
{
key: '1',
sequenceNumber: 0,
type: '会议记录',
promptWord: '请根据以下简要说明,为我撰写一份关于新员',
creationTime: '2023-03-21 09:12:00'
},
{
key: '2',
sequenceNumber: 1,
type: '会议记录',
promptWord: '请根据以下简要说明,为我撰写一份关于新员',
creationTime: '2023-03-21 09:12:00'
},
{
key: '3',
sequenceNumber: 2,
type: '会议记录',
promptWord: '请根据以下简要说明,为我撰写一份关于新员',
creationTime: '2023-03-21 09:12:00'
},
];
export interface IFormValue {
type: string | null;
content: string;
}
const PromptWord = () => {
const actionRef = useRef<ActionType>();
interface ILoading {
editModalLoading: boolean;
createModalLoading: boolean;
deleteModalLoading: boolean;
listLoading: boolean;
}
const [loading, setLoading] = useState(false);
const [editModalOpen, setEditModalOpen] = useState(false);
const PromptWord = () => {
const [allLoading, setAllLoading] = useState<ILoading>({
editModalLoading: false,
createModalLoading: false,
deleteModalLoading: false,
listLoading: false
});
const [editAndAddModalOpen, setEditAndDeleteModalOpen] = useState(false);
const [deleteModalOpen, setDeleteModalOpen] = useState(false);
const [promptList, setPromptList] = useState([]);
const [promptList, setPromptList] = useState<IPromptList[]>([]);
const [form] = Form.useForm();
const [modalType, setModalType] = useState<'create' | 'edit' | ''>('');
const [types, setTypes] = useState<string[]>([]);
const [currentRow, setCurrentRaw] = useState({} as IPromptList);
const columns: any[] = [
{
......@@ -66,22 +59,31 @@ const PromptWord = () => {
width: '15%',
key: 'type',
dataIndex: 'type',
search: false,
valueType: 'select',
order: 1,
fieldProps: {
options: types.map((type) => {
return {
label: type,
value: type
}
})
}
},
{
title: '提示词语',
width: '50%',
width: '45%',
key: 'promptWord',
dataIndex: 'promptWord',
dataIndex: 'content',
ellipsis: true,
search: false,
search: true,
order: 2
},
{
title: '创建时间',
width: '10%',
width: '15%',
key: 'creationTime',
dataIndex: 'creationTime',
valueType: 'date',
search: false,
},
{
......@@ -89,17 +91,27 @@ const PromptWord = () => {
valueType: 'option',
width: '15%',
key: 'option',
render: (_: unknown, record: any) => (
render: (_: unknown, record: IPromptList) => (
<div className={styles.table_action}>
<div
className={styles.table_action_edit}
onClick={() => setEditModalOpen(true)}
onClick={() => {
setCurrentRaw(record);
setEditAndDeleteModalOpen(true);
setModalType('edit');
}}
>
<EditOutlined />
<span>编辑</span>
</div>
<span style={{ margin: '0 9px' }}>|</span>
<div className={styles.table_action_delete}>
<div
className={styles.table_action_delete}
onClick={() => {
setDeleteModalOpen(true);
setCurrentRaw(record);
}}
>
<DeleteOutlined />
<span>删除</span>
</div>
......@@ -109,39 +121,160 @@ const PromptWord = () => {
];
const fetchPromptList = async () => {
const data = await createPromptWords({
setAllLoading({
...allLoading,
listLoading: true,
})
try {
const response = await pagePromptWords({
filter: '',
type: '',
pageIndex: 0,
pageSize: 10
})
setAllLoading({
...allLoading,
listLoading: false,
})
const dataSource: IPromptList[] = response.items.map((item: IPromptList) => {
return {
...item,
}
})
setPromptList(dataSource);
} catch(error) {
setAllLoading({
...allLoading,
listLoading: false,
})
message.error('请求列表失败,请重试!')
}
};
const fetchTypes = async () => {
const data = await typePromptWords();
setTypes(data);
};
useEffect(() => {
fetchPromptList();
fetchTypes();
}, []);
const layout = {
labelCol: { span: 4 },
wrapperCol: { span: 18 },
const handleEditPrompt = async (editValue: IFormValue) => {
setAllLoading({
...allLoading,
editModalLoading: true,
})
try {
await updatePromptWords({
id: currentRow.id,
content: editValue.content,
type: editValue.type
});
setAllLoading({
...allLoading,
editModalLoading: false,
})
fetchPromptList();
} catch(error) {
setAllLoading({
...allLoading,
editModalLoading: false,
})
message.error('编辑提示用语失败,请重试!')
}
};
const handleCreatePrompt = async (createValue: IFormValue) => {
setAllLoading({
...allLoading,
createModalLoading: true,
})
try {
await createPromptWords({
content: createValue.content,
type: createValue.type
})
setAllLoading({
...allLoading,
createModalLoading: false,
})
fetchPromptList();
} catch(error) {
setAllLoading({
...allLoading,
createModalLoading: false,
})
message.error('新增提示用语失败,请重试!')
}
};
const showModal = () => {
const handleDeletePrompt = async () => {
setAllLoading({
...allLoading,
deleteModalLoading: true,
})
try {
await deletePromptWords({
id: currentRow.id
});
setAllLoading({
...allLoading,
deleteModalLoading: false,
})
fetchPromptList();
} catch(error) {
setAllLoading({
...allLoading,
deleteModalLoading: false,
})
message.error('删除提示用语失败,请重试!')
}
};
return (
<PageContainer>
<DeletePromptModal
open={deleteModalOpen}
setOpen={setDeleteModalOpen}
title='删除提示用语'
tip='确定要删除这段提示词语吗?'
content='一旦删除后,用户无法看到这一条提示词,建议谨慎操作。'
handleDeletePrompt={handleDeletePrompt}
loading={allLoading.deleteModalLoading}
/>
<EditPromptModal
open={editModalOpen}
setOpen={setEditModalOpen}
types={['会议记录', '技术文档']}
open={editAndAddModalOpen}
setOpen={setEditAndDeleteModalOpen}
types={types}
modalType={modalType}
handleEditPrompt={handleEditPrompt}
oldRow={currentRow}
handleCreatePrompt={handleCreatePrompt}
loading={modalType === 'create' ? allLoading.createModalLoading : allLoading.editModalLoading}
/>
<ProTable
dataSource={data}
dataSource={promptList}
columns={columns}
actionRef={actionRef}
cardBordered
rowKey="id"
pagination={{
pageSize: 5,
onChange: (page) => {},
onChange: (page) => {
},
}}
search={{
labelWidth: 'auto',
className: styles.search,
optionRender: () => {
return [
<Button type='default' key='2'>重置</Button>,
<Button type='primary' key='3'>查询</Button>
]
}
}}
options={false}
dateFormatter="string"
......@@ -151,13 +284,15 @@ const PromptWord = () => {
key="button"
icon={<PlusOutlined />}
onClick={() => {
setEditAndDeleteModalOpen(true);
setModalType('create');
}}
type="primary"
>
添加提示语
</Button>,
]}
loading={allLoading.listLoading}
/>
</PageContainer>
);
......
.isActive {
display: inline-flex;
align-items: center;
justify-content: center;
}
.dot {
display: inline-block;
width: 6px;
height: 6px;
margin-right: 5px;
border-radius: 50%;
}
.green {
background-color: #52c41a;
}
.red {
background-color: #f5222d;
}
.deleteTitle {
display: flex;
height: 22px;
margin-bottom: 10px;
color: rgba(0, 0, 0, 0.85);
font-weight: 600;
font-size: 16px;
font-family: PingFangSC-Semibold, PingFang SC;
line-height: 22px;
& svg {
width: 24px;
height: 24px;
margin-right: 10px;
}
}
.deleteContent {
width: 322px;
height: 44px;
margin-left: 34px;
color: rgba(0, 0, 0, 0.65);
font-weight: 400;
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
line-height: 22px;
}
.footer {
height: 20px;
color: rgba(0, 0, 0, 0.45);
font-weight: 400;
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
line-height: 20px;
text-align: center;
}
This diff is collapsed.
......@@ -10,10 +10,10 @@ const request = extend({});
request.interceptors.request.use((url, options) => {
const token = JSON.parse(localStorage.getItem('user') || '{}')?.token;
const authHeader = {
const authHeader = {
Authorization: `Bearer ${token || ''}`,
'Content-Type': 'application/json',
'__tenant': '3a0a90fe-9a0d-70f4-200d-a80a41fb6195'
__tenant: '3a0a90fe-9a0d-70f4-200d-a80a41fb6195',
};
return {
url: url,
......@@ -21,19 +21,18 @@ request.interceptors.request.use((url, options) => {
};
});
request.interceptors.response.use(async (response): Promise<any> => {
console.log('response', response);
if(response.status === 401) {
if (response.status === 401) {
localStorage.removeItem('user');
history.push('/chat');
} else if(response.status === 200) {
} else if (response.status === 200) {
return response;
} else {
message.error('请求失败,请重试! ')
message.error('请求失败,请重试! ');
return Promise.reject(response.statusText);
}
})
});
export function loginChatGLM(options: ILoginParams) {
return request('https://glm-mangement-api.baibaomen.com/api/app/account/login', {
......@@ -42,57 +41,108 @@ export function loginChatGLM(options: ILoginParams) {
});
}
export interface IPromptWord {
title: string;
content: string;
}
export function GetChatGLMToken(): Promise<string> {
return request('https://glm-mangement-api.baibaomen.com/user/token', {
method: 'POST',
});
}
export function GetPromptList(): Promise<{ items: IPromptWord[] }> {
return request('https://glm-mangement-api.baibaomen.com/promptwords/page', {
method: 'POST',
headers: {
Authorization: 'Bearer ' + JSON.parse(localStorage.getItem('user') || '')?.token,
'Content-Type': 'application/json',
},
body: JSON.stringify({ pageIndex: 0, pageSize: 10 }),
});
}
type History = [string, string];
interface ITalkParams {
prompt: string;
history: History[];
max_length?: number;
top_p?: number;
temperature?: number;
}
export const CreatedAccount = (params: any): Promise<string> => {
return request('https://glm-mangement-api.baibaomen.com/User/create', {
method: 'POST',
params
body: JSON.stringify(params),
});
}
};
export const getRole = (params?: any): Promise<string> => {
return request('https://glm-mangement-api.baibaomen.com/User/roles', {
method: 'POST',
params
})
}
body: JSON.stringify(params),
});
};
export const getUserMessage = (params?: any): Promise<string> => {
return request('https://glm-mangement-api.baibaomen.com/User/page', {
method: 'POST',
data: params
body: JSON.stringify(params),
});
}
};
export const createPromptWords = (params: any): Promise<string> => {
export const createPromptWords = (params: any): Promise<any> => {
return request('https://glm-mangement-api.baibaomen.com/PromptWords/create', {
method: 'POST',
data: params
})
}
export const updatePromptWords = (params: any): Promise<string> => {
export const updatePromptWords = (params: any): Promise<any> => {
return request('https://glm-mangement-api.baibaomen.com/PromptWords/update', {
method: 'POST',
data: params
})
}
export const deletePromptWords = (params: any): Promise<string> => {
export const deletePromptWords = (params: any): Promise<any> => {
return request('https://glm-mangement-api.baibaomen.com/PromptWords/delete', {
method: 'POST',
data: params
})
}
export const pagePromptWords = (params: any): Promise<string> => {
export const pagePromptWords = (params: any): Promise<any> => {
return request('https://glm-mangement-api.baibaomen.com/PromptWords/page', {
method: 'POST',
data: params
})
}
export const typePromptWords = (): Promise<any> => {
return request('https://glm-mangement-api.baibaomen.com/PromptWords/type', {
method: 'POST',
})
}
export const postDeleteUser = (params?: any): Promise<string> => {
return request('https://glm-mangement-api.baibaomen.com/User/delete', {
method: 'POST',
data: params,
});
};
export const postResetUser = (params?: any): Promise<string> => {
return request('https://glm-mangement-api.baibaomen.com/User/reset', {
method: 'POST',
body: JSON.stringify(params),
});
};
export const postEditUser = (params?: any): Promise<string> => {
return request('https://glm-mangement-api.baibaomen.com/User/update', {
method: 'POST',
body: JSON.stringify(params),
});
};
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment