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

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

@ -1,11 +1,12 @@
import './ai-helper.css' import './ai-helper.css'
import { useContext, useEffect, useRef, useState } from "react"; import { useContext, useEffect, useRef, useState } from "react";
import { GlobalContext } from "../../context/GlobalContext.ts"; 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 { import {
// Col, Divider, Row, // Col, Divider, Row,
Spin Spin, Image, Pagination
} from "antd"; } from "antd";
import { AxiosResponse } from "axios";
import useMessage from "antd/es/message/useMessage"; import useMessage from "antd/es/message/useMessage";
import AiHelperText from "./text/AiHelperText.tsx"; import AiHelperText from "./text/AiHelperText.tsx";
import AiHelperMod from "./mod/AiHelperMod.tsx"; import AiHelperMod from "./mod/AiHelperMod.tsx";
@ -32,8 +33,46 @@ type ProjModType = {
} }
export default function AiHelper(props: PropsType) { export default function AiHelper(props: PropsType) {
// 页面样式相关
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);
// const pathParams = useParams();
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 [openModal ,setOpenModal] = useState(false) //是提示替换弹框
// const height = window.innerHeight - 280; // const height = window.innerHeight - 280;
const globalContext = useContext(GlobalContext); 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 = () => { const ping = () => {
clearTimeout(pingTimeout.current); clearTimeout(pingTimeout.current);
pingTimeout.current = setTimeout(() => { pingTimeout.current = setTimeout(() => {
@ -192,7 +275,7 @@ export default function AiHelper(props: PropsType) {
messageApi.success('保存成功,点击编辑按钮可继续修改项目简介'); messageApi.success('保存成功,点击编辑按钮可继续修改项目简介');
setProjIntroduction(content); setProjIntroduction(content);
setNewProjIntroduction(''); setNewProjIntroduction('');
console.log('更新成功',data); console.log('更新成功', data);
}, },
onFinally() { onFinally() {
@ -234,11 +317,14 @@ export default function AiHelper(props: PropsType) {
listMods(); listMods();
websocket(); websocket();
}, [globalContext.user.userId, props.projId]); }, [globalContext.user.userId, props.projId]);
useEffect(()=>{ useEffect(() => {
// getLoginPageInfo()
getlistLoginpage(1)
},[]) // getData()
getPageImgData(1)
}, [])
return ( return (
<div className='aiTab'> <div className='aiTab'>
{messageApiHolder} {messageApiHolder}
@ -384,6 +470,23 @@ export default function AiHelper(props: PropsType) {
> >
功能列表 功能列表
</div> </div>
<div className={activeTab == '登录' ? 'tabActive' : "aiTabBtn"}
onClick={() => {
setActiveTab('登录')
getLoginPageInfo()
}}
>
登录页面
</div>
<div className={activeTab == '页面' ? 'tabActive' : "aiTabBtn"}
onClick={() => {
setActiveTab('页面')
getData()
}}
>
页面样式
</div>
</div> </div>
<div className='aiTabContent'> <div className='aiTabContent'>
@ -509,7 +612,119 @@ export default function AiHelper(props: PropsType) {
</Spin> </Spin>
</div> </div>
</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 className='proIntroduction'>
项目简介 项目简介
</div> </div>
@ -517,6 +732,7 @@ export default function AiHelper(props: PropsType) {
项目详情 项目详情
</div> */} </div> */}
</div> </div>
) )
} }

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

@ -40,3 +40,9 @@
/* background-color: pink; */ /* 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 { useNavigate, useSearchParams, Outlet } from "react-router-dom";
import { IMenuListItem, IMenuWithTopButton } from "../../interfaces/menu/IMenuWithTopButton.ts"; import { IMenuListItem, IMenuWithTopButton } from "../../interfaces/menu/IMenuWithTopButton.ts";
import MenuWithTopButton from "../../components/menu/MenuWithTopButton.tsx"; 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 MenuTreeWithTopButton from "../../components/menu/MenuTreeWithTopButton.tsx";
// import ListProj from "../../components/list/ListProj.tsx"; // import ListProj from "../../components/list/ListProj.tsx";
// import ListProjAgent from "../../components/list/ListProjAgent.tsx"; // import ListProjAgent from "../../components/list/ListProjAgent.tsx";
@ -388,7 +388,7 @@ export default function Index() {
list={agentMenu.list} list={agentMenu.list}
handleListItem={agentMenu.handleListItem} handleListItem={agentMenu.handleListItem}
/> */} /> */}
<MenuWithBottomButtom {/* <MenuWithBottomButtom
button={sellMenu.button} button={sellMenu.button}
list={sellMenu.list} list={sellMenu.list}
handleListItem={sellMenu.handleListItem} handleListItem={sellMenu.handleListItem}
@ -397,7 +397,7 @@ export default function Index() {
button={buyMenu.button} button={buyMenu.button}
list={buyMenu.list} list={buyMenu.list}
handleListItem={buyMenu.handleListItem} handleListItem={buyMenu.handleListItem}
/> /> */}
</div> </div>
</div> </div>
<div className="right"> <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){ if(aiHelper.projIntroduction && aiHelper.projDesc && data.length > 0){
setAiHelperModalOpen(false); setAiHelperModalOpen(false);
}else{ }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){ if(aiHelper.projIntroduction && aiHelper.projDesc && data.length > 0){
setAiHelperModalOpen(false); setAiHelperModalOpen(false);
}else{ }else{
messageApi.error('必须完成三项ai生成才可关闭弹窗'); messageApi.error('须完成系统简介,系统详情,功能列表的生成才可关闭弹窗');
} }
}, },

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

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