feat: optimize mobile responsive layout for share page

- 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

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", // 为关闭按钮提供定位基准
+        minHeight: "50vh",
+
+        "@media (max-width: 768px)": {
+            minHeight: "auto",
+            padding: "20px 10px",
         },
-    title: {
-        color: "#2c9678",
-        marginTop: 0,
-        display: "flex",
-        justifyContent: "space-between",
-        alignItems: "center",
     },
     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",
+        },
     },
 });
 

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",

frontend/src/page/share/component/panel-right.tsx

@@ -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,21 +22,54 @@ 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()
@@ -52,7 +91,7 @@ export const PanelRight = () => {
     return <div className={style.container}>
         <div className={style.form}>
             <h2 className={style.title}>获取文件</h2>
-            <div>
+            <div className={style.inputContainer}>
                 <input
                     type="text"
                     className={style.code}
@@ -60,7 +99,9 @@ export const PanelRight = () => {
                     value={code}
                     onChange={onCodeChange}
                 />
-                <UButton style={{marginLeft: '10px'}} onClick={onFetchFile}>获取文件</UButton>
+                <div className={style.buttonContainer}>
+                    <UButton onClick={onFetchFile}>获取文件</UButton>
+                </div>
             </div>
         </div>
     </div>

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",
+        },
     },
 })