From a821847c4535fbd69cee94eecbb6f3ecfbf3a9c8 Mon Sep 17 00:00:00 2001
From: IGCrystal <IGCrystal@wenturc.com>
Date: Sun, 7 Sep 2025 20:02:20 +0800
Subject: [PATCH 1/4] feat: group sidebar navigation

---
 .../i18n/locales/en-US/core/navigation.json   |   7 +-
 .../i18n/locales/zh-CN/core/navigation.json   |   7 +-
 .../layouts/full/vertical-sidebar/NavItem.vue |  24 +++-
 .../full/vertical-sidebar/VerticalSidebar.vue |   2 +-
 .../full/vertical-sidebar/sidebarItem.ts      | 109 +++++++++++-------
 5 files changed, 105 insertions(+), 44 deletions(-)

diff --git a/dashboard/src/i18n/locales/en-US/core/navigation.json b/dashboard/src/i18n/locales/en-US/core/navigation.json
index f36724fb2..249ee8b1a 100644
--- a/dashboard/src/i18n/locales/en-US/core/navigation.json
+++ b/dashboard/src/i18n/locales/en-US/core/navigation.json
@@ -16,5 +16,10 @@
   "settings": "Settings",
   "documentation": "Documentation",
   "github": "GitHub",
-  "drag": "Drag"
+  "drag": "Drag",
+  "groups": {
+    "platform": "Platform",
+    "configuration": "Configuration", 
+    "others": "Others"
+  }
 } 
\ No newline at end of file
diff --git a/dashboard/src/i18n/locales/zh-CN/core/navigation.json b/dashboard/src/i18n/locales/zh-CN/core/navigation.json
index 0953b1046..cff73d7cf 100644
--- a/dashboard/src/i18n/locales/zh-CN/core/navigation.json
+++ b/dashboard/src/i18n/locales/zh-CN/core/navigation.json
@@ -16,5 +16,10 @@
   "settings": "设置",
   "documentation": "官方文档",
   "github": "GitHub",
-  "drag": "拖拽"
+  "drag": "拖拽",
+  "groups": {
+    "platform": "平台",
+    "configuration": "配置",
+    "others": "其他"
+  }
 } 
\ No newline at end of file
diff --git a/dashboard/src/layouts/full/vertical-sidebar/NavItem.vue b/dashboard/src/layouts/full/vertical-sidebar/NavItem.vue
index c81b107df..83728f708 100644
--- a/dashboard/src/layouts/full/vertical-sidebar/NavItem.vue
+++ b/dashboard/src/layouts/full/vertical-sidebar/NavItem.vue
@@ -6,7 +6,28 @@ const { t } = useI18n();
 </script>
 
 <template>
+  <v-list-group v-if="item.children" :value="item.title">
+    <template v-slot:activator="{ props }">
+      <v-list-item
+        v-bind="props"
+        rounded
+        class="mb-1"
+        color="secondary"
+        :prepend-icon="item.icon"
+      >
+        <v-list-item-title style="font-size: 14px; font-weight: 500; line-height: 1.2; word-break: break-word;">
+          {{ t(item.title) }}
+        </v-list-item-title>
+      </v-list-item>
+    </template>
+    
+    <template v-for="(child, index) in item.children" :key="index">
+      <NavItem :item="child" :level="(level || 0) + 1" />
+    </template>
+  </v-list-group>
+
   <v-list-item
+    v-else
     :to="item.type === 'external' ? '' : item.to"
     :href="item.type === 'external' ? item.to : ''"
     rounded
@@ -14,11 +35,12 @@ const { t } = useI18n();
     color="secondary"
     :disabled="item.disabled"
     :target="item.type === 'external' ? '_blank' : ''"
+    :style="level > 0 ? { paddingLeft: '32px' } : {}"
   >
     <template v-slot:prepend>
       <v-icon v-if="item.icon" :size="item.iconSize" class="hide-menu" :icon="item.icon"></v-icon>
     </template>
-    <v-list-item-title style="font-size: 14px;">{{ t(item.title) }}</v-list-item-title>
+    <v-list-item-title style="font-size: 14px; line-height: 1.2; word-break: break-word;">{{ t(item.title) }}</v-list-item-title>
     <v-list-item-subtitle v-if="item.subCaption" class="text-caption mt-n1 hide-menu">
       {{ item.subCaption }}
     </v-list-item-subtitle>
