fix: phone ui

This commit is contained in:
archer
2023-07-14 18:27:08 +08:00
parent 077ee9504f
commit 877aab858b
14 changed files with 259 additions and 210 deletions

View File

@@ -312,8 +312,8 @@ const ChatBox = (
};
const controlContainerStyle = {
className: 'control',
display: isChatting ? 'none' : ['flex', 'none'],
color: 'myGray.400',
display: ['flex', 'none'],
pl: 1,
mt: 2,
position: 'absolute' as any,
@@ -321,12 +321,17 @@ const ChatBox = (
w: '100%'
};
const hasVariableInput = useMemo(
() => variableModules || welcomeText,
[variableModules, welcomeText]
);
return (
<Flex flexDirection={'column'} h={'100%'}>
<Box ref={ChatBoxRef} flex={'1 0 0'} overflow={'overlay'} px={[2, 5, 8]} py={5}>
<Box maxW={['100%', '1000px', '1200px']} mx={'auto'}>
<Box ref={ChatBoxRef} flex={'1 0 0'} h={0} overflow={'overlay'} px={[2, 5, 8]} py={[0, 5]}>
<Box maxW={['100%', '1000px', '1200px']} h={'100%'} mx={'auto'}>
{/* variable input */}
{(variableModules || welcomeText) && (
{hasVariableInput && (
<Flex alignItems={'flex-start'} py={2}>
{/* avatar */}
<Avatar
@@ -396,8 +401,10 @@ const ChatBox = (
</Flex>
</Flex>
)}
{/* empty guide */}
{/* chat history */}
<Box id={'history'}>
<Box id={'history'} pb={[8, 2]}>
{chatHistory.map((item, index) => (
<Flex
key={item._id}
@@ -486,7 +493,7 @@ const ChatBox = (
>
<Box as={'p'}>{item.value}</Box>
</Card>
<Flex {...controlContainerStyle} right={0}>
<Flex {...controlContainerStyle} justifyContent={'flex-end'}>
<MyTooltip label={'复制'}>
<MyIcon
{...controlIconStyle}
@@ -523,6 +530,7 @@ const ChatBox = (
</Box>
</Box>
</Box>
{/* input */}
{variableIsFinish ? (
<Box m={['0 auto', '20px auto']} w={'100%'} maxW={['auto', 'min(750px, 100%)']} px={[0, 5]}>
<Box

View File

@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1689324646567" class="icon" viewBox="0 0 1110 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3584" data-spm-anchor-id="a313x.7781069.0.i4" xmlns:xlink="http://www.w3.org/1999/xlink" width="69.375" height="64"><path d="M919.75593219 424.16813563a21.72203344 21.72203344 0 0 0 21.65694937-21.78711844V140.93559313c0-60.04067812-48.545085-108.93559312-108.26847469-108.93559313H140.26033906C80.545085 32 32 80.894915 32 140.93559313v740.77017c0 60.04067812 48.545085 108.93559312 108.26033906 108.93559312h692.88406781c59.71525406 0 108.26033906-48.894915 108.26033907-108.93559312V750.98305063a21.72203344 21.72203344 0 0 0-21.64881375-21.78711844 21.72203344 21.72203344 0 0 0-21.65694938 21.78711843v130.72271251c0 36.04067812-29.14169531 65.36135625-64.95457594 65.36135531H140.26033906c-35.81288156 0-64.95457594-29.32881375-64.95457593-65.36135531V249.87118625h822.80135531v152.50983094a21.72203344 21.72203344 0 0 0 21.64881375 21.78711843zM75.30576312 206.29694937V140.93559313c0-36.04067812 29.14169531-65.36135625 64.95457594-65.36135625h692.88406781c35.81288156 0 64.96271156 29.32881375 64.96271157 65.36135625v65.36135625H75.30576312z m64.95457594-43.57423781a21.72203344 21.72203344 0 0 0 21.65694938-21.78711843 21.72203344 21.72203344 0 0 0-21.65694938-21.78711844 21.72203344 21.72203344 0 0 0-21.64881375 21.78711844 21.72203344 21.72203344 0 0 0 21.64881375 21.78711843z m86.61152531 0a21.72203344 21.72203344 0 0 0 21.65694938-21.78711843 21.72203344 21.72203344 0 0 0-21.65694938-21.78711844 21.72203344 21.72203344 0 0 0-21.64881375 21.78711844 21.72203344 21.72203344 0 0 0 21.64881375 21.78711843z m86.61152532 0a21.72203344 21.72203344 0 0 0 21.65694937-21.78711843 21.72203344 21.72203344 0 0 0-21.65694937-21.78711844 21.72203344 21.72203344 0 0 0-21.64881375 21.78711844 21.72203344 21.72203344 0 0 0 21.64881375 21.78711843zM486.70644031 467.7423725a21.72203344 21.72203344 0 0 1 21.64881375 21.795255v174.29694844a21.72203344 21.72203344 0 0 1-21.64881375 21.78711937 21.72203344 21.72203344 0 0 1-21.65694844-21.78711937v-65.36135531H378.43796656v65.36135531a21.72203344 21.72203344 0 0 1-21.64881375 21.78711937 21.72203344 21.72203344 0 0 1-21.65694937-21.78711937V489.5376275a21.72203344 21.72203344 0 0 1 21.65694937-21.795255 21.72203344 21.72203344 0 0 1 21.64881375 21.795255v65.36135531H465.0576275v-65.36135531a21.72203344 21.72203344 0 0 1 21.65694844-21.795255z m173.21491594 0c11.95932188 0 21.665085 9.76271156 21.66508406 21.78711937a21.72203344 21.72203344 0 0 1-21.65694844 21.78711844h-21.65694937v152.51796563a21.72203344 21.72203344 0 0 1-21.64881375 21.78711937 21.72203344 21.72203344 0 0 1-21.65694938-21.78711937V511.31661031h-21.64881281a21.72203344 21.72203344 0 0 1-21.65694937-21.77898281 21.72203344 21.72203344 0 0 1 21.65694937-21.795255h86.60338969z m224.80271156 1.70847469a21.79525406 21.79525406 0 0 1 13.38305063 20.1274575v174.29694937a21.72203344 21.72203344 0 0 1-21.64881375 21.74644125 21.72203344 21.72203344 0 0 1-21.65694844-21.78711937v-121.70847469l-27.97830562 28.14915281a21.57559313 21.57559313 0 0 1-30.61423688 0l-28.01898281-28.14915281v121.70847469a21.72203344 21.72203344 0 0 1-21.65694938 21.78711937 21.72203344 21.72203344 0 0 1-21.64881375-21.78711937V489.5376275c0-8.80271156 5.28813563-16.77559313 13.38305063-20.13559406a21.68135625 21.68135625 0 0 1 23.59322062 4.71050906l49.62711844 49.97694937 49.62711844-49.93627125a21.38847469 21.38847469 0 0 1 23.60949187-4.71050906z m164.94915281 172.58847468a21.72203344 21.72203344 0 0 1 21.65694844 21.78711844 21.72203344 21.72203344 0 0 1-21.65694843 21.78711938h-86.61152532a21.72203344 21.72203344 0 0 1-21.64881375-21.78711938V489.52949188a21.72203344 21.72203344 0 0 1 21.64881375-21.78711938 21.72203344 21.72203344 0 0 1 21.65694844 21.78711938v152.50982999h64.95457688z" p-id="3585"></path></svg>

After

Width:  |  Height:  |  Size: 3.9 KiB

View File

@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1689324655973" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3734" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><path d="M512 601.09184948l-213.36752354-331.89890023A41.3976083 41.3976083 0 0 0 222.02342717 291.06546788v428.06065559H208.2150185a41.42522469 41.42522469 0 0 0 0 82.85044936h110.46726671a41.42522469 41.42522469 0 0 0 0-82.85044936h-13.80840868V432.10455041l172.27370066 267.99358607a41.42522469 41.42522469 0 0 0 69.70484562 0l172.27370066-267.99358607V719.12612347H705.31771479a41.42522469 41.42522469 0 0 0 0 82.85044936h110.46726671a41.42522469 41.42522469 0 0 0 0-82.85044936h-13.80840867V291.06546788a41.42522469 41.42522469 0 0 0-76.69189974-21.76205051L512 601.09184948z" p-id="3735"></path><path d="M14.8973037 180.59820247a165.70089876 165.70089876 0 0 1 165.70089877-165.70089877h662.80359506a165.70089876 165.70089876 0 0 1 165.70089877 165.70089877v662.80359506a165.70089876 165.70089876 0 0 1-165.70089877 165.70089877H180.59820247a165.70089876 165.70089876 0 0 1-165.70089877-165.70089877V180.59820247z m165.70089877-82.85044938a82.85044939 82.85044939 0 0 0-82.85044938 82.85044938v662.80359506a82.85044939 82.85044939 0 0 0 82.85044938 82.85044938h662.80359506a82.85044939 82.85044939 0 0 0 82.85044938-82.85044938V180.59820247a82.85044939 82.85044939 0 0 0-82.85044938-82.85044938H180.59820247z" p-id="3736"></path></svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

View File

@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1689325086843" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1918" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><path d="M75.09333333 220.72888889h-36.40888888H75.09333333z m0 582.54222222h0z m194.18074112 194.18074112v-36.40888889 36.40888889z m485.4518511 0v0z m194.18074112-194.18074112h-36.40888889 36.40888889z m0-307.92211001h0zM480.10581333 26.54814777v-36.40888889V26.54814777zM269.27407445 26.54814777v0z m622.73763556 331.46652444l-25.72894891 25.72894891 25.72894891-25.72894891z m-274.57156779-274.57156664l25.72894777-25.72894891-25.72894777 25.72894891zM560.54518557 220.72888889h-36.4088889 36.4088889z m194.18073998 194.18074112v0zM38.68444445 220.72888889v582.54222222h72.81777777V220.72888889h-72.81777777zM269.27407445 1033.86074112h485.4518511v-72.81777778H269.27407445v72.81777778zM985.31555555 803.27111111v-307.92211001h-72.81777777V803.27111111h72.81777777zM480.10581333-9.86074112H269.27407445v72.81777778h210.83173888v-72.81777778z m437.68339001 342.14646557l-274.62011335-274.62011222-51.45789554 51.45789554 274.57156665 274.66865778 51.45789668-51.45789554zM480.10581333 62.95703666a157.77185223 157.77185223 0 0 1 111.55683556 46.21501667l51.45789668-51.45789667a230.58963001 230.58963001 0 0 0-163.01473224-67.57489778v72.81777778z m505.20974222 432.39196444c0-61.16693333-24.27259221-119.80951666-67.52635221-163.06327665l-51.45789667 51.45789667c29.56401778 29.61256334 46.16647111 69.75943111 46.16647111 111.60537998h72.81777777zM38.68444445 803.27111111A230.58963001 230.58963001 0 0 0 269.27407445 1033.86074112v-72.81777778A157.77185223 157.77185223 0 0 1 111.50222222 803.27111111h-72.81777777z m72.81777777-582.54222222A157.77185223 157.77185223 0 0 1 269.27407445 62.95703666v-72.81777778A230.58963001 230.58963001 0 0 0 38.68444445 220.72888889h72.81777777zM754.72592555 1033.86074112A230.58963001 230.58963001 0 0 0 985.31555555 803.27111111h-72.81777777A157.77185223 157.77185223 0 0 1 754.72592555 961.04296334v72.81777778zM524.13629667 26.54814777v194.18074112h72.81777778V26.54814777h-72.81777778zM754.72592555 451.3185189h194.18074112v-72.81777778h-194.18074112v72.81777778zM524.13629667 220.72888889A230.58963001 230.58963001 0 0 0 754.72592555 451.3185189v-72.81777778A157.77185223 157.77185223 0 0 1 596.95407445 220.72888889h-72.81777778z" p-id="1919"></path><path d="M241.94313443 594.76954112V803.27111111h42.08867556v-78.6432h27.42803001c19.07825778 0 33.64181333-0.97090333 43.69066667-3.0098011 7.37886777-1.60199111 14.61210112-4.8545189 21.74824334-9.80612779 7.18468779-5.00015445 13.1072-11.89356999 17.76753778-20.63170332 4.66033778-8.73813333 6.99050667-19.46661888 6.99050666-32.28254891 0-16.55390777-4.02924999-30.09801443-12.13629667-40.53522887a54.56478777 54.56478777 0 0 0-30.00092445-20.43752334c-7.76723001-2.08744334-24.46677333-3.15543666-50.00154112-3.15543666H241.89459001z m271.07631446 0h-76.9441189V803.27111111h79.1771978c15.53445888 0 28.01057223-1.45635555 37.28270222-4.36906666 12.42756779-4.02924999 22.28224-9.5634011 29.6125622-16.69954333 9.66049223-9.36922112 17.08790557-21.65115221 22.33078557-36.79725113 4.22343111-12.42756779 6.35941888-27.18530333 6.35941888-44.37029888 0-19.56371001-2.28162333-35.92343666-6.79632555-49.22481778a91.02222222 91.02222222 0 0 0-19.90352554-33.83599445 69.71088555 69.71088555 0 0 0-31.45728-19.22389333c-9.12649443-2.66998557-22.33078557-3.98070557-39.66141668-3.98070443z m133.98471111 0V803.27111111h42.04012999v-88.59496334h87.0415178v-35.29234887h-87.0415178v-49.32190891h100.87689558v-35.29234887H646.95561443zM283.98326557 689.18992555v-59.12803556h20.34043221q22.71914667 0 30.29219555 1.40781113a29.12711111 29.12711111 0 0 1 16.89372445 9.22358443c4.46615666 4.95160889 6.69923555 11.16539221 6.69923555 18.78698666a27.71930112 27.71930112 0 0 1-17.9617189 26.45712669c-5.53415111 2.18453333-16.6509989 3.25252779-33.25345109 3.25252665h-23.01041777z m194.13219555 78.93447111v-138.06250667h18.93262222c17.13644999 0 28.64165888 0.63108779 34.51562667 1.94180779q11.79648 2.57289443 19.51516444 9.85467221c5.09724445 4.8545189 9.07795001 11.55375445 11.94211556 20.1947978 2.81562112 8.64104334 4.27197667 20.97152 4.27197554 37.0885211s-1.45635555 28.88438557-4.27197554 38.30215111c-2.86416555 9.27212999-6.5536 15.97136555-11.11684779 20.0491611q-6.65068999 6.11669333-16.89372444 8.64104335a114.66372779 114.66372779 0 0 1-25.48622223 1.99035221h-31.40873443z" p-id="1920"></path></svg>

After

Width:  |  Height:  |  Size: 4.5 KiB

View File

@@ -51,7 +51,10 @@ const map = {
variable: require('./icons/modules/variable.svg').default,
setTop: require('./icons/light/setTop.svg').default,
fullScreenLight: require('./icons/light/fullScreen.svg').default,
voice: require('./icons/voice.svg').default
voice: require('./icons/voice.svg').default,
html: require('./icons/file/html.svg').default,
pdf: require('./icons/file/pdf.svg').default,
markdown: require('./icons/file/markdown.svg').default
};
export type IconName = keyof typeof map;

View File

@@ -63,34 +63,39 @@ const Layout = ({ children }: { children: JSX.Element }) => {
return (
<>
<Box h={'100%'} bg={'myWhite.600'}>
<Box h={'100%'} display={['none', 'block']}>
{pcUnShowLayoutRoute[router.pathname] ? (
<Auth>{children}</Auth>
) : (
<>
<Box h={'100%'} position={'fixed'} left={0} top={0} w={'70px'}>
<Navbar unread={unread} />
</Box>
<Box h={'100%'} ml={'70px'} overflow={'overlay'}>
{isPc ? (
<>
{pcUnShowLayoutRoute[router.pathname] ? (
<Auth>{children}</Auth>
) : (
<>
<Box h={'100%'} position={'fixed'} left={0} top={0} w={'70px'}>
<Navbar unread={unread} />
</Box>
<Box h={'100%'} ml={'70px'} overflow={'overlay'}>
<Auth>{children}</Auth>
</Box>
</>
)}
</>
) : (
<>
<Box h={'100%'} display={['block', 'none']}>
{phoneUnShowLayoutRoute[router.pathname] || isChatPage ? (
<Auth>{children}</Auth>
</Box>
</>
)}
</Box>
<Box h={'100%'} display={['block', 'none']}>
{phoneUnShowLayoutRoute[router.pathname] || isChatPage ? (
<Auth>{children}</Auth>
) : (
<Flex h={'100%'} flexDirection={'column'}>
<Box flex={'1 0 0'} h={0} overflow={'overlay'}>
<Auth>{children}</Auth>
</Box>
<Box h={'50px'} borderTop={'1px solid rgba(0,0,0,0.1)'}>
<NavbarPhone unread={unread} />
</Box>
</Flex>
)}
</Box>
) : (
<Flex h={'100%'} flexDirection={'column'}>
<Box flex={'1 0 0'} h={0} overflow={'overlay'}>
<Auth>{children}</Auth>
</Box>
<Box h={'50px'} borderTop={'1px solid rgba(0,0,0,0.1)'}>
<NavbarPhone unread={unread} />
</Box>
</Flex>
)}
</Box>
</>
)}
</Box>
<Loading loading={loading} />
</>