Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Contribute to GitLab
Sign in / Register
Toggle navigation
C
chatGLM
Project
Project
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
1
Merge Requests
1
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
刘坚-丰林-DEV
chatGLM
Commits
cad06772
Commit
cad06772
authored
Apr 15, 2023
by
Ylg
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
complete new session mobile style
parent
192ec780
Hide whitespace changes
Inline
Side-by-side
Showing
5 changed files
with
143 additions
and
45 deletions
+143
-45
answer.component.tsx
src/components/newSession/answer.component.tsx
+41
-19
index.less
src/components/newSession/index.less
+60
-20
index.tsx
src/components/newSession/index.tsx
+29
-1
issue.component.tsx
src/components/newSession/issue.component.tsx
+12
-3
index.tsx
src/pages/Chat/index.tsx
+1
-2
No files found.
src/components/newSession/answer.component.tsx
View file @
cad06772
import
logoSvg
from
'../../assets/logo.svg'
;
import
logoSvg
from
'../../assets/logo.svg'
;
import
copySvg
from
'../../assets/copy.svg'
;
import
copySvg
from
'../../assets/copy.svg'
;
import
{
Button
}
from
'antd'
;
import
{
Button
,
Col
,
Grid
,
Row
}
from
'antd'
;
import
styles
from
'./index.less'
;
import
styles
from
'./index.less'
;
import
classNames
from
'classnames'
;
interface
IAnswerProps
{
interface
IAnswerProps
{
answerValue
:
string
;
answerValue
:
string
;
...
@@ -9,36 +10,57 @@ interface IAnswerProps {
...
@@ -9,36 +10,57 @@ interface IAnswerProps {
isShowRetry
?:
boolean
;
isShowRetry
?:
boolean
;
}
}
const
{
useBreakpoint
}
=
Grid
;
const
Answer
=
(
props
:
IAnswerProps
)
=>
{
const
Answer
=
(
props
:
IAnswerProps
)
=>
{
const
{
answerValue
,
loading
,
isShowRetry
}
=
props
const
{
answerValue
,
loading
,
isShowRetry
}
=
props
const
screens
=
useBreakpoint
();
const
isMobile
=
screens
.
xs
;
console
.
log
(
'isMobile'
,
isMobile
)
return
(
return
(
<
div
>
<
div
>
<
p
className=
{
styles
.
question
}
>
<
p
className=
{
styles
.
question
}
style=
{
{
marginTop
:
isMobile
?
'20px'
:
'40px'
}
}
>
<
img
src=
{
logoSvg
}
alt=
""
/>
<
img
src=
{
logoSvg
}
alt=
""
className=
{
styles
.
question_img
}
/>
<
span
>
回答如下:
</
span
>
<
span
className=
{
classNames
(
isMobile
&&
styles
.
mobile_question_span
,
styles
.
question_span
)
}
style=
{
{
marginLeft
:
isMobile
?
'8px'
:
'16px'
}
}
>
回答如下:
</
span
>
</
p
>
</
p
>
<
div
className=
{
styles
.
chat
}
>
<
div
className=
{
styles
.
chat
}
>
<
div
>
<
div
className=
{
classNames
(
styles
.
answer
,
isMobile
&&
styles
.
mobile_answer
)
}
>
<
p
{
className=
{
styles
.
copyAnswer
}
!
isMobile
&&
onClick=
{
()
=>
{
<
p
className=
{
styles
.
copyAnswer
}
}
}
onClick=
{
()
=>
{
>
<
img
src=
{
copySvg
}
alt=
""
/>
}
}
<
span
>
复制回答
</
span
>
>
</
p
>
<
img
src=
{
copySvg
}
alt=
""
/
>
<
span
>
复制回答
</
span
>
<
div
className=
{
styles
.
answer
}
>
</
p
>
<
p
>
{
loading
?
'请耐心等待3-5秒~'
:
answerValue
}
</
p
>
}
<
/
div
>
<
p
className=
{
styles
.
answerValue
}
>
{
loading
?
'请耐心等待3-5秒~'
:
answerValue
}
</
p
>
</
div
>
</
div
>
{
{
isShowRetry
&&
<
Button
>
重试
</
Button
>
isShowRetry
&&
!
isMobile
&&
<
Button
className=
{
styles
.
chat_retry
}
>
重试
</
Button
>
}
}
</
div
>
</
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
>
</
div
>
);
);
}
}
...
...
src/components/newSession/index.less
View file @
cad06772
@import (reference) '~antd/es/style/themes/index';
@import (reference) '~antd/es/style/themes/index';
.mobile_newSession {
padding: 48px 16px 16px;
width: 100% !important;
}
.mobile_question_span {
font-size: 18px !important;
}
.mobile_answer {
width: 316px !important;
font-size: 16px !important;
line-height: 28px !important;
}
.newSession {
.newSession {
margin-top: 40px;
width: 1000px;
width: 1000px;
.question {
.question {
display: flex;
display: flex;
align-items:
center
;
align-items:
flex-start
;
img {
.question_
img {
width: 26px;
width: 26px;
height: 26px;
height: 26px;
}
}
span {
.question_
span {
font-size: 20px;
font-size: 20px;
font-weight: 600;
font-weight: 600;
line-height: 26px;
line-height: 26px;
color: #333333;
color: #333333;
height: 28px;
margin-left: 16px;
}
}
}
}
.chat {
.chat {
display: flex;
display: flex;
div
{
.answer
{
position: relative;
position: relative;
width: 900px;
margin-left: 28px;
background: #F0F3F6;
border-radius: 4px;
font-size: 18px;
color: rgba(0,0,0,0.85);
line-height: 32px;
min-height: 268px;
.copyAnswer {
.copyAnswer {
position: absolute;
position: absolute;
bottom: 0;
bottom: 0;
...
@@ -42,21 +62,11 @@
...
@@ -42,21 +62,11 @@
}
}
}
}
.answer {
.answerValue {
width: 900px;
padding: 16px;
margin-left: 28px;
background: #F0F3F6;
border-radius: 4px;
font-size: 18px;
color: rgba(0,0,0,0.85);
line-height: 32px;
min-height: 268px;
p {
padding: 16px;
}
}
}
}
}
button
{
.chat_retry
{
width: 90px;
width: 90px;
height: 48px;
height: 48px;
background: #FFFFFF;
background: #FFFFFF;
...
@@ -74,4 +84,34 @@
...
@@ -74,4 +84,34 @@
}
}
}
}
}
}
.mobile_button {
display: flex;
justify-content: space-around;
margin-top: 16px;
margin-left: 24px;
.mobile_copyAnswer {
width: 151px;
height: 40px;
background: rgba(0,155,149,0.12);
border-radius: 4px;
img {
width: 24px;
height: 24px;
}
span {
color: #009B95;
line-height: 20px;
height: 24px;
font-size: 14px;
}
}
.mobile_chat_retry {
width: 151px;
height: 40px;
background: #FFFFFF;
border-radius: 4px;
border: 1px solid #009B95;
color: #009B95;
}
}
}
}
\ No newline at end of file
src/components/newSession/index.tsx
View file @
cad06772
import
styles
from
'./index.less'
;
import
styles
from
'./index.less'
;
import
Issue
from
'./issue.component'
;
import
Issue
from
'./issue.component'
;
import
Answer
from
'./answer.component'
;
import
Answer
from
'./answer.component'
;
import
{
Grid
}
from
'antd'
;
import
classNames
from
'classnames'
;
interface
INewSessionProps
{
interface
INewSessionProps
{
questionValue
:
string
;
questionValue
:
string
;
answerValue
:
string
;
answerValue
:
string
;
}
}
const
{
useBreakpoint
}
=
Grid
;
const
NewSession
=
(
props
:
INewSessionProps
)
=>
{
const
NewSession
=
(
props
:
INewSessionProps
)
=>
{
const
{
questionValue
,
answerValue
}
=
props
;
const
{
questionValue
,
answerValue
}
=
props
;
const
screens
=
useBreakpoint
();
const
isMobile
=
screens
.
xs
;
return
(
return
(
<
div
className=
{
styles
.
newSession
}
>
<
div
className=
{
classNames
(
isMobile
&&
styles
.
mobile_newSession
,
styles
.
newSession
)
}
>
<
Issue
questionValue=
{
questionValue
}
/>
<
Answer
answerValue=
{
answerValue
}
loading
/>
<
Issue
questionValue=
{
questionValue
}
/>
<
Answer
answerValue=
{
answerValue
}
loading
/>
<
Issue
questionValue=
{
questionValue
}
/>
<
Answer
answerValue=
{
answerValue
}
loading
/>
<
Issue
<
Issue
questionValue=
{
questionValue
}
questionValue=
{
questionValue
}
/>
/>
...
...
src/components/newSession/issue.component.tsx
View file @
cad06772
import
classNames
from
'classnames'
;
import
userSvg
from
'../../assets/user.svg'
;
import
userSvg
from
'../../assets/user.svg'
;
import
styles
from
'./index.less'
;
import
styles
from
'./index.less'
;
import
{
Grid
}
from
'antd'
;
interface
IIssueProps
{
interface
IIssueProps
{
questionValue
:
string
;
questionValue
:
string
;
}
}
const
{
useBreakpoint
}
=
Grid
;
const
Issue
=
(
props
:
IIssueProps
)
=>
{
const
Issue
=
(
props
:
IIssueProps
)
=>
{
const
{
questionValue
}
=
props
;
const
{
questionValue
}
=
props
;
const
screens
=
useBreakpoint
();
const
isMobile
=
screens
.
xs
;
console
.
log
(
'isMobile'
,
isMobile
);
return
(
return
(
<
div
className=
{
styles
.
question
}
style=
{
{
margin
Bottom
:
'40px'
}
}
>
<
div
className=
{
styles
.
question
}
style=
{
{
margin
Top
:
isMobile
?
'20px'
:
'40px'
}
}
>
<
img
src=
{
userSvg
}
alt=
""
/>
<
img
src=
{
userSvg
}
alt=
""
className=
{
styles
.
question_img
}
/>
<
span
>
{
questionValue
}
</
span
>
<
span
className=
{
classNames
(
isMobile
&&
styles
.
mobile_question_span
,
styles
.
question_span
)
}
style=
{
{
marginLeft
:
isMobile
?
'8px'
:
'16px'
}
}
>
{
questionValue
}
</
span
>
</
div
>
</
div
>
);
);
}
}
...
...
src/pages/Chat/index.tsx
View file @
cad06772
...
@@ -31,7 +31,7 @@ const Chat: React.FC = () => {
...
@@ -31,7 +31,7 @@ const Chat: React.FC = () => {
const
[
selectSiderTabs
,
setSelectSiderTabs
]
=
useState
(
''
);
const
[
selectSiderTabs
,
setSelectSiderTabs
]
=
useState
(
''
);
const
[
open
,
setOpen
]
=
useState
(
false
);
const
[
open
,
setOpen
]
=
useState
(
false
);
const
tabShow
=
showSider
;
const
tabShow
=
showSider
&&
!
isMobile
;
const
questionValue
=
form
.
getFieldValue
(
'chatInput'
);
const
questionValue
=
form
.
getFieldValue
(
'chatInput'
);
...
@@ -222,7 +222,6 @@ const Chat: React.FC = () => {
...
@@ -222,7 +222,6 @@ const Chat: React.FC = () => {
htmlType=
"submit"
htmlType=
"submit"
type=
"primary"
type=
"primary"
size=
"large"
size=
"large"
disabled=
{
chat
.
length
===
0
}
>
>
发送
发送
</
Button
>
</
Button
>
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment