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

224
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,6 +33,44 @@ 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);
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 pathParams = useParams();
// const [openModal ,setOpenModal] = useState(false) //是提示替换弹框 // const [openModal ,setOpenModal] = useState(false) //是提示替换弹框
@ -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(() => {
@ -234,10 +317,13 @@ 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'>
@ -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('须完成系统简介,系统详情,功能列表的生成才可关闭弹窗');
} }
}, },

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

@ -559,7 +559,7 @@ 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={() => {
@ -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>