Skip to content

S
sdream-ai-fe
Commit b98471c0 by weiyudumei
Options

style: 删除所有max-w-[912px]宽度限制 

1. 删除Protocol页面的max-w-[912px]限制
2. 删除Chat页面的对话项和输入容器宽度限制
3. 删除ChatSlogan组件的宽度限制
4. 删除Tools页面的标题和网格容器宽度限制
5. 删除Collect页面的收藏项、加载更多按钮和底部文本宽度限制
6. 删除Home页面的输入容器宽度限制
7. 删除HomeNew页面的输入容器宽度限制
8. 优化HomeNew页面的padding样式

现在页面内容可以充分利用可用空间，不再受912px宽度限制
parent c01bf4c6
Showing with 12 additions and 12 deletions
src/pages/Chat/Chat.tsx
...@@ -216,7 +216,7 @@ export const Chat: React.FC = () => { ...@@ -216,7 +216,7 @@ export const Chat: React.FC = () => {
> >
<div className={styles.inter}> <div className={styles.inter}>
{allItems.map((record, index) => ( {allItems.map((record, index) => (
<div className="w-full chatItem max-w-[912px] mx-auto" key={`${record.role}-${index}-${record.question || record.answerList?.[0]?.answer || ''}`}> <div className="w-full chatItem mx-auto" key={`${record.role}-${index}-${record.question || record.answerList?.[0]?.answer || ''}`}>
{record.role === 'system' && <ChatWelcome />} {record.role === 'system' && <ChatWelcome />}
{record.role === 'user' && <ChatItemUser record={record} />} {record.role === 'user' && <ChatItemUser record={record} />}
{record.role === 'ai' && <ChatAnswerBox onSubmitQuestion={handleSubmitQuestion} isLastAnswer={index === allItems.length - 1} showIndex={0} record={record} index={index} />} {record.role === 'ai' && <ChatAnswerBox onSubmitQuestion={handleSubmitQuestion} isLastAnswer={index === allItems.length - 1} showIndex={0} record={record} index={index} />}
...@@ -226,7 +226,7 @@ export const Chat: React.FC = () => { ...@@ -226,7 +226,7 @@ export const Chat: React.FC = () => {
</motion.div> </motion.div>
)} )}
</div> </div>
<div className="relative box-border px-[0] mx-auto iptContainer w-full max-w-[912px] flex-shrink-0 sm:px-0 pb-[18px]"> <div className="relative box-border px-[0] mx-auto iptContainer w-full flex-shrink-0 sm:px-0 pb-[18px]">
<div className="absolute left-1/2 ml-[-20px] top-[-45px] sm:top-[-65px]"> <div className="absolute left-1/2 ml-[-20px] top-[-45px] sm:top-[-65px]">
<motion.div <motion.div
initial="hidden" initial="hidden"
......
src/pages/Chat/components/ChatSlogan/ChatSlogan.tsx
...@@ -6,7 +6,7 @@ export const ChatSlogan: React.FC = () => { ...@@ -6,7 +6,7 @@ export const ChatSlogan: React.FC = () => {
const navigate = useNavigate() const navigate = useNavigate()
return ( return (
<div className="w-full"> <div className="w-full">
<div className="h-[64px] max-w-[912px] mx-auto sm:h-[112px] flex flex-col justify-center"> <div className="h-[64px] mx-auto sm:h-[112px] flex flex-col justify-center">
<div className="flex items-center cursor-pointer" onClick={() => navigate('/')}> <div className="flex items-center cursor-pointer" onClick={() => navigate('/')}>
<TextLogo className="w-[46px] sm:w-[70px]" /> <TextLogo className="w-[46px] sm:w-[70px]" />
<GradualSpacing text="晓得解惑，让沟通更智能" className="ml-[8px] text-[14px] sm:text-[16px] text-[#333] font-medium" /> <GradualSpacing text="晓得解惑，让沟通更智能" className="ml-[8px] text-[14px] sm:text-[16px] text-[#333] font-medium" />
......
src/pages/Collect/Collect.tsx
...@@ -118,7 +118,7 @@ export const Collect: React.FC = () => { ...@@ -118,7 +118,7 @@ export const Collect: React.FC = () => {
{collectList.map((item: any, index: number) => ( {collectList.map((item: any, index: number) => (
<ShineBorder <ShineBorder
borderRadius={20} borderRadius={20}
className="text-[#27353C] w-full max-w-[912px] mx-auto bg-white rounded-[20px] box-border px-[24px] py-[20px]" className="text-[#27353C] w-full mx-auto bg-white rounded-[20px] box-border px-[24px] py-[20px]"
key={`${item.collectionId}_${index}`} key={`${item.collectionId}_${index}`}
> >
<div className="flex mb-[20px]"> <div className="flex mb-[20px]">
...@@ -167,14 +167,14 @@ export const Collect: React.FC = () => { ...@@ -167,14 +167,14 @@ export const Collect: React.FC = () => {
</div> </div>
)} )}
{!isLoading && collectList.length < total && ( {!isLoading && collectList.length < total && (
<div className="w-full max-w-[912px] mx-auto flex justify-center mt-[24px]"> <div className="w-full mx-auto flex justify-center mt-[24px]">
<Button onPress={handleLoadMore} color="primary" variant="light"> <Button onPress={handleLoadMore} color="primary" variant="light">
加载更多 加载更多
</Button> </Button>
</div> </div>
)} )}
{collectList.length === total && collectList.length !== 0 && ( {collectList.length === total && collectList.length !== 0 && (
<div className="w-full mt-[24px] max-w-[912px] mx-auto flex justify-center text-[#8D9795]">到底啦~</div> <div className="w-full mt-[24px] mx-auto flex justify-center text-[#8D9795]">到底啦~</div>
)} )}
</div> </div>
</motion.div> </motion.div>
......
src/pages/Home/Home.tsx
...@@ -78,7 +78,7 @@ export const Home: React.FC = () => { ...@@ -78,7 +78,7 @@ export const Home: React.FC = () => {
)} */} )} */}
{/* /> */} {/* /> */}
</div> </div>
<div className="box-border px-[0] mx-auto iptContainer w-full max-w-[912px] flex-shrink-0 sm:px-0 pb-[18px]"> <div className="box-border px-[0] mx-auto iptContainer w-full flex-shrink-0 sm:px-0 pb-[18px]">
<ChatEditor showContentTips onSubmit={handleCreateConversation} placeholders={RECOMMEND_QUESTIONS_OTHER} /> <ChatEditor showContentTips onSubmit={handleCreateConversation} placeholders={RECOMMEND_QUESTIONS_OTHER} />
<div className="hidden sm:block w-full text-center mt-[12px] text-[#3333334d] text-[12px]"> <div className="hidden sm:block w-full text-center mt-[12px] text-[#3333334d] text-[12px]">
内容由AI模型生成，其准确性和完整性无法保证，仅供参考 内容由AI模型生成，其准确性和完整性无法保证，仅供参考
......
src/pages/Home/HomeNew.tsx
...@@ -195,7 +195,7 @@ export const Home: React.FC = () => { ...@@ -195,7 +195,7 @@ export const Home: React.FC = () => {
<div className="hidden sm:flex flex-1 h-full sm:mt-[-62px]"> <div className="hidden sm:flex flex-1 h-full sm:mt-[-62px]">
<div <div
className="w-full h-full bg-transparent box-border rounded-[24px]" className="w-full h-full bg-transparent box-border rounded-[24px]"
style={{ height: 'calc(100vh - 64px)', background: '#FFFFFF' }} style={{ height: 'calc(100vh - 64px)', background: '#FFFFFF', padding: '0 30px' }}
> >
<Outlet /> <Outlet />
{/* {showOutlet {/* {showOutlet
...@@ -205,7 +205,7 @@ export const Home: React.FC = () => { ...@@ -205,7 +205,7 @@ export const Home: React.FC = () => {
: ( : (
<div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-between', height: '100%' }}> <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-between', height: '100%' }}>
<Slogan /> <Slogan />
<div className="box-border px-[0] mx-auto iptContainer w-full max-w-[912px] flex-shrink-0 sm:px-0 pb-[18px]"> <div className="box-border px-[0] mx-auto iptContainer w-full flex-shrink-0 sm:px-0 pb-[18px]">
<ChatEditor <ChatEditor
showContentTips showContentTips
onSubmit={handleCreateConversation} onSubmit={handleCreateConversation}
......
src/pages/Protocol/Protocol.tsx
...@@ -357,7 +357,7 @@ export const Protocol: React.FC = () => { ...@@ -357,7 +357,7 @@ export const Protocol: React.FC = () => {
<div className={`${styles.protocolPage} relative`}> <div className={`${styles.protocolPage} relative`}>
<ChatSlogan /> <ChatSlogan />
<ChatMaskBar /> <ChatMaskBar />
<TracingBeam className="bg-[#fff] flex-1 text-[#27353C] w-full max-w-[912px] p-[24px] box-border mx-auto rounded-[20px]"> <TracingBeam className="bg-[#fff] flex-1 text-[#27353C] w-full p-[24px] box-border mx-auto rounded-[20px]">
<div className="pt-4 relative leading-[32px]"> <div className="pt-4 relative leading-[32px]">
{(id === '01' ? dummyContent01 : dummyContent02).map((item, index) => ( {(id === '01' ? dummyContent01 : dummyContent02).map((item, index) => (
<div key={`content-${index}`}> <div key={`content-${index}`}>
......
src/pages/Tools/Tools.tsx
...@@ -59,8 +59,8 @@ export const Tools: React.FC = () => { ...@@ -59,8 +59,8 @@ export const Tools: React.FC = () => {
<div className="px-[24px] pb-[24px] pt-[42px] sm:pt-[80px] lg:pt-[180px] sm:px-0"> <div className="px-[24px] pb-[24px] pt-[42px] sm:pt-[80px] lg:pt-[180px] sm:px-0">
<Slogan /> <Slogan />
<div> <div>
<div className="max-w-[912px] flex mx-auto mt-[64px] text-18px text-[#5AA9D0] font-light">全部工具</div> <div className="flex mx-auto mt-[64px] text-18px text-[#5AA9D0] font-light">全部工具</div>
<div className="max-w-[912px] mx-auto gap-[20px] grid grid-cols-1 sm:grid-cols-3 mt-[22px] "> <div className="mx-auto gap-[20px] grid grid-cols-1 sm:grid-cols-3 mt-[22px] ">
{tools.map((item, index) => ( {tools.map((item, index) => (
<motion.div className="col-span-1" key={index} onClick={() => handleClickToolItem(item)} {...getAnimationProps(index + 1)}> <motion.div className="col-span-1" key={index} onClick={() => handleClickToolItem(item)} {...getAnimationProps(index + 1)}>
<ShineBorder <ShineBorder
......
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