feat: 收口组件样式并调整移动端侧栏

src/features/subject-images/SubjectImagesPage.vue

@@ -739,3 +739,118 @@ async function showStaleForms() {
                 @changed="refreshAssets" /></template
     ></WorkspacePage>
 </template>
+
+<style>
+/* 本组件专属布局与 Naive 内部结构覆盖。 */
+@reference "../../styles/styles.css";
+.form-image-grid {
+    @apply grid grid-cols-[repeat(auto-fill,_minmax(min(260px,_100%),_1fr))] gap-5;
+}
+.form-image-card {
+    @apply overflow-hidden;
+}
+.gallery-workspace-page .workspace-scroll-content {
+    @apply pt-2;
+}
+.gallery-workspace-page .gallery-sticky-controls {
+    @apply sticky top-0 z-10 bg-(--app-body) mt-2.5 mb-0;
+}
+.gallery-workspace-page .form-image-grid {
+    @apply pt-3;
+}
+.gallery-workspace-page .form-image-masonry {
+    @apply block columns-[260px] gap-x-5;
+}
+.form-image-masonry > .form-image-card {
+    @apply break-inside-avoid mb-5;
+}
+.form-image-masonry .asset-image {
+    @apply aspect-[var(--form-image-aspect,4/3)];
+}
+.gallery-sticky-controls > .form-image-filter-region {
+    @apply my-0;
+}
+.gallery-workspace-page .workspace-scroll > .n-scrollbar-container {
+    @apply [overflow-anchor:none];
+}
+.form-image-filter-region {
+    @apply my-4 py-3.5 px-4 bg-(--app-subtle);
+    container-type: inline-size;
+}
+.form-image-toolbar {
+    @apply grid grid-cols-[minmax(0,_1fr)] items-center gap-y-3 gap-x-4;
+}
+.form-image-toolbar.has-impact-picker {
+    @apply grid-cols-[minmax(220px,_340px)_minmax(0,_1fr)];
+}
+.form-image-toolbar.has-impact-picker.has-impact-actions {
+    @apply grid-cols-[minmax(260px,_420px)_minmax(0,_1fr)];
+}
+.asset-impact-picker {
+    @apply flex items-center gap-2 min-w-0;
+}
+.asset-impact-picker .asset-impact-select {
+    @apply flex-1;
+}
+.form-image-toolbar > * {
+    @apply min-w-0;
+}
+.form-image-filters {
+    @apply grid grid-cols-[minmax(200px,_360px)_152px_minmax(260px,_1fr)_auto] items-center gap-y-3 gap-x-4;
+}
+.form-image-filters > * {
+    @apply min-w-0;
+}
+.filter-toggles {
+    @apply flex items-center flex-wrap gap-y-2.5 gap-x-4 text-xs;
+}
+.filter-toggles .n-checkbox__label {
+    @apply whitespace-nowrap;
+}
+.filter-result-count {
+    @apply justify-self-end text-muted text-xs whitespace-nowrap;
+}
+.form-image-display-controls {
+    @apply flex items-center justify-self-end gap-3;
+}
+.gallery-layout-switch {
+    @apply flex items-center gap-1;
+}
+@container (max-width: 1200px) {
+    .form-image-toolbar.has-impact-picker,
+    .form-image-toolbar.has-impact-picker.has-impact-actions {
+        @apply grid-cols-[minmax(0,_1fr)];
+    }
+}
+@container (max-width: 900px) {
+    .form-image-filters {
+        @apply grid-cols-[minmax(0,_1fr)_152px];
+    }
+    .form-image-display-controls {
+        @apply col-[1/-1];
+    }
+}
+@container (max-width: 460px) {
+    .form-image-filters {
+        @apply grid-cols-[minmax(0,_1fr)_120px] gap-x-2.5;
+    }
+}
+.asset-impact-context {
+    @apply flex flex-col gap-2.5 py-[5px] px-4 bg-(--app-subtle) m-0 min-w-0;
+}
+.asset-impact-links-scroll.n-scrollbar {
+    @apply h-auto min-w-0 max-w-full;
+}
+.asset-impact-links {
+    @apply flex items-center gap-3 w-max whitespace-nowrap min-h-8 py-1.5;
+}
+.asset-impact-links > * {
+    @apply shrink-0;
+}
+.asset-impact-select {
+    @apply min-w-0 w-full;
+}
+.form-image-card-focused {
+    @apply shadow-[inset_3px_0_0_var(--app-accent-text)];
+}
+</style>