feat(web): 手机端排版适配 — 媒体查询 + 抽屉式侧栏 + 过滤区 wrap

frontend/src/views/ArticleDetail.vue

@@ -114,7 +114,7 @@ onMounted(load)
         <NCard class="article-detail-card">
           <NSpace vertical :size="14">
             <!-- tag 行 -->
-            <NSpace align="center" :size="6" :wrap="false" style="overflow: hidden">
+            <NSpace align="center" :size="6" :wrap="true" style="row-gap: 6px">
               <NTag type="primary" :bordered="false" round>{{ article.source.name }}</NTag>
               <NTag v-if="article.lang_src" :bordered="false" round>{{ article.lang_src.toUpperCase() }}</NTag>
               <NTag v-if="article.translation_status !== 'ok'" size="small" type="warning" :bordered="false" round>
@@ -126,7 +126,7 @@ onMounted(load)
               <NTag v-for="c in categories" :key="c" type="success" size="small" :bordered="false" round>
                 {{ c }}
               </NTag>
-              <NText :depth="3" style="font-size: 12px; margin-left: auto">
+              <NText :depth="3" style="font-size: 12px; margin-left: auto" class="detail-time-label">
                 {{ fmtTime(publishedAt) }}
               </NText>
             </NSpace>
@@ -148,7 +148,7 @@ onMounted(load)
             </div>
 
             <!-- 操作按钮行 -->
-            <NSpace :size="8" :wrap="false">
+            <NSpace :size="8" :wrap="true" style="row-gap: 8px">
               <NButton
                 :type="starred ? 'warning' : 'primary'"
                 :ghost="!starred"
@@ -304,4 +304,16 @@ onMounted(load)
   border-radius: 8px;
   background: var(--color-surface-variant);
 }
+
+@media (max-width: 768px) {
+  .detail-time-label {
+    margin-left: 0 !important;
+    width: 100%;
+    text-align: right;
+  }
+  /* 详情页头部操作按钮在手机上等宽更整齐 */
+  :deep(.n-card .n-space) {
+    flex-wrap: wrap;
+  }
+}
 </style>