diff --git a/astrbot/core/config/default.py b/astrbot/core/config/default.py
index 1055723ed7..1937a3fd01 100644
--- a/astrbot/core/config/default.py
+++ b/astrbot/core/config/default.py
@@ -3294,6 +3294,7 @@
                     "agent_runner.config.dify_api_key": {
                         "description": "API Key",
                         "type": "string",
+                        "secret": True,
                     },
                     "agent_runner.config.dify_api_base": {
                         "description": "API Base URL",
@@ -3332,6 +3333,7 @@
                     "agent_runner.config.coze_api_key": {
                         "description": "API Key",
                         "type": "string",
+                        "secret": True,
                     },
                     "agent_runner.config.bot_id": {
                         "description": "Bot ID",
@@ -3371,6 +3373,7 @@
                     "agent_runner.config.dashscope_api_key": {
                         "description": "API Key",
                         "type": "string",
+                        "secret": True,
                     },
                     "agent_runner.config.dashscope_app_id": {
                         "description": "应用 ID",
@@ -3419,10 +3422,12 @@
                     "agent_runner.config.deerflow_api_key": {
                         "description": "API Key",
                         "type": "string",
+                        "secret": True,
                     },
                     "agent_runner.config.deerflow_auth_header": {
                         "description": "Authorization Header",
                         "type": "string",
+                        "secret": True,
                     },
                     "agent_runner.config.deerflow_assistant_id": {
                         "description": "Assistant ID",
@@ -3468,7 +3473,7 @@
                 "type": "object",
                 "items": {
                     "agent_runner.config.model.provider_id": {
-                        "description": "默认对话模型",
+                        "description": "对话模型",
                         "type": "string",
                         "_special": "select_provider",
                         "hint": "留空时使用第一个模型",
@@ -3477,7 +3482,7 @@
                         },
                     },
                     "agent_runner.config.model.fallback_provider_ids": {
-                        "description": "回退对话模型列表",
+                        "description": "回退对话模型",
                         "type": "list",
                         "items": {"type": "string"},
                         "_special": "select_providers",
@@ -3487,7 +3492,7 @@
                         },
                     },
                     "agent_runner.config.model.request_max_retries": {
-                        "description": "请求最大重试次数",
+                        "description": "异常重试次数",
                         "type": "int",
                         "hint": "单次模型请求遇到可重试错误时的最大尝试次数。",
                         "condition": {
@@ -3495,15 +3500,15 @@
                         },
                     },
                     "provider_settings.default_image_caption_provider_id": {
-                        "description": "默认图片转述模型",
+                        "description": "图片转述模型",
                         "type": "string",
                         "_special": "select_provider",
                         "hint": "留空代表不使用，可用于非多模态模型",
                     },
                     "provider_stt_settings.enable": {
-                        "description": "启用语音转文本",
+                        "description": "语音识别",
                         "type": "bool",
-                        "hint": "STT 总开关",
+                        "hint": "使用语音转文字模型将用户语音转述为文本，方便模型理解。",
                     },
                     "provider_stt_settings.provider_id": {
                         "description": "默认语音转文本模型",
@@ -3515,9 +3520,9 @@
                         },
                     },
                     "provider_tts_settings.enable": {
-                        "description": "启用文本转语音",
+                        "description": "语音回复",
                         "type": "bool",
-                        "hint": "TTS 总开关",
+                        "hint": "使用文字转语音模型将文字转为语音回复。",
                     },
                     "provider_tts_settings.provider_id": {
                         "description": "默认文本转语音模型",
@@ -3538,6 +3543,7 @@
                     "provider_settings.image_caption_prompt": {
                         "description": "图片转述提示词",
                         "type": "text",
+                        "collapsed": True,
                     },
                 },
                 "condition": {
@@ -3562,6 +3568,7 @@
                     "agent_runner.config.persona.safety_mode_strategy": {
                         "description": "健康模式策略",
                         "type": "string",
+                        "invisible": True,
                         "options": ["system_prompt"],
                         "hint": "选择健康模式的实现策略。",
                         "condition": {
@@ -4050,16 +4057,16 @@
                         },
                     },
                     "provider_settings.show_tool_use_status": {
-                        "description": "输出函数调用状态",
+                        "description": "输出工具调用信息",
                         "type": "bool",
                         "condition": {
                             "agent_runner.runner_type": "local",
                         },
                     },
                     "provider_settings.show_tool_call_result": {
-                        "description": "输出函数调用返回结果",
+                        "description": "输出工具调用结果",
                         "type": "bool",
-                        "hint": "仅在输出函数调用状态启用时生效，展示结果前 70 个字符。",
+                        "hint": "仅在输出工具调用信息启用时生效，展示结果前 70 个字符。",
                         "condition": {
                             "agent_runner.runner_type": "local",
                             "provider_settings.show_tool_use_status": True,
@@ -4107,7 +4114,7 @@
                         },
                     },
                     "provider_settings.wake_prefix": {
-                        "description": "LLM 聊天额外唤醒前缀 ",
+                        "description": "额外唤醒前缀",
                         "type": "string",
                         "hint": "如果唤醒前缀为 /, 额外聊天唤醒前缀为 chat，则需要 /chat 才会触发 LLM 请求",
                     },
@@ -4541,7 +4548,7 @@
                         "description": "群聊图片转述模型",
                         "type": "string",
                         "_special": "select_provider",
-                        "hint": "用于群聊记录注入上下文的图片理解，与默认图片转述模型分开配置。",
+                        "hint": "用于群聊记录注入上下文的图片理解，与图片转述模型分开配置。",
                         "condition": {
                             "provider_ltm_settings.group_icl_enable": True,
                             "provider_ltm_settings.image_caption": True,
diff --git a/dashboard/src/assets/mdi-subset/materialdesignicons-subset.css b/dashboard/src/assets/mdi-subset/materialdesignicons-subset.css
index c4681523a1..bde62e93c0 100644
--- a/dashboard/src/assets/mdi-subset/materialdesignicons-subset.css
+++ b/dashboard/src/assets/mdi-subset/materialdesignicons-subset.css
@@ -1,4 +1,4 @@
-/* Auto-generated MDI subset – 269 icons */
+/* Auto-generated MDI subset – 272 icons */
 /* Do not edit manually. Run: pnpm run subset-icons */
 
 @font-face {
@@ -96,6 +96,10 @@
   content: "\F19B2";
 }
 
+.mdi-auto-fix::before {
+  content: "\F0068";
+}
+
 .mdi-backup-restore::before {
   content: "\F006F";
 }
@@ -544,10 +548,6 @@
   content: "\F02D1";
 }
 
-.mdi-help-circle::before {
-  content: "\F02D7";
-}
-
 .mdi-help-circle-outline::before {
   content: "\F0625";
 }
@@ -680,6 +680,10 @@
   content: "\F0349";
 }
 
+.mdi-magnify-close::before {
+  content: "\F0980";
+}
+
 .mdi-memory::before {
   content: "\F035B";
 }
@@ -888,6 +892,10 @@
   content: "\F16A7";
 }
 
+.mdi-robot-off-outline::before {
+  content: "\F167B";
+}
+
 .mdi-robot-outline::before {
   content: "\F167A";
 }
@@ -984,6 +992,10 @@
   content: "\F0721";
 }
 
+.mdi-swap-horizontal::before {
+  content: "\F04E1";
+}
+
 .mdi-sync::before {
   content: "\F04E6";
 }
diff --git a/dashboard/src/assets/mdi-subset/materialdesignicons-webfont-subset.woff b/dashboard/src/assets/mdi-subset/materialdesignicons-webfont-subset.woff
index 22430a2068..7a31dd05c8 100644
Binary files a/dashboard/src/assets/mdi-subset/materialdesignicons-webfont-subset.woff and b/dashboard/src/assets/mdi-subset/materialdesignicons-webfont-subset.woff differ
diff --git a/dashboard/src/assets/mdi-subset/materialdesignicons-webfont-subset.woff2 b/dashboard/src/assets/mdi-subset/materialdesignicons-webfont-subset.woff2
index 0e1a25a3f5..5602b50fa3 100644
Binary files a/dashboard/src/assets/mdi-subset/materialdesignicons-webfont-subset.woff2 and b/dashboard/src/assets/mdi-subset/materialdesignicons-webfont-subset.woff2 differ
diff --git a/dashboard/src/components/chat/ProviderModelMenu.vue b/dashboard/src/components/chat/ProviderModelMenu.vue
index 53f75d6623..79832e4c54 100644
--- a/dashboard/src/components/chat/ProviderModelMenu.vue
+++ b/dashboard/src/components/chat/ProviderModelMenu.vue
@@ -1,158 +1,23 @@
 <template>
-  <v-menu
-    v-model="menuOpen"
-    :close-on-content-click="false"
-    :location="menuLocation"
-    offset="10"
-    transition="none"
-    @update:model-value="handleMenuToggle"
-  >
-    <template #activator="{ props: menuProps }">
-      <button
-        v-bind="menuProps"
-        class="provider-trigger"
-        :class="`provider-trigger--${variant}`"
-        type="button"
-      >
-        <span class="provider-trigger-copy">
-          <span class="provider-trigger-title">{{ triggerTitle }}</span>
-          <span v-if="triggerMeta" class="provider-trigger-meta">
-            {{ triggerMeta }}
-          </span>
-        </span>
-        <v-icon class="provider-trigger-chevron" size="18">
-          mdi-chevron-down
-        </v-icon>
-      </button>
-    </template>
-
-    <v-card class="provider-menu-card" elevation="0">
-      <div class="provider-menu-body">
-        <v-text-field
-          v-model="searchQuery"
-          placeholder="Search models"
-          hide-details
-          variant="outlined"
-          density="compact"
-          prepend-inner-icon="mdi-magnify"
-          class="provider-search"
-          clearable
-        />
-
-        <v-list density="compact" nav class="provider-menu-list">
-          <v-list-item
-            v-for="provider in filteredProviders"
-            :key="provider.id"
-            :active="selectedProviderId === provider.id"
-            rounded="lg"
-            class="provider-menu-item"
-            @click="selectProvider(provider)"
-          >
-            <v-list-item-title class="provider-item-title">
-              {{ provider.id }}
-            </v-list-item-title>
-            <v-list-item-subtitle class="provider-subtitle">
-              <span class="model-name">{{ provider.model }}</span>
-              <span class="meta-icons">
-                <v-tooltip
-                  v-for="item in capabilityBadges(provider)"
-                  :key="item.key"
-                  location="top"
-                  max-width="320"
-                >
-                  <template #activator="{ props: badgeTooltipProps }">
-                    <span
-                      v-bind="badgeTooltipProps"
-                      class="meta-icon-badge"
-                      :class="{ 'meta-icon-badge--disabled': !item.enabled }"
-                      @click.stop
-                    >
-                      <v-icon size="13">{{ item.icon }}</v-icon>
-                    </span>
-                  </template>
-                  <span>{{ item.tooltip }}</span>
-                </v-tooltip>
-                <v-tooltip
-                  v-if="formatContextLimit(provider, metadataForProvider(provider))"
-                  location="top"
-                  max-width="320"
-                >
-                  <template #activator="{ props: contextTooltipProps }">
-                    <span
-                      v-bind="contextTooltipProps"
-                      class="meta-context-badge"
-                      @click.stop
-                    >
-                      {{ formatContextLimit(provider, metadataForProvider(provider)) }}
-                    </span>
-                  </template>
-                  <span>{{
-                    tm("models.metadata.context", {
-                      tokens: formatContextLimit(
-                        provider,
-                        metadataForProvider(provider),
-                      ),
-                    })
-                  }}</span>
-                </v-tooltip>
-              </span>
-            </v-list-item-subtitle>
-            <template #append>
-              <div class="provider-menu-actions" @click.stop>
-                <v-tooltip location="top">
-                  <template #activator="{ props: testTooltipProps }">
-                    <v-btn
-                      v-bind="testTooltipProps"
-                      icon="mdi-connection"
-                      size="x-small"
-                      variant="text"
-                      :loading="testingProviderIds.includes(provider.id)"
-                      :disabled="testingProviderIds.includes(provider.id)"
-                      @click.stop="testProvider(provider)"
-                    />
-                  </template>
-                  <span>{{ tm("models.testButton") }}</span>
-                </v-tooltip>
-                <v-icon
-                  v-if="selectedProviderId === provider.id"
-                  class="provider-selected-icon"
-                  size="18"
-                >
-                  mdi-check
-                </v-icon>
-              </div>
-            </template>
-          </v-list-item>
-        </v-list>
-
-        <div v-if="loadingProviders" class="empty-hint">
-          Loading models...
-        </div>
-        <div v-else-if="filteredProviders.length === 0" class="empty-hint">
-          No available models
-        </div>
-      </div>
-    </v-card>
-  </v-menu>
+  <ProviderSelectMenu
+    ref="providerSelectMenuRef"
+    :model-value="selectedProviderId"
+    :fallback-model="selectedModelName"
+    provider-type="chat_completion"
+    :variant="variant"
+    :allow-empty="false"
+    @update:model-value="updateSelection"
+    @select="saveSelection"
+  />
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted } from "vue";
-import { providerApi } from "@/api/v1";
-import { useModuleI18n } from "@/i18n/composables";
-import { useToast } from "@/utils/toast";
-import {
-  formatContextLimit,
-  providerCapabilityBadges,
-  type ProviderModelMetadata,
-  type ProviderMetadataSource,
-} from "@/utils/providerMetadata";
+import { onMounted, ref } from "vue";
+import ProviderSelectMenu from "@/components/shared/ProviderSelectMenu.vue";
 
