From e3ddbbd3c40af039cb9ee11e61e9746f56a9ec89 Mon Sep 17 00:00:00 2001
From: 100011797 <2642441182@qq.com>
Date: Mon, 16 Jan 2023 15:19:41 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=9B=B4=E6=96=B0AIcon?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/images/device-type-3.png               | Bin 1829 -> 0 bytes
 .../instance/device-card.png}                 | Bin
 src/api/device/instance.ts                    |  32 ++-
 src/api/northbound/alicloud.ts                |   0
 src/api/northbound/dueros.ts                  |   8 +
 src/components/AIcon/index.ts                 |   7 -
 src/components/AIcon/index.tsx                |  32 +++
 src/components/BadgeStatus/index.vue          |  11 +-
 src/components/CardBox/index.vue              |   1 -
 src/components/Table/index.tsx                |  20 +-
 src/router/menu.ts                            |  14 +
 src/views/device/Instance/index.vue           | 260 ++++++++++++++++++
 src/views/northbound/AliCloud/index.vue       |   7 +
 src/views/northbound/DuerOS/index.vue         | 154 +++++++++++
 yarn.lock                                     |  27 ++
 15 files changed, 557 insertions(+), 16 deletions(-)
 delete mode 100644 public/images/device-type-3.png
 rename public/images/{device-type-3-big.png => device/instance/device-card.png} (100%)
 create mode 100644 src/api/northbound/alicloud.ts
 create mode 100644 src/api/northbound/dueros.ts
 delete mode 100644 src/components/AIcon/index.ts
 create mode 100644 src/components/AIcon/index.tsx
 create mode 100644 src/views/device/Instance/index.vue
 create mode 100644 src/views/northbound/AliCloud/index.vue
 create mode 100644 src/views/northbound/DuerOS/index.vue

diff --git a/public/images/device-type-3.png b/public/images/device-type-3.png
deleted file mode 100644
index 3561237e70b88989cb0079de46a2a1befb57fc15..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1829
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
TVX3|?00000NkvXXu0mjfVDV!8

