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>

frontend/src/views/Feed.vue

@@ -116,22 +116,22 @@ onMounted(async () => {
 
 <template>
   <NSpace vertical :size="16">
-    <NSpace align="center" justify="space-between">
-      <NSpace :size="10">
+    <NSpace align="center" justify="space-between" :wrap="true" :size="[10, 10]" class="feed-toolbar">
+      <NSpace :size="10" :wrap="true" class="feed-toolbar-left">
         <NSelect
           v-model:value="sourceFilter"
           multiple
           clearable
           placeholder="按源筛选"
           :options="sourceOptions"
-          style="min-width: 240px"
+          class="feed-source-select"
           @update:value="resetToFirstPage"
         />
-        <NInput v-model:value="q" placeholder="关键词搜索" clearable style="width: 220px"
+        <NInput v-model:value="q" placeholder="关键词搜索" clearable class="feed-search-input"
                 @keyup.enter="resetToFirstPage" @clear="resetToFirstPage" />
-        <NButton type="primary" @click="resetToFirstPage">刷新</NButton>
+        <NButton type="primary" @click="resetToFirstPage" round>刷新</NButton>
       </NSpace>
-      <NText :depth="3" style="font-size: 13px">{{ itemsLabel }}</NText>
+      <NText :depth="3" style="font-size: 13px" class="feed-count-label">{{ itemsLabel }}</NText>
     </NSpace>
 
     <NSpin :show="loading && items.length === 0">
@@ -147,7 +147,7 @@ onMounted(async () => {
         >
           <NSpace vertical :size="10">
             <!-- 顶行:源 / 语言 / 分类 tag / 时间 -->
-            <NSpace align="center" :size="6" :wrap="false" style="overflow: hidden">
+            <NSpace align="center" :size="6" :wrap="true" style="row-gap: 6px">
               <NTag size="small" type="primary" :bordered="false" round>
                 {{ a.source.name }}
               </NTag>
@@ -167,7 +167,7 @@ onMounted(async () => {
               >
                 {{ c }}
               </NTag>
-              <NText :depth="3" style="font-size: 12px; margin-left: auto">
+              <NText :depth="3" style="font-size: 12px; margin-left: auto" class="feed-time-label">
                 {{ fmtTime(a.published_at || a.fetched_at) }}
               </NText>
             </NSpace>
@@ -282,4 +282,39 @@ onMounted(async () => {
   font-size: 13px;
   line-height: 1.7;
 }
+
+/* ===== 桌面端默认宽度 ===== */
+.feed-source-select {
+  min-width: 240px;
+}
+.feed-search-input {
+  width: 220px;
+}
+
+/* ===== 移动端(<= 768px):过滤条全宽,允许换行 ===== */
+@media (max-width: 768px) {
+  .feed-source-select {
+    min-width: 0;
+    width: 100%;
+  }
+  .feed-search-input {
+    width: 100%;
+  }
+  .feed-toolbar-left > * {
+    width: 100%;
+  }
+  .feed-count-label {
+    display: block;
+    width: 100%;
+    margin-top: 4px;
+  }
+  .feed-toolbar {
+    align-items: stretch !important;
+  }
+  .feed-time-label {
+    margin-left: 0 !important;
+    width: 100%;
+    text-align: right;
+  }
+}
 </style>