Merge remote-tracking branch 'origin/drawer' into lyz_dev

# Conflicts:
#	src/views/menu/index.vue
#	vite.config.ts

package.json

@@ -32,6 +32,7 @@
     "@vitejs/plugin-vue": "^5.2.1",
     "sass-embedded": "^1.85.0",
     "typescript": "^5.7.3",
+    "unplugin-element-plus": "^0.9.1",
     "vite": "^6.0.3"
   },
   "pnpm": {

pnpm-lock.yaml

@@ -54,6 +54,9 @@ importers:
       typescript:
         specifier: ^5.7.3
         version: 5.7.3
+      unplugin-element-plus:
+        specifier: ^0.9.1
+        version: 0.9.1
       vite:
         specifier: ^6.0.3
         version: 6.1.1(jiti@2.4.2)(lightningcss@1.29.1)(sass-embedded@1.85.0)
@@ -297,51 +300,61 @@ packages:
     resolution: {integrity: sha512-A4iphFGNkWRd+5m3VIGuqHnG3MVnqKe7Al57u9mwgbyZ2/xF9Jio72MaY7xxh+Y87VAHmGQr73qoKL9HPbXj1g==}
     cpu: [arm]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-arm-musleabihf@4.34.8':
     resolution: {integrity: sha512-S0lqKLfTm5u+QTxlFiAnb2J/2dgQqRy/XvziPtDd1rKZFXHTyYLoVL58M/XFwDI01AQCDIevGLbQrMAtdyanpA==}
     cpu: [arm]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-arm64-gnu@4.34.8':
     resolution: {integrity: sha512-jpz9YOuPiSkL4G4pqKrus0pn9aYwpImGkosRKwNi+sJSkz+WU3anZe6hi73StLOQdfXYXC7hUfsQlTnjMd3s1A==}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-arm64-musl@4.34.8':
     resolution: {integrity: sha512-KdSfaROOUJXgTVxJNAZ3KwkRc5nggDk+06P6lgi1HLv1hskgvxHUKZ4xtwHkVYJ1Rep4GNo+uEfycCRRxht7+Q==}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-loongarch64-gnu@4.34.8':
     resolution: {integrity: sha512-NyF4gcxwkMFRjgXBM6g2lkT58OWztZvw5KkV2K0qqSnUEqCVcqdh2jN4gQrTn/YUpAcNKyFHfoOZEer9nwo6uQ==}
     cpu: [loong64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-powerpc64le-gnu@4.34.8':
     resolution: {integrity: sha512-LMJc999GkhGvktHU85zNTDImZVUCJ1z/MbAJTnviiWmmjyckP5aQsHtcujMjpNdMZPT2rQEDBlJfubhs3jsMfw==}
     cpu: [ppc64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-riscv64-gnu@4.34.8':
     resolution: {integrity: sha512-xAQCAHPj8nJq1PI3z8CIZzXuXCstquz7cIOL73HHdXiRcKk8Ywwqtx2wrIy23EcTn4aZ2fLJNBB8d0tQENPCmw==}
     cpu: [riscv64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-s390x-gnu@4.34.8':
     resolution: {integrity: sha512-DdePVk1NDEuc3fOe3dPPTb+rjMtuFw89gw6gVWxQFAuEqqSdDKnrwzZHrUYdac7A7dXl9Q2Vflxpme15gUWQFA==}
     cpu: [s390x]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-x64-gnu@4.34.8':
     resolution: {integrity: sha512-8y7ED8gjxITUltTUEJLQdgpbPh1sUQ0kMTmufRF/Ns5tI9TNMNlhWtmPKKHCU0SilX+3MJkZ0zERYYGIVBYHIA==}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-x64-musl@4.34.8':
     resolution: {integrity: sha512-SCXcP0ZpGFIe7Ge+McxY5zKxiEI5ra+GT3QRxL0pMMtxPfpyLAKleZODi1zdRHkz5/BhueUrYtYVgubqe9JBNQ==}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-win32-arm64-msvc@4.34.8':
     resolution: {integrity: sha512-YHYsgzZgFJzTRbth4h7Or0m5O74Yda+hLin0irAIobkLQFRQd1qWmnoVfwmKm9TXIZVAD0nZ+GEb2ICicLyCnQ==}
@@ -399,24 +412,28 @@ packages:
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@tailwindcss/oxide-linux-arm64-musl@4.0.8':
     resolution: {integrity: sha512-5tz2IL7LN58ssGEq7h/staD7pu/izF/KeMWdlJ86WDe2Ah46LF3ET6ZGKTr5eZMrnEA0M9cVFuSPprKRHNgjeg==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@tailwindcss/oxide-linux-x64-gnu@4.0.8':
     resolution: {integrity: sha512-KSzMkhyrxAQyY2o194NKVKU9j/c+NFSoMvnHWFaNHKi3P1lb+Vq1UC19tLHrmxSkKapcMMu69D7+G1+FVGNDXQ==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@tailwindcss/oxide-linux-x64-musl@4.0.8':
     resolution: {integrity: sha512-yFYKG5UtHTRimjtqxUWXBgI4Tc6NJe3USjRIVdlTczpLRxq/SFwgzGl5JbatCxgSRDPBFwRrNPxq+ukfQFGdrw==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@tailwindcss/oxide-win32-arm64-msvc@4.0.8':
     resolution: {integrity: sha512-tndGujmCSba85cRCnQzXgpA2jx5gXimyspsUYae5jlPyLRG0RjXbDshFKOheVXU4TLflo7FSG8EHCBJ0EHTKdQ==}
@@ -465,24 +482,28 @@ packages:
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@tauri-apps/cli-linux-arm64-musl@2.2.7':
     resolution: {integrity: sha512-+8HZ+txff/Y3YjAh80XcLXcX8kpGXVdr1P8AfjLHxHdS6QD4Md+acSxGTTNbplmHuBaSHJvuTvZf9tU1eDCTDg==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@tauri-apps/cli-linux-x64-gnu@2.2.7':
     resolution: {integrity: sha512-ahlSnuCnUntblp9dG7/w5ZWZOdzRFi3zl0oScgt7GF4KNAOEa7duADsxPA4/FT2hLRa0SvpqtD4IYFvCxoVv3Q==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@tauri-apps/cli-linux-x64-musl@2.2.7':
     resolution: {integrity: sha512-+qKAWnJRSX+pjjRbKAQgTdFY8ecdcu8UdJ69i7wn3ZcRn2nMMzOO2LOMOTQV42B7/Q64D1pIpmZj9yblTMvadA==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@tauri-apps/cli-win32-arm64-msvc@2.2.7':
     resolution: {integrity: sha512-aa86nRnrwT04u9D9fhf5JVssuAZlUCCc8AjqQjqODQjMd4BMA2+d4K9qBMpEG/1kVh95vZaNsLogjEaqSTTw4A==}
@@ -582,6 +603,11 @@ packages:
   '@vueuse/shared@9.13.0':
     resolution: {integrity: sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==}
 
+  acorn@8.14.0:
+    resolution: {integrity: sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==}
+    engines: {node: '>=0.4.0'}
+    hasBin: true
+
   async-validator@4.2.5:
     resolution: {integrity: sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==}
 
@@ -622,6 +648,9 @@ packages:
     resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
     engines: {node: '>=0.12'}
 
+  es-module-lexer@1.6.0:
+    resolution: {integrity: sha512-qqnD1yMU6tk/jnaMosogGySTZP8YtUgAffA9nMN+E/rjxcfRQ6IEk7IiozUjgxKoFHBGjTLnrHB/YC45r/59EQ==}
+
   esbuild@0.24.2:
     resolution: {integrity: sha512-+9egpBW8I3CD5XPe0n6BfT5fxLzxrlDzqydF3aviG+9ni1lDC/OvMHcxqEFV0+LANZG5R1bFMWfUrjVsdwxJvA==}
     engines: {node: '>=18'}
@@ -688,24 +717,28 @@ packages:
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   lightningcss-linux-arm64-musl@1.29.1:
     resolution: {integrity: sha512-UKMFrG4rL/uHNgelBsDwJcBqVpzNJbzsKkbI3Ja5fg00sgQnHw/VrzUTEc4jhZ+AN2BvQYz/tkHu4vt1kLuJyw==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   lightningcss-linux-x64-gnu@1.29.1:
     resolution: {integrity: sha512-u1S+xdODy/eEtjADqirA774y3jLcm8RPtYztwReEXoZKdzgsHYPl0s5V52Tst+GKzqjebkULT86XMSxejzfISw==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   lightningcss-linux-x64-musl@1.29.1:
     resolution: {integrity: sha512-L0Tx0DtaNUTzXv0lbGCLB/c/qEADanHbu4QdcNOXLIe1i8i22rZRpbT3gpWYsCh9aSL9zFujY/WmEXIatWvXbw==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   lightningcss-win32-arm64-msvc@1.29.1:
     resolution: {integrity: sha512-QoOVnkIEFfbW4xPi+dpdft/zAKmgLgsRHfJalEPYuJDOWf7cLQzYg0DEh8/sn737FaeMJxHZRc1oBreiwZCjog==}
@@ -753,12 +786,19 @@ packages:
   normalize-wheel-es@1.2.0:
     resolution: {integrity: sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw==}
 
+  pathe@2.0.3:
+    resolution: {integrity: sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==}
+
   perfect-debounce@1.0.0:
     resolution: {integrity: sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==}
 
   picocolors@1.1.1:
     resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
 
+  picomatch@4.0.2:
+    resolution: {integrity: sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==}
+    engines: {node: '>=12'}
+
   pinia@3.0.1:
     resolution: {integrity: sha512-WXglsDzztOTH6IfcJ99ltYZin2mY8XZCXujkYWVIJlBjqsP6ST7zw+Aarh63E1cDVYeyUcPCxPHzJpEOmzB6Wg==}
     peerDependencies:
@@ -947,6 +987,18 @@ packages:
     engines: {node: '>=14.17'}
     hasBin: true
 
+  unplugin-element-plus@0.9.1:
+    resolution: {integrity: sha512-TtQ7bj82gM1Hw5A+LmG/oFrvYb6L0BqhxVUl7djMiicvk7LjdUiP70QhTKaBY/tiFR9NJCIPYSmw4naCuhK7Hg==}
+    engines: {node: '>=18.12.0'}
+
+  unplugin-utils@0.2.4:
+    resolution: {integrity: sha512-8U/MtpkPkkk3Atewj1+RcKIjb5WBimZ/WSLhhR3w6SsIj8XJuKTacSP8g+2JhfSGw0Cb125Y+2zA/IzJZDVbhA==}
+    engines: {node: '>=18.12.0'}
+
+  unplugin@2.2.0:
+    resolution: {integrity: sha512-m1ekpSwuOT5hxkJeZGRxO7gXbXT3gF26NjQ7GdVHoLoF8/nopLcd/QfPigpCy7i51oFHiRJg/CyHhj4vs2+KGw==}
+    engines: {node: '>=18.12.0'}
+
   varint@6.0.0:
     resolution: {integrity: sha512-cXEIW6cfr15lFv563k4GuVuW/fiwjknytD37jIOLSdSWuOI6WnO/oKwmP2FQTU2l01LP8/M5TSAJpzUaGe3uWg==}
 
@@ -1020,6 +1072,9 @@ packages:
       typescript:
         optional: true
 
+  webpack-virtual-modules@0.6.2:
+    resolution: {integrity: sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==}
+
 snapshots:
 
   '@babel/helper-string-parser@7.25.9': {}
@@ -1424,6 +1479,8 @@ snapshots:
       - '@vue/composition-api'
       - vue
 
+  acorn@8.14.0: {}
+
   async-validator@4.2.5: {}
 
   birpc@0.2.19: {}
@@ -1470,6 +1527,8 @@ snapshots:
 
   entities@4.5.0: {}
 
+  es-module-lexer@1.6.0: {}
+
   esbuild@0.24.2:
     optionalDependencies:
       '@esbuild/aix-ppc64': 0.24.2
@@ -1584,10 +1643,14 @@ snapshots:
 
   normalize-wheel-es@1.2.0: {}
 
+  pathe@2.0.3: {}
+
   perfect-debounce@1.0.0: {}
 
   picocolors@1.1.1: {}
 
+  picomatch@4.0.2: {}
+
   pinia@3.0.1(typescript@5.7.3)(vue@3.5.13(typescript@5.7.3)):
     dependencies:
       '@vue/devtools-api': 7.7.2
@@ -1750,6 +1813,23 @@ snapshots:
 
   typescript@5.7.3: {}
 
+  unplugin-element-plus@0.9.1:
+    dependencies:
+      es-module-lexer: 1.6.0
+      magic-string: 0.30.17
+      unplugin: 2.2.0
+      unplugin-utils: 0.2.4
+
+  unplugin-utils@0.2.4:
+    dependencies:
+      pathe: 2.0.3
+      picomatch: 4.0.2
+
+  unplugin@2.2.0:
+    dependencies:
+      acorn: 8.14.0
+      webpack-virtual-modules: 0.6.2
+
   varint@6.0.0: {}
 
   vite@6.1.1(jiti@2.4.2)(lightningcss@1.29.1)(sass-embedded@1.85.0):
@@ -1788,3 +1868,5 @@ snapshots:
       '@vue/shared': 3.5.13
     optionalDependencies:
       typescript: 5.7.3
+
+  webpack-virtual-modules@0.6.2: {}

src/element.scss

@@ -0,0 +1,21 @@
+@forward 'element-plus/theme-chalk/src/common/var.scss' with (
+  $colors: (
+    'primary': (
+      'base': rgb(246, 127, 32),
+    ),
+    'info': (
+      'base': #999999,
+    ),
+  )
+);
+
+// :root {
+//   --el-color-primary: rgba(246, 127, 32, 1);
+//   --el-color-primary-light-3: rgba(246, 127, 32, 0.8);
+//   --el-color-primary-dark-2: rgba(246, 127, 32, 0.95);
+//   // --el-color-primary-light-5: rgba(246, 127, 32, 1);
+//   // --el-color-primary-light-9: rgba(246, 127, 32, 0);
+// }
+// 如果只是按需导入，则可以忽略以下内容。
+// 如果你想导入所有样式:
+@use 'element-plus/theme-chalk/src/index.scss' as *;

src/main.ts

@@ -7,6 +7,7 @@ import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 import { createPinia } from 'pinia'
 import i18n from './i18n'
 import './styles.css'
+import './element.scss'
 
 const pinia = createPinia()
 const app = createApp(App).use(pinia).use(ElementPlus).use(i18n).use(router).mount('#app')

src/styles.css

@@ -1 +1,9 @@
-@import "tailwindcss";
+
+@import "tailwindcss";
+@forward 'element-plus/theme-chalk/src/common/var.scss' with (
+  $colors: (
+    'primary': (
+      'base': green,
+    ),
+  ),
+)

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

@@ -0,0 +1,22 @@
+<template>
+  <el-drawer v-model="show" :show-close="false" direction="rtl" size="700px">
+    <template #header>
+      <div>
+        <h1 class="">Search for products</h1>
+        <el-divider />
+      </div>
+    </template>
+    <template #footer>
+      <div style="flex: auto">
+        <el-button type="primary" @click="cancelClick" plain>close window</el-button>
+        <el-button type="primary" @click="confirmClick">Join the checkout counter</el-button>
+      </div>
+    </template>
+  </el-drawer>
+</template>
+<script setup>
+const show = defineModel('show')
+const showInput = defineModel('showInput')
+</script>
+
+<style lang="scss" scoped></style>

src/views/menu/index.vue

@@ -1,52 +1,53 @@
 <template>
-    <div class="w-full h-full overflow-hidden flex justify-between">
-        <div class="shrink-0 min-w-[600px] flex-1">
-            <div class="w-full h-full overflow-y-auto relative hide-bar">
-                <div class="sticky top-0 w-full bg-[#fff] p-[10px]">
-                    <div class="h-[60px] flex justify-between items-center">
-                        <div
-                            class="flex-1 h-full pr-[10px] flex items-center justify-between cursor-pointer overflow-hidden">
-                            <div @click="handleLeftClick"
-                                class="text-[#999] shrink-0 flex items-center justify-center h-[34px] w-[44px] border border-[#e6e6e6] rounded-[12px]">
-                                <el-icon>
-                                    <ArrowLeft />
-                                </el-icon>
-                            </div>
-                            <div ref="scrollRef" class="overflow-x-auto bg-[#fff]" style="width:calc(100% - 108px)">
-                                <div ref="" class="flex flex-nowrap items-center ">
-                                    <div @click="catgroyClick" v-for="item in products"
-                                        class="flex items-center shrink-0 mr-[20px] h-[34px] ">{{ item.name }}
-                                    </div>
-                                </div>
-                            </div>
-                            <div @click="handleRightClick"
-                                class="text-[#999] shrink-0 flex items-center justify-center h-[34px] w-[44px] border border-[#e6e6e6] rounded-[12px]">
-                                <el-icon>
-                                    <ArrowRight />
-                                </el-icon>
-                            </div>
-                        </div>
-
-                    </div>
-                    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
-                            <div v-for="product in products" :key="product.id"
-                                class="bg-white rounded-xl shadow-sm  transition-transform ">
-                                <div class="relative flex items-center bg-[#fef8f4] justify-center mb-4 rounded overflow-hidden">
-                                    <img :src="product.image" :alt="product.name" class="w-25 h-25 my-1 object-cover rounded-full" />
-                                </div>
-                                <div class="text-left px-2">
-                                    <h3 class="text-gray-800 font-medium text-sm mb-2 text-container w-full text-nowrap line-clamp-2  sm:line-clamp-1 md:line-clamp-2 lg:line-clamp-3">{{ product.name }}</h3>
-                                    <p class="text-orange-500 font-semibold">${{ product.price.toFixed(2) }}</p>
-                                </div>
-                            </div>
-                        </div>
+  <div class="w-full h-full overflow-hidden flex justify-between">
+    <div class="shrink-0 min-w-[600px] flex-1">
+      <div class="w-full h-full overflow-y-auto relative hide-bar">
+        <div class="sticky top-0 w-full bg-[#fff] p-[10px]">
+          <div class="h-[60px] flex justify-between items-center">
+            <div
+                class="flex-1 h-full pr-[10px] flex items-center justify-between cursor-pointer overflow-hidden">
+              <div @click="handleLeftClick"
+                   class="text-[#999] shrink-0 flex items-center justify-center h-[34px] w-[44px] border border-[#e6e6e6] rounded-[12px]">
+                <el-icon>
+                  <ArrowLeft />
+                </el-icon>
+              </div>
+              <div ref="scrollRef" class="overflow-x-auto bg-[#fff]" style="width:calc(100% - 108px)">
+                <div ref="" class="flex flex-nowrap items-center ">
+                  <div @click="catgroyClick" v-for="item in products"
+                       class="flex items-center shrink-0 mr-[20px] h-[34px] ">{{ item.name }}
+                  </div>
                 </div>
+              </div>
+              <div @click="handleRightClick"
+                   class="text-[#999] shrink-0 flex items-center justify-center h-[34px] w-[44px] border border-[#e6e6e6] rounded-[12px]">
+                <el-icon>
+                  <ArrowRight />
+                </el-icon>
+              </div>
             </div>
+
+          </div>
+          <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
+            <div v-for="product in products" :key="product.id"
+                 class="bg-white rounded-xl shadow-sm  transition-transform ">
+              <div class="relative flex items-center bg-[#fef8f4] justify-center mb-4 rounded overflow-hidden">
+                <img :src="product.image" :alt="product.name" class="w-25 h-25 my-1 object-cover rounded-full" />
+              </div>
+              <div class="text-left px-2">
+                <h3 class="text-gray-800 font-medium text-sm mb-2 text-container w-full text-nowrap line-clamp-2  sm:line-clamp-1 md:line-clamp-2 lg:line-clamp-3">{{ product.name }}</h3>
+                <p class="text-orange-500 font-semibold">${{ product.price.toFixed(2) }}</p>
+              </div>
+            </div>
+          </div>
         </div>
-        <div class="w-[500px] h-full overflow-hidden border-l border-gray-200">
-            <rightOrder></rightOrder>
-        </div>
+      </div>
+    </div>
+    <div class="w-[500px] h-full overflow-hidden border-l border-gray-200">
+      <rightOrder></rightOrder>
     </div>
+    <OrderDrawer v-model:show="show" />
+  </div>
 </template>
 <script setup>
 import { ref, onMounted } from 'vue'
@@ -55,6 +56,8 @@ import { storeToRefs } from 'pinia'
 import { useI18n } from 'vue-i18n'
 import { ArrowRight, ArrowLeft } from '@element-plus/icons-vue'
 import rightOrder from './components/rightOrder/rightOrder.vue'
+import OrderDrawer from './components/order-drawer.vue'
+
 const { t } = useI18n()
 const store = useStore()
 const { count } = storeToRefs(store)
@@ -73,9 +76,14 @@ const calculateItemWidth = () => {
     }
   })
 }
-onMounted(() => {
+function handleRightClick() {
+  scrollRef.value.scrollLeft += 100
+}
+
+const show = ref(false)
+
+onMounted(() => {})
 
-})
 const products = ref([
     {
         id: 1,
@@ -156,7 +164,7 @@ const scrollToPosition = () => {
 </script>
 <style scoped>
 ::-webkit-scrollbar-thumb {
-    background-color: red;
+  background-color: red;
 }
 /* 隐藏整个滚动条 */
 ::-webkit-scrollbar {

vite.config.ts

@@ -3,6 +3,8 @@ import vue from '@vitejs/plugin-vue'
 import tailwindcss from '@tailwindcss/vite'
 import path from 'node:path'
 
+import ElementPlus from 'unplugin-element-plus/vite'
+// @ts-expect-error process is a nodejs global
 const host = process.env.TAURI_DEV_HOST
 
 // https://vitejs.dev/config/
@@ -12,7 +14,13 @@ export default defineConfig(async () => ({
       '@': path.join(process.cwd(), './src'),
     },
   },
-  plugins: [vue(), tailwindcss()],
+  plugins: [
+    vue(),
+    tailwindcss(),
+    ElementPlus({
+      useSource: true, // 可选，是否使用源码
+    }),
+  ],
 
   // Vite options tailored for Tauri development and only applied in `tauri dev` or `tauri build`
   //
@@ -42,5 +50,12 @@ export default defineConfig(async () => ({
     //     ],
     //   },
     // },
+    // css: {
+    //   preprocessorOptions: {
+    //     scss: {
+    //       additionalData: `@use "~/styles/element/index.scss" as *;`,
+    //     },
+    //   },
+    // },
   },
 }))