fix:1.处理代码冲突。

src/views/menu/index.vue

@@ -5,37 +5,63 @@
         <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]">
+              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
+                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]">
+              <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
+              v-for="product in products"
+              :key="product.id"
+              @click="show = true"
+              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>
+                <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>
@@ -50,7 +76,7 @@
   </div>
 </template>
 <script setup>
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, nextTick } from 'vue'
 import { useStore } from '../../stores'
 import { storeToRefs } from 'pinia'
 import { useI18n } from 'vue-i18n'
@@ -76,64 +102,64 @@ const calculateItemWidth = () => {
     }
   })
 }
-function handleRightClick() {
-  scrollRef.value.scrollLeft += 100
-}
+// function handleRightClick() {
+//   scrollRef.value.scrollLeft += 100
+// }
 
 const show = ref(false)
 
 onMounted(() => {})
 
 const products = ref([
-    {
-        id: 1,
-        name: 'Spicy Seasoned Seafood Noodles',
-        price: 2.29,
-        image: 'https://ai-public.mastergo.com/ai/img_res/e53b11a05b7778db2bc50338e47047c4.jpg'
-    },
-    {
-        id: 2,
-        name: 'Grilled Salmon Bowl',
-        price: 3.49,
-        image: 'https://ai-public.mastergo.com/ai/img_res/07e4619fc2f26fe9f6a0afaebc47dceb.jpg'
-    },
-    {
-        id: 3,
-        name: 'Teriyaki Chicken Rice',
-        price: 2.99,
-        image: 'https://ai-public.mastergo.com/ai/img_res/1709d2e0e3495f8089da24be4ad2d26a.jpg'
-    },
-    {
-        id: 4,
-        name: 'Vegetable Stir Fry Noodles',
-        price: 2.49,
-        image: 'https://ai-public.mastergo.com/ai/img_res/043e50f136a6ec7f5f37eb448cf298c7.jpg'
-    },
-    {
-        id: 5,
-        name: 'Spicy Tuna Poke Bowl',
-        price: 3.99,
-        image: 'https://ai-public.mastergo.com/ai/img_res/7f8ad399ad651c8de6896bc611be1936.jpg'
-    },
-    {
-        id: 6,
-        name: 'Beef Bulgogi Bowl',
-        price: 3.79,
-        image: 'https://ai-public.mastergo.com/ai/img_res/49b0d0fbf6654dcef422a7e3334c8b6a.jpg'
-    },
-    {
-        id: 7,
-        name: 'Shrimp Pad Thai',
-        price: 3.29,
-        image: 'https://ai-public.mastergo.com/ai/img_res/ca1fef96dffcfa401768314721606c8f.jpg'
-    },
-    {
-        id: 8,
-        name: 'Miso Ramen Bowl',
-        price: 2.89,
-        image: 'https://ai-public.mastergo.com/ai/img_res/210debe79bb22fec1944cab575f2759f.jpg'
-    }
-]);
+  {
+    id: 1,
+    name: 'Spicy Seasoned Seafood Noodles',
+    price: 2.29,
+    image: 'https://ai-public.mastergo.com/ai/img_res/e53b11a05b7778db2bc50338e47047c4.jpg',
+  },
+  {
+    id: 2,
+    name: 'Grilled Salmon Bowl',
+    price: 3.49,
+    image: 'https://ai-public.mastergo.com/ai/img_res/07e4619fc2f26fe9f6a0afaebc47dceb.jpg',
+  },
+  {
+    id: 3,
+    name: 'Teriyaki Chicken Rice',
+    price: 2.99,
+    image: 'https://ai-public.mastergo.com/ai/img_res/1709d2e0e3495f8089da24be4ad2d26a.jpg',
+  },
+  {
+    id: 4,
+    name: 'Vegetable Stir Fry Noodles',
+    price: 2.49,
+    image: 'https://ai-public.mastergo.com/ai/img_res/043e50f136a6ec7f5f37eb448cf298c7.jpg',
+  },
+  {
+    id: 5,
+    name: 'Spicy Tuna Poke Bowl',
+    price: 3.99,
+    image: 'https://ai-public.mastergo.com/ai/img_res/7f8ad399ad651c8de6896bc611be1936.jpg',
+  },
+  {
+    id: 6,
+    name: 'Beef Bulgogi Bowl',
+    price: 3.79,
+    image: 'https://ai-public.mastergo.com/ai/img_res/49b0d0fbf6654dcef422a7e3334c8b6a.jpg',
+  },
+  {
+    id: 7,
+    name: 'Shrimp Pad Thai',
+    price: 3.29,
+    image: 'https://ai-public.mastergo.com/ai/img_res/ca1fef96dffcfa401768314721606c8f.jpg',
+  },
+  {
+    id: 8,
+    name: 'Miso Ramen Bowl',
+    price: 2.89,
+    image: 'https://ai-public.mastergo.com/ai/img_res/210debe79bb22fec1944cab575f2759f.jpg',
+  },
+])
 // 生命周期钩子
 onMounted(() => {
   calculateItemWidth()
@@ -158,7 +184,7 @@ const handleRightClick = () => {
 const scrollToPosition = () => {
   scrollRef.value?.scrollTo({
     left: itemWidth.value * currentIndex.value,
-    behavior: 'smooth'
+    behavior: 'smooth',
   })
 }
 </script>
@@ -168,16 +194,16 @@ const scrollToPosition = () => {
 }
 /* 隐藏整个滚动条 */
 ::-webkit-scrollbar {
-    display: none;
+  display: none;
 }
 
 /* 或者仅隐藏滚动条的轨道，保留滑块可操作性，但视觉上不显示滚动条 */
 ::-webkit-scrollbar-track {
-    display: none;
+  display: none;
 }
 .text-container {
-      width: 100%;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-</style>
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+</style>

vite.config.ts

@@ -1,16 +1,18 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import tailwindcss from '@tailwindcss/vite'
+ // @ts-expect-error process is a nodejs global
 import path from 'node:path'
 
 import ElementPlus from 'unplugin-element-plus/vite'
-// @ts-expect-error process is a nodejs global
+ // @ts-expect-error process is a nodejs global
 const host = process.env.TAURI_DEV_HOST
 
 // https://vitejs.dev/config/
 export default defineConfig(async () => ({
   resolve: {
     alias: {
+      // @ts-expect-error process is a nodejs global
       '@': path.join(process.cwd(), './src'),
     },
   },