From ecaedf11966b1140073071677f260ef8c55e8d3d Mon Sep 17 00:00:00 2001
From: wizardchen <wizardchen@tencent.com>
Date: Fri, 26 Jun 2026 12:23:27 +0800
Subject: [PATCH] feat(frontend): unify document tag filter, manage drawer, and
 detail UX

Split tag filtering from CRUD management on the knowledge base document
page, align copy to "tags" across locales, and polish hover/detail surfaces
with setting-drawer section styling. Return tags from GetKnowledge for the
detail drawer.
---
 frontend/src/api/knowledge-base/index.ts      |   6 +-
 frontend/src/components/KBInfoPopover.vue     | 132 ++-
 frontend/src/components/doc-content.vue       | 760 +++++++-------
 .../src/components/settings/SettingDrawer.vue |   2 +-
 frontend/src/hooks/useKnowledgeBase.ts        |   5 +-
 frontend/src/i18n/locales/en-US.ts            |  45 +-
 frontend/src/i18n/locales/ko-KR.ts            |  45 +-
 frontend/src/i18n/locales/ru-RU.ts            |  45 +-
 frontend/src/i18n/locales/zh-CN.ts            |  45 +-
 frontend/src/stores/ui.ts                     |   4 +-
 .../src/views/knowledge/KnowledgeBase.vue     | 937 +++++++++---------
 .../knowledge/components/FAQEntryManager.vue  |  14 +-
 .../components/KbTagManageDrawer.vue          | 705 +++++++++++++
 .../components/TagEditDialog.test.ts          |   3 +
 .../knowledge/components/TagEditDialog.vue    |  33 +-
 internal/handler/knowledge.go                 |   9 +-
 16 files changed, 1847 insertions(+), 943 deletions(-)
 create mode 100644 frontend/src/views/knowledge/components/KbTagManageDrawer.vue

diff --git a/frontend/src/api/knowledge-base/index.ts b/frontend/src/api/knowledge-base/index.ts
index fcc72d30c..c638d8986 100644
--- a/frontend/src/api/knowledge-base/index.ts
+++ b/frontend/src/api/knowledge-base/index.ts
@@ -160,7 +160,7 @@ export function togglePinKnowledgeBase(id: string) {
 }
 
 // 知识文件 API（基于具体知识库）
