我的订单功能

src/pages/me/index.vue

@@ -1,53 +1,77 @@
 <script setup lang="ts">
-import { useUserStore } from "@/pinia/stores/user"
-import { useDark } from "@@/composables/useDark"
-import faviconUrl from "/favicon.png?url"
-
+import { useRouter } from 'vue-router'
 const router = useRouter()
-
-const userStore = useUserStore()
-
-const { isDark, changeDark } = useDark()
-
-function onClick() {
-  showToast("更多功能，敬请期待 ~")
-}
-
-function onLogout() {
-  userStore.resetToken()
-  router.push("/login")
-}
 </script>
 
 <template>
   <div un-py-16px>
-    <van-cell-group un-mb-8px>
-      <van-cell size="large" is-link center @click="onClick">
+    <!-- 用户信息区域 -->
+    <van-cell-group class="user-card">
+      <van-cell :border="false">
         <template #title>
-          <div un-flex-y-center un-gap-16px>
-            <van-image :src="faviconUrl" un-w-44px un-h-44px />
-            <div un-flex un-flex-col>
-              <span un-fw-600>{{ userStore.username }}</span>
-              <span un-text-14px un-color-hex-969799>个人资料</span>
+          <div class="flex items-center p-4">
+            <van-image 
+              round
+              width="80"
+              height="80"
+              src="/img/1.jpg"
+              class="mr-4"
+            />
+            <div>
+              <div class="text-lg font-bold mb-2">{{ '' }}</div>
+              <van-tag type="primary" class="mr-2">{{ 20 }}岁</van-tag>
+              <van-tag type="success">{{ '男' }}</van-tag>
             </div>
           </div>
         </template>
       </van-cell>
     </van-cell-group>
-    <van-cell-group un-mb-8px>
-      <van-cell title="🌗 Dark Mode 黑暗模式" center>
-        <template #right-icon>
-          <van-switch :model-value="isDark" size="min(5.333vw, 40px)" @click="changeDark" />
-        </template>
-      </van-cell>
-      <van-cell title="📚 Documentation 文档教程" is-link url="https://juejin.cn/column/7472609448201666599" />
-      <van-cell title="📦️ GitHub 代码仓库" is-link url="https://github.com/un-pany/mobvue" />
-      <van-cell title="☕ Donate 捐赠" is-link url="https://github.com/un-pany/mobvue/issues/1" />
-      <van-cell title="💰 Pay 付费服务" is-link url="https://github.com/un-pany/mobvue/issues/2" />
-      <van-cell title="💬 Group 交流群" is-link url="https://github.com/un-pany/mobvue/issues/3" />
+    
+    <!-- 功能按钮区域 -->
+    <van-grid :column-num="4" :gutter="12" class="func-buttons un-mt-20px">
+      <van-grid-item
+        v-for="(item, index) in [
+          { icon: 'idcard', text: '身份证', color: 'linear-gradient(to right, #ff6034, #ee0a24)' },
+          { icon: 'phone-o', text: '手机号', color: 'linear-gradient(to right, #3f87ff, #1989fa)' },
+          { icon: 'wechat', text: '微信', color: 'linear-gradient(to right, #07c160, #4b0)' },
+          { icon: 'card', text: '银行卡', color: 'linear-gradient(to right, #ffd700, #ffb300)' }
+        ]"
+        :key="index"
+      >
+        <van-icon 
+          :name="item.icon" 
+          size="28px" 
+          :style="{ background: item.color }"
+          class="un-p-8px un-rounded-full un-text-white"
+        />
+        <div class="un-mt-8px un-text-12px un-color-hex-666">{{ item.text }}</div>
+      </van-grid-item>
+    </van-grid>
+    
+    <!-- 余额区域 -->
+    <van-cell 
+      title="账户余额"
+      :value="`¥${0}`"
+      class="un-mt-16px! un-rounded-8px!"
+      title-class="un-text-14px! un-color-hex-333!"
+      value-class="un-text-16px! un-fw-600! un-color-primary!"
+    >
+      <template #icon>
+        <van-icon 
+          name="gold-coin" 
+          size="20px" 
+          class="un-mr-8px un-color-#ffb300!"
+        />
+      </template>
+    </van-cell>
+    
+    <!-- 个人中心按钮 -->
+    <van-cell-group>
+      <van-cell title="订单列表" is-link @click="router.push('/order-list')" />
     </van-cell-group>
