style(pages): 优化移动端创作页面布局

src/pages/Create/panels/FolderPanel/index.scss

@@ -394,7 +394,7 @@
 
 .folderPanel__grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, 219px);
+  grid-template-columns: repeat(auto-fill, minmax(180px, 219px));
   gap: 15px;
   margin: 0;
   padding: 0;
@@ -1612,7 +1612,7 @@
 
 @media (max-width: 520px) {
   .folderPanel {
-    padding: 0 16px;
+    padding: 0;
   }
 
   .folderPanel__toolbar {
@@ -1623,6 +1623,8 @@
   }
 
   .folderPanel__search {
+    flex-basis: auto;
+    width: 100%;
     max-width: none;
   }
 
@@ -1632,19 +1634,21 @@
   }
 
   .folderPanel__grid {
-    grid-template-columns: repeat(auto-fill, 219px);
+    grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 12px;
     justify-content: center;
   }
 
   .folderPanel__card,
   .folderPanel__cardFrame {
-    width: 219px;
+    width: 100%;
+    height: auto;
+    aspect-ratio: 1 / 1;
   }
 
   .folderPanel__cardCoverWrap {
-    width: 199px;
-    height: 142px;
+    width: 100%;
+    height: calc(100% - 57px);
   }
 
   .folderPanel__createModal {
@@ -1664,16 +1668,19 @@
   }
 
   .folderPanel__uploadModalGrid {
-    grid-template-columns: repeat(3, 107px);
+    grid-template-columns: repeat(3, minmax(0, 1fr));
     gap: 9px;
   }
 
   .folderPanel__uploadModalGridItem,
   .folderPanel__uploadModalAddBtn,
   .folderPanel__uploadModalAddSlot,