-// data.tag_ids: 可选，指定知识所属的多个分类ID
+// data.tag_ids: 可选，指定知识所属的多个标签 ID
 export function uploadKnowledgeFile(
   kbId: string,
   data: {
@@ -188,7 +188,7 @@ export function uploadKnowledgeFile(
 }
 
 // 从URL创建知识
-// data.tag_ids: 可选，指定知识所属的多个分类ID
+// data.tag_ids: 可选，指定知识所属的多个标签 ID
 export function createKnowledgeFromURL(
   kbId: string,
   data: { url: string; enable_multimodel?: boolean; tag_ids?: string[]; process_config?: KnowledgeProcessOverrides },
@@ -197,7 +197,7 @@ export function createKnowledgeFromURL(
 }
 
 // 手工创建知识
-// data.tag_ids: 可选，指定知识所属的分类ID
+// data.tag_ids: 可选，指定知识所属的标签 ID
 export function createManualKnowledge(
   kbId: string,
   data: {
diff --git a/frontend/src/components/KBInfoPopover.vue b/frontend/src/components/KBInfoPopover.vue
index aff46e27f..8e98a4ee4 100644
--- a/frontend/src/components/KBInfoPopover.vue
+++ b/frontend/src/components/KBInfoPopover.vue
@@ -1,19 +1,20 @@
 <template>
-  <t-popup
-    v-if="kbInfo"
-    trigger="click"
-    placement="bottom-right"
-    :overlay-style="{ padding: 0 }"
-    :overlay-inner-style="{ padding: 0 }"
-  >
-    <template #content>
+  <t-tooltip :content="t('knowledgeBase.infoCard.tooltip')" placement="top">
+    <t-popup
+      v-if="kbInfo"
+      trigger="click"
+      placement="bottom-right"
+      :overlay-style="{ padding: 0 }"
+      :overlay-inner-style="{ padding: 0 }"
+    >
+      <template #content>
       <div class="kb-info-card">
         <div class="kb-info-card-header">{{ t('knowledgeBase.infoCard.title') }}</div>
         <div class="kb-info-card-body">
-          <div class="kb-info-card-section">
-            <div class="kb-info-card-section-title">
+          <section class="setting-drawer__section">
+            <h4 class="setting-drawer__section-title">
               {{ t('knowledgeBase.infoCard.basic') }}
-            </div>
+            </h4>
             <div class="kb-info-card-row">
               <span class="kb-info-card-label">{{ t('knowledgeBase.infoCard.type') }}</span>
               <span class="kb-info-card-value">
@@ -44,11 +45,11 @@
                 >.{{ ft }}</span>
               </span>
             </div>
-          </div>
-          <div class="kb-info-card-section">
-            <div class="kb-info-card-section-title">
+          </section>
+          <section class="setting-drawer__section">
+            <h4 class="setting-drawer__section-title">
               {{ t('knowledgeBase.infoCard.access') }}
-            </div>
+            </h4>
             <div class="kb-info-card-row">
               <span class="kb-info-card-label">{{ t('knowledgeBase.accessInfo.myRole') }}</span>
               <span class="kb-info-card-value">
@@ -75,11 +76,11 @@
                 {{ t('knowledgeList.sharedToOrgs', { count: kbInfo.share_count }) }}
               </span>
             </div>
-          </div>
-          <div v-if="capabilities.length" class="kb-info-card-section">
-            <div class="kb-info-card-section-title">
+          </section>
+          <section v-if="capabilities.length" class="setting-drawer__section">
+            <h4 class="setting-drawer__section-title">
               {{ t('knowledgeBase.infoCard.capabilities') }}
-            </div>
+            </h4>
             <div class="kb-info-card-row">
               <span class="kb-info-card-label">{{ t('knowledgeBase.infoCard.enabled') }}</span>
               <span class="kb-info-card-value">
@@ -94,11 +95,11 @@
                 </t-tag>
               </span>
             </div>
-          </div>
-          <div v-if="chunkingRows.length" class="kb-info-card-section">
-            <div class="kb-info-card-section-title">
+          </section>
+          <section v-if="chunkingRows.length" class="setting-drawer__section">
+            <h4 class="setting-drawer__section-title">
               {{ t('knowledgeBase.infoCard.chunking') }}
-            </div>
+            </h4>
             <div
               v-for="row in chunkingRows"
               :key="row.key"
@@ -107,11 +108,11 @@
               <span class="kb-info-card-label">{{ row.label }}</span>
               <span class="kb-info-card-value">{{ row.value }}</span>
             </div>
-          </div>
-          <div v-if="statRows.length" class="kb-info-card-section">
-            <div class="kb-info-card-section-title">
+          </section>
+          <section v-if="statRows.length" class="setting-drawer__section">
+            <h4 class="setting-drawer__section-title">
               {{ t('knowledgeBase.infoCard.stats') }}
-            </div>
+            </h4>
             <div
               v-for="stat in statRows"
               :key="stat.key"
@@ -120,14 +121,14 @@
               <span class="kb-info-card-label">{{ stat.label }}</span>
               <span class="kb-info-card-value kb-info-card-value-number">{{ stat.value }}</span>
             </div>
-          </div>
-          <div
+          </section>
+          <section
             v-if="kbInfo.vector_store_source || kbInfo.storage_provider_config?.provider"
-            class="kb-info-card-section"
+            class="setting-drawer__section"
           >
-            <div class="kb-info-card-section-title">
+            <h4 class="setting-drawer__section-title">
               {{ t('knowledgeBase.infoCard.binding') }}
-            </div>
+            </h4>
             <div v-if="kbInfo.vector_store_source" class="kb-info-card-row">
               <span class="kb-info-card-label">{{ t('knowledgeBase.infoCard.vectorStore') }}</span>
               <span class="kb-info-card-value">
@@ -148,20 +149,19 @@
                 {{ kbInfo.storage_provider_config.provider }}
               </span>
             </div>
-          </div>
+          </section>
         </div>
       </div>
     </template>
-    <t-tooltip :content="t('knowledgeBase.infoCard.tooltip')" placement="top">
-      <button
-        type="button"
-        class="kb-info-button"
-        :class="{ 'has-warning': kbInfo?.vector_store_status === 'unavailable' }"
-      >
-        <t-icon name="info-circle" size="16px" />
-      </button>
-    </t-tooltip>
+    <button
+      type="button"
+      class="kb-info-button"
+      :class="{ 'has-warning': kbInfo?.vector_store_status === 'unavailable' }"
+    >
+      <t-icon name="info-circle" size="16px" />
+    </button>
   </t-popup>
+  </t-tooltip>
 </template>
 
 <script setup lang="ts">
@@ -455,28 +455,52 @@ const statRows = computed<Array<{ key: string; label: string; value: number | st
   overflow-y: auto;
   margin: 0 -16px;
   padding: 0 16px;
+  display: flex;
+  flex-direction: column;
 }
 
-.kb-info-card-section + .kb-info-card-section {
-  margin-top: 10px;
-  padding-top: 10px;
-  border-top: 1px dashed var(--td-component-stroke);
+.kb-info-card-body .setting-drawer__section {
+  padding: 12px 0 16px;
+  border-bottom: 1px solid var(--td-component-stroke);
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
 }
 
-.kb-info-card-section-title {
-  font-size: 11px;
-  font-weight: 500;
-  color: var(--td-text-color-secondary);
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  margin-bottom: 6px;
+.kb-info-card-body .setting-drawer__section:first-child {
+  padding-top: 0;
+}
+
+.kb-info-card-body .setting-drawer__section:last-child {
+  border-bottom: none;
+  padding-bottom: 0;
+}
+
+.kb-info-card-body .setting-drawer__section-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--td-text-color-primary);
+  margin: 0 0 4px;
+  user-select: none;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.kb-info-card-body .setting-drawer__section-title::before {
+  content: '';
+  width: 3px;
+  height: 14px;
+  background: var(--td-brand-color);
+  border-radius: 2px;
+  flex-shrink: 0;
 }
 
 .kb-info-card-row {
   display: flex;
   align-items: flex-start;
   gap: 8px;
-  padding: 3px 0;
+  padding: 0;
   line-height: 1.6;
 }
 
diff --git a/frontend/src/components/doc-content.vue b/frontend/src/components/doc-content.vue
index 2e2833bfe..978480e92 100644
--- a/frontend/src/components/doc-content.vue
+++ b/frontend/src/components/doc-content.vue
@@ -31,6 +31,28 @@ const canDeleteGeneratedQuestion = computed(() => {
   return authStore.hasRole('admin');
 });
 
+const detailTags = computed(() => {
+  const tags = props.details?.tags;
+  return Array.isArray(tags) ? tags : [];
+});
+
+const headerIconName = computed(() => {
+  switch (props.details?.type) {
+    case 'url':
+      return 'link';
+    case 'manual':
+      return 'edit';
+    default:
+      return 'file';
+  }
+});
+
+const showSummarySection = computed(() =>
+  Boolean(props.details?.description)
+  || props.details?.summary_status === 'pending'
+  || props.details?.summary_status === 'processing',
+);
+
 // Mermaid 初始化计数器，用于生成唯一ID
 let mermaidRenderCount = 0;
 
@@ -1065,11 +1087,13 @@ const handleDetailsScroll = () => {
       :footer="false" :class="['doc-main-drawer', { 'doc-main-drawer--resizing': mainDrawerResizing }]"
       @close="handleClose">
       <template #header>
-        <div class="drawer-header">
-          <span class="header-title">{{ getDisplayTitle() }}</span>
-          <t-tag v-if="details.type" class="header-type-tag" size="small" :theme="getTypeTheme()" variant="light">
-            {{ getTypeLabel() }}
-          </t-tag>
+        <div class="doc-drawer-header">
+          <div class="doc-drawer-header-icon">
+            <t-icon :name="headerIconName" />
+          </div>
+          <div class="doc-drawer-header-text">
+            <div class="doc-drawer-header-title">{{ getDisplayTitle() }}</div>
+          </div>
           <div class="header-actions">
             <t-button v-if="details.type === 'file' || details.type === 'manual'" class="header-action-btn" size="small"
               variant="text" shape="square" theme="default" :title="$t('common.download') || 'Download'"
@@ -1116,58 +1140,81 @@ const handleDetailsScroll = () => {
         </div>
       </t-drawer>
 
-      <div ref="docMarkdownRoot" class="doc-markdown-root">
-      <!-- URL类型专属区域（保留：source 是真实链接，不与标题重复） -->
-      <div v-if="details.type === 'url'" class="url_box">
-        <span class="label">{{ $t('knowledgeBase.urlSource') }}</span>
-        <div class="url_link_box">
-          <a :href="isValidURL(details.source) ? details.source : 'javascript:void(0)'"
-            :target="isValidURL(details.source) ? '_blank' : undefined" class="url_link">
-            <t-icon name="link" size="14px" />
-            <span class="url_text">{{ details.source }}</span>
-            <t-icon name="jump" size="14px" class="jump-icon" />
-          </a>
-        </div>
-      </div>
+      <div ref="docMarkdownRoot" class="doc-markdown-root doc-drawer-body setting-drawer__body">
+        <section v-if="details.id" class="setting-drawer__section">
+          <h4 class="setting-drawer__section-title">{{ $t('knowledgeBase.detailSectionMeta') }}</h4>
+          <div class="doc-detail-rows">
+            <div v-if="details.time" class="doc-detail-row">
+              <span class="doc-detail-label">{{ getTimeLabel() }}</span>
+              <span class="doc-detail-value">{{ details.time }}</span>
+            </div>
+            <div v-if="details.type" class="doc-detail-row">
+              <span class="doc-detail-label">{{ $t('knowledgeBase.infoCard.type') }}</span>
+              <span class="doc-detail-value">
+                <t-tag size="small" :theme="getTypeTheme()" variant="light">{{ getTypeLabel() }}</t-tag>
+              </span>
+            </div>
+            <div v-if="details.channel && details.channel !== 'web'" class="doc-detail-row">
+              <span class="doc-detail-label">{{ $t('knowledgeBase.infoCard.source') }}</span>
+              <span class="doc-detail-value">
+                <t-tag size="small" variant="light" theme="warning">{{ getChannelLabel(details.channel) }}</t-tag>
+              </span>
+            </div>
+            <div v-if="detailTags.length > 0" class="doc-detail-row">
+              <span class="doc-detail-label">{{ $t('knowledgeBase.tagLabel') }}</span>
+              <span class="doc-detail-value doc-tag-chips">
+                <t-tag
+                  v-for="tag in detailTags"
+                  :key="tag.id"
+                  size="small"
+                  variant="light-outline"
+                  class="doc-tag-chip"
+                >
+                  <span class="tag-text">{{ tag.name }}</span>
+                </t-tag>
+              </span>
+            </div>
+          </div>
+        </section>
 
-      <!-- 文档摘要 -->
-      <div v-if="details.description" class="summary_box">
-        <span class="label">{{ $t('knowledgeBase.documentSummary') }}</span>
-        <div class="summary_wrapper" :class="{ 'summary_clickable': summaryOverflow || summaryExpanded }"
-          @click="(summaryOverflow || summaryExpanded) && (summaryExpanded = !summaryExpanded)">
-          <div ref="summaryRef" :class="['summary_content', { 'summary_collapsed': !summaryExpanded }]">{{
-            details.description
+        <section v-if="details.type === 'url'" class="setting-drawer__section">
+          <h4 class="setting-drawer__section-title">{{ $t('knowledgeBase.urlSource') }}</h4>
+          <div class="url_link_box">
+            <a :href="isValidURL(details.source) ? details.source : 'javascript:void(0)'"
+              :target="isValidURL(details.source) ? '_blank' : undefined" class="url_link">
+              <t-icon name="link" size="14px" />
+              <span class="url_text">{{ details.source }}</span>
+              <t-icon name="jump" size="14px" class="jump-icon" />
+            </a>
+          </div>
+        </section>
+
+        <section v-if="showSummarySection" class="setting-drawer__section">
+          <h4 class="setting-drawer__section-title">{{ $t('knowledgeBase.documentSummary') }}</h4>
+          <div v-if="details.description" class="summary_wrapper"
+            :class="{ 'summary_clickable': summaryOverflow || summaryExpanded }"
+            @click="(summaryOverflow || summaryExpanded) && (summaryExpanded = !summaryExpanded)">
+            <div ref="summaryRef" :class="['summary_content', { 'summary_collapsed': !summaryExpanded }]">{{
+              details.description
             }}</div>
-          <div v-if="(summaryOverflow && !summaryExpanded) || summaryExpanded" class="summary_fade"
-            :class="{ 'summary_fade_expanded': summaryExpanded }">
-            <t-icon :name="summaryExpanded ? 'chevron-up' : 'chevron-down'" size="14px" class="summary_fade_icon" />
+            <div v-if="(summaryOverflow && !summaryExpanded) || summaryExpanded" class="summary_fade"
+              :class="{ 'summary_fade_expanded': summaryExpanded }">
+              <t-icon :name="summaryExpanded ? 'chevron-up' : 'chevron-down'" size="14px" class="summary_fade_icon" />
+            </div>
           </div>
-        </div>
-      </div>
-      <div v-else-if="details.summary_status === 'pending' || details.summary_status === 'processing'"
-        class="summary_box">
-        <span class="label">{{ $t('knowledgeBase.documentSummary') }}</span>
-        <div class="summary_loading">
-          <t-loading size="small" />
-          <span>{{ $t('knowledgeBase.generatingSummary') }}</span>
-        </div>
-      </div>
+          <div v-else class="summary_loading">
+            <t-loading size="small" />
+            <span>{{ $t('knowledgeBase.generatingSummary') }}</span>
+          </div>
+        </section>
 
-      <div class="content_header">
-        <div class="header-left">
-          <div class="title-row">
-            <span class="label">{{ getContentLabel() }}</span>
-            <span v-if="details.total > 0" class="chunk-count">
-              {{ $t('knowledgeBase.chunkCount', { count: details.total }) }}
-            </span>
-          </div>
-          <div class="meta-row">
-            <div class="meta-left">
-              <span class="time"> {{ getTimeLabel() }}：{{ details.time }} </span>
-              <t-tag v-if="details.channel && details.channel !== 'web'" size="small" variant="light" theme="warning"
-                class="channel-tag">
-                {{ getChannelLabel(details.channel) }}
-              </t-tag>
+        <section class="setting-drawer__section doc-content-section">
+          <div class="doc-content-section-head">
+            <div class="doc-content-section-head-left">
+              <h4 class="setting-drawer__section-title">{{ getContentLabel() }}</h4>
+              <span v-if="details.total > 0" class="chunk-count">
+                {{ $t('knowledgeBase.chunkCount', { count: details.total }) }}
+              </span>
             </div>
             <div class="view-mode-buttons">
               <t-button v-if="canPreview()" size="small" :variant="viewMode === 'preview' ? 'base' : 'outline'"
@@ -1187,87 +1234,86 @@ const handleDetailsScroll = () => {
               </t-button>
             </div>
           </div>
-        </div>
-      </div>
 
-      <!-- 音频播放器（音频文件时固定显示在内容区顶部） -->
-      <div v-if="isAudioFile(details.file_type)" class="audio-player-section">
-        <div v-if="audioLoading" class="audio-loading">
-          <t-loading size="small" />
-          <span>{{ $t('preview.audioLoading') }}</span>
-        </div>
-        <audio v-else-if="audioBlobUrl" controls class="audio-player" :src="audioBlobUrl">
-          {{ $t('preview.audioNotSupported') }}
-        </audio>
-      </div>
-
-      <!-- 合并视图 -->
-      <div v-if="viewMode === 'merged'">
-        <div v-if="!mergedContent" class="no_content">{{ $t('common.noData') }}</div>
-        <div v-else class="md-content" v-html="processMarkdown(mergedContent)"></div>
-      </div>
-
-      <!-- 分块视图 -->
-      <div v-else-if="viewMode === 'chunks'">
-        <div v-if="!processedChunks.length" class="no_content">{{ $t('common.noData') }}</div>
-        <div v-else class="chunk-list">
-          <div class="chunk-item" v-for="(chunk, index) in processedChunks" :key="index">
-            <div class="chunk-header">
-              <span class="chunk-index">{{ $t('knowledgeBase.segment') }} {{ index + 1 }}</span>
-              <div class="chunk-header-right">
-                <t-tag v-if="chunk.hasParent" size="small" theme="primary" variant="light">
-                  {{ $t('knowledgeBase.childChunk') }}
-                </t-tag>
-                <t-tag v-if="chunk.questions.length > 0" size="small" theme="success" variant="light">
-                  {{ $t('knowledgeBase.questions') }} {{ chunk.questions.length }}
-                </t-tag>
-                <span class="chunk-meta">{{ chunk.meta }}</span>
-              </div>
+          <!-- 音频播放器（音频文件时固定显示在内容区顶部） -->
+          <div v-if="isAudioFile(details.file_type)" class="audio-player-section">
+            <div v-if="audioLoading" class="audio-loading">
+              <t-loading size="small" />
+              <span>{{ $t('preview.audioLoading') }}</span>
             </div>
-            <div class="md-content" v-html="chunk.processedContent"></div>
+            <audio v-else-if="audioBlobUrl" controls class="audio-player" :src="audioBlobUrl">
+              {{ $t('preview.audioNotSupported') }}
+            </audio>
+          </div>
 
-            <!-- 父 Chunk 上下文展开 -->
-            <div v-if="chunk.hasParent" class="parent-context-section">
-              <div class="parent-context-toggle" @click="toggleParentContext(chunk.original, index)">
-                <t-icon v-if="!parentContextLoading.has(index)"
-                  :name="isParentExpanded(index) ? 'chevron-down' : 'chevron-right'" size="14px" />
-                <t-loading v-else size="small" style="width: 14px; height: 14px;" />
-                <span>{{ $t('knowledgeBase.viewParentContext') }}</span>
-              </div>
-              <div v-show="isParentExpanded(index)" class="parent-context-content">
-                <div class="md-content" v-html="processMarkdown(getParentContent(chunk.original))"></div>
-              </div>
-            </div>
+          <!-- 合并视图 -->
+          <div v-if="viewMode === 'merged'">
+            <div v-if="!mergedContent" class="no_content">{{ $t('common.noData') }}</div>
+            <div v-else class="md-content" v-html="processMarkdown(mergedContent)"></div>
+          </div>
 
-            <!-- 生成的问题展示 -->
-            <div v-if="chunk.questions.length > 0" class="questions-section">
-              <div class="questions-toggle" @click="toggleQuestions(index)">
-                <t-icon :name="isExpanded(index) ? 'chevron-down' : 'chevron-right'" size="14px" />
-                <span>{{ $t('knowledgeBase.generatedQuestions') }} ({{ chunk.questions.length }})</span>
-              </div>
-              <div v-show="isExpanded(index)" class="questions-list">
-                <div v-for="question in chunk.questions" :key="question.id" class="question-item">
-                  <t-icon name="help-circle" size="14px" class="question-icon" />
-                  <span class="question-text">{{ question.question }}</span>
-                  <t-button v-if="canDeleteGeneratedQuestion" theme="default" variant="text" size="small"
-                    class="delete-question-btn" :loading="isDeleting(index, question.id)"
-                    @click.stop="handleDeleteQuestion(chunk.original, index, question)">
-                    <template #icon>
-                      <t-icon name="delete" size="14px" />
-                    </template>
-                  </t-button>
+          <!-- 分块视图 -->
+          <div v-else-if="viewMode === 'chunks'">
+            <div v-if="!processedChunks.length" class="no_content">{{ $t('common.noData') }}</div>
+            <div v-else class="chunk-list">
+              <div class="chunk-item" v-for="(chunk, index) in processedChunks" :key="index">
+                <div class="chunk-header">
+                  <span class="chunk-index">{{ $t('knowledgeBase.segment') }} {{ index + 1 }}</span>
+                  <div class="chunk-header-right">
+                    <t-tag v-if="chunk.hasParent" size="small" theme="primary" variant="light">
+                      {{ $t('knowledgeBase.childChunk') }}
+                    </t-tag>
+                    <t-tag v-if="chunk.questions.length > 0" size="small" theme="success" variant="light">
+                      {{ $t('knowledgeBase.questions') }} {{ chunk.questions.length }}
+                    </t-tag>
+                    <span class="chunk-meta">{{ chunk.meta }}</span>
+                  </div>
+                </div>
+                <div class="md-content" v-html="chunk.processedContent"></div>
+
+                <!-- 父 Chunk 上下文展开 -->
+                <div v-if="chunk.hasParent" class="parent-context-section">
+                  <div class="parent-context-toggle" @click="toggleParentContext(chunk.original, index)">
+                    <t-icon v-if="!parentContextLoading.has(index)"
+                      :name="isParentExpanded(index) ? 'chevron-down' : 'chevron-right'" size="14px" />
+                    <t-loading v-else size="small" style="width: 14px; height: 14px;" />
+                    <span>{{ $t('knowledgeBase.viewParentContext') }}</span>
+                  </div>
+                  <div v-show="isParentExpanded(index)" class="parent-context-content">
+                    <div class="md-content" v-html="processMarkdown(getParentContent(chunk.original))"></div>
+                  </div>
+                </div>
+
+                <!-- 生成的问题展示 -->
+                <div v-if="chunk.questions.length > 0" class="questions-section">
+                  <div class="questions-toggle" @click="toggleQuestions(index)">
+                    <t-icon :name="isExpanded(index) ? 'chevron-down' : 'chevron-right'" size="14px" />
+                    <span>{{ $t('knowledgeBase.generatedQuestions') }} ({{ chunk.questions.length }})</span>
+                  </div>
+                  <div v-show="isExpanded(index)" class="questions-list">
+                    <div v-for="question in chunk.questions" :key="question.id" class="question-item">
+                      <t-icon name="help-circle" size="14px" class="question-icon" />
+                      <span class="question-text">{{ question.question }}</span>
+                      <t-button v-if="canDeleteGeneratedQuestion" theme="default" variant="text" size="small"
+                        class="delete-question-btn" :loading="isDeleting(index, question.id)"
+                        @click.stop="handleDeleteQuestion(chunk.original, index, question)">
+                        <template #icon>
+                          <t-icon name="delete" size="14px" />
+                        </template>
+                      </t-button>
+                    </div>
+                  </div>
                 </div>
               </div>
             </div>
           </div>
-        </div>
-      </div>
 
-      <!-- 文档预览视图 -->
-      <div v-else-if="viewMode === 'preview'">
-        <DocumentPreview :knowledgeId="details.id" :fileType="details.file_type" :fileName="details.title"
-          :active="viewMode === 'preview'" />
-      </div>
+          <!-- 文档预览视图 -->
+          <div v-else-if="viewMode === 'preview'">
+            <DocumentPreview :knowledgeId="details.id" :fileType="details.file_type" :fileName="details.title"
+              :active="viewMode === 'preview'" />
+          </div>
+        </section>
       </div>
 
     </t-drawer>
@@ -1326,87 +1372,169 @@ const handleDetailsScroll = () => {
   font-weight: normal;
 }
 
-:deep(.t-drawer__body.narrow-scrollbar) {
-  padding: 16px 20px;
+.doc-drawer-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+  width: 100%;
+  padding-right: 32px;
 }
 
-.drawer-header {
+.doc-drawer-header-icon {
+  flex-shrink: 0;
+  width: 32px;
+  height: 32px;
+  border-radius: 9px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(7, 192, 95, 0.1);
+  color: var(--td-brand-color);
+  font-size: 16px;
+}
+
+.doc-drawer-header-text {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.doc-drawer-header-title {
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 1.4;
+  color: var(--td-text-color-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.doc-drawer-body {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.doc-drawer-body .setting-drawer__section {
+  padding: 12px 0 16px;
+  border-bottom: 1px solid var(--td-component-stroke);
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+
+  &:first-child {
+    padding-top: 0;
+  }
+
+  &:last-child {
+    border-bottom: none;
+    padding-bottom: 0;
+  }
+}
+
+.doc-drawer-body .setting-drawer__section-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--td-text-color-primary);
+  margin: 0 0 4px;
+  user-select: none;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  &::before {
+    content: '';
+    width: 3px;
+    height: 14px;
+    background: var(--td-brand-color);
+    border-radius: 2px;
+    flex-shrink: 0;
+  }
+}
+
+.doc-detail-rows {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.doc-detail-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  line-height: 1.6;
+}
+
+.doc-detail-label {
+  flex: 0 0 72px;
+  font-size: 12px;
+  color: var(--td-text-color-secondary);
+}
+
+.doc-detail-value {
+  flex: 1;
+  min-width: 0;
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  color: var(--td-text-color-primary);
+  word-break: break-word;
+}
+
+.doc-content-section-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.doc-content-section-head-left {
   display: flex;
   align-items: center;
   gap: 8px;
   min-width: 0;
-  width: 100%;
-  /* TDesign 抽屉的 X 关闭按钮浮在 header 右上角（约 16px 宽 + 16px 间距），
-     给右侧留出空间，避免我们的图标按钮被 X 遮挡。 */
-  padding-right: 32px;
+  flex: 1;
 
-  .header-title {
-    /* flex: 1 1 auto + min-width:0 让标题在标题超长时收缩出省略号，
-       而不是把右侧 tag/操作按钮挤出 header。 */
-    flex: 1 1 auto;
-    min-width: 0;
-    font-size: 16px;
-    font-weight: 500;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+  .setting-drawer__section-title {
+    margin-bottom: 0;
+  }
+}
+
+.doc-content-section {
+  gap: 12px;
+}
+
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  flex-shrink: 0;
+  flex-grow: 0;
+}
+
+.header-action-btn {
+  width: 28px;
+  min-width: 28px;
+  height: 28px;
+  padding: 0;
+  flex-shrink: 0;
+  color: var(--td-text-color-secondary);
+  border-radius: 4px;
+  transition: background-color 0.15s ease, color 0.15s ease;
+
+  &:hover {
+    background: var(--td-bg-color-container-hover);
+    color: var(--td-text-color-primary);
   }
 
-  .header-type-tag {
-    flex-shrink: 0;
-  }
-
-  .header-actions {
+  :deep(.t-button__text) {
     display: flex;
     align-items: center;
-    gap: 2px;
-    /* 关键：操作区永不收缩，标题再长也能完整看到图标 */
-    flex-shrink: 0;
-    flex-grow: 0;
+    justify-content: center;
   }
-
-  .header-action-btn {
-    /* 28×28 文本按钮：无边框，与抽屉头部融为一体；hover 时浅灰背景，
-       与右上角 X 关闭按钮的视觉风格一致。 */
-    width: 28px;
-    min-width: 28px;
-    height: 28px;
-    padding: 0;
-    flex-shrink: 0;
-    color: var(--td-text-color-secondary);
-    border-radius: 4px;
-    transition: background-color 0.15s ease, color 0.15s ease;
-
-    &:hover {
-      background: var(--td-bg-color-container-hover);
-      color: var(--td-text-color-primary);
-    }
-
-    :deep(.t-button__text) {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-  }
-}
-
-// 信息面板通用样式（仅 url_box 在用，file/manual 已合并到 header）
-.info_panel {
-  display: flex;
-  flex-direction: column;
-  margin-bottom: 16px;
-}
-
-.url_box {
-  .info_panel();
-}
-
-.parse_timeline_box {
-  margin-top: 8px;
-  margin-bottom: 16px;
-  padding: 12px 16px;
-  background: var(--td-bg-color-component);
-  border-radius: 6px;
 }
 
 /* Hidden mount keeps fetcher live without showing UI */
@@ -1422,8 +1550,6 @@ const handleDetailsScroll = () => {
   height: 100%;
   width: 100%;
   background: var(--td-bg-color-container);
-  /* Belt-and-suspenders: even if some inner element forgets a min-width:0
-     declaration in a flex chain, clip rather than overflow the drawer. */
   overflow: hidden;
   min-width: 0;
 }
@@ -1433,10 +1559,6 @@ const handleDetailsScroll = () => {
   height: 100%;
 }
 
-/* Width is set via the :size prop on the <t-drawer>, not CSS — see the
-   <script> for mainDrawerSize / timelineDrawerSize. Only padding +
-   background are still tweaked here so the timeline fills the secondary
-   drawer cleanly, edge-to-edge. */
 :deep(.kp-secondary-drawer .t-drawer__body) {
   padding: 0 !important;
 }
@@ -1446,83 +1568,61 @@ const handleDetailsScroll = () => {
 }
 
 // 文档摘要区域
-.summary_box {
-  display: flex;
-  flex-direction: column;
-  margin-bottom: 24px;
-  margin-top: 8px;
+.summary_wrapper {
+  position: relative;
+  background: var(--td-bg-color-container-hover);
+  border-radius: 4px;
 
-  .label {
-    margin-bottom: 8px;
-    font-weight: 600;
-    font-size: 14px;
-  }
-
-  .summary_wrapper {
-    position: relative;
-    background: var(--td-bg-color-container-hover);
-    border-radius: 4px;
-
-    &.summary_clickable {
-      cursor: pointer;
-    }
-  }
-
-  .summary_content {
-    padding: 12px;
-    color: var(--td-text-color-primary);
-    font-size: 13px;
-    line-height: 1.5;
-    word-break: break-word;
-    white-space: pre-wrap;
-
-    &.summary_collapsed {
-      max-height: 4.5em;
-      overflow: hidden;
-    }
-  }
-
-  .summary_fade {
-    display: flex;
-    justify-content: center;
-    padding-bottom: 4px;
-    pointer-events: none;
-
-    &:not(.summary_fade_expanded) {
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      height: 28px;
-      background: linear-gradient(transparent, var(--td-bg-color-container-hover) 80%);
-      border-radius: 0 0 4px 4px;
-      align-items: flex-end;
-    }
-  }
-
-  .summary_fade_icon {
-    color: var(--td-text-color-placeholder);
-  }
-
-  .summary_loading {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 12px;
-    background: var(--td-bg-color-container-hover);
-    border-radius: 4px;
-    color: var(--td-text-color-placeholder);
-    font-size: 13px;
+  &.summary_clickable {
+    cursor: pointer;
   }
 }
 
-.label {
+.summary_content {
+  padding: 12px;
   color: var(--td-text-color-primary);
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 600;
-  line-height: 22px;
-  margin-bottom: 8px;
+  font-size: 13px;
+  line-height: 1.5;
+  word-break: break-word;
+  white-space: pre-wrap;
+
+  &.summary_collapsed {
+    max-height: 4.5em;
+    overflow: hidden;
+  }
+}
+
+.summary_fade {
+  display: flex;
+  justify-content: center;
+  padding-bottom: 4px;
+  pointer-events: none;
+
+  &:not(.summary_fade_expanded) {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 28px;
+    background: linear-gradient(transparent, var(--td-bg-color-container-hover) 80%);
+    border-radius: 0 0 4px 4px;
+    align-items: flex-end;
+  }
+}
+
+.summary_fade_icon {
+  color: var(--td-text-color-placeholder);
+}
+
+.summary_loading {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px;
+  background: var(--td-bg-color-container-hover);
+  border-radius: 4px;
+  color: var(--td-text-color-placeholder);
+  font-size: 13px;
 }
 
 // URL链接区域
@@ -1551,79 +1651,52 @@ const handleDetailsScroll = () => {
   }
 }
 
-.content_header {
-  margin-top: 16px;
-  margin-bottom: 16px;
-  padding-bottom: 12px;
-  border-bottom: 1px solid var(--td-component-stroke);
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
+.doc-tag-chips {
+  display: inline-flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 4px;
+}
 
-  .header-left {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    width: 100%;
-  }
+.doc-tag-chip {
+  max-width: 140px;
+  height: 20px;
+  line-height: 20px;
+  border-radius: 999px;
+  border-color: var(--td-component-stroke);
+  color: var(--td-text-color-secondary);
+  padding: 0 8px;
+  background: transparent;
 
-  .title-row {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-
-    .label {
-      margin: 0;
-      font-size: 14px;
-      font-weight: 600;
-      color: var(--td-text-color-primary);
-    }
-  }
-
-  .meta-row {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    width: 100%;
-    flex-wrap: wrap;
-    gap: 12px;
-  }
-
-  .meta-left {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    flex-wrap: wrap;
-  }
-
-  .channel-tag {
-    flex-shrink: 0;
-  }
-
-  .chunk-count {
-    color: var(--td-text-color-secondary);
-    font-size: 12px;
-    background: var(--td-bg-color-container-hover);
-    padding: 2px 8px;
-    border-radius: 4px;
-  }
-
-  .view-mode-buttons {
-    display: flex;
-    gap: 4px;
-
-    .view-mode-btn {
-      height: 28px;
-      min-width: 60px;
-    }
+  .tag-text {
+    display: inline-block;
+    max-width: 100px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    vertical-align: middle;
+    font-size: 11px;
   }
 }
 
-.time {
+.chunk-count {
   color: var(--td-text-color-secondary);
   font-size: 12px;
-  font-style: normal;
-  font-weight: 400;
+  background: var(--td-bg-color-container-hover);
+  padding: 2px 8px;
+  border-radius: 4px;
+  flex-shrink: 0;
+}
+
+.view-mode-buttons {
+  display: flex;
+  gap: 4px;
+  flex-shrink: 0;
+
+  .view-mode-btn {
+    height: 28px;
+    min-width: 60px;
+  }
 }
 
 .no_content {
@@ -1815,6 +1888,17 @@ const handleDetailsScroll = () => {
      content background need to be flushed for the timeline to fill
      edge-to-edge. -->
 <style lang="less">
+.t-drawer.doc-main-drawer {
+  .t-drawer__header {
+    padding: 14px 18px;
+    border-bottom: 1px solid var(--td-component-stroke);
+  }
+
+  .t-drawer__body {
+    padding: 16px 18px;
+  }
+}
+
 /* 主抽屉宽度可调：拖拽手柄通过 teleport 挂到 body，不受 scoped 影响，
    故样式写在非 scoped 块里。手柄贴在抽屉面板左缘（right = 抽屉宽度）。 */
 .doc-drawer-resize-handle {
diff --git a/frontend/src/components/settings/SettingDrawer.vue b/frontend/src/components/settings/SettingDrawer.vue
index c0e593851..c26adab1b 100644
--- a/frontend/src/components/settings/SettingDrawer.vue
+++ b/frontend/src/components/settings/SettingDrawer.vue
@@ -8,7 +8,7 @@
     </div>
   </teleport>
   <t-drawer v-model:visible="drawerVisible" v-bind="drawerPassthroughAttrs" :size="effectiveWidth" :z-index="2500" placement="right"
-    attach="body" destroy-on-close
+    attach="body" destroy-on-close :footer="!hideFooter"
     :class="drawerClass">
     <!--
       Custom header. We replace TDesign's default header so we can put a leading
diff --git a/frontend/src/hooks/useKnowledgeBase.ts b/frontend/src/hooks/useKnowledgeBase.ts
index eda85145b..a5f1a27ef 100644
--- a/frontend/src/hooks/useKnowledgeBase.ts
+++ b/frontend/src/hooks/useKnowledgeBase.ts
@@ -36,6 +36,7 @@ export default function (knowledgeBaseId?: string) {
     error_message: "",
     chunkLoading: false,
     chunkLoadError: "",
+    tags: [] as Array<{ id: string; name: string; color?: string }>,
   });
   let knowledgeListGeneration = 0;
   const getKnowled = (
@@ -153,7 +154,7 @@ export default function (knowledgeBaseId?: string) {
       return;
     }
     
-    // 获取当前选中的分类ID
+    // 获取当前选中的标签 ID
     const uiStore = useUIStore();
     const tagIdsToUpload = uiStore.selectedTagIds.length > 0 ? [...uiStore.selectedTagIds] : undefined;
 
@@ -189,6 +190,7 @@ export default function (knowledgeBaseId?: string) {
       parse_status: "",
       error_message: "",
       chunkLoadError: "",
+      tags: item?.tags ? [...item.tags] : [],
     });
     getKnowledgeDetails(item.id)
       .then((result: any) => {
@@ -206,6 +208,7 @@ export default function (knowledgeBaseId?: string) {
             summary_status: data.summary_status || '',
             parse_status: data.parse_status || '',
             error_message: data.error_message || '',
+            tags: data.tags?.length ? data.tags : (item?.tags || []),
           });
         }
       })
diff --git a/frontend/src/i18n/locales/en-US.ts b/frontend/src/i18n/locales/en-US.ts
index e878570ac..645059710 100755
--- a/frontend/src/i18n/locales/en-US.ts
+++ b/frontend/src/i18n/locales/en-US.ts
@@ -332,7 +332,7 @@ export default {
       roleOwner: 'Owner',
       permissionOwner: 'Edit, manage settings, delete knowledge base',
       permissionAdmin: 'Edit, manage sharing',
-      permissionEditor: 'Edit documents and categories',
+      permissionEditor: 'Edit documents and tags',
       permissionViewer: 'View and search only',
       fromOrg: 'From space',
       sharedAt: 'Shared at',
@@ -368,7 +368,7 @@ export default {
     files: 'Files',
     settings: 'Settings',
     publishToWeb: 'Publish to Web',
-    documentCategoryTitle: 'Document Categories',
+    documentCategoryTitle: 'Document Tags',
     tagUpdateSuccess: 'Tag updated successfully',
     tagEditDialogHeading: 'Edit tags',
     tagEditDialogTitle: 'Edit Tags — {name}',
@@ -377,13 +377,22 @@ export default {
     tagEditAvailableSection: 'Available',
     tagEditNoSelected: 'None selected',
     tagFilterAll: 'All documents',
+    tagFilterTitle: 'Filter by tag',
+    tagFilterPlaceholder: 'Tags',
+    tagFilterMulti: '{count} tags',
+    tagManageTitle: 'Manage tags',
+    tagManageDescription: 'Create, rename, or delete knowledge base tags',
+    tagManageLink: 'Manage tags…',
+    tagManageListSection: 'Tags',
+    tagManageDocCount: '{count} documents',
+    tagManageFaqCount: '{count} FAQ entries',
     tagSelectedCount: '{count} selected',
     tagOverflowTip: 'Click to edit tags',
     tagNewPlaceholder: 'New tag name, press Enter to add',
-    category: 'Category',
-    faqCategoryTitle: 'FAQ Categories',
-    untagged: 'Uncategorized',
-    tagClearAction: 'Clear category',
+    category: 'Tag',
+    faqCategoryTitle: 'FAQ Tags',
+    untagged: 'Untagged',
+    tagClearAction: 'Clear selection',
     tagSearchTooltip: 'Search tags',
     tagCreateAction: 'Create tag',
     tagSearchPlaceholder: 'Type to filter tags',
@@ -398,9 +407,9 @@ export default {
     tagEditAction: 'Rename',
     tagDeleteAction: 'Delete',
     tagEmptyResult: 'No matching tags',
-    tagLabel: 'Category',
-    tagPlaceholder: 'Please select a category',
-    noTags: 'No categories',
+    tagLabel: 'Tag',
+    tagPlaceholder: 'Select tags',
+    noTags: 'No tags',
     upload: 'Upload File',
     uploadSuccess: 'File uploaded successfully!',
     uploadFailed: 'File upload failed!',
@@ -562,6 +571,7 @@ export default {
     parsingInProgress: 'Parsing...',
     generatingSummary: 'Generating summary...',
     documentSummary: 'Summary',
+    detailSectionMeta: 'Basic info',
     deleteConfirmation: 'Delete Confirmation',
     confirmDeleteDocument: 'Confirm deletion of document "{fileName}", recovery will be impossible after deletion',
     cancel: 'Cancel',
@@ -635,6 +645,7 @@ export default {
     docSearchPlaceholder: 'Search document names...',
     fileTypeFilter: 'File Type',
     allFileTypes: 'All Types',
+    allTags: 'All Tags',
     parseStatusFilter: 'Status',
     allParseStatuses: 'All Statuses',
     parseStatusPending: 'Pending',
@@ -2717,8 +2728,8 @@ export default {
       questionIndexModeLabel: 'Question Indexing Mode',
       questionIndexModeDescription: 'Combined: Standard and similar questions are indexed together. Separate: Each question is indexed independently for more precise retrieval but requires more storage.',
       entryGuide: 'Each FAQ entry contains a primary question, similar questions, negative examples, and multiple answers. Manage them in the FAQ knowledge base detail view.',
-      tagDesc: 'Select category for FAQ entries',
-      tagPlaceholder: 'Please select a category',
+      tagDesc: 'Select tags for FAQ entries',
+      tagPlaceholder: 'Select tags',
       modes: {
         questionOnly: 'Questions only',
         questionAnswer: 'Question + answer',
@@ -2733,8 +2744,8 @@ export default {
       similarQuestionsDesc: 'Add questions with the same meaning but different phrasing to help the system better match user queries.',
       negativeQuestions: 'Negative Examples',
       negativeQuestionsDesc: 'Add questions that should not match this answer, to exclude false positives.',
-      categoryLabel: 'FAQ Category',
-      categoryButton: 'Switch Category',
+      categoryLabel: 'FAQ Tag',
+      categoryButton: 'Switch Tag',
       editorCreate: 'Create FAQ Entry',
       editorEdit: 'Edit FAQ Entry',
       addAnswer: 'Add Answer',
@@ -2783,8 +2794,8 @@ export default {
       recommendedDisableSuccess: 'FAQ entry recommendation disabled',
       recommendedUpdateFailed: 'Failed to update recommendation status',
       batchOperations: 'Batch Operations',
-      batchUpdateTag: 'Batch Update Category',
-      batchUpdateTagTip: 'Set category for {count} selected entries',
+      batchUpdateTag: 'Batch Set Tags',
+      batchUpdateTagTip: 'Set tags for {count} selected entries',
       batchEnable: 'Batch Enable',
       batchDisable: 'Batch Disable',
       batchEnableRecommended: 'Batch Enable Recommendation',
@@ -2796,7 +2807,7 @@ export default {
       appendMode: 'Append',
       replaceMode: 'Replace existing entries',
       fileLabel: 'Select File',
-      fileTip: 'Supports JSON / CSV / Excel. CSV/Excel headers: Category (required), Question (required), Similar Questions (optional, separate with ##), Negative Questions (optional, separate with ##), Bot Answers (required, separate with ##), Reply All (optional, default FALSE), Disabled (optional, default FALSE), Exclude from Recommendations (optional, default FALSE). Also supports old format: standard_question, answers, similar_questions, negative_questions',
+      fileTip: 'Supports JSON / CSV / Excel. CSV/Excel headers: Tag (required), Question (required), Similar Questions (optional, separate with ##), Negative Questions (optional, separate with ##), Bot Answers (required, separate with ##), Reply All (optional, default FALSE), Disabled (optional, default FALSE), Exclude from Recommendations (optional, default FALSE). Legacy header "Category" and old format (standard_question, answers, similar_questions, negative_questions) are also supported.',
       clickToUpload: 'Click to upload file',
       dragDropTip: 'or drag and drop file here',
       importButton: 'Import FAQ',
@@ -5663,7 +5674,7 @@ export default {
     wikiSpace: 'Wiki Space',
     resourceType: {
       wikiSpace: 'Wiki Space',
-      docCategory: 'Document Category',
+      docCategory: 'Document Tag',
       book: 'Yuque Book',
     },
     neverSynced: 'Never synced',
diff --git a/frontend/src/i18n/locales/ko-KR.ts b/frontend/src/i18n/locales/ko-KR.ts
index 4fd149f68..2815d6626 100755
--- a/frontend/src/i18n/locales/ko-KR.ts
+++ b/frontend/src/i18n/locales/ko-KR.ts
@@ -332,7 +332,7 @@ export default {
       roleOwner: "소유자",
       permissionOwner: "설정을 편집, 관리하고 지식베이스를 삭제할 수 있습니다.",
       permissionAdmin: "공유 설정 편집 및 관리",
-      permissionEditor: "편집 가능한 문서 및 카테고리",
+      permissionEditor: "편집 가능한 문서 및 태그",
       permissionViewer: "보기 및 검색만 가능",
       fromOrg: "공유 스페이스에서",
       sharedAt: "공유일시",
@@ -367,10 +367,10 @@ export default {
     description: "설명",
     files: "파일",
     settings: "설정",
-    documentCategoryTitle: "문서 분류",
-    faqCategoryTitle: "질문 분류",
-    untagged: "미분류",
-    tagClearAction: "분류 해제",
+    documentCategoryTitle: "문서 태그",
+    faqCategoryTitle: "FAQ 태그",
+    untagged: "태그 없음",
+    tagClearAction: "선택 해제",
     tagUpdateSuccess: "태그 업데이트 성공",
     tagEditDialogHeading: "태그 편집",
     tagEditDialogTitle: '태그 편집 — {name}',
@@ -379,11 +379,20 @@ export default {
     tagEditAvailableSection: '선택 가능',
     tagEditNoSelected: '선택 없음',
     tagFilterAll: '전체 문서',
+    tagFilterTitle: '태그로 필터',
+    tagFilterPlaceholder: '태그',
+    tagFilterMulti: '태그 {count}개',
+    tagManageTitle: '태그 관리',
+    tagManageDescription: '지식베이스 태그 생성, 이름 변경 또는 삭제',
+    tagManageLink: '태그 관리…',
+    tagManageListSection: '태그 목록',
+    tagManageDocCount: '문서 {count}개',
+    tagManageFaqCount: 'FAQ {count}개',
     tagSelectedCount: '{count}개 선택됨',
     tagOverflowTip: '클릭하여 태그 편집',
     tagNewPlaceholder: '새 태그 이름 입력, Enter로 추가',
     tagSearchTooltip: "태그 검색",
-    category: "분류",
+    category: "태그",
     tagCreateAction: "태그 생성",
     tagSearchPlaceholder: "태그 이름 키워드 입력",
     tagNamePlaceholder: "태그 이름을 입력하세요",
@@ -397,9 +406,9 @@ export default {
     tagEditAction: "이름 변경",
     tagDeleteAction: "삭제",
     tagEmptyResult: "일치하는 태그를 찾을 수 없습니다",
-    tagLabel: "분류",
-    tagPlaceholder: "분류를 선택하세요",
-    noTags: "분류 없음",
+    tagLabel: "태그",
+    tagPlaceholder: "태그를 선택하세요",
+    noTags: "태그 없음",
     upload: "파일 업로드",
     uploadSuccess: "파일 업로드 성공!",
     uploadFailed: "파일 업로드 실패!",
@@ -565,6 +574,7 @@ export default {
     parsingInProgress: "파싱 중...",
     generatingSummary: "요약 생성 중...",
     documentSummary: "요약",
+    detailSectionMeta: "기본 정보",
     deleteConfirmation: "삭제 확인",
     confirmDeleteDocument: '"{fileName}" 문서를 삭제하시겠습니까? 삭제 후 복구할 수 없습니다',
     cancel: "취소",
@@ -641,6 +651,7 @@ export default {
     docSearchPlaceholder: "문서 이름 검색...",
     fileTypeFilter: "파일 유형",
     allFileTypes: "모든 유형",
+    allTags: "모든 태그",
     parseStatusFilter: "상태",
     allParseStatuses: "모든 상태",
     parseStatusPending: "대기 중",
@@ -3600,8 +3611,8 @@ export default {
         "병합 인덱스: 표준 질문과 유사 질문을 병합 인덱싱; 개별 인덱스: 표준 질문과 각 유사 질문을 독립적으로 인덱싱하여 더 정확하게 검색하지만 더 많은 저장 스페이스가 필요합니다",
       entryGuide:
         "FAQ 항목은 표준 질문, 유사 질문, 반례 및 여러 답변으로 구성됩니다. 지식베이스 세부 정보에서 일괄 가져오기 및 편집할 수 있습니다.",
-      tagDesc: "FAQ 항목에 분류 선택",
-      tagPlaceholder: "분류를 선택하세요",
+      tagDesc: "FAQ 항목에 태그 선택",
+      tagPlaceholder: "태그를 선택하세요",
       modes: {
         questionOnly: "표준 질문/유사 질문만",
         questionAnswer: "표준 질문 + 답변",
@@ -3620,8 +3631,8 @@ export default {
       negativeQuestions: "반례",
       negativeQuestionsDesc:
         "이 답변과 매칭되지 않아야 하는 질문을 추가하여 잘못된 매칭을 제외합니다.",
-      categoryLabel: "FAQ 분류",
-      categoryButton: "분류 전환",
+      categoryLabel: "FAQ 태그",
+      categoryButton: "태그 전환",
       editorCreate: "FAQ 항목 추가",
       editorEdit: "FAQ 항목 편집",
       addAnswer: "답변 추가",
@@ -3671,8 +3682,8 @@ export default {
       recommendedDisableSuccess: "FAQ 항목 추천이 비활성화되었습니다",
       recommendedUpdateFailed: "추천 상태 업데이트 실패",
       batchOperations: "일괄 작업",
-      batchUpdateTag: "일괄 분류",
-      batchUpdateTagTip: "{count}개 선택된 항목에 분류가 설정됩니다",
+      batchUpdateTag: "일괄 태그 설정",
+      batchUpdateTagTip: "{count}개 선택된 항목에 태그가 설정됩니다",
       batchEnable: "일괄 활성화",
       batchDisable: "일괄 비활성화",
       batchEnableRecommended: "일괄 추천 활성화",
@@ -3685,7 +3696,7 @@ export default {
       replaceMode: "기존 항목 교체",
       fileLabel: "파일 선택",
       fileTip:
-        "JSON / CSV / Excel 지원. CSV/Excel 헤더: 분류(필수), 질문(필수), 유사 질문(선택-##로 구분), 반례 질문(선택-##로 구분), 로봇 답변(필수-##로 구분), 모든 답변 여부(선택-기본값 FALSE), 비활성화 여부(선택-기본값 FALSE), 추천 금지 여부(선택-기본값 False 추천 가능). 이전 형식도 지원: standard_question, answers, similar_questions, negative_questions",
+        "JSON / CSV / Excel 지원. CSV/Excel 헤더: 태그(필수), 질문(필수), 유사 질문(선택-##로 구분), 반례 질문(선택-##로 구분), 로봇 답변(필수-##로 구분), 모든 답변 여부(선택-기본값 FALSE), 비활성화 여부(선택-기본값 FALSE), 추천 금지 여부(선택-기본값 False 추천 가능). 이전 헤더 '분류' 및 이전 형식(standard_question, answers, similar_questions, negative_questions)도 지원합니다.",
       clickToUpload: "파일 업로드 클릭",
       dragDropTip: "또는 파일을 여기에 드래그",
       importButton: "FAQ 가져오기",
@@ -5676,7 +5687,7 @@ export default {
     wikiSpace: "위키 공간",
     resourceType: {
       wikiSpace: "위키 공간",
-      docCategory: "문서 분류",
+      docCategory: "문서 태그",
       book: "Yuque 지식베이스",
     },
     neverSynced: "동기화되지 않음",
diff --git a/frontend/src/i18n/locales/ru-RU.ts b/frontend/src/i18n/locales/ru-RU.ts
index 3b37d7293..567bcf411 100755
--- a/frontend/src/i18n/locales/ru-RU.ts
+++ b/frontend/src/i18n/locales/ru-RU.ts
@@ -307,10 +307,10 @@ export default {
     description: 'Описание',
     files: 'Файлы',
     settings: 'Настройки',
-    documentCategoryTitle: 'Категории документов',
-    faqCategoryTitle: 'Категории FAQ',
-    untagged: 'Без метки',
-    tagClearAction: 'Снять категорию',
+    documentCategoryTitle: 'Теги документов',
+    faqCategoryTitle: 'Теги FAQ',
+    untagged: 'Без тега',
+    tagClearAction: 'Очистить выбор',
     tagSearchTooltip: 'Поиск тегов',
     tagUpdateSuccess: 'Тег успешно обновлен',
     tagEditDialogHeading: 'Редактировать теги',
@@ -320,10 +320,19 @@ export default {
     tagEditAvailableSection: 'Доступные',
     tagEditNoSelected: 'Ничего не выбрано',
     tagFilterAll: 'Все документы',
+    tagFilterTitle: 'Фильтр по тегу',
+    tagFilterPlaceholder: 'Теги',
+    tagFilterMulti: '{count} тегов',
+    tagManageTitle: 'Управление тегами',
+    tagManageDescription: 'Создание, переименование и удаление тегов базы знаний',
+    tagManageLink: 'Управление тегами…',
+    tagManageListSection: 'Список тегов',
+    tagManageDocCount: '{count} документов',
+    tagManageFaqCount: '{count} записей FAQ',
     tagSelectedCount: 'Выбрано: {count}',
     tagOverflowTip: 'Нажмите, чтобы изменить теги',
     tagNewPlaceholder: 'Название нового тега, Enter для добавления',
-    category: 'Категория',
+    category: 'Тег',
     tagCreateAction: 'Создать тег',
     tagSearchPlaceholder: 'Введите название тега',
     tagNamePlaceholder: 'Введите название тега',
@@ -337,9 +346,9 @@ export default {
     tagEditAction: 'Переименовать',
     tagDeleteAction: 'Удалить',
     tagEmptyResult: 'Подходящие теги не найдены',
-    tagLabel: 'Категория',
-    tagPlaceholder: 'Пожалуйста, выберите категорию',
-    noTags: 'Нет категорий',
+    tagLabel: 'Тег',
+    tagPlaceholder: 'Выберите теги',
+    noTags: 'Нет тегов',
     upload: 'Загрузить файл',
     uploadSuccess: 'Файл успешно загружен!',
     uploadFailed: 'Ошибка загрузки файла!',
@@ -487,6 +496,7 @@ export default {
     parsingInProgress: 'Парсинг...',
     generatingSummary: 'Генерация резюме...',
     documentSummary: 'Резюме',
+    detailSectionMeta: 'Основная информация',
     deleteConfirmation: 'Подтверждение удаления',
     confirmDeleteDocument: 'Подтвердить удаление документа "{fileName}", после удаления восстановление невозможно',
     cancel: 'Отмена',
@@ -559,6 +569,7 @@ export default {
     docSearchPlaceholder: 'Поиск документов...',
     fileTypeFilter: 'Тип файла',
     allFileTypes: 'Все типы',
+    allTags: 'Все теги',
     parseStatusFilter: 'Статус',
     allParseStatuses: 'Все статусы',
     parseStatusPending: 'Ожидание',
@@ -592,7 +603,7 @@ export default {
       roleOwner: 'Создатель',
       permissionOwner: 'Редактирование, управление настройками, удаление базы знаний',
       permissionAdmin: 'Редактирование, управление общим доступом',
-      permissionEditor: 'Редактирование документов и категорий',
+      permissionEditor: 'Редактирование документов и тегов',
       permissionViewer: 'Только просмотр',
       fromOrg: 'Из пространства',
       sharedAt: 'Дата общего доступа',
@@ -3087,8 +3098,8 @@ export default {
       questionIndexModeLabel: 'Режим индексации вопросов',
       questionIndexModeDescription: 'Объединенная: стандартные и похожие вопросы индексируются вместе. Раздельная: каждый вопрос индексируется независимо для более точного поиска, но требует больше места.',
       entryGuide: 'Каждый FAQ включает основной вопрос, похожие вопросы, негативные примеры и несколько ответов. Управляйте ими в деталях FAQ-базы.',
-      tagDesc: 'Выберите категорию для записей FAQ',
-      tagPlaceholder: 'Пожалуйста, выберите категорию',
+      tagDesc: 'Выберите теги для записей FAQ',
+      tagPlaceholder: 'Выберите теги',
       modes: {
         questionOnly: 'Только вопросы',
         questionAnswer: 'Вопрос + ответ',
@@ -3099,8 +3110,8 @@ export default {
       answers: 'Ответы',
       similarQuestions: 'Похожие вопросы',
       negativeQuestions: 'Негативные примеры',
-      categoryLabel: 'Категория FAQ',
-      categoryButton: 'Сменить категорию',
+      categoryLabel: 'Тег FAQ',
+      categoryButton: 'Сменить тег',
       editorCreate: 'Создать FAQ запись',
       editorEdit: 'Редактировать FAQ запись',
       addAnswer: 'Добавить ответ',
@@ -3146,8 +3157,8 @@ export default {
       recommendedDisableSuccess: 'Рекомендация записи FAQ отключена',
       recommendedUpdateFailed: 'Не удалось обновить статус рекомендации',
       batchOperations: 'Пакетные операции',
-      batchUpdateTag: 'Пакетное обновление категории',
-      batchUpdateTagTip: 'Установить категорию для {count} выбранных записей',
+      batchUpdateTag: 'Пакетная установка тегов',
+      batchUpdateTagTip: 'Установить теги для {count} выбранных записей',
       batchEnable: 'Пакетное включение',
       batchDisable: 'Пакетное отключение',
       batchEnableRecommended: 'Пакетное включение рекомендации',
@@ -3166,7 +3177,7 @@ export default {
       appendMode: 'Добавить',
       replaceMode: 'Заменить существующие записи',
       fileLabel: 'Выберите файл',
-      fileTip: 'Поддерживаются JSON / CSV / Excel. Заголовки CSV/Excel: 分类(必填), 问题(必填), 相似问题(选填-多个用##分隔), 反例问题(选填-多个用##分隔), 机器人回答(必填-多个用##分隔), 是否全部回复(选填-默认FALSE), 是否停用(选填-默认FALSE), 是否禁止被推荐(选填-默认False 可被推荐). Также поддерживается старый формат: standard_question, answers, similar_questions, negative_questions',
+      fileTip: 'Поддерживаются JSON / CSV / Excel. Заголовки CSV/Excel: 标签(必填), 问题(必填), 相似问题(选填-多个用##分隔), 反例问题(选填-多个用##分隔), 机器人回答(必填-多个用##分隔), 是否全部回复(选填-默认FALSE), 是否停用(选填-默认FALSE), 是否禁止被推荐(选填-默认False 可被推荐). Также поддерживаются старый заголовок «分类» и формат: standard_question, answers, similar_questions, negative_questions',
       clickToUpload: 'Нажмите для загрузки файла',
       dragDropTip: 'или перетащите файл сюда',
       importButton: 'Импортировать FAQ',
@@ -5497,7 +5508,7 @@ export default {
     wikiSpace: 'Пространство вики',
     resourceType: {
       wikiSpace: 'Пространство вики',
-      docCategory: 'Категория документов',
+      docCategory: 'Тег документа',
       book: 'База знаний Yuque',
     },
     neverSynced: 'Не синхронизировано',
diff --git a/frontend/src/i18n/locales/zh-CN.ts b/frontend/src/i18n/locales/zh-CN.ts
index 60b9d41e7..18d655191 100755
--- a/frontend/src/i18n/locales/zh-CN.ts
+++ b/frontend/src/i18n/locales/zh-CN.ts
@@ -332,7 +332,7 @@ export default {
       roleOwner: "创建者",
       permissionOwner: "可编辑、管理设置、删除知识库",
       permissionAdmin: "可编辑、管理共享设置",
-      permissionEditor: "可编辑文档与分类",
+      permissionEditor: "可编辑文档与标签",
       permissionViewer: "仅查看与检索",
       fromOrg: "来自空间",
       sharedAt: "共享于",
@@ -368,10 +368,10 @@ export default {
     files: "文件",
     settings: "设置",
     publishToWeb: "发布到网站",
-    documentCategoryTitle: "文档分类",
-    faqCategoryTitle: "问题分类",
-    untagged: "未分类",
-    tagClearAction: "取消分类",
+    documentCategoryTitle: "文档标签",
+    faqCategoryTitle: "FAQ 标签",
+    untagged: "无标签",
+    tagClearAction: "清空已选",
     tagUpdateSuccess: "标签更新成功",
     tagEditDialogHeading: "编辑标签",
     tagEditDialogTitle: '编辑标签 — {name}',
@@ -380,11 +380,20 @@ export default {
     tagEditAvailableSection: "可选标签",
     tagEditNoSelected: "暂未选择",
     tagFilterAll: "全部文档",
+    tagFilterTitle: "按标签筛选",
+    tagFilterPlaceholder: "标签",
+    tagFilterMulti: "{count} 个标签",
+    tagManageTitle: "管理标签",
+    tagManageDescription: "新建、重命名或删除知识库标签",
+    tagManageLink: "管理标签…",
+    tagManageListSection: "标签列表",
+    tagManageDocCount: "{count} 个文档",
+    tagManageFaqCount: "{count} 个 FAQ",
     tagSelectedCount: "已选 {count} 个标签",
     tagOverflowTip: "点击编辑标签",
     tagNewPlaceholder: "输入新标签名称，回车添加",
     tagSearchTooltip: "搜索标签",
-    category: "分类",
+    category: "标签",
     tagCreateAction: "新建标签",
     tagSearchPlaceholder: "输入标签名称关键字",
     tagNamePlaceholder: "请输入标签名称",
@@ -398,9 +407,9 @@ export default {
     tagEditAction: "重命名",
     tagDeleteAction: "删除",
     tagEmptyResult: "未找到匹配的标签",
-    tagLabel: "分类",
-    tagPlaceholder: "请选择分类",
-    noTags: "暂无分类",
+    tagLabel: "标签",
+    tagPlaceholder: "请选择标签",
+    noTags: "暂无标签",
     upload: "上传文件",
     uploadSuccess: "文件上传成功！",
     uploadFailed: "文件上传失败！",
@@ -563,6 +572,7 @@ export default {
     parsingInProgress: "解析中...",
     generatingSummary: "生成摘要中...",
     documentSummary: "摘要",
+    detailSectionMeta: "基本信息",
     deleteConfirmation: "删除确认",
     confirmDeleteDocument: '确认删除文档"{fileName}"，删除后将无法恢复',
     cancel: "取消",
@@ -639,6 +649,7 @@ export default {
     docSearchPlaceholder: "搜索文档名称...",
     fileTypeFilter: "文件类型",
     allFileTypes: "全部类型",
+    allTags: "全部标签",
     parseStatusFilter: "解析状态",
     allParseStatuses: "全部状态",
     parseStatusPending: "等待中",
@@ -3619,8 +3630,8 @@ export default {
       questionIndexModeLabel: "问题索引方式",
       questionIndexModeDescription: "合并索引：标准问和相似问合并索引；分别索引：标准问和每个相似问独立索引，检索更精确但需要更多存储",
       entryGuide: "FAQ 条目由标准问、相似问、反例和多个答案组成，可在知识库详情中批量导入、编辑。",
-      tagDesc: "为 FAQ 条目选择分类",
-      tagPlaceholder: "请选择分类",
+      tagDesc: "为 FAQ 条目选择标签",
+      tagPlaceholder: "请选择标签",
       modes: {
         questionOnly: "仅标准问/相似问",
         questionAnswer: "标准问 + 答案",
@@ -3635,8 +3646,8 @@ export default {
       similarQuestionsDesc: "添加与标准问意思相同但表述不同的问题，帮助系统更好地匹配用户查询。",
       negativeQuestions: "反例",
       negativeQuestionsDesc: "添加不应匹配此答案的问题，用于排除误匹配的情况。",
-      categoryLabel: "FAQ 分类",
-      categoryButton: "切换分类",
+      categoryLabel: "FAQ 标签",
+      categoryButton: "切换标签",
       editorCreate: "新增 FAQ 条目",
       editorEdit: "编辑 FAQ 条目",
       addAnswer: "添加答案",
@@ -3685,8 +3696,8 @@ export default {
       recommendedDisableSuccess: "FAQ 条目已关闭推荐",
       recommendedUpdateFailed: "更新推荐状态失败",
       batchOperations: "批量操作",
-      batchUpdateTag: "批量分类",
-      batchUpdateTagTip: "将为 {count} 个选中的条目设置分类",
+      batchUpdateTag: "批量设置标签",
+      batchUpdateTagTip: "将为 {count} 个选中的条目设置标签",
       batchEnable: "批量启用",
       batchDisable: "批量禁用",
       batchEnableRecommended: "批量开启推荐",
@@ -3698,7 +3709,7 @@ export default {
       appendMode: "追加导入",
       replaceMode: "替换现有条目",
       fileLabel: "选择文件",
-      fileTip: "支持 JSON / CSV / Excel。CSV/Excel 表头：分类(必填)、问题(必填)、相似问题(选填-多个用##分隔)、反例问题(选填-多个用##分隔)、机器人回答(必填-多个用##分隔)、是否全部回复(选填-默认FALSE)、是否停用(选填-默认FALSE)、是否禁止被推荐(选填-默认False 可被推荐)。也支持旧格式：standard_question、answers、similar_questions、negative_questions",
+      fileTip: "支持 JSON / CSV / Excel。CSV/Excel 表头：标签(必填)、问题(必填)、相似问题(选填-多个用##分隔)、反例问题(选填-多个用##分隔)、机器人回答(必填-多个用##分隔)、是否全部回复(选填-默认FALSE)、是否停用(选填-默认FALSE)、是否禁止被推荐(选填-默认False 可被推荐)。也支持旧表头「分类」及旧格式：standard_question、answers、similar_questions、negative_questions",
       clickToUpload: "点击上传文件",
       dragDropTip: "或拖拽文件到此处",
       importButton: "导入 FAQ",
@@ -5681,7 +5692,7 @@ export default {
     wikiSpace: "知识库空间",
     resourceType: {
       wikiSpace: "知识库空间",
-      docCategory: "文档分类",
+      docCategory: "文档标签",
       book: "语雀知识库",
     },
     neverSynced: "未同步",
diff --git a/frontend/src/stores/ui.ts b/frontend/src/stores/ui.ts
index 49cc08d5d..218c10115 100644
--- a/frontend/src/stores/ui.ts
+++ b/frontend/src/stores/ui.ts
@@ -7,7 +7,7 @@ export const useUIStore = defineStore('ui', {
     kbEditorMode: 'create' as 'create' | 'edit',
     currentKBId: null as string | null,
     kbEditorType: 'document' as 'document' | 'faq',
-    // 当前选中的分类ID，用于文件上传时传递
+    // 当前选中的标签 ID，用于文件上传时传递
     selectedTagIds: [] as string[],
     kbEditorInitialSection: null as string | null,
     settingsInitialSection: null as string | null,
@@ -106,7 +106,7 @@ export const useUIStore = defineStore('ui', {
       this.manualEditorOnSuccess = null
     },
 
-    // 设置当前选中的分类ID
+    // 设置当前选中的标签 ID
     toggleSelectedTagId(tagId: string) {
       const idx = this.selectedTagIds.indexOf(tagId)
       if (idx >= 0) {
diff --git a/frontend/src/views/knowledge/KnowledgeBase.vue b/frontend/src/views/knowledge/KnowledgeBase.vue
index 64c995fbf..4fc18cd12 100644
--- a/frontend/src/views/knowledge/KnowledgeBase.vue
+++ b/frontend/src/views/knowledge/KnowledgeBase.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, watch, reactive, computed, nextTick, type ComponentPublicInstance } from "vue";
+import { ref, onMounted, onUnmounted, watch, reactive, computed, nextTick } from "vue";
 import { MessagePlugin } from "tdesign-vue-next";
 import DocContent from "@/components/doc-content.vue";
 import KnowledgeProcessingTimeline from "@/components/knowledge-processing-timeline.vue";
@@ -28,9 +28,6 @@ import {
   batchQueryKnowledge,
   listKnowledgeTags,
   updateKnowledgeTagBatch,
-  createKnowledgeBaseTag,
-  updateKnowledgeBaseTag,
-  deleteKnowledgeBaseTag,
   uploadKnowledgeFile,
   createKnowledgeFromURL,
   reparseKnowledge,
@@ -46,6 +43,7 @@ import DocumentListView from './components/DocumentListView.vue';
 import DocumentBatchBar from './components/DocumentBatchBar.vue';
 import KbUploadSourceDropdown from './components/KbUploadSourceDropdown.vue';
 import TagEditDialog from './components/TagEditDialog.vue';
+import KbTagManageDrawer from './components/KbTagManageDrawer.vue';
 import { useTagChipsOverflow } from '@/composables/useTagChipsOverflow';
 import type { KnowledgeProcessOverrides } from '@/types/knowledgeProcess';
 import { useUploadConfirmStore, type UploadConfirmResult } from '@/stores/uploadConfirm';
@@ -492,6 +490,19 @@ const confirmBatchReparse = async () => {
   }
 };
 
+const tagFilterPanelVisible = ref(false);
+const tagFilterTriggerHover = ref(false);
+const tagFilterCleared = ref(false);
+const tagManageDrawerVisible = ref(false);
+
+const showTagFilterClear = computed(
+  () => selectedTagIds.value.length > 0 && tagFilterTriggerHover.value,
+);
+
+const isTagFilterPlaceholder = computed(
+  () => selectedTagIds.value.length === 0 && tagFilterCleared.value,
+);
+
 const selectedTagIds = ref<string[]>([]);
 const tagList = ref<any[]>([]);
 const tagLoading = ref(false);
@@ -567,7 +578,6 @@ const filterParams = computed(() => {
     end_time: end ? `${end} 23:59:59` : undefined,
   };
 });
-type TagInputInstance = ComponentPublicInstance<{ focus: () => void; select: () => void }>;
 const tagMap = computed<Record<string, any>>(() => {
   const map: Record<string, any> = {};
   tagList.value.forEach((tag) => {
@@ -578,45 +588,45 @@ const tagMap = computed<Record<string, any>>(() => {
 const sidebarCategoryCount = computed(() => tagTotal.value || tagList.value.length);
 const sidebarTags = computed(() => {
   const list = tagList.value;
-  const selectedId = selectedTagIds.value[0];
-  if (!selectedId || list.some((tag) => tag.id === selectedId)) {
+  const selectedIds = selectedTagIds.value;
+  if (selectedIds.length === 0) {
     return list;
   }
-  const selected = tagMap.value[selectedId];
-  return selected ? [selected, ...list] : list;
+  const missing = selectedIds
+    .filter((id) => !list.some((tag) => tag.id === id))
+    .map((id) => tagMap.value[id])
+    .filter(Boolean);
+  if (missing.length === 0) {
+    return list;
+  }
+  return [...missing, ...list];
 });
 
-const tagChipMenuOptions = computed(() => [
-  { content: t('knowledgeBase.tagEditAction'), value: 'edit' },
-  { content: t('knowledgeBase.tagDeleteAction'), value: 'delete', theme: 'error' },
-]);
-
-const handleTagChipMenu = (data: { value: string }, tag: any) => {
-  if (data.value === 'edit') {
-    startEditTag(tag);
-  } else if (data.value === 'delete') {
-    confirmDeleteTag(tag);
+const activeTagFilterLabel = computed(() => {
+  if (selectedTagIds.value.length === 0) {
+    return tagFilterCleared.value
+      ? t('knowledgeBase.tagFilterPlaceholder')
+      : t('knowledgeBase.allTags');
   }
-};
-
-const editingTagInputRefs = new Map<string, TagInputInstance | null>();
-const setEditingTagInputRef = (el: TagInputInstance | null, tagId: string) => {
-  if (el) {
-    editingTagInputRefs.set(tagId, el);
-  } else {
-    editingTagInputRefs.delete(tagId);
+  if (selectedTagIds.value.length === 1) {
+    const id = selectedTagIds.value[0];
+    return tagMap.value[id]?.name || t('knowledgeBase.allTags');
   }
-};
-const setEditingTagInputRefByTag = (tagId: string) => (el: TagInputInstance | null) => {
-  setEditingTagInputRef(el, tagId);
-};
-const newTagInputRef = ref<TagInputInstance | null>(null);
-const creatingTag = ref(false);
-const creatingTagLoading = ref(false);
-const newTagName = ref('');
-const editingTagId = ref<string | null>(null);
-const editingTagName = ref('');
-const editingTagSubmitting = ref(false);
+  return t('knowledgeBase.tagFilterMulti', { count: selectedTagIds.value.length });
+});
+
+const activeTagFilterTitle = computed(() => {
+  if (selectedTagIds.value.length === 0) {
+    return t('knowledgeBase.tagFilterTitle');
+  }
+  const names = selectedTagIds.value
+    .map((id) => tagMap.value[id]?.name)
+    .filter(Boolean);
+  return names.length > 0 ? names.join('、') : t('knowledgeBase.tagFilterTitle');
+});
+
+const isTagFilterActive = (tagId: string) => selectedTagIds.value.includes(tagId);
+
 // 标签编辑弹窗
 const tagEditDialogVisible = ref(false);
 const tagEditTarget = ref<KnowledgeCard | null>(null);
@@ -691,6 +701,9 @@ const getKnowledgeType = (item: any) => {
 
 const loadKnowledgeFiles = (kbIdValue: string): Promise<void> => {
   if (!kbIdValue) return Promise.resolve();
+  if (!isFAQ.value) {
+    docListLoading.value = true;
+  }
   return getKnowled(
     {
       page: 1,
@@ -698,7 +711,11 @@ const loadKnowledgeFiles = (kbIdValue: string): Promise<void> => {
       ...filterParams.value,
     },
     kbIdValue,
-  );
+  ).finally(() => {
+    if (isCurrentKb(kbIdValue) && !isFAQ.value) {
+      docListLoading.value = false;
+    }
+  });
 };
 
 const isCurrentKb = (targetKbId: string) => targetKbId === kbId.value;
@@ -773,156 +790,52 @@ const handleTagFilterChange = (tagIds: string[]) => {
 };
 
 const handleTagRowClick = (tagId: string) => {
-  if (creatingTag.value) {
-    creatingTag.value = false;
-    newTagName.value = '';
+  const next = new Set(selectedTagIds.value);
+  if (next.has(tagId)) {
+    next.delete(tagId);
+  } else {
+    next.add(tagId);
   }
-  if (editingTagId.value) {
-    editingTagId.value = null;
-    editingTagName.value = '';
+  if (next.size > 0) {
+    tagFilterCleared.value = false;
   }
-  const next = selectedTagIds.value.length === 1 && selectedTagIds.value[0] === tagId
-    ? []
-    : [tagId];
-  handleTagFilterChange(next);
+  handleTagFilterChange([...next]);
 };
 
 const clearTagFilter = () => {
-  if (creatingTag.value) {
-    creatingTag.value = false;
-    newTagName.value = '';
-  }
-  if (editingTagId.value) {
-    editingTagId.value = null;
-    editingTagName.value = '';
-  }
+  tagFilterCleared.value = true;
   handleTagFilterChange([]);
 };
 
-const startCreateTag = () => {
-  if (!kbId.value) {
-    MessagePlugin.warning(t('knowledgeEditor.messages.missingId'));
-    return;
-  }
-  if (creatingTag.value) {
-    return;
-  }
-  editingTagId.value = null;
-  editingTagName.value = '';
-  creatingTag.value = true;
-  nextTick(() => {
-    newTagInputRef.value?.focus?.();
-    newTagInputRef.value?.select?.();
-  });
+const openTagManageDrawer = () => {
+  tagFilterPanelVisible.value = false;
+  tagManageDrawerVisible.value = true;
 };
 
-const cancelCreateTag = () => {
-  creatingTag.value = false;
-  newTagName.value = '';
+const openTagManageFromEditDialog = () => {
+  tagEditDialogVisible.value = false;
+  tagManageDrawerVisible.value = true;
 };
 
-const submitCreateTag = async () => {
-  if (!kbId.value) {
-    MessagePlugin.warning(t('knowledgeEditor.messages.missingId'));
+const onTagManageChanged = (payload?: { deletedTagId?: string }) => {
+  if (!kbId.value) return;
+  void loadTags(kbId.value, true);
+  if (payload?.deletedTagId && selectedTagIds.value.includes(payload.deletedTagId)) {
+    selectedTagIds.value = [];
+    handleTagFilterChange([]);
+    resetPage();
+    loadKnowledgeFiles(kbId.value);
     return;
   }
-  const name = newTagName.value.trim();
-  if (!name) {
-    MessagePlugin.warning(t('knowledgeBase.tagNameRequired'));
-    return;
+  if (payload?.deletedTagId) {
+    void (async () => {
+      await new Promise((resolve) => setTimeout(resolve, 800));
+      if (!kbId.value) return;
+      resetPage();
+      await loadKnowledgeFiles(kbId.value);
+      await loadTags(kbId.value, true);
+    })();
   }
-  creatingTagLoading.value = true;
-  try {
-    await createKnowledgeBaseTag(kbId.value, { name });
-    MessagePlugin.success(t('knowledgeBase.tagCreateSuccess'));
-    cancelCreateTag();
-    await loadTags(kbId.value, true);
-  } catch (error: any) {
-    MessagePlugin.error(error?.message || t('common.operationFailed'));
-  } finally {
-    creatingTagLoading.value = false;
-  }
-};
-
-const startEditTag = (tag: any) => {
-  creatingTag.value = false;
-  newTagName.value = '';
-  editingTagId.value = tag.id;
-  editingTagName.value = tag.name;
-  nextTick(() => {
-    const inputRef = editingTagInputRefs.get(tag.id);
-    inputRef?.focus?.();
-    inputRef?.select?.();
-  });
-};
-
-const cancelEditTag = () => {
-  editingTagId.value = null;
-  editingTagName.value = '';
-};
-
-const submitEditTag = async () => {
-  if (!kbId.value || !editingTagId.value) {
-    return;
-  }
-  const name = editingTagName.value.trim();
-  if (!name) {
-    MessagePlugin.warning(t('knowledgeBase.tagNameRequired'));
-    return;
-  }
-  if (name === tagMap.value[editingTagId.value]?.name) {
-    cancelEditTag();
-    return;
-  }
-  editingTagSubmitting.value = true;
-  try {
-    await updateKnowledgeBaseTag(kbId.value, editingTagId.value, { name });
-    MessagePlugin.success(t('knowledgeBase.tagEditSuccess'));
-    cancelEditTag();
-    await loadTags(kbId.value, true);
-  } catch (error: any) {
-    MessagePlugin.error(error?.message || t('common.operationFailed'));
-  } finally {
-    editingTagSubmitting.value = false;
-  }
-};
-
-const confirmDeleteTag = (tag: any) => {
-  if (!kbId.value) {
-    MessagePlugin.warning(t('knowledgeEditor.messages.missingId'));
-    return;
-  }
-  if (creatingTag.value) {
-    cancelCreateTag();
-  }
-  if (editingTagId.value) {
-    cancelEditTag();
-  }
-  const deleteDescKey = isFAQ.value ? 'knowledgeBase.tagDeleteDesc' : 'knowledgeBase.tagDeleteDescDoc';
-  const confirm = window.confirm(
-    t(deleteDescKey, { name: tag.name }) as string,
-  );
-  if (!confirm) return;
-  deleteKnowledgeBaseTag(kbId.value, tag.seq_id, { force: true })
-    .then(() => {
-      MessagePlugin.success(t('knowledgeBase.tagDeleteSuccess'));
-      if (selectedTagIds.value.includes(tag.id)) {
-        // Reset to show all entries when current tag is deleted
-        selectedTagIds.value = selectedTagIds.value.filter(id => id !== tag.id);
-        handleTagFilterChange([...selectedTagIds.value]);
-      }
-      loadTags(kbId.value, true);
-      void (async () => {
-        await new Promise((resolve) => setTimeout(resolve, 800));
-        if (!kbId.value) return;
-        resetPage();
-        await loadKnowledgeFiles(kbId.value);
-        await loadTags(kbId.value, true);
-      })();
-    })
-    .catch((error: any) => {
-      MessagePlugin.error(error?.message || t('common.operationFailed'));
-    });
 };
 
 const handleKnowledgeTagChange = async (knowledgeId: string, tagIds: string[]) => {
@@ -951,11 +864,11 @@ const loadKnowledgeBaseInfo = async (targetKbId: string, force = false) => {
 
     kbInfo.value = data;
     selectedTagIds.value = [];
+    tagFilterCleared.value = false;
     uiStore.clearSelectedTagIds();
     // 重置store中的标签选择状态，避免上传文档时自动带上之前选择的标签
     uiStore.clearSelectedTagIds();
     if (!isFAQ.value) {
-      docListLoading.value = true;
       loadKnowledgeFiles(targetKbId);
     } else {
       cardList.value = [];
@@ -2213,109 +2126,8 @@ async function createNewSession(value: string): Promise<void> {
 
       <template v-if="activeKbTab === 'documents' || !isWiki">
         <div class="knowledge-main">
-          <aside class="tag-sidebar">
-            <div class="sidebar-header">
-              <div class="sidebar-title">
-                <span>{{ $t('knowledgeBase.documentCategoryTitle') }}</span>
-                <span class="sidebar-count">({{ sidebarCategoryCount }})</span>
-              </div>
-              <div v-if="canEdit" class="sidebar-actions">
-                <t-button size="small" variant="text" class="create-tag-btn"
-                  :aria-label="$t('knowledgeBase.tagCreateAction')" :title="$t('knowledgeBase.tagCreateAction')"
-                  @click="startCreateTag">
-                  <t-icon name="add" />
-                </t-button>
-              </div>
-            </div>
-            <div class="tag-search-bar">
-              <t-input v-model.trim="tagSearchQuery" size="small"
-                :placeholder="$t('knowledgeBase.tagSearchPlaceholder')" clearable>
-                <template #prefix-icon>
-                  <t-icon name="search" size="14px" />
-                </template>
-              </t-input>
-            </div>
-            <div class="tag-sidebar-body">
-              <template v-if="tagLoading && !sidebarTags.length">
-                <div class="tag-sidebar-chips">
-                  <div v-for="n in 6" :key="'skel-tag-' + n" class="tag-sidebar-chip-skeleton">
-                    <t-skeleton animation="gradient" :row-col="[{ width: '52px', height: '26px', type: 'rect' }]" />
-                  </div>
-                </div>
-              </template>
-              <template v-else>
-                <div class="tag-sidebar-chips">
-                  <button type="button" class="tag-sidebar-chip" :class="{ active: selectedTagIds.length === 0 }"
-                    @click="clearTagFilter">
-                    {{ $t('knowledgeBase.tagFilterAll') }}
-                  </button>
-                  <template v-for="tag in sidebarTags" :key="tag.id">
-                    <div v-if="editingTagId === tag.id" class="tag-sidebar-edit-row" @click.stop>
-                      <div class="tag-edit-input">
-                        <t-input :ref="setEditingTagInputRefByTag(tag.id)" v-model="editingTagName" size="small"
-                          :maxlength="40" @enter="submitEditTag"
-                          @keydown="(_v, ctx) => { if (ctx?.e?.key === 'Escape') { ctx.e.stopPropagation(); ctx.e.preventDefault(); cancelEditTag() } }" />
-                      </div>
-                      <div class="tag-inline-actions">
-                        <t-button variant="text" theme="default" size="small" class="tag-action-btn confirm"
-                          :loading="editingTagSubmitting" @click.stop="submitEditTag">
-                          <t-icon name="check" size="14px" />
-                        </t-button>
-                        <t-button variant="text" theme="default" size="small" class="tag-action-btn cancel"
-                          @click.stop="cancelEditTag">
-                          <t-icon name="close" size="14px" />
-                        </t-button>
-                      </div>
-                    </div>
-                    <t-dropdown v-else-if="canEdit" trigger="context-menu" placement="bottom-left"
-                      :options="tagChipMenuOptions" @click="(data: any) => handleTagChipMenu(data, tag)">
-                      <button type="button" class="tag-sidebar-chip"
-                        :class="{ active: selectedTagIds.length === 1 && selectedTagIds[0] === tag.id }"
-                        @click="handleTagRowClick(tag.id)">
-                        <span class="tag-chip-label">{{ tag.name }}</span>
-                        <span class="tag-chip-count">({{ tag.knowledge_count || 0 }})</span>
-                      </button>
-                    </t-dropdown>
-                    <button v-else type="button" class="tag-sidebar-chip"
-                      :class="{ active: selectedTagIds.length === 1 && selectedTagIds[0] === tag.id }"
-                      @click="handleTagRowClick(tag.id)">
-                      <span class="tag-chip-label">{{ tag.name }}</span>
-                      <span class="tag-chip-count">({{ tag.knowledge_count || 0 }})</span>
-                    </button>
-                  </template>
-                  <div v-if="creatingTag" class="tag-sidebar-create-row" @click.stop>
-                    <div class="tag-edit-input">
-                      <t-input ref="newTagInputRef" v-model="newTagName" size="small" :maxlength="40"
-                        :placeholder="$t('knowledgeBase.tagNamePlaceholder')" @enter="submitCreateTag"
-                        @keydown="(_v, ctx) => { if (ctx?.e?.key === 'Escape') { ctx.e.stopPropagation(); ctx.e.preventDefault(); cancelCreateTag() } }" />
-                    </div>
-                    <div class="tag-inline-actions">
-                      <t-button variant="text" theme="default" size="small" class="tag-action-btn confirm"
-                        :loading="creatingTagLoading" @click.stop="submitCreateTag">
-                        <t-icon name="check" size="14px" />
-                      </t-button>
-                      <t-button variant="text" theme="default" size="small" class="tag-action-btn cancel"
-                        @click.stop="cancelCreateTag">
-                        <t-icon name="close" size="14px" />
-                      </t-button>
-                    </div>
-                  </div>
-                </div>
-
-                <div v-if="!creatingTag && !sidebarTags.length" class="tag-empty-state">
-                  {{ $t('knowledgeBase.tagEmptyResult') }}
-                </div>
-                <div v-if="tagHasMore" class="tag-load-more">
-                  <t-button variant="text" size="small" :loading="tagLoadingMore" @click.stop="kbId && loadTags(kbId)">
-                    {{ $t('tenant.loadMore') }}
-                  </t-button>
-                </div>
-              </template>
-            </div>
-          </aside>
           <div class="tag-content">
             <div class="doc-card-area">
-              <!-- 搜索栏、筛选与添加文档 -->
               <div class="doc-filter-bar">
                 <t-input v-model.trim="docSearchKeyword" :placeholder="$t('knowledgeBase.docSearchPlaceholder')"
                   clearable class="doc-search-input" @clear="loadKnowledgeFiles(kbId)"
@@ -2324,15 +2136,135 @@ async function createNewSession(value: string): Promise<void> {
                     <t-icon name="search" size="16px" />
                   </template>
                 </t-input>
-                <t-select v-model="selectedFileType" :options="fileTypeOptions"
-                  :placeholder="$t('knowledgeBase.fileTypeFilter')" class="doc-type-select" clearable />
-                <t-select v-model="selectedParseStatus" :options="parseStatusOptions"
-                  :placeholder="$t('knowledgeBase.parseStatusFilter')" class="doc-type-select" clearable />
-                <t-select v-model="selectedSource" :options="sourceOptions"
-                  :placeholder="$t('knowledgeBase.sourceFilter')" class="doc-type-select" clearable />
-                <t-date-range-picker v-model="updatedTimeRange"
-                  :placeholder="[$t('knowledgeBase.updatedTimeFrom'), $t('knowledgeBase.updatedTimeTo')]"
-                  :disable-date="disableFutureDate" class="doc-date-range" clearable allow-input />
+                <t-popup v-model:visible="tagFilterPanelVisible" trigger="click" placement="bottom-left"
+                  overlay-class-name="tag-filter-popup" :overlay-inner-style="{ padding: 0 }">
+                  <template #content>
+                    <div class="tag-filter-panel" @click.stop>
+                      <div class="tag-filter-panel__header">
+                        <div class="tag-filter-panel__title">
+                          <span>{{ $t('knowledgeBase.tagFilterTitle') }}</span>
+                          <span class="tag-filter-panel__count">({{ sidebarCategoryCount }})</span>
+                        </div>
+                      </div>
+                      <div class="tag-search-bar">
+                        <t-input v-model.trim="tagSearchQuery" size="small"
+                          :placeholder="$t('knowledgeBase.tagSearchPlaceholder')" clearable>
+                          <template #prefix-icon>
+                            <t-icon name="search" size="14px" />
+                          </template>
+                        </t-input>
+                      </div>
+                      <div class="tag-filter-panel__body">
+                        <template v-if="tagLoading && !sidebarTags.length">
+                          <div class="tag-filter-chips">
+                            <div v-for="n in 8" :key="'skel-tag-' + n" class="tag-filter-chip-skeleton">
+                              <t-skeleton animation="gradient"
+                                :row-col="[{ width: '56px', height: '24px', type: 'rect' }]" />
+                            </div>
+                          </div>
+                        </template>
+                        <template v-else>
+                          <div class="tag-filter-chips">
+                            <button
+                              v-for="tag in sidebarTags"
+                              :key="tag.id"
+                              type="button"
+                              class="tag-filter-chip"
+                              :class="{ active: isTagFilterActive(tag.id) }"
+                              :title="`${tag.name} (${tag.knowledge_count || 0})`"
+                              @click="handleTagRowClick(tag.id)"
+                            >
+                              <span class="tag-filter-chip__label">{{ tag.name }}</span>
+                              <span class="tag-filter-chip__count">{{ tag.knowledge_count || 0 }}</span>
+                            </button>
+                          </div>
+                          <div v-if="!sidebarTags.length" class="tag-empty-state">
+                            {{ $t('knowledgeBase.tagEmptyResult') }}
+                          </div>
+                          <div v-if="tagHasMore" class="tag-load-more">
+                            <t-button variant="text" size="small" :loading="tagLoadingMore"
+                              @click.stop="kbId && loadTags(kbId)">
+                              {{ $t('tenant.loadMore') }}
+                            </t-button>
+                          </div>
+                        </template>
+                      </div>
+                      <div v-if="canEdit" class="tag-filter-panel__footer">
+                        <t-button variant="text" size="small" class="tag-manage-link" @click="openTagManageDrawer">
+                          {{ $t('knowledgeBase.tagManageLink') }}
+                        </t-button>
+                      </div>
+                    </div>
+                  </template>
+                  <div class="doc-filter-field">
+                    <button type="button" class="doc-tag-filter-trigger doc-filter-field__control"
+                      :class="{ open: tagFilterPanelVisible, 'is-placeholder': isTagFilterPlaceholder }"
+                      :aria-label="$t('knowledgeBase.tagFilterTitle')"
+                      :title="activeTagFilterTitle"
+                      @mouseenter="tagFilterTriggerHover = true"
+                      @mouseleave="tagFilterTriggerHover = false">
+                      <span class="doc-tag-filter-trigger__prefix" aria-hidden="true">
+                        <t-icon name="discount" size="16px" />
+                      </span>
+                      <span class="doc-tag-filter-trigger__label">{{ activeTagFilterLabel }}</span>
+                      <span class="doc-tag-filter-trigger__suffix">
+                        <span
+                          v-if="showTagFilterClear"
+                          class="t-input__suffix t-input__suffix-icon t-input__clear"
+                          :aria-label="$t('common.clear')"
+                          @click.stop="clearTagFilter"
+                          @mousedown.stop
+                        >
+                          <t-icon name="close-circle-filled" class="t-input__suffix-clear" />
+                        </span>
+                        <t-icon
+                          v-else
+                          name="chevron-down"
+                          size="16px"
+                          class="doc-tag-filter-trigger__caret"
+                          :class="{ open: tagFilterPanelVisible }"
+                        />
+                      </span>
+                    </button>
+                  </div>
+                </t-popup>
+                <div class="doc-filter-field">
+                  <t-select v-model="selectedFileType" :options="fileTypeOptions"
+                    :placeholder="$t('knowledgeBase.fileTypeFilter')" class="doc-type-select doc-filter-field__control"
+                    clearable>
+                    <template #prefixIcon>
+                      <t-icon name="file" size="16px" />
+                    </template>
+                  </t-select>
+                </div>
+                <div class="doc-filter-field">
+                  <t-select v-model="selectedParseStatus" :options="parseStatusOptions"
+                    :placeholder="$t('knowledgeBase.parseStatusFilter')" class="doc-type-select doc-filter-field__control"
+                    clearable>
+                    <template #prefixIcon>
+                      <t-icon name="check-circle" size="16px" />
+                    </template>
+                  </t-select>
+                </div>
+                <div class="doc-filter-field">
+                  <t-select v-model="selectedSource" :options="sourceOptions"
+                    :placeholder="$t('knowledgeBase.sourceFilter')" class="doc-type-select doc-filter-field__control"
+                    clearable>
+                    <template #prefixIcon>
+                      <t-icon name="link" size="16px" />
+                    </template>
+                  </t-select>
+                </div>
+                <div class="doc-filter-field doc-filter-field--wide">
+                  <t-date-range-picker v-model="updatedTimeRange"
+                    :placeholder="[$t('knowledgeBase.updatedTimeFrom'), $t('knowledgeBase.updatedTimeTo')]"
+                    :disable-date="disableFutureDate" class="doc-date-range doc-filter-field__control" clearable
+                    allow-input>
+                    <template #prefixIcon>
+                      <t-icon name="time" size="16px" />
+                    </template>
+                  </t-date-range-picker>
+                </div>
                 <div class="doc-view-toggle" role="group" :aria-label="$t('knowledgeBase.viewModeToggle')">
                   <t-tooltip :content="$t('knowledgeBase.viewModeGrid')" placement="top">
                     <button type="button" class="doc-view-toggle-btn" :class="{ active: viewMode === 'grid' }"
@@ -2660,10 +2592,20 @@ async function createNewSession(value: string): Promise<void> {
                             }}</span>
                           <span v-if="(hoveredCardItem as any).channel && (hoveredCardItem as any).channel !== 'web'"
                             class="card-popover-channel">{{ getChannelLabel((hoveredCardItem as any).channel) }}</span>
-                          <span v-if="(hoveredCardItem as any).tags && (hoveredCardItem as any).tags.length > 0"
-                            class="card-popover-tag">{{
-                              (hoveredCardItem as any).tags.map((t: any) => t.name).join(', ')
-                            }}</span>
+                          <div
+                            v-if="(hoveredCardItem as any).tags && (hoveredCardItem as any).tags.length > 0"
+                            class="card-popover-tags"
+                          >
+                            <t-tag
+                              v-for="tag in (hoveredCardItem as any).tags"
+                              :key="tag.id"
+                              size="small"
+                              variant="light-outline"
+                              class="card-popover-tag-chip"
+                            >
+                              <span class="tag-text">{{ tag.name }}</span>
+                            </t-tag>
+                          </div>
                           <span class="card-popover-type">{{ getKnowledgeType(hoveredCardItem) }}</span>
                         </div>
                         <div class="card-popover-hint">{{ t('knowledgeBase.clickToViewFull') }}</div>
@@ -2715,11 +2657,60 @@ async function createNewSession(value: string): Promise<void> {
   <!-- 标签编辑弹窗 -->
   <TagEditDialog :visible="tagEditDialogVisible"
     :knowledge-name="tagEditTarget?.display_name || tagEditTarget?.file_name || tagEditTarget?.title || ''"
-    :kb-id="kbId" :tag-list="tagList" :selected-tags="tagEditTarget?.tags || []"
-    @update:visible="tagEditDialogVisible = $event" @confirm="onTagEditConfirm" @tag-created="loadTags(kbId, true)" />
+    :kb-id="kbId" :tag-list="tagList" :selected-tags="tagEditTarget?.tags || []" :can-manage="canEdit"
+    @update:visible="tagEditDialogVisible = $event" @confirm="onTagEditConfirm" @tag-created="loadTags(kbId, true)"
+    @open-manage="openTagManageFromEditDialog" />
+
+  <KbTagManageDrawer
+    v-model:visible="tagManageDrawerVisible"
+    :kb-id="kbId"
+    :is-faq="isFAQ"
+    @changed="onTagManageChanged"
+  />
 </template>
 <style>
 /* 下拉菜单容器样式已统一至 @/assets/dropdown-menu.less */
+.tag-filter-popup {
+  z-index: 5500 !important;
+}
+
+.tag-filter-popup .t-popup__content {
+  padding: 0 !important;
+  border-radius: 8px !important;
+  background: var(--td-bg-color-container) !important;
+  border: 0.5px solid var(--td-component-stroke) !important;
+  box-shadow:
+    0 0 0 0.5px rgba(0, 0, 0, 0.03),
+    0 2px 4px rgba(0, 0, 0, 0.04),
+    0 8px 24px rgba(0, 0, 0, 0.1) !important;
+}
+
+.tag-more-popup .tag-menu {
+  display: flex;
+  flex-direction: column;
+}
+
+.tag-more-popup .tag-menu-item {
+  display: flex;
+  align-items: center;
+  padding: 8px 16px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  color: var(--td-text-color-primary);
+  font-family: var(--app-font-family);
+  font-size: 14px;
+  font-weight: 400;
+}
+
+.tag-more-popup .tag-menu-item .menu-icon {
+  margin-right: 8px;
+  font-size: 16px;
+}
+
+.tag-more-popup .tag-menu-item:hover {
+  background: var(--td-bg-color-secondarycontainer);
+  color: var(--td-text-color-primary);
+}
 </style>
 <style scoped lang="less">
 .knowledge-layout {
@@ -2788,73 +2779,44 @@ async function createNewSession(value: string): Promise<void> {
   border: none;
 }
 
-// 贴近整体系统设计语言的极简侧栏（对齐 menu 与右侧主窗口质感）
-.tag-sidebar {
-  width: 180px;
-  background: transparent;
-  border: none;
-  border-right: 1px solid var(--td-component-stroke);
-  box-shadow: 1px 0 0 rgba(0, 0, 0, 0.02);
-  padding: 0 16px 0 4px;
+// 标签筛选浮层：点击工具栏入口展开，不占文档列表横向空间
+.tag-filter-panel {
+  width: 320px;
+  max-width: min(320px, calc(100vw - 32px));
+  max-height: min(70vh, 480px);
   display: flex;
   flex-direction: column;
-  flex-shrink: 0;
-  max-height: 100%;
-  min-height: 0;
+  padding: 12px 14px;
+  box-sizing: border-box;
+  font-size: 12px;
+  color: var(--td-text-color-primary);
 
-  .sidebar-header {
+  .tag-filter-panel__header {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    margin-bottom: 12px;
+    margin-bottom: 10px;
     padding: 0;
     color: var(--td-text-color-primary);
+  }
 
-    .sidebar-title {
-      display: flex;
-      align-items: baseline;
-      gap: 6px;
-      font-size: 14px;
-      font-weight: 600;
-      letter-spacing: 0.5px;
+  .tag-filter-panel__title {
+    display: flex;
+    align-items: baseline;
+    gap: 6px;
+    font-size: 14px;
+    font-weight: 600;
+    letter-spacing: 0.5px;
+  }
 
-      .sidebar-count {
-        font-size: 12px;
-        color: var(--td-text-color-placeholder);
-        font-weight: 400;
-      }
-    }
-
-    .sidebar-actions {
-      display: flex;
-      gap: 6px;
-      align-items: center;
-
-      .create-tag-btn {
-        width: 24px;
-        height: 24px;
-        padding: 0;
-        border-radius: 4px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        color: var(--td-text-color-secondary);
-        transition: all 0.2s ease;
-
-        .t-icon {
-          font-size: 16px;
-        }
-
-        &:hover {
-          background: var(--td-bg-color-secondarycontainer);
-          color: var(--td-text-color-primary);
-        }
-      }
-    }
+  .tag-filter-panel__count {
+    font-size: 12px;
+    color: var(--td-text-color-placeholder);
+    font-weight: 400;
   }
 
   .tag-search-bar {
-    margin-bottom: 12px;
+    margin-bottom: 10px;
     padding: 0;
 
     :deep(.t-input) {
@@ -2882,7 +2844,7 @@ async function createNewSession(value: string): Promise<void> {
     }
   }
 
-  .tag-sidebar-body {
+  .tag-filter-panel__body {
     display: flex;
     flex-direction: column;
     gap: 8px;
@@ -2902,46 +2864,42 @@ async function createNewSession(value: string): Promise<void> {
     }
   }
 
-  .tag-sidebar-chips {
+  .tag-filter-chips {
     display: flex;
     flex-wrap: wrap;
+    align-items: flex-start;
     gap: 6px;
-    align-content: flex-start;
   }
 
-  .tag-sidebar-chip-skeleton {
-    height: 26px;
+  .tag-filter-chip-skeleton {
+    flex-shrink: 0;
   }
 
-  .tag-sidebar-chip {
+  .tag-filter-chip {
     display: inline-flex;
     align-items: center;
-    justify-content: center;
     gap: 4px;
     box-sizing: border-box;
-    flex-shrink: 0;
     max-width: 100%;
-    height: 26px;
+    height: 24px;
     padding: 0 8px;
     border: 1px solid var(--td-component-stroke);
     border-radius: 4px;
     background: transparent;
     color: var(--td-text-color-secondary);
     font-family: var(--app-font-family);
-    font-size: 13px;
+    font-size: 11px;
     font-weight: 400;
-    line-height: 26px;
-    text-align: center;
+    line-height: 24px;
     cursor: pointer;
     outline: none;
-    white-space: nowrap;
-    overflow: hidden;
-    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
+    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
     -webkit-font-smoothing: antialiased;
 
     &:hover:not(.active) {
-      background: color-mix(in srgb, var(--td-bg-color-secondarycontainer) 45%, transparent);
-      color: var(--td-text-color-secondary);
+      border-color: var(--td-component-border);
+      background: var(--td-bg-color-secondarycontainer);
+      color: var(--td-text-color-primary);
     }
 
     &:focus-visible {
@@ -2949,126 +2907,67 @@ async function createNewSession(value: string): Promise<void> {
     }
 
     &.active {
-      border-color: var(--td-component-stroke);
+      border-color: color-mix(in srgb, var(--td-brand-color) 35%, var(--td-component-stroke));
       color: var(--td-brand-color);
-      background-color: transparent;
-      background-image: none;
-      box-shadow: none;
+      font-weight: 500;
+      background-color: color-mix(in srgb, var(--td-brand-color) 6%, transparent);
 
-      .tag-chip-count {
+      .tag-filter-chip__count {
         color: color-mix(in srgb, var(--td-brand-color) 72%, var(--td-text-color-secondary));
       }
 
       &:hover {
-        border-color: var(--td-component-stroke);
-        background-color: color-mix(in srgb, var(--td-bg-color-secondarycontainer) 45%, transparent);
-        color: var(--td-brand-color);
-
-        .tag-chip-count {
-          color: color-mix(in srgb, var(--td-brand-color) 72%, var(--td-text-color-secondary));
-        }
+        background-color: color-mix(in srgb, var(--td-brand-color) 10%, transparent);
       }
     }
   }
 
-  .tag-chip-label {
+  .tag-filter-chip__label {
+    min-width: 0;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    min-width: 0;
+    max-width: 120px;
   }
 
-  .tag-chip-count {
+  .tag-filter-chip__count {
     flex-shrink: 0;
-    font-size: 12px;
+    font-size: 10px;
+    font-weight: 400;
     font-variant-numeric: tabular-nums;
     color: var(--td-text-color-placeholder);
+
+    &::before {
+      content: '·';
+      margin-right: 2px;
+      opacity: 0.65;
+    }
   }
 
-  .tag-sidebar-edit-row,
-  .tag-sidebar-create-row {
+  .tag-filter-panel__footer {
+    margin-top: 10px;
+    padding-top: 10px;
+    border-top: 1px solid var(--td-component-stroke);
     display: flex;
-    align-items: center;
-    gap: 4px;
-    width: 100%;
-    min-height: 28px;
-    padding: 3px 6px;
-    border: 1px dashed var(--td-component-stroke);
-    border-radius: 4px;
-    box-sizing: border-box;
-    flex: 1 1 100%;
-    max-width: 100%;
-  }
+    justify-content: flex-start;
 
-  .tag-edit-input {
-    flex: 1;
-    min-width: 0;
-
-    :deep(.t-input) {
-      font-size: 12px;
-      background-color: transparent;
-      border: none;
-      border-radius: 0;
-      box-shadow: none;
+    :deep(.tag-manage-link.t-button) {
       padding: 0;
-    }
-
-    :deep(.t-input__wrap) {
-      background-color: transparent;
-      border: none;
-      border-radius: 0;
-      box-shadow: none;
-    }
-
-    :deep(.t-input__inner) {
-      padding: 0;
-      color: var(--td-text-color-primary);
-    }
-
-    :deep(.t-input:hover),
-    :deep(.t-input.t-is-focused),
-    :deep(.t-input__wrap:hover),
-    :deep(.t-input__wrap.t-is-focused) {
-      border-color: transparent;
-    }
-  }
-
-  .tag-inline-actions {
-    display: flex;
-    gap: 2px;
-    flex-shrink: 0;
-
-    :deep(.t-button) {
-      padding: 0 2px;
-      height: 20px;
-    }
-
-    :deep(.tag-action-btn) {
-      border-radius: 4px;
-      transition: all 0.15s ease;
-
-      .t-icon {
-        font-size: 14px;
-      }
-    }
-
-    :deep(.tag-action-btn.confirm) {
-      background: transparent;
+      height: auto;
+      min-height: 0;
+      font-size: 13px;
       color: var(--td-text-color-secondary);
+      border: none !important;
+      background: transparent !important;
+      box-shadow: none !important;
+      transition: color 0.15s ease;
 
-      &:hover {
-        background: var(--td-bg-color-secondarycontainer);
-        color: var(--td-text-color-primary);
-      }
-    }
-
-    :deep(.tag-action-btn.cancel) {
-      background: transparent;
-      color: var(--td-text-color-secondary);
-
-      &:hover {
-        background: var(--td-bg-color-secondarycontainer);
-        color: var(--td-error-color);
+      &:hover,
+      &:focus-visible {
+        color: var(--td-brand-color) !important;
+        background: transparent !important;
+        border-color: transparent !important;
+        text-decoration: none;
       }
     }
   }
@@ -3099,7 +2998,7 @@ async function createNewSession(value: string): Promise<void> {
   display: flex;
   flex-direction: column;
   min-height: 0;
-  padding: 0 0 0 16px;
+  padding: 0;
   border: none;
   overflow: hidden;
   background: transparent;
@@ -3122,19 +3021,101 @@ async function createNewSession(value: string): Promise<void> {
   align-items: center;
   flex-wrap: wrap;
 
+  .doc-filter-field {
+    width: 140px;
+    flex-shrink: 0;
+
+    &--wide {
+      width: 280px;
+    }
+
+    &__control {
+      width: 100%;
+    }
+  }
+
+  .doc-tag-filter-trigger {
+    display: inline-flex;
+    align-items: center;
+    box-sizing: border-box;
+    width: 100%;
+    height: 32px;
+    padding: 0 8px;
+    border: 1px solid transparent;
+    border-radius: var(--td-radius-default);
+    background: var(--td-bg-color-secondarycontainer);
+    color: var(--td-text-color-primary);
+    font-family: var(--app-font-family);
+    font-size: 14px;
+    line-height: 1;
+    cursor: pointer;
+    transition: background 0.2s ease, border-color 0.2s ease;
+
+    &:hover,
+    &.open {
+      background: var(--td-bg-color-secondarycontainer);
+      border-color: transparent;
+    }
+
+    &.is-placeholder {
+      color: var(--td-text-color-placeholder);
+    }
+
+    &__prefix {
+      flex-shrink: 0;
+      display: inline-flex;
+      align-items: center;
+      margin-right: var(--td-comp-margin-s);
+      color: var(--td-text-color-placeholder);
+    }
+
+    &__label {
+      flex: 1;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      text-align: left;
+    }
+
+    &__suffix {
+      flex-shrink: 0;
+      display: inline-flex;
+      align-items: center;
+      margin-left: var(--td-comp-margin-s);
+
+      :deep(.t-input__suffix) {
+        margin-left: 0;
+      }
+
+      :deep(.t-input__suffix-clear) {
+        font-size: 16px;
+      }
+    }
+
+    &__caret {
+      flex-shrink: 0;
+      color: var(--td-text-color-placeholder);
+      transition: transform 0.2s ease, color 0.2s ease;
+
+      &.open {
+        color: var(--td-brand-color);
+        transform: rotate(180deg);
+      }
+    }
+  }
+
   .doc-search-input {
     flex: 1 1 220px;
     min-width: 220px;
   }
 
   .doc-type-select {
-    width: 140px;
-    flex-shrink: 0;
+    width: 100%;
   }
 
   .doc-date-range {
-    width: 280px;
-    flex-shrink: 0;
+    width: 100%;
 
     // TDesign focuses both the outer popup reference and inner inputs, which
     // visually stacks into a "double border" — drop the inner shadow.
@@ -4263,11 +4244,33 @@ async function createNewSession(value: string): Promise<void> {
     border-radius: 4px;
   }
 
-  .card-popover-tag {
-    padding: 1px 6px;
-    background: var(--td-success-color-light);
-    color: var(--td-brand-color);
-    border-radius: 4px;
+  .card-popover-tags {
+    display: inline-flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 4px;
+    max-width: 100%;
+  }
+
+  .card-popover-tag-chip {
+    max-width: 120px;
+    height: 18px;
+    line-height: 18px;
+    border-radius: 999px;
+    border-color: var(--td-component-stroke);
+    color: var(--td-text-color-secondary);
+    padding: 0 6px;
+    background: transparent;
+
+    .tag-text {
+      display: inline-block;
+      max-width: 80px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      vertical-align: middle;
+      font-size: 11px;
+    }
   }
 
   .card-popover-type {
diff --git a/frontend/src/views/knowledge/components/FAQEntryManager.vue b/frontend/src/views/knowledge/components/FAQEntryManager.vue
index 400f2d42f..b4bb9736e 100644
--- a/frontend/src/views/knowledge/components/FAQEntryManager.vue
+++ b/frontend/src/views/knowledge/components/FAQEntryManager.vue
@@ -615,7 +615,7 @@
 
             <div class="setting-row vertical">
               <div class="setting-info">
-                <label>{{ $t('knowledgeBase.category') }}</label>
+                <label>{{ $t('knowledgeBase.tagLabel') }}</label>
                 <p class="desc">{{ $t('knowledgeEditor.faq.tagDesc') }}</p>
               </div>
               <div class="setting-control">
@@ -2039,7 +2039,7 @@ const parseCSVFile = async (file: File): Promise<FAQEntryPayload[]> => {
                 similar_questions: splitByDelimiter(record['相似问题'] || record['similar_questions']),
                 negative_questions: splitByDelimiter(record['反例问题'] || record['negative_questions']),
                 tag_id: record['tag_id'] ? Number(record['tag_id']) : undefined,
-                tag_name: record['分类'] || record['tag_name'] || '',
+                tag_name: record['标签'] || record['分类'] || record['tag_name'] || '',
                 is_enabled: isDisabled !== undefined ? !isDisabled : undefined, // 是否停用：FALSE表示启用，TRUE表示停用，所以取反
               }),
             )
@@ -2086,7 +2086,7 @@ const parseExcelFile = async (file: File): Promise<FAQEntryPayload[]> => {
       similar_questions: splitByDelimiter(normalizedRow['相似问题'] || normalizedRow['similar_questions']),
       negative_questions: splitByDelimiter(normalizedRow['反例问题'] || normalizedRow['negative_questions']),
       tag_id: normalizedRow['tag_id'] ? Number(normalizedRow['tag_id']) : undefined,
-      tag_name: normalizedRow['分类'] || normalizedRow['tag_name'] || '',
+      tag_name: normalizedRow['标签'] || normalizedRow['分类'] || normalizedRow['tag_name'] || '',
       is_enabled: isDisabled !== undefined ? !isDisabled : undefined, // 是否停用：FALSE表示启用，TRUE表示停用，所以取反
     })
   })
@@ -2563,10 +2563,10 @@ const downloadJSONExample = () => {
 
 // 下载 CSV 示例
 const downloadCSVExample = () => {
-  const headers = ['分类(必填)', '问题(必填)', '相似问题(选填-多个用##分隔)', '反例问题(选填-多个用##分隔)', '机器人回答(必填-多个用##分隔)', '是否全部回复(选填-默认FALSE)', '是否停用(选填-默认FALSE)', '是否禁止被推荐(选填-默认False 可被推荐)']
+  const headers = ['标签(必填)', '问题(必填)', '相似问题(选填-多个用##分隔)', '反例问题(选填-多个用##分隔)', '机器人回答(必填-多个用##分隔)', '是否全部回复(选填-默认FALSE)', '是否停用(选填-默认FALSE)', '是否禁止被推荐(选填-默认False 可被推荐)']
   const rows = exampleData.map((item) => {
     return [
-      item.tag_name || '', // 分类
+      item.tag_name || '', // 标签
       item.standard_question,
       item.similar_questions.join('##'),
       item.negative_questions.join('##'),
@@ -2601,7 +2601,7 @@ const downloadCSVExample = () => {
 const downloadExcelExample = () => {
   const worksheet = XLSX.utils.json_to_sheet(
     exampleData.map((item) => ({
-      '分类(必填)': item.tag_name || '',
+      '标签(必填)': item.tag_name || '',
       '问题(必填)': item.standard_question,
       '相似问题(选填-多个用##分隔)': item.similar_questions.join('##'),
       '反例问题(选填-多个用##分隔)': item.negative_questions.join('##'),
@@ -5732,7 +5732,7 @@ watch(() => entries.value.map(e => ({
   gap: 8px;
 }
 
-// 批量分类弹窗样式 - 与导入对话框风格一致
+// 批量标签弹窗样式 - 与导入对话框风格一致
 .batch-tag-overlay {
   position: fixed;
   inset: 0;
diff --git a/frontend/src/views/knowledge/components/KbTagManageDrawer.vue b/frontend/src/views/knowledge/components/KbTagManageDrawer.vue
new file mode 100644
index 000000000..c5ae2c97c
--- /dev/null
+++ b/frontend/src/views/knowledge/components/KbTagManageDrawer.vue
@@ -0,0 +1,705 @@
+<template>
+  <SettingDrawer
+    v-model:visible="drawerVisible"
+    :title="$t('knowledgeBase.tagManageTitle')"
+    :description="$t('knowledgeBase.tagManageDescription')"
+    icon="discount"
+    width="480px"
+    :min-width="420"
+    :max-width="640"
+    resizable
+    storage-key="setting-drawer:width:kb-tag-manage"
+    :hide-footer="true"
+  >
+    <section class="setting-drawer__section">
+      <h4 class="setting-drawer__section-title">{{ $t('knowledgeBase.tagManageListSection') }}</h4>
+
+      <div class="tag-manage-toolbar">
+        <div class="tag-manage-search-wrap">
+          <t-input
+            v-model.trim="searchQuery"
+            size="small"
+            :placeholder="$t('knowledgeBase.tagSearchPlaceholder')"
+            clearable
+            class="tag-manage-search"
+          >
+            <template #prefix-icon>
+              <t-icon name="search" size="14px" />
+            </template>
+          </t-input>
+        </div>
+        <t-tooltip :content="$t('knowledgeBase.tagCreateAction')" placement="top">
+          <t-button
+            size="small"
+            variant="text"
+            class="tag-manage-create-btn"
+            :disabled="creatingTag"
+            :aria-label="$t('knowledgeBase.tagCreateAction')"
+            @click="startCreateTag"
+          >
+            <template #icon><t-icon name="add" size="16px" /></template>
+          </t-button>
+        </t-tooltip>
+      </div>
+
+      <t-loading :loading="loading && !tags.length" size="small" class="tag-manage-loading">
+        <div v-if="!loading && !tags.length && !creatingTag" class="tag-manage-empty">
+          <t-empty :description="$t('knowledgeBase.tagEmptyResult')" />
+        </div>
+
+        <ul v-else class="tag-tile-grid">
+          <template v-if="loading && !tags.length">
+            <li v-for="n in 4" :key="'tag-skel-' + n" class="tag-tile tag-tile--skeleton">
+              <t-skeleton animation="gradient" :row-col="[{ width: '100%', height: '44px', type: 'rect' }]" />
+            </li>
+          </template>
+
+          <template v-else>
+            <li v-if="creatingTag" class="tag-tile tag-tile--editing" @click.stop>
+              <div class="tag-tile__main tag-tile__main--editing">
+                <span class="tag-tile__badge" aria-hidden="true">
+                  <t-icon name="discount" size="15px" />
+                </span>
+                <t-input
+                  ref="newTagInputRef"
+                  v-model="newTagName"
+                  size="small"
+                  :maxlength="40"
+                  class="tag-tile__input"
+                  :placeholder="$t('knowledgeBase.tagNamePlaceholder')"
+                  @enter="submitCreateTag"
+                  @keydown="(_v, ctx) => onEditKeydown(ctx, cancelCreateTag)"
+                />
+              </div>
+              <div class="tag-tile__actions">
+                <t-button
+                  variant="text"
+                  shape="square"
+                  size="small"
+                  class="tag-tile__action-btn tag-tile__action-btn--confirm"
+                  :loading="creatingTagLoading"
+                  :title="$t('common.create')"
+                  @click.stop="submitCreateTag"
+                >
+                  <template #icon><t-icon name="check" size="14px" /></template>
+                </t-button>
+                <t-button
+                  variant="text"
+                  shape="square"
+                  size="small"
+                  class="tag-tile__action-btn"
+                  :title="$t('common.cancel')"
+                  @click.stop="cancelCreateTag"
+                >
+                  <template #icon><t-icon name="close" size="14px" /></template>
+                </t-button>
+              </div>
+            </li>
+
+            <li
+              v-for="tag in tags"
+              :key="tag.id"
+              class="tag-tile"
+              :class="{ 'tag-tile--editing': editingTagId === tag.id }"
+              @click.stop
+            >
+              <template v-if="editingTagId === tag.id">
+                <div class="tag-tile__main tag-tile__main--editing">
+                  <span class="tag-tile__badge" aria-hidden="true">
+                    <t-icon name="discount" size="15px" />
+                  </span>
+                  <t-input
+                    :ref="(el: any) => setEditingTagInputRef(el, tag.id)"
+                    v-model="editingTagName"
+                    size="small"
+                    :maxlength="40"
+                    class="tag-tile__input"
+                    :placeholder="$t('knowledgeBase.tagNamePlaceholder')"
+                    @enter="submitEditTag"
+                    @keydown="(_v, ctx) => onEditKeydown(ctx, cancelEditTag)"
+                  />
+                </div>
+                <div class="tag-tile__actions">
+                  <t-button
+                    variant="text"
+                    shape="square"
+                    size="small"
+                    class="tag-tile__action-btn tag-tile__action-btn--confirm"
+                    :loading="editingTagSubmitting"
+                    :title="$t('common.save')"
+                    @click.stop="submitEditTag"
+                  >
+                    <template #icon><t-icon name="check" size="14px" /></template>
+                  </t-button>
+                  <t-button
+                    variant="text"
+                    shape="square"
+                    size="small"
+                    class="tag-tile__action-btn"
+                    :title="$t('common.cancel')"
+                    @click.stop="cancelEditTag"
+                  >
+                    <template #icon><t-icon name="close" size="14px" /></template>
+                  </t-button>
+                </div>
+              </template>
+              <template v-else>
+                <div class="tag-tile__main">
+                  <span class="tag-tile__badge" aria-hidden="true">
+                    <t-icon name="discount" size="15px" />
+                  </span>
+                  <span class="tag-tile__text">
+                    <span class="tag-tile__name" :title="tag.name">{{ tag.name }}</span>
+                    <span class="tag-tile__count">
+                      {{
+                        isFaq
+                          ? $t('knowledgeBase.tagManageFaqCount', { count: tag.knowledge_count || 0 })
+                          : $t('knowledgeBase.tagManageDocCount', { count: tag.knowledge_count || 0 })
+                      }}
+                    </span>
+                  </span>
+                </div>
+                <div class="tag-tile__actions" @click.stop>
+                  <t-button
+                    variant="text"
+                    shape="square"
+                    size="small"
+                    class="tag-tile__action-btn"
+                    :title="$t('knowledgeBase.tagEditAction')"
+                    @click="startEditTag(tag)"
+                  >
+                    <template #icon><t-icon name="edit" size="14px" /></template>
+                  </t-button>
+                  <t-popconfirm
+                    :content="getDeleteConfirmContent(tag)"
+                    :confirm-btn="{ content: $t('common.delete'), theme: 'danger' }"
+                    :cancel-btn="{ content: $t('common.cancel') }"
+                    placement="bottom-right"
+                    @confirm="deleteTag(tag)"
+                  >
+                    <t-button
+                      theme="danger"
+                      shape="square"
+                      variant="text"
+                      size="small"
+                      class="tag-tile__action-btn"
+                      :title="$t('knowledgeBase.tagDeleteAction')"
+                      @click.stop
+                    >
+                      <template #icon><t-icon name="delete" size="14px" /></template>
+                    </t-button>
+                  </t-popconfirm>
+                </div>
+              </template>
+            </li>
+          </template>
+        </ul>
+
+        <div v-if="hasMore && tags.length" class="tag-load-more">
+          <t-button variant="text" size="small" :loading="loadingMore" @click="loadTags(false)">
+            {{ $t('tenant.loadMore') }}
+          </t-button>
+        </div>
+      </t-loading>
+    </section>
+  </SettingDrawer>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, nextTick, computed, type ComponentPublicInstance } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { MessagePlugin } from 'tdesign-vue-next';
+import SettingDrawer from '@/components/settings/SettingDrawer.vue';
+import {
+  listKnowledgeTags,
+  createKnowledgeBaseTag,
+  updateKnowledgeBaseTag,
+  deleteKnowledgeBaseTag,
+} from '@/api/knowledge-base/index';
+
+type TagRow = {
+  id: string;
+  seq_id: number;
+  name: string;
+  knowledge_count?: number;
+};
+
+type TagInputInstance = ComponentPublicInstance<{ focus: () => void; select: () => void }>;
+
+const TAG_PAGE_SIZE = 50;
+
+const props = defineProps<{
+  visible: boolean;
+  kbId: string;
+  isFaq?: boolean;
+}>();
+
+const emit = defineEmits<{
+  'update:visible': [boolean];
+  changed: [payload?: { deletedTagId?: string }];
+}>();
+
+const { t } = useI18n();
+
+const drawerVisible = computed({
+  get: () => props.visible,
+  set: (value: boolean) => emit('update:visible', value),
+});
+
+const tags = ref<TagRow[]>([]);
+const loading = ref(false);
+const loadingMore = ref(false);
+const page = ref(1);
+const hasMore = ref(false);
+const total = ref(0);
+const searchQuery = ref('');
+let searchDebounce: ReturnType<typeof setTimeout> | null = null;
+
+const creatingTag = ref(false);
+const creatingTagLoading = ref(false);
+const newTagName = ref('');
+const newTagInputRef = ref<TagInputInstance | null>(null);
+
+const editingTagId = ref<string | null>(null);
+const editingTagName = ref('');
+const editingTagSubmitting = ref(false);
+const editingTagInputRefs = new Map<string, TagInputInstance | null>();
+
+const setEditingTagInputRef = (el: TagInputInstance | null, tagId: string) => {
+  if (el) {
+    editingTagInputRefs.set(tagId, el);
+  } else {
+    editingTagInputRefs.delete(tagId);
+  }
+};
+
+const getDeleteConfirmContent = (tag: { name: string }) =>
+  t(props.isFaq ? 'knowledgeBase.tagDeleteDesc' : 'knowledgeBase.tagDeleteDescDoc', { name: tag.name });
+
+const onEditKeydown = (ctx: { e?: KeyboardEvent }, cancel: () => void) => {
+  if (ctx?.e?.key === 'Escape') {
+    ctx.e.stopPropagation();
+    ctx.e.preventDefault();
+    cancel();
+  }
+};
+
+const resetLocalState = () => {
+  cancelCreateTag();
+  cancelEditTag();
+  searchQuery.value = '';
+};
+
+const loadTags = async (reset = false) => {
+  if (!props.kbId) {
+    tags.value = [];
+    total.value = 0;
+    hasMore.value = false;
+    page.value = 1;
+    return;
+  }
+  if (reset) {
+    page.value = 1;
+    tags.value = [];
+    total.value = 0;
+    hasMore.value = false;
+  } else if (loading.value || loadingMore.value) {
+    return;
+  }
+
+  const currentPage = page.value || 1;
+  loading.value = currentPage === 1;
+  loadingMore.value = currentPage > 1;
+
+  try {
+    const res: any = await listKnowledgeTags(props.kbId, {
+      page: currentPage,
+      page_size: TAG_PAGE_SIZE,
+      keyword: searchQuery.value || undefined,
+    });
+    const pageData = (res?.data || {}) as { data?: TagRow[]; total?: number };
+    const pageTags = (pageData.data || []).map((tag) => ({
+      ...tag,
+      id: String(tag.id),
+    }));
+
+    if (currentPage === 1) {
+      tags.value = pageTags;
+    } else {
+      tags.value = [...tags.value, ...pageTags];
+    }
+
+    total.value = pageData.total || tags.value.length;
+    hasMore.value = tags.value.length < total.value;
+    if (hasMore.value) {
+      page.value = currentPage + 1;
+    }
+  } catch (error) {
+    console.error('Failed to load tags', error);
+  } finally {
+    loading.value = false;
+    loadingMore.value = false;
+  }
+};
+
+const startCreateTag = () => {
+  if (!props.kbId || creatingTag.value) return;
+  cancelEditTag();
+  creatingTag.value = true;
+  nextTick(() => {
+    newTagInputRef.value?.focus?.();
+    newTagInputRef.value?.select?.();
+  });
+};
+
+const cancelCreateTag = () => {
+  creatingTag.value = false;
+  newTagName.value = '';
+};
+
+const submitCreateTag = async () => {
+  if (!props.kbId) return;
+  const name = newTagName.value.trim();
+  if (!name) {
+    MessagePlugin.warning(t('knowledgeBase.tagNameRequired'));
+    return;
+  }
+  creatingTagLoading.value = true;
+  try {
+    await createKnowledgeBaseTag(props.kbId, { name });
+    MessagePlugin.success(t('knowledgeBase.tagCreateSuccess'));
+    cancelCreateTag();
+    await loadTags(true);
+    emit('changed');
+  } catch (error: any) {
+    MessagePlugin.error(error?.message || t('common.operationFailed'));
+  } finally {
+    creatingTagLoading.value = false;
+  }
+};
+
+const startEditTag = (tag: TagRow) => {
+  cancelCreateTag();
+  editingTagId.value = tag.id;
+  editingTagName.value = tag.name;
+  nextTick(() => {
+    editingTagInputRefs.get(tag.id)?.focus?.();
+    editingTagInputRefs.get(tag.id)?.select?.();
+  });
+};
+
+const cancelEditTag = () => {
+  editingTagId.value = null;
+  editingTagName.value = '';
+};
+
+const submitEditTag = async () => {
+  if (!props.kbId || !editingTagId.value) return;
+  const name = editingTagName.value.trim();
+  if (!name) {
+    MessagePlugin.warning(t('knowledgeBase.tagNameRequired'));
+    return;
+  }
+  const current = tags.value.find((tag) => tag.id === editingTagId.value);
+  if (current && name === current.name) {
+    cancelEditTag();
+    return;
+  }
+  editingTagSubmitting.value = true;
+  try {
+    await updateKnowledgeBaseTag(props.kbId, editingTagId.value, { name });
+    MessagePlugin.success(t('knowledgeBase.tagEditSuccess'));
+    cancelEditTag();
+    await loadTags(true);
+    emit('changed');
+  } catch (error: any) {
+    MessagePlugin.error(error?.message || t('common.operationFailed'));
+  } finally {
+    editingTagSubmitting.value = false;
+  }
+};
+
+const deleteTag = async (tag: TagRow) => {
+  if (!props.kbId) return;
+  cancelCreateTag();
+  cancelEditTag();
+  try {
+    await deleteKnowledgeBaseTag(props.kbId, tag.seq_id, { force: true });
+    MessagePlugin.success(t('knowledgeBase.tagDeleteSuccess'));
+    await loadTags(true);
+    emit('changed', { deletedTagId: tag.id });
+    void (async () => {
+      await new Promise((resolve) => setTimeout(resolve, 800));
+      emit('changed', { deletedTagId: tag.id });
+    })();
+  } catch (error: any) {
+    MessagePlugin.error(error?.message || t('common.operationFailed'));
+  }
+};
+
+watch(
+  () => props.visible,
+  (open) => {
+    if (open && props.kbId) {
+      void loadTags(true);
+    } else if (!open) {
+      resetLocalState();
+    }
+  },
+);
+
+watch(searchQuery, (newVal, oldVal) => {
+  if (newVal === oldVal || !props.visible || !props.kbId) return;
+  if (searchDebounce) clearTimeout(searchDebounce);
+  searchDebounce = setTimeout(() => {
+    void loadTags(true);
+  }, 300);
+});
+</script>
+
+<style scoped lang="less">
+.tag-manage-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.tag-manage-search-wrap {
+  flex: 1;
+  min-width: 0;
+}
+
+.tag-manage-search {
+  width: 100%;
+
+  :deep(.t-input) {
+    font-size: 13px;
+    background-color: var(--td-bg-color-secondarycontainer);
+    border-color: transparent;
+    border-radius: 6px;
+    box-shadow: none !important;
+
+    &:hover,
+    &:focus,
+    &.t-is-focused {
+      border-color: var(--td-component-border);
+      background-color: var(--td-bg-color-container);
+      box-shadow: none !important;
+    }
+  }
+
+  :deep(.t-input__inner) {
+    font-size: 13px;
+  }
+
+  :deep(.t-input__prefix-icon) {
+    margin-right: 0;
+  }
+}
+
+.tag-manage-create-btn {
+  flex-shrink: 0;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border-radius: 6px;
+  color: var(--td-text-color-secondary);
+
+  :deep(.t-icon) {
+    font-size: 16px;
+  }
+
+  &:hover:not(:disabled) {
+    background: var(--td-bg-color-secondarycontainer);
+    color: var(--td-text-color-primary);
+  }
+
+  &:disabled {
+    opacity: 0.45;
+  }
+}
+
+.tag-manage-loading {
+  min-height: 80px;
+}
+
+.tag-manage-empty {
+  padding: 24px 0;
+}
+
+.tag-tile-grid {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 6px;
+}
+
+.tag-tile {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 4px;
+  min-height: 44px;
+  padding: 5px 6px 5px 8px;
+  border: 1px solid var(--td-component-stroke);
+  border-radius: 6px;
+  background: var(--td-bg-color-container);
+  box-sizing: border-box;
+  transition: border-color 0.15s ease, background 0.15s ease;
+
+  &:hover:not(.tag-tile--editing):not(.tag-tile--skeleton) {
+    border-color: var(--td-component-border);
+    background: color-mix(in srgb, var(--td-bg-color-secondarycontainer) 40%, var(--td-bg-color-container));
+  }
+
+  &--skeleton {
+    padding: 0;
+    border: none;
+    background: transparent;
+  }
+
+  &--editing {
+    border-color: var(--td-component-border);
+    background: var(--td-bg-color-secondarycontainer);
+    box-shadow: none;
+
+    .tag-tile__actions {
+      opacity: 1;
+    }
+  }
+}
+
+.tag-tile__main {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex: 1;
+  min-width: 0;
+}
+
+.tag-tile__input {
+  flex: 1;
+  min-width: 0;
+
+  :deep(.t-input) {
+    background: transparent;
+    border-color: transparent;
+    box-shadow: none;
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  :deep(.t-input__wrap) {
+    background: transparent;
+    border-color: transparent;
+    box-shadow: none;
+  }
+
+  :deep(.t-input__inner) {
+    padding: 0;
+    font-size: 13px;
+    font-weight: 500;
+  }
+
+  :deep(.t-input:hover),
+  :deep(.t-input.t-is-focused),
+  :deep(.t-input__wrap:hover),
+  :deep(.t-input__wrap.t-is-focused) {
+    border-color: transparent !important;
+    box-shadow: none !important;
+    outline: none;
+  }
+
+  :deep(.t-input.t-is-focused .t-input__suffix),
+  :deep(.t-input.t-is-focused .t-input__prefix) {
+    box-shadow: none;
+  }
+}
+
+.tag-tile__badge {
+  flex-shrink: 0;
+  width: 24px;
+  height: 24px;
+  border-radius: 6px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--td-bg-color-secondarycontainer);
+  color: var(--td-text-color-placeholder);
+}
+
+.tag-tile__text {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  min-width: 0;
+  flex: 1;
+}
+
+.tag-tile__name {
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1.3;
+  color: var(--td-text-color-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.tag-tile__count {
+  font-size: 11px;
+  line-height: 1.3;
+  color: var(--td-text-color-placeholder);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.tag-tile__actions {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  opacity: 0;
+  transition: opacity 0.12s ease;
+}
+
+.tag-tile:hover .tag-tile__actions,
+.tag-tile:focus-within .tag-tile__actions,
+.tag-tile__actions:focus-within {
+  opacity: 1;
+}
+
+@media (hover: none) {
+  .tag-tile__actions {
+    opacity: 1;
+  }
+}
+
+.tag-tile__action-btn {
+  padding: 0 2px;
+
+  &--confirm {
+    color: var(--td-text-color-secondary);
+
+    &:hover,
+    &:focus-visible {
+      color: var(--td-text-color-primary);
+      background: var(--td-bg-color-container);
+    }
+  }
+}
+
+.tag-load-more {
+  display: flex;
+  justify-content: center;
+  padding-top: 8px;
+
+  :deep(.t-button) {
+    font-size: 12px;
+    color: var(--td-text-color-placeholder);
+  }
+}
+</style>
diff --git a/frontend/src/views/knowledge/components/TagEditDialog.test.ts b/frontend/src/views/knowledge/components/TagEditDialog.test.ts
index ae5e253e6..9c26837db 100644
--- a/frontend/src/views/knowledge/components/TagEditDialog.test.ts
+++ b/frontend/src/views/knowledge/components/TagEditDialog.test.ts
@@ -18,6 +18,9 @@ test('uses a compact flat dialog with selected and available sections', () => {
   assert.match(component, /class="setting-drawer__section-title"/)
   assert.match(component, /tagEditSelectedSection/)
   assert.match(component, /tagEditAvailableSection/)
+  assert.match(component, /canManage/)
+  assert.match(component, /tagManageLink/)
+  assert.match(component, /open-manage/)
   assert.match(component, /selectedTagsList/)
   assert.match(component, /availableTagsList/)
   assert.match(component, /class="tag-edit-chip"/)
diff --git a/frontend/src/views/knowledge/components/TagEditDialog.vue b/frontend/src/views/knowledge/components/TagEditDialog.vue
index 3be3ebd40..9127b181a 100644
--- a/frontend/src/views/knowledge/components/TagEditDialog.vue
+++ b/frontend/src/views/knowledge/components/TagEditDialog.vue
@@ -29,7 +29,19 @@
       </section>
 
       <section class="setting-drawer__section">
-        <h4 class="setting-drawer__section-title">{{ $t('knowledgeBase.tagEditAvailableSection') }}</h4>
+        <div class="tag-edit-section-head">
+          <h4 class="setting-drawer__section-title">{{ $t('knowledgeBase.tagEditAvailableSection') }}</h4>
+          <t-button
+            v-if="canManage"
+            variant="text"
+            size="small"
+            theme="default"
+            class="tag-edit-manage-link"
+            @click="handleOpenManage"
+          >
+            {{ $t('knowledgeBase.tagManageLink') }}
+          </t-button>
+        </div>
         <div class="tag-edit-search-bar">
           <t-input v-model="searchQuery" :placeholder="$t('knowledgeBase.tagEditSearch')" clearable size="small">
             <template #prefix-icon>
@@ -93,12 +105,14 @@ const props = defineProps<{
   kbId: string;
   tagList: Tag[];
   selectedTags: Tag[];
+  canManage?: boolean;
 }>();
 
 const emit = defineEmits<{
   (e: 'update:visible', value: boolean): void;
   (e: 'confirm', tagIds: string[]): void;
   (e: 'tag-created'): void;
+  (e: 'open-manage'): void;
 }>();
 
 const { t } = useI18n();
@@ -212,6 +226,11 @@ async function handleConfirm() {
 function handleClose() {
   emit('update:visible', false);
 }
+
+function handleOpenManage() {
+  emit('update:visible', false);
+  emit('open-manage');
+}
 </script>
 
 <style>
@@ -355,6 +374,18 @@ function handleClose() {
   font-size: 12px;
   color: var(--td-text-color-placeholder);
   flex-shrink: 0;
+  border: none !important;
+  background: transparent !important;
+  box-shadow: none !important;
+  transition: color 0.15s ease;
+}
+
+.tag-edit-section-head :deep(.tag-edit-manage-link.t-button:hover),
+.tag-edit-section-head :deep(.tag-edit-manage-link.t-button:focus-visible) {
+  color: var(--td-brand-color) !important;
+  background: transparent !important;
+  border-color: transparent !important;
+  text-decoration: none;
 }
 
 .tag-edit-search-bar {
diff --git a/internal/handler/knowledge.go b/internal/handler/knowledge.go
index f1c18239d..9cc1b3be3 100644
--- a/internal/handler/knowledge.go
+++ b/internal/handler/knowledge.go
@@ -577,12 +577,19 @@ func (h *KnowledgeHandler) GetKnowledge(c *gin.Context) {
 	}
 
 	// Resolve knowledge and validate KB access (at least viewer)
-	knowledge, _, err := h.resolveKnowledgeAndValidateKBAccess(c, id, types.OrgRoleViewer)
+	knowledge, effCtx, err := h.resolveKnowledgeAndValidateKBAccess(c, id, types.OrgRoleViewer)
 	if err != nil {
 		c.Error(err)
 		return
 	}
 
+	// Re-fetch with tenant-scoped service so tags and other joined fields are populated.
+	if knowledge, err = h.kgService.GetKnowledgeByID(effCtx, id); err != nil {
+		logger.ErrorWithFields(ctx, err, nil)
+		c.Error(errors.NewNotFoundError("Knowledge not found"))
+		return
+	}
+
 	logger.Infof(ctx, "Knowledge retrieved successfully, ID: %s, title: %s",
 		secutils.SanitizeForLog(knowledge.ID), secutils.SanitizeForLog(knowledge.Title))
 	c.JSON(http.StatusOK, gin.H{