-    <van-button block @click="onLogout" un-b-0px un-rounded-0px>
-      退出登录
-    </van-button>
   </div>
 </template>
+
+<style scoped>
+/* 移除了已迁移到组件的样式 */
+</style>

src/pages/order/Success.vue

@@ -13,19 +13,23 @@ const orderStore = useOrderStore()
 const wxStore = useWxStoreOutside()
 const orderId = ref(Number(route.query.orderId))
 const currentOrder = ref<Order>()
-const isButtonDisabled = ref(false)
+const isButtonDisabled = ref<Record<number, boolean>>({})
 
 async function handleOpenCabinet(orderId: number, orderGoodsId: number) {
-  isButtonDisabled.value = true
+  isButtonDisabled.value[orderGoodsId] = true
   try {
-    await openCabinetApi(orderId, orderGoodsId)
+    const result = await openCabinetApi(orderId, orderGoodsId)
+    if (result.code !== 0) {
+      showFailToast(result.message)
+      return
+    }
     showSuccessToast('柜口已成功开启')
   } catch (error) {
     showFailToast('开启失败，请稍后重试')
   } finally {
-    setTimeout(() => {
-      isButtonDisabled.value = false
-    }, 5000)
+    setTimeout((currentId) => {
+      delete isButtonDisabled.value[currentId]
+    }, 5000, orderGoodsId)
   }
 }
 
