From 09b31c460dbb78af173e0b3b905844dd25a3c47f Mon Sep 17 00:00:00 2001
From: Soulter <905617992@qq.com>
Date: Sun, 1 Mar 2026 19:37:26 +0800
Subject: [PATCH] feat: add ConfigRouteManagerDialog component for managing
 routing configurations

- Implemented a new dialog component for managing routes associated with configurations, allowing users to view, delete, and save routes.
- Enhanced the ProviderSelector component with improved styling for better readability.
- Updated English and Chinese localization files to include new strings for the route manager and profile sidebar.
- Refactored ConfigPage.vue to integrate the new route management dialog and improve layout responsiveness.
- Added methods for handling route management, including fetching, saving, and removing routes.
---
 astrbot/core/platform/astrbot_message.py      |  35 +-
 .../config/ConfigProfileSidebar.vue           | 213 ++++++
 .../config/ConfigRouteManagerDialog.vue       | 236 +++++++
 .../components/shared/ProviderSelector.vue    |   1 +
 .../i18n/locales/en-US/features/config.json   |  20 +
 .../i18n/locales/zh-CN/features/config.json   |  20 +
 dashboard/src/views/ConfigPage.vue            | 666 +++++++++++++-----
 7 files changed, 1016 insertions(+), 175 deletions(-)
 create mode 100644 dashboard/src/components/config/ConfigProfileSidebar.vue
 create mode 100644 dashboard/src/components/config/ConfigRouteManagerDialog.vue

diff --git a/astrbot/core/platform/astrbot_message.py b/astrbot/core/platform/astrbot_message.py
index 3db53fd48..e9f2267a8 100644
--- a/astrbot/core/platform/astrbot_message.py
+++ b/astrbot/core/platform/astrbot_message.py
@@ -48,18 +48,29 @@ class Group:
 
 
 class AstrBotMessage:
-    """AstrBot 的消息对象"""
+    """Represents a message received from the platform, after parsing and normalization.
+    This is the main message object that will be passed to plugins and handlers."""
 
-    type: MessageType  # 消息类型
-    self_id: str  # 机器人的识别id
-    session_id: str  # 会话id。取决于 unique_session 的设置。
-    message_id: str  # 消息id
-    group: Group | None  # 群组
-    sender: MessageMember  # 发送者
-    message: list[BaseMessageComponent]  # 消息链使用 Nakuru 的消息链格式
-    message_str: str  # 最直观的纯文本消息字符串
+    type: MessageType
+    """GroupMessage, FriendMessage, etc"""
+    self_id: str
+    """Bot's ID"""
+    session_id: str
+    """Session ID, which is the last part of UMO"""
+    message_id: str
+    """Message ID"""
+    group: Group | None
+    """The group info, None if it's a friend message"""
+    sender: MessageMember
+    """The sender info"""
+    message: list[BaseMessageComponent]
+    """Sorted list of message components after parsing"""
+    message_str: str
+    """The parsed message text after parsing, without any formatting or special components"""
     raw_message: object
-    timestamp: int  # 消息时间戳
+    """The raw message object, the specific type depends on the platform"""
+    timestamp: int
+    """The timestamp when the message is received, in seconds"""
 
     def __init__(self) -> None:
         self.timestamp = int(time.time())
@@ -70,16 +81,12 @@ class AstrBotMessage:
 
     @property
     def group_id(self) -> str:
-        """向后兼容的 group_id 属性
-        群组id，如果为私聊，则为空
-        """
         if self.group:
             return self.group.group_id
         return ""
 
     @group_id.setter
     def group_id(self, value: str | None) -> None:
-        """设置 group_id"""
         if value:
             if self.group:
                 self.group.group_id = value