diff --git a/dashboard/src/layouts/full/vertical-sidebar/VerticalSidebar.vue b/dashboard/src/layouts/full/vertical-sidebar/VerticalSidebar.vue
index e1c9f62d8..faa6d96ab 100644
--- a/dashboard/src/layouts/full/vertical-sidebar/VerticalSidebar.vue
+++ b/dashboard/src/layouts/full/vertical-sidebar/VerticalSidebar.vue
@@ -159,7 +159,7 @@ function endDrag() {
     rail-width="80"
     app
     class="leftSidebar"
-    width="220"
+    width="260"
     :rail="customizer.mini_sidebar"
   >
     <div class="sidebar-container">
diff --git a/dashboard/src/layouts/full/vertical-sidebar/sidebarItem.ts b/dashboard/src/layouts/full/vertical-sidebar/sidebarItem.ts
index 861a51e47..190d1f676 100644
--- a/dashboard/src/layouts/full/vertical-sidebar/sidebarItem.ts
+++ b/dashboard/src/layouts/full/vertical-sidebar/sidebarItem.ts
@@ -18,66 +18,95 @@ export interface menu {
 // 在组件中使用时需要通过t()函数进行翻译
 // 所有键名都使用 core.navigation.* 格式
 const sidebarItem: menu[] = [
+  // 统计
   {
     title: 'core.navigation.dashboard',
     icon: 'mdi-view-dashboard',
     to: '/dashboard/default'
   },
+  
+  // 平台组 - 折叠菜单
   {
-    title: 'core.navigation.platforms',
-    icon: 'mdi-message-processing',
-    to: '/platforms',
-  },
-  {
-    title: 'core.navigation.providers',
-    icon: 'mdi-creation',
-    to: '/providers',
-  },
-  {
-    title: 'core.navigation.toolUse',
-    icon: 'mdi-function-variant',
-    to: '/tool-use'
-  },
-  {
-    title: 'core.navigation.persona',
-    icon: 'mdi-heart',
-    to: '/persona'
-  },
-  {
-    title: 'core.navigation.extension',
-    icon: 'mdi-puzzle',
-    to: '/extension'
+    title: 'core.navigation.groups.platform',
+    icon: 'mdi-server-network',
+    children: [
+      {
+        title: 'core.navigation.platforms',
+        icon: 'mdi-message-processing',
+        to: '/platforms',
+      },
+      {
+        title: 'core.navigation.providers',
+        icon: 'mdi-creation',
+        to: '/providers',
+      },
+      {
+        title: 'core.navigation.toolUse',
+        icon: 'mdi-function-variant',
+        to: '/tool-use'
+      }
+    ]
   },
+
+  // 配置组 - 折叠菜单
   {
-    title: 'core.navigation.knowledgeBase',
-    icon: 'mdi-text-box-search',
-    to: '/alkaid/knowledge-base',
+    title: 'core.navigation.groups.configuration',
+    icon: 'mdi-cog-outline',
+    children: [
+      {
+        title: 'core.navigation.config',
+        icon: 'mdi-cog',
+        to: '/config',
+      },
+      {
+        title: 'core.navigation.persona',
+        icon: 'mdi-heart',
+        to: '/persona'
+      },
+      {
+        title: 'core.navigation.knowledgeBase',
+        icon: 'mdi-text-box-search',
+        to: '/alkaid/knowledge-base',
+      }
+    ]
   },
+
+  // 其他组 - 折叠菜单
   {
-    title: 'core.navigation.config',
-    icon: 'mdi-cog',
-    to: '/config',
+    title: 'core.navigation.groups.others',
+    icon: 'mdi-dots-horizontal',
+    children: [
+      {
+        title: 'core.navigation.extension',
+        icon: 'mdi-puzzle',
+        to: '/extension'
+      },
+      {
+        title: 'core.navigation.conversation',
+        icon: 'mdi-database',
+        to: '/conversation'
+      },
+      {
+        title: 'core.navigation.sessionManagement',
+        icon: 'mdi-account-group',
+        to: '/session-management'
+      }
+    ]
   },
+
+  // 聊天 - 独立项
   {
     title: 'core.navigation.chat',
     icon: 'mdi-chat',
     to: '/chat'
   },
-  {
-    title: 'core.navigation.conversation',
-    icon: 'mdi-database',
-    to: '/conversation'
-  },
-  {
-    title: 'core.navigation.sessionManagement',
-    icon: 'mdi-account-group',
-    to: '/session-management'
-  },
+
+  // 控制台 - 独立项
   {
     title: 'core.navigation.console',
     icon: 'mdi-console',
     to: '/console'
-  },
+  }
   // {
   //   title: 'Project ATRI',
   //   icon: 'mdi-grain',

From d0a9fe7635389c4ed3ffe793540a5dff40d23630 Mon Sep 17 00:00:00 2001
From: IGCrystal <IGCrystal@wenturc.com>
Date: Sun, 7 Sep 2025 20:08:20 +0800
Subject: [PATCH 2/4] feat: resizable sidebar

---
 .../full/vertical-sidebar/VerticalSidebar.vue | 91 ++++++++++++++++++-
 1 file changed, 89 insertions(+), 2 deletions(-)

diff --git a/dashboard/src/layouts/full/vertical-sidebar/VerticalSidebar.vue b/dashboard/src/layouts/full/vertical-sidebar/VerticalSidebar.vue
index faa6d96ab..de6cec113 100644
--- a/dashboard/src/layouts/full/vertical-sidebar/VerticalSidebar.vue
+++ b/dashboard/src/layouts/full/vertical-sidebar/VerticalSidebar.vue
@@ -12,6 +12,12 @@ const sidebarMenu = shallowRef(sidebarItems);
 
 const showIframe = ref(false);
 
+// 侧边栏宽度控制
+const sidebarWidth = ref(260);
+const minSidebarWidth = 200;
+const maxSidebarWidth = 300;
+const isResizing = ref(false);
+
 // 默认桌面端 iframe 样式
 const iframeStyle = ref({
   position: 'fixed',
@@ -149,6 +155,34 @@ function endDrag() {
   document.removeEventListener('touchend', onTouchEnd);
 }
 
+function startSidebarResize(event) {
+  isResizing.value = true;
+  document.body.style.userSelect = 'none';
+  document.body.style.cursor = 'ew-resize';
+  
+  const startX = event.clientX;
+  const startWidth = sidebarWidth.value;
+  
+  function onMouseMoveResize(event) {
+    if (!isResizing.value) return;
+    
+    const deltaX = event.clientX - startX;
+    const newWidth = Math.max(minSidebarWidth, Math.min(maxSidebarWidth, startWidth + deltaX));
+    sidebarWidth.value = newWidth;
+  }
+  
+  function onMouseUpResize() {
+    isResizing.value = false;
+    document.body.style.userSelect = '';
+    document.body.style.cursor = '';
+    document.removeEventListener('mousemove', onMouseMoveResize);
+    document.removeEventListener('mouseup', onMouseUpResize);
+  }
+  
+  document.addEventListener('mousemove', onMouseMoveResize);
+  document.addEventListener('mouseup', onMouseUpResize);
+}
+
 </script>
 
 <template>
@@ -159,7 +193,7 @@ function endDrag() {
     rail-width="80"
     app
     class="leftSidebar"
-    width="260"
+    :width="sidebarWidth"
     :rail="customizer.mini_sidebar"
   >
     <div class="sidebar-container">
@@ -180,6 +214,15 @@ function endDrag() {
         </v-btn>
       </div>
     </div>
+    
+    <!-- 拖拽调整宽度的控制条 -->
+    <div 
+      v-if="!customizer.mini_sidebar && customizer.Sidebar_drawer"
+      class="sidebar-resize-handle"
+      @mousedown="startSidebarResize"
+      :class="{ 'resizing': isResizing }"
+    >
+    </div>
   </v-navigation-drawer>
   
   <div
@@ -220,4 +263,48 @@ function endDrag() {
       style="width: 100%; height: calc(100% - 56px); border: none; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px;"
     ></iframe>
   </div>
-</template>
\ No newline at end of file
+</template>
+
+<style scoped>
+.sidebar-resize-handle {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 4px;
+  height: 100%;
+  background: transparent;
+  cursor: ew-resize;
+  user-select: none;
+  z-index: 1000;
+  transition: background-color 0.2s ease;
+}
+
+.sidebar-resize-handle:hover,
+.sidebar-resize-handle.resizing {
+  background: rgba(var(--v-theme-primary), 0.3);
+}
+
+.sidebar-resize-handle::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 2px;
+  height: 30px;
+  background: rgba(var(--v-theme-on-surface), 0.3);
+  border-radius: 1px;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+
+.sidebar-resize-handle:hover::before,
+.sidebar-resize-handle.resizing::before {
+  opacity: 1;
+}
+
+/* 确保侧边栏容器支持相对定位 */
+.leftSidebar .v-navigation-drawer__content {
+  position: relative;
+}
+</style>
\ No newline at end of file

From 6ed2f6954437b1f3899bd1a29ef1d14885c51256 Mon Sep 17 00:00:00 2001
From: IGCrystal <IGCrystal@wenturc.com>
Date: Sun, 7 Sep 2025 20:56:04 +0800
Subject: [PATCH 3/4] fix: align children in one column

---
 .../src/layouts/full/vertical-sidebar/NavItem.vue | 13 ++++++++++++-
 .../full/vertical-sidebar/VerticalSidebar.vue     | 15 ++-------------
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/dashboard/src/layouts/full/vertical-sidebar/NavItem.vue b/dashboard/src/layouts/full/vertical-sidebar/NavItem.vue
index 83728f708..91cebf72a 100644
--- a/dashboard/src/layouts/full/vertical-sidebar/NavItem.vue
+++ b/dashboard/src/layouts/full/vertical-sidebar/NavItem.vue
@@ -1,8 +1,17 @@
 <script setup>
 import { useI18n } from '@/i18n/composables';
+import { useCustomizerStore } from '@/stores/customizer';
+import { computed } from 'vue';
 
 const props = defineProps({ item: Object, level: Number });
 const { t } = useI18n();
+const customizer = useCustomizerStore();
+
+const itemStyle = computed(() => {
+  const lvl = props.level ?? 0;
+  const indent = customizer.mini_sidebar ? '0px' : `${lvl * 24}px`;
+  return { '--indent-padding': indent };
+});
 </script>
 
 <template>
@@ -14,6 +23,7 @@ const { t } = useI18n();
         class="mb-1"
         color="secondary"
         :prepend-icon="item.icon"
+        :style="{ '--indent-padding': '0px' }"
       >
         <v-list-item-title style="font-size: 14px; font-weight: 500; line-height: 1.2; word-break: break-word;">
           {{ t(item.title) }}
@@ -21,6 +31,7 @@ const { t } = useI18n();
       </v-list-item>
     </template>
     
+    <!-- children -->
     <template v-for="(child, index) in item.children" :key="index">
       <NavItem :item="child" :level="(level || 0) + 1" />
     </template>
@@ -35,7 +46,7 @@ const { t } = useI18n();
     color="secondary"
     :disabled="item.disabled"
     :target="item.type === 'external' ? '_blank' : ''"
-    :style="level > 0 ? { paddingLeft: '32px' } : {}"
+    :style="itemStyle"
   >
     <template v-slot:prepend>
       <v-icon v-if="item.icon" :size="item.iconSize" class="hide-menu" :icon="item.icon"></v-icon>
diff --git a/dashboard/src/layouts/full/vertical-sidebar/VerticalSidebar.vue b/dashboard/src/layouts/full/vertical-sidebar/VerticalSidebar.vue
index de6cec113..f083e4553 100644
--- a/dashboard/src/layouts/full/vertical-sidebar/VerticalSidebar.vue
+++ b/dashboard/src/layouts/full/vertical-sidebar/VerticalSidebar.vue
@@ -12,13 +12,11 @@ const sidebarMenu = shallowRef(sidebarItems);
 
 const showIframe = ref(false);
 
-// 侧边栏宽度控制
 const sidebarWidth = ref(260);
 const minSidebarWidth = 200;
 const maxSidebarWidth = 300;
 const isResizing = ref(false);
 
-// 默认桌面端 iframe 样式
 const iframeStyle = ref({
   position: 'fixed',
   bottom: '16px',
@@ -35,14 +33,13 @@ const iframeStyle = ref({
   boxShadow: '0px 4px 12px rgba(0, 0, 0, 0.1)',
 });
 
-// 如果为移动端，则采用百分比尺寸，并设置初始位置
 if (window.innerWidth < 768) {
   iframeStyle.value = {
     position: 'fixed',
     top: '10%',
     left: '0%',
     width: '100%',
-    height: '50%',
+    height: '80%',
     minWidth: '300px',
     minHeight: '200px',
     background: 'white',
@@ -52,7 +49,6 @@ if (window.innerWidth < 768) {
     borderRadius: '12px',
     boxShadow: '0px 4px 12px rgba(0, 0, 0, 0.1)',
   };
-  // 移动端默认关闭侧边栏
   customizer.Sidebar_drawer = false;
 }
 
@@ -80,12 +76,10 @@ function openIframeLink(url) {
   }
 }
 
-// 拖拽相关变量与函数
 let offsetX = 0;
 let offsetY = 0;
 let isDragging = false;
 
-// 辅助函数：限制数值在一定范围内
 function clamp(value, min, max) {
   return Math.min(Math.max(value, min), max);
 }
@@ -97,7 +91,6 @@ function startDrag(clientX, clientY) {
   offsetX = clientX - rect.left;
   offsetY = clientY - rect.top;
   document.body.style.userSelect = 'none';
-  // 绑定全局鼠标和触摸事件
   document.addEventListener('mousemove', onMouseMove);
   document.addEventListener('mouseup', onMouseUp);
   document.addEventListener('touchmove', onTouchMove, { passive: false });
@@ -215,7 +208,6 @@ function startSidebarResize(event) {
       </div>
     </div>
     
-    <!-- 拖拽调整宽度的控制条 -->
     <div 
       v-if="!customizer.mini_sidebar && customizer.Sidebar_drawer"
       class="sidebar-resize-handle"
@@ -230,14 +222,13 @@ function startSidebarResize(event) {
     id="draggable-iframe"
     :style="iframeStyle"
   >
-    <!-- 拖拽头部：支持鼠标和触摸 -->
+
     <div :style="dragHeaderStyle" @mousedown="onMouseDown" @touchstart="onTouchStart">
       <div style="display: flex; align-items: center;">
         <v-icon icon="mdi-cursor-move" />
         <span style="margin-left: 8px;">{{ t('core.navigation.drag') }}</span>
       </div>
       <div style="display: flex; gap: 8px;">
-        <!-- 跳转按钮 -->
         <v-btn
           icon
           @click.stop="openIframeLink('https://astrbot.app')"
@@ -246,7 +237,6 @@ function startSidebarResize(event) {
         >
           <v-icon icon="mdi-open-in-new" />
         </v-btn>
-        <!-- 关闭按钮 -->
         <v-btn
           icon
           @click.stop="toggleIframe"
@@ -257,7 +247,6 @@ function startSidebarResize(event) {
         </v-btn>
       </div>
     </div>
-    <!-- iframe 区域 -->
     <iframe
       src="https://astrbot.app"
       style="width: 100%; height: calc(100% - 56px); border: none; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px;"

From d1e25f3e7fef4486884389de5b60f3b8123bcb59 Mon Sep 17 00:00:00 2001
From: IGCrystal <IGCrystal@wenturc.com>
Date: Sun, 7 Sep 2025 21:27:03 +0800
Subject: [PATCH 4/4] perf: optimize group display

---
 .../src/layouts/full/vertical-sidebar/NavItem.vue     | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/dashboard/src/layouts/full/vertical-sidebar/NavItem.vue b/dashboard/src/layouts/full/vertical-sidebar/NavItem.vue
index 91cebf72a..e2981fe62 100644
--- a/dashboard/src/layouts/full/vertical-sidebar/NavItem.vue
+++ b/dashboard/src/layouts/full/vertical-sidebar/NavItem.vue
@@ -15,7 +15,7 @@ const itemStyle = computed(() => {
 </script>
 
 <template>
-  <v-list-group v-if="item.children" :value="item.title">
+  <v-list-group v-if="item.children" :value="item.title" :class="{ 'group-bordered': customizer.mini_sidebar }">
     <template v-slot:activator="{ props }">
       <v-list-item
         v-bind="props"
@@ -68,3 +68,12 @@ const itemStyle = computed(() => {
     </template>
   </v-list-item>
 </template>
+
+<style scoped>
+/* 在折叠(mini)状态下，分组展开时给整个分组（母项+子项）加边框以便区分 */
+.group-bordered.v-list-group--open {
+  border: 2px solid rgba(var(--v-theme-borderLight), 0.35);
+  border-radius: 8px;
+  background: rgba(var(--v-theme-borderLight), 0.04);
+}
+</style>