style(ArticleMasonry): improve panel layout and responsiveness, enhance transition effects

.vitepress/theme/components/ArticleMasonry.vue

@@ -253,93 +253,95 @@ const clearTags = () => {
           </div>
 
           <Transition name="expand" mode="out-in">
-            <aside v-if="isSettingsOpen" ref="settingsPanelRef" class="panel">
-              <div class="section">
-                <div class="section-header">
-                  <h6>排序</h6>
-                </div>
-                <div class="page-size-options">
-                  <MaterialButton
-                    :color="sortField === 'date' ? 'filled' : 'tonal'"
-                    size="s"
-                    class="group horizontal"
-                    icon="acute"
-                    @click="sortField = 'date'"
-                  >
-                    时间
-                  </MaterialButton>
-                  <MaterialButton
-                    :color="sortField === 'title' ? 'filled' : 'tonal'"
-                    size="s"
-                    class="group horizontal"
-                    icon="match_case"
-                    @click="sortField = 'title'"
-                  >
-                    标题
-                  </MaterialButton>
-                  <div>
+            <aside v-if="isSettingsOpen" class="panel">
+              <div ref="settingsPanelRef" class="container">
+                <div class="section">
+                  <div class="section-header">
+                    <h6>排序</h6>
+                  </div>
+                  <div class="page-size-options">
                     <MaterialButton
-                      :icon="sortOrder === 'asc' ? 'arrow_upward' : 'arrow_downward'"
-                      color="tonal"
+                      :color="sortField === 'date' ? 'filled' : 'tonal'"
                       size="s"
-                      @click="sortOrder = sortOrder === 'asc' ? 'desc' : 'asc'"
+                      class="group horizontal"
+                      icon="acute"
+                      @click="sortField = 'date'"
                     >
-                      {{ sortOrder === "asc" ? "正序" : "倒序" }}
+                      时间
+                    </MaterialButton>
+                    <MaterialButton
+                      :color="sortField === 'title' ? 'filled' : 'tonal'"
+                      size="s"
+                      class="group horizontal"
+                      icon="match_case"
+                      @click="sortField = 'title'"
+                    >
+                      标题
+                    </MaterialButton>
+                    <div>
+                      <MaterialButton
+                        :icon="sortOrder === 'asc' ? 'arrow_upward' : 'arrow_downward'"
+                        color="tonal"
+                        size="s"
+                        @click="sortOrder = sortOrder === 'asc' ? 'desc' : 'asc'"
+                      >
+                        {{ sortOrder === "asc" ? "正序" : "倒序" }}
+                      </MaterialButton>
+                    </div>
+                  </div>
+                </div>
+
+                <div class="section">
+                  <div class="section-header">
+                    <h6>每页显示</h6>
+                  </div>
+                  <div class="page-size-options">
+                    <MaterialButton
+                      v-for="opt in pageSizeOptions"
+                      :key="opt"
+                      :color="pageSize === opt ? 'filled' : 'tonal'"
+                      :icon="pageSize === opt ? 'check' : ''"
+                      class="group horizontal"
+                      size="s"
+                      @click="pageSize = opt"
+                    >
+                      {{ opt }}
                     </MaterialButton>
                   </div>
                 </div>
-              </div>
 
-              <div class="section">
-                <div class="section-header">
-                  <h6>每页显示</h6>
+                <div class="section">
+                  <div class="section-header">
+                    <h6>分类 <span v-if="selectedCategory" @click="selectedCategory = ''">clear</span></h6>
+                  </div>
+                  <div class="chip-container">
+                    <MaterialChip
+                      v-for="cat in postsStore.allCategories"
+                      :key="cat"
+                      :color="selectedCategory === cat ? 'tonal' : 'outlined'"
+                      :icon="selectedCategory === cat ? 'check' : ''"
+                      @click="toggleCategory(cat)"
+                    >
+                      {{ cat }}
+                    </MaterialChip>
+                  </div>
                 </div>
-                <div class="page-size-options">
-                  <MaterialButton
-                    v-for="opt in pageSizeOptions"
-                    :key="opt"
-                    :color="pageSize === opt ? 'filled' : 'tonal'"
-                    :icon="pageSize === opt ? 'check' : ''"
-                    class="group horizontal"
-                    size="s"
-                    @click="pageSize = opt"
-                  >
-                    {{ opt }}
-                  </MaterialButton>
-                </div>
-              </div>
 
-              <div class="section">
-                <div class="section-header">
-                  <h6>分类 <span v-if="selectedCategory" @click="selectedCategory = ''">clear</span></h6>
-                </div>
-                <div class="chip-container">
-                  <MaterialChip
-                    v-for="cat in postsStore.allCategories"
-                    :key="cat"
-                    :color="selectedCategory === cat ? 'tonal' : 'outlined'"
-                    :icon="selectedCategory === cat ? 'check' : ''"
-                    @click="toggleCategory(cat)"
-                  >
-                    {{ cat }}
-                  </MaterialChip>
-                </div>
-              </div>
-
-              <div class="section">
-                <div class="section-header">
-                  <h6>标签 <span v-if="selectedTags.length" @click="clearTags">clear</span></h6>
-                </div>
-                <div class="chip-container">
-                  <MaterialChip
-                    v-for="tag in postsStore.allTags"
-                    :key="tag"
-                    :color="selectedTags.includes(tag) ? 'tonal' : 'outlined'"
-                    :icon="selectedTags.includes(tag) ? 'check' : ''"
-                    @click="toggleTag(tag)"
-                  >
-                    {{ tag }}
-                  </MaterialChip>
+                <div class="section">
+                  <div class="section-header">
+                    <h6>标签 <span v-if="selectedTags.length" @click="clearTags">clear</span></h6>
+                  </div>
+                  <div class="chip-container">
+                    <MaterialChip
+                      v-for="tag in postsStore.allTags"
+                      :key="tag"
+                      :color="selectedTags.includes(tag) ? 'tonal' : 'outlined'"
+                      :icon="selectedTags.includes(tag) ? 'check' : ''"
+                      @click="toggleTag(tag)"
+                    >
+                      {{ tag }}
+                    </MaterialChip>
+                  </div>
                 </div>
               </div>
             </aside>

.vitepress/theme/styles/components/ArticleMasonry.scss

@@ -20,28 +20,32 @@
       position: relative;
 
       .panel {
-        display: flex;
-        flex-direction: column;
-        gap: 24px;
-
         position: absolute;
         left: -12px;
         top: -12px;
 
-        padding: 24px;
-
-        max-width: 520px;
-        min-width: 340px;
-
-        border-radius: var(--md-sys-shape-corner-extra-large);
-
-        background-color: var(--md-sys-color-surface-container-low);
-
-        box-shadow: 0px 1px 6px -3px var(--md-sys-color-shadow);
-        overflow-y: overlay;
-        transform-origin: 0px 0px;
+        transform-origin: top left;
         z-index: 100;
 
+        .container {
+          display: flex;
+          flex-direction: column;
+          gap: 24px;
+
+          padding: 24px;
+
+          max-width: 520px;
+          min-width: 340px;
+
+          border-radius: var(--md-sys-shape-corner-extra-large);
+
+          background-color: var(--md-sys-color-surface-container-low);
+
+          box-shadow: 0px 1px 6px -3px var(--md-sys-color-shadow);
+          overflow-y: overlay;
+          transform-origin: top left;
+        }
+
         .section {
           h6 {
             display: inline-flex;
@@ -52,6 +56,9 @@
 
             margin-block-end: 12px;
 
+            user-select: none;
+            -moz-user-select: none;
+
             span {
               @include mixin.material-symbols($size: 16);
 
@@ -73,6 +80,36 @@
             gap: 4px;
           }
         }
+
+        @media screen and (max-width: 1600px) {
+          left: 0px;
+          top: 0px;
+        }
+
+        @media screen and (max-width: 840px) {
+          position: fixed;
+          left: 0px;
+          top: 0px;
+
+          height: 100%;
+          width: 100%;
+
+          backdrop-filter: brightness(0.5);
+          transform-origin: center center;
+          z-index: 999;
+
+          .container {
+            position: absolute;
+            left: 50%;
+            top: 50%;
+
+            max-width: 380px;
+            min-width: 330px;
+
+            transform-origin: center center;
+            translate: -50% -50%;
+          }
+        }
       }
     }
   }
@@ -148,20 +185,27 @@
 
   .expand-enter-active,
   .expand-leave-active {
-    transition:
-      transform var(--md-sys-motion-spring-default-spatial-duration) var(--md-sys-motion-spring-default-spatial),
-      opacity var(--md-sys-motion-spring-slow-effect-duration) var(--md-sys-motion-spring-slow-effect);
+    transition: opacity var(--md-sys-motion-spring-slow-effect-duration) var(--md-sys-motion-spring-slow-effect);
+
+    .container {
+      transition: transform var(--md-sys-motion-spring-default-spatial-duration) var(--md-sys-motion-spring-default-spatial);
+    }
   }
 
   .expand-enter-from,
   .expand-leave-to {
     opacity: 0;
     pointer-events: none;
-    transform: scale(0.8);
+
+    .container {
+      transform: scale(0.8);
+    }
   }
 
   .expand-enter-to,
   .expand-leave-from {
-    transform: scale(1);
+    .container {
+      transform: scale(1);
+    }
   }
 }