@@ -67,7 +71,7 @@ watch(() => orderId.value, async (newVal) => {
               {{ item.goodsInfo.goodsName }}
             </div>
             <div class="product-price">
-              ¥{{ (item.goodsInfo.price / 100).toFixed(2) }}
+              ¥{{ item.goodsInfo.price.toFixed(2) }}
             </div>
             <div class="action-row">
               <van-button
@@ -75,9 +79,9 @@ watch(() => orderId.value, async (newVal) => {
                 size="small"
                 class="open-btn add-cart-btn"
                 @click.stop="handleOpenCabinet(currentOrder.orderId, item.orderGoods.orderGoodsId)"
-                :disabled="isButtonDisabled"
+                :disabled="isButtonDisabled[item.orderGoods.orderGoodsId]"
               >
-                {{ isButtonDisabled ? '处理中...' : '打开柜口' }}
+                {{ isButtonDisabled[item.orderGoods.orderGoodsId] ? '处理中...' : '打开柜口' }}
               </van-button>
             </div>
           </div>

src/pages/order/components/OrderList.vue

@@ -0,0 +1,158 @@
+<script setup lang="ts">
+import { onMounted } from 'vue'
+import { useOrderStore } from '@/pinia/stores/order'
+import { useWxStoreOutside } from '@/pinia/stores/wx'
+
+const router = useRouter()
+const orderStore = useOrderStore()
+const wxStore = useWxStoreOutside()
+
+onMounted(() => {
+  orderStore.getOrders(wxStore.openid)
+})
+
+onBeforeRouteUpdate(() => {
+  orderStore.getOrders(wxStore.openid)
+})
+
+const statusMap: Record<number, string> = {
+  1: '待付款',
+  2: '已付款',
+  3: '已发货',
+  4: '已完成',
+  5: '已取消'
+}
+
+const getStatusText = (status: number) => {
+  return statusMap[status] || '未知状态'
+}
+</script>
+
+<template>
+  <div class="order-list">
+    <h2>我的订单</h2>
+    
+    <div v-if="orderStore.orders.length === 0" class="empty">
+      暂无订单
+    </div>
+    
+    <div v-else class="orders">
+      <div v-for="order in orderStore.orders" :key="order.orderId" class="order-item">
+        <div class="order-header">
+          <span>订单号: {{ order.orderId }}</span>
+          <van-button
+            type="primary"
+            size="small"
+            @click="router.push('/order/' + order.orderId)"
+            class="detail-btn"
+          >
+            订单详情
+          </van-button>
+        </div>
+        
+        <van-cell-group class="goods-list">
+          <van-cell
+            v-for="(goods, index) in order.goodsList.slice(0,1)"
+            :key="goods.orderGoods.orderGoodsId"
+            class="goods-item"
+          >
+            <template #icon>
+              <van-image 
+                :src="goods.goodsInfo.coverImg"
+                width="80"
+                height="80"
+                class="product-image"
+              />
+            </template>
+            <div class="product-info">
+              <div class="product-name van-ellipsis">
+                {{ goods.goodsInfo.goodsName }}
+              </div>
+              <div class="product-meta">
+                <span class="status">状态: {{ getStatusText(order.status) }}</span>
+                <span class="total">总价: ¥{{ order.totalAmount }}</span>
+              </div>
+            </div>
+          </van-cell>
+          <van-cell v-if="order.goodsList.length > 1" class="more-goods">
+            <div class="van-ellipsis">等{{ order.goodsList.length }}个商品</div>
+          </van-cell>
+        </van-cell-group>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.order-list {
+  padding: 20px;
+}
+
+.empty {
+  text-align: center;
+  padding: 40px 0;
+  color: #999;
+}
+
+.order-item {
+  margin-bottom: 20px;
+  border: 1px solid #eee;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.order-header {
+  display: flex;
+  justify-content: space-between;
+  padding: 10px 15px;
+  background-color: #f5f5f5;
+  border-bottom: 1px solid #eee;
+}
+
+.goods-list {
+  padding: 10px;
+}
+
+.goods-item {
+  display: flex;
+  padding: 10px 0;
+  border-bottom: 1px solid #f5f5f5;
+}
+
+goods-item:last-child {
+  border-bottom: none;
+}
+
+goods-item img {
+  width: 80px;
+  height: 80px;
+  object-fit: cover;
+  margin-right: 15px;
+}
+
+goods-info {
+  flex: 1;
+}
+.detail-btn {
+  margin-left: 10px;
+  padding: 0 12px;
+  height: 28px;
+  line-height: 28px;
+}
+
+.product-meta {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 8px;
+  font-size: 12px;
+  color: #666;
+}
+
+.status {
+  color: #1989fa;
+}
+
+.total {
+  font-weight: bold;
+}
+</style>

src/pages/order/index.vue

@@ -0,0 +1,129 @@
+<script setup lang="ts">
+import { onMounted } from 'vue'
+import { useOrderStore } from '@/pinia/stores/order'
+import { useRoute } from 'vue-router'
+
+const orderStore = useOrderStore()
+const route = useRoute()
+
+const statusMap: Record<number, string> = {
+  1: '待付款',
+  2: '已付款',
+  3: '已发货',
+  4: '已完成',
+  5: '已取消'
+}
+
+const getStatusText = (status: number) => {
+  return statusMap[status] || '未知状态'
+}
+
+const orderId = ref(parseInt(String(route.params.id)))
+
+// 监听路由参数变化
+watch(() => route.params.id, (newId) => {
+  orderId.value = parseInt(String(newId))
+})
+
+const order = computed(() => {
+  return orderStore.orders.find(o => o.orderId === orderId.value)
+})
+
+onMounted(() => {
+  if (!order.value) {
+    // Handle case when order is not found
+  }
+})
+</script>
+
+<template>
+  <div class="order-detail" v-if="order">
+    <h2>订单详情</h2>
+    
+    <div class="order-info">
+      <p>订单号: {{ order.orderId }}</p>
+      <p>状态: {{ getStatusText(order.status) }}</p>
+      <p>总价: ¥{{ order.totalAmount }}</p>
+      <p>支付时间: {{ order.payTime }}</p>
+    </div>
+    
+    <van-cell-group class="goods-list">
+      <van-cell
+        v-for="(item, index) in order.goodsList"
+        :key="index"
+        class="goods-item"
+      >
+        <template #icon>
+          <van-image 
+            :src="item.goodsInfo.coverImg"
+            width="80"
+            height="80"
+            class="product-image"
+          />
+        </template>
+        <div class="product-info">
+          <div class="product-name van-ellipsis">
+            {{ item.goodsInfo.goodsName }}
+          </div>
+          <div class="product-price">
+            ¥{{ item.goodsInfo.price.toFixed(2) }}
+          </div>
+          <div class="action-row">
+            <p>数量: {{ item.orderGoods.quantity }}</p>
+            <p>小计: ¥{{ (item.orderGoods.price * item.orderGoods.quantity).toFixed(2) }}</p>
+          </div>
+        </div>
+      </van-cell>
+    </van-cell-group>
+  </div>
+  
+  <div v-else class="not-found">
+    订单不存在或已失效
+  </div>
+</template>
+
+<style scoped>
+.order-detail {
+  padding: 20px;
+}
+
+.order-info {
+  padding: 15px;
+  margin-bottom: 20px;
+  background: #f5f5f5;
+  border-radius: 8px;
+}
+
+.goods-list {
+  padding: 15px;
+  background: #fff;
+  border-radius: 8px;
+}
+
+.goods-item {
+  display: flex;
+  padding: 15px 0;
+  border-bottom: 1px solid #f5f5f5;
+}
+
+goods-item:last-child {
+  border-bottom: none;
+}
+
+goods-item img {
+  width: 100px;
+  height: 100px;
+  object-fit: cover;
+  margin-right: 15px;
+}
+
+goods-info {
+  flex: 1;
+}
+
+.not-found {
+  padding: 40px;
+  text-align: center;
+  color: #999;
+}
+</style>

src/pages/product/ProductList.vue

@@ -96,6 +96,10 @@ function getCartItemCount(productId: number) {
   return item ? item.quantity : 0
 }
 
+const currentProducts = computed(() => {
+  return categories.value.filter(c => c.label === labels.value[activeCategory.value].id)
+})
+
 // 组件挂载时添加滚动监听
 onMounted(() => {
   scrollListener.push(scrollContainer.value?.addEventListener("scroll", throttledScroll))
@@ -129,24 +133,14 @@ function handleCheckout() {
 
       <!-- 右侧商品列表 -->
       <div ref="scrollContainer" class="product-list">
-        <div
-          v-for="(category, index) in labels" :key="category.id"
-          :ref="el => categoryRefs[index] = el as HTMLElement" class="category-section"
-        >
+        <div :ref="el => categoryRefs[0] = el as HTMLElement" class="category-section">
           <h3 class="category-title">
-            {{ category.name }}
+            {{ labels[activeCategory].name }}
           </h3>
-          <van-cell
-            v-for="product in categories.filter(c => c.label === category.id)"
-            :key="product.id"
-            class="product-item"
-          >
+          <van-cell v-for="product in currentProducts" :key="product.id" class="product-item">
             <template #icon>
-              <van-image
-                :src="product.image" width="80" height="80"
-                @click.stop="showProductDetail(product.id)"
-                class="product-image"
-              >
+              <van-image :src="product.image" width="80" height="80" @click.stop="showProductDetail(product.id)"
+                class="product-image">
                 <div v-if="product.stock === 0" class="sold-out-overlay">
                   <span class="sold-out-text">已售罄</span>
                 </div>
@@ -170,21 +164,13 @@ function handleCheckout() {
                   还剩{{ product.stock }}份
                 </span>
                 <div class="cart-actions">
-                  <van-button
-                    v-if="getCartItemCount(product.id)"
-                    size="mini"
-                    icon="minus"
-                    @click.stop="handleRemoveFromCart(product)"
-                  />
+                  <van-button v-if="getCartItemCount(product.id)" size="mini" icon="minus"
+                    @click.stop="handleRemoveFromCart(product)" />
                   <span v-if="getCartItemCount(product.id)" class="cart-count">{{ getCartItemCount(product.id) }}</span>
-                  <van-button
-                    size="mini" type="primary" class="add-cart-btn" icon="plus"
-                    :disabled="product.stock === 0"
-                    @click.stop="handleAddToCart(product)"
-                    :style="{
+                  <van-button size="mini" type="primary" class="add-cart-btn" icon="plus"
+                    :disabled="product.stock === 0" @click.stop="handleAddToCart(product)" :style="{
                       opacity: product.stock === 0 ? 0.6 : 1,
-                    }"
-                  />
+                    }" />
                 </div>
               </div>
             </div>
@@ -194,50 +180,25 @@ function handleCheckout() {
       <!-- 底部购物车栏 -->
       <div v-if="cartItems.length" class="shopping-cart-bar">
         <div class="cart-info">
-          <van-badge
-            :content="totalQuantity"
-            @click.stop="showCartPopup = true"
-          >
+          <van-badge :content="totalQuantity" @click.stop="showCartPopup = true">
             <van-icon name="shopping-cart-o" size="24" />
           </van-badge>
           <div class="total-price">
             合计：¥{{ totalPrice.toFixed(2) }}
           </div>
         </div>
-        <van-button
-          type="primary"
-          size="small"
-          @click="handleCheckout"
-          class="checkout-btn"
-        >
+        <van-button type="primary" size="small" @click="handleCheckout" class="checkout-btn">
           去结算
         </van-button>
       </div>
     </div>
   </div>
-  <VanPopup
-    v-model:show="showDetailPopup"
-    position="bottom"
-    :style="{ height: '80%' }"
-    round
-  >
-    <Detail
-      class="detail-container"
-      @detail-close="showDetailPopup = false"
-      v-if="currentProduct"
-      :product="currentProduct"
-    />
+  <VanPopup v-model:show="showDetailPopup" position="bottom" :style="{ height: '80%' }" round>
+    <Detail class="detail-container" @detail-close="showDetailPopup = false" v-if="currentProduct"
+      :product="currentProduct" />
   </VanPopup>
-  <VanPopup
-    v-model:show="showCartPopup"
-    position="bottom"
-    :style="{ height: '80%' }"
-    round
-  >
-    <Cart
-      class="detail-container"
-      @cart-close="showCartPopup = false"
-    />
+  <VanPopup v-model:show="showCartPopup" position="bottom" :style="{ height: '80%' }" round>
+    <Cart class="detail-container" @cart-close="showCartPopup = false" />
   </VanPopup>
 </template>
 
@@ -249,10 +210,14 @@ function handleCheckout() {
   flex: 1;
   min-height: 0;
   position: relative;
-  border-top: 1px solid #e0e0e0; /* 顶部边框 */
-  border-top-left-radius: 8px; /* 左上圆角 */
-  border-top-right-radius: 8px; /* 右上圆角 */
-  overflow: hidden; /* 确保圆角生效 */
+  border-top: 1px solid #e0e0e0;
+  /* 顶部边框 */
+  border-top-left-radius: 8px;
+  /* 左上圆角 */
+  border-top-right-radius: 8px;
+  /* 右上圆角 */
+  overflow: hidden;
+  /* 确保圆角生效 */
 }
 
 .category-nav {
@@ -387,19 +352,26 @@ function handleCheckout() {
 .shop {
   display: flex;
   flex-direction: column;
-  height: 100vh; /* 外层容器设置视口高度 */
+  height: 100%;
+  /* 外层容器设置视口高度 */
 }
+
 .shop-header {
   overflow: hidden;
-  transition: height 0.3s ease; /* 添加高度过渡动画 */
+  transition: height 0.3s ease;
+  /* 添加高度过渡动画 */
 }
 
 .shop-cover {
   /* height: 150px; */
   width: 100%;
-  transform: translateY(calc((150px - var(--header-height)) / 2) /* 垂直居中 */);
-  scale: calc(1 + (150 - var(--header-height)) / 150); /* 保持图片缩放比例 */
+  transform: translateY(calc((150px - var(--header-height)) / 2)
+      /* 垂直居中 */
+    );
+  scale: calc(1 + (150 - var(--header-height)) / 150);
+  /* 保持图片缩放比例 */
 }
+
 .detail-container {
   height: 100%;
 }
@@ -438,6 +410,7 @@ function handleCheckout() {
   border-radius: 16px;
   padding: 0 24px;
 }
+
 .cart-actions {
   margin-left: auto;
   align-self: flex-end;

src/pinia/stores/order.ts

@@ -28,6 +28,7 @@ export const useOrderStore = defineStore("order", () => {
             goodsInfo: data.goods.find(g => g.goodsId === og.goodsId)!
           }))
       }))
+      .sort((a, b) => b.orderId - a.orderId)
       
       // 保留原始数据结构
       orderGoods.value = data.orderGoods

src/pinia/stores/wx.ts

@@ -10,18 +10,6 @@ export const useWxStore = defineStore("wx", () => {
   // 用户 openid
   const openid = ref<string>("")
 
-  // 模拟微信授权获取 code（需对接实际微信接口）
-  const getWxAuth = async () => {
-    // 这里应替换为实际微信授权逻辑
-    return new Promise<void>((resolve) => {
-      setTimeout(() => {
-        code.value = "模拟的微信code"
-        state.value = Date.now().toString()
-        resolve()
-      }, 1000)
-    })
-  }
-
   // 设置 openid
   const setOpenid = (id: string) => {
     openid.value = id
@@ -48,7 +36,7 @@ export const useWxStore = defineStore("wx", () => {
 
   (window as any).testWxSetOpenid = setOpenid
 
-  return { code, state, openid, getWxAuth, setOpenid, handleWxCallback }
+  return { code, state, openid, setOpenid, handleWxCallback }
 })
 
 /**

src/router/index.ts

@@ -37,6 +37,24 @@ export const routes: RouteRecordRaw[] = [
       requiresAuth: true
     }
   },
+  {
+    path: '/order-list',
+    name: 'OrderList',
+    component: () => import('@/pages/order/components/OrderList.vue'),
+    meta: {
+      title: '订单列表',
+      requiresAuth: true
+    }
+  },
+  {
+    path: '/order/:id',
+    name: 'OrderDetail',
+    component: () => import('@/pages/order/index.vue'),
+    meta: {
+      title: '订单详情',
+      requiresAuth: true
+    }
+  },
   {
     path: "/product/checkout",
     component: () => import("@/pages/product/components/checkout.vue"),
@@ -55,7 +73,29 @@ export const routes: RouteRecordRaw[] = [
       layout: {
         navBar: {
           showNavBar: false,
-          showLeftArrow: true
+          showLeftArrow: false
+        },
+        tabbar: {
+          showTabbar: true,
+          icon: "home-o"
+        }
+      }
+    }
+  },
+  {
+    path: "/me",
+    component: () => import("@/pages/me/index.vue"),
+    name: "Me",
+    meta: {
+      title: "我的",
+      layout: {
+        navBar: {
+          showNavBar: true,
+          showLeftArrow: false
+        },
+        tabbar: {
+          showTabbar: true,
+          icon: "user-o"
         }
       }
     }
@@ -71,6 +111,15 @@ export const routes: RouteRecordRaw[] = [
       requiresAuth: true
     }
   },
+  {
+    path: '/order/:id',
+    name: 'OrderDetail',
+    component: () => import('@/pages/order/index.vue'),
+    meta: {
+      title: '订单详情',
+      requiresAuth: true
+    }
+  },
   {
     path: "/login",
     component: () => import("@/pages/login/index.vue"),
@@ -115,6 +164,15 @@ export const routes: RouteRecordRaw[] = [
         footer: true
       }
     }
+  },
+  {
+    path: '/order-list',
+    name: 'OrderList',
+    component: () => import('@/pages/order/OrderList.vue'),
+    meta: {
+      title: '订单列表',
+      requiresAuth: true
+    }
   }
 ]
 
@@ -200,6 +258,15 @@ export const demoRoutes: RouteRecordRaw[] = [
         }
       }
     }
+  },
+  {
+    path: '/order-list',
+    name: 'OrderList',
+    component: () => import('@/pages/order/OrderList.vue'),
+    meta: {
+      title: '订单列表',
+      requiresAuth: true
+    }
   }
 ]
  */
@@ -246,6 +313,15 @@ export const demoRoutes: RouteRecordRaw[] = [
         }
       }
     }
+  },
+  {
+    path: '/order-list',
+    name: 'OrderList',
+    component: () => import('@/pages/order/OrderList.vue'),
+    meta: {
+      title: '订单列表',
+      requiresAuth: true
+    }
   }
 ] */
 

types/auto/components.d.ts

@@ -16,7 +16,8 @@ declare module 'vue' {
     VanCellGroup: typeof import('vant/es')['CellGroup']
     VanConfigProvider: typeof import('vant/es')['ConfigProvider']
     VanDivider: typeof import('vant/es')['Divider']
-    VanField: typeof import('vant/es')['Field']
+    VanGrid: typeof import('vant/es')['Grid']
+    VanGridItem: typeof import('vant/es')['GridItem']
     VanIcon: typeof import('vant/es')['Icon']
     VanImage: typeof import('vant/es')['Image']
     VanLoading: typeof import('vant/es')['Loading']
@@ -25,5 +26,6 @@ declare module 'vue' {
     VanSidebarItem: typeof import('vant/es')['SidebarItem']
     VanTabbar: typeof import('vant/es')['Tabbar']
     VanTabbarItem: typeof import('vant/es')['TabbarItem']
+    VanTag: typeof import('vant/es')['Tag']
   }
 }