xiongzhu il y a 3 ans
Parent
commit
5f8c4d24ef

+ 1 - 0
package.json

@@ -12,6 +12,7 @@
         "@better-scroll/core": "^2.4.2",
         "@chenfengyuan/vue-qrcode": "^2.0.0-rc.1",
         "@vant/area-data": "^1.1.3",
+        "@vueuse/core": "^8.7.5",
         "ali-oss": "^6.16.0",
         "axios": "^0.21.4",
         "better-scroll": "^2.4.2",

+ 18 - 6
src/components/AppBar.vue

@@ -7,10 +7,10 @@
         v-if="show"
         z-index="20"
         placeholder
-        safe-area-inset-top
         :border="false"
         id="navBar"
         :class="{ dark: tabColor }"
+        ref="navBar"
     >
         <template #left>
             <div class="back">
@@ -37,6 +37,7 @@
 
 <script>
 import { mapState } from 'vuex';
+import { useCssVar } from '@vueuse/core';
 export default {
     inject: ['setKeeps'],
     data() {
@@ -44,7 +45,8 @@ export default {
             show: false,
             showPopover: false,
             tabColor: '',
-            title: ''
+            title: '',
+            safeTop: useCssVar('--safe-top')
         };
     },
     computed: {
@@ -69,6 +71,9 @@ export default {
                     { text: '我的', icon: require('@assets/menu4.png'), value: '/mine' }
                 ];
             }
+        },
+        height() {
+            return Number((this.safeTop || '0').replace('px', '')) + 46;
         }
     },
     watch: {
@@ -90,10 +95,12 @@ export default {
                     }
                 }
             });
