fix(kb): improve knowledge base responsive layout

Author: lxfight

dashboard/src/views/knowledge-base/KBDetail.vue

@@ -16,7 +16,7 @@
     <!-- 主内容 -->
     <div v-else class="kb-content">
       <!-- 标签页 -->
-      <v-tabs v-model="activeTab" class="mb-6" color="primary">
+      <v-tabs v-model="activeTab" class="kb-tabs mb-6" color="primary" show-arrows>
         <v-tab value="overview">
           <v-icon start>mdi-information-outline</v-icon>
           {{ t('tabs.overview') }}
@@ -247,9 +247,14 @@ watch(
 
 <style scoped>
 .kb-detail-page {
+  min-width: 0;
   width: 100%;
 }
 
+.kb-tabs {
+  max-width: 100%;
+}
+
 .kb-detail-page :deep(.v-card--variant-outlined) {
   background: rgb(var(--v-theme-surface));
 }
@@ -290,6 +295,11 @@ watch(
 
 /* 响应式设计 */
 @media (max-width: 768px) {
+  .kb-tabs :deep(.v-tab) {
+    min-width: max-content;
+    padding-inline: 12px;
+  }
+
   .kb-title {
     font-size: 1.25rem;
   }

dashboard/src/views/knowledge-base/KBList.vue

@@ -93,7 +93,7 @@
         v-if="total > pageSize"
         v-model="page"
         :length="Math.ceil(total / pageSize)"
-        :total-visible="7"
+        :total-visible="xs ? 3 : 7"
         class="mt-4"
         @update:model-value="loadKnowledgeBases()"
       />
@@ -277,12 +277,14 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
+import { useDisplay } from 'vuetify'
 import { knowledgeApi, providerApi } from '@/api/v1'
 import { useModuleI18n } from '@/i18n/composables'
 import OutlinedActionListItem from '@/components/shared/OutlinedActionListItem.vue'
 
 const { tm: t } = useModuleI18n('features/knowledge-base/index')
 const router = useRouter()
+const { xs } = useDisplay()
 
 // 状态
 const loading = ref(false)
@@ -530,6 +532,7 @@ onMounted(() => {
 
 <style scoped>
 .kb-list-page {
+  padding-bottom: 144px;
   width: 100%;
 }
 
@@ -685,6 +688,16 @@ onMounted(() => {
 
 /* 响应式设计 */
 @media (max-width: 768px) {
+  .kb-list-page {
+    padding-bottom: 132px;
+  }
+
+  .kb-fab-stack {
+    bottom: calc(20px + env(safe-area-inset-bottom));
+    gap: 12px;
+    right: 20px;
+  }
+
   .emoji-grid {
     grid-template-columns: repeat(6, 1fr);
   }

dashboard/src/views/knowledge-base/components/DocumentsTab.vue

@@ -11,7 +11,7 @@
 
     <!-- 文档列表 -->
     <v-card variant="outlined">
-      <v-data-table-server :headers="headers" :items="documents" :loading="loading"
+      <v-data-table-server class="documents-table" :headers="headers" :items="documents" :loading="loading"
         :items-per-page="pageSize" :page="page" :items-length="total"
         @update:page="onPageChange" @update:items-per-page="onItemsPerPageChange">
         <template #item.doc_name="{ item }">
@@ -897,5 +897,25 @@ onUnmounted(() => {
   .action-bar>* {
     width: 100%;
   }
+
+  .documents-table :deep(.v-data-table-footer) {
+    justify-content: center;
+    padding: 12px 8px;
+    row-gap: 8px;
+  }
+
+  .documents-table :deep(.v-data-table-footer__items-per-page) {
+    flex: 1 1 100%;
+    justify-content: space-between;
+  }
+
+  .documents-table :deep(.v-data-table-footer__info) {
+    min-width: 0;
+    padding: 0 8px;
+  }
+
+  .documents-table :deep(.v-data-table-footer__pagination) {
+    margin-inline-start: 0;
+  }
 }
 </style>

dashboard/src/views/knowledge-base/components/RetrievalTab.vue

@@ -57,25 +57,25 @@
 
         <!-- 检索结果 -->
         <div v-if="hasSearched" class="results-section">
-          <div class="d-flex align-center mb-4">
+          <div class="results-heading d-flex align-center mb-4">
             <h3 class="text-h6">{{ t('retrieval.results') }}</h3>
-            <v-chip class="ml-3" color="primary" variant="tonal" size="small">
+            <v-chip color="primary" variant="tonal" size="small">
               {{ results.length }} {{ t('retrieval.results') }}
             </v-chip>
           </div>
 
           <!-- 结果列表 -->
           <div v-if="results.length > 0" class="results-list">
             <v-card v-for="(result, index) in results" :key="result.chunk_id" variant="outlined" class="mb-4">
-              <v-card-title class="d-flex align-center pa-2">
-                <v-chip size="x-small" color="primary" class="mr-2">
+              <v-card-title class="result-card-header d-flex align-center pa-2">
+                <v-chip size="x-small" color="primary">
                   #{{ index + 1 }}
                 </v-chip>
-                <span class="text-subtitle-1">
+                <span class="result-title text-subtitle-1">
                   {{ t('retrieval.chunk', { index: result.chunk_index }) }}
                 </span>
-                <div class="ml-4">
-                  <v-chip size="x-small" variant="tonal" class="mr-2">
+                <div class="result-meta ml-2">
+                  <v-chip size="x-small" variant="tonal" class="result-document-chip">
                     <v-icon start size="small">mdi-file-document</v-icon>
                     {{ result.doc_name }}
                   </v-chip>
@@ -85,7 +85,7 @@
                   </v-chip>
                 </div>
                 <v-spacer />
-                <v-chip size="x-small" :color="getScoreColor(result.score)">
+                <v-chip class="result-score" size="x-small" :color="getScoreColor(result.score)">
                   {{ t('retrieval.score') }}: {{ result.score.toFixed(4) }}
                 </v-chip>
               </v-card-title>
@@ -240,4 +240,64 @@ const getScoreColor = (score: number) => {
   overflow-y: auto;
   font-size: 13px;
 }
+
+.result-card-header,
+.result-meta {
+  gap: 8px;
+}
+
+.results-heading {
+  gap: 12px;
+}
+
+.result-meta {
+  align-items: center;
+  display: flex;
+  min-width: 0;
+}
+
+.result-document-chip {
+  max-width: min(280px, 40vw);
+}
+
+.result-document-chip :deep(.v-chip__content) {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@media (max-width: 768px) {
+  .result-card-header {
+    align-items: flex-start !important;
+    flex-wrap: wrap;
+  }
+
+  .result-title {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  .result-meta {
+    flex: 1 1 100%;
+    flex-wrap: wrap;
+    margin-left: 0 !important;
+    order: 2;
+  }
+
+  .result-document-chip {
+    max-width: 100%;
+  }
+
+  .result-score {
+    margin-left: auto;
+  }
+
+  .results-heading {
+    flex-wrap: wrap;
+  }
+
+  .results-heading .v-chip {
+    margin-left: 0 !important;
+  }
+}
 </style>