✨ feat(Router): 重构路由配置，添加后台布局和导航功能

src/App.vue

@@ -1,4 +1,5 @@
 <template>
+  <div>{{ $route.fullPath }}</div>
   <RouterView />
 </template>
 <style>

src/router/index.ts

@@ -1,6 +1,7 @@
 import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
 
 import LayoutView from '../views/layout/index.vue'
+import backLayout from '../views/layout/back-layout.vue'
 import LoginView from '../views/login/index.vue'
 import MenuView from '../views/menu/index.vue'
 import OrderView from '../views/order/index.vue'
@@ -11,13 +12,40 @@ import GoodsView from '../views/goods/index.vue'
 const routes: RouteRecordRaw[] = [
   { path: '/login', component: LoginView },
   {
-    path: '/',
+    path:'/',
+    redirect:'/font',
+  },
+  {
+    path: '/font',
     component: LayoutView,
-    redirect: '/menu',
+    redirect: '/font/menu',
+    children: [
+      { path: 'menu', component: MenuView },
+      {
+        path: 'order',
+        children: [
+          {
+            path: 'orderList',
+            component: OrderView,
+          },
+          {
+            path: 'orderDetail',
+            component: orderDetail,
+          },
+        ],
+      },
+      { path: 'exit', component: ExitView },
+      { path: 'goods', component: GoodsView },
+    ],
+  },
+  {
+    path: '/back',
+    redirect:'/back/menu',
+    component: backLayout,
     children: [
-      { path: '/menu', component: MenuView },
+      { path: 'menu', component: MenuView },
       {
-        path: '/order',
+        path: 'order',
         children: [
           {
             path: 'orderList',
@@ -29,8 +57,8 @@ const routes: RouteRecordRaw[] = [
           },
         ],
       },
-      { path: '/exit', component: ExitView },
-      { path: '/goods', component: GoodsView },
+      { path: 'exit', component: ExitView },
+      { path: 'goods', component: GoodsView },
     ],
   },
   {

src/views/layout/back-layout.vue

@@ -0,0 +1,109 @@
+<template>
+    <div class="main flex flex-col">
+        <Header></Header>
+        <div class="flex-1 flex shrink-0" style="height:calc(100vh - 100px)">
+            <div class="h-full ">
+                <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
+                    <el-sub-menu index="1">
+                        <template #title>
+                            <el-icon>
+                                <location />
+                            </el-icon>
+                            <span>Navigator One</span>
+                        </template>
+                        <el-menu-item-group title="Group One">
+                            <el-menu-item index="1-1">item one</el-menu-item>
+                            <el-menu-item index="1-2">item two</el-menu-item>
+                        </el-menu-item-group>
+                        <el-menu-item-group title="Group Two">
+                            <el-menu-item index="1-3">item three</el-menu-item>
+                        </el-menu-item-group>
+                        <el-sub-menu index="1-4">
+                            <template #title>item four</template>
+                            <el-menu-item index="1-4-1">item one</el-menu-item>
+                        </el-sub-menu>
+                    </el-sub-menu>
+                    <el-menu-item index="2">
+                        <el-icon><icon-menu /></el-icon>
+                        <span>Navigator Two</span>
+                    </el-menu-item>
+                    <el-menu-item index="3" disabled>
+                        <el-icon>
+                            <document />
+                        </el-icon>
+                        <span>Navigator Three</span>
+                    </el-menu-item>
+                    <el-menu-item index="4">
+                        <el-icon>
+                            <setting />
+                        </el-icon>
+                        <span>Navigator Four</span>
+                    </el-menu-item>
+                </el-menu>
+            </div>
+            <div class=" flex-1 overflow-y-auto">
+                <Transition name="slide-right">
+                    <router-view />
+                </Transition>
+            </div>
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+
+import { useI18n } from 'vue-i18n'
+import Header from './components/Header.vue'
+
+
+
+import { useStoreI18n } from '@/hook/i18n'
+const { t, locale } = useI18n()
+const { $t } = useStoreI18n()
+const handleOpen = (key: string, keyPath: string[]) => {
+    console.log(key, keyPath)
+}
+const handleClose = (key: string, keyPath: string[]) => {
+    console.log(key, keyPath)
+}
+</script>
+<style scoped lang="scss">
+.slide-right-enter-active,
+.slide-right-leave-active {
+    transition: all 0.5s ease;
+}
+
+.slide-right-enter-from {
+    opacity: 0;
+    transform: translateX(100%);
+}
+
+.slide-right-leave-to {
+    opacity: 0;
+    transform: translateX(-100%);
+}
+
+.main {
+    width: 100%;
+    height: 100vh;
+    min-width: 1000px;
+    overflow-y: hidden;
+
+    .main-header {
+        // display: flex;
+        // justify-content: space-between;
+        // align-items: center;
+        height: 102px;
+        padding: 0 48px;
+
+        .logo {
+            width: 156px;
+        }
+    }
+}
+
+// 隐藏滚动条
+::-webkit-scrollbar {
+    display: none;
+}
+</style>

src/views/layout/components/Header.vue

@@ -27,15 +27,24 @@
           </el-dropdown-menu>
         </template>
       </el-dropdown>
-      <div class="flex items-center ml-[10px]">
-        <div class="w-[42px] h-[42px] overflow-hidden rounded-full">
+      <el-dropdown >
+        <div class="flex items-center ml-[10px]">
+          <div class="w-[42px] h-[42px] overflow-hidden rounded-full">
           <img class="w-full h-full" src="/imgs/avater.svg" alt="" />
         </div>
         <div class="ml-[5px] flex flex-col justify-around h-[42px]">
           <div class="text-[#333] text-[14px] font-bold">周星星</div>
           <div class="text-[#999] text-[10px]">出纳员</div>
         </div>
-      </div>
+        </div>
+        <template #dropdown>
+          <el-dropdown-menu>
+            <el-dropdown-item v-for="(item, index) in options" :key="index">
+              <span class="h-full w-full" @click="toNext(item)">{{ item.label }}</span>
+            </el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
     </div>
   </header>
   <OrderDrawer v-model:show="show" :type="SearchType" />
@@ -47,6 +56,8 @@
   import { messages } from '../../../i18n/index'
   import { useI18n } from 'vue-i18n'
   import OrderDrawer from '../../menu/components/order-drawer.vue'
+  import { useRouter } from 'vue-router'
+
   const { t, locale } = useI18n()
   const langs = computed(() => Object.keys(messages))
   const curLang = computed(() => locale.value)
@@ -56,4 +67,28 @@
   function changeLanguage(lang) {
     locale.value = lang
   }
+  const router = useRouter()
+  const options = [
+    {
+      label:'后台',
+      value:'back'
+    },
+    {
+      label:'收银台',
+      value:'font'
+    }
+  ]
+  const toNext = (item)=>{
+    console.log('adsfsdaf');
+    switch(item.value){
+      case 'font':
+        console.log('font')
+        router.push('/font');
+        break;
+      case 'back':
+        console.log('back')
+
+        router.push('/back')
+    }
+  }
 </script>

src/views/layout/components/Menu.vue

@@ -28,7 +28,7 @@ const route = useRoute()
 
 const isActive = computed(() => {
   //根据第一个/后面的字符串判断是否是当前路由
-  return route.path.split('/')[1] === props.info.path.split('/')[1]
+  return route.path.split('/')[2] === props.info.path.split('/')[2]
 })
 
 const navigateToRoute = () => {

src/views/layout/index.vue

@@ -33,26 +33,26 @@ const menus = ref([
     name: $t('sidebar.menu'),
     img: menuCooker1,
     key: 1,
-    path: '/menu',
+    path: '/font/menu',
     slected: true,
   },
   {
     name: $t('sidebar.order'),
     img: menuCooker2,
     key: 2,
-    path: '/order/orderList',
+    path: '/font/order/orderList',
   },
   {
     name: $t('sidebar.goods'),
     img: menuCooker4,
     key: 4,
-    path: '/goods',
+    path: '/font/goods',
   },
   {
     name: $t('sidebar.exit'),
     img: menuCooker3,
     key: 3,
-    path: '/exit',
+    path: '/font/exit',
   },
 
 ])

src/views/menu/components/pay-drawer.vue

@@ -5,7 +5,7 @@
             <div class="grid grid-cols-2 h-screen">
                 <div class="border-r border-gray-100 mr-5 h-full flex flex-col">
                     <h3 class="p-3 text-2xl ">Confirmation</h3>
-                    <order type="pay" class="h-[calc(100vh-60px)]" ></order>
+                    <order type="pay" class="!h-[calc(100vh-60px)]" ></order>
                 </div>
                 <div class="bg-white rounded-lg pr-5 flex flex-col h-full">
                     <div class="flex-1">

src/views/menu/components/rightOrder/components/order.vue

@@ -1,13 +1,13 @@
 <!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
 
 <template>
-  <div class="h-full bg-gray-50">
-    <div class="w-full mx-auto h-full">
-      <div class="bg-white rounded-lg p-3 h-full">
-        <div class="flex items-center justify-between mb-3">
+  <div class="h-full bg-gray-50 w-full">
+    <div class="w-full mx-auto h-full ">
+      <div class="bg-white rounded-lg p-3 h-full w-full">
+        <div class="flex items-center justify-between mb-3 w-full">
           <h1 class="text-sm font-medium">Orders #45892</h1>
         </div>
-        <div class="flex flex-col h-[calc(100%-3rem)]">
+        <div class="flex flex-col h-[calc(100%-3rem)] w-full">
           <div class="space-y-4 mb-6 overflow-auto flex-1">
           <div
             v-for="(item, index) in orderItems"

src/views/menu/components/rightOrder/rightOrder.vue

@@ -3,9 +3,9 @@
 <template>
   <div class="h-full bg-white flex flex-col items-center justify-between">
     <!-- Empty state section -->
-    <div class="h-[80%]">
+    <div class="h-[80%] w-full">
       <noProduct v-if="false"></noProduct>
-      <order v-else></order>
+      <order w-full v-else></order>
     </div>
     <!-- Action buttons section -->
     <div class="w-full max-w-md px-1 h-[20%] bg-white">

src/views/order/orderDetail.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="bg-white rounded-lg  p-8">
     <!-- Header -->
-    <div class="flex justify-between items-center mb-8">
+    <div class="flex justify-between items-center mb-8 h-1/5">
       <div>
         <h1 class="text-2xl font-medium">Order Details</h1>
         <p class="text-gray-500 mt-1">Order #{{ orderNumber }}</p>
@@ -78,8 +78,8 @@
         <!-- Additional Information -->
         <div class="mb-4">
           <div class="flex items-center">
-            <div class="w-48 text-gray-500">
-              <img class="h-5 w-5  mr-2 inline" src="@/assets/img/desk/order11.png" alt="">Commodity Classification
+            <div class="mr-3 text-gray-500">
+              <img class="h-5  mr-2 inline whitespace-nowrap" src="@/assets/img/desk/order11.png" alt="">Commodity Classification
             </div>
             <div>
               <span class="px-3 py-1 bg-orange-100 text-orange-800 rounded-full text-sm">