Tenlion/system-copyright-react
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ai弹窗添加样式选择

Browse Source
This commit is contained in:
xixi 2024-07-22 17:22:35 +08:00
parent 4f673d2a8f
commit 74d6a0543e
7 changed files with 304 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

240
src/components/ai/AiHelper.tsx
View File

@ -1,11 +1,12 @@
import './ai-helper.css'
import { useContext, useEffect, useRef, useState } from "react";
import { GlobalContext } from "../../context/GlobalContext.ts";
import { del, get, post, put, websocketUrl } from "../../util/AjaxUtils.ts";
import { del, get, post, put, websocketUrl, Axios } from "../../util/AjaxUtils.ts";
import {
// Col, Divider, Row,
Spin
Spin, Image, Pagination
} from "antd";
import { AxiosResponse } from "axios";
import useMessage from "antd/es/message/useMessage";
import AiHelperText from "./text/AiHelperText.tsx";
import AiHelperMod from "./mod/AiHelperMod.tsx";
@ -32,8 +33,46 @@ type ProjModType = {
}
export default function AiHelper(props: PropsType) {
// const pathParams = useParams();
// 页面样式相关
const [pageImgArray, setpageImgArray] = useState<any[]>([])
const [pageTotal, setPageTotal] = useState(0)
const [codeTypePageId, setcodeTypePageId] = useState('')
// 获取页面样式数据
const getData = () => {
get({
messageApi,
url: `/api/proj/get/edit-step1/${props.projId}`,
onSuccess({ data }: AxiosResponse) {
// console.log('嘻嘻', data);
setcodeTypePageId(data.codeTypePage.codeTypePageId)
}
})
}
// const [selectedImg,setSelectedImg] = useState('')
// 获取页面样式图片等信息
const getPageImgData = (page: number) => {
get({
messageApi,
url: `/api/code/type/page/listpage`,
config: {
params: {
page: page,
rows: 10
}
},
onSuccess(data: any) {
console.log(data);
setPageTotal(data.data.total)
setpageImgArray(data.data.rows)
}
})
}
const height = window.innerHeight - 265;
// const pathParams = useParams();
// const [openModal ,setOpenModal] = useState(false) //是提示替换弹框
// const height = window.innerHeight - 280;
const globalContext = useContext(GlobalContext);
@ -71,6 +110,50 @@ export default function AiHelper(props: PropsType) {
// }
// 选择页面id和img(初始化用)
// const [modalId, setModalId] = useState('')
// const [modalImg, setModalImg] = useState('')
// 登录页面
const [total, setTotal] = useState(0)
const [loginpageId, setloginpageId] = useState('');
// 获取登录页面信息
const getLoginPageInfo = () => {
get<any>({
messageApi,
url: `/api/proj/get/config-loginpage/${props.projId}`,
onSuccess({ data }) {
// console.log('北京信息',data);
setloginpageId(data.loginpageId)
}
})
}
// 登陆页面数组
const [loginpageArray, setloginpageArray] = useState<any[]>([])
// 获取登录页面数组
const getlistLoginpage = (page: number) => {
get<any>({
messageApi,
url: '/api/loginpage/listpage',
config: {
params: {
page: page,
rows: 10
}
},
onSuccess({ data }) {
console.log('登录页图片列表', data);
setloginpageArray(data.rows)
setTotal(data.total)
}
})
}
const ping = () => {
clearTimeout(pingTimeout.current);
pingTimeout.current = setTimeout(() => {
@ -102,7 +185,7 @@ export default function AiHelper(props: PropsType) {
// if (!projIntroduction) {
// setProjIntroduction(data.content)
// updateProjIntroduction(data.content);
// }
} else if (data.type == 'REFRESH_PROJ_DESC') {
setIsProjDescLoading(false);
@ -110,7 +193,7 @@ export default function AiHelper(props: PropsType) {
// if (!projDesc) {
// setProjDesc(data.content)
// updateProjDesc(data.content)
// }
} else if (data.type == 'REFRESH_PROJ_MODS') {
setIsProjModArrayLoading(false);
@ -192,8 +275,8 @@ export default function AiHelper(props: PropsType) {
messageApi.success('保存成功,点击编辑按钮可继续修改项目简介');
setProjIntroduction(content);
setNewProjIntroduction('');
console.log('更新成功',data);
console.log('更新成功', data);
},
onFinally() {
setIsProjIntroductionLoading(false)
@ -234,11 +317,14 @@ export default function AiHelper(props: PropsType) {
listMods();
websocket();
}, [globalContext.user.userId, props.projId]);
useEffect(()=>{
},[])
useEffect(() => {
// getLoginPageInfo()
getlistLoginpage(1)
// getData()
getPageImgData(1)
}, [])
return (
<div className='aiTab'>
{messageApiHolder}
@ -384,6 +470,23 @@ export default function AiHelper(props: PropsType) {
>
功能列表
</div>
<div className={activeTab == '登录' ? 'tabActive' : "aiTabBtn"}
onClick={() => {
setActiveTab('登录')
getLoginPageInfo()
}}
>
登录页面
</div>
<div className={activeTab == '页面' ? 'tabActive' : "aiTabBtn"}
onClick={() => {
setActiveTab('页面')
getData()
}}
>
页面样式
</div>
</div>
<div className='aiTabContent'>
@ -509,7 +612,119 @@ export default function AiHelper(props: PropsType) {
</Spin>
</div>
</div>
<div style={{ display: activeTab == '登录' ? 'block' : 'none' }}>
<div style={{ height: `${height - 80}px`, overflow: 'auto', display: 'flex', justifyContent: 'flex-start', flexWrap: 'wrap', marginTop: 10 }}>
{
loginpageArray.map((item) => {
const imgSrc = `${Axios.defaults?.baseURL}/route/file/v2/download/true/${item.previewImgs}`;
return (
<div key={item.loginpageId} className={item.loginpageId == loginpageId ? 'page-img-select page-img-selected' : 'page-img-select'}
style={{ marginRight: '10px', marginBottom: '10px', width: 545, }}
onClick={() => {
setloginpageId(item.loginpageId)
put({
messageApi,
url: `/api/proj/update-loginpage-id/proj-id/${props.projId}/loginpage-id/${item.loginpageId}`,
onSuccess() {
messageApi.open({
type: 'success',
content: '已更改'
})
getLoginPageInfo()
// props.closeModal()
// props.closeModal()
},
})
}}
>
<div className="page-img" >
<Image
src={imgSrc}
preview={false} width={545} height={300} />
</div>
<div className="page-title">
<div className="checkbox"></div>
{/* <div className="text">{props.title ? props.title : '标题'}</div> */}
</div>
</div>
)
})
}
</div>
<div className='pagination'>
{/* defaultCurrent: 默认当前页数 total:数据总数 defaultPageSize:'页面显示几条' */}
<Pagination defaultCurrent={1} total={total} defaultPageSize={10} onChange={(page) => {
console.log(page);
// setPage(page)
setloginpageArray([])
getlistLoginpage(page)
}} />
</div>
</div>
<div style={{ display: activeTab == '页面' ? 'block' : 'none' }}>
<div style={{ height: `${height - 80}px`, overflow: 'auto', display: 'flex', justifyContent: 'flex-start', flexWrap: 'wrap', marginTop: 10 }}>
{
pageImgArray.map((item) => {
const imgSrc = `${Axios.defaults?.baseURL}/route/file/v2/download/true/${item.previewImgs}`;
return (
<div key={item.loginpageId} className={item.codeTypePageId == codeTypePageId ? 'page-img-select page-img-selected' : 'page-img-select'}
style={{ marginRight: '10px', marginBottom: '10px', width: 545, height: 270 }}
onClick={() => {
// setSelectedId(item.codeTypePageId)
// setSelectedImg(item.previewImgs)
setcodeTypePageId(item.codeTypePageId)
put({
messageApi,
// url: `/api/proj/update/edit-step1/${props.projId}`,
url: `/api/proj/update-code-type-page-id/proj-id/${props.projId}/code-page-type-id/${item.codeTypePageId}`,
onSuccess() {
messageApi.open({
type: 'success',
content: '已更改'
})
getData()
},
})
}}
>
<div className="page-img" >
<Image
src={imgSrc}
preview={false} width={545} height={270} />
</div>
<div className="page-title">
<div className="checkbox"></div>
{/* <div className="text">{props.title ? props.title : '标题'}</div> */}
</div>
</div>
)
})
}
</div>
<div className='pagination'>
{/* defaultCurrent: 默认当前页数 total:数据总数 defaultPageSize:'页面显示几条' */}
<Pagination defaultCurrent={1} total={pageTotal} defaultPageSize={10} onChange={(page) => {
console.log(page);
// setPage(page)
setpageImgArray([])
getPageImgData(page)
}} />
</div>
</div>
{/* <div className='proIntroduction'>
项目简介
</div>
@ -517,6 +732,7 @@ export default function AiHelper(props: PropsType) {
项目详情
</div> */}
</div>
)
}

6
src/components/ai/ai-helper.css
View File

@ -39,4 +39,10 @@
width: 100%;
/* background-color: pink; */
}
.loginPageBox{
display: flex;
margin-top: 20px;
box-sizing: border-box;
}

6
src/route/index/Index.tsx
View File

@ -4,7 +4,7 @@ import { MouseEvent, Reducer, useEffect, useReducer, useState } from "react";
import { useNavigate, useSearchParams, Outlet } from "react-router-dom";
import { IMenuListItem, IMenuWithTopButton } from "../../interfaces/menu/IMenuWithTopButton.ts";
import MenuWithTopButton from "../../components/menu/MenuWithTopButton.tsx";
import MenuWithBottomButtom from '../../components/menu/MenuWithBottomButton.tsx'
// import MenuWithBottomButtom from '../../components/menu/MenuWithBottomButton.tsx'
import MenuTreeWithTopButton from "../../components/menu/MenuTreeWithTopButton.tsx";
// import ListProj from "../../components/list/ListProj.tsx";
// import ListProjAgent from "../../components/list/ListProjAgent.tsx";
@ -388,7 +388,7 @@ export default function Index() {
list={agentMenu.list}
handleListItem={agentMenu.handleListItem}
/> */}
<MenuWithBottomButtom
{/* <MenuWithBottomButtom
button={sellMenu.button}
list={sellMenu.list}
handleListItem={sellMenu.handleListItem}
@ -397,7 +397,7 @@ export default function Index() {
button={buyMenu.button}
list={buyMenu.list}
handleListItem={buyMenu.handleListItem}
/>
/> */}
</div>
</div>
<div className="right">

2
src/route/proj/ProjEdit.tsx
View File

@ -354,7 +354,7 @@ export default function ProjEdit() {
if(aiHelper.projIntroduction && aiHelper.projDesc && data.length > 0){
setAiHelperModalOpen(false);
}else{
messageApi.error('必须完成三项ai生成才可关闭弹窗');
messageApi.error('须完成系统简介,系统详情,功能列表的生成才可关闭弹窗');
}
},

2
src/route/proj/ProjEditFree.tsx
View File

@ -96,7 +96,7 @@ export default function ProjEdit() {
if(aiHelper.projIntroduction && aiHelper.projDesc && data.length > 0){
setAiHelperModalOpen(false);
}else{
messageApi.error('必须完成三项ai生成才可关闭弹窗');
messageApi.error('须完成系统简介,系统详情,功能列表的生成才可关闭弹窗');
}
},

126
src/route/proj/edit/ProjConfigLoginpage.tsx
View File

@ -48,15 +48,15 @@ export default function ProjConfigLoginpage(props: any) {
const height = window.innerHeight - 200;
const [loginpageArray, setloginpageArray] = useState<any[]>([])
// const [page,setPage] = useState(1)
const [total ,setTotal] = useState(0)
const [total, setTotal] = useState(0)
const [selectedLoginpageId, setSelectedLoginpageId] = useState('');
// 选择页面id和img(初始化用)
const [modalId,setModalId] = useState('')
const [modalImg,setModalImg] = useState('')
const [modalId, setModalId] = useState('')
const [modalImg, setModalImg] = useState('')
const [selectImgs, setSelectImgs] = useState('')
const [projId] = useState(pathParams.projId ? pathParams.projId : props.projId)
// 选择登陆页面弹窗
const [selectImgModal,setSelectImgModal] = useState(false)
const [selectImgModal, setSelectImgModal] = useState(false)
const beforeUpload = (file: FileType) => {
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
if (!isJpgOrPng) {
@ -83,7 +83,7 @@ export default function ProjConfigLoginpage(props: any) {
}
})
}
const getlistLoginpage = (page:number) => {
const getlistLoginpage = (page: number) => {
get<any>({
messageApi,
url: '/api/loginpage/listpage',
@ -108,11 +108,11 @@ export default function ProjConfigLoginpage(props: any) {
// url: `/api/proj/get/config-loginpage/${projId}`,
// onSuccess({ data }) {
// if (data.loginpageId) {
// const imgs = newData.filter((item: { loginpageId: any; }) => item.loginpageId === data.loginpageId)
// setSelectImgs(imgs[0].previewImgs)
// }
@ -166,23 +166,23 @@ export default function ProjConfigLoginpage(props: any) {
onSuccess({ data }) {
console.log('数据', data);
// if(data.adminPassword adminUsername)
form.setFieldValue('adminUsername', data.adminUsername?data.adminUsername:'admin');
form.setFieldValue('adminPassword', data.adminPassword?data.adminPassword:'admin');
form.setFieldValue('adminUsername', data.adminUsername ? data.adminUsername : 'admin');
form.setFieldValue('adminPassword', data.adminPassword ? data.adminPassword : 'admin');
// if (data.loginpageId) {
form.setFieldValue('loginpageId', data.loginpageId);
setSelectedLoginpageId(data.loginpageId);
// lyp
// const imgs = loginpageArray.filter(item => item.loginpageId === data.loginpageId)
// ?.previewImgs;
setSelectImgs(data.loginpagePreviewImgs)
form.setFieldValue('loginpageId', data.loginpageId);
setSelectedLoginpageId(data.loginpageId);
// lyp
// const imgs = loginpageArray.filter(item => item.loginpageId === data.loginpageId)
// ?.previewImgs;
setSelectImgs(data.loginpagePreviewImgs)
setModalId(data.loginpageId)
form.setFieldValue('subTitle', data.subTitle);
form.setFieldValue('copyrightOwner', data.copyrightOwner);
form.setFieldValue('copyrightDate', data.copyrightDate);
// form.setFieldValue('adminUsername', data.adminUsername?data.adminUsername:'admin');
// form.setFieldValue('adminPassword', data.adminPassword?data.adminPassword:'admin');
preview()
setModalId(data.loginpageId)
form.setFieldValue('subTitle', data.subTitle);
form.setFieldValue('copyrightOwner', data.copyrightOwner);
form.setFieldValue('copyrightDate', data.copyrightDate);
// form.setFieldValue('adminUsername', data.adminUsername?data.adminUsername:'admin');
// form.setFieldValue('adminPassword', data.adminPassword?data.adminPassword:'admin');
preview()
// } else {
// getDefaultID()
// }
@ -266,7 +266,7 @@ export default function ProjConfigLoginpage(props: any) {
</Col>
<Col span={8}>
<div style={{ height: `${height}px`, overflow: 'auto',background:'white' }}>
<div style={{ height: `${height}px`, overflow: 'auto', background: 'white' }}>
<div className='setloginpage-right' >
<div className='setloginpage-title'>登陆页面设置</div>
<Form
@ -476,41 +476,41 @@ export default function ProjConfigLoginpage(props: any) {
</Form.Item>
</div>
{/* <div className='username-uerpassword'> */}
<div className='setloginpage-formitem' >
<div className='setloginpage-formitem-title'>用户名:</div>
<div className='setloginpage-formitem' >
<div className='setloginpage-formitem-title'>用户名:</div>
<Form.Item
// label="用户名"
name="adminUsername"
rules={[{ required: true, message: '请输入用户名' }]}
<Form.Item
// label="用户名"
name="adminUsername"
rules={[{ required: true, message: '请输入用户名' }]}
>
<Input placeholder="请输入用户名"
style={{
width: '375px',
height: '38px',
background: ' #F8F8F8'
>
<Input placeholder="请输入用户名"
style={{
width: '375px',
height: '38px',
background: ' #F8F8F8'
}} />
</Form.Item>
</div>
<div className='setloginpage-formitem' style={{ marginTop: '-10px' }}>
<div className='setloginpage-formitem-title'>密码:</div>
}} />
</Form.Item>
</div>
<div className='setloginpage-formitem' style={{ marginTop: '-10px' }}>
<div className='setloginpage-formitem-title'>密码:</div>
<Form.Item
// label="密码"
name="adminPassword"
rules={[{ required: true, message: '请输入密码' }]}
<Form.Item
// label="密码"
name="adminPassword"
rules={[{ required: true, message: '请输入密码' }]}
>
<Input placeholder="请输入密码"
style={{
width: '375px',
height: '38px',
background: ' #F8F8F8'
>
<Input placeholder="请输入密码"
style={{
width: '375px',
height: '38px',
background: ' #F8F8F8'
}} />
</Form.Item>
}} />
</Form.Item>
{/* </div> */}
</div>
@ -559,8 +559,8 @@ export default function ProjConfigLoginpage(props: any) {
})
}
</div> */}
<div style={{ fontSize: 16, width: 140,color: '#5C6065 ', }}>选择登陆页面:
<div style={{fontSize:12,color:'#a8a8a8'}}>(点击图片选择背景)</div>
<div style={{ fontSize: 16, width: 140, color: '#5C6065 ', }}>选择登录页面:
<div style={{ fontSize: 12, color: '#a8a8a8' }}>(点击图片选择背景)</div>
</div>
<div style={{ width: '100%', height: '100%' }} onClick={() => {
// console.log(selectImgs);
@ -572,9 +572,9 @@ export default function ProjConfigLoginpage(props: any) {
<img src={downloadUrl(selectImgs)} alt="" width={'93%'} height={'97%'} />
</div>
</div>
</div>
</div>
</Col>
@ -639,21 +639,21 @@ export default function ProjConfigLoginpage(props: any) {
width={1070}
style={{ position: 'relative' }}
onOk={() => {
form.setFieldValue('loginpageId', modalId)
preview()
if(modalImg){
if (modalImg) {
setSelectImgs(modalImg)
setSelectedLoginpageId(modalId);
}
setSelectImgModal(false)
}}
onCancel={() => {
setModalId(selectedLoginpageId)
setSelectImgModal(false)
}}
>
@ -664,7 +664,7 @@ export default function ProjConfigLoginpage(props: any) {
const imgSrc = `${Axios.defaults?.baseURL}/route/file/v2/download/true/${item.previewImgs}`;
return (
<div key={item.loginpageId} className={item.loginpageId == modalId ? 'page-img-select page-img-selected' : 'page-img-select'}
style={{ marginRight: '10px', marginBottom: '10px' }}
style={{ marginRight: '10px', marginBottom: '10px',height:270 }}
onClick={() => {
setModalId(item.loginpageId)
setModalImg(item.previewImgs)
@ -673,7 +673,7 @@ export default function ProjConfigLoginpage(props: any) {
<div className="page-img" >
<Image
src={imgSrc}
preview={false} width={500} height={300} />
preview={false} width={500} height={270} />
</div>
<div className="page-title">
<div className="checkbox"></div>

4
src/route/proj/edit/ProjEditStep1.tsx
View File

@ -326,7 +326,7 @@ export default function ProjEditStep1(props: any) {
const imgSrc = `${Axios.defaults?.baseURL}/route/file/v2/download/true/${item.previewImgs}`;
return (
<div key={item.codeTypePageId} className={item.codeTypePageId == selectedId ? 'page-img-select page-img-selected' : 'page-img-select'}
style={{ marginRight: '10px', marginBottom: '10px' }}
style={{ marginRight: '10px', marginBottom: '10px' ,height:250}}
onClick={() => {
setSelectedId(item.codeTypePageId)
setSelectedImg(item.previewImgs)
@ -336,7 +336,7 @@ export default function ProjEditStep1(props: any) {
<Image
src={imgSrc}
fallback={errorImage}
preview={false} width={500} height={300} />
preview={false} width={500} height={250} />
</div>
<div className="page-title">
<div className="checkbox"></div>