From e0d3c1dafd4d60a97b64ae75c203a21bcef8486f Mon Sep 17 00:00:00 2001
From: wizardchen <wizardchen@tencent.com>
Date: Wed, 17 Jun 2026 20:50:42 +0800
Subject: [PATCH] feat(frontend): improve manual knowledge editor and chat
 citation rendering

- Replace manual knowledge editor dialog with SettingDrawer and refine toolbar/footer layout
- Add draft status resolution for manual knowledge items in the knowledge base
- Fix citation placement near fenced code blocks and add regression tests
- Update ChatRequestInfoButton icon and chat message/citation styles
- Add i18n strings for manual knowledge editor features
---
 .../src/components/ChatRequestInfoButton.vue  |   2 +-
 .../src/components/css/chat-citations.less    |   2 +-
 .../components/css/chat-message-shared.less   |  49 +-
 .../components/manual-knowledge-editor.vue    | 475 +++++++++---------
 frontend/src/components/menu.vue              |  20 +-
 .../src/components/settings/SettingDrawer.vue |  25 +-
 frontend/src/i18n/locales/en-US.ts            |   5 +
 frontend/src/i18n/locales/ko-KR.ts            |   5 +
 frontend/src/i18n/locales/ru-RU.ts            |   5 +
 frontend/src/i18n/locales/zh-CN.ts            |   5 +
 .../src/utils/chatMarkdownRenderer.test.ts    |  26 +
 frontend/src/utils/citationMarkdown.ts        |  20 +-
 .../chat/components/AgentStreamDisplay.vue    |   2 +-
 frontend/src/views/chat/components/botmsg.vue |   2 +-
 .../src/views/knowledge/KnowledgeBase.vue     |  22 +-
 15 files changed, 396 insertions(+), 269 deletions(-)

diff --git a/frontend/src/components/ChatRequestInfoButton.vue b/frontend/src/components/ChatRequestInfoButton.vue
index b3071527..2919cfc6 100644
--- a/frontend/src/components/ChatRequestInfoButton.vue
+++ b/frontend/src/components/ChatRequestInfoButton.vue
@@ -14,7 +14,7 @@
       shape="round"
       :title="$t('chat.requestInfoTitle')"
     >
-      <t-icon name="bug" />
+      <t-icon name="info-circle" />
     </t-button>
     <template #content>
       <div class="chat-request-card" @click.stop>
diff --git a/frontend/src/components/css/chat-citations.less b/frontend/src/components/css/chat-citations.less
index ba942992..a6c0ec98 100644
--- a/frontend/src/components/css/chat-citations.less
+++ b/frontend/src/components/css/chat-citations.less
@@ -49,7 +49,7 @@
 
   :deep(.citation-kb) {
     background: color-mix(in srgb, var(--td-text-color-primary) 4%, transparent);
-    color: color-mix(in srgb, var(--td-text-color-secondary) 86%, var(--td-text-color-primary));
+    color: color-mix(in srgb, var(--td-text-color-primary) 86%, var(--td-text-color-primary));
     border: 0;
     box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--td-text-color-primary) 10%, transparent);
     cursor: pointer;
diff --git a/frontend/src/components/css/chat-message-shared.less b/frontend/src/components/css/chat-message-shared.less
index 1e2d7ee7..0386eb12 100644
--- a/frontend/src/components/css/chat-message-shared.less
+++ b/frontend/src/components/css/chat-message-shared.less
@@ -1,21 +1,26 @@
 .answer-toolbar {
   display: flex;
+  align-items: center;
   justify-content: flex-start;
-  gap: 6px;
-  margin-top: 8px;
-  min-height: 32px;
+  gap: 4px;
+  margin-top: 6px;
+  margin-left: -7px;
+  min-height: 30px;
+  color: var(--td-text-color-primary);
 
   :deep(.t-button) {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     min-width: auto;
-    width: auto;
-    border: 1px solid var(--td-component-stroke);
-    border-radius: 6px;
-    background: var(--td-bg-color-container);
+    width: 30px;
+    height: 30px;
+    padding: 0;
+    border: none;
+    border-radius: 8px;
+    background: transparent;
     color: var(--td-text-color-secondary);
-    transition: all 0.2s ease;
+    transition: background-color 0.15s ease, color 0.15s ease;
 
     .t-button__content {
       display: inline-flex !important;
@@ -34,20 +39,28 @@
     .t-icon {
       display: inline-flex !important;
       visibility: visible !important;
-      opacity: 1 !important;
+      opacity: 1;
       align-items: center;
       justify-content: center;
       font-size: 16px;
       width: 16px;
       height: 16px;
       flex-shrink: 0;
-      color: var(--td-text-color-secondary);
+      color: inherit;
     }
 
     .t-icon svg {
       display: block !important;
       width: 16px;
       height: 16px;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+    }
+
+    .t-icon svg [stroke]:not([stroke='none']) {
+      stroke-width: 1.2;
+      stroke-linecap: round;
+      stroke-linejoin: round;
     }
 
     .t-button__text > :not(.t-icon) {
@@ -55,19 +68,21 @@
     }
 
     &:hover:not(:disabled) {
-      background: rgba(7, 192, 95, 0.08);
-      border-color: rgba(7, 192, 95, 0.3);
-      color: var(--td-brand-color);
+      background: var(--td-bg-color-container-hover);
+      color: var(--td-text-color-primary);
 
       .t-icon {
-        color: var(--td-brand-color);
+        opacity: 1;
+        color: inherit;
       }
     }
 
     &:active:not(:disabled) {
-      background: rgba(7, 192, 95, 0.12);
-      border-color: rgba(7, 192, 95, 0.4);
-      transform: translateY(0.5px);
+      background: var(--td-bg-color-container-active);
+
+      .t-icon {
+        opacity: 1;
+      }
     }
   }
 }
diff --git a/frontend/src/components/manual-knowledge-editor.vue b/frontend/src/components/manual-knowledge-editor.vue
index e084ee77..04bb0d75 100644
--- a/frontend/src/components/manual-knowledge-editor.vue
+++ b/frontend/src/components/manual-knowledge-editor.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, reactive, computed, watch, nextTick, onBeforeUnmount } from 'vue'
+import SettingDrawer from '@/components/settings/SettingDrawer.vue'
 import { marked } from 'marked'
 import { MessagePlugin } from 'tdesign-vue-next'
 import { useUIStore } from '@/stores/ui'