-interface ProviderConfig extends ProviderMetadataSource {
+interface ProviderSelection {
   id: string;
-  model: string;
-  api_base?: string;
-  enable?: boolean;
+  model?: string;
 }
 
 const props = withDefaults(
@@ -166,369 +31,39 @@ const props = withDefaults(
 
 const SELECTED_PROVIDER_KEY = "selectedProvider";
 const SELECTED_PROVIDER_MODEL_KEY = "selectedProviderModel";
-const providerConfigs = ref<ProviderConfig[]>([]);
 const selectedProviderId = ref("");
 const selectedModelName = ref("");
-const searchQuery = ref("");
-const menuOpen = ref(false);
-const loadingProviders = ref(false);
-const providersLoaded = ref(false);
-const testingProviderIds = ref<string[]>([]);
-const modelMetadata = ref<Record<string, ProviderModelMetadata>>({});
-const { tm } = useModuleI18n("features/provider");
-const { success: toastSuccess, error: toastError } = useToast();
-
-const variant = computed(() => props.variant);
-const menuLocation = computed(() =>
-  props.variant === "header" ? "bottom start" : "top",
-);
-
-const selectedProvider = computed(() =>
-  providerConfigs.value.find(
-    (provider) => provider.id === selectedProviderId.value,
-  ),
-);
+const providerSelectMenuRef = ref<InstanceType<
+  typeof ProviderSelectMenu
+> | null>(null);
+const variant = props.variant;
 
-const triggerTitle = computed(() => {
-  if (selectedProvider.value?.id) return selectedProvider.value.id;
-  if (selectedProviderId.value) return selectedProviderId.value;
-  return props.variant === "header" ? "Default model" : "Model";
-});
-
-const triggerMeta = computed(() => {
-  const model = selectedProvider.value?.model || selectedModelName.value;
-  if (!model || model === triggerTitle.value) return "";
-  return model;
-});
-
-const filteredProviders = computed(() => {
-  if (!searchQuery.value) {
-    return providerConfigs.value;
-  }
-  const query = searchQuery.value.toLowerCase();
-  return providerConfigs.value.filter(
-    (provider) =>
-      provider.id.toLowerCase().includes(query) ||
-      provider.model.toLowerCase().includes(query),
-  );
-});
-
-function loadFromStorage() {
-  const savedProvider = localStorage.getItem(SELECTED_PROVIDER_KEY);
-  const savedModel = localStorage.getItem(SELECTED_PROVIDER_MODEL_KEY);
-  if (savedProvider) {
-    selectedProviderId.value = savedProvider;
-  }
-  if (savedModel) {
-    selectedModelName.value = savedModel;
-  }
-}
-
-function saveToStorage(provider: ProviderConfig) {
-  localStorage.setItem(SELECTED_PROVIDER_KEY, provider.id);
-  localStorage.setItem(SELECTED_PROVIDER_MODEL_KEY, provider.model || "");
-}
-
-async function loadProviderConfigs(force = false) {
-  if (loadingProviders.value || (providersLoaded.value && !force)) return;
-  loadingProviders.value = true;
-  try {
-    const response = await providerApi.listByProviderType("chat_completion");
-    if (response.data.status === "ok") {
-      modelMetadata.value = (
-        response.data.model_metadata || {}
-      ) as Record<string, ProviderModelMetadata>;
-      providerConfigs.value = (
-        (response.data.data || []) as unknown as ProviderConfig[]
-      ).filter((provider: ProviderConfig) => provider.enable !== false);
-      providersLoaded.value = true;
-      const selected = selectedProvider.value;
-      if (selected) {
-        selectedModelName.value = selected.model || "";
-        saveToStorage(selected);
-      }
-    }
-  } catch (error) {
-    console.error("Failed to load provider list:", error);
-  } finally {
-    loadingProviders.value = false;
-  }
+function updateSelection(value: string | string[]) {
+  if (typeof value === "string") selectedProviderId.value = value;
 }
 
-function selectProvider(provider: ProviderConfig) {
+function saveSelection(provider: ProviderSelection | null) {
+  if (!provider) return;
   selectedProviderId.value = provider.id;
   selectedModelName.value = provider.model || "";
-  saveToStorage(provider);
-  menuOpen.value = false;
-}
-
-function capabilityBadges(provider: ProviderConfig) {
-  return providerCapabilityBadges(provider, metadataForProvider(provider), tm);
-}
-
-function metadataForProvider(provider: ProviderConfig) {
-  return provider.model ? modelMetadata.value[provider.model] || null : null;
-}
-
-async function testProvider(provider: ProviderConfig) {
-  if (testingProviderIds.value.includes(provider.id)) return;
-  testingProviderIds.value.push(provider.id);
-  try {
-    const startTime = performance.now();
-    const response = await providerApi.test(provider.id);
-    if (response.data.status === "ok" && response.data.data.error === null) {
-      const latency = Math.max(0, Math.round(performance.now() - startTime));
-      toastSuccess(
-        tm("models.testSuccessWithLatency", {
-          id: provider.id,
-          latency,
-        }),
-      );
-    } else {
-      throw new Error(response.data.data.error || tm("models.testError"));
-    }
-  } catch (error: any) {
-    toastError(
-      error.response?.data?.message || error.message || tm("models.testError"),
-    );
-  } finally {
-    testingProviderIds.value = testingProviderIds.value.filter(
-      (id) => id !== provider.id,
-    );
-  }
+  localStorage.setItem(SELECTED_PROVIDER_KEY, provider.id);
+  localStorage.setItem(SELECTED_PROVIDER_MODEL_KEY, provider.model || "");
 }
 
 function getCurrentSelection() {
-  return {
-    providerId: selectedProviderId.value,
-    modelName: selectedProvider.value?.model || selectedModelName.value || "",
-  };
-}
-
-function handleMenuToggle(isOpen: boolean) {
-  if (isOpen) {
-    loadProviderConfigs(true);
-  }
+  return (
+    providerSelectMenuRef.value?.getCurrentSelection() || {
+      providerId: selectedProviderId.value,
+      modelName: selectedModelName.value,
+    }
+  );
 }
 
 onMounted(() => {
-  loadFromStorage();
-  loadProviderConfigs();
+  selectedProviderId.value = localStorage.getItem(SELECTED_PROVIDER_KEY) || "";
+  selectedModelName.value =
+    localStorage.getItem(SELECTED_PROVIDER_MODEL_KEY) || "";
 });
 
-defineExpose({
-  getCurrentSelection,
-});
+defineExpose({ getCurrentSelection });
 </script>
-
-<style scoped>
-.provider-trigger {
-  display: inline-flex;
-  max-width: 100%;
-  min-width: 0;
-  align-items: center;
-  justify-content: flex-start;
-  gap: 6px;
-  border: 0;
-  background: transparent;
-  color: rgb(var(--v-theme-on-surface));
-  cursor: pointer;
-  font: inherit;
-  letter-spacing: 0;
-  text-align: left;
-}
-
-.provider-trigger-copy {
-  display: inline-flex;
-  min-width: 0;
-  align-items: baseline;
-  gap: 10px;
-}
-
-.provider-trigger-title,
-.provider-trigger-meta {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.provider-trigger--header {
-  height: 24px;
-  margin-top: 2px;
-  padding: 0;
-}
-
-.provider-trigger--header .provider-trigger-title {
-  font-size: 17px;
-  font-weight: 620;
-  line-height: 24px;
-}
-
-.provider-trigger--header .provider-trigger-meta {
-  color: rgba(var(--v-theme-on-surface), 0.55);
-  font-size: 13px;
-  font-weight: 500;
-  line-height: 18px;
-}
-
-.provider-trigger--input {
-  height: 40px;
-  max-width: min(280px, 42vw);
-  padding: 0 12px;
-  border: 1px solid rgba(var(--v-theme-on-surface), 0.18);
-  border-radius: 999px;
-}
-
-.provider-trigger--input:hover {
-  border-color: rgba(var(--v-theme-on-surface), 0.34);
-  background: rgba(var(--v-theme-on-surface), 0.04);
-}
-
-.provider-trigger--input .provider-trigger-title {
-  font-size: 14px;
-  font-weight: 500;
-}
-
-.provider-trigger--input .provider-trigger-meta {
-  display: none;
-}
-
-.provider-trigger-chevron {
-  flex: 0 0 auto;
-  opacity: 0.64;
-}
-
-.provider-menu-card {
-  width: min(420px, calc(100vw - 24px));
-  overflow: hidden;
-  border: 0;
-  border-radius: 14px !important;
-  background: rgb(var(--v-theme-surface));
-  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08) !important;
-}
-
-.provider-menu-body {
-  padding: 10px;
-}
-
-.provider-search {
-  margin-bottom: 8px;
-}
-
-.provider-search :deep(.v-field) {
-  border-radius: 10px;
-  box-shadow: none;
-}
-
-.provider-search :deep(.v-field__outline) {
-  color: rgba(var(--v-theme-on-surface), 0.16);
-}
-
-.provider-menu-list {
-  max-height: min(360px, 58vh);
-  overflow-y: auto;
-  padding: 0;
-}
-
-.provider-menu-item {
-  min-height: 54px !important;
-  margin-bottom: 2px;
-  border-radius: 10px !important;
-}
-
-.provider-menu-item:hover {
-  background: rgba(var(--v-theme-on-surface), 0.05);
-}
-
-.provider-menu-item.v-list-item--active {
-  background: rgba(var(--v-theme-primary), 0.08);
-  color: rgb(var(--v-theme-on-surface));
-}
-
-.provider-item-title {
-  font-size: 14px;
-  font-weight: 600;
-  line-height: 18px;
-}
-
-.provider-subtitle {
-  display: flex;
-  min-width: 0;
-  align-items: center;
-  gap: 8px;
-}
-
-.model-name {
-  min-width: 0;
-  overflow: hidden;
-  color: rgba(var(--v-theme-on-surface), 0.58);
-  font-size: 12px;
-  line-height: 16px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.meta-icons {
-  display: flex;
-  flex: 0 0 auto;
-  align-items: center;
-  gap: 4px;
-  color: rgba(var(--v-theme-on-surface), 0.5);
-}
-
-.meta-icon-badge {
-  display: inline-flex;
-  align-items: center;
-  color: rgba(var(--v-theme-on-surface), 0.72);
-}
-
-.meta-icon-badge--disabled {
-  color: rgba(var(--v-theme-on-surface), 0.34);
-}
-
-.meta-context-badge {
-  display: inline-flex;
-  align-items: center;
-  height: 16px;
-  padding: 0 5px;
-  border-radius: 999px;
-  background: rgba(var(--v-theme-on-surface), 0.06);
-  color: rgba(var(--v-theme-on-surface), 0.72);
-  font-size: 10px;
-  font-weight: 650;
-  line-height: 16px;
-}
-
-.provider-menu-actions {
-  display: inline-flex;
-  align-items: center;
-  gap: 2px;
-}
-
-.provider-selected-icon {
-  color: rgba(var(--v-theme-on-surface), 0.72);
-}
-
-.empty-hint {
-  padding: 16px;
-  color: rgba(var(--v-theme-on-surface), 0.5);
-  font-size: 12px;
-  text-align: center;
-}
-
-@media (max-width: 768px) {
-  .provider-trigger--header .provider-trigger-title {
-    font-size: 16px;
-  }
-
-  .provider-trigger--header .provider-trigger-meta {
-    display: none;
-  }
-
-  .provider-trigger--input {
-    height: 38px;
-    max-width: 48vw;
-  }
-}
-</style>
diff --git a/dashboard/src/components/config/AiConfigPanel.vue b/dashboard/src/components/config/AiConfigPanel.vue
new file mode 100644
index 0000000000..213988b9eb
--- /dev/null
+++ b/dashboard/src/components/config/AiConfigPanel.vue
@@ -0,0 +1,636 @@
+<template>
+  <section class="ai-config-panel">
+    <header class="ai-config-panel__header">
+      <div class="ai-config-panel__heading">
+        <h2 class="ai-config-panel__title">{{ tm('aiSettings.title') }}</h2>
+        <p class="ai-config-panel__subtitle">{{ currentRunner.summary }}</p>
+      </div>
+
+      <div class="ai-config-panel__actions">
+        <label class="ai-enable-control">
+          <v-switch
+            v-model="aiEnabled"
+            color="primary"
+            density="compact"
+            hide-details
+            inset
+            :aria-label="tm('aiSettings.enable')"
+            :title="tm('aiSettings.enable')"
+          />
+        </label>
+
+        <StyledMenu location="bottom end" :offset="8">
+          <template #activator="{ props: menuProps }">
+            <v-btn
+              v-bind="menuProps"
+              icon="mdi-dots-horizontal"
+              size="small"
+              variant="text"
+              :aria-label="tm('aiSettings.more')"
+              :title="tm('aiSettings.more')"
+            />
+          </template>
+          <v-list-item
+            class="styled-menu-item"
+            prepend-icon="mdi-swap-horizontal"
+            :title="tm('aiSettings.changeRunner')"
+            @click="openRunnerDialog"
+          />
+        </StyledMenu>
+      </div>
+    </header>
+
+    <template v-if="aiEnabled">
+      <section class="ai-config-panel__section">
+        <div class="ai-config-panel__section-heading">
+          <div>
+            <h3 class="ai-config-panel__section-title">
+              <span>{{ runnerSettingsTitle }}</span>
+              <AstrBotLogo
+                v-if="runnerType === 'local'"
+                class="ai-config-panel__brand-logo"
+              />
+            </h3>
+            <p class="ai-config-panel__section-subtitle">
+              {{ currentRunner.description }}
+            </p>
+          </div>
+        </div>
+
+        <template v-if="runnerType === 'local'">
+          <div class="ai-config-tabs" role="tablist" :aria-label="runnerSettingsTitle">
+            <button
+              v-for="item in localTabs"
+              :key="item.value"
+              type="button"
+              class="ai-config-tabs__item"
+              :class="{ 'ai-config-tabs__item--active': activeLocalTab === item.value }"
+              role="tab"
+              :aria-selected="activeLocalTab === item.value"
+              @click="activeLocalTab = item.value"
+            >
+              {{ item.label }}
+            </button>
+          </div>
+
+          <div class="config-product-groups">
+            <AstrBotConfigV4
+              v-for="group in activeLocalGroups"
+              :key="group.key"
+              :metadata="{ [group.key]: group.metadata }"
+              :iterable="configData"
+              :metadata-key="group.key"
+              :search-keyword="searchKeyword"
+            />
+          </div>
+        </template>
+
+        <div v-else class="config-product-groups">
+          <AstrBotConfigV4
+            v-if="thirdPartyRunnerGroup"
+            :metadata="{ [thirdPartyRunnerGroup.key]: thirdPartyRunnerGroup.metadata }"
+            :iterable="configData"
+            :metadata-key="thirdPartyRunnerGroup.key"
+            :search-keyword="searchKeyword"
+          />
+        </div>
+      </section>
+
+      <section v-if="commonGroups.length" class="ai-config-panel__section ai-config-panel__section--common">
+        <div class="ai-config-panel__section-heading">
+          <div>
+            <h3 class="ai-config-panel__section-title">{{ tm('aiSettings.common.title') }}</h3>
+            <p class="ai-config-panel__section-subtitle">
+              {{ tm('aiSettings.common.subtitle') }}
+            </p>
+          </div>
+        </div>
+
+        <div class="config-product-groups">
+          <AstrBotConfigV4
+            v-for="group in commonGroups"
+            :key="group.key"
+            :metadata="{ [group.key]: group.metadata }"
+            :iterable="configData"
+            :metadata-key="group.key"
+            :search-keyword="searchKeyword"
+          />
+        </div>
+      </section>
+    </template>
+
+    <div v-else class="ai-disabled-state">
+      <v-icon size="30">mdi-robot-off-outline</v-icon>
+      <div>
+        <div class="ai-disabled-state__title">{{ tm('aiSettings.disabled.title') }}</div>
+        <div class="ai-disabled-state__subtitle">{{ tm('aiSettings.disabled.subtitle') }}</div>
+      </div>
+    </div>
+
+    <v-dialog v-model="runnerDialog" max-width="560">
+      <v-card class="runner-dialog-card">
+        <v-card-title class="text-h3 pa-4 pb-0 pl-6">
+          {{ tm('aiSettings.runnerDialog.title') }}
+        </v-card-title>
+        <v-card-text class="px-6 pt-3 pb-2">
+          <p class="runner-dialog-description">
+            {{ tm('aiSettings.runnerDialog.subtitle') }}
+          </p>
+
+          <div class="runner-option-list" role="radiogroup">
+            <button
+              v-for="runner in runnerOptions"
+              :key="runner.value"
+              type="button"
+              class="runner-option"
+              :class="{ 'runner-option--active': pendingRunnerType === runner.value }"
+              role="radio"
+              :aria-checked="pendingRunnerType === runner.value"
+              @click="pendingRunnerType = runner.value"
+            >
+              <div class="runner-option__copy">
+                <div class="runner-option__title">{{ runner.title }}</div>
+                <div class="runner-option__description">{{ runner.description }}</div>
+              </div>
+              <v-icon v-if="pendingRunnerType === runner.value" color="primary" size="20">
+                mdi-check-circle
+              </v-icon>
+              <v-icon v-else size="20" class="runner-option__empty-icon">
+                mdi-circle-outline
+              </v-icon>
+            </button>
+          </div>
+
+          <v-checkbox
+            v-model="runnerChangeAcknowledged"
+            class="runner-dialog-acknowledgement"
+            color="primary"
+            density="compact"
+            hide-details
+            :disabled="pendingRunnerType === runnerType"
+          >
+            <template #label>
+              <span class="runner-dialog-acknowledgement__label">
+                {{ tm('aiSettings.runnerDialog.warningPrefix') }}<strong>{{ tm('aiSettings.runnerDialog.warningEmphasis') }}</strong>{{ tm('aiSettings.runnerDialog.warningSuffix') }}
+              </span>
+            </template>
+          </v-checkbox>
+        </v-card-text>
+        <v-card-actions class="pa-4 pt-2">
+          <v-spacer />
+          <v-btn variant="text" @click="runnerDialog = false">
+            {{ tm('buttons.cancel') }}
+          </v-btn>
+          <v-btn
+            color="primary"
+            variant="tonal"
+            :disabled="pendingRunnerType === runnerType || !runnerChangeAcknowledged"
+            @click="confirmRunnerChange"
+          >
+            {{ tm('aiSettings.runnerDialog.confirm') }}
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </section>
+</template>
+
+<script setup>
+import { computed, ref, watch } from 'vue';
+import AstrBotLogo from '@/components/chat/ChatUILogo.vue';
+import AstrBotConfigV4 from '@/components/shared/AstrBotConfigV4.vue';
+import StyledMenu from '@/components/shared/StyledMenu.vue';
+import { useModuleI18n } from '@/i18n/composables';
+
+const props = defineProps({
+  metadata: {
+    type: Object,
+    required: true,
+    default: () => ({})
+  },
+  configData: {
+    type: Object,
+    required: true,
+    default: () => ({})
+  },
+  searchKeyword: {
+    type: String,
+    default: ''
+  }
+});
+
+const { tm } = useModuleI18n('features/config');
+
+const runnerDialog = ref(false);
+const pendingRunnerType = ref('local');
+const runnerChangeAcknowledged = ref(false);
+const activeLocalTab = ref('model');
+
+const aiEnabled = computed({
+  get() {
+    return props.configData?.provider_settings?.enable !== false;
+  },
+  set(value) {
+    if (!props.configData.provider_settings) {
+      props.configData.provider_settings = {};
+    }
+    props.configData.provider_settings.enable = value;
+  }
+});
+
+const runnerType = computed(() => props.configData?.agent_runner?.runner_type || 'local');
+const runnerTypeMetadata = computed(() => (
+  props.metadata?.agent_runner?.items?.['agent_runner.runner_type'] || {}
+));
+
+const runnerOptions = computed(() => {
+  const availableTypes = runnerTypeMetadata.value.options || [
+    'local',
+    'dify',
+    'coze',
+    'dashscope',
+    'deerflow'
+  ];
+  return availableTypes.map((value) => ({
+    value,
+    title: tm(`aiSettings.runners.${value}.title`),
+    description: tm(`aiSettings.runners.${value}.description`),
+    summary: tm(`aiSettings.runners.${value}.summary`)
+  }));
+});
+
+const currentRunner = computed(() => (
+  runnerOptions.value.find((runner) => runner.value === runnerType.value)
+  || runnerOptions.value[0]
+  || { value: 'local', title: 'AI', description: '', summary: '' }
+));
+
+const runnerSettingsTitle = computed(() => (
+  runnerType.value === 'local'
+    ? tm('aiSettings.localSettingsTitle')
+    : `${currentRunner.value.title} ${tm('aiSettings.settingsSuffix')}`
+));
+
+const localTabs = computed(() => [
+  { value: 'model', label: tm('aiSettings.tabs.model') },
+  { value: 'persona', label: tm('aiSettings.tabs.persona') },
+  { value: 'capabilities', label: tm('aiSettings.tabs.capabilities') },
+  { value: 'advanced', label: tm('aiSettings.tabs.advanced') }
+]);
+
+function filterMetadataGroup(groupKey, itemFilter, overrides = {}) {
+  const source = props.metadata?.[groupKey];
+  if (!source) return null;
+  const items = Object.fromEntries(
+    Object.entries(source.items || {}).filter(([itemKey, itemMeta]) => (
+      itemFilter(itemKey, itemMeta)
+    ))
+  );
+  if (Object.keys(items).length === 0) return null;
+  return {
+    key: groupKey,
+    metadata: {
+      ...source,
+      ...overrides,
+      items
+    }
+  };
+}
+
+const localTabGroups = computed(() => {
+  const modelGroup = filterMetadataGroup(
+    'ai',
+    (itemKey) => itemKey.startsWith('agent_runner.config.model.'),
+    {
+      description: tm('aiSettings.groups.model'),
+      hint: tm('aiSettings.groups.modelHint')
+    }
+  );
+  const executionGroup = filterMetadataGroup(
+    'others',
+    (itemKey) => itemKey.startsWith('agent_runner.config.misc.'),
+    {
+      description: tm('aiSettings.groups.execution'),
+      hint: tm('aiSettings.groups.executionHint')
+    }
+  );
+
+  return {
+    model: [modelGroup].filter(Boolean),
+    persona: props.metadata?.persona
+      ? [{ key: 'persona', metadata: props.metadata.persona }]
+      : [],
+    capabilities: [
+      'knowledgebase',
+      'websearch',
+      'agent_computer_use',
+      'proactive_capability'
+    ].filter((key) => props.metadata?.[key]).map((key) => ({
+      key,
+      metadata: props.metadata[key]
+    })),
+    advanced: [
+      props.metadata?.truncate_and_compress
+        ? { key: 'truncate_and_compress', metadata: props.metadata.truncate_and_compress }
+        : null,
+      executionGroup
+    ].filter(Boolean)
+  };
+});
+
+const activeLocalGroups = computed(() => (
+  localTabGroups.value[activeLocalTab.value] || localTabGroups.value.model
+));
+
+const thirdPartyRunnerGroup = computed(() => {
+  const key = `${runnerType.value}_runner`;
+  return props.metadata?.[key]
+    ? { key, metadata: props.metadata[key] }
+    : null;
+});
+
+const commonGroups = computed(() => [
+  filterMetadataGroup(
+    'ai',
+    (itemKey) => !itemKey.startsWith('agent_runner.config.'),
+    {
+      description: tm('aiSettings.groups.media'),
+      hint: tm('aiSettings.groups.mediaHint')
+    }
+  ),
+  filterMetadataGroup(
+    'others',
+    (itemKey) => !itemKey.startsWith('agent_runner.config.'),
+    {
+      description: tm('aiSettings.groups.behavior'),
+      hint: tm('aiSettings.groups.behaviorHint')
+    }
+  )
+].filter(Boolean));
+
+watch(runnerType, () => {
+  activeLocalTab.value = 'model';
+});
+
+watch(pendingRunnerType, () => {
+  runnerChangeAcknowledged.value = false;
+});
+
+function openRunnerDialog() {
+  pendingRunnerType.value = runnerType.value;
+  runnerChangeAcknowledged.value = false;
+  runnerDialog.value = true;
+}
+
+function confirmRunnerChange() {
+  const nextRunnerType = pendingRunnerType.value;
+  if (nextRunnerType !== runnerType.value) {
+    const defaults = runnerTypeMetadata.value.runner_defaults?.[nextRunnerType] || {};
+    if (!props.configData.agent_runner) {
+      props.configData.agent_runner = {};
+    }
+    props.configData.agent_runner.runner_type = nextRunnerType;
+    props.configData.agent_runner.config = JSON.parse(JSON.stringify(defaults));
+  }
+  runnerChangeAcknowledged.value = false;
+  runnerDialog.value = false;
+}
+</script>
+
+<style scoped>
+.ai-config-panel {
+  min-width: 0;
+}
+
+.ai-config-panel__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 20px;
+  margin-bottom: 30px;
+}
+
+.ai-config-panel__heading {
+  min-width: 0;
+}
+
+.ai-config-panel__title {
+  margin: 0;
+  color: rgb(var(--v-theme-on-surface));
+  font-size: 1.34rem;
+  font-weight: 780;
+  letter-spacing: 0;
+  line-height: 1.25;
+}
+
+.ai-config-panel__subtitle,
+.ai-config-panel__section-subtitle {
+  margin: 5px 0 0;
+  color: rgba(var(--v-theme-on-surface), 0.62);
+  font-size: 0.78rem;
+  line-height: 1.45;
+}
+
+.ai-config-panel__actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex: 0 0 auto;
+}
+
+.ai-enable-control {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.ai-enable-control :deep(.v-switch) {
+  flex: 0 0 auto;
+}
+
+.ai-config-panel__section {
+  min-width: 0;
+}
+
+.ai-config-panel__section--common {
+  margin-top: 32px;
+  padding-top: 28px;
+  border-top: 1px solid rgba(17, 24, 39, 0.09);
+}
+
+.ai-config-panel__section-heading {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 12px;
+}
+
+.ai-config-panel__section-title {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  margin: 0;
+  color: rgb(var(--v-theme-on-surface));
+  font-size: 1.04rem;
+  font-weight: 760;
+  line-height: 1.32;
+}
+
+.ai-config-panel__brand-logo {
+  flex: 0 0 auto;
+  width: 18px;
+  height: 18px;
+}
+
+.ai-config-tabs {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-bottom: 14px;
+  overflow-x: auto;
+}
+
+.ai-config-tabs__item {
+  flex: 0 0 auto;
+  min-height: 30px;
+  padding: 5px 12px;
+  border: 0;
+  border-radius: 7px;
+  background: transparent;
+  color: rgba(var(--v-theme-on-surface), 0.58);
+  cursor: pointer;
+  font: inherit;
+  font-size: 0.78rem;
+  font-weight: 650;
+}
+
+.ai-config-tabs__item:hover {
+  color: rgb(var(--v-theme-on-surface));
+  background: rgba(var(--v-theme-on-surface), 0.045);
+}
+
+.ai-config-tabs__item--active {
+  color: rgb(var(--v-theme-on-surface));
+  background: rgba(var(--v-theme-on-surface), 0.08);
+  font-weight: 740;
+}
+
+.ai-disabled-state {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  min-height: 88px;
+  padding: 16px 18px;
+  border: 1px solid rgba(17, 24, 39, 0.13);
+  border-radius: 10px;
+  color: rgba(var(--v-theme-on-surface), 0.5);
+  background: rgb(var(--v-theme-surface));
+}
+
+.ai-disabled-state__title {
+  color: rgba(var(--v-theme-on-surface), 0.78);
+  font-size: 0.88rem;
+  font-weight: 700;
+}
+
+.ai-disabled-state__subtitle {
+  margin-top: 3px;
+  font-size: 0.78rem;
+  line-height: 1.45;
+}
+
+.runner-dialog-card {
+  border-radius: 14px !important;
+}
+
+.runner-dialog-description {
+  margin: 0 0 16px;
+  color: rgba(var(--v-theme-on-surface), 0.64);
+  font-size: 0.84rem;
+  line-height: 1.5;
+}
+
+.runner-option-list {
+  overflow: hidden;
+  border: 1px solid rgba(17, 24, 39, 0.13);
+  border-radius: 10px;
+}
+
+.runner-option {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  width: 100%;
+  min-height: 64px;
+  padding: 11px 14px;
+  border: 0;
+  border-bottom: 1px solid rgba(17, 24, 39, 0.09);
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+  text-align: left;
+}
+
+.runner-option:last-child {
+  border-bottom: 0;
+}
+
+.runner-option:hover,
+.runner-option--active {
+  background: rgba(var(--v-theme-primary), 0.055);
+}
+
+.runner-option__copy {
+  min-width: 0;
+}
+
+.runner-option__title {
+  color: rgb(var(--v-theme-on-surface));
+  font-size: 0.86rem;
+  font-weight: 700;
+}
+
+.runner-option__description {
+  margin-top: 3px;
+  color: rgba(var(--v-theme-on-surface), 0.58);
+  font-size: 0.76rem;
+  line-height: 1.4;
+}
+
+.runner-option__empty-icon {
+  color: rgba(var(--v-theme-on-surface), 0.28);
+}
+
+.runner-dialog-acknowledgement {
+  margin-top: 14px;
+}
+
+.runner-dialog-acknowledgement__label {
+  color: rgba(var(--v-theme-on-surface), 0.58);
+  font-size: 0.76rem;
+  line-height: 1.45;
+}
+
+.runner-dialog-acknowledgement__label strong {
+  font-weight: 700;
+}
+
+@media (max-width: 600px) {
+  .ai-config-panel__header {
+    align-items: stretch;
+    flex-direction: column;
+    gap: 14px;
+  }
+
+  .ai-config-panel__actions {
+    justify-content: space-between;
+  }
+
+  .ai-enable-control {
+    flex: 1;
+  }
+}
+</style>
diff --git a/dashboard/src/components/config/AstrBotCoreConfigWrapper.vue b/dashboard/src/components/config/AstrBotCoreConfigWrapper.vue
index b485a783fe..3fc2906da2 100644
--- a/dashboard/src/components/config/AstrBotCoreConfigWrapper.vue
+++ b/dashboard/src/components/config/AstrBotCoreConfigWrapper.vue
@@ -1,55 +1,118 @@
 <template>
-    <div :class="$vuetify.display.mobile ? '' : 'd-flex'">
-        <v-tabs v-model="tab" :direction="$vuetify.display.mobile ? 'horizontal' : 'vertical'"
-            :align-tabs="$vuetify.display.mobile ? 'left' : 'start'" color="deep-purple-accent-4" class="config-tabs">
-            <v-tab v-for="section in visibleSections" :key="section.key" :value="section.key"
-                style="font-weight: 1000; font-size: 15px">
-                {{ tm(section.value['name']) }}
-            </v-tab>
-        </v-tabs>
-        <v-tabs-window v-model="tab" class="config-tabs-window" :style="readonly ? 'pointer-events: none; opacity: 0.6;' : ''">
-            <v-tabs-window-item v-for="section in visibleSections" :key="section.key" :value="section.key">
-                <v-container fluid>
-                    <div v-for="(val2, key2, index2) in section.value['metadata']" :key="key2">
-                        <!-- Support both traditional and JSON selector metadata -->
-                        <AstrBotConfigV4
-                            :metadata="{ [key2]: section.value['metadata'][key2] }"
-                            :iterable="config_data"
-                            :metadataKey="key2"
-                            :search-keyword="searchKeyword"
-                        >
-                        </AstrBotConfigV4>
-                    </div>
-                </v-container>
-            </v-tabs-window-item>
-
-
-            <div style="margin-left: 16px; padding-bottom: 16px">
-                <small>{{ tm('help.helpPrefix') }}
-                    <a href="https://docs.astrbot.app/" target="_blank">{{ tm('help.documentation') }}</a>
-                    {{ tm('help.helpMiddle') }}
-                    <a href="https://qm.qq.com/cgi-bin/qm/qr?k=EYGsuUTfe00_iOu9JTXS7_TEpMkXOvwv&jump_from=webapi&authKey=uUEMKCROfsseS+8IzqPjzV3y1tzy4AkykwTib2jNkOFdzezF9s9XknqnIaf3CDft"
-                        target="_blank">{{ tm('help.support') }}</a>{{ tm('help.helpSuffix') }}
-                </small>
-            </div>
-
-        </v-tabs-window>
-    </div>
-    <v-container v-if="visibleSections.length === 0" fluid class="px-0">
-        <v-alert type="info" variant="tonal">
-            {{ tm('search.noResult') }}
-        </v-alert>
-    </v-container>
+  <div class="config-workspace">
+    <nav class="config-workspace__nav" :aria-label="tm('title')">
+      <button
+        v-for="section in visibleSections"
+        :key="section.key"
+        type="button"
+        class="config-workspace__nav-item"
+        :class="{ 'config-workspace__nav-item--active': tab === section.key }"
+        :aria-pressed="tab === section.key"
+        @click="tab = section.key"
+      >
+        <v-icon :icon="getSectionIcon(section.key)" size="16" />
+        <span>{{ tm(section.value.name) }}</span>
+      </button>
+    </nav>
+
+    <main
+      class="config-workspace__main"
+      :class="{ 'config-workspace__main--readonly': readonly }"
+    >
+      <template v-for="section in visibleSections" :key="section.key">
+        <AiConfigPanel
+          v-if="section.key === 'ai_group' && tab === section.key"
+          :metadata="section.value.metadata"
+          :config-data="config_data"
+          :search-keyword="searchKeyword"
+        />
+
+        <section
+          v-else-if="section.key === 'plugin_group' && tab === section.key"
+          class="config-plugin-section"
+        >
+          <header class="config-standard-section__heading">
+            <h2 class="config-standard-section__title">
+              {{ sharedTm('pluginSetSelector.title') }}
+            </h2>
+            <p class="config-plugin-section__subtitle">
+              {{ sharedTm('pluginSetSelector.subtitle') }}
+            </p>
+          </header>
+
+          <PluginSetSelector
+            v-model="config_data.plugin_set"
+            :search-keyword="searchKeyword"
+            inline
+          />
+        </section>
+
+        <section
+          v-else-if="tab === section.key"
+          class="config-standard-section"
+        >
+          <header class="config-standard-section__heading">
+            <h2 class="config-standard-section__title">
+              {{ tm(section.value.name) }}
+            </h2>
+          </header>
+
+          <div class="config-standard-section__groups">
+            <AstrBotConfigV4
+              v-for="(sectionMetadata, metadataKey) in section.value.metadata"
+              :key="metadataKey"
+              :metadata="{ [metadataKey]: sectionMetadata }"
+              :iterable="config_data"
+              :metadata-key="metadataKey"
+              :search-keyword="searchKeyword"
+            />
+          </div>
+        </section>
+      </template>
+
+      <div v-if="visibleSections.length === 0" class="config-workspace__empty">
+        <v-icon size="34">mdi-magnify-close</v-icon>
+        <span>{{ tm('search.noResult') }}</span>
+      </div>
+
+      <footer v-if="visibleSections.length > 0" class="config-workspace__help">
+        {{ tm('help.helpPrefix') }}
+        <a href="https://docs.astrbot.app/" target="_blank" rel="noopener noreferrer">
+          {{ tm('help.documentation') }}
+        </a>
+        {{ tm('help.helpMiddle') }}
+        <a
+          href="https://qm.qq.com/cgi-bin/qm/qr?k=EYGsuUTfe00_iOu9JTXS7_TEpMkXOvwv&jump_from=webapi&authKey=uUEMKCROfsseS+8IzqPjzV3y1tzy4AkykwTib2jNkOFdzezF9s9XknqnIaf3CDft"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          {{ tm('help.support') }}
+        </a>{{ tm('help.helpSuffix') }}
+      </footer>
+    </main>
+  </div>
 </template>
 
 <script>
+import AiConfigPanel from '@/components/config/AiConfigPanel.vue';
 import AstrBotConfigV4 from '@/components/shared/AstrBotConfigV4.vue';
+import PluginSetSelector from '@/components/shared/PluginSetSelector.vue';
 import { useModuleI18n } from '@/i18n/composables';
 
+const SECTION_ORDER = ['ai_group', 'plugin_group', 'platform_group', 'ext_group'];
+const SECTION_ICONS = {
+  ai_group: 'mdi-auto-fix',
+  plugin_group: 'mdi-puzzle-outline',
+  platform_group: 'mdi-robot-outline',
+  ext_group: 'mdi-tune-variant'
+};
+
 export default {
   name: 'AstrBotCoreConfigWrapper',
   components: {
-    AstrBotConfigV4
+    AiConfigPanel,
+    AstrBotConfigV4,
+    PluginSetSelector
   },
   props: {
     metadata: {
@@ -74,7 +137,8 @@ export default {
   setup() {
     const { tm: tmConfig } = useModuleI18n('features/config');
     const { tm: tmMetadata } = useModuleI18n('features/config-metadata');
-    
+    const { tm: sharedTm } = useModuleI18n('core/shared');
+
     const tm = (key) => {
       const metadataResult = tmMetadata(key);
       if (!metadataResult.startsWith('[MISSING:') && !metadataResult.startsWith('[INVALID:')) {
@@ -82,15 +146,13 @@ export default {
       }
       return tmConfig(key);
     };
-    
-    return {
-      tm
-    };
+
+    return { tm, sharedTm };
   },
   data() {
     return {
-      tab: null, // 当前激活的配置标签页 key
-    }
+      tab: null
+    };
   },
   computed: {
     normalizedSearchKeyword() {
@@ -100,11 +162,21 @@ export default {
       if (!this.metadata || typeof this.metadata !== 'object') {
         return [];
       }
-      const allSections = Object.entries(this.metadata).map(([key, value]) => ({ key, value }));
+      const allSections = Object.entries(this.metadata)
+        .map(([key, value]) => ({ key, value }))
+        .sort((left, right) => {
+          const leftIndex = SECTION_ORDER.indexOf(left.key);
+          const rightIndex = SECTION_ORDER.indexOf(right.key);
+          return (leftIndex === -1 ? SECTION_ORDER.length : leftIndex)
+            - (rightIndex === -1 ? SECTION_ORDER.length : rightIndex);
+        });
       if (!this.normalizedSearchKeyword) {
         return allSections;
       }
-      return allSections.filter((section) => this.sectionHasSearchMatch(section.value));
+      return allSections.filter((section) => (
+        (section.key === 'plugin_group' && this.tab === 'plugin_group')
+        || this.sectionHasSearchMatch(section.value)
+      ));
     }
   },
   watch: {
@@ -116,65 +188,331 @@ export default {
     }
   },
   mounted() {
-    const sectionKeys = this.visibleSections.map((section) => section.key);
-    this.tab = sectionKeys[0] ?? null;
+    this.tab = this.visibleSections[0]?.key ?? null;
   },
   methods: {
+    getSectionIcon(sectionKey) {
+      return SECTION_ICONS[sectionKey] || 'mdi-cog-outline';
+    },
     sectionHasSearchMatch(section) {
       const keyword = this.normalizedSearchKeyword;
       if (!keyword) {
         return true;
       }
       const sectionMetadata = section?.metadata || {};
-      return Object.values(sectionMetadata).some((metaItem) => this.metaObjectHasSearchMatch(metaItem, keyword));
+      return Object.values(sectionMetadata).some((metaItem) => (
+        this.metaObjectHasSearchMatch(metaItem, keyword)
+      ));
     },
     metaObjectHasSearchMatch(metaObject, keyword) {
       if (!metaObject || typeof metaObject !== 'object') {
         return false;
       }
-      const target = [
+      const directText = [
         this.tm(metaObject.description || ''),
-        this.tm(metaObject.hint || ''),
-        ...Object.entries(metaObject.items || {}).flatMap(([itemKey, itemMeta]) => ([
-          itemKey,
-          this.tm(itemMeta?.description || ''),
-          this.tm(itemMeta?.hint || '')
-        ]))
-      ]
-        .join(' ')
-        .toLowerCase();
-
-      return target.includes(keyword);
+        this.tm(metaObject.hint || '')
+      ].join(' ').toLowerCase();
+      if (directText.includes(keyword)) {
+        return true;
+      }
+      return Object.entries(metaObject.items || {}).some(([itemKey, itemMeta]) => (
+        itemKey.toLowerCase().includes(keyword)
+        || this.metaObjectHasSearchMatch(itemMeta, keyword)
+      ));
     }
   }
-}
+};
 </script>
 
-<style>
-@media (min-width: 768px) {
-  .config-tabs {
-    display: flex;
-    margin: 16px 16px 0 0;
+<style scoped>
+.config-workspace {
+  --config-border: rgba(17, 24, 39, 0.13);
+  --config-divider: rgba(17, 24, 39, 0.09);
+  display: grid;
+  grid-template-columns: 126px minmax(0, 1fr);
+  gap: 34px;
+  align-items: start;
+  min-width: 0;
+}
+
+.config-workspace__nav {
+  position: sticky;
+  top: calc(var(--v-layout-top, 64px) + 52px);
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  padding-top: 2px;
+}
+
+.config-workspace__nav-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  min-height: 34px;
+  padding: 6px 9px 6px 12px;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: rgba(var(--v-theme-on-surface), 0.64);
+  cursor: pointer;
+  font: inherit;
+  font-size: 0.84rem;
+  font-weight: 680;
+  line-height: 1.25;
+  text-align: left;
+}
+
+.config-workspace__nav-item:hover {
+  background: rgba(var(--v-theme-on-surface), 0.045);
+  color: rgb(var(--v-theme-on-surface));
+}
+
+.config-workspace__nav-item--active {
+  background: rgba(var(--v-theme-on-surface), 0.07);
+  color: rgb(var(--v-theme-on-surface));
+  font-weight: 760;
+}
+
+.config-workspace__nav-item--active::before {
+  position: absolute;
+  top: 8px;
+  bottom: 8px;
+  left: 0;
+  width: 2px;
+  border-radius: 999px;
+  background: rgba(var(--v-theme-on-surface), 0.52);
+  content: '';
+}
+
+.config-workspace__main {
+  width: 100%;
+  max-width: 680px;
+  min-width: 0;
+}
+
+.config-workspace__main--readonly {
+  pointer-events: none;
+  opacity: 0.6;
+}
+
+.config-standard-section__heading {
+  margin-bottom: 22px;
+}
+
+.config-standard-section__title {
+  margin: 0;
+  color: rgb(var(--v-theme-on-surface));
+  font-size: 1.34rem;
+  font-weight: 780;
+  letter-spacing: 0;
+  line-height: 1.25;
+}
+
+.config-plugin-section__subtitle {
+  margin: 6px 0 0;
+  color: rgba(var(--v-theme-on-surface), 0.6);
+  font-size: 0.8rem;
+  line-height: 1.45;
+}
+
+.config-standard-section__groups,
+:deep(.config-product-groups) {
+  min-width: 0;
+}
+
+.config-standard-section__groups :deep(.v-card),
+:deep(.config-product-groups .v-card) {
+  margin-bottom: 28px !important;
+  overflow: hidden !important;
+  border: 1px solid var(--config-border) !important;
+  border-radius: 10px !important;
+  background: rgb(var(--v-theme-surface)) !important;
+  box-shadow: none !important;
+}
+
+.config-standard-section__groups :deep(.config-section),
+:deep(.config-product-groups .config-section) {
+  padding: 16px 16px 8px !important;
+}
+
+.config-standard-section__groups :deep(.config-title),
+:deep(.config-product-groups .config-title) {
+  color: rgb(var(--v-theme-on-surface));
+  font-size: 1.04rem;
+  font-weight: 760;
+  line-height: 1.32;
+}
+
+.config-standard-section__groups :deep(.config-hint),
+:deep(.config-product-groups .config-hint) {
+  margin-top: 5px;
+  color: rgba(var(--v-theme-on-surface), 0.64) !important;
+  font-size: 0.78rem;
+  line-height: 1.45;
+  white-space: normal;
+}
+
+.config-standard-section__groups :deep(.config-row),
+:deep(.config-product-groups .config-row) {
+  min-height: 60px;
+  padding: 12px 16px;
+  border-radius: 0;
+}
+
+.config-standard-section__groups :deep(.config-row:hover),
+:deep(.config-product-groups .config-row:hover) {
+  background: transparent;
+}
+
+.config-standard-section__groups :deep(.property-info),
+:deep(.config-product-groups .property-info) {
+  padding: 0 16px 0 0;
+}
+
+.config-standard-section__groups :deep(.property-info .v-list-item),
+:deep(.config-product-groups .property-info .v-list-item) {
+  padding: 0;
+}
+
+.config-standard-section__groups :deep(.property-name),
+:deep(.config-product-groups .property-name) {
+  color: rgb(var(--v-theme-on-surface));
+  font-size: 0.88rem;
+  font-weight: 700;
+  line-height: 1.4;
+  white-space: normal;
+}
+
+.config-standard-section__groups :deep(.property-hint),
+:deep(.config-product-groups .property-hint) {
+  margin-top: 4px;
+  color: rgba(var(--v-theme-on-surface), 0.7) !important;
+  font-size: 0.78rem;
+  line-height: 1.45;
+  white-space: normal;
+}
+
+.config-standard-section__groups :deep(.config-input),
+:deep(.config-product-groups .config-input) {
+  display: flex;
+  justify-content: flex-end;
+  min-width: 0;
+  padding: 0;
+}
+
+.config-standard-section__groups :deep(.config-input > *),
+:deep(.config-product-groups .config-input > *) {
+  width: 100%;
+  max-width: 270px;
+}
+
+.config-standard-section__groups :deep(.config-input .v-switch),
+:deep(.config-product-groups .config-input .v-switch) {
+  width: auto;
+  max-width: none;
+  margin-left: auto;
+}
+
+.config-standard-section__groups :deep(.config-input .v-switch .v-input__control),
+:deep(.config-product-groups .config-input .v-switch .v-input__control) {
+  margin-left: auto;
+}
+
+.config-standard-section__groups :deep(.config-input .v-switch .v-selection-control),
+:deep(.config-product-groups .config-input .v-switch .v-selection-control) {
+  justify-content: flex-end;
+}
+
+.config-standard-section__groups :deep(.v-field),
+:deep(.config-product-groups .v-field) {
+  border-radius: 10px;
+  background: transparent;
+}
+
+.config-standard-section__groups :deep(.config-divider),
+:deep(.config-product-groups .config-divider) {
+  margin-left: 0;
+  border-color: var(--config-divider);
+}
+
+.config-standard-section__groups :deep(.collapsed-config-toggle-row),
+:deep(.config-product-groups .collapsed-config-toggle-row) {
+  padding: 12px 16px 14px;
+}
+
+.config-standard-section__groups :deep(.collapsed-config-toggle),
+:deep(.config-product-groups .collapsed-config-toggle) {
+  margin-left: 0;
+}
+
+.config-workspace__empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  padding: 64px 24px;
+  color: rgba(var(--v-theme-on-surface), 0.54);
+  font-size: 0.84rem;
+}
+
+.config-workspace__help {
+  margin-top: 8px;
+  color: rgba(var(--v-theme-on-surface), 0.56);
+  font-size: 0.76rem;
+  line-height: 1.5;
+}
+
+.config-workspace__help a {
+  color: rgb(var(--v-theme-primary));
+  text-decoration: none;
+}
+
+@media (max-width: 720px) {
+  .config-workspace {
+    grid-template-columns: 1fr;
+    gap: 22px;
   }
 
-  .config-tabs-window {
-    flex: 1;
+  .config-workspace__nav {
+    position: static;
+    flex-direction: row;
+    gap: 6px;
+    overflow-x: auto;
+    padding-bottom: 2px;
   }
 
-  .config-tabs .v-tab {
-    justify-content: flex-start !important;
-    text-align: left;
-    min-height: 48px;
+  .config-workspace__main {
+    max-width: none;
+  }
+
+  .config-workspace__nav-item {
+    flex: 0 0 auto;
+    width: auto;
+    border: 1px solid var(--config-border);
+    background: rgb(var(--v-theme-surface));
+  }
+
+  .config-standard-section__groups :deep(.config-row),
+  :deep(.config-product-groups .config-row) {
+    padding: 14px 16px;
+  }
+
+  .config-standard-section__groups :deep(.property-info),
+  :deep(.config-product-groups .property-info) {
+    padding-right: 0;
   }
-}
 
-@media (max-width: 767px) {
-  .config-tabs {
-    width: 100%;
+  .config-standard-section__groups :deep(.config-input),
+  :deep(.config-product-groups .config-input) {
+    justify-content: stretch;
+    padding-top: 10px;
   }
 
-  .config-tabs-window {
-    margin-top: 16px;
+  .config-standard-section__groups :deep(.config-input > *),
+  :deep(.config-product-groups .config-input > *) {
+    max-width: none;
   }
 }
 </style>
diff --git a/dashboard/src/components/config/ConfigProfileMenu.vue b/dashboard/src/components/config/ConfigProfileMenu.vue
new file mode 100644
index 0000000000..445784e5a3
--- /dev/null
+++ b/dashboard/src/components/config/ConfigProfileMenu.vue
@@ -0,0 +1,302 @@
+<template>
+  <v-menu
+    v-model="menuOpen"
+    :close-on-content-click="false"
+    location="bottom start"
+    :offset="10"
+    transition="none"
+  >
+    <template #activator="{ props: menuProps }">
+      <button
+        v-bind="menuProps"
+        type="button"
+        class="config-profile-trigger"
+        :disabled="disabled"
+        :aria-label="tm('configSelection.selectConfig')"
+      >
+        <span class="config-profile-trigger__title">{{ selectedName }}</span>
+        <v-icon class="config-profile-trigger__chevron" size="18">
+          mdi-chevron-down
+        </v-icon>
+      </button>
+    </template>
+
+    <v-card class="config-profile-menu" elevation="0">
+      <div class="config-profile-menu__body">
+        <v-text-field
+          v-if="items.length > 5"
+          v-model="searchQuery"
+          :placeholder="tm('configSelection.search')"
+          hide-details
+          variant="outlined"
+          density="compact"
+          prepend-inner-icon="mdi-magnify"
+          class="config-profile-menu__search"
+          clearable
+        />
+
+        <v-list density="compact" nav class="config-profile-menu__list">
+          <v-list-item
+            v-for="item in filteredItems"
+            :key="item.id"
+            :active="modelValue === item.id"
+            rounded="lg"
+            class="config-profile-menu__item"
+            @click="selectProfile(item.id)"
+          >
+            <v-list-item-title class="config-profile-menu__item-title">
+              {{ displayName(item) }}
+            </v-list-item-title>
+            <template #append>
+              <v-icon
+                v-if="modelValue === item.id"
+                class="config-profile-menu__selected-icon"
+                size="18"
+              >
+                mdi-check
+              </v-icon>
+            </template>
+          </v-list-item>
+        </v-list>
+
+        <div v-if="filteredItems.length === 0" class="config-profile-menu__empty">
+          {{ tm('configSelection.noResults') }}
+        </div>
+
+        <v-divider class="config-profile-menu__divider" />
+        <button type="button" class="config-profile-menu__manage" @click="openManager">
+          <v-icon size="17">mdi-cog-outline</v-icon>
+          <span>{{ tm('configManagement.manageConfigs') }}</span>
+        </button>
+      </div>
+    </v-card>
+  </v-menu>
+</template>
+
+<script setup>
+import { computed, ref, watch } from 'vue';
+import { useModuleI18n } from '@/i18n/composables';
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: ''
+  },
+  items: {
+    type: Array,
+    default: () => []
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const emit = defineEmits(['select', 'manage']);
+const { tm } = useModuleI18n('features/config');
+const menuOpen = ref(false);
+const searchQuery = ref('');
+
+function displayName(item) {
+  if (item?.id === 'default') {
+    return tm('configSelection.defaultConfig');
+  }
+  return item?.name || item?.id || tm('configSelection.selectConfig');
+}
+
+const selectedName = computed(() => {
+  const selected = props.items.find((item) => item.id === props.modelValue);
+  if (selected) {
+    return displayName(selected);
+  }
+  if (props.modelValue === 'default') {
+    return tm('configSelection.defaultConfig');
+  }
+  return props.modelValue || tm('configSelection.selectConfig');
+});
+
+const filteredItems = computed(() => {
+  const query = searchQuery.value.trim().toLowerCase();
+  if (!query) {
+    return props.items;
+  }
+  return props.items.filter((item) => (
+    displayName(item).toLowerCase().includes(query)
+    || String(item.id || '').toLowerCase().includes(query)
+  ));
+});
+
+watch(menuOpen, (isOpen) => {
+  if (!isOpen) {
+    searchQuery.value = '';
+  }
+});
+
+function selectProfile(id) {
+  emit('select', id);
+  menuOpen.value = false;
+}
+
+function openManager() {
+  emit('manage');
+  menuOpen.value = false;
+}
+</script>
+
+<style scoped>
+.config-profile-trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 6px;
+  max-width: min(280px, 38vw);
+  min-width: 0;
+  height: 24px;
+  margin-top: 2px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: rgb(var(--v-theme-on-surface));
+  cursor: pointer;
+  font: inherit;
+  letter-spacing: 0;
+  text-align: left;
+}
+
+.config-profile-trigger:disabled {
+  cursor: default;
+  opacity: 0.55;
+}
+
+.config-profile-trigger:focus {
+  outline: none;
+}
+
+.config-profile-trigger:focus-visible {
+  border-radius: 6px;
+  outline: 2px solid rgba(var(--v-theme-primary), 0.42);
+  outline-offset: 3px;
+}
+
+.config-profile-trigger__title {
+  min-width: 0;
+  overflow: hidden;
+  font-size: 17px;
+  font-weight: 620;
+  line-height: 24px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.config-profile-trigger__chevron {
+  flex: 0 0 auto;
+  opacity: 0.64;
+}
+
+.config-profile-menu {
+  width: min(360px, calc(100vw - 24px));
+  overflow: hidden;
+  border: 1px solid rgba(var(--v-theme-on-surface), 0.09) !important;
+  border-radius: 14px !important;
+  background: rgb(var(--v-theme-surface));
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.07) !important;
+}
+
+:global(.v-overlay.v-menu .v-overlay__content > .config-profile-menu) {
+  border: 1px solid rgba(var(--v-theme-on-surface), 0.09) !important;
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.07) !important;
+}
+
+.config-profile-menu__body {
+  padding: 10px;
+}
+
+.config-profile-menu__search {
+  margin-bottom: 8px;
+}
+
+.config-profile-menu__search :deep(.v-field) {
+  border-radius: 10px;
+  box-shadow: none;
+}
+
+.config-profile-menu__search :deep(.v-field__outline) {
+  color: rgba(var(--v-theme-on-surface), 0.16);
+}
+
+.config-profile-menu__list {
+  max-height: min(320px, 52vh);
+  overflow-y: auto;
+  padding: 0;
+}
+
+.config-profile-menu__item {
+  min-height: 42px !important;
+  margin-bottom: 2px;
+  border-radius: 10px !important;
+}
+
+.config-profile-menu__item:hover {
+  background: rgba(var(--v-theme-on-surface), 0.05);
+}
+
+.config-profile-menu__item.v-list-item--active {
+  background: rgba(var(--v-theme-primary), 0.08);
+  color: rgb(var(--v-theme-on-surface));
+}
+
+.config-profile-menu__item-title {
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 18px;
+}
+
+.config-profile-menu__selected-icon {
+  color: rgba(var(--v-theme-on-surface), 0.72);
+}
+
+.config-profile-menu__empty {
+  padding: 16px;
+  color: rgba(var(--v-theme-on-surface), 0.5);
+  font-size: 12px;
+  text-align: center;
+}
+
+.config-profile-menu__divider {
+  margin: 8px 0;
+  border-color: rgba(var(--v-theme-on-surface), 0.08);
+}
+
+.config-profile-menu__manage {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  width: 100%;
+  min-height: 40px;
+  padding: 8px 12px;
+  border: 0;
+  border-radius: 10px;
+  background: transparent;
+  color: rgba(var(--v-theme-on-surface), 0.72);
+  cursor: pointer;
+  font: inherit;
+  font-size: 13px;
+  font-weight: 600;
+  text-align: left;
+}
+
+.config-profile-menu__manage:hover {
+  background: rgba(var(--v-theme-on-surface), 0.05);
+  color: rgb(var(--v-theme-on-surface));
+}
+
+@media (max-width: 768px) {
+  .config-profile-trigger {
+    max-width: calc(100vw - 40px);
+  }
+
+  .config-profile-trigger__title {
+    font-size: 16px;
+  }
+}
+</style>
diff --git a/dashboard/src/components/shared/PluginSetSelector.vue b/dashboard/src/components/shared/PluginSetSelector.vue
index 8ab83b8e0e..594bb8d26d 100644
--- a/dashboard/src/components/shared/PluginSetSelector.vue
+++ b/dashboard/src/components/shared/PluginSetSelector.vue
@@ -1,5 +1,72 @@
 <template>
-  <div>
+  <div v-if="inline" class="inline-plugin-selector">
+    <v-progress-linear v-if="loading" indeterminate color="primary" />
+
+    <template v-else-if="pluginList.length > 0">
+      <div class="inline-plugin-selector__toolbar">
+        <v-text-field
+          v-model="pluginSearchKeyword"
+          class="inline-plugin-selector__search"
+          :placeholder="tm('pluginSetSelector.searchPlaceholder')"
+          prepend-inner-icon="mdi-magnify"
+          variant="outlined"
+          density="compact"
+          hide-details
+          clearable
+        />
+        <v-checkbox-btn
+          :model-value="allPluginsSelected"
+          :indeterminate="somePluginsSelected"
+          :label="tm('pluginSetSelector.selectAll')"
+          color="primary"
+          density="compact"
+          @update:model-value="toggleAllPlugins"
+        />
+      </div>
+
+      <div v-if="filteredPluginList.length > 0" class="inline-plugin-selector__list">
+        <div
+          v-for="plugin in filteredPluginList"
+          :key="plugin.name"
+          class="inline-plugin-card"
+          @click="toggleInlinePlugin(plugin)"
+        >
+          <div class="inline-plugin-card__body">
+            <div class="inline-plugin-card__title-row">
+              <span class="inline-plugin-card__title">{{ pluginDisplayName(plugin) }}</span>
+              <span v-if="plugin.reserved" class="inline-plugin-card__preset">
+                {{ tm('pluginSetSelector.preset') }}
+              </span>
+            </div>
+            <div class="inline-plugin-card__description" :title="pluginDescription(plugin)">
+              {{ pluginDescription(plugin) || tm('pluginSetSelector.noDescription') }}
+            </div>
+          </div>
+
+          <v-checkbox-btn
+            :model-value="inlinePluginEnabled(plugin)"
+            :aria-label="pluginDisplayName(plugin)"
+            color="primary"
+            density="compact"
+            @click.stop
+            @update:model-value="toggleInlinePlugin(plugin)"
+          />
+        </div>
+      </div>
+
+      <div v-else class="inline-plugin-selector__empty inline-plugin-selector__empty--search">
+        <v-icon size="38">mdi-magnify-close</v-icon>
+        <span>{{ tm('pluginSetSelector.noSearchResults') }}</span>
+      </div>
+    </template>
+
+    <div v-else class="inline-plugin-selector__empty">
+      <v-icon size="38">mdi-puzzle-outline</v-icon>
+      <span>{{ tm('pluginSetSelector.noPlugins') }}</span>
+    </div>
+  </div>
+
+  <div v-else>
     <!-- 顶部操作区域 -->
     <div class="d-flex align-center justify-space-between mb-2">
       <div class="flex-grow-1">
@@ -103,7 +170,7 @@
 </template>
 
 <script setup>
-import { ref, computed, watch } from 'vue'
+import { ref, computed, onMounted, watch } from 'vue'
 import { pluginApi } from '@/api/v1'
 import { useModuleI18n } from '@/i18n/composables'
 import { usePluginI18n } from '@/utils/pluginI18n'
@@ -120,6 +187,14 @@ const props = defineProps({
   maxDisplayItems: {
     type: Number,
     default: 3
+  },
+  inline: {
+    type: Boolean,
+    default: false
+  },
+  searchKeyword: {
+    type: String,
+    default: ''
   }
 })
 
@@ -132,6 +207,7 @@ const pluginList = ref([])
 const loading = ref(false)
 const selectionMode = ref('custom') // 'all', 'none', 'custom'
 const selectedPlugins = ref([])
+const pluginSearchKeyword = ref('')
 
 const pluginDisplayName = (plugin) => pluginName(plugin) || plugin.name
 const pluginDescription = (plugin) => pluginDesc(plugin)
@@ -141,6 +217,35 @@ const isAllPlugins = computed(() => {
   return props.modelValue && props.modelValue.length === 1 && props.modelValue[0] === '*'
 })
 
+const filteredPluginList = computed(() => {
+  const keywords = [props.searchKeyword, pluginSearchKeyword.value]
+    .map(keyword => String(keyword || '').trim().toLowerCase())
+    .filter(Boolean)
+  if (keywords.length === 0) return pluginList.value
+  return pluginList.value.filter((plugin) => {
+    const searchableText = [
+      plugin.name,
+      pluginDisplayName(plugin),
+      pluginDescription(plugin)
+    ].filter(Boolean).join(' ').toLowerCase()
+    return keywords.every(keyword => searchableText.includes(keyword))
+  })
+})
+
+const selectedPluginCount = computed(() => {
+  if (isAllPlugins.value) return pluginList.value.length
+  const selected = new Set(props.modelValue || [])
+  return pluginList.value.filter(plugin => selected.has(plugin.name)).length
+})
+
+const allPluginsSelected = computed(() => (
+  pluginList.value.length > 0 && selectedPluginCount.value === pluginList.value.length
+))
+
+const somePluginsSelected = computed(() => (
+  selectedPluginCount.value > 0 && !allPluginsSelected.value
+))
+
 // 移除插件
 function removePlugin(pluginName) {
   if (props.modelValue && props.modelValue.length > 0) {
@@ -173,14 +278,19 @@ async function loadPlugins() {
   try {
     const response = await pluginApi.list()
     if (response.data.status === 'ok') {
-      // 只显示已激活且非系统的插件，并按名称排序
-      pluginList.value = (response.data.data || [])
-        .filter(plugin => plugin.activated && !plugin.reserved)
+      const activatedPlugins = (response.data.data || [])
+        .filter(plugin => plugin.activated)
         .sort((a, b) => {
-          const nameA = a.name || '';
-          const nameB = b.name || '';
+          if (props.inline && Boolean(a.reserved) !== Boolean(b.reserved)) {
+            return a.reserved ? -1 : 1
+          }
+          const nameA = pluginDisplayName(a) || a.name || '';
+          const nameB = pluginDisplayName(b) || b.name || '';
           return nameA.localeCompare(nameB);
         })
+      pluginList.value = props.inline
+        ? activatedPlugins
+        : activatedPlugins.filter(plugin => !plugin.reserved)
     }
   } catch (error) {
     console.error('加载插件列表失败:', error)
@@ -190,6 +300,42 @@ async function loadPlugins() {
   }
 }
 
+function inlinePluginEnabled(plugin) {
+  return isAllPlugins.value || (props.modelValue || []).includes(plugin.name)
+}
+
+function toggleInlinePlugin(plugin) {
+  const selected = new Set(
+    isAllPlugins.value
+      ? pluginList.value.map(item => item.name)
+      : (props.modelValue || [])
+  )
+  if (selected.has(plugin.name)) {
+    selected.delete(plugin.name)
+  } else {
+    selected.add(plugin.name)
+  }
+  const nextSelection = pluginList.value
+    .map(item => item.name)
+    .filter(name => selected.has(name))
+  emit(
+    'update:modelValue',
+    nextSelection.length === pluginList.value.length && pluginList.value.length > 0
+      ? ['*']
+      : nextSelection
+  )
+}
+
+function toggleAllPlugins() {
+  emit('update:modelValue', allPluginsSelected.value ? [] : ['*'])
+}
+
+onMounted(() => {
+  if (props.inline) {
+    loadPlugins()
+  }
+})
+
 function confirmSelection() {
   let newValue = []
   
@@ -235,4 +381,135 @@ function cancelSelection() {
 .v-list-item:hover {
   background-color: rgba(var(--v-theme-primary), 0.04);
 }
+
+.inline-plugin-selector__list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.inline-plugin-selector__toolbar {
+  display: flex;
+  min-height: 34px;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 8px;
+}
+
+.inline-plugin-selector__search {
+  min-width: 0;
+  max-width: 240px;
+}
+
+.inline-plugin-selector__search :deep(.v-field) {
+  min-height: 36px;
+  border-radius: 9px;
+}
+
+.inline-plugin-selector__search :deep(.v-field__input) {
+  min-height: 36px;
+  padding-top: 6px;
+  padding-bottom: 6px;
+  font-size: 0.78rem;
+}
+
+.inline-plugin-selector__toolbar :deep(.v-label) {
+  color: rgba(var(--v-theme-on-surface), 0.72);
+  font-size: 0.8rem;
+  font-weight: 650;
+}
+
+.inline-plugin-card {
+  display: flex;
+  min-height: 76px;
+  align-items: center;
+  gap: 18px;
+  padding: 13px 14px 13px 16px;
+  border-radius: 12px;
+  background: rgba(var(--v-theme-on-surface), 0.045);
+  cursor: pointer;
+  transition: background-color 120ms ease;
+}
+
+.inline-plugin-card:hover {
+  background: rgba(var(--v-theme-on-surface), 0.065);
+}
+
+.inline-plugin-card__body {
+  min-width: 0;
+  flex: 1;
+}
+
+.inline-plugin-card__title-row {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: 8px;
+}
+
+.inline-plugin-card__title {
+  overflow: hidden;
+  color: rgb(var(--v-theme-on-surface));
+  font-size: 0.94rem;
+  font-weight: 740;
+  line-height: 1.35;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.inline-plugin-card__preset {
+  flex: 0 0 auto;
+  padding: 2px 7px;
+  border-radius: 999px;
+  background: rgba(var(--v-theme-primary), 0.1);
+  color: rgb(var(--v-theme-primary));
+  font-size: 0.68rem;
+  font-weight: 650;
+  line-height: 1.45;
+}
+
+.inline-plugin-card__description {
+  overflow: hidden;
+  margin-top: 5px;
+  color: rgba(var(--v-theme-on-surface), 0.54);
+  font-size: 0.76rem;
+  line-height: 1.4;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.inline-plugin-card :deep(.v-selection-control) {
+  min-height: 32px;
+}
+
+.inline-plugin-selector__empty {
+  display: flex;
+  min-height: 180px;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  color: rgba(var(--v-theme-on-surface), 0.5);
+  font-size: 0.82rem;
+}
+
+.inline-plugin-selector__empty--search {
+  min-height: 150px;
+}
+
+@media (max-width: 600px) {
+  .inline-plugin-selector__toolbar {
+    gap: 10px;
+  }
+
+  .inline-plugin-selector__search {
+    max-width: none;
+  }
+
+  .inline-plugin-card {
+    min-height: 70px;
+    padding: 11px 10px 11px 13px;
+  }
+}
 </style>
diff --git a/dashboard/src/components/shared/ProviderSelectMenu.vue b/dashboard/src/components/shared/ProviderSelectMenu.vue
new file mode 100644
index 0000000000..70dfdfb0ab
--- /dev/null
+++ b/dashboard/src/components/shared/ProviderSelectMenu.vue
@@ -0,0 +1,888 @@
+<template>
+  <div class="provider-select-menu" :class="`provider-select-menu--${variant}`">
+    <v-menu
+      v-model="menuOpen"
+      :close-on-content-click="false"
+      :location="menuLocation"
+      offset="10"
+      transition="none"
+      @update:model-value="handleMenuToggle"
+    >
+      <template #activator="{ props: menuProps }">
+        <button
+          v-bind="menuProps"
+          class="provider-trigger"
+          :class="`provider-trigger--${variant}`"
+          type="button"
+        >
+          <span class="provider-trigger-copy">
+            <span class="provider-trigger-title">{{ triggerTitle }}</span>
+            <span v-if="triggerMeta" class="provider-trigger-meta">
+              {{ triggerMeta }}
+            </span>
+          </span>
+          <v-icon class="provider-trigger-chevron" size="18">
+            mdi-chevron-down
+          </v-icon>
+        </button>
+      </template>
+
+      <v-card class="provider-menu-card" elevation="0">
+        <div class="provider-menu-body">
+          <v-text-field
+            v-model="searchQuery"
+            :placeholder="sharedTm('providerSelector.searchPlaceholder')"
+            hide-details
+            variant="outlined"
+            density="compact"
+            prepend-inner-icon="mdi-magnify"
+            class="provider-search"
+            clearable
+          />
+
+          <v-progress-linear
+            v-if="loadingProviders"
+            indeterminate
+            color="primary"
+            class="provider-loading"
+          />
+
+          <div
+            v-if="multiple && selectedProviderIds.length > 0"
+            class="selected-provider-section"
+          >
+            <div class="selected-provider-label">
+              {{
+                sharedTm("providerSelector.selectedModelCount", {
+                  count: selectedProviderIds.length,
+                })
+              }}
+            </div>
+            <v-list density="compact" class="selected-provider-list">
+              <v-list-item
+                v-for="(providerId, index) in selectedProviderIds"
+                :key="`selected-${providerId}`"
+                rounded="lg"
+                class="selected-provider-item"
+              >
+                <v-list-item-title class="provider-item-title">
+                  {{ providerId }}
+                </v-list-item-title>
+                <template #append>
+                  <div class="selected-provider-actions">
+                    <v-btn
+                      icon="mdi-arrow-up"
+                      size="x-small"
+                      variant="text"
+                      :disabled="index === 0"
+                      @click.stop="moveSelected(index, -1)"
+                    />
+                    <v-btn
+                      icon="mdi-arrow-down"
+                      size="x-small"
+                      variant="text"
+                      :disabled="index === selectedProviderIds.length - 1"
+                      @click.stop="moveSelected(index, 1)"
+                    />
+                    <v-btn
+                      icon="mdi-close"
+                      size="x-small"
+                      variant="text"
+                      @click.stop="removeSelected(providerId)"
+                    />
+                  </div>
+                </template>
+              </v-list-item>
+            </v-list>
+            <v-divider class="provider-menu-divider" />
+          </div>
+
+          <v-list
+            v-if="!loadingProviders"
+            density="compact"
+            nav
+            class="provider-menu-list"
+          >
+            <v-list-item
+              v-if="!multiple && allowEmpty && !searchQuery"
+              :active="!modelValue"
+              rounded="lg"
+              class="provider-menu-item"
+              @click="clearSelection"
+            >
+              <v-list-item-title class="provider-item-title">
+                {{ sharedTm("providerSelector.clearSelection") }}
+              </v-list-item-title>
+              <v-list-item-subtitle class="provider-subtitle">
+                {{ sharedTm("providerSelector.clearSelectionSubtitle") }}
+              </v-list-item-subtitle>
+              <template #append>
+                <v-icon
+                  v-if="!modelValue"
+                  class="provider-selected-icon"
+                  size="18"
+                >
+                  mdi-check
+                </v-icon>
+              </template>
+            </v-list-item>
+
+            <v-list-item
+              v-for="provider in filteredProviders"
+              :key="provider.id"
+              :active="isProviderSelected(provider.id)"
+              rounded="lg"
+              class="provider-menu-item"
+              @click="selectProvider(provider)"
+            >
+              <v-list-item-title class="provider-item-title">
+                {{ provider.id }}
+              </v-list-item-title>
+              <v-list-item-subtitle class="provider-subtitle">
+                <span class="model-name">
+                  {{
+                    provider.model || provider.type || provider.provider_type
+                  }}
+                </span>
+                <span
+                  v-if="
+                    capabilityBadges(provider).length ||
+                    formatContextLimit(provider, metadataForProvider(provider))
+                  "
+                  class="meta-icons"
+                >
+                  <v-tooltip
+                    v-for="item in capabilityBadges(provider)"
+                    :key="item.key"
+                    location="top"
+                    max-width="320"
+                  >
+                    <template #activator="{ props: badgeTooltipProps }">
+                      <span
+                        v-bind="badgeTooltipProps"
+                        class="meta-icon-badge"
+                        :class="{ 'meta-icon-badge--disabled': !item.enabled }"
+                        @click.stop
+                      >
+                        <v-icon size="13">{{ item.icon }}</v-icon>
+                      </span>
+                    </template>
+                    <span>{{ item.tooltip }}</span>
+                  </v-tooltip>
+                  <v-tooltip
+                    v-if="
+                      formatContextLimit(
+                        provider,
+                        metadataForProvider(provider),
+                      )
+                    "
+                    location="top"
+                    max-width="320"
+                  >
+                    <template #activator="{ props: contextTooltipProps }">
+                      <span
+                        v-bind="contextTooltipProps"
+                        class="meta-context-badge"
+                        @click.stop
+                      >
+                        {{
+                          formatContextLimit(
+                            provider,
+                            metadataForProvider(provider),
+                          )
+                        }}
+                      </span>
+                    </template>
+                    <span>{{
+                      providerTm("models.metadata.context", {
+                        tokens: formatContextLimit(
+                          provider,
+                          metadataForProvider(provider),
+                        ),
+                      })
+                    }}</span>
+                  </v-tooltip>
+                </span>
+              </v-list-item-subtitle>
+              <template #append>
+                <div class="provider-menu-actions" @click.stop>
+                  <v-tooltip location="top">
+                    <template #activator="{ props: testTooltipProps }">
+                      <v-btn
+                        v-bind="testTooltipProps"
+                        icon="mdi-connection"
+                        size="x-small"
+                        variant="text"
+                        :loading="testingProviderIds.includes(provider.id)"
+                        :disabled="testingProviderIds.includes(provider.id)"
+                        @click.stop="testProvider(provider)"
+                      />
+                    </template>
+                    <span>{{ providerTm("models.testButton") }}</span>
+                  </v-tooltip>
+                  <v-icon
+                    v-if="isProviderSelected(provider.id)"
+                    class="provider-selected-icon"
+                    size="18"
+                  >
+                    mdi-check
+                  </v-icon>
+                </div>
+              </template>
+            </v-list-item>
+          </v-list>
+
+          <div
+            v-if="!loadingProviders && filteredProviders.length === 0"
+            class="empty-hint"
+          >
+            {{ sharedTm("providerSelector.noProviders") }}
+          </div>
+
+          <v-divider class="provider-menu-divider" />
+          <v-btn
+            block
+            prepend-icon="mdi-plus"
+            variant="text"
+            class="provider-create-button"
+            @click="openProviderDrawer"
+          >
+            {{ sharedTm("providerSelector.createProvider") }}
+          </v-btn>
+        </div>
+      </v-card>
+    </v-menu>
+  </div>
+
+  <v-overlay
+    v-model="providerDrawer"
+    class="provider-drawer-overlay"
+    location="right"
+    transition="slide-x-reverse-transition"
+    :scrim="true"
+    @click:outside="closeProviderDrawer"
+  >
+    <v-card class="provider-drawer-card" elevation="12">
+      <div class="provider-drawer-header">
+        <v-btn icon variant="text" @click="closeProviderDrawer">
+          <v-icon>mdi-close</v-icon>
+        </v-btn>
+      </div>
+      <div class="provider-drawer-content">
+        <ProviderChatCompletionPanel
+          v-if="providerType === 'chat_completion'"
+        />
+        <ProviderPage v-else :default-tab="providerType" />
+      </div>
+    </v-card>
+  </v-overlay>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from "vue";
+import { providerApi } from "@/api/v1";
+import ProviderChatCompletionPanel from "@/components/provider/ProviderChatCompletionPanel.vue";
+import ProviderPage from "@/views/ProviderPage.vue";
+import { useModuleI18n } from "@/i18n/composables";
+import { useToast } from "@/utils/toast";
+import {
+  formatContextLimit,
+  providerCapabilityBadges,
+  type ProviderModelMetadata,
+  type ProviderMetadataSource,
+} from "@/utils/providerMetadata";
+
+interface ProviderConfig extends ProviderMetadataSource {
+  id: string;
+  model?: string;
+  type?: string;
+  provider_type?: string;
+  enable?: boolean;
+}
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: string | string[];
+    fallbackModel?: string;
+    providerType?: string;
+    variant?: "config" | "input" | "header";
+    allowEmpty?: boolean;
+    multiple?: boolean;
+  }>(),
+  {
+    modelValue: "",
+    fallbackModel: "",
+    providerType: "chat_completion",
+    variant: "config",
+    allowEmpty: true,
+    multiple: false,
+  },
+);
+
+const emit = defineEmits<{
+  "update:modelValue": [value: string | string[]];
+  select: [provider: ProviderConfig | null];
+}>();
+
+const { tm: sharedTm } = useModuleI18n("core.shared");
+const { tm: providerTm } = useModuleI18n("features/provider");
+const { success: toastSuccess, error: toastError } = useToast();
+
+const providerConfigs = ref<ProviderConfig[]>([]);
+const modelMetadata = ref<Record<string, ProviderModelMetadata>>({});
+const testingProviderIds = ref<string[]>([]);
+const searchQuery = ref("");
+const menuOpen = ref(false);
+const providerDrawer = ref(false);
+const loadingProviders = ref(false);
+const providersLoaded = ref(false);
+
+const selectedProviderIds = computed(() =>
+  props.multiple && Array.isArray(props.modelValue)
+    ? props.modelValue.filter((value): value is string => Boolean(value))
+    : [],
+);
+
+const selectedProvider = computed(() =>
+  providerConfigs.value.find(
+    (provider) =>
+      !Array.isArray(props.modelValue) && provider.id === props.modelValue,
+  ),
+);
+
+const triggerTitle = computed(() => {
+  if (props.multiple) {
+    return selectedProviderIds.value.length > 0
+      ? sharedTm("providerSelector.selectedModelCount", {
+          count: selectedProviderIds.value.length,
+        })
+      : sharedTm("providerSelector.notSelected");
+  }
+  if (selectedProvider.value?.id) return selectedProvider.value.id;
+  if (typeof props.modelValue === "string" && props.modelValue) {
+    return props.modelValue;
+  }
+  if (props.variant === "header")
+    return sharedTm("providerSelector.defaultModel");
+  if (props.variant === "input") return sharedTm("providerSelector.model");
+  return sharedTm("providerSelector.notSelected");
+});
+
+const triggerMeta = computed(() => {
+  if (props.variant !== "header") return "";
+  const model = selectedProvider.value?.model || props.fallbackModel;
+  if (!model || model === triggerTitle.value) return "";
+  return model;
+});
+
+const menuLocation = computed(() => {
+  if (props.variant === "input") return "top";
+  return props.variant === "header" ? "bottom start" : "bottom end";
+});
+
+const filteredProviders = computed(() => {
+  const query = searchQuery.value.trim().toLowerCase();
+  if (!query) return providerConfigs.value;
+  return providerConfigs.value.filter(
+    (provider) =>
+      provider.id.toLowerCase().includes(query) ||
+      String(provider.model || "")
+        .toLowerCase()
+        .includes(query),
+  );
+});
+
+async function loadProviderConfigs(force = false) {
+  if (loadingProviders.value || (providersLoaded.value && !force)) return;
+  loadingProviders.value = true;
+  try {
+    const response = await providerApi.listByProviderType(props.providerType);
+    if (response.data.status === "ok") {
+      modelMetadata.value = (response.data.model_metadata || {}) as Record<
+        string,
+        ProviderModelMetadata
+      >;
+      providerConfigs.value = (
+        (response.data.data || []) as unknown as ProviderConfig[]
+      ).filter((provider) => provider.enable !== false);
+      providersLoaded.value = true;
+    }
+  } catch (error) {
+    console.error("Failed to load provider list:", error);
+    providerConfigs.value = [];
+  } finally {
+    loadingProviders.value = false;
+  }
+}
+
+function selectProvider(provider: ProviderConfig) {
+  if (props.multiple) {
+    const selected = [...selectedProviderIds.value];
+    const index = selected.indexOf(provider.id);
+    if (index >= 0) {
+      selected.splice(index, 1);
+    } else {
+      selected.push(provider.id);
+    }
+    emit("update:modelValue", selected);
+    return;
+  }
+  emit("update:modelValue", provider.id);
+  emit("select", provider);
+  menuOpen.value = false;
+}
+
+function clearSelection() {
+  emit("update:modelValue", "");
+  emit("select", null);
+  menuOpen.value = false;
+}
+
+function isProviderSelected(providerId: string) {
+  return props.multiple
+    ? selectedProviderIds.value.includes(providerId)
+    : props.modelValue === providerId;
+}
+
+function removeSelected(providerId: string) {
+  emit(
+    "update:modelValue",
+    selectedProviderIds.value.filter((value) => value !== providerId),
+  );
+}
+
+function moveSelected(index: number, delta: number) {
+  const targetIndex = index + delta;
+  if (targetIndex < 0 || targetIndex >= selectedProviderIds.value.length) {
+    return;
+  }
+  const selected = [...selectedProviderIds.value];
+  const [providerId] = selected.splice(index, 1);
+  selected.splice(targetIndex, 0, providerId);
+  emit("update:modelValue", selected);
+}
+
+function capabilityBadges(provider: ProviderConfig) {
+  return providerCapabilityBadges(
+    provider,
+    metadataForProvider(provider),
+    providerTm,
+  );
+}
+
+function metadataForProvider(provider: ProviderConfig) {
+  return provider.model ? modelMetadata.value[provider.model] || null : null;
+}
+
+async function testProvider(provider: ProviderConfig) {
+  if (testingProviderIds.value.includes(provider.id)) return;
+  testingProviderIds.value.push(provider.id);
+  try {
+    const startTime = performance.now();
+    const response = await providerApi.test(provider.id);
+    if (response.data.status === "ok" && response.data.data.error === null) {
+      const latency = Math.max(0, Math.round(performance.now() - startTime));
+      toastSuccess(
+        providerTm("models.testSuccessWithLatency", {
+          id: provider.id,
+          latency,
+        }),
+      );
+    } else {
+      throw new Error(
+        response.data.data.error || providerTm("models.testError"),
+      );
+    }
+  } catch (error: any) {
+    toastError(
+      error.response?.data?.message ||
+        error.message ||
+        providerTm("models.testError"),
+    );
+  } finally {
+    testingProviderIds.value = testingProviderIds.value.filter(
+      (providerId) => providerId !== provider.id,
+    );
+  }
+}
+
+function handleMenuToggle(isOpen: boolean) {
+  if (isOpen) loadProviderConfigs(true);
+}
+
+function openProviderDrawer() {
+  menuOpen.value = false;
+  providerDrawer.value = true;
+}
+
+function closeProviderDrawer() {
+  providerDrawer.value = false;
+}
+
+function getCurrentSelection() {
+  return {
+    providerId: Array.isArray(props.modelValue) ? "" : props.modelValue,
+    modelName: selectedProvider.value?.model || props.fallbackModel || "",
+  };
+}
+
+watch(providerDrawer, (isOpen, wasOpen) => {
+  if (!isOpen && wasOpen) loadProviderConfigs(true);
+});
+
+defineExpose({ getCurrentSelection });
+</script>
+
+<style scoped>
+.provider-select-menu {
+  max-width: 100%;
+}
+
+.provider-select-menu--config {
+  display: flex;
+  width: 100%;
+  justify-content: flex-end;
+}
+
+.provider-trigger {
+  display: inline-flex;
+  max-width: 100%;
+  min-width: 0;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 6px;
+  border: 0;
+  background: transparent;
+  color: rgb(var(--v-theme-on-surface));
+  cursor: pointer;
+  font: inherit;
+  letter-spacing: 0;
+  text-align: left;
+}
+
+.provider-trigger-copy {
+  display: inline-flex;
+  min-width: 0;
+  align-items: baseline;
+  gap: 10px;
+}
+
+.provider-trigger-title,
+.provider-trigger-meta {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.provider-trigger--config {
+  width: fit-content;
+  min-height: 36px;
+  justify-content: space-between;
+  margin-left: auto;
+  padding: 6px 8px;
+  border-radius: 8px;
+}
+
+.provider-trigger--config:hover {
+  background: rgba(var(--v-theme-on-surface), 0.045);
+}
+
+.provider-trigger--config .provider-trigger-title {
+  font-size: 0.88rem;
+  font-weight: 500;
+}
+
+.provider-trigger--header {
+  height: 24px;
+  margin-top: 2px;
+  padding: 0;
+}
+
+.provider-trigger--header .provider-trigger-title {
+  font-size: 17px;
+  font-weight: 620;
+  line-height: 24px;
+}
+
+.provider-trigger--header .provider-trigger-meta {
+  color: rgba(var(--v-theme-on-surface), 0.55);
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 18px;
+}
+
+.provider-trigger--input {
+  height: 40px;
+  max-width: min(280px, 42vw);
+  padding: 0 12px;
+  border: 1px solid rgba(var(--v-theme-on-surface), 0.18);
+  border-radius: 999px;
+}
+
+.provider-trigger--input:hover {
+  border-color: rgba(var(--v-theme-on-surface), 0.34);
+  background: rgba(var(--v-theme-on-surface), 0.04);
+}
+
+.provider-trigger--input .provider-trigger-title {
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.provider-trigger--input .provider-trigger-meta {
+  display: none;
+}
+
+.provider-trigger-chevron {
+  flex: 0 0 auto;
+  opacity: 0.64;
+}
+
+.provider-menu-card {
+  width: min(420px, calc(100vw - 24px));
+  overflow: hidden;
+  border: 1px solid rgba(var(--v-theme-on-surface), 0.09);
+  border-radius: 14px !important;
+  background: rgb(var(--v-theme-surface));
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.07) !important;
+}
+
+:global(.v-overlay.v-menu .v-overlay__content > .provider-menu-card) {
+  border: 1px solid rgba(var(--v-theme-on-surface), 0.09) !important;
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.07) !important;
+}
+
+.provider-menu-body {
+  padding: 10px;
+}
+
+.provider-search {
+  margin-bottom: 8px;
+}
+
+.provider-search :deep(.v-field) {
+  border-radius: 10px;
+  box-shadow: none;
+}
+
+.provider-search :deep(.v-field__outline) {
+  color: rgba(var(--v-theme-on-surface), 0.16);
+}
+
+.provider-loading {
+  margin: 6px 0;
+}
+
+.selected-provider-section {
+  margin-bottom: 2px;
+}
+
+.selected-provider-label {
+  padding: 2px 8px 6px;
+  color: rgba(var(--v-theme-on-surface), 0.55);
+  font-size: 12px;
+}
+
+.selected-provider-list {
+  max-height: 184px;
+  overflow-y: auto;
+  padding: 0;
+  background: rgba(var(--v-theme-on-surface), 0.025);
+  border-radius: 10px;
+}
+
+.selected-provider-item {
+  min-height: 42px !important;
+}
+
+.selected-provider-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 1px;
+}
+
+.provider-menu-list {
+  max-height: min(360px, 58vh);
+  overflow-y: auto;
+  padding: 0;
+}
+
+.provider-menu-item {
+  min-height: 54px !important;
+  margin-bottom: 2px;
+  border-radius: 10px !important;
+}
+
+.provider-menu-item:hover {
+  background: rgba(var(--v-theme-on-surface), 0.05);
+}
+
+.provider-menu-item.v-list-item--active {
+  background: rgba(var(--v-theme-primary), 0.08);
+  color: rgb(var(--v-theme-on-surface));
+}
+
+.provider-item-title {
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 18px;
+}
+
+.provider-subtitle {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: 8px;
+}
+
+.model-name {
+  min-width: 0;
+  overflow: hidden;
+  color: rgba(var(--v-theme-on-surface), 0.58);
+  font-size: 12px;
+  line-height: 16px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.meta-icons {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: 4px;
+  color: rgba(var(--v-theme-on-surface), 0.5);
+}
+
+.meta-icon-badge {
+  display: inline-flex;
+  align-items: center;
+  color: rgba(var(--v-theme-on-surface), 0.72);
+}
+
+.meta-icon-badge--disabled {
+  color: rgba(var(--v-theme-on-surface), 0.34);
+}
+
+.meta-context-badge {
+  display: inline-flex;
+  align-items: center;
+  height: 16px;
+  padding: 0 5px;
+  border-radius: 999px;
+  background: rgba(var(--v-theme-on-surface), 0.06);
+  color: rgba(var(--v-theme-on-surface), 0.72);
+  font-size: 10px;
+  font-weight: 650;
+  line-height: 16px;
+}
+
+.provider-menu-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.provider-selected-icon {
+  color: rgba(var(--v-theme-on-surface), 0.72);
+}
+
+.empty-hint {
+  padding: 16px;
+  color: rgba(var(--v-theme-on-surface), 0.5);
+  font-size: 12px;
+  text-align: center;
+}
+
+.provider-menu-divider {
+  margin: 6px 0;
+}
+
+.provider-create-button {
+  justify-content: flex-start;
+  border-radius: 9px;
+  text-transform: none;
+}
+
+.provider-drawer-overlay {
+  align-items: stretch;
+  justify-content: flex-end;
+}
+
+.provider-drawer-card {
+  display: flex;
+  width: clamp(360px, 70vw, 1200px);
+  height: calc(100vh - 32px);
+  flex-direction: column;
+  margin: 16px;
+  overflow: hidden;
+}
+
+.provider-drawer-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px 12px;
+}
+
+.provider-drawer-content {
+  flex: 1;
+  overflow: hidden;
+}
+
+.provider-drawer-content > * {
+  height: 100%;
+  overflow: auto;
+}
+
+@media (max-width: 960px) {
+  .provider-drawer-card {
+    width: calc(100dvw - 24px);
+    height: calc(100dvh - 24px);
+    margin: 12px;
+  }
+}
+
+@media (max-width: 768px) {
+  .provider-trigger--header .provider-trigger-title {
+    font-size: 16px;
+  }
+
+  .provider-trigger--header .provider-trigger-meta {
+    display: none;
+  }
+
+  .provider-trigger--input {
+    height: 38px;
+    max-width: 48vw;
+  }
+}
+
+@media (max-width: 600px) {
+  .provider-drawer-overlay {
+    align-items: stretch;
+    justify-content: stretch;
+  }
+
+  .provider-drawer-card {
+    width: 100dvw;
+    height: 100dvh;
+    margin: 0;
+    border-radius: 0;
+  }
+
+  .provider-drawer-header {
+    padding: 8px 12px;
+  }
+
+  .provider-drawer-content {
+    overflow: auto;
+  }
+
+  :deep(.v-overlay__content) {
+    width: 100dvw;
+    max-width: 100dvw;
+    margin: 0;
+  }
+}
+</style>
diff --git a/dashboard/src/components/shared/ProviderSelector.vue b/dashboard/src/components/shared/ProviderSelector.vue
index 0de8bc7ce0..f26c2639d9 100644
--- a/dashboard/src/components/shared/ProviderSelector.vue
+++ b/dashboard/src/components/shared/ProviderSelector.vue
@@ -1,597 +1,35 @@
 <template>
-  <div class="d-flex align-center justify-space-between">
-    <span v-if="!hasSelection" style="color: rgb(var(--v-theme-primaryText));">
-      {{ tm('providerSelector.notSelected') }}
-    </span>
-    <span v-else class="provider-name-text">
-      <template v-if="multiple">
-        {{ tm('providerSelector.selectedCount', { count: selectedProviders.length }) }}
-      </template>
-      <template v-else>
-        {{ modelValue }}
-      </template>
-    </span>
-    <v-btn size="small" color="primary" variant="tonal" @click="openDialog">
-      {{ buttonText || tm('providerSelector.buttonText') }}
-    </v-btn>
-  </div>
-
-  <div v-if="multiple && selectedProviders.length > 0" class="selected-preview mt-2">
-    <v-chip
-      v-for="providerId in selectedProviders"
-      :key="`preview-${providerId}`"
-      size="x-small"
-      color="primary"
-      variant="tonal"
-      class="mr-1 mb-1"
-      label
-    >
-      {{ providerId }}
-    </v-chip>
-  </div>
-
-  <!-- Provider Selection Dialog -->
-  <v-dialog v-model="dialog" max-width="600px">
-    <v-card>
-      <v-card-title
-        class="text-h3 pa-4 pb-0 pl-6 d-flex align-center justify-space-between gap-4 flex-wrap"
-      >
-        <span>{{ tm('providerSelector.dialogTitle') }}</span>
-        <v-btn
-          size="small"
-          color="primary"
-          variant="tonal"
-          prepend-icon="mdi-plus"
-          @click="openProviderDrawer"
-        >
-          {{ tm('providerSelector.createProvider') }}
-        </v-btn>
-      </v-card-title>
-      
-      <v-card-text class="pa-0" style="max-height: 400px; overflow-y: auto;">
-        <v-progress-linear v-if="loading" indeterminate color="primary"></v-progress-linear>
-
-        <div v-if="multiple && selectedProviders.length > 0" class="pa-3">
-          <div class="text-caption text-medium-emphasis mb-2">
-            {{ tm('providerSelector.selectedCount', { count: selectedProviders.length }) }}
-          </div>
-          <v-list density="compact" class="selected-order-list">
-            <v-list-item
-              v-for="(providerId, index) in selectedProviders"
-              :key="`selected-${providerId}-${index}`"
-              rounded="md"
-              class="ma-1"
-            >
-              <v-list-item-title>{{ providerId }}</v-list-item-title>
-              <template #append>
-                <div class="d-flex ga-1">
-                  <v-btn
-                    icon="mdi-arrow-up"
-                    size="x-small"
-                    variant="text"
-                    :disabled="index === 0"
-                    @click.stop="moveSelected(index, -1)"
-                  />
-                  <v-btn
-                    icon="mdi-arrow-down"
-                    size="x-small"
-                    variant="text"
-                    :disabled="index === selectedProviders.length - 1"
-                    @click.stop="moveSelected(index, 1)"
-                  />
-                  <v-btn
-                    icon="mdi-close"
-                    size="x-small"
-                    variant="text"
-                    @click.stop="removeSelected(providerId)"
-                  />
-                </div>
-              </template>
-            </v-list-item>
-          </v-list>
-          <v-divider class="ma-1"></v-divider>
-        </div>
-        
-        <v-list v-if="!loading && providerList.length > 0" density="compact">
-          <!-- 不选择选项 -->
-          <v-list-item
-            v-if="!multiple"
-            key="none"
-            value=""
-            @click="selectProvider({ id: '' })"
-            :active="selectedProvider === ''"
-            rounded="md"
-            class="ma-1">
-            <v-list-item-title>{{ tm('providerSelector.clearSelection') }}</v-list-item-title>
-            <v-list-item-subtitle>{{ tm('providerSelector.clearSelectionSubtitle') }}</v-list-item-subtitle>
-            
-            <template v-slot:append>
-              <v-icon v-if="selectedProvider === ''">mdi-check-circle</v-icon>
-            </template>
-          </v-list-item>
-          
-          <v-divider class="ma-1"></v-divider>
-          
-          <v-list-item
-            v-for="provider in providerList"
-            :key="provider.id"
-            :value="provider.id"
-            @click="selectProvider(provider)"
-            :active="isProviderSelected(provider.id)"
-            rounded="md"
-            class="ma-1">
-            <v-list-item-title>{{ provider.id }}</v-list-item-title>
-            <v-list-item-subtitle>
-              {{ provider.type || provider.provider_type || tm('providerSelector.unknownType') }}
-              <span v-if="provider.model">- {{ provider.model }}</span>
-              <span
-                v-if="capabilityBadges(provider).length || formatContextLimit(provider, metadataForProvider(provider))"
-                class="provider-selector-meta"
-              >
-                <v-tooltip
-                  v-for="item in capabilityBadges(provider)"
-                  :key="item.key"
-                  location="top"
-                  max-width="320"
-                >
-                  <template #activator="{ props: badgeTooltipProps }">
-                    <span
-                      v-bind="badgeTooltipProps"
-                      class="provider-selector-meta__badge"
-                      :class="{ 'provider-selector-meta__badge--disabled': !item.enabled }"
-                      @click.stop
-                    >
-                      <v-icon size="13">{{ item.icon }}</v-icon>
-                    </span>
-                  </template>
-                  <span>{{ item.tooltip }}</span>
-                </v-tooltip>
-                <v-tooltip
-                  v-if="formatContextLimit(provider, metadataForProvider(provider))"
-                  location="top"
-                  max-width="320"
-                >
-                  <template #activator="{ props: contextTooltipProps }">
-                    <span
-                      v-bind="contextTooltipProps"
-                      class="provider-selector-meta__context"
-                      @click.stop
-                    >
-                      {{ formatContextLimit(provider, metadataForProvider(provider)) }}
-                    </span>
-                  </template>
-                  <span>{{
-                    providerTm('models.metadata.context', {
-                      tokens: formatContextLimit(provider, metadataForProvider(provider))
-                    })
-                  }}</span>
-                </v-tooltip>
-              </span>
-            </v-list-item-subtitle>
-            
-            <template v-slot:append>
-              <div class="provider-selector-actions" @click.stop>
-                <v-tooltip location="top">
-                  <template #activator="{ props: testTooltipProps }">
-                    <v-btn
-                      v-bind="testTooltipProps"
-                      icon="mdi-connection"
-                      size="x-small"
-                      variant="text"
-                      :loading="isProviderTesting(provider.id)"
-                      :disabled="!isProviderTestable(provider)"
-                      @click.stop="testProvider(provider)"
-                    />
-                  </template>
-                  <span>{{ providerTm('models.testButton') }}</span>
-                </v-tooltip>
-                <v-icon v-if="isProviderSelected(provider.id)">mdi-check-circle</v-icon>
-              </div>
-            </template>
-          </v-list-item>
-        </v-list>
-        
-        <div v-else-if="!loading && providerList.length === 0" class="text-center py-8">
-          <v-icon size="64" color="grey-lighten-1">mdi-api-off</v-icon>
-          <p class="text-grey mt-4">{{ tm('providerSelector.noProviders') }}</p>
-        </div>
-      </v-card-text>
-      
-      <v-divider></v-divider>
-      
-      <v-card-actions class="pa-4">
-        <v-spacer></v-spacer>
-        <v-btn variant="text" @click="cancelSelection">{{ tm('providerSelector.cancelSelection') }}</v-btn>
-        <v-btn 
-          color="primary" 
-          variant="tonal"
-          @click="confirmSelection">
-          {{ tm('providerSelector.confirmSelection') }}
-        </v-btn>
-      </v-card-actions>
-    </v-card>
-  </v-dialog>
-
-  <v-overlay
-    v-model="providerDrawer"
-    class="provider-drawer-overlay"
-    location="right"
-    transition="slide-x-reverse-transition"
-    :scrim="true"
-    @click:outside="closeProviderDrawer"
-  >
-    <v-card class="provider-drawer-card" elevation="12">
-      <div class="provider-drawer-header">
-        <v-btn icon variant="text" @click="closeProviderDrawer">
-          <v-icon>mdi-close</v-icon>
-        </v-btn>
-      </div>
-      <div class="provider-drawer-content">
-        <ProviderChatCompletionPanel
-          v-if="defaultTab === 'chat_completion'"
-        />
-        <ProviderPage v-else :default-tab="defaultTab" />
-      </div>
-    </v-card>
-  </v-overlay>
+  <ProviderSelectMenu
+    :model-value="modelValue"
+    :provider-type="providerType"
+    variant="config"
+    :allow-empty="!multiple"
+    :multiple="multiple"
+    @update:model-value="emit('update:modelValue', $event)"
+  />
 </template>
 
 <script setup>
-import { computed, ref, watch } from 'vue'
-import { providerApi } from '@/api/v1'
-import { useModuleI18n } from '@/i18n/composables'
-import { useToast } from '@/utils/toast'
-import { formatContextLimit, providerCapabilityBadges } from '@/utils/providerMetadata'
-import ProviderChatCompletionPanel from '@/components/provider/ProviderChatCompletionPanel.vue'
-import ProviderPage from '@/views/ProviderPage.vue'
+import ProviderSelectMenu from "@/components/shared/ProviderSelectMenu.vue";
 
-const props = defineProps({
+defineProps({
   modelValue: {
     type: [String, Array],
-    default: ''
+    default: "",
   },
   providerType: {
     type: String,
-    default: 'chat_completion'
+    default: "chat_completion",
   },
   buttonText: {
     type: String,
-    default: ''
+    default: "",
   },
   multiple: {
     type: Boolean,
-    default: false
-  }
-})
-
-const emit = defineEmits(['update:modelValue'])
-const { tm } = useModuleI18n('core.shared')
-const { tm: providerTm } = useModuleI18n('features/provider')
-const { success: toastSuccess, error: toastError } = useToast()
-
-const dialog = ref(false)
-const providerList = ref([])
-const loading = ref(false)
-const selectedProvider = ref('')
-const selectedProviders = ref([])
-const providerDrawer = ref(false)
-const testingProviders = ref([])
-const modelMetadata = ref({})
-
-const hasSelection = computed(() => {
-  if (props.multiple) {
-    return selectedProviders.value.length > 0
-  }
-  return Boolean(props.modelValue)
-})
-
-const defaultTab = computed(() => {
-  return props.providerType || 'chat_completion'
-})
-
-// 监听 modelValue 变化，同步到 selectedProvider
-watch(() => props.modelValue, (newValue) => {
-  if (props.multiple) {
-    selectedProviders.value = Array.isArray(newValue)
-      ? [...newValue.filter((v) => typeof v === 'string' && v)]
-      : []
-    return
-  }
-  selectedProvider.value = typeof newValue === 'string' ? newValue : ''
-}, { immediate: true })
-
-watch(providerDrawer, (isOpen, wasOpen) => {
-  if (!isOpen && wasOpen) {
-    loadProviders()
-  }
-})
-
-async function openDialog() {
-  if (props.multiple) {
-    selectedProviders.value = Array.isArray(props.modelValue)
-      ? [...props.modelValue.filter((v) => typeof v === 'string' && v)]
-      : []
-  } else {
-    selectedProvider.value = typeof props.modelValue === 'string' ? props.modelValue : ''
-  }
-  dialog.value = true
-  await loadProviders()
-}
-
-async function loadProviders() {
-  loading.value = true
-  try {
-    const response = await providerApi.listByProviderType(props.providerType)
-    if (response.data.status === 'ok') {
-      modelMetadata.value = response.data.model_metadata || {}
-      providerList.value = response.data.data || []
-    }
-  } catch (error) {
-    console.error('加载提供商列表失败:', error)
-    providerList.value = []
-  } finally {
-    loading.value = false
-  }
-}
-
-function selectProvider(provider) {
-  if (props.multiple) {
-    if (!provider.id) {
-      selectedProviders.value = []
-      return
-    }
-    const idx = selectedProviders.value.indexOf(provider.id)
-    if (idx >= 0) {
-      selectedProviders.value.splice(idx, 1)
-    } else {
-      selectedProviders.value.push(provider.id)
-    }
-    return
-  }
-  selectedProvider.value = provider.id
-}
-
-function confirmSelection() {
-  if (props.multiple) {
-    emit('update:modelValue', [...selectedProviders.value])
-  } else {
-    emit('update:modelValue', selectedProvider.value)
-  }
-  dialog.value = false
-}
-
-function cancelSelection() {
-  if (props.multiple) {
-    selectedProviders.value = Array.isArray(props.modelValue)
-      ? [...props.modelValue.filter((v) => typeof v === 'string' && v)]
-      : []
-  } else {
-    selectedProvider.value = typeof props.modelValue === 'string' ? props.modelValue : ''
-  }
-  dialog.value = false
-}
-
-function isProviderSelected(providerId) {
-  if (props.multiple) {
-    return selectedProviders.value.includes(providerId)
-  }
-  return selectedProvider.value === providerId
-}
-
-function capabilityBadges(provider) {
-  return providerCapabilityBadges(provider, metadataForProvider(provider), providerTm)
-}
-
-function metadataForProvider(provider) {
-  return provider?.model ? modelMetadata.value[provider.model] || null : null
-}
-
-function isProviderTesting(providerId) {
-  return testingProviders.value.includes(providerId)
-}
-
-function isProviderTestable(provider) {
-  return Boolean(provider?.id) && provider.enable !== false && !isProviderTesting(provider.id)
-}
-
-async function testProvider(provider) {
-  if (!isProviderTestable(provider)) {
-    return
-  }
-  testingProviders.value.push(provider.id)
-  try {
-    const startTime = performance.now()
-    const response = await providerApi.test(String(provider.id))
-    if (response.data.status === 'ok' && response.data.data.error === null) {
-      const latency = Math.max(0, Math.round(performance.now() - startTime))
-      toastSuccess(providerTm('models.testSuccessWithLatency', {
-        id: provider.id,
-        latency
-      }))
-    } else {
-      throw new Error(response.data.data.error || providerTm('models.testError'))
-    }
-  } catch (error) {
-    toastError(error.response?.data?.message || error.message || providerTm('models.testError'))
-  } finally {
-    testingProviders.value = testingProviders.value.filter((id) => id !== provider.id)
-  }
-}
-
-function removeSelected(providerId) {
-  const idx = selectedProviders.value.indexOf(providerId)
-  if (idx >= 0) {
-    selectedProviders.value.splice(idx, 1)
-  }
-}
-
-function moveSelected(index, delta) {
-  const targetIndex = index + delta
-  if (
-    targetIndex < 0
-    || targetIndex >= selectedProviders.value.length
-    || index < 0
-    || index >= selectedProviders.value.length
-  ) {
-    return
-  }
-  const copied = [...selectedProviders.value]
-  const [item] = copied.splice(index, 1)
-  copied.splice(targetIndex, 0, item)
-  selectedProviders.value = copied
-}
-
-function openProviderDrawer() {
-  providerDrawer.value = true
-}
+    default: false,
+  },
+});
 
-function closeProviderDrawer() {
-  providerDrawer.value = false
-}
+const emit = defineEmits(["update:modelValue"]);
 </script>
-
-<style scoped>
-.provider-name-text {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  max-width: calc(100% - 80px);
-  display: inline-block;
-}
-
-.selected-preview {
-  width: 100%;
-  max-width: 100%;
-}
-
-.selected-order-list {
-  background: rgba(var(--v-theme-surface-variant), 0.15);
-  border-radius: 10px;
-}
-
-.provider-selector-meta {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  margin-left: 8px;
-  vertical-align: middle;
-}
-
-.provider-selector-meta__badge {
-  display: inline-flex;
-  align-items: center;
-  color: rgba(var(--v-theme-on-surface), 0.72);
-}
-
-.provider-selector-meta__badge--disabled {
-  color: rgba(var(--v-theme-on-surface), 0.34);
-}
-
-.provider-selector-meta__context {
-  display: inline-flex;
-  align-items: center;
-  height: 16px;
-  padding: 0 5px;
-  border-radius: 999px;
-  background: rgba(var(--v-theme-on-surface), 0.06);
-  color: rgba(var(--v-theme-on-surface), 0.72);
-  font-size: 10px;
-  font-weight: 650;
-  line-height: 16px;
-}
-
-.provider-selector-actions {
-  display: inline-flex;
-  align-items: center;
-  gap: 2px;
-  color: rgba(var(--v-theme-on-surface), 0.72);
-}
-
-.v-list-item {
-  transition: all 0.2s ease;
-}
-
-.v-list-item:hover {
-  background-color: rgba(var(--v-theme-primary), 0.04);
-}
-
-.v-list-item.v-list-item--active {
-  background-color: rgba(var(--v-theme-primary), 0.08);
-}
-
-.provider-drawer-overlay {
-  align-items: stretch;
-  justify-content: flex-end;
-}
-
-.provider-drawer-card {
-  width: clamp(360px, 70vw, 1200px);
-  height: calc(100vh - 32px);
-  margin: 16px;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-.provider-drawer-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 16px 20px 12px 20px;
-}
-
-.provider-drawer-content {
-  flex: 1;
-  overflow: hidden;
-}
-
-.provider-drawer-content > * {
-  height: 100%;
-  overflow: auto;
-}
-
-@media (max-width: 960px) {
-  .provider-drawer-card {
-    width: calc(100dvw - 24px);
-    height: calc(100dvh - 24px);
-    margin: 12px;
-  }
-}
-
-@media (max-width: 600px) {
-  .provider-name-text {
-    max-width: 100%;
-  }
-
-  .provider-drawer-overlay {
-    align-items: stretch;
-    justify-content: stretch;
-  }
-
-  .provider-drawer-card {
-    width: 100dvw;
-    height: 100dvh;
-    margin: 0;
-    border-radius: 0;
-  }
-
-  .provider-drawer-header {
-    padding: 8px 12px;
-  }
-
-  .provider-drawer-content {
-    overflow: auto;
-  }
-
-  :deep(.v-overlay__content) {
-    width: 100dvw;
-    max-width: 100dvw;
-    margin: 0;
-  }
-
-  :deep(.v-dialog > .v-overlay__content) {
-    width: calc(100dvw - 24px);
-    max-width: calc(100dvw - 24px);
-  }
-}
-</style>
diff --git a/dashboard/src/components/shared/StyledMenu.vue b/dashboard/src/components/shared/StyledMenu.vue
index 01c58099bf..ea9f43f943 100644
--- a/dashboard/src/components/shared/StyledMenu.vue
+++ b/dashboard/src/components/shared/StyledMenu.vue
@@ -35,10 +35,15 @@ withDefaults(defineProps<{
 .styled-menu-card {
   min-width: 100px;
   width: fit-content;
-  border: 0 !important;
+  border: 1px solid rgba(var(--v-theme-on-surface), 0.09) !important;
   background: rgba(var(--v-theme-surface), 0.98) !important;
   backdrop-filter: blur(10px);
-  box-shadow: var(--astrbot-menu-shadow, 0 12px 28px rgba(0, 0, 0, 0.08)) !important;
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.07) !important;
+}
+
+.v-overlay.v-menu .v-overlay__content > .styled-menu-card:not(.styled-menu-card-borderless) {
+  border: 1px solid rgba(var(--v-theme-on-surface), 0.09) !important;
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.07) !important;
 }
 
 .styled-menu-card-borderless {
@@ -71,7 +76,7 @@ withDefaults(defineProps<{
 /* 深色模式下的下拉框样式 - 需要全局样式才能检测主题 */
 .v-theme--PurpleThemeDark .styled-menu-card {
   background: rgba(var(--v-theme-surface), 0.98) !important;
-  border: 0 !important;
+  border: 1px solid rgba(var(--v-theme-on-surface), 0.09) !important;
 }
 
 .v-theme--PurpleThemeDark .styled-menu-card-borderless {
diff --git a/dashboard/src/i18n/locales/en-US/core/shared.json b/dashboard/src/i18n/locales/en-US/core/shared.json
index 87f62ed611..d54ae63165 100644
--- a/dashboard/src/i18n/locales/en-US/core/shared.json
+++ b/dashboard/src/i18n/locales/en-US/core/shared.json
@@ -14,6 +14,12 @@
     "chunkCount": "{count} chunk(s)"
   },
   "pluginSetSelector": {
+    "title": "Plugins",
+    "subtitle": "Choose which plugins this profile can use.",
+    "preset": "Preset",
+    "searchPlaceholder": "Search plugins",
+    "selectAll": "Select all",
+    "noSearchResults": "No matching plugins",
     "notSelected": "No plugins enabled",
     "allPlugins": "All plugins enabled (*)",
     "selectedCount": "{count} plugin(s) selected",
@@ -34,6 +40,9 @@
   },
   "providerSelector": {
     "notSelected": "Not selected",
+    "defaultModel": "Default model",
+    "model": "Model",
+    "searchPlaceholder": "Search models",
     "buttonText": "Select Provider...",
     "dialogTitle": "Select Provider",
     "loading": "Loading...",
@@ -46,6 +55,7 @@
     "createProvider": "Create Provider",
     "manageProviders": "Provider Management",
     "selectProviderPool": "Select Provider Pool...",
+    "selectedModelCount": "{count} model(s) selected",
     "selectedCount": "{count} provider(s) selected"
   },
   "personaSelector": {
diff --git a/dashboard/src/i18n/locales/en-US/features/config-metadata.json b/dashboard/src/i18n/locales/en-US/features/config-metadata.json
index 89133e0f59..c1410e658d 100644
--- a/dashboard/src/i18n/locales/en-US/features/config-metadata.json
+++ b/dashboard/src/i18n/locales/en-US/features/config-metadata.json
@@ -85,21 +85,21 @@
       "hint": "Configure the built-in Agent's chat models and shared image caption and speech models.",
       "agent_runner": { "config": { "model": {
         "provider_id": {
-          "description": "Default Chat Model",
+          "description": "Chat Model",
           "hint": "Uses the first model when left empty"
         },
         "fallback_provider_ids": {
-          "description": "Fallback Chat Model IDs",
+          "description": "Fallback Chat Models",
           "hint": "Try these chat models in order when the primary model request fails."
         },
         "request_max_retries": {
-          "description": "Request Max Retries",
+          "description": "Retries on Error",
           "hint": "Maximum attempts for a single model request when retryable errors occur."
         }
       } } },
       "provider_settings": {
         "default_image_caption_provider_id": {
-          "description": "Default Image Caption Model",
+          "description": "Image Caption Model",
           "hint": "Leave empty to disable; useful for non-multimodal models"
         },
         "image_caption_prompt": {
@@ -108,8 +108,8 @@
       },
       "provider_stt_settings": {
         "enable": {
-          "description": "Enable Speech-to-Text",
-          "hint": "Master switch for STT"
+          "description": "Speech Recognition",
+          "hint": "Use a speech-to-text model to transcribe user voice messages into text for the model to understand."
         },
         "provider_id": {
           "description": "Default Speech-to-Text Model",
@@ -118,8 +118,8 @@
       },
       "provider_tts_settings": {
         "enable": {
-          "description": "Enable Text-to-Speech",
-          "hint": "Master switch for TTS"
+          "description": "Voice Replies",
+          "hint": "Use a text-to-speech model to turn text into voice replies."
         },
         "provider_id": {
           "description": "Default Text-to-Speech Model"
@@ -380,11 +380,11 @@
           "hint": "When enabled, current time information will be appended to the system prompt."
         },
         "show_tool_use_status": {
-          "description": "Output Function Call Status"
+          "description": "Show Tool Call Information"
         },
         "show_tool_call_result": {
           "description": "Output Tool Call Results",
-          "hint": "Only takes effect when \"Output Function Call Status\" is enabled, and shows at most 70 characters."
+          "hint": "Only takes effect when \"Show Tool Call Information\" is enabled, and shows at most 70 characters."
         },
         "buffer_intermediate_messages": {
           "description": "Merge Agent Intermediate Messages",
@@ -424,7 +424,7 @@
           ]
         },
         "wake_prefix": {
-          "description": "Additional LLM Chat Wake Prefix",
+          "description": "Additional Wake Prefix",
           "hint": "If the wake prefix is / and the additional chat wake prefix is chat, then /chat is required to trigger LLM requests"
         },
         "prompt_prefix": {
diff --git a/dashboard/src/i18n/locales/en-US/features/config.json b/dashboard/src/i18n/locales/en-US/features/config.json
index 3d5e52feec..d045814ef3 100644
--- a/dashboard/src/i18n/locales/en-US/features/config.json
+++ b/dashboard/src/i18n/locales/en-US/features/config.json
@@ -45,6 +45,73 @@
     "notification": "Notification Settings",
     "moreConfig": "More Settings"
   },
+  "aiSettings": {
+    "title": "AI",
+    "enable": "Enable AI",
+    "more": "More actions",
+    "changeRunner": "Change execution mode",
+    "localSettingsTitle": "AstrBot Built-in AI",
+    "settingsSuffix": "Settings",
+    "tabs": {
+      "model": "Model",
+      "persona": "Persona",
+      "capabilities": "Capabilities",
+      "advanced": "Advanced"
+    },
+    "groups": {
+      "model": "Model",
+      "modelHint": "Choose the chat models and retry policy used by built-in AI.",
+      "execution": "Execution",
+      "executionHint": "Configure the tool-call loop and execution process.",
+      "media": "Image and Voice",
+      "mediaHint": "Configure image understanding, speech-to-text, and text-to-speech.",
+      "behavior": "Message Handling",
+      "behaviorHint": "These settings apply to every execution mode in this profile."
+    },
+    "common": {
+      "title": "Common Settings",
+      "subtitle": "These settings remain unchanged when the execution mode changes."
+    },
+    "disabled": {
+      "title": "AI is disabled",
+      "subtitle": "Enable AI to process messages that require a model."
+    },
+    "runnerDialog": {
+      "title": "Change Execution Mode",
+      "subtitle": "Change this only when connecting an external AI application. Built-in AI is suitable for most users.",
+      "warningPrefix": "Switching will use the new execution mode's default configuration. The current execution mode's configuration ",
+      "warningEmphasis": "will not be retained",
+      "warningSuffix": ".",
+      "confirm": "Use This Mode"
+    },
+    "runners": {
+      "local": {
+        "title": "Built-in AI",
+        "summary": "Configure AstrBot's AI capabilities, including models, personas, knowledge bases, and tools.",
+        "description": "Use AstrBot's built-in AI with models, personas, knowledge bases, and tools."
+      },
+      "dify": {
+        "title": "Dify",
+        "summary": "AI conversations are currently handled by a Dify application.",
+        "description": "Connect a Dify application and configure its access parameters."
+      },
+      "coze": {
+        "title": "Coze",
+        "summary": "AI conversations are currently handled by a Coze Bot.",
+        "description": "Connect a Coze Bot and configure its access parameters."
+      },
+      "dashscope": {
+        "title": "Alibaba Cloud Model Studio",
+        "summary": "AI conversations are currently handled by a Model Studio application.",
+        "description": "Connect an Alibaba Cloud Model Studio application and configure its access parameters."
+      },
+      "deerflow": {
+        "title": "DeerFlow",
+        "summary": "AI conversations are currently handled by DeerFlow.",
+        "description": "Connect DeerFlow and configure its runtime parameters."
+      }
+    }
+  },
   "general": {
     "botName": "Bot Name",
     "language": "Interface Language",
@@ -67,6 +134,9 @@
   },
   "configSelection": {
     "selectConfig": "Select Configuration",
+    "defaultConfig": "Default Configuration",
+    "search": "Search configurations",
+    "noResults": "No matching configurations",
     "normalConfig": "Basic",
     "systemConfig": "System"
   },
@@ -76,7 +146,7 @@
   },
   "configManagement": {
     "title": "Configuration Management",
-    "description": "AstrBot supports separate configuration files for different bots. The `default` configuration is used by default.",
+    "description": "AstrBot supports separate configuration files for different bots. The default configuration is used when none is specified.",
     "newConfig": "New Configuration",
     "copyConfig": "Copy Configuration",
     "editConfig": "Edit Configuration",
diff --git a/dashboard/src/i18n/locales/ru-RU/core/shared.json b/dashboard/src/i18n/locales/ru-RU/core/shared.json
index 2a4e9874d4..017aea85bc 100644
--- a/dashboard/src/i18n/locales/ru-RU/core/shared.json
+++ b/dashboard/src/i18n/locales/ru-RU/core/shared.json
@@ -14,6 +14,12 @@
         "chunkCount": "Фрагментов: {count}"
     },
     "pluginSetSelector": {
+        "title": "Плагины",
+        "subtitle": "Выберите плагины, доступные этому профилю.",
+        "preset": "Встроенный",
+        "searchPlaceholder": "Поиск плагинов",
+        "selectAll": "Выбрать все",
+        "noSearchResults": "Подходящие плагины не найдены",
         "notSelected": "Плагины не включены",
         "allPlugins": "Включить все плагины (*)",
         "selectedCount": "Выбрано плагинов: {count}",
@@ -34,6 +40,9 @@
     },
     "providerSelector": {
         "notSelected": "Не выбрано",
+        "defaultModel": "Модель по умолчанию",
+        "model": "Модель",
+        "searchPlaceholder": "Поиск моделей",
         "buttonText": "Выбрать провайдера...",
         "dialogTitle": "Выбор провайдера",
         "loading": "Загрузка...",
@@ -46,6 +55,7 @@
         "createProvider": "Создать провайдера",
         "manageProviders": "Управление провайдерами",
         "selectProviderPool": "Выбрать пул провайдеров...",
+        "selectedModelCount": "Выбрано моделей: {count}",
         "selectedCount": "Выбрано провайдеров: {count}"
     },
     "personaSelector": {
diff --git a/dashboard/src/i18n/locales/ru-RU/features/config-metadata.json b/dashboard/src/i18n/locales/ru-RU/features/config-metadata.json
index f70e3be3e6..7c3b9ae407 100644
--- a/dashboard/src/i18n/locales/ru-RU/features/config-metadata.json
+++ b/dashboard/src/i18n/locales/ru-RU/features/config-metadata.json
@@ -36,13 +36,31 @@
         "ai": {
             "description": "Модель",
             "hint": "При использовании сторонних сред запуска модель чата и модель описания изображений могут не работать напрямую, но некоторые плагины всё равно зависят от этих настроек.",
+            "agent_runner": {
+                "config": {
+                    "model": {
+                        "provider_id": {
+                            "description": "Модель чата",
+                            "hint": "Если поле пустое, используется первая доступная модель"
+                        },
+                        "fallback_provider_ids": {
+                            "description": "Резервные модели чата",
+                            "hint": "Если запрос к основной модели завершится ошибкой, эти модели будут использоваться по порядку."
+                        },
+                        "request_max_retries": {
+                            "description": "Повторы при ошибках",
+                            "hint": "Максимальное число попыток одного запроса модели при повторяемых ошибках."
+                        }
+                    }
+                }
+            },
             "provider_settings": {
                 "default_provider_id": {
-                    "description": "Модель чата по умолчанию",
+                    "description": "Модель чата",
                     "hint": "Если пусто, используется первая доступная модель"
                 },
                 "fallback_chat_models": {
-                    "description": "Резервные модели чата (ID)",
+                    "description": "Резервные модели чата",
                     "hint": "Если текущая модель недоступна, запрос будет перенаправлен на эти модели по порядку."
                 },
                 "request_max_retries": {
@@ -59,8 +77,8 @@
             },
             "provider_stt_settings": {
                 "enable": {
-                    "description": "Включить преобразование речи в текст (STT)",
-                    "hint": "Главный переключатель для STT"
+                    "description": "Распознавание речи",
+                    "hint": "Преобразует голосовые сообщения пользователей в текст с помощью модели распознавания речи, чтобы модель могла их понять."
                 },
                 "provider_id": {
                     "description": "Модель STT по умолчанию",
@@ -69,8 +87,8 @@
             },
             "provider_tts_settings": {
                 "enable": {
-                    "description": "Включить преобразование текста в речь (TTS)",
-                    "hint": "Главный переключатель для TTS"
+                    "description": "Голосовые ответы",
+                    "hint": "Преобразует текст в голосовые ответы с помощью модели синтеза речи."
                 },
                 "provider_id": {
                     "description": "Модель TTS по умолчанию"
@@ -346,11 +364,11 @@
                     "hint": "Если включено, информация о текущем времени будет добавлена в системный промпт."
                 },
                 "show_tool_use_status": {
-                    "description": "Выводить статус вызова функций"
+                    "description": "Показывать информацию о вызовах инструментов"
                 },
                 "show_tool_call_result": {
                     "description": "Выводить результаты работы инструментов",
-                    "hint": "Работает только при включенном статусе вызова функций. Показывает макс. 70 символов."
+                    "hint": "Работает только при включенном выводе информации о вызовах инструментов. Показывает макс. 70 символов."
                 },
                 "buffer_intermediate_messages": {
                     "description": "Объединять промежуточные сообщения Agent",
@@ -390,7 +408,7 @@
                     ]
                 },
                 "wake_prefix": {
-                    "description": "Дополнительный префикс пробуждения LLM",
+                    "description": "Дополнительный префикс пробуждения",
                     "hint": "Если префикс пробуждения '/', а дополнительные — 'chat', то потребуется '/chat' для активации LLM."
                 },
                 "prompt_prefix": {
diff --git a/dashboard/src/i18n/locales/ru-RU/features/config.json b/dashboard/src/i18n/locales/ru-RU/features/config.json
index 1da815bc57..bfa71b7573 100644
--- a/dashboard/src/i18n/locales/ru-RU/features/config.json
+++ b/dashboard/src/i18n/locales/ru-RU/features/config.json
@@ -45,6 +45,73 @@
         "notification": "Уведомления",
         "moreConfig": "Дополнительные настройки"
     },
+    "aiSettings": {
+        "title": "ИИ",
+        "enable": "Включить ИИ",
+        "more": "Другие действия",
+        "changeRunner": "Изменить режим выполнения",
+        "localSettingsTitle": "Встроенный ИИ AstrBot",
+        "settingsSuffix": "Настройки",
+        "tabs": {
+            "model": "Модель",
+            "persona": "Персона",
+            "capabilities": "Возможности",
+            "advanced": "Расширенные"
+        },
+        "groups": {
+            "model": "Модель",
+            "modelHint": "Выберите модели чата и стратегию повторных попыток для встроенного ИИ.",
+            "execution": "Выполнение",
+            "executionHint": "Настройте цикл вызова инструментов и процесс выполнения.",
+            "media": "Изображения и речь",
+            "mediaHint": "Настройте распознавание изображений, речи и синтез речи.",
+            "behavior": "Обработка сообщений",
+            "behaviorHint": "Эти настройки применяются ко всем режимам выполнения в профиле."
+        },
+        "common": {
+            "title": "Общие настройки",
+            "subtitle": "Эти настройки не меняются при смене режима выполнения."
+        },
+        "disabled": {
+            "title": "ИИ отключён",
+            "subtitle": "Включите ИИ для обработки сообщений с помощью модели."
+        },
+        "runnerDialog": {
+            "title": "Изменить режим выполнения",
+            "subtitle": "Изменяйте этот параметр только при подключении внешнего ИИ-приложения. Для большинства пользователей подходит встроенный ИИ.",
+            "warningPrefix": "После переключения будут применены настройки нового режима. Конфигурация текущего режима ",
+            "warningEmphasis": "не сохранится",
+            "warningSuffix": ".",
+            "confirm": "Использовать режим"
+        },
+        "runners": {
+            "local": {
+                "title": "Встроенный ИИ",
+                "summary": "Настройте возможности ИИ AstrBot, включая модели, персоны, базы знаний и инструменты.",
+                "description": "Встроенный ИИ AstrBot поддерживает модели, персоны, базы знаний и инструменты."
+            },
+            "dify": {
+                "title": "Dify",
+                "summary": "Диалоги ИИ обрабатываются приложением Dify.",
+                "description": "Подключите приложение Dify и настройте параметры доступа."
+            },
+            "coze": {
+                "title": "Coze",
+                "summary": "Диалоги ИИ обрабатываются ботом Coze.",
+                "description": "Подключите Coze Bot и настройте параметры доступа."
+            },
+            "dashscope": {
+                "title": "Alibaba Cloud Model Studio",
+                "summary": "Диалоги ИИ обрабатываются приложением Model Studio.",
+                "description": "Подключите приложение Model Studio и настройте параметры доступа."
+            },
+            "deerflow": {
+                "title": "DeerFlow",
+                "summary": "Диалоги ИИ обрабатываются DeerFlow.",
+                "description": "Подключите DeerFlow и настройте параметры выполнения."
+            }
+        }
+    },
     "general": {
         "botName": "Имя бота",
         "language": "Язык интерфейса",
@@ -67,6 +134,9 @@
     },
     "configSelection": {
         "selectConfig": "Выбор конфигурации",
+        "defaultConfig": "Конфигурация по умолчанию",
+        "search": "Поиск конфигураций",
+        "noResults": "Подходящие конфигурации не найдены",
         "normalConfig": "Обычная",
         "systemConfig": "Системная"
     },
@@ -76,7 +146,7 @@
     },
     "configManagement": {
         "title": "Управление конфигурациями",
-        "description": "AstrBot поддерживает несколько конфигураций для разных ботов. По умолчанию используется «default».",
+        "description": "AstrBot поддерживает несколько конфигураций для разных ботов. Если конфигурация не указана, используется конфигурация по умолчанию.",
         "newConfig": "Новая конфигурация",
         "copyConfig": "Копировать конфигурацию",
         "editConfig": "Изменить конфигурацию",
diff --git a/dashboard/src/i18n/locales/zh-CN/core/shared.json b/dashboard/src/i18n/locales/zh-CN/core/shared.json
index 19ef659a26..5c5cc066ec 100644
--- a/dashboard/src/i18n/locales/zh-CN/core/shared.json
+++ b/dashboard/src/i18n/locales/zh-CN/core/shared.json
@@ -14,6 +14,12 @@
     "chunkCount": "{count} 个块"
   },
   "pluginSetSelector": {
+    "title": "插件",
+    "subtitle": "选择当前配置文件可以使用的插件。",
+    "preset": "预置",
+    "searchPlaceholder": "搜索插件",
+    "selectAll": "全选",
+    "noSearchResults": "没有匹配的插件",
     "notSelected": "未启用任何插件",
     "allPlugins": "启用所有插件 (*)",
     "selectedCount": "已选择 {count} 个插件",
@@ -34,6 +40,9 @@
   },
   "providerSelector": {
     "notSelected": "未选择",
+    "defaultModel": "默认模型",
+    "model": "模型",
+    "searchPlaceholder": "搜索模型",
     "buttonText": "选择提供商...",
     "dialogTitle": "选择提供商",
     "loading": "加载中...",
@@ -46,6 +55,7 @@
     "createProvider": "创建提供商",
     "manageProviders": "提供商管理",
     "selectProviderPool": "选择提供商池...",
+    "selectedModelCount": "已选择 {count} 个模型",
     "selectedCount": "已选择 {count} 个提供商"
   },
   "personaSelector": {
diff --git a/dashboard/src/i18n/locales/zh-CN/features/config-metadata.json b/dashboard/src/i18n/locales/zh-CN/features/config-metadata.json
index ba79e23d3f..e630d556cc 100644
--- a/dashboard/src/i18n/locales/zh-CN/features/config-metadata.json
+++ b/dashboard/src/i18n/locales/zh-CN/features/config-metadata.json
@@ -95,15 +95,15 @@
         "config": {
           "model": {
             "provider_id": {
-              "description": "默认对话模型",
+              "description": "对话模型",
               "hint": "留空时使用第一个模型"
             },
             "fallback_provider_ids": {
-              "description": "回退对话模型列表",
+              "description": "回退对话模型",
               "hint": "主对话模型请求失败时，按顺序切换到这些对话模型。"
             },
             "request_max_retries": {
-              "description": "请求最大重试次数",
+              "description": "异常重试次数",
               "hint": "单次模型请求遇到可重试错误时的最大尝试次数。"
             }
           }
@@ -111,7 +111,7 @@
       },
       "provider_settings": {
         "default_image_caption_provider_id": {
-          "description": "默认图片转述模型",
+          "description": "图片转述模型",
           "hint": "留空代表不使用,可用于非多模态模型"
         },
         "image_caption_prompt": {
@@ -120,8 +120,8 @@
       },
       "provider_stt_settings": {
         "enable": {
-          "description": "启用语音转文本",
-          "hint": "STT 总开关"
+          "description": "语音识别",
+          "hint": "使用语音转文字模型将用户语音转述为文本，方便模型理解。"
         },
         "provider_id": {
           "description": "默认语音转文本模型",
@@ -130,8 +130,8 @@
       },
       "provider_tts_settings": {
         "enable": {
-          "description": "启用文本转语音",
-          "hint": "TTS 总开关"
+          "description": "语音回复",
+          "hint": "使用文字转语音模型将文字转为语音回复。"
         },
         "provider_id": {
           "description": "默认文本转语音模型"
@@ -403,11 +403,11 @@
           "hint": "启用后,会在系统提示词中附带当前时间信息。"
         },
         "show_tool_use_status": {
-          "description": "输出函数调用状态"
+          "description": "输出工具调用信息"
         },
         "show_tool_call_result": {
-          "description": "输出函数调用返回结果",
-          "hint": "仅在启用“输出函数调用状态”时生效，且最多展示 70 个字符。"
+          "description": "输出工具调用结果",
+          "hint": "仅在启用“输出工具调用信息”时生效，且最多展示 70 个字符。"
         },
         "buffer_intermediate_messages": {
           "description": "合并 Agent 中间消息",
@@ -447,7 +447,7 @@
           ]
         },
         "wake_prefix": {
-          "description": "LLM 聊天额外唤醒前缀",
+          "description": "额外唤醒前缀",
           "hint": "如果唤醒前缀为 /, 额外聊天唤醒前缀为 chat,则需要 /chat 才会触发 LLM 请求"
         },
         "prompt_prefix": {
@@ -1141,7 +1141,7 @@
         },
         "image_caption_provider_id": {
           "description": "群聊图片转述模型",
-          "hint": "用于群聊记录注入上下文的图片理解，与默认图片转述模型分开配置。"
+          "hint": "用于群聊记录注入上下文的图片理解，与图片转述模型分开配置。"
         },
         "group_message_history_enable": {
           "description": "持久化群聊消息记录",
diff --git a/dashboard/src/i18n/locales/zh-CN/features/config.json b/dashboard/src/i18n/locales/zh-CN/features/config.json
index 3eb5fc265d..d06713cfd7 100644
--- a/dashboard/src/i18n/locales/zh-CN/features/config.json
+++ b/dashboard/src/i18n/locales/zh-CN/features/config.json
@@ -45,6 +45,73 @@
     "notification": "通知设置",
     "moreConfig": "更多配置"
   },
+  "aiSettings": {
+    "title": "AI",
+    "enable": "启用 AI",
+    "more": "更多操作",
+    "changeRunner": "更换执行方式",
+    "localSettingsTitle": "AstrBot 内置 AI",
+    "settingsSuffix": "设置",
+    "tabs": {
+      "model": "模型",
+      "persona": "人格",
+      "capabilities": "能力",
+      "advanced": "高级"
+    },
+    "groups": {
+      "model": "模型",
+      "modelHint": "选择内置 AI 使用的对话模型和失败重试策略。",
+      "execution": "执行设置",
+      "executionHint": "配置工具调用循环和执行过程。",
+      "media": "图像与语音",
+      "mediaHint": "配置图片理解、语音识别和语音合成。",
+      "behavior": "消息处理",
+      "behaviorHint": "这些设置适用于当前配置文件中的所有执行方式。"
+    },
+    "common": {
+      "title": "通用设置",
+      "subtitle": "这些设置不随执行方式切换。"
+    },
+    "disabled": {
+      "title": "AI 已停用",
+      "subtitle": "启用后才会处理需要模型参与的消息。"
+    },
+    "runnerDialog": {
+      "title": "更换执行方式",
+      "subtitle": "只有在接入外部 AI 应用时才需要更改。大多数用户使用内置 AI 即可。",
+      "warningPrefix": "切换后会使用新执行方式的默认配置，当前执行方式的配置",
+      "warningEmphasis": "不会保留",
+      "warningSuffix": "。",
+      "confirm": "使用此方式"
+    },
+    "runners": {
+      "local": {
+        "title": "内置 AI",
+        "summary": "配置 AstrBot 的 AI 能力，包括模型、人格、知识库和工具。",
+        "description": "使用 AstrBot 内置 AI，支持模型、人格、知识库和工具能力。"
+      },
+      "dify": {
+        "title": "Dify",
+        "summary": "当前由 Dify 应用处理 AI 对话。",
+        "description": "连接 Dify 应用并配置它的访问参数。"
+      },
+      "coze": {
+        "title": "Coze",
+        "summary": "当前由 Coze Bot 处理 AI 对话。",
+        "description": "连接 Coze Bot 并配置它的访问参数。"
+      },
+      "dashscope": {
+        "title": "阿里云百炼",
+        "summary": "当前由阿里云百炼应用处理 AI 对话。",
+        "description": "连接阿里云百炼应用并配置它的访问参数。"
+      },
+      "deerflow": {
+        "title": "DeerFlow",
+        "summary": "当前由 DeerFlow 处理 AI 对话。",
+        "description": "连接 DeerFlow 服务并配置它的运行参数。"
+      }
+    }
+  },
   "general": {
     "botName": "机器人名称",
     "language": "界面语言",
@@ -67,6 +134,9 @@
   },
   "configSelection": {
     "selectConfig": "选择配置文件",
+    "defaultConfig": "默认配置文件",
+    "search": "搜索配置文件",
+    "noResults": "没有匹配的配置文件",
     "normalConfig": "普通",
     "systemConfig": "系统"
   },
@@ -76,7 +146,7 @@
   },
   "configManagement": {
     "title": "配置文件管理",
-    "description": "AstrBot 支持针对不同机器人分别设置配置文件。默认会使用 `default` 配置。",
+    "description": "AstrBot 支持针对不同机器人分别设置配置文件。未指定时使用默认配置文件。",
     "newConfig": "新建配置文件",
     "copyConfig": "复制配置文件",
     "editConfig": "编辑配置文件",
diff --git a/dashboard/src/views/ConfigPage.vue b/dashboard/src/views/ConfigPage.vue
index fcde3dd460..fa2446ee2f 100644
--- a/dashboard/src/views/ConfigPage.vue
+++ b/dashboard/src/views/ConfigPage.vue
@@ -1,34 +1,68 @@
 <template>
 
-  <div style="display: flex; flex-direction: column; align-items: center;">
-    <div v-if="selectedConfigID || isSystemConfig" class="mt-4 config-panel"
-      style="display: flex; flex-direction: column; align-items: start;">
-
-      <div class="config-toolbar d-flex flex-row pr-4"
-        style="margin-bottom: 16px; align-items: center; gap: 12px; width: 100%; justify-content: space-between;">
-        <div class="config-toolbar-controls d-flex flex-row align-center" style="gap: 12px;">
-          <v-select class="config-select" style="min-width: 130px;" :model-value="selectedConfigID" :items="configSelectItems" item-title="name" :disabled="initialConfigId !== null"
-            v-if="!isSystemConfig" item-value="id" :label="tm('configSelection.selectConfig')" hide-details density="compact" rounded="md"
-            variant="outlined" @update:model-value="onConfigSelect">
-          </v-select>
-          <v-text-field
-            class="config-search-input"
-            :model-value="configSearchKeyword"
-            @update:model-value="onConfigSearchInput"
-            prepend-inner-icon="mdi-magnify"
-            :label="tm('search.placeholder')"
-            clearable
-            hide-details
-            density="compact"
-            rounded="md"
-            variant="outlined"
-            style="min-width: 280px;"
-          />
-          <!-- <a style="color: inherit;" href="https://blog.astrbot.app/posts/what-is-changed-in-4.0.0/#%E5%A4%9A%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6" target="_blank"><v-btn icon="mdi-help-circle" size="small" variant="plain"></v-btn></a> -->
+  <div class="config-page-shell">
+    <div v-if="selectedConfigID || isSystemConfig" class="config-panel">
+
+      <div class="config-toolbar-sticky">
+        <div
+          class="config-toolbar"
+          :class="{ 'config-toolbar--searching': configSearchExpanded }"
+        >
+          <div class="config-toolbar-controls">
+            <ConfigProfileMenu
+              v-if="!isSystemConfig"
+              :model-value="selectedConfigID || ''"
+              :items="configInfoList"
+              :disabled="initialConfigId !== null"
+              @select="onConfigSelect"
+              @manage="configManageDialog = true"
+            />
+          </div>
 
+          <div class="config-toolbar-actions">
+            <div
+              class="config-search-control"
+              :class="{ 'config-search-control--expanded': configSearchExpanded }"
+            >
+              <v-text-field
+                v-show="configSearchExpanded"
+                ref="configSearchInput"
+                class="config-search-input"
+                :model-value="configSearchKeyword"
+                @update:model-value="onConfigSearchInput"
+                @keydown.esc.prevent="closeConfigSearch"
+                prepend-inner-icon="mdi-magnify"
+                append-inner-icon="mdi-close"
+                :placeholder="tm('search.placeholder')"
+                :aria-label="tm('search.placeholder')"
+                hide-details
+                density="compact"
+                rounded="md"
+                variant="outlined"
+                @click:append-inner="closeConfigSearch"
+              />
+              <v-btn
+                v-show="!configSearchExpanded"
+                icon="mdi-magnify"
+                size="small"
+                variant="text"
+                :aria-label="tm('search.placeholder')"
+                :title="tm('search.placeholder')"
+                @click="openConfigSearch"
+              />
+            </div>
+          </div>
+        </div>
+        <div class="config-toolbar-separator">
+          <v-divider />
+          <v-progress-linear
+            v-if="!fetched"
+            indeterminate
+            color="primary"
+            class="config-loading"
+          />
         </div>
       </div>
-      <!-- <v-progress-linear v-if="!fetched" indeterminate color="primary"></v-progress-linear> -->
 
       <v-slide-y-transition mode="out-in">
         <div v-if="(selectedConfigID || isSystemConfig) && fetched" :key="configContentKey" class="config-content" style="width: 100%;">
@@ -128,7 +162,7 @@
 
         <!-- Config List -->
         <v-list lines="two">
-          <v-list-item v-for="config in configInfoList" :key="config.id" :title="config.name">
+          <v-list-item v-for="config in configInfoList" :key="config.id" :title="configDisplayName(config)">
             <template v-slot:append>
               <div class="d-flex align-center" style="gap: 8px;">
                 <v-btn icon="mdi-content-copy" size="small" variant="text" color="primary"
@@ -194,7 +228,7 @@
         <div>
           <span class="text-h6">测试配置</span>
           <div v-if="selectedConfigInfo.name" class="text-caption text-grey">
-            {{ selectedConfigInfo.name }} ({{ testConfigId }})
+            {{ configDisplayName(selectedConfigInfo) }} ({{ testConfigId }})
           </div>
         </div>
         <v-btn icon variant="text" @click="closeTestChat">
@@ -217,6 +251,7 @@
 <script>
 import { configProfileApi, systemConfigApi } from '@/api/v1';
 import AstrBotCoreConfigWrapper from '@/components/config/AstrBotCoreConfigWrapper.vue';
+import ConfigProfileMenu from '@/components/config/ConfigProfileMenu.vue';
 import StandaloneChat from '@/components/chat/StandaloneChat.vue';
 import { VueMonacoEditor } from '@guolao/vue-monaco-editor'
 import { useI18n, useModuleI18n } from '@/i18n/composables';
@@ -232,6 +267,7 @@ export default {
   name: 'ConfigPage',
   components: {
     AstrBotCoreConfigWrapper,
+    ConfigProfileMenu,
     VueMonacoEditor,
     StandaloneChat,
     UnsavedChangesConfirmDialog,
@@ -325,15 +361,6 @@ export default {
       const isNameEmpty = !this.normalizeConfigName(this.configFormData.name);
       return isNameEmpty || (this.isCopyingConfig && !this.copySourceConfigId);
     },
-    configSelectItems() {
-      const items = [...this.configInfoList];
-      items.push({
-        id: '_%manage%_',
-        name: this.tm('configManagement.manageConfigs'),
-        umop: []
-      });
-      return items;
-    },
     hasUnsavedChanges() {
       if (!this.fetched) {
         return false;
@@ -397,6 +424,7 @@ export default {
       // 配置类型切换
       configType: 'normal', // 'normal' 或 'system'
       configSearchKeyword: '',
+      configSearchExpanded: false,
 
       // 系统配置开关
       isSystemConfig: false,
@@ -465,6 +493,16 @@ export default {
     onConfigSearchInput(value) {
       this.configSearchKeyword = normalizeTextInput(value);
     },
+    openConfigSearch() {
+      this.configSearchExpanded = true;
+      this.$nextTick(() => {
+        this.$refs.configSearchInput?.focus?.();
+      });
+    },
+    closeConfigSearch() {
+      this.configSearchKeyword = '';
+      this.configSearchExpanded = false;
+    },
     extractConfigTypeFromHash(hash) {
       const rawHash = String(hash || '');
       const lastHashIndex = rawHash.lastIndexOf('#');
@@ -695,6 +733,12 @@ export default {
     normalizeConfigName(name) {
       return typeof name === 'string' ? name.trim() : '';
     },
+    configDisplayName(config) {
+      if (config?.id === 'default') {
+        return this.tm('configSelection.defaultConfig');
+      }
+      return config?.name || config?.id || '';
+    },
     hasDuplicateConfigName(name, excludeId = null) {
       const normalizedName = this.normalizeConfigName(name);
       if (!normalizedName) {
@@ -713,11 +757,7 @@ export default {
     async onConfigSelect(value) {
       if (value === '_%manage%_') {
         this.configManageDialog = true;
-        // 重置选择到之前的值
-        this.$nextTick(() => {
-          this.selectedConfigID = this.selectedConfigInfo.id || 'default';
-          this.getConfig(this.selectedConfigID);
-        });
+        return;
       } else {
         // 检查是否有未保存的更改
         if (this.hasUnsavedChanges) {
@@ -962,8 +1002,109 @@ export default {
 </script>
 
 <style>
-.v-tab {
-  text-transform: none !important;
+.config-page-shell {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  margin-top: -8px;
+}
+
+.config-panel {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  width: min(100%, 940px);
+  padding: 0 18px 48px;
+}
+
+.config-toolbar-sticky {
+  position: sticky;
+  top: calc(var(--v-layout-top, 64px));
+  z-index: 20;
+  isolation: isolate;
+  margin-bottom: 28px;
+}
+
+.config-toolbar-sticky::before {
+  position: absolute;
+  z-index: -1;
+  top: 0;
+  bottom: 0;
+  left: 50%;
+  width: calc(100vw - var(--v-layout-left, 0px));
+  max-width: 100vw;
+  transform: translateX(-50%);
+  background: rgb(var(--v-theme-containerBg));
+  content: '';
+}
+
+.config-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  width: 100%;
+  max-width: 840px;
+  padding: 4px 0;
+}
+
+.config-toolbar-controls {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+}
+
+.config-toolbar-actions {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  margin-left: auto;
+}
+
+.config-search-input {
+  width: 100%;
+  min-width: 0;
+}
+
+.config-search-control {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  width: 36px;
+  min-width: 36px;
+  overflow: hidden;
+  transition: width 180ms cubic-bezier(0.2, 0, 0, 1);
+}
+
+.config-search-control--expanded {
+  width: min(320px, 42vw);
+}
+
+.config-toolbar :is(.v-field) {
+  border-radius: 10px;
+}
+
+.config-toolbar-separator {
+  position: relative;
+  width: calc(100vw - var(--v-layout-left, 0px));
+  max-width: 100vw;
+  height: 1px;
+  margin-left: 50%;
+  transform: translateX(-50%);
+}
+
+.config-toolbar-separator :is(.v-divider) {
+  border-color: rgba(var(--v-theme-on-surface), 0.1);
+  opacity: 1;
+}
+
+.config-loading {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
 }
 
 .unsaved-changes-pill {
@@ -1020,12 +1161,6 @@ export default {
   font-style: italic;
 }
 
-@media (min-width: 768px) {
-  .config-panel {
-    width: 750px;
-  }
-}
-
 @media (max-width: 767px) {
   .v-container {
     padding: 4px;
@@ -1033,20 +1168,31 @@ export default {
 
   .config-panel {
     width: 100%;
+    padding: 0 14px 40px;
   }
 
   .config-toolbar {
+    flex-wrap: nowrap;
+    padding: 4px 0;
     padding-right: 0 !important;
   }
 
   .config-toolbar-controls {
+    flex: 1;
+    width: auto;
+  }
+
+  .config-toolbar--searching .config-toolbar-controls {
+    display: none;
+  }
+
+  .config-toolbar--searching .config-toolbar-actions,
+  .config-toolbar--searching .config-search-control,
+  .config-toolbar--searching .config-search-input {
     width: 100%;
-    flex-wrap: wrap;
   }
 
-  .config-select,
   .config-search-input {
-    width: 100%;
     min-width: 0 !important;
   }