完美

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

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()}

src/hooks/useIsMobile.ts

@@ -17,9 +17,18 @@ export function useMediaQuery(query: string): boolean {
   return matches;
 }
 
-/** 与 Tailwind `md` 断点一致：< 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 */

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;
   }