diff --git a/frontend/src/components/ModelEditorDialog.vue b/frontend/src/components/ModelEditorDialog.vue
index 3d8ef378..5df2abca 100644
--- a/frontend/src/components/ModelEditorDialog.vue
+++ b/frontend/src/components/ModelEditorDialog.vue
@@ -1,24 +1,15 @@
 <template>
-  <Teleport to="body">
-    <Transition name="modal">
-      <div v-if="dialogVisible" class="model-editor-overlay" @mousedown.self="handleOverlayMouseDown" @mouseup.self="handleOverlayMouseUp">
-        <div class="model-editor-modal">
-          <!-- 关闭按钮 -->
-          <button class="close-btn" @click="handleCancel" :aria-label="$t('common.close')">
-            <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
-              <path d="M15 5L5 15M5 5L15 15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-            </svg>
-          </button>
-
-          <!-- 标题区域 -->
-          <div class="modal-header">
-            <h2 class="modal-title">{{ isEdit ? $t('model.editor.editTitle') : $t('model.editor.addTitle') }}</h2>
-            <p class="modal-desc">{{ getModalDescription() }}</p>
-          </div>
-
-          <!-- 表单内容区域 -->
-          <div class="modal-body">
-            <t-form ref="formRef" :data="formData" :rules="rules" layout="vertical">
+  <SettingDrawer
+    :visible="dialogVisible"
+    :title="isEdit ? $t('model.editor.editTitle') : $t('model.editor.addTitle')"
+    :description="getModalDescription()"
+    :confirm-loading="saving"
+    :confirm-disabled="formData.provider === 'weknoracloud' && wkcCredentialState !== 'configured'"
+    @update:visible="(v: boolean) => dialogVisible = v"
+    @confirm="handleConfirm"
+    @cancel="handleCancel"
+  >
+    <t-form ref="formRef" :data="formData" :rules="rules" layout="vertical">
         <!-- 模型来源 -->
         <div class="form-item">
           <label class="form-label required">{{ $t('model.editor.sourceLabel') }}</label>
@@ -329,21 +320,7 @@
         </div>
 
       </t-form>
-          </div>
-
-          <!-- 底部按钮区域 -->
-          <div class="modal-footer">
-            <t-button theme="default" variant="outline" @click="handleCancel">
-              {{ $t('common.cancel') }}
-            </t-button>
-            <t-button theme="primary" @click="handleConfirm" :loading="saving" :disabled="formData.provider === 'weknoracloud' && wkcCredentialState !== 'configured'">
-              {{ $t('common.save') }}
-            </t-button>
-          </div>
-        </div>
-      </div>
-    </Transition>
-  </Teleport>
+  </SettingDrawer>
 </template>
 
 <script setup lang="ts">
