From 2bd89c517c90a326c272d43bea5e0a7220610c3e Mon Sep 17 00:00:00 2001
From: iqudoo <iqudoo@qq.com>
Date: Sun, 14 Jun 2026 12:07:49 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E7=BE=8E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/PreviewGrid.tsx |  6 +++---
 src/components/PropSidebar.tsx | 23 ++++++++++++-----------
 src/hooks/useIsMobile.ts       | 13 +++++++++++--
 src/index.css                  |  7 ++++---
 4 files changed, 30 insertions(+), 19 deletions(-)

diff --git a/src/components/PreviewGrid.tsx b/src/components/PreviewGrid.tsx
index a82812f..8b80f0d 100644
--- a/src/components/PreviewGrid.tsx
+++ b/src/components/PreviewGrid.tsx
@@ -721,8 +721,8 @@ export const LayoutPreview: React.FC<LayoutPreviewProps> = ({
           <div
             className={
               isMobileVariant
-                ? 'flex flex-col items-center space-y-4 pb-4'
-                : 'flex flex-wrap justify-center content-start w-full pb-8'
+                ? 'flex flex-col items-center justify-center min-h-full w-full space-y-4 pb-4'
+                : 'flex flex-wrap justify-center content-center w-full min-h-full pb-8'
             }
             style={isMobileVariant ? undefined : { gap: `${previewPageGapPx}px` }}
           >
@@ -741,7 +741,7 @@ export const LayoutPreview: React.FC<LayoutPreviewProps> = ({
                   </span> */}
                 </div>
                 <div
-                  className="bg-white flex items-start justify-start relative select-none overflow-hidden shrink-0"
+                  className="bg-white flex items-center justify-center relative select-none overflow-hidden shrink-0"
                   style={{
                     width: `${pageCardWidthPx}px`,
                     height: `${currentPaperH * previewScale}px`,
diff --git a/src/components/PropSidebar.tsx b/src/components/PropSidebar.tsx
index 40418fd..7241666 100644
--- a/src/components/PropSidebar.tsx
+++ b/src/components/PropSidebar.tsx
@@ -2324,17 +2324,18 @@ export const PropSidebar: React.FC<PropSidebarProps> = ({
               <span>粘贴</span>
             </button>
           )}
-          <button
-            type="button"
-            onClick={() => elementClipboard?.copySelectedElements()}
-            disabled={!elementClipboard?.canCopy}
-            className="mobile-design-props-nav-btn"
-            aria-label="复制选中元素"
-            title="复制选中元素"
-          >
-            <Copy className="w-4 h-4" />
-            <span>复制</span>
-          </button>
+          {elementClipboard?.canCopy && (
+            <button
+              type="button"
+              onClick={() => elementClipboard.copySelectedElements()}
+              className="mobile-design-props-nav-btn"
+              aria-label="复制选中元素"
+              title="复制选中元素"
+            >
+              <Copy className="w-4 h-4" />
+              <span>复制</span>
+            </button>
+          )}
           <button
             type="button"
             onClick={() => void deleteSelectedElements()}
diff --git a/src/hooks/useIsMobile.ts b/src/hooks/useIsMobile.ts
index d3f7950..9eba4c8 100644
--- a/src/hooks/useIsMobile.ts
+++ b/src/hooks/useIsMobile.ts
@@ -17,9 +17,18 @@ export function useMediaQuery(query: string): boolean {
   return matches;
 }
 
-/** 与 Tailwind `md` 断点一致：&lt; 768px 视为移动端 */
+/** 移动端上下布局：手机窄屏，或平板竖屏（宽度 < 1024 且竖屏） */
+export const MOBILE_LAYOUT_MEDIA_QUERY =
+  '(max-width: 767px), (max-width: 1023px) and (orientation: portrait)';
+
+/** 移动端上下布局：手机窄屏，或平板竖屏（宽度 < 1024 且竖屏） */
 export function useIsMobile(): boolean {
-  return useMediaQuery('(max-width: 767px)');
+  return useMediaQuery(MOBILE_LAYOUT_MEDIA_QUERY);
+}
+
+/** 语义别名：是否使用移动端上下布局 */
+export function useMobileLayout(): boolean {
+  return useIsMobile();
 }
 
 /** 平板等窄屏：&lt; 1024px */
diff --git a/src/index.css b/src/index.css
index d990e93..4093487 100644
--- a/src/index.css
+++ b/src/index.css
@@ -896,8 +896,8 @@ html.app-dark-shell body {
   background-size: 24px 24px;
 }
 
-/* ── Mobile layout (< 768px) ── */
-@media (max-width: 767px) {
+/* ── Mobile layout：手机窄屏，或平板竖屏 ── */
+@media (max-width: 767px), (max-width: 1023px) and (orientation: portrait) {
 
   /* Mobile export flow — shares mobile-design-view shell */
   .mobile-export-view {
@@ -1740,7 +1740,8 @@ html.app-dark-shell body {
   }
 }
 
-@media (min-width: 768px) {
+/* 桌面宽屏 / 横屏平板：隐藏仅移动端渲染的视图 */
+@media (min-width: 768px) and (orientation: landscape), (min-width: 1024px) {
   .mobile-only {
     display: none !important;
   }