feat: add breadcrumb

packages/web/src/components/ChatList/index.vue

@@ -10,7 +10,7 @@
       />
       <RobotChat
         v-if="chatItem.action === 'robot'"
-        :robot-say="chatItem as robot"
+        :robot-say="chatItem"
       />
     </template>
   </div>
@@ -23,7 +23,7 @@ import { reactive } from 'vue'
 import type { user, robot } from '@memoh/shared'
 
 // 模拟一下数据
-const chatList = reactive<(((user | robot) & { action: 'robot' | 'user' }))[]>([{
+const chatList = reactive<(((user | robot)))[]>([{
   description: 'fjiwofwofjewifwe', time: new Date, id: 2, action: 'user'
 }, {
   description: 'fjiwofwofjefwfewfwifwe', time: new Date, id: 1000, action: 'robot', type: 'Openai Gpt5'

packages/web/src/components/MainContainer/index.vue

@@ -11,15 +11,25 @@
         />
         <Breadcrumb>
           <BreadcrumbList>
-            <!-- <BreadcrumbItem class="hidden md:block">
-              <BreadcrumbLink href="#">
-                Building Your Application
-              </BreadcrumbLink>
-            </BreadcrumbItem> -->
-            <BreadcrumbSeparator class="hidden md:block" />
-            <BreadcrumbItem>
-              <BreadcrumbPage>对话</BreadcrumbPage>
-            </BreadcrumbItem>
+            <template
+              v-for="(breadcrumbItem,index) in curBreadcrumb"
+              :key="breadcrumbItem"
+            >
+              <template v-if="(index+1)!==curBreadcrumb.length">
+                <BreadcrumbItem class="hidden md:block">
+                  <BreadcrumbLink :href="breadcrumbItem.path">
+                    {{ breadcrumbItem.breadcrumb }}
+                  </BreadcrumbLink>
+                </BreadcrumbItem>
+                <BreadcrumbSeparator />
+              </template>
+             
+              <BreadcrumbItem v-else>
+                <BreadcrumbPage>
+                  {{ breadcrumbItem.breadcrumb }}
+                </BreadcrumbPage>
+              </BreadcrumbItem>
+            </template>
           </BreadcrumbList>
         </Breadcrumb>
       </div>
@@ -35,7 +45,6 @@
 </template>
 
 <script setup lang="ts">
-import { inject } from 'vue'
 import {
   SidebarTrigger, SidebarInset, Breadcrumb,
   BreadcrumbItem,
@@ -45,6 +54,15 @@ import {
   BreadcrumbSeparator,
   Separator
 } from '@memoh/ui'
+import {useRoute} from 'vue-router'
+import { computed } from 'vue'
+const route = useRoute()
+
+const curBreadcrumb = computed(() => { 
+  return route.matched.map(routeItem => ({
+    path: routeItem.path,
+    breadcrumb: routeItem.meta['breadcrumb']
+  })) 
+})
 
-const open = inject('sideBarIsOpen')
 </script>

packages/web/src/components/Sidebar/index.vue

@@ -1,18 +1,18 @@
 <template>
   <aside class="[&_[data-state=collapsed]_.title-container]:hidden">
-    <Sidebar
-      collapsible="icon"
-    >
+    <Sidebar collapsible="icon">
       <SidebarHeader>
         <SidebarMenu>
-          <SidebarMenuItem>        
+          <SidebarMenuItem>
             <img
               src="../../../public/logo.png"
               width="80"
               class="m-auto"
               alt="logo.png"
             >
-            <h4 class="scroll-m-20 text-xl font-semibold tracking-tight text-center text-muted-foreground title-container">
+            <h4
+              class="scroll-m-20 text-xl font-semibold tracking-tight text-center text-muted-foreground title-container"
+            >
               Memoh
             </h4>
           </SidebarMenuItem>
@@ -32,7 +32,10 @@
               >
                 <SidebarMenuItem>
                   <CollapsibleTrigger as-child>
-                    <SidebarMenuButton :tooltip="sidebarItem.title">
+                    <SidebarMenuButton
+                      :tooltip="sidebarItem.title"
+                      @click="router.push({ name: sidebarItem.name })"
+                    >
                       <svg-icon
                         type="mdi"
                         :path="sidebarItem.icon"
@@ -46,7 +49,7 @@
           </SidebarGroupContent>
         </SidebarGroup>
       </SidebarContent>
-     
+
       <SidebarRail />
     </Sidebar>
   </aside>
@@ -58,42 +61,46 @@ import {
   SidebarGroup,
   SidebarGroupContent,
   SidebarGroupLabel,
-  SidebarHeader,  
+  SidebarHeader,
   SidebarMenu,
   SidebarMenuButton,
-  SidebarMenuItem,  
-  SidebarRail, 
+  SidebarMenuItem,
+  SidebarRail,
   CollapsibleTrigger,
   Collapsible
-  
+
 } from '@memoh/ui'
-import { reactive, inject } from 'vue'
+import { reactive } from 'vue'
 import SvgIcon from '@jamescoyle/vue-icon'
-import { mdiRobot, mdiChatOutline, mdiCogBox, mdiListBox, mdiHome } from '@mdi/js'
+import { mdiRobot, mdiChatOutline, mdiCogBox, mdiListBox, mdiHome, mdiBookArrowDown } from '@mdi/js'
+import { useRouter } from 'vue-router'
 
-
-const open=inject('sideBarIsOpen')
+const router = useRouter()
 
 const sidebarInfo = reactive([{
   title: '创建对话',
-  path: '/',
+  name: 'chat',
   icon: mdiChatOutline
 }, {
   title: '主页',
-  path: '/',
+  name: 'home',
   icon: mdiHome
 },
-  {
+{
   title: '模型配置',
-  path: '/',
+  name: 'models',
   icon: mdiRobot
-  }, {
-  title: '环境设置',
-  path: '/',
+}, {
+  title: '设置',
+  name: 'settings',
   icon: mdiCogBox
-  }, {
-  title: '平台',
-  path: '/',
+}, {
+  title: 'MCP',
+  name: 'mcp',
   icon: mdiListBox
+}, {
+  title: '平台',
+  name: 'platform',
+  icon: mdiBookArrowDown
 }])
 </script>

packages/web/src/pages/home/index.vue

@@ -0,0 +1,5 @@
+<template>
+  <section> 
+    <h1>主页</h1>
+  </section>
+</template>

packages/web/src/pages/mcp/index.vue

@@ -0,0 +1,5 @@
+<template>
+  <section>
+    <h1>MCP</h1>
+  </section>
+</template>

packages/web/src/pages/models/index.vue

@@ -0,0 +1,5 @@
+<template>
+  <section>
+    <h1>模型管理</h1>
+  </section>
+</template>

packages/web/src/pages/platform/index.vue

@@ -0,0 +1,5 @@
+<template>
+  <section>
+    <h1>Platform</h1>
+  </section>
+</template>

packages/web/src/pages/settings/index.vue

@@ -0,0 +1,5 @@
+<template>
+  <section>
+    <h1>Settings</h1>
+  </section>
+</template>

packages/web/src/router.ts

@@ -14,10 +14,52 @@ const routes = [
     name: 'Main',
     component: () => import('@/pages/mainSection/index.vue'),
     path: '/main',
-    redirect:'/main/chat',
+    redirect: '/main/chat',
+    meta: {
+      breadcrumb: '主菜单'
+    },
     children: [{
+      name: 'chat',
       path: 'chat',
-      component: () => import('@/pages/chat/index.vue')
+      component: () => import('@/pages/chat/index.vue'),
+      meta: {
+        breadcrumb: '对话'
+      }
+    }, {
+      name: 'home',
+      path: 'home',
+      component: () => import('@/pages/home/index.vue'),
+      meta: {
+        breadcrumb: '主页'
+      }
+    }, {
+      name: 'models',
+      path: 'models',
+      component: () => import('@/pages/models/index.vue'),
+      meta: {
+        breadcrumb: '模型管理'
+      }
+    }, {
+      name: 'settings',
+      path: 'settings',
+      component: () => import('@/pages/settings/index.vue'),
+      meta: {
+        breadcrumb: '设置'
+      }
+    }, {
+      name: 'mcp',
+      path: 'mcp',
+      component: () => import('@/pages/mcp/index.vue'),
+      meta: {
+        breadcrumb: 'MCP'
+      }
+    }, {
+      name: 'platform',
+      path: 'platform',
+      component: () => import('@/pages/platform/index.vue'),
+      meta: {
+        breadcrumb: '平台'
+      }
     }]
   }