@@ -32,6 +33,25 @@ interface KnowledgeDetailResponse {
 
 type ManualStatus = 'draft' | 'publish'
 
+/** Derive editor status from metadata + parse_status (parse pipeline wins when indexed or in flight). */
+const resolveManualKnowledgeStatus = (
+  metaStatus: ManualStatus | undefined,
+  parseStatus?: string,
+): ManualStatus => {
+  if (!parseStatus || parseStatus === 'draft') {
+    return metaStatus === 'publish' ? 'publish' : 'draft'
+  }
+  if (
+    parseStatus === 'completed' ||
+    parseStatus === 'pending' ||
+    parseStatus === 'processing' ||
+    parseStatus === 'finalizing'
+  ) {
+    return 'publish'
+  }
+  return metaStatus === 'publish' ? 'publish' : 'draft'
+}
+
 const uiStore = useUIStore()
 const uploadConfirmStore = useUploadConfirmStore()
 const organizationStore = useOrganizationStore()
@@ -359,11 +379,6 @@ const toolbarGroups = computed<ToolbarGroup[]>(() => [
 
 const isPreviewMode = computed(() => activeTab.value === 'preview')
 const viewToggleIcon = computed(() => (isPreviewMode.value ? 'edit' : 'view-module'))
-const viewToggleTooltip = computed(() =>
-  isPreviewMode.value
-    ? t('manualEditor.view.toggleToEdit')
-    : t('manualEditor.view.toggleToPreview'),
-)
 const viewToggleLabel = computed(() =>
   isPreviewMode.value ? t('manualEditor.view.editLabel') : t('manualEditor.view.previewLabel'),
 )
@@ -507,7 +522,7 @@ const loadKnowledgeContent = async () => {
       uiStore.manualEditorInitialTitle ||
       ''
     form.content = meta?.content || uiStore.manualEditorInitialContent || ''
-    form.status = meta?.status || (data.parse_status === 'completed' ? 'publish' : 'draft')
+    form.status = resolveManualKnowledgeStatus(meta?.status, data.parse_status)
     if (meta?.updatedAt) {
       lastUpdatedAt.value = meta.updatedAt
     }
@@ -711,193 +726,223 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <t-dialog
-    v-model:visible="visible"
-    :header="dialogTitle"
-    :closeBtn="true"
-    :footer="false"
-    width="880px"
-    top="5%"
-    class="manual-knowledge-editor"
-    destroy-on-close
+  <SettingDrawer
+    :visible="visible"
+    :title="dialogTitle"
+    :description="$t('manualEditor.description')"
+    icon="edit-1"
+    width="760px"
+    :min-width="560"
+    :max-width="1280"
+    storage-key="setting-drawer:width:manual-markdown-editor"
+    :destroy-on-close="false"
+    :hide-footer="!initialLoaded"
+    :confirm-loading="saving && savingAction === 'publish'"
+    :confirm-text="$t('manualEditor.actions.publish')"
+    :cancel-text="$t('manualEditor.actions.cancel')"
+    @update:visible="(v: boolean) => { visible = v }"
+    @confirm="handleSave('publish')"
   >
-    <div class="editor-body" v-if="initialLoaded">
-      <div class="form-row">
-        <label class="form-label">{{ $t('manualEditor.form.knowledgeBaseLabel') }}</label>
-        <t-select
-          v-model="form.kbId"
-          :disabled="kbDisabled"
-          :loading="kbLoading"
-          :options="kbOptions"
-          :placeholder="$t('manualEditor.form.knowledgeBasePlaceholder')"
-          :popup-props="{ attach: 'body' }"
-        >
-          <template #empty>
-            <div style="padding: 20px; text-align: center; color: var(--td-text-color-placeholder);">
-              {{ $t('manualEditor.noDocumentKnowledgeBases') }}
+    <template #footer-left>
+      <t-button
+        variant="text"
+        theme="primary"
+        class="toggle-view-btn"
+        @click="toggleEditorView"
+      >
+        <template #icon><t-icon :name="viewToggleIcon" /></template>
+        {{ viewToggleLabel }}
+      </t-button>
+      <t-button
+        variant="outline"
+        theme="default"
+        @click="handleSave('draft')"
+        :loading="saving && savingAction === 'draft'"
+      >
+        {{ $t('manualEditor.actions.saveDraft') }}
+      </t-button>
+    </template>
+
+    <div class="manual-editor" v-if="initialLoaded">
+      <section class="setting-drawer__section">
+        <h4 class="setting-drawer__section-title">{{ $t('manualEditor.section.basic') }}</h4>
+
+        <div class="form-item">
+          <label class="form-label required">{{ $t('manualEditor.form.titleLabel') }}</label>
+          <t-input
+            v-model="form.title"
+            maxlength="100"
+            :placeholder="$t('manualEditor.form.titlePlaceholder')"
+            showLimitNumber
+          />
+        </div>
+
+        <div class="form-item">
+          <label class="form-label required">{{ $t('manualEditor.form.knowledgeBaseLabel') }}</label>
+          <div class="kb-row">
+            <t-select
+              v-model="form.kbId"
+              :disabled="kbDisabled"
+              :loading="kbLoading"
+              :options="kbOptions"
+              :placeholder="$t('manualEditor.form.knowledgeBasePlaceholder')"
+              :popup-props="{ attach: 'body', zIndex: 2600 }"
+            >
+              <template #empty>
+                <div style="padding: 20px; text-align: center; color: var(--td-text-color-placeholder);">
+                  {{ $t('manualEditor.noDocumentKnowledgeBases') }}
+                </div>
+              </template>
+            </t-select>
+            <div class="status-row" v-if="mode === 'edit'">
+              <t-tag size="small" theme="warning" variant="light" v-if="form.status === 'draft'">
+                {{ $t('manualEditor.status.draftTag') }}
+              </t-tag>
+              <t-tag size="small" theme="success" variant="light" v-else>
+                {{ $t('manualEditor.status.publishedTag') }}
+              </t-tag>
             </div>
-          </template>
-        </t-select>
-      </div>
+          </div>
+          <p v-if="lastUpdatedText" class="form-desc">{{ lastUpdatedText }}</p>
+        </div>
+      </section>
 
-      <div class="form-row">
-        <label class="form-label">{{ $t('manualEditor.form.titleLabel') }}</label>
-        <t-input
-          v-model="form.title"
-          maxlength="100"
-          :placeholder="$t('manualEditor.form.titlePlaceholder')"
-          showLimitNumber
-        />
-      </div>
+      <section class="setting-drawer__section editor-section">
+        <h4 class="setting-drawer__section-title">{{ $t('manualEditor.section.content') }}</h4>
 
-      <div class="status-row" v-if="mode === 'edit'">
-        <t-tag theme="warning" v-if="form.status === 'draft'">{{ $t('manualEditor.status.draftTag') }}</t-tag>
-        <t-tag theme="success" v-else>{{ $t('manualEditor.status.publishedTag') }}</t-tag>
-        <span v-if="lastUpdatedText" class="status-timestamp">{{ lastUpdatedText }}</span>
-      </div>
-
-      <div class="editor-toolbar">
-        <template v-for="(group, groupIndex) in toolbarGroups" :key="group.key">
-          <div class="toolbar-group">
-            <template v-for="btn in group.buttons" :key="btn.key">
-              <t-tooltip :content="btn.tooltip" placement="top">
-                <button
-                  type="button"
-                  class="toolbar-btn"
-                  :class="`btn-${btn.key}`"
-                  @mousedown.prevent
-                  @click="handleToolbarAction(btn.action)"
-                >
-                  <t-icon :name="btn.icon" size="18px" />
-                </button>
-              </t-tooltip>
+        <div class="editor-area">
+          <div class="editor-toolbar">
+            <template v-for="(group, groupIndex) in toolbarGroups" :key="group.key">
+              <div class="toolbar-group">
+                <template v-for="btn in group.buttons" :key="btn.key">
+                  <t-tooltip :content="btn.tooltip" placement="top">
+                    <button
+                      type="button"
+                      class="toolbar-btn"
+                      :class="`btn-${btn.key}`"
+                      @mousedown.prevent
+                      @click="handleToolbarAction(btn.action)"
+                    >
+                      <t-icon :name="btn.icon" size="18px" />
+                    </button>
+                  </t-tooltip>
+                </template>
+              </div>
+              <div
+                v-if="groupIndex < toolbarGroups.length - 1"
+                class="toolbar-divider"
+              ></div>
             </template>
           </div>
-          <div
-            v-if="groupIndex < toolbarGroups.length - 1"
-            class="toolbar-divider"
-          ></div>
-        </template>
-      </div>
 
-      <div class="editor-area">
-        <div class="editor-pane" v-show="activeTab === 'edit'">
-          <t-textarea
-            ref="textareaComponent"
-            v-if="!contentLoading"
-            v-model="form.content"
-            :placeholder="$t('manualEditor.form.contentPlaceholder')"
-            :autosize="{ minRows: 16, maxRows: 24 }"
-          />
-          <div v-else class="loading-placeholder">
-            <t-loading size="small" :text="$t('manualEditor.loading.content')" />
+          <div class="editor-pane" v-show="activeTab === 'edit'">
+            <t-textarea
+              ref="textareaComponent"
+              v-if="!contentLoading"
+              v-model="form.content"
+              :placeholder="$t('manualEditor.form.contentPlaceholder')"
+              class="editor-textarea"
+            />
+            <div v-else class="loading-placeholder">
+              <t-loading size="small" :text="$t('manualEditor.loading.content')" />
+            </div>
+          </div>
+          <div class="editor-pane editor-pane--preview" v-show="activeTab === 'preview'">
+            <div class="preview-container" v-html="previewHTML" />
           </div>
         </div>
-        <div class="editor-pane" v-show="activeTab === 'preview'">
-          <div class="preview-container" v-html="previewHTML" />
-        </div>
-      </div>
-
-      <div class="dialog-footer">
-        <div class="footer-left">
-          <t-button variant="outline" theme="default" @click="handleClose">
-            {{ $t('manualEditor.actions.cancel') }}
-          </t-button>
-        </div>
-        <div class="footer-right">
-          <t-tooltip :content="viewToggleTooltip" placement="top">
-            <t-button
-              variant="outline"
-              theme="default"
-              class="toggle-view-btn"
-              :class="{ active: isPreviewMode }"
-              @click="toggleEditorView"
-            >
-              <t-icon :name="viewToggleIcon" size="16px" />
-              <span>{{ viewToggleLabel }}</span>
-            </t-button>
-          </t-tooltip>
-          <t-button
-            variant="outline"
-            theme="default"
-            @click="handleSave('draft')"
-            :loading="saving && savingAction === 'draft'"
-          >
-            {{ $t('manualEditor.actions.saveDraft') }}
-          </t-button>
-          <t-button
-            theme="primary"
-            @click="handleSave('publish')"
-            :loading="saving && savingAction === 'publish'"
-          >
-            {{ $t('manualEditor.actions.publish') }}
-          </t-button>
-        </div>
-      </div>
+      </section>
     </div>
     <div v-else class="loading-wrapper">
       <t-loading size="medium" :text="$t('manualEditor.loading.preparing')" />
     </div>
-  </t-dialog>
+  </SettingDrawer>
 </template>
 
 <style scoped lang="less">
-.manual-knowledge-editor {
-  :deep(.t-dialog__body) {
-    padding: 20px 24px 12px;
-    max-height: 80vh;
-    overflow-y: auto;
-  }
-}
-
-.editor-body {
+/* 复用模型管理同款 SettingDrawer：分组 section / header 图标 / footer 按钮 / 拖拽调宽。
+   这里只负责本编辑器特有的内容样式。内容内联渲染（无 teleport），scoped 生效。 */
+.manual-editor {
   display: flex;
   flex-direction: column;
-  gap: 16px;
 }
 
-.form-row {
+.form-item {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 6px;
 }
 
 .form-label {
-  font-size: 14px;
+  font-size: 13px;
   font-weight: 500;
   color: var(--td-text-color-primary);
+
+  &.required::after {
+    content: '*';
+    margin-left: 4px;
+    color: var(--td-error-color);
+  }
+}
+
+.form-desc {
+  margin: 2px 0 0;
+  font-size: 12px;
+  color: var(--td-text-color-placeholder);
+}
+
+.kb-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+
+  :deep(.t-select) {
+    flex: 1;
+    min-width: 0;
+  }
 }
 
 .status-row {
   display: flex;
   align-items: center;
-  gap: 12px;
+  gap: 6px;
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+
+/* 内容分组：让编辑区占满，无需依赖父级 flex 链路，直接用视口高度，稳健 */
+.editor-section {
+  flex: 1;
+  min-height: 0;
 }
 
 .editor-toolbar {
   display: flex;
   flex-wrap: nowrap;
   align-items: center;
-  gap: 8px;
-  padding: 8px 12px;
-  background: var(--td-bg-color-container);
-  border: 1px solid var(--td-component-stroke);
-  border-radius: 8px;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+  gap: 6px;
+  padding: 6px 8px;
+  background: var(--td-bg-color-secondarycontainer);
+  border-bottom: 1px solid var(--td-component-stroke);
   overflow-x: auto;
+  flex-shrink: 0;
+
+  &::-webkit-scrollbar {
+    height: 0;
+  }
 }
 
 .toolbar-group {
   display: flex;
   align-items: center;
-  gap: 4px;
+  gap: 2px;
 }
 
 .toolbar-divider {
   width: 1px;
-  height: 24px;
-  background: var(--td-bg-color-secondarycontainer);
-  margin: 0 2px;
+  height: 18px;
+  background: var(--td-component-stroke);
+  margin: 0 4px;
 }
 
 .toolbar-btn {
@@ -950,90 +995,69 @@ onBeforeUnmount(() => {
   transform: translateY(0.5px);
 }
 
-:deep(.toggle-view-btn) {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 0 16px;
-  height: 32px;
-  line-height: 32px;
-  transition: all 0.18s ease;
-}
+.editor-area {
+  /* 抽屉为整屏高，减去 header/footer/基本信息分组的大致高度，
+     让编辑区占据剩余空间且不必撑满父级 flex 链路。 */
+  height: calc(100vh - 360px);
+  min-height: 280px;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--td-component-stroke);
+  border-radius: 8px;
+  overflow: hidden;
+  background: var(--td-bg-color-container);
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
 
-:deep(.toggle-view-btn .t-button__content) {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-}
-
-:deep(.toggle-view-btn .t-button__text) {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-}
-
-:deep(.toggle-view-btn .t-icon) {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  font-size: 16px;
-  width: 16px;
-  height: 16px;
-  vertical-align: middle;
-}
-
-:deep(.toggle-view-btn .t-icon svg) {
-  display: block;
-  width: 16px;
-  height: 16px;
-  vertical-align: middle;
-}
-
-:deep(.toggle-view-btn .t-button__text > span:not(.t-icon)) {
-  font-size: 13px;
-  line-height: 1.5;
-  vertical-align: middle;
-}
-
-:deep(.toggle-view-btn.active),
-:deep(.toggle-view-btn:hover) {
-  background: rgba(7, 192, 95, 0.12) !important;
-  color: var(--td-brand-color-active) !important;
-  border-color: rgba(7, 192, 95, 0.4) !important;
-  
-  .t-icon {
-    color: var(--td-brand-color-active);
+  &:focus-within {
+    border-color: var(--td-brand-color);
+    box-shadow: 0 0 0 2px rgba(7, 192, 95, 0.1);
   }
 }
 
-.status-timestamp {
-  font-size: 12px;
-  color: var(--td-text-color-disabled);
-}
-
-.editor-area {
+.editor-pane {
+  flex: 1;
+  min-height: 0;
   display: flex;
   flex-direction: column;
-}
-
-.editor-pane {
-  padding: 0;
   overflow: hidden;
   background: var(--td-bg-color-container);
 }
 
-:deep(.t-textarea__inner) {
-  font-family: var(--app-font-family-mono);
-  line-height: 1.6;
+:deep(.editor-textarea) {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  .t-textarea__inner {
+    flex: 1;
+    height: 100% !important;
+    resize: none;
+    border: none;
+    border-radius: 0;
+    padding: 14px 16px;
+    font-family: var(--app-font-family-mono);
+    font-size: 14px;
+    line-height: 1.7;
+    background: var(--td-bg-color-container);
+
+    &:focus {
+      box-shadow: none;
+    }
+  }
+}
+
+.editor-pane--preview {
+  background: var(--td-bg-color-container);
 }
 
 .preview-container {
-  min-height: 300px;
-  max-height: 520px;
+  flex: 1;
+  min-height: 0;
   overflow-y: auto;
   padding: 16px;
-  background: var(--td-bg-color-secondarycontainer);
+  background: var(--td-bg-color-container);
   font-size: 14px;
   line-height: 1.7;
   color: var(--td-text-color-primary);
@@ -1073,24 +1097,14 @@ onBeforeUnmount(() => {
   }
 }
 
-.dialog-footer {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-top: 8px;
-}
-
-.footer-right {
-  display: flex;
-  gap: 16px;
-}
-
 .loading-wrapper,
 .loading-placeholder {
   display: flex;
   align-items: center;
   justify-content: center;
-  min-height: 240px;
+  flex: 1;
+  min-height: 280px;
+  padding: 20px;
 }
 
 .empty-preview {
@@ -1098,11 +1112,4 @@ onBeforeUnmount(() => {
 }
 </style>
 
-<style lang="less">
-// 全局样式：确保 select 下拉列表在 dialog 之上
-.t-popup {
-  z-index: 2600 !important;
-}
-</style>
-
 
diff --git a/frontend/src/components/menu.vue b/frontend/src/components/menu.vue
index ee3c0792..11887929 100644
--- a/frontend/src/components/menu.vue
+++ b/frontend/src/components/menu.vue
@@ -155,7 +155,11 @@
                                     </div>
                                 </div>
                                 <div v-for="subitem in bucket.items" :key="subitem.id"
-                                    class="submenu_item_p session-chat-row session-folder-item">
+                                    class="submenu_item_p session-chat-row session-folder-item"
+                                    :class="{
+                                        'session-chat-row--active': !batchMode && subitem.path === currentSecondpath,
+                                        'session-chat-row--selected': batchMode && batchSelectedIds.includes(subitem.id),
+                                    }">
                                     <div class="session-list-row session-list-row--flat">
                                         <div class="session-list-row__body">
                                             <SessionSidebarRow :item="subitem" :batch-mode="batchMode"
@@ -187,7 +191,11 @@
                                 </span>
                             </div>
                             <div v-for="subitem in group.items" :key="subitem.id"
-                                class="submenu_item_p session-chat-row">
+                                class="submenu_item_p session-chat-row"
+                                :class="{
+                                    'session-chat-row--active': !batchMode && subitem.path === currentSecondpath,
+                                    'session-chat-row--selected': batchMode && batchSelectedIds.includes(subitem.id),
+                                }">
                                 <div class="session-list-row session-list-row--flat">
                                     <div class="session-list-row__body">
                                         <SessionSidebarRow :item="subitem" :batch-mode="batchMode"
@@ -1691,15 +1699,15 @@ const onDragHandleMouseDown = (e: MouseEvent) => {
             }
         }
 
-        &.session-chat-row:has(:deep(.submenu_item_active)) .session-list-row {
-            background: var(--td-brand-color-light);
+        &.session-chat-row--active .session-list-row {
+            background: var(--td-bg-color-container-hover);
 
             :deep(.submenu_item) {
                 color: var(--td-brand-color);
             }
 
             :deep(.menu-more) {
-                color: var(--td-brand-color);
+                color: var(--td-text-color-primary);
             }
 
             :deep(.menu-more-wrap) {
@@ -1707,7 +1715,7 @@ const onDragHandleMouseDown = (e: MouseEvent) => {
             }
         }
 
-        &.session-chat-row:has(:deep(.submenu_item_selected)) .session-list-row {
+        &.session-chat-row--selected .session-list-row {
             background: rgba(7, 192, 95, 0.05);
         }
     }
diff --git a/frontend/src/components/settings/SettingDrawer.vue b/frontend/src/components/settings/SettingDrawer.vue
index 1838ec1b..218120c3 100644
--- a/frontend/src/components/settings/SettingDrawer.vue
+++ b/frontend/src/components/settings/SettingDrawer.vue
@@ -6,7 +6,9 @@
       <div class="setting-drawer-resize-line" />
     </div>
   </teleport>
-  <t-drawer v-model:visible="drawerVisible" :size="effectiveWidth" :z-index="2500" placement="right" destroy-on-close
+  <t-drawer v-model:visible="drawerVisible" :size="effectiveWidth" :z-index="2500" placement="right"
+    :attach="attach"
+    :destroy-on-close="destroyOnClose"
     :class="['setting-drawer', { 'setting-drawer--resizing': drawerResizing }]">
     <!--
       Custom header. We replace TDesign's default header so we can put a leading
@@ -86,6 +88,23 @@ interface Props {
   confirmText?: string
   cancelText?: string
   hideFooter?: boolean
+  /**
+   * Whether to destroy the drawer body content on close. Defaults to true to
+   * match historical behavior. Heavy editors (e.g. the markdown knowledge
+   * editor) pass false so the drawer panel persists across opens — this avoids
+   * the panel being removed/re-inserted on every open, which can cause a
+   * one-frame layout flicker as it slides in.
+   */
+  destroyOnClose?: boolean
+  /**
+   * Where to render the drawer. Defaults to 'body' so the drawer escapes the
+   * app root, which carries `transform: translateZ(0)` for GPU compositing.
+   * A transformed ancestor becomes the containing block for `position: fixed`,
+   * which mis-anchors the overlay (it briefly appears mid-screen then snaps to
+   * the edge). Teleporting to <body> keeps it fixed to the viewport, matching
+   * the resize handle that is already teleported to body.
+   */
+  attach?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -100,7 +119,9 @@ const props = withDefaults(defineProps<Props>(), {
   confirmDisabled: false,
   confirmText: '',
   cancelText: '',
-  hideFooter: false
+  hideFooter: false,
+  destroyOnClose: true,
+  attach: 'body'
 })
 
 const emit = defineEmits<{
diff --git a/frontend/src/i18n/locales/en-US.ts b/frontend/src/i18n/locales/en-US.ts
index 9e76aca4..00c5b363 100755
--- a/frontend/src/i18n/locales/en-US.ts
+++ b/frontend/src/i18n/locales/en-US.ts
@@ -2052,6 +2052,11 @@ export default {
       edit: 'Edit Markdown Knowledge',
       create: 'Create Markdown Knowledge'
     },
+    description: 'Write knowledge in Markdown with live preview',
+    section: {
+      basic: 'Basic Info',
+      content: 'Content'
+    },
     labels: {
       currentKnowledgeBase: 'Current knowledge base'
     },
diff --git a/frontend/src/i18n/locales/ko-KR.ts b/frontend/src/i18n/locales/ko-KR.ts
index 369369ba..eb4fe1be 100755
--- a/frontend/src/i18n/locales/ko-KR.ts
+++ b/frontend/src/i18n/locales/ko-KR.ts
@@ -2979,6 +2979,11 @@ export default {
       edit: "Markdown 지식 편집",
       create: "온라인 Markdown 지식 편집",
     },
+    description: "Markdown으로 지식을 작성하고 실시간 미리보기 지원",
+    section: {
+      basic: "기본 정보",
+      content: "지식 내용",
+    },
     labels: {
       currentKnowledgeBase: "현재 지식베이스",
     },
diff --git a/frontend/src/i18n/locales/ru-RU.ts b/frontend/src/i18n/locales/ru-RU.ts
index 1ec38307..f1d70808 100755
--- a/frontend/src/i18n/locales/ru-RU.ts
+++ b/frontend/src/i18n/locales/ru-RU.ts
@@ -4065,6 +4065,11 @@ export default {
       edit: 'Редактировать Markdown-знание',
       create: 'Создать Markdown-знание'
     },
+    description: 'Пишите знания в Markdown с предпросмотром в реальном времени',
+    section: {
+      basic: 'Основная информация',
+      content: 'Содержимое'
+    },
     labels: {
       currentKnowledgeBase: 'Текущая база знаний'
     },
diff --git a/frontend/src/i18n/locales/zh-CN.ts b/frontend/src/i18n/locales/zh-CN.ts
index 88b9d891..a280960d 100755
--- a/frontend/src/i18n/locales/zh-CN.ts
+++ b/frontend/src/i18n/locales/zh-CN.ts
@@ -2996,6 +2996,11 @@ export default {
       edit: "编辑 Markdown 知识",
       create: "在线编辑 Markdown 知识",
     },
+    description: "使用 Markdown 编写知识内容，支持实时预览",
+    section: {
+      basic: "基本信息",
+      content: "知识内容",
+    },
     labels: {
       currentKnowledgeBase: "当前知识库",
     },
diff --git a/frontend/src/utils/chatMarkdownRenderer.test.ts b/frontend/src/utils/chatMarkdownRenderer.test.ts
index 1dcf2656..ff05370b 100644
--- a/frontend/src/utils/chatMarkdownRenderer.test.ts
+++ b/frontend/src/utils/chatMarkdownRenderer.test.ts
@@ -173,6 +173,32 @@ test('joinCitationTagsToPreviousLine keeps citations on a new line after a list'
   assert.equal(joinCitationTagsToPreviousLine(input), `1. first\n2. second\n\n${tag}`)
 })
 
+test('joinCitationTagsToPreviousLine does not merge citations onto fenced code closing delimiter', () => {
+  const tag = '<kb doc="guide.pdf" chunk_id="1" />'
+  const input = '```bash\nunzip setup.zip\n```\n\n' + tag
+  assert.equal(joinCitationTagsToPreviousLine(input), '```bash\nunzip setup.zip\n```\n\n' + tag)
+})
+
+test('renderChatMarkdown keeps fenced code blocks closed when citations follow', () => {
+  const renderer = createChatMarkdownRenderer({
+    imageRenderer: ({ href, text }) => `<img src="${href}" alt="${text}">`,
+    isValidImageUrl: () => true,
+  })
+  const tag = '<kb doc="guide.pdf" chunk_id="1" />'
+  const html = renderChatMarkdown(
+    ['```bash', 'unzip setup.zip', '```', '', tag, '', '#### Next step'].join('\n'),
+    {
+      renderer,
+      escapeMarkdown: (text) => text,
+      sanitizeHtml: (html) => html,
+    },
+  )
+
+  assert.doesNotMatch(html, /#### Next step/)
+  assert.match(html, /<h4>Next step<\/h4>/)
+  assert.equal((html.match(/<pre>/g) || []).length, 1)
+})
+
 test('collapseStandaloneCitationParagraphs merges citations across empty paragraphs', () => {
   const html = '<p>Steps:</p><p></p><p><span class="citation citation-kb" data-chunk-id="x">doc</span></p>'
   const out = collapseStandaloneCitationParagraphs(html)
diff --git a/frontend/src/utils/citationMarkdown.ts b/frontend/src/utils/citationMarkdown.ts
index acf23e06..4d5e9b1f 100644
--- a/frontend/src/utils/citationMarkdown.ts
+++ b/frontend/src/utils/citationMarkdown.ts
@@ -201,6 +201,13 @@ export function restoreCitationHtmlPlaceholders(html: string, htmlSnippets: stri
   return html.replace(HTML_PLACEHOLDER_RE, (_match, idx) => htmlSnippets[Number(idx)] || '')
 }
 
+/** Opening/closing fence for GFM fenced code blocks (up to 3 spaces indent). */
+const FENCED_CODE_DELIMITER_RE = /^ {0,3}(`{3,}|~{3,})(\s*\S.*)?\s*$/
+
+function isFencedCodeDelimiterLine(line: string): boolean {
+  return FENCED_CODE_DELIMITER_RE.test(line)
+}
+
 /** Collapse newlines around <kb/> / <web/> so marked keeps citations inline. */
 export function joinCitationTagsToPreviousLine(content: string): string {
   if (!content) return content
@@ -218,17 +225,26 @@ export function joinCitationTagsToPreviousLine(content: string): string {
   }
 
   // Blank lines before citations: join to previous prose, but keep a break after lists
+  // or fenced-code delimiters (``` / ~~~ must stay on their own line).
   result = result.replace(/\n[ \t]*\n+([ \t]*<(?:kb|web)\b)/gi, (match, kbStart, offset, full) => {
     const before = full.slice(0, offset)
     const lastLine = before.split('\n').filter((line) => line.trim()).pop() || ''
     const isListItem = /^\s*(\d+\.|[-*+])\s+\S/.test(lastLine)
-    return isListItem ? `\n\n${kbStart}` : ` ${kbStart}`
+    if (isListItem || isFencedCodeDelimiterLine(lastLine)) {
+      return `\n\n${kbStart}`
+    }
+    return ` ${kbStart}`
   })
 
   // Single newline before citation when it follows text or another citation (not after a blank line)
   result = result.replace(
     /(?<!\n)(<(?:kb|web)\b[^>]*?\s*\/?>|[ \t]*\S[^\n]*?)\n([ \t]*<(?:kb|web)\b)/g,
-    '$1 $2',
+    (match, beforePart: string, kbStart: string) => {
+      if (isFencedCodeDelimiterLine(beforePart)) {
+        return match
+      }
+      return `${beforePart} ${kbStart}`
+    },
   )
 
   return result
diff --git a/frontend/src/views/chat/components/AgentStreamDisplay.vue b/frontend/src/views/chat/components/AgentStreamDisplay.vue
index 25cd3977..5aa44697 100644
--- a/frontend/src/views/chat/components/AgentStreamDisplay.vue
+++ b/frontend/src/views/chat/components/AgentStreamDisplay.vue
@@ -269,7 +269,7 @@
                 </t-button>
                 <t-button size="small" variant="outline" shape="round" @click.stop="handleAddToKnowledge(event)"
                   :title="$t('agent.addToKnowledgeBase')">
-                  <t-icon name="add" />
+                  <t-icon name="bookmark-add" />
                 </t-button>
                 <t-tooltip v-if="event.is_fallback" :content="$t('chat.fallbackHint')" placement="top">
                   <t-button size="small" variant="outline" shape="round" class="fallback-icon-btn">
diff --git a/frontend/src/views/chat/components/botmsg.vue b/frontend/src/views/chat/components/botmsg.vue
index 7bc9bf94..4db6c934 100644
--- a/frontend/src/views/chat/components/botmsg.vue
+++ b/frontend/src/views/chat/components/botmsg.vue
@@ -50,7 +50,7 @@
                 </t-button>
                 <t-button size="small" variant="outline" shape="round" @click.stop="handleAddToKnowledge"
                     :title="$t('agent.addToKnowledgeBase')">
-                    <t-icon name="add" />
+                    <t-icon name="bookmark-add" />
                 </t-button>
                 <!-- Fallback 提示图标 -->
                 <t-tooltip v-if="session.is_fallback" :content="$t('chat.fallbackHint')" placement="top">
diff --git a/frontend/src/views/knowledge/KnowledgeBase.vue b/frontend/src/views/knowledge/KnowledgeBase.vue
index 70f7048b..cdfe39a8 100644
--- a/frontend/src/views/knowledge/KnowledgeBase.vue
+++ b/frontend/src/views/knowledge/KnowledgeBase.vue
@@ -1843,13 +1843,27 @@ const {
   },
 });
 
-const onCardClick = (item: any) => {
+const isManualDraftKnowledge = (item: KnowledgeCard) =>
+  item.type === 'manual' && item.parse_status === 'draft';
+
+const openKnowledgeItem = (item: KnowledgeCard) => {
   if (shouldSuppressDocClick()) return;
+  if (canEdit.value && isManualDraftKnowledge(item)) {
+    const index = cardList.value.findIndex((c) => c.id === item.id);
+    if (index >= 0) {
+      handleManualEdit(index, item);
+      return;
+    }
+  }
+  openCardDetails(item);
+};
+
+const onCardClick = (item: KnowledgeCard) => {
   if (batchMode.value) {
     onCardGridCheckboxChange(item.id, !selectedIds.value.has(item.id));
-  } else {
-    openCardDetails(item);
+    return;
   }
+  openKnowledgeItem(item);
 };
 
 const confirmBatchDelete = async () => {
@@ -2582,7 +2596,7 @@ async function createNewSession(value: string): Promise<void> {
                 </template>
                 <template v-else-if="cardList.length && viewMode === 'list'">
                   <DocumentListView :items="cardList" :selected-ids="selectedIds" :tag-list="tagList"
-                    :can-edit="canEdit" @open="(item: any) => { if (!shouldSuppressDocClick()) openCardDetails(item); }" @toggle-row="toggleSelectRow"
+                    :can-edit="canEdit" @open="(item: any) => openKnowledgeItem(item)" @toggle-row="toggleSelectRow"
                     @toggle-all="toggleSelectAll"
                     @action="(action: any, item: any) => handleListAction(action, item)" />
                 </template>