From d38fa7a5070ee0974a7cea7fceb318791f29df63 Mon Sep 17 00:00:00 2001 From: loveuer Date: Sun, 18 Jan 2026 17:12:07 +0800 Subject: [PATCH] feat: optimize mobile responsive layout for share page MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Add responsive design for mobile devices (≤768px) - Switch from horizontal to vertical layout on mobile - Hide middle divider panel on mobile - Optimize button sizes for mobile touch interaction - Improve input field and button alignment on mobile --- .../src/page/share/component/panel-left.tsx | 76 +++++++++++++++---- .../src/page/share/component/panel-mid.tsx | 4 + .../src/page/share/component/panel-right.tsx | 63 ++++++++++++--- frontend/src/page/share/share.tsx | 8 +- 4 files changed, 126 insertions(+), 25 deletions(-) diff --git a/frontend/src/page/share/component/panel-left.tsx b/frontend/src/page/share/component/panel-left.tsx index 569a5e0..37aaf0b 100644 --- a/frontend/src/page/share/component/panel-left.tsx +++ b/frontend/src/page/share/component/panel-left.tsx @@ -11,6 +11,12 @@ const useUploadStyle = createUseStyles({ display: "flex", justifyContent: "center", alignItems: "center", + minHeight: "50vh", + + "@media (max-width: 768px)": { + minHeight: "auto", + padding: "20px 10px", + }, }, form: { backgroundColor: "#C8E6C9", @@ -19,10 +25,20 @@ const useUploadStyle = createUseStyles({ borderRadius: "15px", width: "70%", margin: "20px 60px 20px 0", - /*todo margin 不用 px*/ + + "@media (max-width: 768px)": { + width: "90%", + margin: "20px 0", + padding: "20px", + }, }, title: { - color: "#2c9678" + color: "#2c9678", + + "@media (max-width: 768px)": { + fontSize: "1.5rem", + marginBottom: "15px", + }, }, file: { display: 'none', @@ -33,7 +49,11 @@ const useUploadStyle = createUseStyles({ }, name: { color: "#2c9678", - marginLeft: '10px' + marginLeft: '10px', + + "@media (max-width: 768px)": { + fontSize: "14px", + }, }, clean: { borderRadius: '50%', @@ -48,14 +68,12 @@ const useShowStyle = createUseStyles({ display: "flex", justifyContent: "center", alignItems: "center", - position: "relative", // 为关闭按钮提供定位基准 - }, - title: { - color: "#2c9678", - marginTop: 0, - display: "flex", - justifyContent: "space-between", - alignItems: "center", + minHeight: "50vh", + + "@media (max-width: 768px)": { + minHeight: "auto", + padding: "20px 10px", + }, }, form: { backgroundColor: "#C8E6C9", @@ -65,6 +83,25 @@ const useShowStyle = createUseStyles({ width: "70%", margin: "20px 60px 20px 0", position: "relative", + + "@media (max-width: 768px)": { + width: "90%", + margin: "20px 0", + padding: "20px", + }, + }, + title: { + color: "#2c9678", + marginTop: 0, + marginBottom: "25px", + display: "flex", + justifyContent: "space-between", + alignItems: "center", + + "@media (max-width: 768px)": { + fontSize: "1.5rem", + marginBottom: "15px", + }, }, closeButton: { position: "absolute", @@ -78,9 +115,7 @@ const useShowStyle = createUseStyles({ height: "24px", cursor: "pointer", "&:hover": { - // background: "#cc0000", boxShadow: "20px 20px 60px #fff, -20px -20px 60px #fff", - // boxShadow: "20px 20px 60px #eee", }, }, codeWrapper: { @@ -89,6 +124,10 @@ const useShowStyle = createUseStyles({ borderRadius: "8px", margin: "15px 0", overflowX: "auto", + + "@media (max-width: 768px)": { + padding: "0 10px", + }, }, pre: { display: 'flex', @@ -98,6 +137,12 @@ const useShowStyle = createUseStyles({ height: '24px', "& > code": { marginLeft: "0", + fontSize: "14px", + wordBreak: "break-all", + + "@media (max-width: 768px)": { + fontSize: "12px", + }, } }, copyButton: { @@ -112,6 +157,11 @@ const useShowStyle = createUseStyles({ "&:hover": { background: "#1f6d5a", }, + + "@media (max-width: 768px)": { + padding: "6px 12px", + fontSize: "12px", + }, }, }); diff --git a/frontend/src/page/share/component/panel-mid.tsx b/frontend/src/page/share/component/panel-mid.tsx index 0e12ec1..256014d 100644 --- a/frontend/src/page/share/component/panel-mid.tsx +++ b/frontend/src/page/share/component/panel-mid.tsx @@ -5,6 +5,10 @@ const useStyle = createUseStyles({ backgroundColor: 'lightgray', position: "relative", overflow: "hidden", + + "@media (max-width: 768px)": { + display: "none", + }, }, left: { backgroundColor: "#e3f2fd", diff --git a/frontend/src/page/share/component/panel-right.tsx b/frontend/src/page/share/component/panel-right.tsx index a69bd4d..10cca31 100644 --- a/frontend/src/page/share/component/panel-right.tsx +++ b/frontend/src/page/share/component/panel-right.tsx @@ -1,6 +1,6 @@ -import {createUseStyles} from "react-jss"; -import {UButton} from "../../../component/button/u-button.tsx"; -import {useStore} from "../../../store/share.ts"; +import { createUseStyles } from "react-jss"; +import { UButton } from "../../../component/button/u-button.tsx"; +import { useStore } from "../../../store/share.ts"; const useStyle = createUseStyles({ container: { @@ -8,6 +8,12 @@ const useStyle = createUseStyles({ display: "flex", justifyContent: "center", alignItems: "center", + minHeight: "50vh", + + "@media (max-width: 768px)": { + minHeight: "auto", + padding: "20px 10px", + }, }, form: { backgroundColor: "#BBDEFB", @@ -16,25 +22,58 @@ const useStyle = createUseStyles({ borderRadius: "15px", width: "70%", margin: "20px 0 20px 60px", - /*todo margin 不用 px*/ + + "@media (max-width: 768px)": { + width: "90%", + margin: "20px 0", + padding: "20px", + }, }, title: { - color: '#1661ab', // 靛青 + color: '#1661ab', + + "@media (max-width: 768px)": { + fontSize: "1.5rem", + marginBottom: "15px", + }, }, code: { padding: '11px', - margin: '20px 0', + margin: '0', width: '200px', border: '2px solid #ddd', borderRadius: '5px', '&:active': { border: '2px solid #1661ab', - } - } + }, + + "@media (max-width: 768px)": { + width: '100%', + boxSizing: 'border-box', + padding: '10px', + fontSize: '14px', + }, + }, + inputContainer: { + display: 'flex', + gap: '10px', + + "@media (max-width: 768px)": { + flexDirection: 'column', + alignItems: 'stretch', + }, + }, + buttonContainer: { + display: 'flex', + + "@media (max-width: 768px)": { + justifyContent: 'left', + }, + }, }) export const PanelRight = () => { const style = useStyle() - const {code, setCode} = useStore() + const { code, setCode } = useStore() function onCodeChange(e: React.ChangeEvent) { setCode(e.currentTarget.value) @@ -52,7 +91,7 @@ export const PanelRight = () => { return

获取文件

-
+
{ value={code} onChange={onCodeChange} /> - 获取文件 +
+ 获取文件 +
diff --git a/frontend/src/page/share/share.tsx b/frontend/src/page/share/share.tsx index e971755..1378076 100644 --- a/frontend/src/page/share/share.tsx +++ b/frontend/src/page/share/share.tsx @@ -13,6 +13,12 @@ const useStyle = createUseStyles({ height: "100vh", display: "grid", gridTemplateColumns: "40% 20% 40%", + + "@media (max-width: 768px)": { + gridTemplateColumns: "100%", + gridTemplateRows: "auto auto", + overflowY: "auto", + }, }, }) @@ -20,7 +26,7 @@ export const FileSharing = () => { const style = useStyle() return
- +
}; \ No newline at end of file