-  .folderPanel__uploadModalThumb {
-    width: 107px;
-    height: 107px;
+  .folderPanel__uploadModalThumb,
+  .folderPanel__uploadModalUploading,
+  .folderPanel__uploadModalUploadingImage {
+    width: 100%;
+    height: auto;
+    aspect-ratio: 1 / 1;
   }
 
   .folderPanel__uploadModalFooter {

src/pages/Create/panels/InspirationLibraryPanel/CharacterAssetsPanel/CharacterAssetsPanel.scss

@@ -143,9 +143,13 @@
 }
 
 @media (max-width: 520px) {
+  .materialLibraryToolbar {
+    width: 100%;
+  }
+
   .materialLibraryToolbar__search {
     width: 100%;
-    max-width: 220px;
+    max-width: none;
   }
 
   .materialLibrary__grid {

src/pages/Create/panels/InspirationLibraryPanel/index.scss

@@ -34,3 +34,21 @@
 .inspirationPanel__content_material {
   margin-top: 20px;
 }
+
+@media (max-width: 640px) {
+  .inspirationPanel__toolbarExtra {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 10px;
+  }
+
+  .inspirationPanel__filters {
+    width: 100%;
+    overflow-x: auto;
+    scrollbar-width: none;
+  }
+
+  .inspirationPanel__filters::-webkit-scrollbar {
+    display: none;
+  }
+}

src/pages/Create/panels/MyCreationsPanel/index.scss

@@ -25,7 +25,7 @@
 
 .createPage__myCreationsList {
   display: grid;
-  grid-template-columns: repeat(auto-fill, 219px);
+  grid-template-columns: repeat(auto-fill, minmax(180px, 219px));
   gap: 15px;
   align-items: start;
   justify-content: start;
@@ -34,19 +34,19 @@
   list-style: none;
 }
 
-.createPage__myCreationsList>.assetGalleryTile {
+.createPage__myCreationsList > .assetGalleryTile {
   width: 219px;
   height: 219px;
   margin-bottom: 0;
   border-radius: 26px;
 }
 
-.createPage__myCreationsList>.assetGalleryTile .assetGalleryTile__thumb,
-.createPage__myCreationsList>.assetGalleryTile .assetGalleryTile__poster {
+.createPage__myCreationsList > .assetGalleryTile .assetGalleryTile__thumb,
+.createPage__myCreationsList > .assetGalleryTile .assetGalleryTile__poster {
   border-radius: 26px;
 }
 
-.createPage__myCreationsList>.assetGalleryTile_pending {
+.createPage__myCreationsList > .assetGalleryTile_pending {
   border-radius: 26px;
 }
 
@@ -102,13 +102,13 @@
 @media (max-width: 560px) {
   .createPage__myCreationsList {
     width: 100%;
-    grid-template-columns: repeat(auto-fill, 182px);
+    grid-template-columns: repeat(2, minmax(0, 1fr));
     justify-content: center;
   }
 
-  .createPage__myCreationsList>.assetGalleryTile,
+  .createPage__myCreationsList > .assetGalleryTile,
   .createPage__myCreationsItem {
-    width: 182px;
+    width: 100%;
     height: auto;
     aspect-ratio: 1;
   }
@@ -134,4 +134,4 @@
   .createPage__batchBtn {
     align-self: flex-end;
   }
-}
+}

src/pages/Create/panels/MyFavoritePanel/index.scss

@@ -4,9 +4,9 @@
 }
 
 .myFavoritePanel__list {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: stretch;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(180px, 219px));
+  align-items: start;
   gap: 15px;
   margin: 0;
   padding: 0;
@@ -25,7 +25,6 @@
   cursor: pointer;
   background: #f2f3f5;
   box-sizing: border-box;
-  flex-shrink: 0;
 }
 
 .myFavoritePanel__item:focus-visible {
@@ -77,7 +76,15 @@
 @media (max-width: 900px) {
   .myFavoritePanel__item,
   .myFavoritePanel__list .assetGalleryTile {
-    width: 160px;
-    height: 160px;
+    width: 100%;
+    height: auto;
+    aspect-ratio: 1 / 1;
+  }
+}
+
+@media (max-width: 560px) {
+  .myFavoritePanel__list {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    justify-content: center;
   }
 }

src/pages/Profile/index.scss

@@ -491,3 +491,115 @@
     }
   }
 }
+
+@media (max-width: 640px) {
+  .profilePage {
+    .profilePage__content {
+      padding: 12px 12px 112px;
+
+      .profilePage__hero {
+        .profilePage__card {
+          min-height: 0;
+          padding: 96px 14px 16px;
+          border-radius: 20px;
+
+          .profilePage__identity {
+            top: 24px;
+            left: 96px;
+            right: 14px;
+
+            .profilePage__nameRow {
+              flex-wrap: wrap;
+              gap: 4px 6px;
+
+              .profilePage__name {
+                max-width: 100%;
+                height: auto;
+                font-size: 20px;
+                line-height: 24px;
+              }
+            }
+          }
+
+          .profilePage__stats {
+            width: 100%;
+            display: grid;
+            grid-template-columns: repeat(2, minmax(0, 1fr));
+            gap: 8px 12px;
+
+            .profilePage__statItem {
+              min-width: 0;
+
+              .profilePage__statValue {
+                font-size: 18px;
+              }
+
+              .profilePage__statLabel {
+                min-width: 0;
+                overflow: hidden;
+                text-overflow: ellipsis;
+              }
+            }
+          }
+
+          .profilePage__editButton {
+            position: static;
+            width: auto;
+            margin-top: 14px;
+          }
+        }
+      }
+
+      .profilePage__toolbar {
+        align-items: stretch;
+
+        .profilePage__tabs {
+          gap: 6px;
+
+          .profilePage__tab.tabPill {
+            width: auto;
+            min-width: 76px;
+            padding: 4px 14px;
+          }
+        }
+
+        .profilePage__toolbarRight {
+          width: 100%;
+          margin-left: 0;
+          justify-content: flex-end;
+          overflow-x: auto;
+          scrollbar-width: none;
+        }
+
+        .profilePage__toolbarRight::-webkit-scrollbar {
+          display: none;
+        }
+      }
+    }
+  }
+}
+
+@media (max-width: 480px) {
+  .profilePage {
+    .profilePage__content {
+      .profilePage__hero {
+        .profilePage__card {
+          padding-top: 88px;
+
+          .profilePage__identity {
+            left: 82px;
+          }
+
+          .profilePage__stats {
+            grid-template-columns: minmax(0, 1fr);
+          }
+        }
+
+        .profilePage__avatar {
+          width: 58px;
+          height: 58px;
+        }
+      }
+    }
+  }
+}