diff --git a/public/images/device-type-3-big.png b/public/images/device/instance/device-card.png
similarity index 100%
rename from public/images/device-type-3-big.png
rename to public/images/device/instance/device-card.png
diff --git a/src/api/device/instance.ts b/src/api/device/instance.ts
index 8c3c964f..8886dcbe 100644
--- a/src/api/device/instance.ts
+++ b/src/api/device/instance.ts
@@ -21,4 +21,34 @@ export const saveMetadata = (id: string, data: string) => server.put(`/device/in
  * @param id 设备ID
  * @returns 设备详情
  */
-export const detail = (id: string) => server.get<DeviceInstance>(`/device-instance/${id}/detail`)
\ No newline at end of file
+export const detail = (id: string) => server.get<DeviceInstance>(`/device-instance/${id}/detail`)
+
+/**
+ * 查询数据
+ * @param data 分页搜索数据
+ * @returns 
+ */
+export const query = (data?: Record<string, any>) => server.post('/device-instance/_query', data)
+
+/**
+ * 删除设备
+ * @param id 设备ID
+ * @returns 
+ */
+export const _delete = (id: string) => server.remove(`/device-instance/${id}`)
+
+/**
+ * 启用设备
+ * @param id 设备ID
+ * @param data 
+ * @returns 
+ */
+export const _deploy = (id: string) => server.post(`/device-instance/${id}/deploy`)
+
+/**
+ * 禁用设备
+ * @param id 设备ID
+ * @param data 
+ * @returns 
+ */
+ export const _undeploy = (id: string) => server.post(`/device-instance/${id}/undeploy`)
\ No newline at end of file
diff --git a/src/api/northbound/alicloud.ts b/src/api/northbound/alicloud.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/src/api/northbound/dueros.ts b/src/api/northbound/dueros.ts
new file mode 100644
index 00000000..e3cb60cc
--- /dev/null
+++ b/src/api/northbound/dueros.ts
@@ -0,0 +1,8 @@
+import server from '@/utils/request'
+
+/**
+ * 查询数据
+ * @param data 分页搜索数据
+ * @returns 
+ */
+export const query = (data: Record<string, any>) => server.post('/dueros/product/_query', data)
\ No newline at end of file
diff --git a/src/components/AIcon/index.ts b/src/components/AIcon/index.ts
deleted file mode 100644
index 39b2aee7..00000000
--- a/src/components/AIcon/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { createFromIconfontCN } from '@ant-design/icons-vue';
-
-const AliIcon = createFromIconfontCN({
-    scriptUrl: '/icons/iconfont.js', // 在 iconfont.cn 上生成
-});
-
-export default AliIcon
\ No newline at end of file
diff --git a/src/components/AIcon/index.tsx b/src/components/AIcon/index.tsx
new file mode 100644
index 00000000..eb1703a1
--- /dev/null
+++ b/src/components/AIcon/index.tsx
@@ -0,0 +1,32 @@
+import { createFromIconfontCN } from '@ant-design/icons-vue';
+import * as $Icon from '@ant-design/icons-vue';
+import { createVNode } from 'vue';
+
+const AliIcon = createFromIconfontCN({
+    scriptUrl: '/icons/iconfont.js', // 在 iconfont.cn 上生成
+});
+
+const AntdIcon = (props: {type: string}) => {
+    const {type} = props;
+    let antIcon: {[key: string]: any} = $Icon
+    return createVNode(antIcon[type])
+}
+
+const iconKeys = [
+    'EyeOutlined',
+    'EditOutlined',
+    'PlusOutlined',
+    'DeleteOutlined',
+    'CheckCircleOutlined',
+    'StopOutlined',
+    'CheckOutlined',
+    'CloseOutlined',
+    'DownOutlined'
+]
+
+const Icon = (props: {type: string}) => {
+    if(iconKeys.includes(props.type)) return <AntdIcon {...props} />
+    return <AliIcon {...props} />
+}
+
+export default Icon
\ No newline at end of file
diff --git a/src/components/BadgeStatus/index.vue b/src/components/BadgeStatus/index.vue
index 47870618..067ee58b 100644
--- a/src/components/BadgeStatus/index.vue
+++ b/src/components/BadgeStatus/index.vue
@@ -6,8 +6,7 @@
 </template>
 
 <script setup lang="ts">
-import { StatusColorEnum } from '@/utils/consts.ts';
-
+// import { StatusColorEnum } from '@/utils/consts.ts';
 const props = defineProps({
     text: {
         type: String,
@@ -15,10 +14,10 @@ const props = defineProps({
     status: {
         type: String || Number,
         default: 'default',
-        validator: (value) => {
-            // 这个值必须匹配下列字符串中的一个
-            return Object.keys(StatusColorEnum).includes(value);
-        },
+        // validator: (value) => {
+        //     // 这个值必须匹配下列字符串中的一个
+        //     return Object.keys(StatusColorEnum).includes(value);
+        // },
     },
     /**
      * 自定义status值颜色
diff --git a/src/components/CardBox/index.vue b/src/components/CardBox/index.vue
index a919d67e..9c0ac3a3 100644
--- a/src/components/CardBox/index.vue
+++ b/src/components/CardBox/index.vue
@@ -108,7 +108,6 @@ const props = defineProps({
         type: Boolean,
         default: true,
     },
-
     statusText: {
         type: String,
         default: '正常',
diff --git a/src/components/Table/index.tsx b/src/components/Table/index.tsx
index d1ed6aa9..8aa9d3c1 100644
--- a/src/components/Table/index.tsx
+++ b/src/components/Table/index.tsx
@@ -75,6 +75,7 @@ const JTable = defineComponent<JTableProps>({
     ],
     emits: [
         'modelChange', // 切换卡片和表格
+        'reload' // 刷新数据
     ],
     props: {
         request: {
@@ -139,7 +140,7 @@ const JTable = defineComponent<JTableProps>({
             }
         }
     } as any,
-    setup(props: JTableProps ,{ slots, emit }){
+    setup(props: JTableProps ,{ slots, emit, expose }){
         const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE
         const _model = ref<keyof typeof ModelEnum>(props.model ? props.model : ModelEnum.CARD); // 模式切换
         const column = ref<number>(props.gridColumn || 4);
@@ -216,6 +217,23 @@ const JTable = defineComponent<JTableProps>({
         onUnmounted(() => {
             window.onresize = null
         })
+
+        /**
+         * 刷新数据
+         * @param _params 
+         */
+        const reload = (_params?: Record<string, any>) => {
+            handleSearch({
+                ..._params,
+                pageSize: 12,
+                pageIndex: 0
+            })
+        }
+
+        /**
+         * 导出方法
+         */
+         expose({ reload })
         
         return () => <Spin spinning={loading.value}>
                 <div class={styles["jtable-body"]}>
diff --git a/src/router/menu.ts b/src/router/menu.ts
index a94c47f0..354a9550 100644
--- a/src/router/menu.ts
+++ b/src/router/menu.ts
@@ -66,6 +66,11 @@ export default [
     },
     // end: 测试用, 可删除
 
+    // 设备管理
+    {
+        path: '/device/Instance',
+        component: () => import('@/views/device/Instance/index.vue')
+    },
     // link 运维管理
     {
         path: '/link/log',
@@ -102,4 +107,13 @@ export default [
       path: '/iot-card/home',
       component: () => import('@/views/iot-card/Home/index.vue')
     },
+    // 北向输出
+    {
+        path: '/northbound/DuerOS',
+        component: () => import('@/views/northbound/DuerOS/index.vue')
+    },
+    {
+        path: '/northbound/AliCloud',
+        component: () => import('@/views/northbound/AliCloud/index.vue')
+    },
 ]
\ No newline at end of file
diff --git a/src/views/device/Instance/index.vue b/src/views/device/Instance/index.vue
new file mode 100644
index 00000000..ad22365b
--- /dev/null
+++ b/src/views/device/Instance/index.vue
@@ -0,0 +1,260 @@
+<template>
+    <JTable ref="instanceRef" :columns="columns" :request="query" :defaultParams="{sorts: [{name: 'createTime', order: 'desc'}]}" :params="{pageIndex: 0, pageSize: 12}">
+        <template #headerTitle>
+            <a-space>
+                <a-button type="primary" @click="handleAdd">新增</a-button>
+                <a-dropdown>
+                    <a-button>批量操作 <AIcon type="DownOutlined" /></a-button>
+                    <template #overlay>
+                    <a-menu>
+                        <a-menu-item>
+                            <a href="javascript:;">1st menu item</a>
+                        </a-menu-item>
+                        <a-menu-item>
+                            <a href="javascript:;">2nd menu item</a>
+                        </a-menu-item>
+                        <a-menu-item>
+                            <a href="javascript:;">3rd menu item</a>
+                        </a-menu-item>
+                    </a-menu>
+                    </template>
+                </a-dropdown>
+            </a-space>
+        </template>
+        <template #card="slotProps">
+            <CardBox
+                :value="slotProps"
+                @click="handleView"
+                :actions="getActions(slotProps, 'card')"
+                v-bind="slotProps"
+                :status="slotProps.state.value"
+                :statusText="slotProps.state.text"
+                :statusNames="{
+                    online: 'success',
+                    offline: 'error',
+                    notActive: 'warning',
+                }"
+            >
+                <template #img>
+                    <slot name="img">
+                        <img :src="getImage('/device/instance/device-card.png')" />
+                    </slot>
+                </template>
+                <template #content>
+                    <h3>{{ slotProps.name }}</h3>
+                    <a-row>
+                        <a-col :span="12">
+                            <div class="card-item-content-text">设备类型</div>
+                            <div>{{slotProps.deviceType.text}}</div>
+                        </a-col>
+                        <a-col :span="12">
+                            <div class="card-item-content-text">产品名称</div>
+                            <div>{{slotProps.productName}}</div>
+                        </a-col>
+                    </a-row>
+                </template>
+                <template #actions="item">
+                    <a-tooltip v-bind="item.tooltip" :title="item.disabled && item.tooltip.title">
+                        <a-popconfirm
+                            v-if="item.popConfirm"
+                            v-bind="item.popConfirm"
+                            :disabled="item.disabled"
+                        >
+                            <a-button :disabled="item.disabled">
+                                <AIcon type="DeleteOutlined" v-if="item.key === 'delete'"  />
+                                <template v-else>
+                                    <AIcon :type="item.icon" />
+                                    <span>{{ item.text }}</span>
+                                </template>
+                            </a-button>
+                        </a-popconfirm>
+                        <template v-else>
+                            <a-button :disabled="item.disabled" @click="item.onClick">
+                                <AIcon type="DeleteOutlined" v-if="item.key === 'delete'"  />
+                                <template v-else>
+                                    <AIcon :type="item.icon" />
+                                    <span>{{ item.text }}</span>
+                                </template>
+                            </a-button>
+                        </template>
+                    </a-tooltip>
+                </template>
+            </CardBox>
+        </template>
+        <template #state="slotProps">
+            <a-badge :text="slotProps.state.text" :status="statusMap.get(slotProps.state.value)" />
+        </template>
+        <template #action="slotProps">
+            <a-space :size="16">
+                <a-tooltip
+                    v-for="i in getActions(slotProps, 'table')"
+                    :key="i.key"
+                    v-bind="i.tooltip"
+                >
+                    <a-popconfirm v-if="i.popConfirm" v-bind="i.popConfirm" :disabled="i.disabled">
+                        <a-button
+                            :disabled="i.disabled"
+                            style="padding: 0"
+                            type="link"
+                            ><AIcon :type="i.icon"
+                        /></a-button>
+                    </a-popconfirm>
+                    <a-button
+                        style="padding: 0"
+                        type="link"
+                        v-else
+                        @click="i.onClick && i.onClick(slotProps)"
+                    >
+                        <a-button
+                            :disabled="i.disabled"
+                            style="padding: 0"
+                            type="link"
+                            ><AIcon :type="i.icon"
+                        /></a-button>
+                    </a-button>
+                </a-tooltip>
+            </a-space>
+        </template>
+    </JTable>
+</template>
+
+<script setup lang="ts">
+import { query, _delete, _deploy, _undeploy } from '@/api/device/instance'
+import type { ActionsType } from '@/components/Table/index.vue'
+import { getImage } from '@/utils/comm';
+import { message } from "ant-design-vue";
+
+const instanceRef = ref<Record<string, any>>({});
+
+const statusMap = new Map();
+statusMap.set('online', 'processing');
+statusMap.set('offline', 'error');
+statusMap.set('notActive', 'warning');
+
+const columns = [
+    {
+        title: 'ID',
+        dataIndex: 'id',
+        key: 'id'
+    },
+    {
+        title: '设备名称',
+        dataIndex: 'name',
+        key: 'name',
+    },
+    {
+        title: '产品名称',
+        dataIndex: 'productName',
+        key: 'productName',
+    },
+    {
+        title: '创建时间',
+        dataIndex: 'createTime',
+        key: 'createTime',
+        scopedSlots: true
+    },
+    {
+        title: '状态',
+        dataIndex: 'state',
+        key: 'state',
+        scopedSlots: true
+    },
+    {
+        title: '说明',
+        dataIndex: 'describe',
+        key: 'describe'
+    },
+    {
+        title: '操作',
+        key: 'action',
+        fixed: 'right',
+        width: 250,
+        scopedSlots: true
+    }   
+]
+
+const handleAdd = () => {
+    message.warn('123')
+}
+
+const handleView = (dt: any) => {
+    
+}
+
+const getActions = (data: Partial<Record<string, any>>, type: 'card' | 'table'): ActionsType[] => {
+    if(!data) return []
+    const actions = [
+        {
+            key: 'view',
+            text: "查看",
+            tooltip: {
+                title: '查看'
+            },
+            icon: 'EyeOutlined',
+            onClick: () => {
+                handleView(data)
+            }
+        },
+        {
+            key: 'edit',
+            text: "编辑",
+            tooltip: {
+                title: '编辑'
+            },
+            icon: 'EditOutlined',
+            onClick: () => {
+                message.warn('edit')
+            }
+        },
+        {
+            key: 'action',
+            text: data.state.value !== 'notActive' ? "禁用" : "启用",
+            tooltip: {
+                title: data.state.value !== 'notActive' ? "禁用" : "启用",
+            },
+            icon: data.state.value !== 'notActive' ? 'StopOutlined' : 'CheckCircleOutlined',
+            popConfirm: {
+                title: `确认${data.state.value !== 'notActive' ? "禁用" : "启用"}?`,
+                onConfirm: async () => {
+                    let response = undefined
+                    if(data.state.value !== 'notActive') {
+                        response = await _undeploy(data.id)
+                    } else {
+                        response = await _deploy(data.id)
+                    }
+                    if(response && response.status === 200) {
+                        message.success('操作成功！')
+                        instanceRef.value?.reload()
+                    } else {
+                        message.error('操作失败！')
+                    }
+                }
+            }
+        },
+        {
+            key: 'delete',
+            text: "删除",
+            disabled: data.state.value !== 'notActive',
+            tooltip: {
+                title: data.state.value !== 'notActive' ? '已启用的设备不能删除' : '删除'
+            },
+            popConfirm: {
+                title: '确认删除?',
+                onConfirm: async () => {
+                    const resp = await _delete(data.id)
+                    if(resp.status === 200) {
+                        message.success('操作成功！')
+                        instanceRef.value?.reload()
+                    } else {
+                        message.error('操作失败！')
+                    }
+                }
+            },
+            icon: 'DeleteOutlined'
+        }
+    ]
+    if(type === 'card') return actions.filter((i: ActionsType) => i.key !== 'view')
+    return actions
+}
+
+</script>
\ No newline at end of file
diff --git a/src/views/northbound/AliCloud/index.vue b/src/views/northbound/AliCloud/index.vue
new file mode 100644
index 00000000..cd36fd59
--- /dev/null
+++ b/src/views/northbound/AliCloud/index.vue
@@ -0,0 +1,7 @@
+<template>
+    <div>123</div>
+</template>
+
+<script setup>
+
+</script>
\ No newline at end of file
diff --git a/src/views/northbound/DuerOS/index.vue b/src/views/northbound/DuerOS/index.vue
new file mode 100644
index 00000000..f8ab376f
--- /dev/null
+++ b/src/views/northbound/DuerOS/index.vue
@@ -0,0 +1,154 @@
+<template>
+    <div>
+        <JTable 
+            :columns="columns"
+            :request="request"
+        >
+            <template #headerTitle>
+                <a-button type="primary" @click="add">新增</a-button>
+            </template>
+            <template #card="slotProps">
+                <CardBox 
+                    :value="slotProps" 
+                    @click="handleClick" 
+                    :actions="getActions(slotProps)" 
+                    v-bind="slotProps" 
+                    :status="slotProps.state ? 'success' : 'error'"
+                >
+                    <template #img>
+                        <slot name="img">
+                            <img :src="getImage('/device-product.png')" />
+                        </slot>
+                    </template>
+                    <template #content>
+                         <h3>{{slotProps.name}}</h3>
+                         <a-row>
+                            <a-col :span="12">
+                                <div class="card-item-content-text">
+                                    设备类型
+                                </div>
+                                <div>直连设备</div>
+                            </a-col>
+                        </a-row>
+                    </template>
+                    <template #actions="item">
+                        <a-popconfirm  v-if="item.popConfirm" v-bind="item.popConfirm">
+                            <a-button :disabled="item.disabled">
+                                <DeleteOutlined v-if="item.key === 'delete'" />
+                                <template v-else>
+                                    <AIcon :type="item.icon" />
+                                    <span>{{ item.text }}</span>
+                                </template>
+                            </a-button>
+                        </a-popconfirm>
+                        <template v-else>
+                            <a-button :disabled="item.disabled">
+                                <DeleteOutlined v-if="item.key === 'delete'" />
+                                <template v-else>
+                                    <AIcon :type="item.icon" />
+                                    <span>{{ item.text }}</span>
+                                </template>
+                            </a-button>
+                        </template>
+                    </template>
+                </CardBox>
+            </template>
+            <template #id="slotProps">
+                <a>{{slotProps.id}}</a>
+            </template>
+            <template #action="slotProps">
+                <a-space :size="16">
+                    <a-tooltip v-for="i in getActions(slotProps)" :key="i.key" v-bind="i.tooltip">
+                        <a-popconfirm v-if="i.popConfirm" v-bind="i.popConfirm">
+                            <a-button :disabled="i.disabled" style="padding: 0" type="link"><AIcon :type="i.icon" /></a-button>
+                        </a-popconfirm>
+                        <a-button style="padding: 0" type="link" v-else @click="i.onClick && i.onClick(slotProps)">
+                            <a-button :disabled="i.disabled" style="padding: 0" type="link"><AIcon :type="i.icon" /></a-button>
+                        </a-button>
+                    </a-tooltip>
+                </a-space>
+            </template>
+        </JTable>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { query } from '@/api/northbound/dueros'
+import type { ActionsType } from '@/components/Table/index.vue'
+import { getImage } from '@/utils/comm';
+import { DeleteOutlined } from '@ant-design/icons-vue'
+import { message } from "ant-design-vue";
+
+const request = (data: any) => query({})
+
+const columns = [
+    {
+        title: '名称',
+        dataIndex: 'name',
+        key: 'name',
+    },
+    {
+        title: 'ID',
+        dataIndex: 'id',
+        key: 'id',
+        scopedSlots: true
+    },
+    {
+        title: '分类',
+        dataIndex: 'classifiedName',
+        key: 'classifiedName',
+    },
+    {
+        title: '操作',
+        key: 'action',
+        fixed: 'right',
+        width: 250,
+        scopedSlots: true
+    }   
+]
+
+const handleClick = (dt: any) => {
+    
+}
+
+const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
+    if(!data){
+        return []
+    }
+    return [
+        {
+            key: 'edit',
+            text: "编辑",
+            tooltip: {
+                title: '编辑'
+            },
+            icon: 'icon-rizhifuwu'
+        },
+        {
+            key: 'import',
+            text: "导入",
+            tooltip: {
+                title: '导入'
+            },
+            disabled: true,
+            icon: 'icon-xiazai'
+        },
+        {
+            key: 'delete',
+            text: "删除",
+            tooltip: {
+                title: !!data?.state ? '正常的产品不能删除' : '删除'
+            },
+            popConfirm: {
+                title: '确认删除?'
+            },
+            icon: 'icon-huishouzhan'
+        }
+    ]
+}
+
+const add = () => {
+    message.warn('123')
+}
+
+</script>
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 53f50f7d..439b5bdc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -796,6 +796,11 @@
   dependencies:
     "@types/webxr" "*"
 
+"@types/web-bluetooth@^0.0.16":
+  version "0.0.16"
+  resolved "https://registry.npmmirror.com/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz#1d12873a8e49567371f2a75fe3e7f7edca6662d8"
+  integrity sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==
+
 "@types/webxr@*":
   version "0.5.0"
   resolved "https://registry.npmjs.org/@types/webxr/-/webxr-0.5.0.tgz"
@@ -1003,6 +1008,28 @@
     three "0.143.0"
     uppercamelcase "^1.1.0"
 
+"@vueuse/core@^9.10.0":
+  version "9.10.0"
+  resolved "https://registry.npmmirror.com/@vueuse/core/-/core-9.10.0.tgz#2ef6e55ca773c5b2db1e3f13b8292af96dd32214"
+  integrity sha512-CxMewME07qeuzuT/AOIQGv0EhhDoojniqU6pC3F8m5VC76L47UT18DcX88kWlP3I7d3qMJ4u/PD8iSRsy3bmNA==
+  dependencies:
+    "@types/web-bluetooth" "^0.0.16"
+    "@vueuse/metadata" "9.10.0"
+    "@vueuse/shared" "9.10.0"
+    vue-demi "*"
+
+"@vueuse/metadata@9.10.0":
+  version "9.10.0"
+  resolved "https://registry.npmmirror.com/@vueuse/metadata/-/metadata-9.10.0.tgz#1a5eb94ca755bd8e666505f47da7d88969cffdc7"
+  integrity sha512-G5VZhgTCapzU9rv0Iq2HBrVOSGzOKb+OE668NxhXNcTjUjwYxULkEhAw70FtRLMZc+hxcFAzDZlKYA0xcwNMuw==
+
+"@vueuse/shared@9.10.0":
+  version "9.10.0"
+  resolved "https://registry.npmmirror.com/@vueuse/shared/-/shared-9.10.0.tgz#49874a0f9955d28689b3133de660367c63dbc030"
+  integrity sha512-vakHJ2ZRklAzqmcVBL38RS7BxdBA4+5poG9NsSyqJxrt9kz0zX3P5CXMy0Hm6LFbZXUgvKdqAS3pUH1zX/5qTQ==
+  dependencies:
+    vue-demi "*"
+
 JSONStream@^1.0.4:
   version "1.3.5"
   resolved "https://registry.npmmirror.com/JSONStream/-/JSONStream-1.3.5.tgz"