fix: 优化集数定位规则响应式布局

src/views/system/WordsView.vue

@@ -356,9 +356,9 @@ onMounted(() => {
   <VRow>
     <VCol cols="12">
       <VCard>
-        <VCardItem>
+        <VCardItem class="episode-rule-section-header">
           <template #append>
-            <VBtn color="primary" @click="addEpisodeRule" prepend-icon="mdi-plus">
+            <VBtn color="primary" class="episode-rule-add-btn" prepend-icon="mdi-plus" @click="addEpisodeRule">
               {{ t('setting.words.episodeFormatRuleAdd') }}
             </VBtn>
           </template>
@@ -376,21 +376,24 @@ onMounted(() => {
           >
             <template #item="{ element, index }">
               <VCard variant="outlined" class="episode-rule-card">
-                <VCardText class="py-4">
+                <VCardText class="episode-rule-card-content">
-                  <div class="episode-rule-row d-flex align-center gap-2">
+                  <div class="episode-rule-row">
-                    <IconBtn
+                    <div class="episode-rule-toolbar">
-                      icon="mdi-drag"
+                      <IconBtn
-                      variant="text"
+                        icon="mdi-drag"
-                      size="small"
+                        variant="text"
-                      class="episode-rule-control episode-rule-drag cursor-move flex-0-0"
+                        size="small"
-                    />
+                        class="episode-rule-drag cursor-move"
-                    <VCheckbox
+                      />
-                      v-model="element.enabled"
+                      <VCheckbox
-                      color="primary"
+                        v-model="element.enabled"
-                      density="compact"
+                        color="primary"
-                      hide-details
+                        density="compact"
-                      class="episode-rule-control episode-rule-enabled flex-0-0"
+                        hide-details
-                    />
+                        :label="t('common.enable')"
+                        class="episode-rule-enabled"
+                      />
+                    </div>
                     <div class="episode-rule-field episode-rule-name">
                       <VTextField
                         v-model="element.name"
@@ -424,10 +427,11 @@ onMounted(() => {
                       variant="text"
                       size="small"
                       color="error"
-                      class="episode-rule-control episode-rule-delete flex-0-0"
+                      class="episode-rule-delete"
-                      @click="deleteEpisodeRule(index)"
+                      @click.stop="deleteEpisodeRule(index)"
                     >
                       <VIcon icon="mdi-delete" />
+                      <VTooltip activator="parent" location="top">{{ t('common.delete') }}</VTooltip>
                     </IconBtn>
                   </div>
                 </VCardText>
@@ -455,63 +459,149 @@ onMounted(() => {
 </template>
 
 <style scoped>
+.episode-rule-section-header {
+  align-items: flex-start;
+}
+
+.episode-rule-add-btn {
+  flex-shrink: 0;
+}
+
 .episode-rule-card {
   border-color: rgba(var(--v-border-color), var(--v-border-opacity));
 }
 
+.episode-rule-card-content {
+  padding: 1rem;
+}
+
 .episode-rule-row {
-  flex-wrap: nowrap;
+  display: grid;
+  grid-template-columns: max-content minmax(8rem, 0.9fr) minmax(18rem, 3fr) minmax(8rem, 0.7fr) max-content;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.episode-rule-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  min-inline-size: 4.75rem;
+}
+
+.episode-rule-drag,
+.episode-rule-delete {
+  flex: 0 0 auto;
+}
+
+.episode-rule-enabled {
+  flex: 0 0 auto;
+}
+
+.episode-rule-enabled :deep(.v-label) {
+  display: none;
+}
+
+.episode-rule-field {
+  min-inline-size: 0;
 }
 
 .episode-rule-name {
-  flex: 0.8 1 9rem;
+  min-inline-size: 0;
-  min-inline-size: 7rem;
 }
 
 .episode-rule-pattern {
-  flex: 3.7 1 26rem;
   min-inline-size: 0;
 }
 
 .episode-rule-size {
-  flex: 0 0 8rem;
+  min-inline-size: 0;
-  min-inline-size: 8rem;
 }
 
 @media (width <= 959px) {
-  .episode-rule-row {
+  .episode-rule-section-header {
-    flex-wrap: wrap;
+    display: grid;
-    align-items: flex-start !important;
+    grid-template-areas:
+      "content"
+      "append";
+    grid-template-columns: minmax(0, 1fr);
+    gap: 1rem;
   }
 
-  .episode-rule-drag {
+  .episode-rule-section-header :deep(.v-card-item__content) {
-    order: 1;
+    grid-area: content;
+  }
+
+  .episode-rule-section-header :deep(.v-card-item__append) {
+    grid-area: append;
+    justify-self: stretch;
+    margin-inline-start: 0;
+  }
+
+  .episode-rule-add-btn {
+    inline-size: 100%;
+  }
+
+  .episode-rule-row {
+    grid-template-columns: minmax(0, 1fr) minmax(7rem, 0.42fr) max-content;
+    grid-template-areas:
+      "toolbar toolbar delete"
+      "name size size"
+      "pattern pattern pattern";
+    align-items: start;
+    gap: 0.875rem;
+  }
+
+  .episode-rule-toolbar {
+    grid-area: toolbar;
+    min-block-size: 2.5rem;
+    min-inline-size: 0;
   }
 
   .episode-rule-enabled {
-    order: 2;
+    margin-inline-start: 0.125rem;
+  }
+
+  .episode-rule-enabled :deep(.v-label) {
+    display: inline-flex;
+    opacity: var(--v-medium-emphasis-opacity);
   }
 
   .episode-rule-delete {
-    order: 3;
+    grid-area: delete;
-    margin-inline-start: auto;
+    align-self: center;
   }
 
   .episode-rule-name {
-    flex: 1 1 calc(50% - 0.25rem);
+    grid-area: name;
-    order: 4;
-    min-inline-size: 0;
   }
 
   .episode-rule-size {
-    flex: 1 1 calc(50% - 0.25rem);
+    grid-area: size;
-    order: 5;
-    min-inline-size: 0;
   }
 
   .episode-rule-pattern {
-    flex: 1 1 100%;
+    grid-area: pattern;
-    order: 6;
+  }
+}
+
+@media (width <= 599px) {
+  .episode-rule-card-content {
+    padding: 0.875rem;
+  }
+
+  .episode-rule-row {
+    grid-template-columns: minmax(0, 1fr) max-content;
+    grid-template-areas:
+      "toolbar delete"
+      "name name"
+      "pattern pattern"
+      "size size";
+    gap: 0.75rem;
+  }
+
+  .episode-rule-field :deep(.v-field__input) {
+    min-block-size: 2.75rem;
   }
 }
 </style>