@@ -353,6 +330,7 @@ import { checkOllamaModels, checkRemoteModel, testEmbeddingModel, checkRerankMod
 import { getWeKnoraCloudStatus } from '@/api/model'
 import { useI18n } from 'vue-i18n'
 import { useUIStore } from '@/stores/ui'
+import SettingDrawer from '@/components/settings/SettingDrawer.vue'
 
 interface CustomHeaderItem {
   key: string
@@ -707,6 +685,11 @@ const checkOllamaServiceStatus = async () => {
   } finally {
     checkingOllamaStatus.value = false
   }
+
+  // Ollama 不可用时，新增场景下默认切换到 remote
+  if (ollamaServiceStatus.value === false && !isEdit.value && formData.value.source === 'local') {
+    formData.value.source = 'remote'
+  }
 }
 
 // 打开Ollama设置窗口
@@ -728,28 +711,46 @@ const goToOllamaSettings = async () => {
   console.log('uiStore.openSettings调用完成')
 }
 
+// 上一次打开时的 modelData id：用来判断切换模型/新增 vs. 同一次新增的连续打开
+const lastOpenedModelId = ref<string | null>(null)
+
 // 监听 visible 变化，初始化表单
 watch(() => props.visible, (val) => {
   if (val) {
-    // 锁定背景滚动
-    document.body.style.overflow = 'hidden'
-
     // 检查Ollama服务状态
     checkOllamaServiceStatus()
 
     // 从 API 加载 Model Provider 列表
     loadProviders()
 
+    // 每次打开都清理上一次遗留的校验/检测结果，避免编辑别的模型时
+    // 直接显示上一次的“连接成功”
+    modelChecked.value = false
+    modelAvailable.value = false
+    remoteChecked.value = false
+    remoteAvailable.value = false
+    remoteMessage.value = ''
+    dimensionChecked.value = false
+    dimensionSuccess.value = false
+    dimensionMessage.value = ''
+
+    const currentId = props.modelData?.id ?? null
+
     if (props.modelData) {
+      // 编辑：始终用最新的 modelData 覆盖
       formData.value = {
         ...props.modelData,
         customHeaders: Array.isArray(props.modelData.customHeaders)
           ? props.modelData.customHeaders.map(h => ({ key: h.key, value: h.value }))
           : []
       }
-    } else {
+    } else if (lastOpenedModelId.value !== null || !formData.value.id) {
+      // 上次是编辑某个模型，或第一次新增 → 重置成空白
       resetForm()
     }
+    // 否则：连续两次"新增"打开（中间是点遮罩/ESC 关闭的）→ 保留上次填写
+
+    lastOpenedModelId.value = currentId
 
     // ReRank 模型强制使用 remote 来源（Ollama 不支持 ReRank）
     if (props.modelType === 'rerank') {
@@ -760,9 +761,6 @@ watch(() => props.visible, (val) => {
     if (formData.value.provider === 'weknoracloud') {
       checkWkcCredentialStatus()
     }
-  } else {
-    // 恢复背景滚动
-    document.body.style.overflow = ''
   }
 })
 
@@ -1121,6 +1119,9 @@ const handleConfirm = async () => {
     
     emit('confirm', { ...formData.value })
     dialogVisible.value = false
+    // 保存成功后重置草稿，下次打开新增模型时是空白
+    resetForm()
+    lastOpenedModelId.value = null
     // 移除此处的成功提示，由父组件统一处理
   } catch (error) {
     console.error('表单验证失败:', error)
@@ -1253,133 +1254,19 @@ watch(() => formData.value.modelName, () => {
   dimensionMessage.value = ''
 })
 
-// 取消
+// 取消（点击底部"取消"按钮触发；点遮罩/ESC 不触发，从而保留草稿）
 const handleCancel = () => {
+  resetForm()
+  lastOpenedModelId.value = null
   dialogVisible.value = false
 }
-
-// 遮罩层点击关闭：只有 mousedown 和 mouseup 都发生在遮罩层上才关闭，
-// 防止在输入框中拖选文字时鼠标滑出弹窗导致误关闭
-let overlayMouseDownFired = false
-const handleOverlayMouseDown = () => {
-  overlayMouseDownFired = true
-}
-const handleOverlayMouseUp = () => {
-  if (overlayMouseDownFired) {
-    handleCancel()
-  }
-  overlayMouseDownFired = false
-}
 </script>
 
 <style lang="less" scoped>
-// 遮罩层
-.model-editor-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1200;
-  backdrop-filter: blur(4px);
-  overflow: hidden;
-  padding: 20px;
-}
-
-// 弹窗主体
-.model-editor-modal {
-  position: relative;
-  width: 100%;
-  max-width: 560px;
-  max-height: 90vh;
-  background: var(--td-bg-color-container);
-  border-radius: 12px;
-  box-shadow: 0 6px 28px rgba(15, 23, 42, 0.08);
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-// 关闭按钮
-.close-btn {
-  position: absolute;
-  top: 16px;
-  right: 16px;
-  width: 32px;
-  height: 32px;
-  border: none;
-  background: transparent;
-  border-radius: 6px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--td-text-color-secondary);
-  transition: all 0.15s ease;
-  z-index: 10;
-
-  &:hover {
-    background: var(--td-bg-color-secondarycontainer);
-    color: var(--td-text-color-primary);
-  }
-}
-
-// 标题区域
-.modal-header {
-  padding: 24px 24px 16px;
-  border-bottom: 1px solid var(--td-component-stroke);
-  flex-shrink: 0;
-}
-
-.modal-title {
-  margin: 0 0 6px 0;
-  font-size: 18px;
-  font-weight: 600;
-  color: var(--td-text-color-primary);
-}
-
-.modal-desc {
-  margin: 0;
-  font-size: 13px;
-  color: var(--td-text-color-secondary);
-  line-height: 1.5;
-}
-
-// 内容区域
-.modal-body {
-  flex: 1;
-  overflow-y: auto;
-  padding: 24px;
-  background: var(--td-bg-color-container);
-
-  // 自定义滚动条
-  &::-webkit-scrollbar {
-    width: 6px;
-  }
-
-  &::-webkit-scrollbar-track {
-    background: var(--td-bg-color-secondarycontainer);
-    border-radius: 3px;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background: var(--td-bg-color-component-disabled);
-    border-radius: 3px;
-    transition: background 0.15s;
-
-    &:hover {
-      background: var(--td-bg-color-component-disabled);
-    }
-  }
-
-  :deep(.t-form) {
-    .t-form-item {
-      display: none;
-    }
+// 原生 t-form-item 容器置空（本组件使用自定义 .form-item + 手写 label）
+:deep(.t-form) {
+  .t-form-item {
+    display: none;
   }
 }
 
@@ -1407,38 +1294,14 @@ const handleOverlayMouseUp = () => {
   }
 }
 
-// 输入框样式
+// 输入框样式：只在最外层 .t-input 上调字号，避免在内部 wrap/inner 上重复加边
+// 与 border-radius，造成视觉上"嵌套圆角容器"的错觉
 :deep(.t-input),
 :deep(.t-select),
 :deep(.t-textarea),
 :deep(.t-input-number) {
   width: 100%;
   font-size: 13px;
-
-  .t-input__inner,
-  .t-input__wrap,
-  input,
-  textarea {
-    font-size: 13px;
-    border-radius: 6px;
-    border-color: var(--td-component-stroke);
-    transition: all 0.15s ease;
-  }
-
-  &:hover .t-input__inner,
-  &:hover .t-input__wrap,
-  &:hover input,
-  &:hover textarea {
-    border-color: var(--td-component-stroke);
-  }
-
-  &.t-is-focused .t-input__inner,
-  &.t-is-focused .t-input__wrap,
-  &.t-is-focused input,
-  &.t-is-focused textarea {
-    border-color: var(--td-brand-color);
-    box-shadow: 0 0 0 2px rgba(7, 192, 95, 0.1);
-  }
 }
 
 // 厂商选择器样式 — 移至非 scoped 块，因为 t-select popup 渲染到 body 下
@@ -1482,72 +1345,6 @@ const handleOverlayMouseUp = () => {
   }
 }
 
-// 底部按钮区域
-.modal-footer {
-  padding: 16px 24px;
-  border-top: 1px solid var(--td-component-stroke);
-  display: flex;
-  justify-content: flex-end;
-  gap: 12px;
-  flex-shrink: 0;
-  background: var(--td-bg-color-secondarycontainer);
-
-  :deep(.t-button) {
-    min-width: 80px;
-    height: 36px;
-    font-weight: 500;
-    font-size: 14px;
-    border-radius: 6px;
-    transition: all 0.15s ease;
-
-    &.t-button--theme-primary {
-      background: var(--td-brand-color);
-      border-color: var(--td-brand-color);
-
-      &:hover {
-        background: var(--td-brand-color);
-        border-color: var(--td-brand-color);
-      }
-
-      &:active {
-        background: var(--td-brand-color-active);
-        border-color: var(--td-brand-color-active);
-      }
-    }
-
-    &.t-button--variant-outline {
-      color: var(--td-text-color-secondary);
-      border-color: var(--td-component-stroke);
-
-      &:hover {
-        border-color: var(--td-brand-color);
-        color: var(--td-brand-color);
-        background: rgba(7, 192, 95, 0.04);
-      }
-    }
-  }
-}
-
-// 过渡动画
-.modal-enter-active,
-.modal-leave-active {
-  transition: opacity 0.2s ease;
-
-  .model-editor-modal {
-    transition: transform 0.2s ease, opacity 0.2s ease;
-  }
-}
-
-.modal-enter-from,
-.modal-leave-to {
-  opacity: 0;
-
-  .model-editor-modal {
-    transform: scale(0.95);
-    opacity: 0;
-  }
-}
-
 // API 测试区域
 .api-test-section {
   display: flex;
@@ -1903,20 +1700,36 @@ const handleOverlayMouseUp = () => {
   // 覆盖 TDesign option 默认固定高度，让两行内容正常展示
   .t-select-option {
     height: auto !important;
-    padding: 0 8px;
+    padding: 6px 12px;
+    border-radius: 6px;
+    margin: 0 4px;
+    outline: none;
+
+    &:focus,
+    &:focus-visible {
+      outline: none;
+    }
+  }
+
+  // 命中态：浅一点的底色，去掉默认的描边/反色
+  .t-select-option.t-is-selected {
+    background-color: var(--td-brand-color-light);
+    color: var(--td-text-color-primary);
+    font-weight: 500;
   }
 
   .provider-option {
     display: flex;
     flex-direction: column;
     gap: 2px;
-    padding: 6px 0;
+    width: 100%;
+    min-width: 0;
 
     .provider-name {
-      font-size: 14px;
+      font-size: 13px;
       font-weight: 500;
       color: var(--td-text-color-primary);
-      line-height: 22px;
+      line-height: 20px;
     }
 
     .provider-desc {
diff --git a/frontend/src/components/settings/SettingCard.vue b/frontend/src/components/settings/SettingCard.vue
new file mode 100644
index 00000000..7a349964
--- /dev/null
+++ b/frontend/src/components/settings/SettingCard.vue
@@ -0,0 +1,152 @@
+<template>
+  <div class="setting-card" :class="{ 'setting-card--disabled': disabled }">
+    <div class="setting-card__header">
+      <h3 class="setting-card__title" :title="title">{{ title }}</h3>
+      <div class="setting-card__header-right">
+        <slot name="controls" />
+        <t-dropdown
+          v-if="actions && actions.length > 0"
+          :options="actions"
+          placement="bottom-right"
+          attach="body"
+          @click="(data: any) => emit('action', data.value)"
+        >
+          <t-button variant="text" shape="square" size="small" class="setting-card__more">
+            <t-icon name="more" />
+          </t-button>
+        </t-dropdown>
+      </div>
+    </div>
+    <div v-if="$slots.tags" class="setting-card__tags">
+      <slot name="tags" />
+    </div>
+    <p v-if="description" class="setting-card__desc">{{ description }}</p>
+    <div v-if="$slots.meta" class="setting-card__meta">
+      <slot name="meta" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface DropdownOption {
+  content: string
+  value: string
+  theme?: 'default' | 'success' | 'warning' | 'error' | 'primary'
+}
+
+interface Props {
+  title: string
+  description?: string
+  disabled?: boolean
+  actions?: DropdownOption[]
+}
+
+withDefaults(defineProps<Props>(), {
+  description: '',
+  disabled: false,
+  actions: () => []
+})
+
+const emit = defineEmits<{
+  (e: 'action', value: string): void
+}>()
+</script>
+
+<style lang="less" scoped>
+.setting-card {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 16px;
+  border: 1px solid var(--td-component-stroke);
+  border-radius: 8px;
+  background: var(--td-bg-color-container);
+  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
+  min-width: 0;
+
+  &:hover {
+    border-color: var(--td-brand-color);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+  }
+
+  &--disabled {
+    background: var(--td-bg-color-secondarycontainer);
+
+    .setting-card__title {
+      color: var(--td-text-color-secondary);
+    }
+
+    &:hover {
+      border-color: var(--td-brand-color-light);
+      box-shadow: none;
+    }
+  }
+}
+
+.setting-card__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  min-width: 0;
+}
+
+.setting-card__title {
+  flex: 1;
+  min-width: 0;
+  margin: 0;
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 1.4;
+  color: var(--td-text-color-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.setting-card__header-right {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+}
+
+.setting-card__more {
+  color: var(--td-text-color-placeholder);
+  padding: 4px;
+
+  &:hover {
+    background: var(--td-bg-color-secondarycontainer);
+    color: var(--td-text-color-primary);
+  }
+}
+
+.setting-card__tags {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+  min-height: 20px;
+}
+
+.setting-card__desc {
+  margin: 0;
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--td-text-color-secondary);
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  word-break: break-all;
+}
+
+.setting-card__meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 12px;
+  font-size: 12px;
+  color: var(--td-text-color-placeholder);
+}
+</style>
diff --git a/frontend/src/components/settings/SettingDrawer.vue b/frontend/src/components/settings/SettingDrawer.vue
new file mode 100644
index 00000000..c9f0d9e9
--- /dev/null
+++ b/frontend/src/components/settings/SettingDrawer.vue
@@ -0,0 +1,118 @@
+<template>
+  <t-drawer
+    v-model:visible="drawerVisible"
+    :header="title"
+    :size="width"
+    placement="right"
+    destroy-on-close
+  >
+    <div class="setting-drawer__body">
+      <p v-if="description" class="setting-drawer__desc">{{ description }}</p>
+      <slot />
+    </div>
+    <template v-if="!hideFooter" #footer>
+      <div class="setting-drawer__footer">
+        <div class="setting-drawer__footer-left">
+          <slot name="footer-left" />
+        </div>
+        <div class="setting-drawer__footer-right">
+          <t-button theme="default" variant="outline" @click="handleCancel">
+            {{ cancelText || t('common.cancel') }}
+          </t-button>
+          <t-button
+            theme="primary"
+            :loading="confirmLoading"
+            :disabled="confirmDisabled"
+            @click="handleConfirm"
+          >
+            {{ confirmText || t('common.save') }}
+          </t-button>
+        </div>
+      </div>
+    </template>
+  </t-drawer>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+interface Props {
+  visible: boolean
+  title: string
+  description?: string
+  width?: string
+  confirmLoading?: boolean
+  confirmDisabled?: boolean
+  confirmText?: string
+  cancelText?: string
+  hideFooter?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  description: '',
+  width: '500px',
+  confirmLoading: false,
+  confirmDisabled: false,
+  confirmText: '',
+  cancelText: '',
+  hideFooter: false
+})
+
+const emit = defineEmits<{
+  (e: 'update:visible', value: boolean): void
+  (e: 'confirm'): void
+  (e: 'cancel'): void
+}>()
+
+const { t } = useI18n()
+
+const drawerVisible = computed({
+  get: () => props.visible,
+  set: (val) => emit('update:visible', val)
+})
+
+const handleConfirm = () => emit('confirm')
+const handleCancel = () => {
+  emit('cancel')
+  emit('update:visible', false)
+}
+</script>
+
+<style lang="less" scoped>
+.setting-drawer__body {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.setting-drawer__desc {
+  margin: 0;
+  font-size: 13px;
+  color: var(--td-text-color-secondary);
+  line-height: 1.6;
+}
+
+.setting-drawer__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  width: 100%;
+}
+
+.setting-drawer__footer-left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1;
+  min-width: 0;
+}
+
+.setting-drawer__footer-right {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-shrink: 0;
+}
+</style>
diff --git a/frontend/src/components/settings/useConfirmDelete.ts b/frontend/src/components/settings/useConfirmDelete.ts
new file mode 100644
index 00000000..f52463ba
--- /dev/null
+++ b/frontend/src/components/settings/useConfirmDelete.ts
@@ -0,0 +1,36 @@
+import { DialogPlugin } from 'tdesign-vue-next'
+import { useI18n } from 'vue-i18n'
+
+interface ConfirmDeleteOptions {
+  title?: string
+  body: string
+  confirmText?: string
+  cancelText?: string
+  onConfirm: () => Promise<void> | void
+}
+
+/**
+ * 统一的删除确认交互，基于 TDesign DialogPlugin.confirm。
+ * 取代散落在各处的 window.confirm / t-popconfirm / 自定义 Dialog 写法。
+ */
+export function useConfirmDelete() {
+  const { t } = useI18n()
+
+  return (opts: ConfirmDeleteOptions) => {
+    const dialog = DialogPlugin.confirm({
+      header: opts.title || (t('common.confirmDelete') as string),
+      body: opts.body,
+      confirmBtn: opts.confirmText || (t('common.delete') as string),
+      cancelBtn: opts.cancelText || (t('common.cancel') as string),
+      theme: 'warning',
+      onConfirm: async () => {
+        try {
+          await opts.onConfirm()
+        } finally {
+          dialog.hide()
+        }
+      }
+    })
+    return dialog
+  }
+}
diff --git a/frontend/src/i18n/locales/en-US.ts b/frontend/src/i18n/locales/en-US.ts
index 0074845e..faa77f80 100755
--- a/frontend/src/i18n/locales/en-US.ts
+++ b/frontend/src/i18n/locales/en-US.ts
@@ -2855,6 +2855,13 @@ export default {
   modelSettings: {
     title: 'Model Settings',
     description: 'Manage different types of AI models, including local Ollama and remote APIs',
+    typeShort: {
+      chat: 'Chat',
+      embedding: 'Embedding',
+      rerank: 'ReRank',
+      vllm: 'Vision',
+      asr: 'Speech',
+    },
     actions: {
       addModel: 'Add Model',
       setDefault: 'Set as Default'
diff --git a/frontend/src/i18n/locales/ko-KR.ts b/frontend/src/i18n/locales/ko-KR.ts
index cb5c9116..1200a1ac 100755
--- a/frontend/src/i18n/locales/ko-KR.ts
+++ b/frontend/src/i18n/locales/ko-KR.ts
@@ -2902,6 +2902,13 @@ export default {
   modelSettings: {
     title: "모델 설정",
     description: "다양한 유형의 AI 모델을 관리합니다. Ollama 로컬 모델과 원격 API를 지원합니다",
+    typeShort: {
+      chat: "대화",
+      embedding: "Embedding",
+      rerank: "ReRank",
+      vllm: "비전",
+      asr: "음성",
+    },
     actions: {
       addModel: "모델 추가",
       setDefault: "기본값으로 설정",
diff --git a/frontend/src/i18n/locales/ru-RU.ts b/frontend/src/i18n/locales/ru-RU.ts
index 57dd89d0..80ac774d 100755
--- a/frontend/src/i18n/locales/ru-RU.ts
+++ b/frontend/src/i18n/locales/ru-RU.ts
@@ -2660,6 +2660,13 @@ export default {
   modelSettings: {
     title: 'Настройки моделей',
     description: 'Управление типами AI‑моделей: локальные (Ollama) и удалённые API',
+    typeShort: {
+      chat: 'Чат',
+      embedding: 'Embedding',
+      rerank: 'ReRank',
+      vllm: 'Зрение',
+      asr: 'Речь',
+    },
     actions: {
       addModel: 'Добавить модель',
       setDefault: 'Сделать по умолчанию'
diff --git a/frontend/src/i18n/locales/zh-CN.ts b/frontend/src/i18n/locales/zh-CN.ts
index e42782d2..7fecf219 100755
--- a/frontend/src/i18n/locales/zh-CN.ts
+++ b/frontend/src/i18n/locales/zh-CN.ts
@@ -2852,6 +2852,13 @@ export default {
   modelSettings: {
     title: "模型配置",
     description: "管理不同类型的 AI 模型，支持 Ollama 本地模型和远程 API",
+    typeShort: {
+      chat: "对话",
+      embedding: "Embedding",
+      rerank: "ReRank",
+      vllm: "视觉",
+      asr: "语音",
+    },
     actions: {
       addModel: "添加模型",
       setDefault: "设为默认",
diff --git a/frontend/src/views/settings/McpSettings.vue b/frontend/src/views/settings/McpSettings.vue
index f0b57d17..b9ffb52f 100644
--- a/frontend/src/views/settings/McpSettings.vue
+++ b/frontend/src/views/settings/McpSettings.vue
@@ -11,9 +11,9 @@
       <t-loading :text="$t('common.loading')" />
     </div>
 
-    <div v-else class="services-container">
-      <div class="services-header">
-        <div class="header-info">
+    <template v-else>
+      <div class="settings-toolbar">
+        <div class="toolbar-info">
           <h3>{{ $t('mcpSettings.configuredServices') }}</h3>
           <p>{{ $t('mcpSettings.manageAndTest') }}</p>
         </div>
@@ -24,73 +24,67 @@
       </div>
 
       <div v-if="services.length === 0" class="empty-state">
-        <t-empty :description="$t('mcpSettings.empty')" >
-          <t-button theme="primary" @click="handleAdd">{{ $t('mcpSettings.addFirst') }}</t-button>
+        <t-empty :description="$t('mcpSettings.empty')">
+          <t-button theme="primary" size="small" @click="handleAdd">
+            <template #icon><t-icon name="add" /></template>
+            {{ $t('mcpSettings.addFirst') }}
+          </t-button>
         </t-empty>
       </div>
 
-      <div v-else class="services-list">
-        <div v-for="service in services" :key="service.id" class="service-card">
-          <div class="service-info">
-            <div class="service-header">
-              <div class="service-name">
-                {{ service.name }}
-                <t-tag 
-                  v-if="service.is_builtin"
-                  theme="warning"
-                  size="small"
-                  variant="light"
-                >
-                  {{ $t('mcpSettings.builtin') }}
-                </t-tag>
-                <t-tag 
-                  :theme="getTransportTypeTheme(service.transport_type)" 
-                  size="small"
-                  variant="light"
-                >
-                  {{ getTransportTypeLabel(service.transport_type) }}
-                </t-tag>
-              </div>
-              <div class="service-controls">
-                <t-switch 
-                  v-model="service.enabled" 
-                  @change="() => handleToggleEnabled(service)"
-                  size="medium"
-                  :disabled="service.is_builtin"
-                />
-                <t-dropdown 
-                  v-if="!service.is_builtin"
-                  :options="getServiceOptions(service)" 
-                  @click="(data: any) => handleMenuAction(data, service)"
-                  placement="bottom-right"
-                  :disabled="testing"
-                >
-                  <t-button variant="text" shape="square" size="small" class="more-btn" :disabled="testing">
-                    <t-icon name="more" />
-                  </t-button>
-                </t-dropdown>
-                <t-dropdown 
-                  v-else
-                  :options="getBuiltinServiceOptions(service)" 
-                  @click="(data: any) => handleMenuAction(data, service)"
-                  placement="bottom-right"
-                  :disabled="testing"
-                >
-                  <t-button variant="text" shape="square" size="small" class="more-btn" :disabled="testing">
-                    <t-icon name="more" />
-                  </t-button>
-                </t-dropdown>
-              </div>
-            </div>
-            <div v-if="service.description" class="service-description">
-              {{ service.description }}
-            </div>
-          </div>
-        </div>
+      <div v-else class="services-grid">
+        <SettingCard
+          v-for="service in services"
+          :key="service.id"
+          :title="service.name"
+          :description="service.description || ''"
+          :disabled="service.is_builtin"
+          :actions="service.is_builtin ? getBuiltinServiceOptions() : getServiceOptions()"
+          @action="(value: string) => handleMenuAction({ value }, service)"
+        >
+          <template #tags>
+            <t-tag
+              :theme="getTransportTypeTheme(service.transport_type)"
+              size="small"
+              variant="light"
+            >
+              {{ getTransportTypeLabel(service.transport_type) }}
+            </t-tag>
+            <t-tag
+              v-if="service.is_builtin"
+              theme="warning"
+              size="small"
+              variant="light"
+            >
+              {{ $t('mcpSettings.builtin') }}
+            </t-tag>
+            <t-tag
+              :theme="service.enabled ? 'success' : 'default'"
+              size="small"
+              variant="light"
+            >
+              {{ service.enabled ? $t('common.on') : $t('common.off') }}
+            </t-tag>
+          </template>
+          <template #controls>
+            <t-switch
+              v-model="service.enabled"
+              size="medium"
+              :disabled="service.is_builtin"
+              @change="() => handleToggleEnabled(service)"
+            />
+          </template>
+          <template #meta>
+            <span v-if="service.url" class="service-meta-item" :title="service.url">
+              <t-icon name="link" size="12px" />
+              <span class="service-meta-text">{{ service.url }}</span>
+            </span>
+          </template>
+        </SettingCard>
       </div>
-    </div>
+    </template>
 
-    <!-- Add/Edit Dialog -->
+    <!-- Add/Edit Drawer -->
     <McpServiceDialog
       v-model:visible="dialogVisible"
       :service="currentService"
@@ -109,7 +103,7 @@
 
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
-import { MessagePlugin, DialogPlugin } from 'tdesign-vue-next'
+import { MessagePlugin } from 'tdesign-vue-next'
 import { useI18n } from 'vue-i18n'
 import {
   listMCPServices,
@@ -121,8 +115,11 @@ import {
 } from '@/api/mcp-service'
 import McpServiceDialog from './components/McpServiceDialog.vue'
 import McpTestResult from './components/McpTestResult.vue'
+import SettingCard from '@/components/settings/SettingCard.vue'
+import { useConfirmDelete } from '@/components/settings/useConfirmDelete'
 
 const { t } = useI18n()
+const confirmDelete = useConfirmDelete()
 
 const services = ref<MCPService[]>([])
 const loading = ref(false)
@@ -170,13 +167,12 @@ const handleDialogSuccess = () => {
 // Handle toggle enabled/disabled
 const handleToggleEnabled = async (service: MCPService) => {
   if (!service || !service.id) return
-  
+
   const originalState = service.enabled
   try {
     await updateMCPService(service.id, { enabled: service.enabled })
     MessagePlugin.success(service.enabled ? t('mcpSettings.toasts.enabled') : t('mcpSettings.toasts.disabled'))
   } catch (error) {
-    // Revert on error
     service.enabled = originalState
     MessagePlugin.error(t('mcpSettings.toasts.updateStateFailed'))
     console.error('Failed to update MCP service:', error)
@@ -186,28 +182,22 @@ const handleToggleEnabled = async (service: MCPService) => {
 // Handle test button click
 const handleTest = async (service: MCPService) => {
   if (!service || !service.id) return
-  
+
   testingServiceName.value = service.name
   testing.value = true
-  
-  // 显示测试开始提示
+
   MessagePlugin.info({
     content: t('mcpSettings.toasts.testing', { name: service.name }),
-    duration: 0, // 不自动关闭
+    duration: 0,
     closeBtn: false
   })
-  
+
   try {
     const result = await testMCPService(service.id)
-    
-    console.log('Test result received:', result)
-    
-    // 关闭所有消息提示
+
     MessagePlugin.closeAll()
-    
-    // 检查结果是否存在
+
     if (!result) {
-      // 即使没有结果，也显示错误对话框
       testResult.value = {
         success: false,
         message: t('mcpSettings.toasts.noResponse')
@@ -215,48 +205,35 @@ const handleTest = async (service: MCPService) => {
       testDialogVisible.value = true
       return
     }
-    
-    // 设置测试结果
+
     testResult.value = result
-    
-    // 显示详细结果对话框
-    console.log('Opening test dialog, result:', testResult.value)
     testDialogVisible.value = true
   } catch (error: any) {
-    // 关闭所有消息提示
     MessagePlugin.closeAll()
-    
-    // 显示错误信息
+
     const errorMessage = error?.response?.data?.error?.message || error?.message || t('mcpSettings.toasts.testFailed')
     console.error('Failed to test MCP service:', error)
-    
-    // 即使出错也显示结果对话框，显示错误信息
+
     testResult.value = {
       success: false,
       message: errorMessage
     }
     testDialogVisible.value = true
   } finally {
-    // 确保关闭 loading
     testing.value = false
   }
 }
 
 // Handle delete button click
-const handleDelete = async (service: MCPService) => {
+const handleDelete = (service: MCPService) => {
   if (!service || !service.id) return
-  
-  const confirmDialog = DialogPlugin.confirm({
-    header: t('common.confirmDelete'),
+
+  confirmDelete({
     body: t('mcpSettings.deleteConfirmBody', { name: service.name || t('mcpSettings.unnamed') }),
-    confirmBtn: t('common.delete'),
-    cancelBtn: t('common.cancel'),
-    theme: 'warning',
     onConfirm: async () => {
       try {
         await deleteMCPService(service.id)
         MessagePlugin.success(t('mcpSettings.toasts.deleted'))
-        confirmDialog.hide()
         loadServices()
       } catch (error) {
         MessagePlugin.error(t('mcpSettings.toasts.deleteFailed'))
@@ -267,44 +244,34 @@ const handleDelete = async (service: MCPService) => {
 }
 
 // Get service options for dropdown menu
-const getServiceOptions = (service: MCPService) => {
+const getServiceOptions = () => {
   return [
-    {
-      content: t('mcpSettings.actions.test'),
-      value: `test-${service.id}`
-    },
-    {
-      content: t('common.edit'),
-      value: `edit-${service.id}`
-    },
-    {
-      content: t('common.delete'),
-      value: `delete-${service.id}`,
-      theme: 'error'
-    }
+    { content: t('mcpSettings.actions.test'), value: 'test' },
+    { content: t('common.edit'), value: 'edit' },
+    { content: t('common.delete'), value: 'delete', theme: 'error' as const }
   ]
 }
 
-// Get service options for builtin services (test only)
-const getBuiltinServiceOptions = (service: MCPService) => {
+// Builtin: 仅测试
+const getBuiltinServiceOptions = () => {
   return [
-    {
-      content: t('mcpSettings.actions.test'),
-      value: `test-${service.id}`
-    }
+    { content: t('mcpSettings.actions.test'), value: 'test' }
   ]
 }
 
 // Handle menu action
 const handleMenuAction = (data: { value: string }, service: MCPService) => {
-  const value = data.value
-  
-  if (value.startsWith('test-')) {
-    handleTest(service)
-  } else if (value.startsWith('edit-')) {
-    handleEdit(service)
-  } else if (value.startsWith('delete-')) {
-    handleDelete(service)
+  if (testing.value) return
+  switch (data.value) {
+    case 'test':
+      handleTest(service)
+      break
+    case 'edit':
+      handleEdit(service)
+      break
+    case 'delete':
+      handleDelete(service)
+      break
   }
 }
 
@@ -347,7 +314,7 @@ onMounted(() => {
 }
 
 .section-header {
-  margin-bottom: 32px;
+  margin-bottom: 28px;
 
   h2 {
     font-size: 20px;
@@ -360,7 +327,7 @@ onMounted(() => {
     font-size: 14px;
     color: var(--td-text-color-secondary);
     margin: 0;
-    line-height: 1.5;
+    line-height: 1.6;
   }
 }
 
@@ -369,20 +336,16 @@ onMounted(() => {
   text-align: center;
 }
 
-.services-container {
-  margin-top: 16px;
-}
-
-.services-header {
+.settings-toolbar {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
+  gap: 12px;
   margin-bottom: 16px;
-  padding-bottom: 16px;
-  border-bottom: 1px solid var(--td-component-stroke);
 
-  .header-info {
+  .toolbar-info {
     flex: 1;
+    min-width: 0;
 
     h3 {
       font-size: 15px;
@@ -411,91 +374,23 @@ onMounted(() => {
   }
 }
 
-.services-list {
-  display: flex;
-  flex-direction: column;
-  gap: 0;
-  border: 1px solid var(--td-component-stroke);
-  border-radius: 6px;
-  padding: 16px;
-  background: var(--td-bg-color-secondarycontainer);
+.services-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
 }
 
-.service-card {
-  padding: 12px 0;
-  border-bottom: 1px solid var(--td-component-stroke);
-  transition: all 0.2s;
+.service-meta-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  max-width: 100%;
+  overflow: hidden;
 
-  &:last-child {
-    border-bottom: none;
-    padding-bottom: 0;
-  }
-
-  &:first-child {
-    padding-top: 0;
-  }
-}
-
-.service-info {
-  .service-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: 8px;
-
-    .service-name {
-      font-size: 15px;
-      font-weight: 500;
-      color: var(--td-text-color-primary);
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      flex: 1;
-    }
-
-    .service-controls {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      flex-shrink: 0;
-
-      .more-btn {
-        color: var(--td-text-color-placeholder);
-        padding: 4px;
-        transition: all 0.2s;
-
-        &:hover {
-          background: var(--td-bg-color-secondarycontainer);
-          color: var(--td-text-color-primary);
-        }
-      }
-    }
-  }
-
-  .service-description {
-    font-size: 13px;
-    color: var(--td-text-color-secondary);
-    margin-bottom: 8px;
-    line-height: 1.5;
-  }
-
-  .service-meta {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    font-size: 12px;
-    color: var(--td-text-color-placeholder);
-
-    .meta-item {
-      display: flex;
-      align-items: center;
-      gap: 4px;
-
-      .meta-icon {
-        font-size: 12px;
-      }
-    }
+  .service-meta-text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 }
 </style>
-
diff --git a/frontend/src/views/settings/ModelSettings.vue b/frontend/src/views/settings/ModelSettings.vue
index 05a439db..af4f465a 100644
--- a/frontend/src/views/settings/ModelSettings.vue
+++ b/frontend/src/views/settings/ModelSettings.vue
@@ -1,8 +1,22 @@
 <template>
   <div class="model-settings">
     <div class="section-header">
-      <h2>{{ $t('modelSettings.title') }}</h2>
-      <p class="section-description">{{ $t('modelSettings.description') }}</p>
+      <div class="section-header__top">
+        <div class="section-header__text">
+          <h2>{{ $t('modelSettings.title') }}</h2>
+          <p class="section-description">{{ $t('modelSettings.description') }}</p>
+        </div>
+        <t-dropdown
+          :options="addModelOptions"
+          placement="bottom-right"
+          @click="(data: any) => openAddDialog(data.value)"
+        >
+          <t-button theme="primary" size="small">
+            <template #icon><add-icon /></template>
+            {{ $t('modelSettings.actions.addModel') }}
+          </t-button>
+        </t-dropdown>
+      </div>
 
       <div class="builtin-models-hint" role="note">
         <p class="builtin-hint-label">{{ $t('modelSettings.builtinModels.title') }}</p>
@@ -18,267 +32,66 @@
       </div>
     </div>
 
-    <!-- 对话模型 -->
-    <div class="settings-group model-type-group" data-model-type="chat">
-      <div class="section-subheader">
-        <div class="subheader-text">
-          <h3>{{ $t('modelSettings.chat.title') }}</h3>
-          <p class="section-desc">{{ $t('modelSettings.chat.desc') }}</p>
-        </div>
-        <t-button theme="primary" size="small" @click="openAddDialog('chat')">
-          <template #icon>
-            <add-icon />
-          </template>
-          {{ $t('modelSettings.actions.addModel') }}
-        </t-button>
-      </div>
-      
-      <div v-if="chatModels.length > 0" class="model-list-container">
-        <div v-for="model in chatModels" :key="model.id" class="model-card" :class="{ 'builtin-model': model.isBuiltin }">
-          <div class="model-info">
-            <div class="model-name">
-              {{ model.name }}
-              <t-tag v-if="model.isBuiltin" theme="primary" size="small">{{ $t('modelSettings.builtinTag') }}</t-tag>
-            </div>
-            <div class="model-meta">
-              <span class="source-tag">{{ model.source === 'local' ? 'Ollama' : $t('modelSettings.source.remote') }}</span>
-              <!-- <span class="model-id">{{ model.modelName }}</span> -->
-            </div>
-          </div>
-          <div class="model-actions">
-            <t-dropdown 
-              :options="getModelOptions('chat', model)" 
-              @click="(data: any) => handleMenuAction(data, 'chat', model)"
-              placement="bottom-right"
-              attach="body"
-            >
-              <t-button variant="text" shape="square" size="small" class="more-btn">
-                <t-icon name="more" />
-              </t-button>
-            </t-dropdown>
-          </div>
-        </div>
-      </div>
-      <div v-else class="empty-models">
-        <p>{{ $t('modelSettings.chat.empty') }}</p>
-        <t-button theme="primary" size="small" @click="openAddDialog('chat')">
-          <template #icon>
-            <add-icon />
-          </template>
-          {{ $t('modelSettings.actions.addModel') }}
-        </t-button>
-      </div>
+    <t-tabs v-model="activeTypeFilter" class="model-type-tabs">
+      <t-tab-panel value="all" :label="`${$t('common.all')}(${allLegacyModels.length})`" />
+      <t-tab-panel value="chat" :label="`${$t('modelSettings.typeShort.chat')}(${countByType('chat')})`" />
+      <t-tab-panel value="embedding" :label="`${$t('modelSettings.typeShort.embedding')}(${countByType('embedding')})`" />
+      <t-tab-panel value="rerank" :label="`${$t('modelSettings.typeShort.rerank')}(${countByType('rerank')})`" />
+      <t-tab-panel value="vllm" :label="`${$t('modelSettings.typeShort.vllm')}(${countByType('vllm')})`" />
+      <t-tab-panel value="asr" :label="`${$t('modelSettings.typeShort.asr')}(${countByType('asr')})`" />
+    </t-tabs>
+
+    <div v-if="filteredModels.length > 0" class="model-grid">
+      <SettingCard
+        v-for="model in filteredModels"
+        :key="`${model._modelType}-${model.id}`"
+        :title="model.name"
+        :disabled="model.isBuiltin"
+        :actions="getModelOptions(model._modelType, model)"
+        @action="(value: string) => handleMenuAction({ value }, model._modelType, model)"
+      >
+        <template #tags>
+          <t-tag size="small" variant="light" :class="`model-type-tag model-type-tag--${model._modelType}`">
+            {{ typeLabel(model._modelType) }}
+          </t-tag>
+          <t-tag size="small" variant="light-outline">
+            {{ model.source === 'local' ? 'Ollama' : sourceLabel(model._modelType) }}
+          </t-tag>
+          <t-tag v-if="model.isBuiltin" theme="warning" size="small" variant="light">
+            {{ $t('modelSettings.builtinTag') }}
+          </t-tag>
+        </template>
+        <template #meta>
+          <span v-if="model.baseUrl" class="model-meta-item" :title="model.baseUrl">
+            <t-icon name="link" size="12px" />
+            <span class="model-meta-text">{{ model.baseUrl }}</span>
+          </span>
+          <span v-else-if="model.source === 'local'" class="model-meta-item">
+            <t-icon name="desktop" size="12px" />
+            <span>Ollama local</span>
+          </span>
+          <span v-if="model._modelType === 'embedding' && model.dimension" class="model-meta-item">
+            {{ $t('model.editor.dimensionLabel') }}: {{ model.dimension }}
+          </span>
+        </template>
+      </SettingCard>
+    </div>
+    <div v-else class="empty-state">
+      <t-empty :description="emptyHint">
+        <t-dropdown
+          :options="addModelOptions"
+          placement="bottom"
+          @click="(data: any) => openAddDialog(data.value)"
+        >
+          <t-button theme="primary" size="small">
+            <template #icon><add-icon /></template>
+            {{ $t('modelSettings.actions.addModel') }}
+          </t-button>
+        </t-dropdown>
+      </t-empty>
     </div>
 
-    <!-- Embedding 模型 -->
-    <div class="settings-group model-type-group" data-model-type="embedding">
-      <div class="section-subheader">
-        <div class="subheader-text">
-          <h3>{{ $t('modelSettings.embedding.title') }}</h3>
-          <p class="section-desc">{{ $t('modelSettings.embedding.desc') }}</p>
-        </div>
-        <t-button theme="primary" size="small" @click="openAddDialog('embedding')">
-          <template #icon>
-            <add-icon />
-          </template>
-          {{ $t('modelSettings.actions.addModel') }}
-        </t-button>
-      </div>
-      
-      <div v-if="embeddingModels.length > 0" class="model-list-container">
-        <div v-for="model in embeddingModels" :key="model.id" class="model-card" :class="{ 'builtin-model': model.isBuiltin }">
-          <div class="model-info">
-            <div class="model-name">
-              {{ model.name }}
-              <t-tag v-if="model.isBuiltin" theme="primary" size="small">{{ $t('modelSettings.builtinTag') }}</t-tag>
-            </div>
-            <div class="model-meta">
-              <span class="source-tag">{{ model.source === 'local' ? 'Ollama' : $t('modelSettings.source.remote') }}</span>
-              <!-- <span class="model-id">{{ model.modelName }}</span> -->
-              <span v-if="model.dimension" class="dimension">{{ $t('model.editor.dimensionLabel') }}: {{ model.dimension }}</span>
-            </div>
-          </div>
-          <div class="model-actions">
-            <t-dropdown 
-              :options="getModelOptions('embedding', model)" 
-              @click="(data: any) => handleMenuAction(data, 'embedding', model)"
-              placement="bottom-right"
-              attach="body"
-            >
-              <t-button variant="text" shape="square" size="small" class="more-btn">
-                <t-icon name="more" />
-              </t-button>
-            </t-dropdown>
-          </div>
-        </div>
-      </div>
-      <div v-else class="empty-models">
-        <p>{{ $t('modelSettings.embedding.empty') }}</p>
-        <t-button theme="primary" size="small" @click="openAddDialog('embedding')">
-          <template #icon>
-            <add-icon />
-          </template>
-          {{ $t('modelSettings.actions.addModel') }}
-        </t-button>
-      </div>
-    </div>
-
-    <!-- ReRank 模型 -->
-    <div class="settings-group model-type-group" data-model-type="rerank">
-      <div class="section-subheader">
-        <div class="subheader-text">
-          <h3>{{ $t('modelSettings.rerank.title') }}</h3>
-          <p class="section-desc">{{ $t('modelSettings.rerank.desc') }}</p>
-        </div>
-        <t-button theme="primary" size="small" @click="openAddDialog('rerank')">
-          <template #icon>
-            <add-icon />
-          </template>
-          {{ $t('modelSettings.actions.addModel') }}
-        </t-button>
-      </div>
-      
-      <div v-if="rerankModels.length > 0" class="model-list-container">
-        <div v-for="model in rerankModels" :key="model.id" class="model-card" :class="{ 'builtin-model': model.isBuiltin }">
-          <div class="model-info">
-            <div class="model-name">
-              {{ model.name }}
-              <t-tag v-if="model.isBuiltin" theme="primary" size="small">{{ $t('modelSettings.builtinTag') }}</t-tag>
-            </div>
-            <div class="model-meta">
-              <span class="source-tag">{{ model.source === 'local' ? 'Ollama' : $t('modelSettings.source.remote') }}</span>
-              <!-- <span class="model-id">{{ model.modelName }}</span> -->
-            </div>
-          </div>
-          <div class="model-actions">
-            <t-dropdown 
-              :options="getModelOptions('rerank', model)" 
-              @click="(data: any) => handleMenuAction(data, 'rerank', model)"
-              placement="bottom-right"
-              attach="body"
-            >
-              <t-button variant="text" shape="square" size="small" class="more-btn">
-                <t-icon name="more" />
-              </t-button>
-            </t-dropdown>
-          </div>
-        </div>
-      </div>
-      <div v-else class="empty-models">
-        <p>{{ $t('modelSettings.rerank.empty') }}</p>
-        <t-button theme="primary" size="small" @click="openAddDialog('rerank')">
-          <template #icon>
-            <add-icon />
-          </template>
-          {{ $t('modelSettings.actions.addModel') }}
-        </t-button>
-      </div>
-    </div>
-
-    <!-- VLLM 视觉模型 -->
-    <div class="settings-group model-type-group" data-model-type="vllm">
-      <div class="section-subheader">
-        <div class="subheader-text">
-          <h3>{{ $t('modelSettings.vllm.title') }}</h3>
-          <p class="section-desc">{{ $t('modelSettings.vllm.desc') }}</p>
-        </div>
-        <t-button theme="primary" size="small" @click="openAddDialog('vllm')">
-          <template #icon>
-            <add-icon />
-          </template>
-          {{ $t('modelSettings.actions.addModel') }}
-        </t-button>
-      </div>
-      
-      <div v-if="vllmModels.length > 0" class="model-list-container">
-        <div v-for="model in vllmModels" :key="model.id" class="model-card" :class="{ 'builtin-model': model.isBuiltin }">
-          <div class="model-info">
-            <div class="model-name">
-              {{ model.name }}
-              <t-tag v-if="model.isBuiltin" theme="primary" size="small">{{ $t('modelSettings.builtinTag') }}</t-tag>
-            </div>
-            <div class="model-meta">
-              <span class="source-tag">{{ model.source === 'local' ? 'Ollama' : $t('modelSettings.source.openaiCompatible') }}</span>
-              <!-- <span class="model-id">{{ model.modelName }}</span> -->
-            </div>
-          </div>
-          <div class="model-actions">
-            <t-dropdown 
-              :options="getModelOptions('vllm', model)" 
-              @click="(data: any) => handleMenuAction(data, 'vllm', model)"
-              placement="bottom-right"
-              attach="body"
-            >
-              <t-button variant="text" shape="square" size="small" class="more-btn">
-                <t-icon name="more" />
-              </t-button>
-            </t-dropdown>
-          </div>
-        </div>
-      </div>
-      <div v-else class="empty-models">
-        <p>{{ $t('modelSettings.vllm.empty') }}</p>
-        <t-button theme="primary" size="small" @click="openAddDialog('vllm')">
-          <template #icon>
-            <add-icon />
-          </template>
-          {{ $t('modelSettings.actions.addModel') }}
-        </t-button>
-      </div>
-    </div>
-
-    <!-- STT 语音模型 -->
-    <div class="settings-group model-type-group" data-model-type="asr">
-      <div class="section-subheader">
-        <div class="subheader-text">
-          <h3>{{ $t('modelSettings.asr.title') }}</h3>
-          <p class="section-desc">{{ $t('modelSettings.asr.desc') }}</p>
-        </div>
-        <t-button theme="primary" size="small" @click="openAddDialog('asr')">
-          <template #icon>
-            <add-icon />
-          </template>
-          {{ $t('modelSettings.actions.addModel') }}
-        </t-button>
-      </div>
-
-      <div v-if="asrModels.length > 0" class="model-list-container">
-        <div v-for="model in asrModels" :key="model.id" class="model-card" :class="{ 'builtin-model': model.isBuiltin }">
-          <div class="model-info">
-            <div class="model-name">
-              {{ model.name }}
-              <t-tag v-if="model.isBuiltin" theme="primary" size="small">{{ $t('modelSettings.builtinTag') }}</t-tag>
-            </div>
-            <div class="model-meta">
-              <span class="source-tag">{{ model.source === 'local' ? 'Ollama' : $t('modelSettings.source.openaiCompatible') }}</span>
-            </div>
-          </div>
-          <div class="model-actions">
-            <t-dropdown
-              :options="getModelOptions('asr', model)"
-              @click="(data: any) => handleMenuAction(data, 'asr', model)"
-              placement="bottom-right"
-              attach="body"
-            >
-              <t-button variant="text" shape="square" size="small" class="more-btn">
-                <t-icon name="more" />
-              </t-button>
-            </t-dropdown>
-          </div>
-        </div>
-      </div>
-      <div v-else class="empty-models">
-        <p>{{ $t('modelSettings.asr.empty') }}</p>
-        <t-button theme="primary" size="small" @click="openAddDialog('asr')">
-          <template #icon>
-            <add-icon />
-          </template>
-          {{ $t('modelSettings.actions.addModel') }}
-        </t-button>
-      </div>
-    </div>
-
-    <!-- 模型编辑器弹窗 -->
+    <!-- 模型编辑器抽屉 -->
     <ModelEditorDialog
       v-model:visible="showDialog"
       :model-type="currentModelType"
@@ -295,74 +108,107 @@ import { MessagePlugin } from 'tdesign-vue-next'
 import { AddIcon } from 'tdesign-icons-vue-next'
 import { useI18n } from 'vue-i18n'
 import ModelEditorDialog from '@/components/ModelEditorDialog.vue'
+import SettingCard from '@/components/settings/SettingCard.vue'
+import { useConfirmDelete } from '@/components/settings/useConfirmDelete'
 import { listModels, createModel, updateModel as updateModelAPI, deleteModel as deleteModelAPI, type ModelConfig } from '@/api/model'
 
 const { t } = useI18n()
+const confirmDelete = useConfirmDelete()
+
+type ModelType = 'chat' | 'embedding' | 'rerank' | 'vllm' | 'asr'
+type FilterType = 'all' | ModelType
 
 const showDialog = ref(false)
-const currentModelType = ref<'chat' | 'embedding' | 'rerank' | 'vllm' | 'asr'>('chat')
+const currentModelType = ref<ModelType>('chat')
 const editingModel = ref<any>(null)
 const loading = ref(true)
+const activeTypeFilter = ref<FilterType>('all')
 
 // 模型列表数据
 const allModels = ref<ModelConfig[]>([])
 
-// 根据类型过滤模型
-const chatModels = computed(() => 
-  allModels.value
-    .filter(m => m.type === 'KnowledgeQA')
-    .map(convertToLegacyFormat)
-)
+// 后端 type → 前端分组 type 的映射
+const backendTypeToModelType: Record<string, ModelType> = {
+  KnowledgeQA: 'chat',
+  Embedding: 'embedding',
+  Rerank: 'rerank',
+  VLLM: 'vllm',
+  ASR: 'asr'
+}
 
-const embeddingModels = computed(() => 
-  allModels.value
-    .filter(m => m.type === 'Embedding')
-    .map(convertToLegacyFormat)
-)
-
-const rerankModels = computed(() => 
-  allModels.value
-    .filter(m => m.type === 'Rerank')
-    .map(convertToLegacyFormat)
-)
-
-const vllmModels = computed(() =>
-  allModels.value
-    .filter(m => m.type === 'VLLM')
-    .map(convertToLegacyFormat)
-)
-
-const asrModels = computed(() =>
-  allModels.value
-    .filter(m => m.type === 'ASR')
-    .map(convertToLegacyFormat)
-)
-
-// 将后端模型格式转换为旧的前端格式
+// 将后端模型格式转换为旧的前端格式（附带 _modelType 便于渲染）
 function convertToLegacyFormat(model: ModelConfig) {
   return {
     id: model.id!,
     name: model.name,
     source: model.source,
-    modelName: model.name,  // 显示名称作为模型名
+    modelName: model.name,
     baseUrl: model.parameters.base_url || '',
     apiKey: model.parameters.api_key || '',
-    provider: model.parameters.provider || '', // 添加 provider 字段
+    provider: model.parameters.provider || '',
     dimension: model.parameters.embedding_parameters?.dimension,
     isBuiltin: model.is_builtin || false,
     supportsVision: model.parameters.supports_vision || false,
-    // 将后端 map 形式转换为前端可编辑的数组形式
     customHeaders: model.parameters.custom_headers
       ? Object.entries(model.parameters.custom_headers).map(([key, value]) => ({ key, value: String(value) }))
-      : []
+      : [],
+    _modelType: backendTypeToModelType[model.type] || 'chat' as ModelType
   }
 }
 
+// 平铺 + 过滤
+const allLegacyModels = computed(() => allModels.value.map(convertToLegacyFormat))
+const filteredModels = computed(() => {
+  if (activeTypeFilter.value === 'all') return allLegacyModels.value
+  return allLegacyModels.value.filter(m => m._modelType === activeTypeFilter.value)
+})
+
+const countByType = (type: ModelType) => allLegacyModels.value.filter(m => m._modelType === type).length
+
+// "+新增模型" 下拉菜单
+const addModelOptions = computed(() => ([
+  { content: t('modelSettings.typeShort.chat'), value: 'chat' },
+  { content: t('modelSettings.typeShort.embedding'), value: 'embedding' },
+  { content: t('modelSettings.typeShort.rerank'), value: 'rerank' },
+  { content: t('modelSettings.typeShort.vllm'), value: 'vllm' },
+  { content: t('modelSettings.typeShort.asr'), value: 'asr' }
+]))
+
+const typeLabel = (type: ModelType) => {
+  const map: Record<ModelType, string> = {
+    chat: t('modelSettings.typeShort.chat'),
+    embedding: t('modelSettings.typeShort.embedding'),
+    rerank: t('modelSettings.typeShort.rerank'),
+    vllm: t('modelSettings.typeShort.vllm'),
+    asr: t('modelSettings.typeShort.asr')
+  }
+  return map[type]
+}
+
+const sourceLabel = (type: ModelType) => {
+  // vllm / asr 的 remote 文案特殊，其余走通用 remote 文案
+  if (type === 'vllm' || type === 'asr') {
+    return t('modelSettings.source.openaiCompatible')
+  }
+  return t('modelSettings.source.remote')
+}
+
+const emptyHint = computed(() => {
+  if (activeTypeFilter.value === 'all') return t('modelSettings.chat.empty')
+  const map: Record<ModelType, string> = {
+    chat: t('modelSettings.chat.empty'),
+    embedding: t('modelSettings.embedding.empty'),
+    rerank: t('modelSettings.rerank.empty'),
+    vllm: t('modelSettings.vllm.empty'),
+    asr: t('modelSettings.asr.empty')
+  }
+  return map[activeTypeFilter.value as ModelType]
+})
+
 // 加载模型列表
 const loadModels = async () => {
   loading.value = true
   try {
-    // 直接获取所有模型，不分类型
     const models = await listModels()
     allModels.value = models
   } catch (error: any) {
@@ -374,15 +220,14 @@ const loadModels = async () => {
 }
 
 // 打开添加对话框
-const openAddDialog = (type: 'chat' | 'embedding' | 'rerank' | 'vllm' | 'asr') => {
+const openAddDialog = (type: ModelType) => {
   currentModelType.value = type
   editingModel.value = null
   showDialog.value = true
 }
 
 // 编辑模型
-const editModel = (type: 'chat' | 'embedding' | 'rerank' | 'vllm' | 'asr', model: any) => {
-  // 内置模型不能编辑
+const editModel = (type: ModelType, model: any) => {
   if (model.isBuiltin) {
     MessagePlugin.warning(t('modelSettings.toasts.builtinCannotEdit'))
     return
@@ -395,25 +240,22 @@ const editModel = (type: 'chat' | 'embedding' | 'rerank' | 'vllm' | 'asr', model
 // 保存模型
 const handleModelSave = async (modelData: any) => {
   try {
-    // 字段校验
     if (!modelData.modelName || !modelData.modelName.trim()) {
       MessagePlugin.warning(t('modelSettings.toasts.nameRequired'))
       return
     }
-    
+
     if (modelData.modelName.trim().length > 100) {
       MessagePlugin.warning(t('modelSettings.toasts.nameTooLong'))
       return
     }
-    
-    // Remote 类型必须填写 baseUrl
+
     if (modelData.source === 'remote') {
       if (!modelData.baseUrl || !modelData.baseUrl.trim()) {
         MessagePlugin.warning(t('modelSettings.toasts.baseUrlRequired'))
         return
       }
-      
-      // 校验 Base URL 格式
+
       try {
         new URL(modelData.baseUrl.trim())
       } catch {
@@ -421,16 +263,14 @@ const handleModelSave = async (modelData: any) => {
         return
       }
     }
-    
-    // Embedding 模型必须填写维度
+
     if (currentModelType.value === 'embedding') {
       if (!modelData.dimension || modelData.dimension < 128 || modelData.dimension > 4096) {
         MessagePlugin.warning(t('modelSettings.toasts.dimensionInvalid'))
         return
       }
     }
-    
-    // 将前端 Key-Value 数组形式的自定义 Header 转换成后端期望的 map
+
     const customHeadersMap: Record<string, string> = {}
     if (Array.isArray(modelData.customHeaders)) {
       for (const item of modelData.customHeaders) {
@@ -442,16 +282,15 @@ const handleModelSave = async (modelData: any) => {
       }
     }
 
-    // 将前端格式转换为后端格式
     const apiModelData: ModelConfig = {
-      name: modelData.modelName.trim(), // 使用 modelName 作为 name，并去除首尾空格
+      name: modelData.modelName.trim(),
       type: getModelType(currentModelType.value),
       source: modelData.source,
       description: '',
       parameters: {
         base_url: modelData.baseUrl?.trim() || '',
         api_key: modelData.apiKey?.trim() || '',
-        provider: modelData.provider || '', // 添加 provider 字段
+        provider: modelData.provider || '',
         ...(Object.keys(customHeadersMap).length > 0 ? { custom_headers: customHeadersMap } : {}),
         ...(currentModelType.value === 'embedding' && modelData.dimension ? {
           embedding_parameters: {
@@ -468,16 +307,14 @@ const handleModelSave = async (modelData: any) => {
     }
 
     if (editingModel.value && editingModel.value.id) {
-      // 更新现有模型
       await updateModelAPI(editingModel.value.id, apiModelData)
       MessagePlugin.success(t('modelSettings.toasts.updated'))
     } else {
-      // 添加新模型
       await createModel(apiModelData)
       MessagePlugin.success(t('modelSettings.toasts.added'))
     }
-    
-    // 重新加载模型列表
+
+    showDialog.value = false
     await loadModels()
   } catch (error: any) {
     console.error('保存模型失败:', error)
@@ -486,18 +323,16 @@ const handleModelSave = async (modelData: any) => {
 }
 
 // 删除模型
-const deleteModel = async (type: 'chat' | 'embedding' | 'rerank' | 'vllm' | 'asr', modelId: string) => {
-  // 检查是否是内置模型
+const deleteModel = async (_type: ModelType, modelId: string) => {
   const model = allModels.value.find(m => m.id === modelId)
   if (model?.is_builtin) {
     MessagePlugin.warning(t('modelSettings.toasts.builtinCannotDelete'))
     return
   }
-  
+
   try {
     await deleteModelAPI(modelId)
     MessagePlugin.success(t('modelSettings.toasts.deleted'))
-    // 重新加载模型列表
     await loadModels()
   } catch (error: any) {
     console.error('删除模型失败:', error)
@@ -506,53 +341,49 @@ const deleteModel = async (type: 'chat' | 'embedding' | 'rerank' | 'vllm' | 'asr
 }
 
 // 获取模型操作菜单选项
-const getModelOptions = (type: 'chat' | 'embedding' | 'rerank' | 'vllm' | 'asr', model: any) => {
+const getModelOptions = (type: ModelType, model: any) => {
   const options: any[] = []
-  
-  // 内置模型不能编辑和删除
+
   if (model.isBuiltin) {
     return options
   }
-  
-  // 编辑选项
+
   options.push({
     content: t('common.edit'),
     value: `edit-${type}-${model.id}`
   })
 
-  // 复制选项
   options.push({
     content: t('common.copy'),
     value: `copy-${type}-${model.id}`
   })
 
-  // 删除选项
   options.push({
     content: t('common.delete'),
     value: `delete-${type}-${model.id}`,
     theme: 'error'
   })
-  
+
   return options
 }
 
 // 处理菜单操作
-const handleMenuAction = (data: { value: string }, type: 'chat' | 'embedding' | 'rerank' | 'vllm' | 'asr', model: any) => {
+const handleMenuAction = (data: { value: string }, type: ModelType, model: any) => {
   const value = data.value
-  
+
   if (value.indexOf('edit-') === 0) {
     editModel(type, model)
   } else if (value.indexOf('copy-') === 0) {
     copyModel(type, model.id)
   } else if (value.indexOf('delete-') === 0) {
-    // 使用确认对话框进行确认
-    if (confirm(t('modelSettings.confirmDelete'))) {
-      deleteModel(type, model.id)
-    }
+    confirmDelete({
+      body: t('modelSettings.confirmDelete'),
+      onConfirm: () => deleteModel(type, model.id)
+    })
   }
 }
 
-// 生成不重复的复制名称：原名 + 复制后缀（若已存在则追加序号）
+// 生成不重复的复制名称
 const generateCopyName = (originalName: string): string => {
   const suffix = t('modelSettings.copySuffix')
   const existingNames = new Set(allModels.value.map(m => m.name))
@@ -566,7 +397,7 @@ const generateCopyName = (originalName: string): string => {
 }
 
 // 复制模型
-const copyModel = async (_type: 'chat' | 'embedding' | 'rerank' | 'vllm' | 'asr', modelId: string) => {
+const copyModel = async (_type: ModelType, modelId: string) => {
   const source = allModels.value.find(m => m.id === modelId)
   if (!source) {
     return
@@ -595,7 +426,7 @@ const copyModel = async (_type: 'chat' | 'embedding' | 'rerank' | 'vllm' | 'asr'
 }
 
 // 获取后端模型类型
-function getModelType(type: 'chat' | 'embedding' | 'rerank' | 'vllm' | 'asr'): 'KnowledgeQA' | 'Embedding' | 'Rerank' | 'VLLM' | 'ASR' {
+function getModelType(type: ModelType): 'KnowledgeQA' | 'Embedding' | 'Rerank' | 'VLLM' | 'ASR' {
   const typeMap = {
     chat: 'KnowledgeQA' as const,
     embedding: 'Embedding' as const,
@@ -606,7 +437,6 @@ function getModelType(type: 'chat' | 'embedding' | 'rerank' | 'vllm' | 'asr'): '
   return typeMap[type]
 }
 
-// 组件挂载时加载模型列表
 onMounted(() => {
   loadModels()
 })
@@ -618,21 +448,7 @@ onMounted(() => {
 }
 
 .section-header {
-  margin-bottom: 32px;
-
-  h2 {
-    font-size: 20px;
-    font-weight: 600;
-    color: var(--td-text-color-primary);
-    margin: 0 0 8px 0;
-  }
-
-  .section-description {
-    font-size: 14px;
-    color: var(--td-text-color-secondary);
-    margin: 0 0 16px 0;
-    line-height: 1.5;
-  }
+  margin-bottom: 28px;
 }
 
 .builtin-models-hint {
@@ -669,176 +485,127 @@ onMounted(() => {
   }
 }
 
-.settings-group {
-  display: flex;
-  flex-direction: column;
-}
-
-.model-type-group {
-  margin-bottom: 32px;
-  padding-bottom: 32px;
-  border-bottom: 1px solid var(--td-component-stroke);
-
-  &:last-of-type {
-    margin-bottom: 0;
-    padding-bottom: 0;
-    border-bottom: none;
-  }
-}
-
-.section-subheader {
+.section-header__top {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   gap: 16px;
-  margin-bottom: 16px;
+  margin-bottom: 8px;
 
-  .subheader-text {
+  .section-header__text {
     flex: 1;
     min-width: 0;
   }
 
-  h3 {
-    font-size: 16px;
+  h2 {
+    font-size: 20px;
     font-weight: 600;
     color: var(--td-text-color-primary);
-    margin: 0 0 4px 0;
+    margin: 0 0 8px 0;
   }
 
-  .section-desc {
-    font-size: 13px;
+  .section-description {
+    font-size: 14px;
     color: var(--td-text-color-secondary);
     margin: 0;
-    line-height: 1.5;
+    line-height: 1.6;
   }
 
   :deep(.t-button) {
     flex-shrink: 0;
+    margin-top: 4px;
   }
 }
 
-.model-list-container {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
+.model-type-tabs {
+  margin-bottom: 16px;
 
-.model-card {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 14px 16px;
-  border: 1px solid var(--td-component-stroke);
-  border-radius: 8px;
-  background: var(--td-bg-color-container);
-  transition: border-color 0.2s ease, background-color 0.2s ease;
-  position: relative;
-  overflow: visible;
-
-  &:hover {
-    border-color: var(--td-brand-color);
+  :deep(.t-tabs__nav-item) {
+    font-size: 13px;
   }
 
-  &.builtin-model {
-    background: var(--td-bg-color-secondarycontainer);
-    border-color: var(--td-component-stroke);
-
-    &:hover {
-      border-color: var(--td-brand-color-light);
-    }
-
-    .model-info {
-      .model-name {
-        color: var(--td-text-color-secondary);
-      }
-
-      .model-meta {
-        .source-tag {
-          background: var(--td-bg-color-container);
-          color: var(--td-text-color-placeholder);
-        }
-      }
-    }
-  }
-}
-
-.model-info {
-  flex: 1;
-  min-width: 0;
-
-  .model-name {
-    font-size: 14px;
-    font-weight: 500;
-    color: var(--td-text-color-primary);
-    margin-bottom: 6px;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  }
-
-  .model-meta {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    font-size: 12px;
-    color: var(--td-text-color-secondary);
-
-    .source-tag {
-      padding: 2px 8px;
-      background: var(--td-component-stroke);
-      border-radius: 3px;
-      font-size: 11px;
-      font-weight: 500;
-    }
-
-    .model-id {
-      font-family: monospace;
-      color: var(--td-text-color-secondary);
-    }
-
-    .dimension {
-      color: var(--td-text-color-placeholder);
-    }
-  }
-}
-
-.model-actions {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  flex-shrink: 0;
-  position: relative;
-  z-index: 1001;
-
-  .more-btn {
-    color: var(--td-text-color-placeholder);
-    padding: 4px;
-
-    &:hover {
-      background: var(--td-bg-color-secondarycontainer);
-      color: var(--td-text-color-primary);
-    }
-  }
-}
-
-.empty-models {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 16px;
-  padding: 32px;
-  text-align: center;
-  color: var(--td-text-color-placeholder);
-  border: 1px dashed var(--td-component-stroke);
-  border-radius: 8px;
-  font-size: 14px;
-
-  p {
+  :deep(.t-tabs__nav-item-wrapper) {
+    padding: 0 12px;
     margin: 0;
   }
+
+  :deep(.t-tabs__operations) {
+    display: none;
+  }
+
+  :deep(.t-tabs__nav-scroll) {
+    overflow-x: auto;
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  :deep(.t-tabs__content) {
+    display: none;
+  }
+}
+
+.model-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.model-meta-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  max-width: 100%;
+  overflow: hidden;
+
+  .model-meta-text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+// 5 种模型类型各自的 tag 配色
+:deep(.model-type-tag) {
+  &--chat {
+    background: #E8F3FF;
+    color: #0052D9;
+  }
+
+  &--embedding {
+    background: #F0E9FF;
+    color: #6235BB;
+  }
+
+  &--rerank {
+    background: #FEF3E6;
+    color: #B85C00;
+  }
+
+  &--vllm {
+    background: #FEECEC;
+    color: #C93E3E;
+  }
+
+  &--asr {
+    background: #E7F7F2;
+    color: #118053;
+  }
+}
+
+.empty-state {
+  padding: 64px 0;
+  text-align: center;
+
+  :deep(.t-empty__description) {
+    font-size: 14px;
+    color: var(--td-text-color-placeholder);
+    margin-bottom: 16px;
+  }
 }
 
-// Tag 样式优化
 :deep(.t-tag) {
   border-radius: 3px;
   padding: 2px 8px;
@@ -851,16 +618,9 @@ onMounted(() => {
     color: var(--td-brand-color);
   }
 
-  &.t-tag--theme-success {
-    background: var(--td-success-color-light);
-    color: var(--td-brand-color-active);
-  }
-
   &.t-size-s {
     height: 20px;
     line-height: 16px;
   }
 }
-
-// Dropdown 菜单样式已统一至 @/assets/dropdown-menu.less
 </style>
diff --git a/frontend/src/views/settings/WebSearchSettings.vue b/frontend/src/views/settings/WebSearchSettings.vue
index 7a5f6ff6..3a6694cf 100644
--- a/frontend/src/views/settings/WebSearchSettings.vue
+++ b/frontend/src/views/settings/WebSearchSettings.vue
@@ -5,141 +5,138 @@
       <p class="section-description">{{ t('webSearchSettings.description') }}</p>
     </div>
 
-    <div class="settings-group">
-      <div class="section-subheader">
-        <h3>{{ t('webSearchSettings.providersTitle') }}</h3>
+    <div class="settings-toolbar">
+      <h3>{{ t('webSearchSettings.providersTitle') }}</h3>
+      <t-button theme="primary" size="small" @click="openAddDialog">
+        <template #icon><add-icon /></template>
+        {{ t('webSearchSettings.addProvider') }}
+      </t-button>
+    </div>
+
+    <!-- Provider List -->
+    <div v-if="providerEntities.length > 0" class="provider-grid">
+      <SettingCard
+        v-for="entity in providerEntities"
+        :key="entity.id"
+        :title="entity.name"
+        :description="entity.description || ''"
+        :actions="getProviderOptions(entity)"
+        @action="(value: string) => handleMenuAction({ value }, entity)"
+      >
+        <template #tags>
+          <t-tag theme="primary" size="small" variant="light">
+            {{ entity.provider }}
+          </t-tag>
+          <t-tag v-if="entity.is_default" theme="success" size="small" variant="light">
+            {{ t('webSearchSettings.default') }}
+          </t-tag>
+          <t-tag v-if="isEntityFree(entity)" theme="warning" size="small" variant="light">
+            {{ t('webSearchSettings.free') }}
+          </t-tag>
+        </template>
+        <template #meta>
+          <span v-if="entity.parameters?.proxy_url" class="provider-meta-item" :title="entity.parameters.proxy_url">
+            <t-icon name="internet" size="12px" />
+            <span class="provider-meta-text">{{ entity.parameters.proxy_url }}</span>
+          </span>
+        </template>
+      </SettingCard>
+    </div>
+
+    <!-- Empty State -->
+    <div v-else class="empty-state">
+      <t-empty :description="t('webSearchSettings.noProvidersDesc')">
         <t-button theme="primary" size="small" @click="openAddDialog">
           <template #icon><add-icon /></template>
           {{ t('webSearchSettings.addProvider') }}
         </t-button>
-      </div>
-
-      <!-- Provider List -->
-      <div v-if="providerEntities.length > 0" class="provider-list">
-        <div v-for="entity in providerEntities" :key="entity.id" class="provider-item">
-          <div class="item-info">
-            <div class="item-header">
-              <span class="item-name">{{ entity.name }}</span>
-              <t-tag v-if="entity.is_default" theme="primary" size="small" variant="light">
-                {{ t('webSearchSettings.default') }}
-              </t-tag>
-              <t-tag size="small" variant="outline">{{ entity.provider }}</t-tag>
-            </div>
-            <div class="item-desc">{{ entity.description || t('webSearchSettings.noDescription') }}</div>
-          </div>
-          <div class="item-actions">
-            <t-button theme="default" variant="text" size="small" @click="testExistingConnection(entity)" :loading="testingId === entity.id">
-              {{ t('webSearchSettings.testConnection') }}
-            </t-button>
-            <t-button theme="primary" variant="text" size="small" @click="editProvider(entity)">
-              {{ t('common.edit') }}
-            </t-button>
-            <t-popconfirm :content="t('webSearchSettings.deleteConfirm')" @confirm="deleteProvider(entity.id!)">
-              <t-button theme="danger" variant="text" size="small">
-                {{ t('common.delete') }}
-              </t-button>
-            </t-popconfirm>
-          </div>
-        </div>
-      </div>
-
-      <!-- Empty State -->
-      <div v-else class="empty-providers">
-        <p>{{ t('webSearchSettings.noProvidersDesc') }}</p>
-      </div>
+      </t-empty>
     </div>
 
-    <!-- Add/Edit Dialog -->
-    <t-dialog
+    <!-- Add/Edit Drawer -->
+    <SettingDrawer
       v-model:visible="showAddProviderDialog"
-      :header="editingProvider ? t('webSearchSettings.editProvider') : t('webSearchSettings.addProvider')"
-      width="520px"
-      :footer="false"
-      destroy-on-close
+      :title="editingProvider ? t('webSearchSettings.editProvider') : t('webSearchSettings.addProvider')"
+      :confirm-loading="saving"
+      @confirm="saveProvider"
     >
-      <div class="dialog-form-container">
-        <t-form :data="providerForm" label-align="top" @submit="saveProvider" class="provider-form">
-          <t-form-item :label="t('webSearchSettings.providerTypeLabel')" name="provider">
-            <t-select v-model="providerForm.provider" :disabled="!!editingProvider" @change="onProviderTypeChange">
-              <t-option v-for="pt in providerTypes" :key="pt.id" :value="pt.id" :label="pt.name">
-                <div class="provider-option">
-                  <span>{{ pt.name }}</span>
-                  <t-tag v-if="isProviderFree(pt)" theme="success" size="small" variant="light">{{ t('webSearchSettings.free') }}</t-tag>
-                </div>
-              </t-option>
-            </t-select>
-          </t-form-item>
+      <t-form ref="formRef" :data="providerForm" label-align="top" class="provider-form">
+        <t-form-item :label="t('webSearchSettings.providerTypeLabel')" name="provider">
+          <t-select v-model="providerForm.provider" :disabled="!!editingProvider" @change="onProviderTypeChange">
+            <t-option v-for="pt in providerTypes" :key="pt.id" :value="pt.id" :label="pt.name">
+              <div class="provider-option">
+                <span>{{ pt.name }}</span>
+                <t-tag v-if="isProviderFree(pt)" theme="success" size="small" variant="light">
+                  {{ t('webSearchSettings.free') }}
+                </t-tag>
+              </div>
+            </t-option>
+          </t-select>
+        </t-form-item>
 
-          <t-form-item :label="t('webSearchSettings.providerNameLabel')" name="name">
-            <t-input v-model="providerForm.name" :placeholder="selectedProviderType?.name || t('webSearchSettings.providerNamePlaceholder')" />
-          </t-form-item>
+        <t-form-item :label="t('webSearchSettings.providerNameLabel')" name="name">
+          <t-input v-model="providerForm.name" :placeholder="selectedProviderType?.name || t('webSearchSettings.providerNamePlaceholder')" />
+        </t-form-item>
 
-          <t-form-item :label="t('webSearchSettings.providerDescLabel')" name="description">
-            <t-input v-model="providerForm.description" :placeholder="t('webSearchSettings.providerDescPlaceholder')" />
-          </t-form-item>
-
-          <template v-if="selectedProviderType?.requires_api_key || selectedProviderType?.requires_engine_id">
-            <div class="form-divider"></div>
-            
-            <div class="credentials-hint" v-if="selectedProviderType?.docs_url">
-              <a :href="selectedProviderType.docs_url" target="_blank" rel="noopener noreferrer">
-                {{ t('webSearchSettings.viewDocs') }} ↗
-              </a>
-            </div>
-            
-            <t-form-item v-if="selectedProviderType?.requires_api_key" :label="t('webSearchSettings.apiKeyLabel')" name="parameters.api_key">
-              <t-input
-                v-model="providerForm.parameters.api_key"
-                type="password"
-                :placeholder="editingProvider ? t('webSearchSettings.apiKeyUnchanged') : t('webSearchSettings.apiKeyPlaceholder')"
-              />
-            </t-form-item>
-            <t-form-item v-if="selectedProviderType?.requires_engine_id" :label="t('webSearchSettings.engineIdLabel')" name="parameters.engine_id">
-              <t-input v-model="providerForm.parameters.engine_id" :placeholder="t('webSearchSettings.engineIdLabel')" />
-            </t-form-item>
-          </template>
-
-          <t-form-item v-if="selectedProviderType?.supports_proxy" :label="t('webSearchSettings.proxyUrlLabel')" name="parameters.proxy_url">
-            <t-input
-              v-model="providerForm.parameters.proxy_url"
-              :placeholder="t('webSearchSettings.proxyUrlPlaceholder')"
-            />
-            <template #help>
-              <span class="switch-help">{{ t('webSearchSettings.proxyUrlHelp') }}</span>
-            </template>
-          </t-form-item>
+        <t-form-item :label="t('webSearchSettings.providerDescLabel')" name="description">
+          <t-input v-model="providerForm.description" :placeholder="t('webSearchSettings.providerDescPlaceholder')" />
+        </t-form-item>
 
+        <template v-if="selectedProviderType?.requires_api_key || selectedProviderType?.requires_engine_id">
           <div class="form-divider"></div>
 
-          <t-form-item :label="t('webSearchSettings.setAsDefault')" name="is_default">
-            <template #help>
-              <div class="switch-help">
-                {{ t('webSearchSettings.setAsDefaultDesc') }}
-              </div>
-            </template>
-            <t-switch v-model="providerForm.is_default" />
-          </t-form-item>
-
-          <div class="dialog-footer">
-            <div class="footer-left">
-              <t-button
-                v-if="selectedProviderType && !isProviderFree(selectedProviderType)"
-                theme="default"
-                variant="outline"
-                :loading="testing"
-                @click="testConnection"
-              >
-                {{ testing ? t('webSearchSettings.testing') : t('webSearchSettings.testConnection') }}
-              </t-button>
-            </div>
-            <div class="footer-right">
-              <t-button theme="default" variant="base" @click="showAddProviderDialog = false">{{ t('common.cancel') }}</t-button>
-              <t-button theme="primary" type="submit" :loading="saving">{{ t('common.save') }}</t-button>
-            </div>
+          <div class="credentials-hint" v-if="selectedProviderType?.docs_url">
+            <a :href="selectedProviderType.docs_url" target="_blank" rel="noopener noreferrer">
+              {{ t('webSearchSettings.viewDocs') }} ↗
+            </a>
           </div>
-        </t-form>
-      </div>
-    </t-dialog>
+
+          <t-form-item v-if="selectedProviderType?.requires_api_key" :label="t('webSearchSettings.apiKeyLabel')" name="parameters.api_key">
+            <t-input
+              v-model="providerForm.parameters.api_key"
+              type="password"
+              :placeholder="editingProvider ? t('webSearchSettings.apiKeyUnchanged') : t('webSearchSettings.apiKeyPlaceholder')"
+            />
+          </t-form-item>
+          <t-form-item v-if="selectedProviderType?.requires_engine_id" :label="t('webSearchSettings.engineIdLabel')" name="parameters.engine_id">
+            <t-input v-model="providerForm.parameters.engine_id" :placeholder="t('webSearchSettings.engineIdLabel')" />
+          </t-form-item>
+        </template>
+
+        <t-form-item v-if="selectedProviderType?.supports_proxy" :label="t('webSearchSettings.proxyUrlLabel')" name="parameters.proxy_url">
+          <t-input
+            v-model="providerForm.parameters.proxy_url"
+            :placeholder="t('webSearchSettings.proxyUrlPlaceholder')"
+          />
+          <template #help>
+            <span class="switch-help">{{ t('webSearchSettings.proxyUrlHelp') }}</span>
+          </template>
+        </t-form-item>
+
+        <div class="form-divider"></div>
+
+        <t-form-item :label="t('webSearchSettings.setAsDefault')" name="is_default">
+          <template #help>
+            <div class="switch-help">
+              {{ t('webSearchSettings.setAsDefaultDesc') }}
+            </div>
+          </template>
+          <t-switch v-model="providerForm.is_default" />
+        </t-form-item>
+      </t-form>
+
+      <template #footer-left>
+        <t-button
+          v-if="selectedProviderType && !isProviderFree(selectedProviderType)"
+          theme="default"
+          variant="outline"
+          :loading="testing"
+          @click="testConnection"
+        >
+          {{ testing ? t('webSearchSettings.testing') : t('webSearchSettings.testConnection') }}
+        </t-button>
+      </template>
+    </SettingDrawer>
   </div>
 </template>
 
@@ -158,8 +155,12 @@ import {
   type WebSearchProviderEntity,
   type WebSearchProviderTypeInfo,
 } from '@/api/web-search-provider'
+import SettingCard from '@/components/settings/SettingCard.vue'
+import SettingDrawer from '@/components/settings/SettingDrawer.vue'
+import { useConfirmDelete } from '@/components/settings/useConfirmDelete'
 
 const { t } = useI18n()
+const confirmDelete = useConfirmDelete()
 
 // ===== State =====
 const providerEntities = ref<WebSearchProviderEntity[]>([])
@@ -169,6 +170,7 @@ const editingProvider = ref<WebSearchProviderEntity | null>(null)
 const testing = ref(false)
 const testingId = ref<string | null>(null)
 const saving = ref(false)
+const formRef = ref<any>()
 
 const providerForm = ref<{
   name: string
@@ -193,6 +195,11 @@ const isProviderFree = (providerType: WebSearchProviderTypeInfo) => {
   return !providerType.requires_api_key && !providerType.requires_engine_id
 }
 
+const isEntityFree = (entity: WebSearchProviderEntity) => {
+  const pt = providerTypes.value.find(p => p.id === entity.provider)
+  return pt ? isProviderFree(pt) : false
+}
+
 // ===== Methods =====
 const onProviderTypeChange = () => {
   providerForm.value.parameters = {}
@@ -219,12 +226,12 @@ const loadProviderTypes = async () => {
 
 const openAddDialog = () => {
   editingProvider.value = null
-  providerForm.value = { 
-    name: '', 
-    provider: providerTypes.value[0]?.id || 'duckduckgo', 
-    description: '', 
-    parameters: {}, 
-    is_default: providerEntities.value.length === 0 
+  providerForm.value = {
+    name: '',
+    provider: providerTypes.value[0]?.id || 'duckduckgo',
+    description: '',
+    parameters: {},
+    is_default: providerEntities.value.length === 0
   }
   showAddProviderDialog.value = true
 }
@@ -245,12 +252,14 @@ const editProvider = (entity: WebSearchProviderEntity) => {
   showAddProviderDialog.value = true
 }
 
-const saveProvider = async ({ validateResult, firstError }: any) => {
+const saveProvider = async () => {
+  const validateResult = await formRef.value?.validate()
   if (validateResult !== true && validateResult !== undefined) {
-    MessagePlugin.warning(firstError || 'Please check the form fields')
+    const firstError = typeof validateResult === 'object' ? Object.values(validateResult)[0] : ''
+    MessagePlugin.warning(typeof firstError === 'string' ? firstError : 'Please check the form fields')
     return
   }
-  
+
   saving.value = true
   try {
     const data: Partial<WebSearchProviderEntity> = {
@@ -260,7 +269,7 @@ const saveProvider = async ({ validateResult, firstError }: any) => {
       parameters: { ...providerForm.value.parameters },
       is_default: providerForm.value.is_default,
     }
-    
+
     if (editingProvider.value && !data.parameters!.api_key) {
       delete data.parameters!.api_key
     }
@@ -281,14 +290,19 @@ const saveProvider = async ({ validateResult, firstError }: any) => {
   }
 }
 
-const deleteProvider = async (id: string) => {
-  try {
-    await deleteWebSearchProviderAPI(id)
-    MessagePlugin.success(t('webSearchSettings.toasts.providerDeleted'))
-    await loadProviderEntities()
-  } catch (error: any) {
-    MessagePlugin.error(error?.message || 'Failed to delete provider')
-  }
+const deleteProvider = (entity: WebSearchProviderEntity) => {
+  confirmDelete({
+    body: t('webSearchSettings.deleteConfirm'),
+    onConfirm: async () => {
+      try {
+        await deleteWebSearchProviderAPI(entity.id!)
+        MessagePlugin.success(t('webSearchSettings.toasts.providerDeleted'))
+        await loadProviderEntities()
+      } catch (error: any) {
+        MessagePlugin.error(error?.message || 'Failed to delete provider')
+      }
+    }
+  })
 }
 
 const testConnection = async () => {
@@ -298,7 +312,7 @@ const testConnection = async () => {
       provider: providerForm.value.provider,
       parameters: { ...providerForm.value.parameters },
     }
-    
+
     if (editingProvider.value && !data.parameters.api_key) {
       const res = await testWebSearchProvider(editingProvider.value.id!)
       if (res.success) {
@@ -337,6 +351,28 @@ const testExistingConnection = async (entity: WebSearchProviderEntity) => {
   }
 }
 
+const getProviderOptions = (_entity: WebSearchProviderEntity) => {
+  return [
+    { content: t('webSearchSettings.testConnection'), value: 'test' },
+    { content: t('common.edit'), value: 'edit' },
+    { content: t('common.delete'), value: 'delete', theme: 'error' as const }
+  ]
+}
+
+const handleMenuAction = (data: { value: string }, entity: WebSearchProviderEntity) => {
+  switch (data.value) {
+    case 'test':
+      testExistingConnection(entity)
+      break
+    case 'edit':
+      editProvider(entity)
+      break
+    case 'delete':
+      deleteProvider(entity)
+      break
+  }
+}
+
 // ===== Init =====
 onMounted(async () => {
   await Promise.all([loadProviderTypes(), loadProviderEntities()])
@@ -349,7 +385,7 @@ onMounted(async () => {
 }
 
 .section-header {
-  margin-bottom: 32px;
+  margin-bottom: 28px;
 
   h2 {
     font-size: 20px;
@@ -362,16 +398,11 @@ onMounted(async () => {
     font-size: 14px;
     color: var(--td-text-color-secondary);
     margin: 0;
-    line-height: 1.5;
+    line-height: 1.6;
   }
 }
 
-.settings-group {
-  display: flex;
-  flex-direction: column;
-}
-
-.section-subheader {
+.settings-toolbar {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -385,67 +416,35 @@ onMounted(async () => {
   }
 }
 
-.provider-list {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
+.provider-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
 }
 
-.provider-item {
-  display: flex;
+.provider-meta-item {
+  display: inline-flex;
   align-items: center;
-  justify-content: space-between;
-  padding: 14px 16px;
-  background: var(--td-bg-color-container);
-  border: 1px solid var(--td-component-stroke);
-  border-radius: 8px;
-  transition: all 0.2s ease;
+  gap: 4px;
+  max-width: 100%;
+  overflow: hidden;
 
-  &:hover {
-    border-color: var(--td-brand-color);
+  .provider-meta-text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 }
 
-.item-info {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.item-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.item-name {
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--td-text-color-primary);
-}
-
-.item-desc {
-  font-size: 13px;
-  color: var(--td-text-color-secondary);
-}
-
-.item-actions {
-  display: flex;
-  gap: 4px;
-  align-items: center;
-}
-
-.empty-providers {
-  padding: 32px;
+.empty-state {
+  padding: 64px 0;
   text-align: center;
-  color: var(--td-text-color-placeholder);
-  border: 1px dashed var(--td-component-stroke);
-  border-radius: 8px;
-  font-size: 14px;
-}
 
-.dialog-form-container {
-  margin-top: 12px;
+  :deep(.t-empty__description) {
+    font-size: 14px;
+    color: var(--td-text-color-placeholder);
+    margin-bottom: 16px;
+  }
 }
 
 .provider-option {
@@ -464,11 +463,11 @@ onMounted(async () => {
 .credentials-hint {
   margin-bottom: 12px;
   font-size: 13px;
-  
+
   a {
     color: var(--td-brand-color);
     text-decoration: none;
-    
+
     &:hover {
       text-decoration: underline;
     }
@@ -481,18 +480,4 @@ onMounted(async () => {
   margin-top: 4px;
   line-height: 1.4;
 }
-
-.dialog-footer {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-top: 32px;
-  padding-top: 20px;
-  border-top: 1px solid var(--td-component-border);
-
-  .footer-right {
-    display: flex;
-    gap: 12px;
-  }
-}
 </style>
diff --git a/frontend/src/views/settings/components/McpServiceDialog.vue b/frontend/src/views/settings/components/McpServiceDialog.vue
index 106a92cd..aea5f667 100644
--- a/frontend/src/views/settings/components/McpServiceDialog.vue
+++ b/frontend/src/views/settings/components/McpServiceDialog.vue
@@ -1,17 +1,17 @@
 <template>
-  <t-dialog
-    v-model:visible="dialogVisible"
-    :header="mode === 'add' ? t('mcpServiceDialog.addTitle') : t('mcpServiceDialog.editTitle')"
-    width="700px"
-    :on-confirm="handleSubmit"
-    :on-cancel="handleClose"
-    :confirm-btn="{ content: t('common.save'), loading: submitting }"
+  <SettingDrawer
+    :visible="dialogVisible"
+    :title="mode === 'add' ? t('mcpServiceDialog.addTitle') : t('mcpServiceDialog.editTitle')"
+    :confirm-loading="submitting"
+    @update:visible="(v: boolean) => dialogVisible = v"
+    @confirm="handleSubmit"
+    @cancel="handleClose"
   >
     <t-form
       ref="formRef"
       :data="formData"
       :rules="rules"
-      label-width="120px"
+      label-align="top"
     >
       <t-form-item :label="t('mcpServiceDialog.name')" name="name">
         <t-input v-model="formData.name" :placeholder="t('mcpServiceDialog.namePlaceholder')" />
@@ -95,7 +95,7 @@
         </t-collapse-panel>
       </t-collapse>
     </t-form>
-  </t-dialog>
+  </SettingDrawer>
 </template>
 
 <script setup lang="ts">
@@ -108,6 +108,7 @@ import {
   updateMCPService,
   type MCPService
 } from '@/api/mcp-service'
+import SettingDrawer from '@/components/settings/SettingDrawer.vue'
 
 interface Props {
   visible: boolean