+        },
+        show() {
+            this.safeTop = useCssVar('--safe-top').value;
         }
     },
     mounted() {
-        console.log(12827);
         if (this.$route.meta.menuPage) {
             this.show = false;
         } else {
@@ -116,19 +123,16 @@ export default {
         getColor(color = '') {
             if (this.$route.meta.tabColor) {
                 if (window.cordova && StatusBar && StatusBar.isVisible) {
-                    StatusBar.backgroundColorByHexString(this.$route.meta.tabColor);
                     StatusBar.styleLightContent();
                 }
                 this.tabColor = this.$route.meta.tabColor;
             } else if (color) {
                 if (window.cordova && StatusBar && StatusBar.isVisible) {
-                    StatusBar.backgroundColorByHexString(color);
                     StatusBar.styleLightContent();
                 }
                 this.tabColor = color;
             } else {
                 if (window.cordova && StatusBar && StatusBar.isVisible) {
-                    StatusBar.backgroundColorByHexString('#ffffff');
                     StatusBar.styleDefault();
                 }
                 this.tabColor = '';
@@ -163,6 +167,14 @@ export default {
 </script>
 
 <style lang="less">
+#navBar {
+    .van-nav-bar__content {
+        padding-top: var(--safe-top);
+    }
+    .van-nav-bar__left {
+        top: var(--safe-top) !important;
+    }
+}
 .back {
     padding-right: 12px;
 }

+ 1 - 3
src/main.js

@@ -120,7 +120,7 @@ if (query.hopeMarket === 'true' || query.hopeMarket === true || sessionStorage.g
     sessionStorage.setItem('hopeMarket', true);
 }
 const style = document.documentElement.style;
-style.setProperty('--safe-top', 'env(safe-area-inset-top)');
+style.setProperty('--safe-top', '20px');
 style.setProperty('--safe-bottom', 'env(safe-area-inset-bottom)');
 style.setProperty('--safe-left', 'env(safe-area-inset-left)');
 style.setProperty('--safe-right', 'env(safe-area-inset-right)');
@@ -206,8 +206,6 @@ if (navigator.userAgent.includes('#cordova#')) {
                     mountApp();
                 }
             ).then(res => {
-                StatusBar.overlaysWebView(false);
-                StatusBar.backgroundColorByHexString('#F5F7FA');
                 StatusBar.styleDefault();
             });
 

+ 0 - 1
src/plugins/http.js

@@ -44,7 +44,6 @@ axiosInstance.interceptors.response.use(
             //     }
             // }
         }
-        console.log(typeof errorData);
         if (typeof errorData != 'object') {
             errorData = {
                 error: '请求失败' + error.response.status

+ 3 - 6
src/styles/app.less

@@ -187,18 +187,12 @@ input:-webkit-autofill {
     border-radius: 12px 12px 0px 0px;
 }
 
-.barTop {
-    // padding-top: var(--safe-top);
-}
 .van-tabs.dark {
     background-color: #181818;
 }
 .van-nav-bar.dark {
     background-color: #181818;
 }
-.van-nav-bar--fixed {
-    // top: var(--safe-top);
-}
 
 .page-detail img {
     width: 100% !important;
@@ -288,3 +282,6 @@ input:-webkit-autofill {
         padding: 0 16px;
     }
 }
+.padding-safe-top {
+    padding-top: var(--safe-top);
+}

+ 1 - 1
src/views/Creator.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="discover">
-        <van-sticky ref="top" :offset-top="bar.value && bar.value.show ? 46 : 0">
+        <van-sticky ref="top" :offset-top="bar.value && bar.value.show ? bar.value.height : 0">
             <div class="top">
                 <div class="top-btn">
                     <div class="btn" @click="$router.replace('/discover')">收藏探索</div>

+ 18 - 13
src/views/Discover.vue

@@ -6,13 +6,15 @@
         v-model="isLoading"
         @refresh="onRefresh"
     >
-        <van-sticky ref="top" :offset-top="bar.value && bar.value.show ? 46 : 0">
-            <div class="top">
-                <img src="@assets/nav_logo.png" class="logo" alt="" />
-
-                <div class="search" @click="$router.push('/productSearch')">
-                    <img src="@assets/icon-sosuo.png" alt="" />
-                    <span>搜索你要的精彩</span>
+        <van-sticky ref="top">
+            <div class="padding-safe-top">
+                <div class="top">
+                    <img src="@assets/nav_logo.png" class="logo" alt="" />
+
+                    <div class="search" @click="$router.push('/productSearch')">
+                        <img src="@assets/icon-sosuo.png" alt="" />
+                        <span>搜索你要的精彩</span>
+                    </div>
                 </div>
             </div>
         </van-sticky>
@@ -108,7 +110,7 @@
         </van-grid>
 
         <div class="box" ref="box">
-            <van-sticky :offset-top="50">
+            <van-sticky :offset-top="tabOffSet">
                 <van-tabs
                     class="box-tabs"
                     v-model:active="sort"
@@ -152,12 +154,11 @@
 
 <script>
 import product from '../mixins/product';
-
 import ProductInfo from '../components/product/productInfo.vue';
 import banner from '../mixins/banner';
 import CreatorSmall from '../components/creator/CreatorSmall.vue';
 import ShowInfo from '../components/asset/showInfo.vue';
-
+import { useCssVar } from '@vueuse/core';
 export default {
     name: 'discover',
     inject: ['bar', 'setKeeps', 'scrollWrapper', 'changeScroll', 'bodyScroll'],
@@ -202,15 +203,20 @@ export default {
                 require('../assets/info_icon_banquanshichang.png')
             ],
             swiperRef: null,
-            notLike: ''
+            notLike: '',
+            safeTop: useCssVar('--safe-top', document.body)
         };
     },
+    computed: {
+        tabOffSet() {
+            return Number((this.safeTop || '0').replace('px', '')) + 50;
+        }
+    },
     mounted() {
         this.$store.dispatch('getUsedBuy');
         this.getInit();
 
         if (window.cordova && StatusBar && StatusBar.isVisible) {
-            StatusBar.backgroundColorByHexString('#272b2e');
             StatusBar.styleLightContent();
         }
         this.$http
@@ -417,7 +423,6 @@ export default {
             this.changeScroll(this.scrollTop);
         });
         if (window.cordova && StatusBar && StatusBar.isVisible) {
-            StatusBar.backgroundColorByHexString('#272b2e');
             StatusBar.styleLightContent();
         }
     },

+ 1 - 1
src/views/DiscoverPre.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="discover">
-        <van-sticky ref="top" :offset-top="bar.value && bar.value.show ? 46 : 0">
+        <van-sticky ref="top" :offset-top="bar.value && bar.value.show ? bar.value.height : 0">
             <div class="top">
                 <div class="top-btn">
                     <div class="btn active">收藏探索</div>

+ 1 - 2
src/views/Home.vue

@@ -144,7 +144,6 @@ export default {
     },
     mounted() {
         if (window.cordova && StatusBar && StatusBar.isVisible) {
-            StatusBar.backgroundColorByHexString('#F5F7FA');
             StatusBar.styleDefault();
         }
         this.getInit();
@@ -340,7 +339,6 @@ export default {
     activated() {
         this.$nextTick(() => {
             if (window.cordova && StatusBar && StatusBar.isVisible) {
-                StatusBar.backgroundColorByHexString('#F5F7FA');
                 StatusBar.styleDefault();
             }
             this.$nextTick(() => {
@@ -407,6 +405,7 @@ export default {
     position: relative;
     z-index: 1;
     background-color: #f5f7fa;
+    padding-top: var(--safe-top);
 }
 
 ::v-deep(.mySwiper) {

+ 1 - 1
src/views/Mine.vue

@@ -261,7 +261,6 @@ export default {
             }
 
             if (window.cordova && StatusBar && StatusBar.isVisible) {
-                StatusBar.backgroundColorByHexString('#222426');
                 StatusBar.styleLightContent();
             }
 
@@ -815,6 +814,7 @@ export default {
     position: absolute;
     right: 16px;
     top: 16px;
+    top: calc(var(--safe-top) + 16px);
     .flex();
     z-index: 20;
     img {

+ 54 - 54
src/views/Store.vue

@@ -6,65 +6,67 @@
         v-model="isLoading"
         @refresh="onRefresh"
     >
-        <van-sticky ref="top" :offset-top="bar.value && bar.value.show ? 46 : 0">
-            <div class="top">
-                <div class="top-btn">
-                    <div class="btn" :class="{ active: active === 'explore' }" @click="changeActive('explore')">
-                        我拥有的
-                    </div>
-                    <div
-                        class="btn"
-                        v-if="showRoom"
-                        :class="{ active: active === 'showRoom' }"
-                        @click="changeActive('showRoom')"
-                    >
-                        我的展馆
+        <van-sticky ref="top">
+            <div class="padding-safe-top" style="background: #222426">
+                <div class="top">
+                    <div class="top-btn">
+                        <div class="btn" :class="{ active: active === 'explore' }" @click="changeActive('explore')">
+                            我拥有的
+                        </div>
+                        <div
+                            class="btn"
+                            v-if="showRoom"
+                            :class="{ active: active === 'showRoom' }"
+                            @click="changeActive('showRoom')"
+                        >
+                            我的展馆
+                        </div>
+                        <div
+                            class="btn"
+                            v-if="!$store.state.reviewPay"
+                            :class="{ active: active === 'creator' }"
+                            @click="changeActive('creator')"
+                        >
+                            我卖出的
+                        </div>
+                        <div class="btn" :class="{ active: active === 'coupon' }" @click="changeActive('coupon')">
+                            兑换券
+                        </div>
                     </div>
                     <div
-                        class="btn"
-                        v-if="!$store.state.reviewPay"
-                        :class="{ active: active === 'creator' }"
-                        @click="changeActive('creator')"
+                        class="search"
+                        v-if="isLogin && active !== 'coupon'"
+                        @click="$router.push('/assetSearch?status=' + status)"
                     >
-                        我卖出的
-                    </div>
-                    <div class="btn" :class="{ active: active === 'coupon' }" @click="changeActive('coupon')">
-                        兑换券
+                        <img src="@assets/svgs/search.svg" alt="" />
                     </div>
                 </div>
-                <div
-                    class="search"
-                    v-if="isLogin && active !== 'coupon'"
-                    @click="$router.push('/assetSearch?status=' + status)"
-                >
-                    <img src="@assets/svgs/search.svg" alt="" />
-                </div>
-            </div>
 
-            <van-tabs
-                class="darkTabs"
-                v-model:active="type"
-                line-width="16"
-                line-height="2"
-                :ellipsis="false"
-                @click="changeTab"
-            >
-                <van-tab
-                    :title="item.label"
-                    :name="item.value"
-                    :title-class="item.type === 'select' && sortDes ? sortDes : ''"
-                    :key="index"
-                    v-for="(item, index) in typeOptions"
+                <van-tabs
+                    class="darkTabs"
+                    v-model:active="type"
+                    line-width="16"
+                    line-height="2"
+                    :ellipsis="false"
+                    @click="changeTab"
                 >
-                    <template v-if="item.type === 'select'" #title>
-                        <div class="tab">
-                            <span>{{ item.label }}</span>
-                            <van-icon size="8" name="arrow-up" />
-                            <van-icon size="8" name="arrow-down" />
-                        </div>
-                    </template>
-                </van-tab>
-            </van-tabs>
+                    <van-tab
+                        :title="item.label"
+                        :name="item.value"
+                        :title-class="item.type === 'select' && sortDes ? sortDes : ''"
+                        :key="index"
+                        v-for="(item, index) in typeOptions"
+                    >
+                        <template v-if="item.type === 'select'" #title>
+                            <div class="tab">
+                                <span>{{ item.label }}</span>
+                                <van-icon size="8" name="arrow-up" />
+                                <van-icon size="8" name="arrow-down" />
+                            </div>
+                        </template>
+                    </van-tab>
+                </van-tabs>
+            </div>
 
             <!-- <van-button
         color="#272828"
@@ -302,7 +304,6 @@ export default {
     },
     mounted() {
         if (window.cordova && StatusBar && StatusBar.isVisible) {
-            StatusBar.backgroundColorByHexString('#222426');
             StatusBar.styleLightContent();
         }
         this.checkLogin();
@@ -357,7 +358,6 @@ export default {
         this.$nextTick(() => {
             this.changeScroll(this.scrollTop);
             if (window.cordova && StatusBar && StatusBar.isVisible) {
-                StatusBar.backgroundColorByHexString('#222426');
                 StatusBar.styleLightContent();
             }
 

+ 1 - 1
src/views/asset/GiveSearch.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="search">
-        <van-sticky ref="top" :offset-top="bar.value && bar.value.show ? 46 : 0">
+        <van-sticky ref="top" :offset-top="bar.value && bar.value.show ? bar.value.height : 0">
             <div class="title">赠送</div>
             <div class="name">通过手机号码检索用户信息,<span>确认赠送后该数字藏品将会被转移</span></div>
             <van-search

+ 1 - 1
src/views/asset/Search.vue

@@ -4,7 +4,7 @@
         :class="{ isSearch: isSearch }"
         :style="{ backgroundColor: isSearch ? $colors.bgBlack : $colors.bg }"
     >
-        <van-sticky ref="top" :offset-top="bar.value && bar.value.show ? 46 : 0">
+        <van-sticky ref="top" :offset-top="bar.value && bar.value.show ? bar.value.height : 0">
             <van-search
                 ref="top"
                 shape="round"

+ 1 - 1
src/views/auction/List.vue

@@ -7,7 +7,7 @@
         @refresh="onRefresh"
         pageType="light"
     >
-        <van-sticky ref="top" class="list-top" :offset-top="bar.value && bar.value.show ? 46 : 0">
+        <van-sticky ref="top" class="list-top" :offset-top="bar.value && bar.value.show ? bar.value.height : 0">
             <div class="top" v-if="!minterId">
                 <div class="name">{{ pageName }}</div>
                 <img src="@assets/icon-sosuo.png" alt="" @click="goSearch" class="search" />

+ 1 - 1
src/views/auction/Search.vue

@@ -8,7 +8,7 @@
         @refresh="onRefresh"
         pageType="light"
     >
-        <van-sticky ref="top" class="list-top" :offset-top="bar.value && bar.value.show ? 46 : 0">
+        <van-sticky ref="top" class="list-top" :offset-top="bar.value && bar.value.show ? bar.value.height : 0">
             <van-search
                 ref="top"
                 shape="round"

+ 1 - 1
src/views/creator/List.vue

@@ -7,7 +7,7 @@
         :head-height="80"
         @refresh="onRefresh"
     >
-        <van-sticky ref="top" :offset-top="bar.value && bar.value.show ? 46 : 0">
+        <van-sticky ref="top" :offset-top="bar.value && bar.value.show ? bar.value.height : 0">
             <div class="top">
                 <div class="name">铸造者</div>
                 <img src="@assets/icon-sosuo.png" @click="$router.push('/creatorSearch')" alt="" class="search" />

+ 1 - 1
src/views/creator/Search.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="search" :style="{ backgroundColor: isSearch ? $colors.bg3 : $colors.bg }">
-        <van-sticky ref="top" :offset-top="bar.value && bar.value.show ? 46 : 0">
+        <van-sticky ref="top" :offset-top="bar.value && bar.value.show ? bar.value.height : 0">
             <van-search
                 ref="top"
                 shape="round"

+ 0 - 1
src/views/hall/Detail.vue

@@ -488,7 +488,6 @@ export default {
     },
     mounted() {
         if (window.cordova && StatusBar && StatusBar.isVisible) {
-            StatusBar.backgroundColorByHexString('#222426');
             StatusBar.styleLightContent();
         }
         if (this.$route.query.id) {

+ 1 - 1
src/views/order/ActivityOrders.vue

@@ -8,7 +8,7 @@
         @refresh="onRefresh"
         pageType="light"
     >
-        <van-sticky ref="top" :offset-top="bar.value && bar.value.show ? 46 : 0">
+        <van-sticky ref="top" :offset-top="bar.value && bar.value.show ? bar.value.height : 0">
             <!-- <div class="top">
                 <div class="top-btn">
                     <div class="btn" :class="{ active: type === 'DEFAULT' }" @click="changeActive('DEFAULT')">

+ 1 - 1
src/views/order/Orders.vue

@@ -8,7 +8,7 @@
         @refresh="onRefresh"
         pageType="light"
     >
-        <van-sticky ref="top" :offset-top="bar.value && bar.value.show ? 46 : 0">
+        <van-sticky ref="top" :offset-top="bar.value && bar.value.show ? bar.value.height : 0">
             <div class="top">
                 <div class="top-btn">
                     <div class="btn" :class="{ active: type === 'DEFAULT' }" @click="changeActive('DEFAULT')">

+ 0 - 8
src/views/product/Detail.vue

@@ -477,7 +477,6 @@ export default {
             this.$store.dispatch('getUsedBuy');
             // this.$store.dispatch('getTime');
             this.$store.dispatch('getUserInfo');
-            console.log(this.$route.params);
             if (this.$route.params.id) {
                 this.collectionId = this.$route.params.id;
             }
@@ -525,7 +524,6 @@ export default {
                         res.onShelf = true;
                         this.checkLogin();
                     }
-                    console.log(res);
                     this.info = res;
 
                     //优惠券
@@ -544,11 +542,9 @@ export default {
                             link: location.origin + '/9th/productDetail/' + res.id,
                             imgUrl: this.getImg(this.changeImgs(this.banners), '', 300)
                         });
-                        console.log(wx);
                     }
                     if (res.assetId) {
                         this.$http.get('/asset/get/' + res.assetId).then(res => {
-                            console.log(res);
                             this.info = {
                                 ...res,
                                 ...this.info
@@ -559,7 +555,6 @@ export default {
                                     assetId: res.collectionId
                                 })
                                 .then(res => {
-                                    console.log(res);
                                     this.list = res;
                                 });
                         });
@@ -607,7 +602,6 @@ export default {
                         if (this.canSale) {
                             this.$refs.sale.getData(true).then(num => {
                                 this.totalSales = num;
-                                console.log(num);
                             });
                         }
                     });
@@ -731,7 +725,6 @@ export default {
         }
     },
     beforeRouteEnter(to, from, next) {
-        console.log(from);
         if (from.path === '/creatorDetail') {
             next(vm => {
                 vm.createrId = from.query.id;
@@ -741,7 +734,6 @@ export default {
         }
     },
     beforeRouteLeave(to, from, next) {
-        console.log(to);
         if (to.path === '/creatorDetail' && Number(to.query.id) !== Number(this.createrId)) {
             this.setKeeps(['creatorDetail'], false);
         }

+ 1 - 1
src/views/product/List.vue

@@ -6,7 +6,7 @@
         v-model="isLoading"
         @refresh="onRefresh"
     >
-        <van-sticky ref="top" class="list-top" :offset-top="bar.value && bar.value.show ? 46 : 0">
+        <van-sticky ref="top" class="list-top" :offset-top="bar.value && bar.value.show ? bar.value.height : 0">
             <div class="top" v-if="!minterId">
                 <div class="name">{{ title || pageName }}</div>
                 <img src="@assets/icon-sosuo.png" alt="" @click="goSearch" class="search" />

+ 7 - 2
src/views/product/Search.vue

@@ -8,7 +8,12 @@
         @refresh="onRefresh"
         pageType="light"
     >
-        <van-sticky v-if="!isSearch" ref="top" class="list-top" :offset-top="bar.value && bar.value.show ? 46 : 0">
+        <van-sticky
+            v-if="!isSearch"
+            ref="top"
+            class="list-top"
+            :offset-top="bar.value && bar.value.show ? bar.value.height : 0"
+        >
             <van-search
                 ref="top"
                 shape="round"
@@ -26,7 +31,7 @@
             </van-search>
         </van-sticky>
 
-        <van-sticky v-else ref="top" class="list-top" :offset-top="bar.value && bar.value.show ? 46 : 0">
+        <van-sticky v-else ref="top" class="list-top" :offset-top="bar.value && bar.value.show ? bar.value.height : 0">
             <van-search
                 ref="top"
                 shape="round"

+ 1 - 1
src/views/user/Followers.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="follow">
-        <van-sticky :offset-top="bar.value && bar.value.show ? 46 : 0">
+        <van-sticky :offset-top="bar.value && bar.value.show ? bar.value.height : 0">
             <div class="top">
                 <div class="name">我的粉丝</div>
             </div>

+ 1 - 1
src/views/user/Follows.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="follow">
-        <van-sticky :offset-top="bar.value && bar.value.show ? 46 : 0">
+        <van-sticky :offset-top="bar.value && bar.value.show ? bar.value.height : 0">
             <div class="top">
                 <div class="name">我关注的</div>
             </div>

+ 1 - 1
src/views/user/Likes.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="follow">
-        <van-sticky ref="top" :offset-top="bar.value && bar.value.show ? 46 : 0">
+        <van-sticky ref="top" :offset-top="bar.value && bar.value.show ? bar.value.height : 0">
             <div class="top">
                 <div class="name">我赞过的</div>
             </div>

+ 32 - 0
yarn.lock

@@ -1264,6 +1264,11 @@
   dependencies:
     source-map "^0.6.1"
 
+"@types/web-bluetooth@^0.0.14":
+  version "0.0.14"
+  resolved "https://registry.npmmirror.com/@types/web-bluetooth/-/web-bluetooth-0.0.14.tgz#94e175b53623384bff1f354cdb3197a8d63cdbe5"
+  integrity sha512-5d2RhCard1nQUC3aHcq/gHzWYO6K0WJmAbjO7mQJgCQKtZpgXxv1rOM6O/dBDhDYYVutk1sciOgNSe+5YyfM8A==
+
 "@types/webpack-dev-server@^3.11.0":
   version "3.11.6"
   resolved "https://registry.npmjs.org/@types/webpack-dev-server/-/webpack-dev-server-3.11.6.tgz"
@@ -1704,6 +1709,28 @@
   resolved "https://registry.npmjs.org/@vue/web-component-wrapper/-/web-component-wrapper-1.3.0.tgz"
   integrity sha512-Iu8Tbg3f+emIIMmI2ycSI8QcEuAUgPTgHwesDU1eKMLE4YC/c/sFbGc70QgMq31ijRftV0R7vCm9co6rldCeOA==
 
+"@vueuse/core@^8.7.5":
+  version "8.7.5"
+  resolved "https://registry.npmmirror.com/@vueuse/core/-/core-8.7.5.tgz#e74a888251ea11a9d432068ce18cbdfc4f810251"
+  integrity sha512-tqgzeZGoZcXzoit4kOGLWJibDMLp0vdm6ZO41SSUQhkhtrPhAg6dbIEPiahhUu6sZAmSYvVrZgEr5aKD51nrLA==
+  dependencies:
+    "@types/web-bluetooth" "^0.0.14"
+    "@vueuse/metadata" "8.7.5"
+    "@vueuse/shared" "8.7.5"
+    vue-demi "*"
+
+"@vueuse/metadata@8.7.5":
+  version "8.7.5"
+  resolved "https://registry.npmmirror.com/@vueuse/metadata/-/metadata-8.7.5.tgz#c7f2b21d873d1604a8860ed9c5728d8f3295f00a"
+  integrity sha512-emJZKRQSaEnVqmlu39NpNp8iaW+bPC2kWykWoWOZMSlO/0QVEmO/rt8A5VhOEJTKLX3vwTevqbiRy9WJRwVOQg==
+
+"@vueuse/shared@8.7.5":
+  version "8.7.5"
+  resolved "https://registry.npmmirror.com/@vueuse/shared/-/shared-8.7.5.tgz#06fb08f6f8fc9e90be9d1e033fa443de927172b0"
+  integrity sha512-THXPvMBFmg6Gf6AwRn/EdTh2mhqwjGsB2Yfp374LNQSQVKRHtnJ0I42bsZTn7nuEliBxqUrGQm/lN6qUHmhJLw==
+  dependencies:
+    vue-demi "*"
+
 "@webassemblyjs/ast@1.9.0":
   version "1.9.0"
   resolved "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.9.0.tgz"
@@ -9439,6 +9466,11 @@ vue-croppie@^2.0.2:
   dependencies:
     croppie "^2.6.4"
 
+vue-demi@*:
+  version "0.13.1"
+  resolved "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.13.1.tgz#7604904c88be338418a10abbc94d5b8caa14cb8c"
+  integrity sha512-xmkJ56koG3ptpLnpgmIzk9/4nFf4CqduSJbUM0OdPoU87NwRuZ6x49OLhjSa/fC15fV+5CbEnrxU4oyE022svg==
+
 vue-eslint-parser@^7.10.0:
   version "7.11.0"
   resolved "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.11.0.tgz"