feat: 收口移动端侧栏与创作拆解页布局

src/features/breakdown/components/SubjectList.vue

@@ -24,7 +24,8 @@ const filtered = computed(() =>
 </script>
 
 <template>
-    <div class="p-5 lg:p-7">
+    <div class="subject-list">
+        <!-- 以下是主体搜索 -->
         <div class="subject-list-toolbar">
             <NInput
                 class="subject-list-search"
@@ -139,6 +140,14 @@ const filtered = computed(() =>
 .subject-details[open] summary svg {
     @apply rotate-180;
 }
+.subject-list {
+    @apply p-5;
+}
+@media (min-width: 1024px) {
+    .subject-list {
+        @apply p-7;
+    }
+}
 .subject-list-toolbar {
     @apply flex flex-wrap items-center justify-start gap-y-2.5 gap-x-3 mb-5;
 }
@@ -148,4 +157,15 @@ const filtered = computed(() =>
 .subject-list-count {
     @apply shrink-0 text-muted text-xs whitespace-nowrap;
 }
+@media (max-width: 800px) {
+    .subject-list {
+        @apply p-3;
+    }
+    .subject-list-toolbar {
+        @apply flex-nowrap gap-2 mb-3;
+    }
+    .subject-list-search.n-input {
+        @apply flex-1 max-w-none;
+    }
+}
 </style>