diff --git a/dashboard/src/components/config/ConfigProfileSidebar.vue b/dashboard/src/components/config/ConfigProfileSidebar.vue
new file mode 100644
index 000000000..4d5c6304d
--- /dev/null
+++ b/dashboard/src/components/config/ConfigProfileSidebar.vue
@@ -0,0 +1,213 @@
+<template>
+  <div class="config-profile-sidebar">
+    <div class="d-flex align-center justify-space-between mb-3">
+      <h3 class="text-subtitle-1 font-weight-bold mb-0">
+        <v-icon size="18" class="mr-1">mdi-format-list-bulleted-square</v-icon>
+        {{ tm('profileSidebar.title') }}
+      </h3>
+      <v-tooltip :text="tm('configManagement.manageConfigs')" location="top">
+        <template #activator="{ props: tooltipProps }">
+          <v-btn v-bind="tooltipProps" size="small" variant="text" icon="mdi-cog" :disabled="disabled"
+            @click="emit('manage')" />
+        </template>
+      </v-tooltip>
+    </div>
+
+    <div class="config-profile-list">
+      <v-card v-for="config in configs" :key="config.id" class="profile-card" :class="{
+        'profile-card--active': config.id === selectedConfigId,
+        'profile-card--disabled': disabled
+      }" variant="outlined" @click="onSelect(config.id)">
+        <div class="profile-card__name text-h4 d-flex align-center">
+          <v-icon size="24" class="mr-2">mdi-file-outline</v-icon>
+          {{ config.name }}
+        </div>
+        <div class="mt-3 d-flex" style="align-items: start; justify-content: center;">
+          <v-icon size="24" class="mr-1">mdi-routes</v-icon>
+          <div class="profile-card__bindings">
+            <template v-if="bindingsForConfig(config.id).length > 0">
+              <v-tooltip v-for="binding in visibleBindings(bindingsForConfig(config.id))"
+                :key="`${config.id}-${binding.platformId}`" location="top">
+                <template #activator="{ props: tooltipProps }">
+                  <button v-bind="tooltipProps" type="button" class="binding-pill"
+                    @click.stop="onManageRoutes(config.id)">
+                    <v-avatar size="22" class="binding-avatar" rounded="sm">
+                      <img v-if="getBindingIcon(binding)" :src="getBindingIcon(binding)" :alt="binding.platformId"
+                        class="binding-avatar__img" />
+                      <v-icon v-else size="14">mdi-robot-outline</v-icon>
+                    </v-avatar>
+                    <span class="binding-pill__label">
+                      {{ binding.platformId }}
+                    </span>
+                  </button>
+                </template>
+                <div class="binding-tooltip-content">
+                  <div class="text-caption font-weight-bold mb-1">
+                    {{ tm('profileSidebar.platformId') }}: {{ binding.platformId }}
+                  </div>
+                  <div class="text-caption mb-1">
+                    {{ tm('profileSidebar.umop') }}:
+                  </div>
+                  <div v-for="umop in binding.umops" :key="`${binding.platformId}-${umop}`" class="text-caption">
+                    {{ umop }}
+                  </div>
+                </div>
+              </v-tooltip>
+              <v-chip v-if="bindingsForConfig(config.id).length > maxVisibleBindings" size="x-small" variant="tonal"
+                color="primary">
+                +{{ bindingsForConfig(config.id).length - maxVisibleBindings }}
+              </v-chip>
+            </template>
+            <span v-else class="text-caption text-medium-emphasis">
+              {{ tm('profileSidebar.noBindings') }}
+            </span>
+          </div>
+
+        </div>
+      </v-card>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useModuleI18n } from '@/i18n/composables';
+import { getPlatformIcon } from '@/utils/platformUtils';
+
+interface ConfigInfo {
+  id: string;
+  name: string;
+}
+
+interface ConfigBinding {
+  platformId: string;
+  platformType?: string;
+  umops: string[];
+}
+
+const props = withDefaults(defineProps<{
+  configs: ConfigInfo[];
+  selectedConfigId: string | null;
+  bindingsByConfigId: Record<string, ConfigBinding[]>;
+  disabled?: boolean;
+}>(), {
+  selectedConfigId: null,
+  bindingsByConfigId: () => ({}),
+  disabled: false
+});
+
+const emit = defineEmits<{
+  select: [configId: string];
+  manage: [];
+  manageRoutes: [payload: { configId: string }];
+}>();
+
+const { tm } = useModuleI18n('features/config');
+
+const maxVisibleBindings = 6;
+
+function onSelect(configId: string): void {
+  if (props.disabled) {
+    return;
+  }
+  emit('select', configId);
+}
+
+function onManageRoutes(configId: string): void {
+  if (props.disabled) {
+    return;
+  }
+  emit('manageRoutes', { configId });
+}
+
+function bindingsForConfig(configId: string): ConfigBinding[] {
+  return props.bindingsByConfigId[configId] || [];
+}
+
+function visibleBindings(bindings: ConfigBinding[]): ConfigBinding[] {
+  return bindings.slice(0, maxVisibleBindings);
+}
+
+function getBindingIcon(binding: ConfigBinding): string | undefined {
+  if (binding.platformType) {
+    return getPlatformIcon(binding.platformType);
+  }
+  return getPlatformIcon(binding.platformId);
+}
+</script>
+
+<style scoped>
+.config-profile-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  max-height: calc(100vh - 210px);
+  overflow-y: auto;
+  padding-right: 4px;
+}
+
+.profile-card {
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  border-radius: 12px;
+  cursor: pointer;
+  padding: 12px;
+  transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
+}
+
+
+.profile-card--active {
+  background: rgba(var(--v-theme-primary), 0.08);
+}
+
+.profile-card--disabled {
+  cursor: not-allowed;
+  opacity: 0.7;
+}
+
+.profile-card__name {
+  line-height: 1.3;
+}
+
+.profile-card__bindings {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 6px;
+  min-height: 28px;
+}
+
+.binding-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 2px 8px 2px 4px;
+  border-radius: 999px;
+  border: 1px solid rgba(var(--v-theme-on-surface), 0.14);
+  background: rgba(var(--v-theme-surface), 1);
+  cursor: pointer;
+  transition: border-color 0.15s ease, background-color 0.15s ease;
+}
+
+.binding-pill:hover {
+  border-color: rgba(var(--v-theme-primary), 0.45);
+  background: rgba(var(--v-theme-primary), 0.06);
+}
+
+.binding-pill__label {
+  font-size: 0.78rem;
+  line-height: 1.1;
+  white-space: nowrap;
+  color: rgba(var(--v-theme-on-surface), 0.8);
+}
+
+.binding-avatar__img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  padding: 2px;
+}
+
+.binding-tooltip-content {
+  max-width: 380px;
+  word-break: break-all;
+}
+</style>
diff --git a/dashboard/src/components/config/ConfigRouteManagerDialog.vue b/dashboard/src/components/config/ConfigRouteManagerDialog.vue
new file mode 100644
index 000000000..91f7e087b
--- /dev/null
+++ b/dashboard/src/components/config/ConfigRouteManagerDialog.vue
@@ -0,0 +1,236 @@
+<template>
+  <v-dialog v-model="dialogVisible" max-width="800px">
+    <v-card>
+      <v-card-title class="d-flex align-center justify-space-between">
+        <div>
+          <div class="text-h3 pa-2">{{ props.configName }} {{ tm('routeManager.title') }}</div>
+        </div>
+        <v-btn icon="mdi-close" variant="text" @click="dialogVisible = false"></v-btn>
+      </v-card-title>
+      <v-card-text>
+        <div v-if="loading" class="d-flex justify-center py-4">
+          <v-progress-circular indeterminate color="primary"></v-progress-circular>
+        </div>
+        <div v-else>
+          <div class="text-caption text-medium-emphasis mb-4">
+            {{ tm('routeManager.hint') }}
+          </div>
+
+          <div v-if="groupedRoutes.length === 0" class="text-center py-4 text-medium-emphasis">
+            {{ tm('routeManager.empty') }}
+          </div>
+
+          <div v-for="(group, groupIndex) in groupedRoutes" :key="group.platformId">
+            <v-divider v-if="groupIndex > 0" class="my-3" />
+            <div class="route-group">
+              <div class="route-group-platform">
+                <v-avatar size="22" rounded="sm" class="route-platform-avatar">
+                  <img
+                    v-if="getRoutePlatformIcon(group.platformId)"
+                    :src="getRoutePlatformIcon(group.platformId)"
+                    :alt="group.platformId"
+                    class="route-platform-avatar__img"
+                  />
+                  <v-icon v-else size="14">mdi-robot-outline</v-icon>
+                </v-avatar>
+                <span class="text-body-2 font-weight-medium">{{ group.platformId }}</span>
+                <v-chip size="x-small" variant="tonal" color="primary">
+                  {{ group.routes.length }}
+                </v-chip>
+              </div>
+
+              <div class="route-group-umops">
+                <div
+                  v-for="route in group.routes"
+                  :key="route.id"
+                  class="route-umop-row"
+                  :class="{ 'route-umop-row--all': isAllSessionsRoute(route.umop) }"
+                >
+                  <span class="text-body-2 route-umop-row__text">
+                    {{ isAllSessionsRoute(route.umop) ? tm('routeManager.allSessions') : route.umop }}
+                  </span>
+                  <div class="route-umop-row__actions">
+                    <v-tooltip :text="tm('routeManager.delete')" location="top">
+                      <template #activator="{ props: tooltipProps }">
+                        <v-btn
+                          v-bind="tooltipProps"
+                          icon="mdi-delete-outline"
+                          variant="text"
+                          color="error"
+                          size="small"
+                          @click="emit('removeRoute', route.id)"
+                        />
+                      </template>
+                    </v-tooltip>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <v-btn variant="text" @click="dialogVisible = false">
+          {{ tm('buttons.cancel') }}
+        </v-btn>
+        <v-btn color="primary" :loading="saving" @click="emit('save')">
+          {{ tm('actions.save') }}
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useModuleI18n } from '@/i18n/composables';
+import { getPlatformIcon } from '@/utils/platformUtils';
+
+interface RouteItem {
+  id: string;
+  platformId: string;
+  umop: string;
+}
+
+const props = withDefaults(defineProps<{
+  modelValue: boolean;
+  configId: string;
+  configName: string;
+  loading: boolean;
+  saving: boolean;
+  items: RouteItem[];
+  platformTypeMap: Record<string, string>;
+}>(), {
+  modelValue: false,
+  configId: '',
+  configName: '',
+  loading: false,
+  saving: false,
+  items: () => [],
+  platformTypeMap: () => ({})
+});
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean];
+  removeRoute: [routeId: string];
+  save: [];
+}>();
+
+const { tm } = useModuleI18n('features/config');
+
+const dialogVisible = computed({
+  get: () => props.modelValue,
+  set: (value: boolean) => emit('update:modelValue', value)
+});
+
+const groupedRoutes = computed(() => {
+  const groups: Record<string, RouteItem[]> = {};
+  for (const item of props.items) {
+    const platformId = String(item.platformId || '').trim();
+    if (!platformId) {
+      continue;
+    }
+    if (!groups[platformId]) {
+      groups[platformId] = [];
+    }
+    groups[platformId].push(item);
+  }
+
+  return Object.entries(groups)
+    .map(([platformId, routes]) => ({
+      platformId,
+      routes: (() => {
+        const sortedRoutes = routes.sort((a, b) => a.umop.localeCompare(b.umop));
+        const allSessionsRoute = sortedRoutes.find((route) => isAllSessionsRoute(route.umop));
+        if (allSessionsRoute) {
+          return [allSessionsRoute];
+        }
+        return sortedRoutes;
+      })()
+    }))
+    .sort((a, b) => a.platformId.localeCompare(b.platformId));
+});
+
+function getRoutePlatformIcon(platformId: string): string | undefined {
+  const platformType = props.platformTypeMap[platformId] || platformId;
+  return getPlatformIcon(platformType);
+}
+
+function isAllSessionsRoute(umop: string): boolean {
+  return String(umop || '').endsWith(':*:*');
+}
+</script>
+
+<style scoped>
+.route-group-platform {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 24px;
+}
+
+.route-group-umops {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+
+.route-umop-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-radius: 6px;
+  padding: 2px 4px 2px 10px;
+  gap: 10px;
+  background: rgba(var(--v-theme-on-surface), 0.03);
+}
+
+.route-umop-row--all {
+  background: rgba(var(--v-theme-primary), 0.08);
+}
+
+.route-umop-row__text {
+  min-width: 0;
+  word-break: break-all;
+}
+
+.route-umop-row__actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.route-platform-avatar {
+  background: rgba(var(--v-theme-surface), 1);
+}
+
+.route-platform-avatar__img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  padding: 2px;
+}
+
+.route-group {
+  display: grid;
+  grid-template-columns: 220px minmax(0, 1fr);
+  gap: 12px;
+  align-items: start;
+}
+
+@media (max-width: 767px) {
+  .route-group {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .route-group-platform {
+    margin-bottom: 2px;
+  }
+
+  .route-umop-row {
+    align-items: flex-start;
+  }
+}
+</style>
diff --git a/dashboard/src/components/shared/ProviderSelector.vue b/dashboard/src/components/shared/ProviderSelector.vue
index 7ffbeb6ea..0965f5362 100644
--- a/dashboard/src/components/shared/ProviderSelector.vue
+++ b/dashboard/src/components/shared/ProviderSelector.vue
@@ -372,6 +372,7 @@ function closeProviderDrawer() {
   white-space: nowrap;
   max-width: calc(100% - 80px);
   display: inline-block;
+  font-size: 13px;
 }
 
 .selected-preview {
diff --git a/dashboard/src/i18n/locales/en-US/features/config.json b/dashboard/src/i18n/locales/en-US/features/config.json
index 4b726ae3c..f9efbb13b 100644
--- a/dashboard/src/i18n/locales/en-US/features/config.json
+++ b/dashboard/src/i18n/locales/en-US/features/config.json
@@ -69,6 +69,26 @@
     "normalConfig": "Basic",
     "systemConfig": "System"
   },
+  "profileSidebar": {
+    "title": "Configuration Profiles",
+    "platformId": "Platform ID",
+    "umop": "Bound UMOP",
+    "noBindings": "No platform bindings"
+  },
+  "routeManager": {
+    "title": "Route Manager",
+    "targetConfig": "Config: {config}",
+    "hint": "AstrBot supports multiple config files, and routing decides which session uses which config. This dialog shows all routes handled by the current config: platform on the left and UMOP on the right; click Save after deleting routes.",
+    "empty": "No routes available to manage.",
+    "platform": "Platform",
+    "umop": "UMOP",
+    "allSessions": "All Sessions",
+    "delete": "Delete Route",
+    "loadFailed": "Failed to load routes",
+    "saveSuccess": "Routes saved",
+    "saveFailed": "Failed to save routes",
+    "routeOccupied": "This route is already occupied by another config: {umop}"
+  },
   "search": {
     "placeholder": "Search config items (key/description/hint)",
     "noResult": "No matching config items found"
diff --git a/dashboard/src/i18n/locales/zh-CN/features/config.json b/dashboard/src/i18n/locales/zh-CN/features/config.json
index e7cd90408..4ee7a453d 100644
--- a/dashboard/src/i18n/locales/zh-CN/features/config.json
+++ b/dashboard/src/i18n/locales/zh-CN/features/config.json
@@ -69,6 +69,26 @@
     "normalConfig": "普通",
     "systemConfig": "系统"
   },
+  "profileSidebar": {
+    "title": "配置文件列表",
+    "platformId": "平台 ID",
+    "umop": "绑定 UMOP",
+    "noBindings": "暂无平台绑定"
+  },
+  "routeManager": {
+    "title": "路由管理",
+    "targetConfig": "配置：{config}",
+    "hint": "AstrBot 支持多配置文件，路由用于决定“哪个会话用哪个配置”。这里展示的是当前配置文件接管的全部路由：左侧是机器人 ID、右侧是匹配的消息会话来源。",
+    "empty": "暂无可管理的路由。",
+    "platform": "平台",
+    "umop": "UMOP",
+    "allSessions": "全部会话",
+    "delete": "删除路由",
+    "loadFailed": "加载路由失败",
+    "saveSuccess": "路由已保存",
+    "saveFailed": "保存路由失败",
+    "routeOccupied": "该路由已被其他配置占用：{umop}"
+  },
   "search": {
     "placeholder": "搜索配置项（字段名/描述/提示）",
     "noResult": "未找到匹配的配置项"
diff --git a/dashboard/src/views/ConfigPage.vue b/dashboard/src/views/ConfigPage.vue
index 7c50fbb58..c027d2e80 100644
--- a/dashboard/src/views/ConfigPage.vue
+++ b/dashboard/src/views/ConfigPage.vue
@@ -1,81 +1,119 @@
 <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"
-            v-model="configSearchKeyword"
-            prepend-inner-icon="mdi-magnify"
-            :label="tm('search.placeholder')"
-            hide-details
-            density="compact"
-            rounded="md"
-            variant="outlined"
-            style="min-width: 280px;"
+  <div class="config-page-wrap">
+    <div v-if="selectedConfigID || isSystemConfig" class="mt-4 config-panel">
+      <div class="config-workbench" :class="{ 'config-workbench--system': isSystemConfig || !!initialConfigId }">
+        <aside v-if="!isSystemConfig && !initialConfigId" class="config-sidebar">
+          <ConfigProfileSidebar
+            :configs="configInfoList"
+            :selected-config-id="selectedConfigID"
+            :bindings-by-config-id="configBindingsById"
+            :disabled="initialConfigId !== null"
+            @select="onConfigSelect"
+            @manage="openConfigManageDialog"
+            @manage-routes="openRouteManageDialog"
           />
-          <!-- <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> -->
+        </aside>
 
-        </div>
+        <section class="config-main">
+          <div class="config-toolbar d-flex flex-row">
+            <div class="config-toolbar-controls d-flex flex-row align-center">
+              <div v-if="!isSystemConfig" class="config-current-title">
+                <h2 class="config-current-title__name">
+                  {{ selectedConfigInfo.name || selectedConfigID }}
+                </h2>
+                <div class="config-current-title__id text-caption text-medium-emphasis">
+                  ID: {{ selectedConfigID }}
+                </div>
+              </div>
+              <v-select
+                v-if="!isSystemConfig && !initialConfigId"
+                class="config-select config-select--mobile"
+                :model-value="selectedConfigID"
+                :items="configSelectItems"
+                item-title="name"
+                :disabled="initialConfigId !== null"
+                item-value="id"
+                :label="tm('configSelection.selectConfig')"
+                hide-details
+                density="compact"
+                rounded="md"
+                variant="outlined"
+                @update:model-value="onConfigSelect"
+              />
+              <v-tooltip v-if="!isSystemConfig && !initialConfigId" :text="tm('configManagement.manageConfigs')" location="top">
+                <template #activator="{ props: tooltipProps }">
+                  <v-btn
+                    v-bind="tooltipProps"
+                    class="config-manage-mobile"
+                    variant="text"
+                    icon="mdi-cog"
+                    :disabled="initialConfigId !== null"
+                    @click="openConfigManageDialog"
+                  />
+                </template>
+              </v-tooltip>
+              <v-text-field
+                class="config-search-input"
+                v-model="configSearchKeyword"
+                prepend-inner-icon="mdi-magnify"
+                :label="tm('search.placeholder')"
+                hide-details
+                density="compact"
+                rounded="md"
+                variant="outlined"
+              />
+            </div>
+          </div>
+
+          <v-fade-transition>
+            <div v-if="fetched && hasUnsavedChanges && !isLoadingConfig" class="unsaved-changes-banner-wrap">
+              <v-banner
+                icon="$warning"
+                lines="one"
+                class="unsaved-changes-banner my-4"
+              >
+                {{ tm('messages.unsavedChangesNotice') }}
+              </v-banner>
+            </div>
+          </v-fade-transition>
+
+          <v-fade-transition mode="out-in">
+            <div v-if="(selectedConfigID || isSystemConfig) && fetched" :key="configContentKey" class="config-content">
+              <AstrBotCoreConfigWrapper
+                :metadata="metadata"
+                :config_data="config_data"
+                :search-keyword="configSearchKeyword"
+              />
+
+              <v-tooltip :text="tm('actions.save')" location="left">
+                <template v-slot:activator="{ props }">
+                  <v-btn v-bind="props" icon="mdi-content-save" size="x-large" style="position: fixed; right: 52px; bottom: 52px;"
+                    color="darkprimary" @click="updateConfig">
+                  </v-btn>
+                </template>
+              </v-tooltip>
+
+              <v-tooltip :text="tm('codeEditor.title')" location="left">
+                <template v-slot:activator="{ props }">
+                  <v-btn v-bind="props" icon="mdi-code-json" size="x-large" style="position: fixed; right: 52px; bottom: 124px;" color="primary"
+                    @click="configToString(); codeEditorDialog = true">
+                  </v-btn>
+                </template>
+              </v-tooltip>
+
+              <v-tooltip text="测试当前配置" location="left" v-if="!isSystemConfig">
+                <template v-slot:activator="{ props }">
+                  <v-btn v-bind="props" icon="mdi-chat-processing" size="x-large"
+                    style="position: fixed; right: 52px; bottom: 196px;" color="secondary"
+                    @click="openTestChat">
+                  </v-btn>
+                </template>
+              </v-tooltip>
+            </div>
+          </v-fade-transition>
+        </section>
       </div>
-      <v-slide-y-transition>
-        <div v-if="fetched && hasUnsavedChanges" class="unsaved-changes-banner-wrap">
-          <v-banner
-            icon="$warning"
-            lines="one"
-            class="unsaved-changes-banner my-4"
-          >
-            {{ tm('messages.unsavedChangesNotice') }}
-          </v-banner>
-        </div>
-      </v-slide-y-transition>
-      <!-- <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%;">
-          <!-- 可视化编辑 -->
-          <AstrBotCoreConfigWrapper 
-            :metadata="metadata" 
-            :config_data="config_data"
-            :search-keyword="configSearchKeyword"
-          />
-
-          <v-tooltip :text="tm('actions.save')" location="left">
-            <template v-slot:activator="{ props }">
-              <v-btn v-bind="props" icon="mdi-content-save" size="x-large" style="position: fixed; right: 52px; bottom: 52px;"
-                color="darkprimary" @click="updateConfig">
-              </v-btn>
-            </template>
-          </v-tooltip>
-
-          <v-tooltip :text="tm('codeEditor.title')" location="left">
-            <template v-slot:activator="{ props }">
-              <v-btn v-bind="props" icon="mdi-code-json" size="x-large" style="position: fixed; right: 52px; bottom: 124px;" color="primary"
-                @click="configToString(); codeEditorDialog = true">
-              </v-btn>
-            </template>
-          </v-tooltip>
-
-          <v-tooltip text="测试当前配置" location="left" v-if="!isSystemConfig">
-            <template v-slot:activator="{ props }">
-              <v-btn v-bind="props" icon="mdi-chat-processing" size="x-large" 
-                style="position: fixed; right: 52px; bottom: 196px;" color="secondary"
-                @click="openTestChat">
-              </v-btn>
-            </template>
-          </v-tooltip>
-
-        </div>
-      </v-slide-y-transition>
-
     </div>
   </div>
 
@@ -158,6 +196,18 @@
     </v-card>
   </v-dialog>
 
+  <ConfigRouteManagerDialog
+    v-model="routeManageDialog"
+    :config-id="routeManageConfigId"
+    :config-name="routeManageConfigName"
+    :loading="routeManageLoading"
+    :saving="routeManageSaving"
+    :items="routeManageItems"
+    :platform-type-map="routeManagePlatformTypeMap"
+    @remove-route="removeRouteItem"
+    @save="saveRouteManageDialog"
+  />
+
   <v-snackbar :timeout="3000" elevation="24" :color="save_message_success" v-model="save_message_snack">
     {{ save_message }}
   </v-snackbar>
@@ -201,6 +251,8 @@
 <script>
 import axios from 'axios';
 import AstrBotCoreConfigWrapper from '@/components/config/AstrBotCoreConfigWrapper.vue';
+import ConfigProfileSidebar from '@/components/config/ConfigProfileSidebar.vue';
+import ConfigRouteManagerDialog from '@/components/config/ConfigRouteManagerDialog.vue';
 import WaitingForRestart from '@/components/shared/WaitingForRestart.vue';
 import StandaloneChat from '@/components/chat/StandaloneChat.vue';
 import { VueMonacoEditor } from '@guolao/vue-monaco-editor'
@@ -216,6 +268,8 @@ export default {
   name: 'ConfigPage',
   components: {
     AstrBotCoreConfigWrapper,
+    ConfigProfileSidebar,
+    ConfigRouteManagerDialog,
     VueMonacoEditor,
     WaitingForRestart,
     StandaloneChat,
@@ -295,19 +349,7 @@ export default {
       return this.configInfoList.find(info => info.id === this.selectedConfigID) || {};
     },
     configSelectItems() {
-      const items = [...this.configInfoList];
-      items.push({
-        id: '_%manage%_',
-        name: this.tm('configManagement.manageConfigs'),
-        umop: []
-      });
-      return items;
-    },
-    hasUnsavedChanges() {
-      if (!this.fetched) {
-        return false;
-      }
-      return this.getConfigSnapshot(this.config_data) !== this.lastSavedConfigSnapshot;
+      return [...this.configInfoList];
     }
   },
   watch: {
@@ -317,7 +359,7 @@ export default {
     config_data: {
       deep: true,
       handler() {
-        if (this.fetched) {
+        if (this.fetched && !this.isLoadingConfig) {
           this.hasUnsavedChanges = this.configHasChanges;
         }
       }
@@ -338,6 +380,13 @@ export default {
     return {
       codeEditorDialog: false,
       configManageDialog: false,
+      routeManageDialog: false,
+      routeManageLoading: false,
+      routeManageSaving: false,
+      routeManageConfigId: '',
+      routeManageConfigName: '',
+      routeManageItems: [],
+      routeManagePlatformTypeMap: {},
       showConfigForm: false,
       isEditingConfig: false,
       config_data_has_changed: false,
@@ -345,13 +394,13 @@ export default {
       config_data: {
         config: {}
       },
+      isLoadingConfig: false,
       fetched: false,
       metadata: {},
       save_message_snack: false,
       save_message: "",
       save_message_success: "",
-  configContentKey: 0,
-      lastSavedConfigSnapshot: '',
+      configContentKey: 0,
 
       // 配置类型切换
       configType: 'normal', // 'normal' 或 'system'
@@ -364,6 +413,7 @@ export default {
       selectedConfigID: null, // 用于存储当前选中的配置项信息
       currentConfigId: null, // 跟踪当前正在编辑的配置id
       configInfoList: [],
+      configBindingsById: {},
       configFormData: {
         name: '',
       },
@@ -409,16 +459,12 @@ export default {
   methods: {
     // 处理语言切换事件，重新加载配置以获取插件的 i18n 数据
     handleLocaleChange() {
-      // 重新加载当前配置
       if (this.selectedConfigID) {
         this.getConfig(this.selectedConfigID);
       } else if (this.isSystemConfig) {
         this.getConfig();
       }
     },
-
-  },
-  methods: {
     extractConfigTypeFromHash(hash) {
       const rawHash = String(hash || '');
       const lastHashIndex = rawHash.lastIndexOf('#');
@@ -438,10 +484,232 @@ export default {
       await this.onConfigTypeToggle();
       return true;
     },
+    openConfigManageDialog() {
+      this.configManageDialog = true;
+    },
+    parseUmop(umop) {
+      const raw = String(umop || '');
+      const parts = raw.split(':');
+      if (parts.length < 3) {
+        return {
+          platformId: raw || '*',
+          messageType: '*',
+          sessionId: '*'
+        };
+      }
+      return {
+        platformId: parts[0] || '*',
+        messageType: parts[1] || '*',
+        sessionId: parts.slice(2).join(':') || '*'
+      };
+    },
+    createRouteItem(umop) {
+      const parsed = this.parseUmop(umop);
+      return {
+        id: `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
+        platformId: parsed.platformId,
+        umop
+      };
+    },
+    isRouteEntryForConfig(umop, confId, targetConfigId) {
+      if (String(confId || '') !== String(targetConfigId || '')) {
+        return false;
+      }
+      const parsed = this.parseUmop(umop);
+      return parsed.platformId !== 'webchat';
+    },
+    async openRouteManageDialog(payload) {
+      const configId = payload?.configId;
+      if (!configId) {
+        return;
+      }
+
+      this.routeManageDialog = true;
+      this.routeManageLoading = true;
+      this.routeManageConfigId = configId;
+      this.routeManageConfigName = this.configInfoList.find((item) => item.id === configId)?.name || configId;
+      this.routeManageItems = [];
+      this.routeManagePlatformTypeMap = {};
+
+      try {
+        const [routeRes, platformRes] = await Promise.all([
+          axios.get('/api/config/umo_abconf_routes'),
+          axios.get('/api/config/platform/list')
+        ]);
+        const routing = routeRes?.data?.data?.routing || {};
+        const platforms = platformRes?.data?.data?.platforms || [];
+
+        const typeMap = {};
+        for (const platform of platforms) {
+          const pid = String(platform?.id || '').trim();
+          if (!pid) {
+            continue;
+          }
+          typeMap[pid] = platform.platform_type || platform.type || pid;
+        }
+        this.routeManagePlatformTypeMap = typeMap;
+
+        const matched = [];
+        for (const [umop, conf] of Object.entries(routing)) {
+          if (!this.isRouteEntryForConfig(umop, conf, configId)) {
+            continue;
+          }
+          matched.push(this.createRouteItem(umop));
+        }
+        this.routeManageItems = matched.sort((a, b) => {
+          const platformCompare = a.platformId.localeCompare(b.platformId);
+          if (platformCompare !== 0) {
+            return platformCompare;
+          }
+          return a.umop.localeCompare(b.umop);
+        });
+      } catch (err) {
+        console.error('Failed to load routes for route manager:', err);
+        this.save_message = this.tm('routeManager.loadFailed');
+        this.save_message_snack = true;
+        this.save_message_success = "error";
+        this.routeManageItems = [];
+      } finally {
+        this.routeManageLoading = false;
+      }
+    },
+    removeRouteItem(entryId) {
+      this.routeManageItems = this.routeManageItems.filter((item) => item.id !== entryId);
+    },
+    async saveRouteManageDialog() {
+      if (!this.routeManageConfigId) {
+        return;
+      }
+
+      this.routeManageSaving = true;
+      try {
+        const res = await axios.get('/api/config/umo_abconf_routes');
+        const routing = res?.data?.data?.routing || {};
+        const entries = Object.entries(routing);
+        const nonTargetEntries = [];
+        const nonTargetUmopSet = new Set();
+        let firstTargetIndex = -1;
+
+        entries.forEach(([umop, confId], index) => {
+          if (this.isRouteEntryForConfig(umop, confId, this.routeManageConfigId)) {
+            if (firstTargetIndex === -1) {
+              firstTargetIndex = index;
+            }
+            return;
+          }
+          nonTargetEntries.push([umop, confId]);
+          nonTargetUmopSet.add(umop);
+        });
+
+        const targetEntries = [];
+        for (const item of this.routeManageItems) {
+          const umop = String(item.umop || '').trim();
+          if (!umop) {
+            continue;
+          }
+          if (nonTargetUmopSet.has(umop)) {
+            this.save_message = this.tm('routeManager.routeOccupied', { umop });
+            this.save_message_snack = true;
+            this.save_message_success = "error";
+            this.routeManageSaving = false;
+            return;
+          }
+          targetEntries.push([umop, this.routeManageConfigId]);
+        }
+
+        const insertIndex = firstTargetIndex === -1 ? nonTargetEntries.length : Math.min(firstTargetIndex, nonTargetEntries.length);
+        const mergedEntries = [
+          ...nonTargetEntries.slice(0, insertIndex),
+          ...targetEntries,
+          ...nonTargetEntries.slice(insertIndex)
+        ];
+        const mergedRouting = Object.fromEntries(mergedEntries);
+
+        await axios.post('/api/config/umo_abconf_route/update_all', {
+          routing: mergedRouting
+        });
+
+        this.routeManageDialog = false;
+        this.save_message = this.tm('routeManager.saveSuccess');
+        this.save_message_snack = true;
+        this.save_message_success = "success";
+        await this.refreshConfigBindings();
+      } catch (err) {
+        console.error('Failed to save routes for route manager:', err);
+        this.save_message = this.tm('routeManager.saveFailed');
+        this.save_message_snack = true;
+        this.save_message_success = "error";
+      } finally {
+        this.routeManageSaving = false;
+      }
+    },
+    buildConfigBindingMap(routingTable, platforms) {
+      const platformTypeMap = {};
+      for (const platform of platforms || []) {
+        if (!platform?.id) {
+          continue;
+        }
+        platformTypeMap[platform.id] = platform.platform_type || platform.type || platform.id;
+      }
+
+      const grouped = {};
+      for (const [umop, confId] of Object.entries(routingTable || {})) {
+        const resolvedConfigId = String(confId || 'default');
+        const parsed = this.parseUmop(umop);
+        const platformId = parsed.platformId || '*';
+        if (platformId === 'webchat') {
+          continue;
+        }
+
+        if (!grouped[resolvedConfigId]) {
+          grouped[resolvedConfigId] = {};
+        }
+        if (!grouped[resolvedConfigId][platformId]) {
+          grouped[resolvedConfigId][platformId] = {
+            platformId,
+            platformType: platformTypeMap[platformId] || platformId,
+            umops: []
+          };
+        }
+        grouped[resolvedConfigId][platformId].umops.push(umop);
+      }
+
+      const bindingMap = {};
+      for (const [confId, platformsById] of Object.entries(grouped)) {
+        bindingMap[confId] = Object.values(platformsById).sort((a, b) => {
+          return a.platformId.localeCompare(b.platformId);
+        });
+      }
+      return bindingMap;
+    },
+    async refreshConfigBindings() {
+      try {
+        const [routesRes, platformsRes] = await Promise.all([
+          axios.get('/api/config/umo_abconf_routes'),
+          axios.get('/api/config/platform/list')
+        ]);
+        const routing = routesRes?.data?.data?.routing || {};
+        const platforms = platformsRes?.data?.data?.platforms || [];
+        this.configBindingsById = this.buildConfigBindingMap(routing, platforms);
+      } catch (err) {
+        console.error('Failed to load config bindings:', err);
+        this.configBindingsById = {};
+      }
+    },
     getConfigInfoList(abconf_id) {
       // 获取配置列表
       axios.get('/api/config/abconfs').then((res) => {
-        this.configInfoList = res.data.data.info_list;
+        const infoList = Array.isArray(res.data?.data?.info_list) ? res.data.data.info_list : [];
+        this.configInfoList = [...infoList].sort((a, b) => {
+          if (a.id === 'default' && b.id !== 'default') {
+            return -1;
+          }
+          if (a.id !== 'default' && b.id === 'default') {
+            return 1;
+          }
+          return 0;
+        });
+        this.refreshConfigBindings();
 
         if (abconf_id) {
           let matched = false;
@@ -466,9 +734,12 @@ export default {
         this.save_message = this.messages.loadError;
         this.save_message_snack = true;
         this.save_message_success = "error";
+        this.configBindingsById = {};
       });
     },
     getConfig(abconf_id) {
+      this.isLoadingConfig = true;
+      this.hasUnsavedChanges = false;
       this.fetched = false
       const params = {};
 
@@ -482,22 +753,20 @@ export default {
         params: params
       }).then((res) => {
         this.config_data = res.data.data.config;
-        this.lastSavedConfigSnapshot = this.getConfigSnapshot(this.config_data);
-        this.fetched = true
         this.metadata = res.data.data.metadata;
+        this.originalConfigData = JSON.parse(JSON.stringify(this.config_data));
+        this.hasUnsavedChanges = false;
         this.configContentKey += 1;
-        // 获取配置后更新
-          this.$nextTick(() => {
-            this.originalConfigData = JSON.parse(JSON.stringify(this.config_data));
-            this.hasUnsavedChanges = false;
-            if (!this.isSystemConfig) {
-              this.currentConfigId = abconf_id || this.selectedConfigID;
-            }
-          });
+        if (!this.isSystemConfig) {
+          this.currentConfigId = abconf_id || this.selectedConfigID;
+        }
+        this.fetched = true;
       }).catch((err) => {
         this.save_message = this.messages.loadError;
         this.save_message_snack = true;
         this.save_message_success = "error";
+      }).finally(() => {
+        this.isLoadingConfig = false;
       });
     },
     updateConfig() {
@@ -515,7 +784,6 @@ export default {
 
       return axios.post('/api/config/astrbot/update', postData).then((res) => {
         if (res.data.status === "ok") {
-          this.lastSavedConfigSnapshot = this.getConfigSnapshot(this.config_data);
           this.save_message = res.data.message || this.messages.saveSuccess;
           this.save_message_snack = true;
           this.save_message_success = "success";
@@ -584,52 +852,38 @@ export default {
       });
     },
     async onConfigSelect(value) {
-      if (value === '_%manage%_') {
-        this.configManageDialog = true;
-        // 重置选择到之前的值
-        this.$nextTick(() => {
-          this.selectedConfigID = this.selectedConfigInfo.id || 'default';
-          this.getConfig(this.selectedConfigID);
+      if (!value || value === this.selectedConfigID) {
+        return;
+      }
+      if (this.hasUnsavedChanges) {
+        const prevConfigId = this.isSystemConfig ? 'default' : (this.currentConfigId || this.selectedConfigID || 'default');
+        const message = this.tm('unsavedChangesWarning.switchConfig');
+        const saveAndSwitch = await this.$refs.unsavedChangesDialog?.open({
+          title: this.tm('unsavedChangesWarning.dialogTitle'),
+          message: message,
+          confirmHint: `${this.tm('unsavedChangesWarning.options.saveAndSwitch')}:${this.tm('unsavedChangesWarning.options.confirm')}`,
+          cancelHint: `${this.tm('unsavedChangesWarning.options.discardAndSwitch')}:${this.tm('unsavedChangesWarning.options.cancel')}`,
+          closeHint: `${this.tm('unsavedChangesWarning.options.closeCard')}:"x"`
         });
-      } else {
-        // 检查是否有未保存的更改
-        if (this.hasUnsavedChanges) {
-          // 获取之前正在编辑的配置id
-          const prevConfigId = this.isSystemConfig ? 'default' : (this.currentConfigId || this.selectedConfigID || 'default');
-          const message = this.tm('unsavedChangesWarning.switchConfig');
-          const saveAndSwitch = await this.$refs.unsavedChangesDialog?.open({
-            title: this.tm('unsavedChangesWarning.dialogTitle'),
-            message: message,
-            confirmHint: `${this.tm('unsavedChangesWarning.options.saveAndSwitch')}:${this.tm('unsavedChangesWarning.options.confirm')}`,
-            cancelHint: `${this.tm('unsavedChangesWarning.options.discardAndSwitch')}:${this.tm('unsavedChangesWarning.options.cancel')}`,
-            closeHint: `${this.tm('unsavedChangesWarning.options.closeCard')}:"x"`
-          });
-          // 关闭弹窗不切换
-          if (saveAndSwitch === 'close') {
-            return;
-          }
-          if (saveAndSwitch) {
-            // 设置临时变量保存切换后的id
-            const currentSelectedId = this.selectedConfigID;
-            // 把id设置回切换前的用于保存上一次的配置，保存完后恢复id为切换后的
-            this.selectedConfigID = prevConfigId;
-            const result = await this.updateConfig();
-            this.selectedConfigID = currentSelectedId;
-            if (result?.success) {
-              this.selectedConfigID = value;
-              this.getConfig(value);
-            }
-            return;
-          } else {
-            // 取消保存并切换配置
+        if (saveAndSwitch === 'close') {
+          return;
+        }
+        if (saveAndSwitch) {
+          const currentSelectedId = this.selectedConfigID;
+          this.selectedConfigID = prevConfigId;
+          const result = await this.updateConfig();
+          this.selectedConfigID = currentSelectedId;
+          if (result?.success) {
             this.selectedConfigID = value;
             this.getConfig(value);
           }
-        } else {
-          // 无未保存更改直接切换
-          this.selectedConfigID = value;
-          this.getConfig(value);
+          return;
         }
+        this.selectedConfigID = value;
+        this.getConfig(value);
+      } else {
+        this.selectedConfigID = value;
+        this.getConfig(value);
       }
     },
     startCreateConfig() {
@@ -758,6 +1012,7 @@ export default {
         // 切换到系统配置
         this.getConfig();
       } else {
+        this.refreshConfigBindings();
         // 切换回普通配置，如果有选中的配置文件则加载，否则加载default
         if (this.selectedConfigID) {
           this.getConfig(this.selectedConfigID);
@@ -785,9 +1040,6 @@ export default {
     closeTestChat() {
       this.testChatDrawer = false;
       this.testConfigId = null;
-    },
-    getConfigSnapshot(config) {
-      return JSON.stringify(config ?? {});
     }
   },
 }
@@ -799,6 +1051,80 @@ export default {
   text-transform: none !important;
 }
 
+.config-page-wrap {
+  display: flex;
+  justify-content: center;
+}
+
+.config-panel {
+  width: min(1160px, calc(100vw - 48px));
+}
+
+.config-workbench {
+  display: grid;
+  grid-template-columns: 320px minmax(0, 1fr);
+  gap: 20px;
+  align-items: start;
+}
+
+.config-workbench--system {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.config-sidebar {
+  position: sticky;
+  top: calc(var(--v-layout-top, 64px) + 16px);
+}
+
+.config-main {
+  min-width: 0;
+}
+
+.config-current-title {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  min-width: 0;
+}
+
+.config-current-title__name {
+  font-family: inherit;
+  font-size: 1.25rem;
+  font-weight: 700;
+  line-height: 1.2;
+  margin: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.config-current-title__id {
+  line-height: 1.2;
+}
+
+.config-toolbar {
+  margin-bottom: 16px;
+  align-items: center;
+  width: 100%;
+}
+
+.config-toolbar-controls {
+  width: 100%;
+  gap: 12px;
+}
+
+.config-search-input {
+  min-width: 180px;
+  max-width: 300px;
+  width: 100%;
+  margin-left: auto;
+}
+
+.config-select--mobile,
+.config-manage-mobile {
+  display: none;
+}
+
 .unsaved-changes-banner {
   border-radius: 8px;
 }
@@ -852,35 +1178,53 @@ export default {
   font-style: italic;
 }
 
-@media (min-width: 768px) {
-  .config-panel {
-    width: 750px;
+@media (max-width: 959px) {
+  .config-workbench {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .config-sidebar {
+    display: none;
+  }
+
+  .config-select--mobile,
+  .config-manage-mobile {
+    display: inline-flex;
+  }
+
+  .config-select--mobile {
+    min-width: 180px;
+    max-width: 280px;
   }
 }
 
 @media (max-width: 767px) {
-  .v-container {
-    padding: 4px;
-  }
-
   .config-panel {
     width: 100%;
+    margin-top: 0 !important;
   }
 
-  .config-toolbar {
-    padding-right: 0 !important;
+  .config-page-wrap {
+    padding: 0 8px;
   }
 
   .config-toolbar-controls {
-    width: 100%;
     flex-wrap: wrap;
   }
 
-  .config-select,
+  .config-select--mobile,
   .config-search-input {
     width: 100%;
-    min-width: 0 !important;
+    max-width: 100%;
+    min-width: 0;
   }
+
+  .config-manage-mobile {
+    width: auto;
+    max-width: none;
+    min-width: auto;
+  }
+
 }
 
 /* 测试聊天抽屉样式 */