feat: 新增了多个SVG图标,用于后续菜单和界面展示,优化概览页、设备和产品管理
- 调整了概览页流量与设备数据的随机生成范围,修正数据点计算方式,并优化ECharts的Y轴配置,移除了双Y轴显示,使图表更清晰直观。 - 为仪表盘路由添加菜单图标在仪表盘相关路由的meta信息中增加了icon字段,配置了对应的SVG图标,用于侧边栏菜单展示。 - 优化设备管理页面结构与样式 - 调整产品卡片的布局与样式,优化信息展示结构,统一操作按钮样式,并更新了产品状态的显示逻辑。 - 在设备分类、网络管理、协议管理等模块的表单配置中,设置showCollapseButton为false,隐藏了折叠按钮,简化界面交互。
|
@ -32,6 +32,7 @@ export const localMenuList: RouteRecordStringComponent[] = [
|
|||
{
|
||||
component: 'BasicLayout',
|
||||
meta: {
|
||||
icon: 'svg:material-symbols--dashboard-outline',
|
||||
order: -1,
|
||||
title: 'page.dashboard.title',
|
||||
// 不使用基础布局(仅在顶级生效)
|
||||
|
@ -46,6 +47,7 @@ export const localMenuList: RouteRecordStringComponent[] = [
|
|||
path: '/overview',
|
||||
component: '/dashboard/overview/index',
|
||||
meta: {
|
||||
icon: 'svg:ant-design--dashboard-outlined',
|
||||
affixTab: true,
|
||||
title: '概览页',
|
||||
},
|
||||
|
|
|
@ -28,9 +28,9 @@ const generateDateLabels = (type: string) => {
|
|||
switch (type) {
|
||||
case 'halfyear': {
|
||||
// 半年(180天,每10天一个数据点)
|
||||
for (let i = 17; i >= 0; i--) {
|
||||
for (let i = 179; i >= 0; i--) {
|
||||
const date = new Date(today);
|
||||
date.setDate(date.getDate() - i * 10);
|
||||
date.setDate(date.getDate() - i);
|
||||
labels.push(
|
||||
`${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`,
|
||||
);
|
||||
|
@ -85,26 +85,26 @@ const chartData = computed(() => {
|
|||
|
||||
switch (props.type) {
|
||||
case 'halfyear': {
|
||||
trafficData = generateRandomData(dataCount, 50, 800);
|
||||
deviceData = generateRandomData(dataCount, 100, 1000);
|
||||
trafficData = generateRandomData(dataCount, 1000, 10_000);
|
||||
deviceData = generateRandomData(dataCount, 10, 100);
|
||||
maxValue = 1500;
|
||||
break;
|
||||
}
|
||||
case 'month': {
|
||||
trafficData = generateRandomData(dataCount, 80, 600);
|
||||
deviceData = generateRandomData(dataCount, 200, 900);
|
||||
trafficData = generateRandomData(dataCount, 800, 6000);
|
||||
deviceData = generateRandomData(dataCount, 10, 100);
|
||||
maxValue = 1200;
|
||||
break;
|
||||
}
|
||||
case 'week': {
|
||||
trafficData = generateRandomData(dataCount, 100, 500);
|
||||
deviceData = generateRandomData(dataCount, 300, 800);
|
||||
trafficData = generateRandomData(dataCount, 1000, 5000);
|
||||
deviceData = generateRandomData(dataCount, 10, 100);
|
||||
maxValue = 1000;
|
||||
break;
|
||||
}
|
||||
default: {
|
||||
trafficData = generateRandomData(dataCount, 100, 500);
|
||||
deviceData = generateRandomData(dataCount, 300, 800);
|
||||
trafficData = generateRandomData(dataCount, 1000, 5000);
|
||||
deviceData = generateRandomData(dataCount, 10, 100);
|
||||
maxValue = 1000;
|
||||
}
|
||||
}
|
||||
|
@ -171,26 +171,19 @@ onMounted(() => {
|
|||
color: '#666',
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
max: 1000,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#e0e0e0',
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '流量',
|
||||
min: 0,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#666',
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#f0f0f0',
|
||||
},
|
||||
},
|
||||
},
|
||||
// {
|
||||
// type: 'value',
|
||||
// name: '设备数',
|
||||
// min: 0,
|
||||
// position: 'right',
|
||||
// },
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '流量',
|
||||
|
@ -212,6 +205,7 @@ onMounted(() => {
|
|||
itemStyle: {
|
||||
color: '#2D72FF',
|
||||
},
|
||||
// yAxisIndex: 0,
|
||||
// areaStyle: {
|
||||
// color: {
|
||||
// type: 'linear',
|
||||
|
@ -252,6 +246,7 @@ onMounted(() => {
|
|||
itemStyle: {
|
||||
color: '#1FC5AE',
|
||||
},
|
||||
// yAxisIndex: 1,
|
||||
// areaStyle: {
|
||||
// color: {
|
||||
// type: 'linear',
|
||||
|
|
|
@ -1,15 +1,7 @@
|
|||
<script setup lang="ts" name="DeviceIndex">
|
||||
import type { DeviceForm } from '#/api/device/device/model';
|
||||
|
||||
import {
|
||||
h,
|
||||
nextTick,
|
||||
onActivated,
|
||||
onMounted,
|
||||
onUnmounted,
|
||||
reactive,
|
||||
ref,
|
||||
} from 'vue';
|
||||
import { h, nextTick, onMounted, onUnmounted, reactive, ref } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
|
||||
import { EllipsisText, Page, useVbenDrawer } from '@vben/common-ui';
|
||||
|
@ -197,11 +189,6 @@ const loadProducts = async () => {
|
|||
value: item.id,
|
||||
}));
|
||||
};
|
||||
// 2. 在顶层直接调用
|
||||
onActivated(() => {
|
||||
console.log('组件被激活了!');
|
||||
// 这里可以执行重新加载数据等操作
|
||||
});
|
||||
|
||||
onMounted(async () => {
|
||||
console.log('onMounted');
|
||||
|
@ -394,16 +381,51 @@ const [DeviceDrawer, drawerApi] = useVbenDrawer({
|
|||
<List
|
||||
:loading="loading"
|
||||
class="content-list"
|
||||
:grid="{ gutter: 20, xs: 1, sm: 1, md: 2, lg: 3, xl: 4, xxl: 4 }"
|
||||
:grid="{ gutter: 20, xs: 1, sm: 1, md: 2, lg: 2, xl: 3, xxl: 4 }"
|
||||
:data-source="dataSource"
|
||||
>
|
||||
<template #renderItem="{ item }">
|
||||
<ListItem>
|
||||
<Card
|
||||
class="relative cursor-pointer hover:shadow-lg"
|
||||
class="hover:border-primary-border relative cursor-pointer hover:shadow-lg"
|
||||
@click.stop="handleView(item)"
|
||||
:body-style="{ padding: '15px 25px' }"
|
||||
>
|
||||
<div class="mb-2 flex items-center justify-between">
|
||||
<EllipsisText
|
||||
:tooltip-when-ellipsis="true"
|
||||
class="min-w-0 flex-1 !cursor-pointer text-lg font-medium"
|
||||
>
|
||||
{{ item.deviceName || '-' }}
|
||||
</EllipsisText>
|
||||
<div
|
||||
class="card-status text-sm"
|
||||
:class="getDeviceStateMeta(item.deviceState).type"
|
||||
>
|
||||
{{ getDeviceStateMeta(item.deviceState).label }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-muted-foreground flex text-sm">
|
||||
<div class="flex flex-1 flex-col justify-around">
|
||||
<div class="">
|
||||
<div class="text-sm text-[#555]">所属产品:</div>
|
||||
<EllipsisText
|
||||
:tooltip-when-ellipsis="true"
|
||||
class="min-w-0 flex-1 !cursor-pointer text-lg font-medium text-[#999]"
|
||||
>
|
||||
{{ item.productObj?.productName || '-' }}
|
||||
</EllipsisText>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-sm text-[#555]">设备类型:</div>
|
||||
<EllipsisText
|
||||
:tooltip-when-ellipsis="true"
|
||||
class="min-w-0 flex-1 !cursor-pointer text-lg font-medium text-[#999]"
|
||||
>
|
||||
{{ getDeviceTypeLabel(item.deviceType) }}
|
||||
</EllipsisText>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-img">
|
||||
<img
|
||||
:src="item.imgUrl || '/images/device/device-card.png'"
|
||||
|
@ -411,56 +433,46 @@ const [DeviceDrawer, drawerApi] = useVbenDrawer({
|
|||
class="h-full w-full"
|
||||
/>
|
||||
</div>
|
||||
<div class="ml-3 min-w-0 flex-1">
|
||||
<!-- <div class="mb-1 text-lg font-medium">
|
||||
{{ item.deviceName || '-' }}
|
||||
</div> -->
|
||||
<EllipsisText class="mb-1 text-lg font-medium">
|
||||
{{ item.deviceName || '-' }}
|
||||
</EllipsisText>
|
||||
<div>
|
||||
所属产品:{{ item.productObj?.productName || '-' }}
|
||||
</div>
|
||||
<div>
|
||||
设备类型:{{ getDeviceTypeLabel(item.deviceType) }}
|
||||
</div>
|
||||
<div
|
||||
class="card-status"
|
||||
:class="
|
||||
getDeviceStateMeta(item.deviceState).type ===
|
||||
'success'
|
||||
? 'enabled'
|
||||
: 'disabled'
|
||||
"
|
||||
>
|
||||
{{ getDeviceStateMeta(item.deviceState).label }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<template #actions>
|
||||
<Button
|
||||
type="link"
|
||||
v-access:code="['device:device:edit']"
|
||||
:icon="h(EditOutlined)"
|
||||
@click.stop="handleEdit(item)"
|
||||
>
|
||||
{{ $t('pages.common.edit') }}
|
||||
</Button>
|
||||
<Popconfirm
|
||||
title="确认删除?"
|
||||
@confirm.stop="handleDelete(item)"
|
||||
>
|
||||
<div
|
||||
class="text-muted-foreground mt-2 flex items-center justify-between text-sm"
|
||||
>
|
||||
<div class="flex flex-1 items-center">
|
||||
<div class="text-base text-[#555]">key:</div>
|
||||
<EllipsisText
|
||||
:tooltip-when-ellipsis="true"
|
||||
class="ml-1 min-w-0 flex-1 !cursor-pointer text-xs text-[#999]"
|
||||
>
|
||||
{{ item.productObj?.productKey || '-' }}
|
||||
</EllipsisText>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<Button
|
||||
type="link"
|
||||
:icon="h(DeleteOutlined)"
|
||||
danger
|
||||
@click.stop
|
||||
v-access:code="['device:device:remove']"
|
||||
size="small"
|
||||
v-access:code="['device:device:edit']"
|
||||
:icon="h(EditOutlined)"
|
||||
@click.stop="handleEdit(item)"
|
||||
>
|
||||
{{ $t('pages.common.delete') }}
|
||||
{{ $t('pages.common.edit') }}
|
||||
</Button>
|
||||
</Popconfirm>
|
||||
</template>
|
||||
<Popconfirm
|
||||
title="确认删除?"
|
||||
@confirm.stop="handleDelete(item)"
|
||||
>
|
||||
<Button
|
||||
type="link"
|
||||
size="small"
|
||||
:icon="h(DeleteOutlined)"
|
||||
danger
|
||||
@click.stop
|
||||
v-access:code="['device:device:remove']"
|
||||
>
|
||||
{{ $t('pages.common.delete') }}
|
||||
</Button>
|
||||
</Popconfirm>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</ListItem>
|
||||
</template>
|
||||
|
@ -568,8 +580,8 @@ const [DeviceDrawer, drawerApi] = useVbenDrawer({
|
|||
}
|
||||
|
||||
.card-img {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
|
@ -587,44 +599,43 @@ const [DeviceDrawer, drawerApi] = useVbenDrawer({
|
|||
}
|
||||
|
||||
.card-status {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 70px;
|
||||
height: 30px;
|
||||
font-size: 12px;
|
||||
color: #000;
|
||||
text-indent: 10px;
|
||||
border-radius: 0 6px;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 11px;
|
||||
left: 11px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
&::before {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
content: '';
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
&.enabled {
|
||||
background-color: #d9dffd;
|
||||
&.success {
|
||||
color: hsl(var(--success));
|
||||
|
||||
&::after {
|
||||
background-color: hsl(var(--primary));
|
||||
&::before {
|
||||
background-color: hsl(var(--success));
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
background-color: #fad7d9;
|
||||
&.error {
|
||||
color: hsl(var(--destructive));
|
||||
|
||||
&::after {
|
||||
&::before {
|
||||
background-color: hsl(var(--destructive));
|
||||
}
|
||||
}
|
||||
|
||||
&.warning {
|
||||
color: hsl(var(--warning));
|
||||
|
||||
&::before {
|
||||
background-color: hsl(var(--warning));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-card .ant-card-actions > li) {
|
||||
|
|
|
@ -388,16 +388,51 @@ const [ProductDrawer, drawerApi] = useVbenDrawer({
|
|||
<List
|
||||
:loading="loading"
|
||||
class="content-list"
|
||||
:grid="{ gutter: 20, xs: 1, sm: 1, md: 2, lg: 3, xl: 4, xxl: 4 }"
|
||||
:grid="{ gutter: 20, xs: 1, sm: 1, md: 2, lg: 2, xl: 3, xxl: 4 }"
|
||||
:data-source="dataSource"
|
||||
>
|
||||
<template #renderItem="{ item }">
|
||||
<ListItem>
|
||||
<Card
|
||||
class="relative cursor-pointer hover:shadow-lg"
|
||||
class="hover:border-primary-border relative cursor-pointer hover:shadow-lg"
|
||||
@click.stop="handleView(item)"
|
||||
:body-style="{ padding: '15px 25px' }"
|
||||
>
|
||||
<div class="mb-2 flex items-center justify-between">
|
||||
<EllipsisText
|
||||
:tooltip-when-ellipsis="true"
|
||||
class="min-w-0 flex-1 !cursor-pointer text-lg font-medium"
|
||||
>
|
||||
{{ item.productName || '-' }}
|
||||
</EllipsisText>
|
||||
<div
|
||||
class="card-status text-sm"
|
||||
:class="item.enabled === '1' ? 'success' : 'error'"
|
||||
>
|
||||
{{ item.enabled === '1' ? '启用' : '禁用' }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-muted-foreground flex text-sm">
|
||||
<div class="flex flex-1 flex-col justify-around">
|
||||
<div class="">
|
||||
<div class="text-sm text-[#555]">产品分类:</div>
|
||||
<EllipsisText
|
||||
:tooltip-when-ellipsis="true"
|
||||
class="min-w-0 flex-1 !cursor-pointer text-lg font-medium text-[#999]"
|
||||
>
|
||||
{{ item.categoryName || '-' }}
|
||||
</EllipsisText>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-sm text-[#555]">设备类型:</div>
|
||||
<EllipsisText
|
||||
:tooltip-when-ellipsis="true"
|
||||
class="min-w-0 flex-1 !cursor-pointer text-lg font-medium text-[#999]"
|
||||
>
|
||||
{{ getDeviceTypeLabel(item.deviceType) }}
|
||||
</EllipsisText>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-img">
|
||||
<img
|
||||
:src="item.imgUrl || '/images/device/device-card.png'"
|
||||
|
@ -405,64 +440,66 @@ const [ProductDrawer, drawerApi] = useVbenDrawer({
|
|||
class="h-full w-full"
|
||||
/>
|
||||
</div>
|
||||
<div class="ml-3 flex-1">
|
||||
<div class="mb-1 text-lg font-medium">
|
||||
{{ item.productName || '-' }}
|
||||
</div>
|
||||
<div>产品分类:{{ item.categoryName || '-' }}</div>
|
||||
<div>
|
||||
设备类型:{{ getDeviceTypeLabel(item.deviceType) }}
|
||||
</div>
|
||||
<div
|
||||
class="card-status"
|
||||
:class="item.enabled === '1' ? 'enabled' : 'disabled'"
|
||||
</div>
|
||||
<div
|
||||
class="text-muted-foreground mt-2 flex items-center justify-between text-sm"
|
||||
>
|
||||
<div class="flex flex-1 items-center">
|
||||
<div class="text-base text-[#555]">key:</div>
|
||||
<EllipsisText
|
||||
:tooltip-when-ellipsis="true"
|
||||
class="ml-1 min-w-0 flex-1 !cursor-pointer text-xs text-[#999]"
|
||||
>
|
||||
{{ item.enabled === '1' ? '启用' : '禁用' }}
|
||||
</div>
|
||||
{{ item.productKey || '-' }}
|
||||
</EllipsisText>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<Button
|
||||
type="link"
|
||||
size="small"
|
||||
v-access:code="['device:product:edit']"
|
||||
:icon="h(EditOutlined)"
|
||||
@click.stop="handleEdit(item)"
|
||||
>
|
||||
{{ $t('pages.common.edit') }}
|
||||
</Button>
|
||||
<Popconfirm
|
||||
:title="
|
||||
item.enabled === '1' ? '确认禁用?' : '确认启用?'
|
||||
"
|
||||
@confirm.stop="handleToggleEnabled(item)"
|
||||
>
|
||||
<Button
|
||||
type="link"
|
||||
size="small"
|
||||
:icon="
|
||||
item.enabled === '1'
|
||||
? h(StopOutlined)
|
||||
: h(CheckCircleOutlined)
|
||||
"
|
||||
:danger="item.enabled === '1'"
|
||||
@click.stop
|
||||
>
|
||||
{{ item.enabled === '1' ? '禁用' : '启用' }}
|
||||
</Button>
|
||||
</Popconfirm>
|
||||
<Popconfirm
|
||||
title="确认删除?"
|
||||
@confirm.stop="handleDelete(item)"
|
||||
>
|
||||
<Button
|
||||
type="link"
|
||||
size="small"
|
||||
:icon="h(DeleteOutlined)"
|
||||
danger
|
||||
@click.stop
|
||||
v-access:code="['device:device:remove']"
|
||||
>
|
||||
{{ $t('pages.common.delete') }}
|
||||
</Button>
|
||||
</Popconfirm>
|
||||
</div>
|
||||
</div>
|
||||
<template #actions>
|
||||
<Button
|
||||
type="link"
|
||||
v-access:code="['device:product:edit']"
|
||||
:icon="h(EditOutlined)"
|
||||
@click.stop="handleEdit(item)"
|
||||
>
|
||||
{{ $t('pages.common.edit') }}
|
||||
</Button>
|
||||
<Popconfirm
|
||||
:title="
|
||||
item.enabled === '1' ? '确认禁用?' : '确认启用?'
|
||||
"
|
||||
@confirm.stop="handleToggleEnabled(item)"
|
||||
>
|
||||
<Button
|
||||
type="link"
|
||||
:icon="
|
||||
item.enabled === '1'
|
||||
? h(StopOutlined)
|
||||
: h(CheckCircleOutlined)
|
||||
"
|
||||
@click.stop
|
||||
>
|
||||
{{ item.enabled === '1' ? '禁用' : '启用' }}
|
||||
</Button>
|
||||
</Popconfirm>
|
||||
<Popconfirm
|
||||
title="确认删除?"
|
||||
@confirm="handleDelete(item)"
|
||||
>
|
||||
<Button
|
||||
type="link"
|
||||
:icon="h(DeleteOutlined)"
|
||||
danger
|
||||
@click.stop
|
||||
v-access:code="['device:product:remove']"
|
||||
>
|
||||
{{ $t('pages.common.delete') }}
|
||||
</Button>
|
||||
</Popconfirm>
|
||||
</template>
|
||||
</Card>
|
||||
</ListItem>
|
||||
</template>
|
||||
|
@ -570,8 +607,8 @@ const [ProductDrawer, drawerApi] = useVbenDrawer({
|
|||
}
|
||||
|
||||
.card-img {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
}
|
||||
|
||||
:deep(.ant-list-item) {
|
||||
|
@ -584,44 +621,43 @@ const [ProductDrawer, drawerApi] = useVbenDrawer({
|
|||
}
|
||||
|
||||
.card-status {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 70px;
|
||||
height: 30px;
|
||||
font-size: 12px;
|
||||
color: #000;
|
||||
text-indent: 10px;
|
||||
border-radius: 0 6px;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 11px;
|
||||
left: 11px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
&::before {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
content: '';
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
&.enabled {
|
||||
background-color: #d9dffd;
|
||||
&.success {
|
||||
color: hsl(var(--success));
|
||||
|
||||
&::after {
|
||||
background-color: hsl(var(--primary));
|
||||
&::before {
|
||||
background-color: hsl(var(--success));
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
background-color: #fad7d9;
|
||||
&.error {
|
||||
color: hsl(var(--destructive));
|
||||
|
||||
&::after {
|
||||
&::before {
|
||||
background-color: hsl(var(--destructive));
|
||||
}
|
||||
}
|
||||
|
||||
&.warning {
|
||||
color: hsl(var(--warning));
|
||||
|
||||
&::before {
|
||||
background-color: hsl(var(--warning));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-card .ant-card-actions > li) {
|
||||
|
|
|
@ -22,6 +22,7 @@ import productCategoryDrawer from './productCategory-drawer.vue';
|
|||
|
||||
const formOptions: VbenFormProps = {
|
||||
collapsed: true,
|
||||
showCollapseButton: false,
|
||||
commonConfig: {
|
||||
labelWidth: 80,
|
||||
componentProps: {
|
||||
|
|
|
@ -23,6 +23,7 @@ import networkDrawer from './network-drawer.vue';
|
|||
|
||||
const formOptions: VbenFormProps = {
|
||||
collapsed: true,
|
||||
showCollapseButton: false,
|
||||
commonConfig: {
|
||||
labelWidth: 80,
|
||||
componentProps: {
|
||||
|
|
|
@ -22,6 +22,7 @@ import protocolDrawer from './protocol-drawer.vue';
|
|||
|
||||
const formOptions: VbenFormProps = {
|
||||
collapsed: true,
|
||||
showCollapseButton: false,
|
||||
commonConfig: {
|
||||
labelWidth: 80,
|
||||
componentProps: {
|
||||
|
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024"><path fill="currentColor" d="M924.8 385.6a446.7 446.7 0 0 0-96-142.4a446.7 446.7 0 0 0-142.4-96C631.1 123.8 572.5 112 512 112s-119.1 11.8-174.4 35.2a446.7 446.7 0 0 0-142.4 96a446.7 446.7 0 0 0-96 142.4C75.8 440.9 64 499.5 64 560c0 132.7 58.3 257.7 159.9 343.1l1.7 1.4c5.8 4.8 13.1 7.5 20.6 7.5h531.7c7.5 0 14.8-2.7 20.6-7.5l1.7-1.4C901.7 817.7 960 692.7 960 560c0-60.5-11.9-119.1-35.2-174.4M761.4 836H262.6A371.12 371.12 0 0 1 140 560c0-99.4 38.7-192.8 109-263c70.3-70.3 163.7-109 263-109c99.4 0 192.8 38.7 263 109c70.3 70.3 109 163.7 109 263c0 105.6-44.5 205.5-122.6 276M623.5 421.5a8.03 8.03 0 0 0-11.3 0L527.7 506c-18.7-5-39.4-.2-54.1 14.5a55.95 55.95 0 0 0 0 79.2a55.95 55.95 0 0 0 79.2 0a55.87 55.87 0 0 0 14.5-54.1l84.5-84.5c3.1-3.1 3.1-8.2 0-11.3zM490 320h44c4.4 0 8-3.6 8-8v-80c0-4.4-3.6-8-8-8h-44c-4.4 0-8 3.6-8 8v80c0 4.4 3.6 8 8 8m260 218v44c0 4.4 3.6 8 8 8h80c4.4 0 8-3.6 8-8v-44c0-4.4-3.6-8-8-8h-80c-4.4 0-8 3.6-8 8m12.7-197.2l-31.1-31.1a8.03 8.03 0 0 0-11.3 0l-56.6 56.6a8.03 8.03 0 0 0 0 11.3l31.1 31.1c3.1 3.1 8.2 3.1 11.3 0l56.6-56.6c3.1-3.1 3.1-8.2 0-11.3m-458.6-31.1a8.03 8.03 0 0 0-11.3 0l-31.1 31.1a8.03 8.03 0 0 0 0 11.3l56.6 56.6c3.1 3.1 8.2 3.1 11.3 0l31.1-31.1c3.1-3.1 3.1-8.2 0-11.3zM262 530h-80c-4.4 0-8 3.6-8 8v44c0 4.4 3.6 8 8 8h80c4.4 0 8-3.6 8-8v-44c0-4.4-3.6-8-8-8"/></svg>
|
After Width: | Height: | Size: 1.4 KiB |
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path fill="currentColor" d="m12.5 7.5l-1.4-1.4l3.5-3.5c.8-.8 2.1-.8 2.8 0l3.5 3.5l-1.4 1.4L16 4zm7 17l1.4 1.4l-3.5 3.5c-.8.8-2.1.8-2.8 0l-3.5-3.5l1.4-1.4L16 28zm5-12l1.4-1.4l3.5 3.5c.8.8.8 2.1 0 2.8l-3.5 3.5l-1.4-1.4L28 16zm-17 7l-1.4 1.4l-3.5-3.5c-.8-.8-.8-2.1 0-2.8l3.5-3.5l1.4 1.4L4 16z"/><path fill="currentColor" d="M26 24c-.2 0-.3 0-.5.1L19.4 18c.8-1.2.8-2.8 0-4l6.1-6.1c.2.1.3.1.5.1c1.1 0 2-.9 2-2s-.9-2-2-2s-2 .9-2 2c0 .2 0 .3.1.5L18 12.6c-1.2-.8-2.8-.8-4 0L7.9 6.5c.1-.2.1-.3.1-.5c0-1.1-.9-2-2-2s-2 .9-2 2s.9 2 2 2c.2 0 .3 0 .5-.1l6.1 6.1c-.8 1.2-.8 2.8 0 4l-6.1 6.1c-.2-.1-.3-.1-.5-.1c-1.1 0-2 .9-2 2s.9 2 2 2s2-.9 2-2c0-.2 0-.3-.1-.5l6.1-6.1c1.2.8 2.8.8 4 0l6.1 6.1c0 .2-.1.3-.1.5c0 1.1.9 2 2 2s2-.9 2-2s-.9-2-2-2m-10-6c-1.1 0-2-.9-2-2s.9-2 2-2s2 .9 2 2s-.9 2-2 2"/></svg>
|
After Width: | Height: | Size: 867 B |
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path fill="currentColor" d="m30 28.6l-2.8-2.8c.5-.8.8-1.8.8-2.8c0-2.8-2.2-5-5-5s-5 2.2-5 5s2.2 5 5 5c1 0 2-.3 2.8-.8l2.8 2.8zM20 23c0-1.7 1.3-3 3-3s3 1.3 3 3s-1.3 3-3 3s-3-1.3-3-3M8 16h10v2H8zm0-6h12v2H8z"/><path fill="currentColor" d="m14 27.7l-5.2-2.8C5.8 23.4 4 20.3 4 17V4h20v11h2V4c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v13c0 4.1 2.2 7.8 5.8 9.7L14 30z"/></svg>
|
After Width: | Height: | Size: 444 B |
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><circle cx="5" cy="19" r="1" fill="currentColor"/><path fill="currentColor" d="M4 4h2v9H4z"/><path fill="currentColor" d="M7 2H3a1 1 0 0 0-1 1v18a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1m0 19H3V3h4Z"/><circle cx="12" cy="19" r="1" fill="currentColor"/><path fill="currentColor" d="M11 4h2v9h-2z"/><path fill="currentColor" d="M14 2h-4a1 1 0 0 0-1 1v18a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1m0 19h-4V3h4Z"/><circle cx="19" cy="19" r="1" fill="currentColor"/><path fill="currentColor" d="M18 4h2v9h-2z"/><path fill="currentColor" d="M21 2h-4a1 1 0 0 0-1 1v18a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1m0 19h-4V3h4Z"/></svg>
|
After Width: | Height: | Size: 719 B |
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v5m-3 0h6M4 11h16M5 15h14a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1"/></svg>
|
After Width: | Height: | Size: 292 B |
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="2048" height="2048" viewBox="0 0 2048 2048"><path fill="currentColor" d="m960 120l832 416v1040l-832 415l-832-415V536zm625 456L960 264L719 384l621 314zM960 888l238-118l-622-314l-241 120zM256 680v816l640 320v-816zm768 1136l640-320V680l-640 320z"/></svg>
|
After Width: | Height: | Size: 298 B |
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"><path stroke-linejoin="round" d="M12 22h-1.5c-3.771 0-5.657 0-6.828-1.172S2.5 17.771 2.5 14v-4c0-3.771 0-5.657 1.172-6.828S6.729 2 10.5 2h1c3.771 0 5.657 0 6.828 1.172S19.5 6.229 19.5 10v1M7 7h8m-8 5h4.5"/><path d="M17.5 20.773c1.767 0 3.2-1.465 3.2-3.273c0-1.807-1.433-3.273-3.2-3.273m0 6.546c-1.767 0-3.2-1.465-3.2-3.273c0-1.807 1.433-3.273 3.2-3.273m0 6.546V22m0-7.773V13m-2.909 2.715l-1.09-.67m7.999 4.91l-1.09-.67m-.001-3.57l1.09-.67m-7.999 4.91l1.09-.67"/></g></svg>
|
After Width: | Height: | Size: 634 B |
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><g fill="none" stroke="currentColor" stroke-width="4"><path stroke-linecap="round" stroke-linejoin="round" d="M5 35a2 2 0 0 1 2-2h34a2 2 0 0 1 2 2v7H5zm37-17h-8l-6-6l6-6h8"/><circle cx="8" cy="12" r="4"/><path stroke-linecap="round" stroke-linejoin="round" d="M12 12h16m-18 4l8 17"/></g></svg>
|
After Width: | Height: | Size: 376 B |
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><path fill="currentColor" fill-rule="evenodd" d="M426.666 42.667v426.667H85.333V42.667zM384 85.334H128v341.333h256zM341.333 320v42.667H170.666V320zm0-85.333v42.667H170.666v-42.667zm0-85.333V192H170.666v-42.666z"/></svg>
|
After Width: | Height: | Size: 306 B |
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="m12 16l1.4-1.4l-1.575-1.6H16v-2h-4.175L13.4 9.4L12 8l-4 4zm-7 5q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h4.2q.325-.9 1.088-1.45T12 1t1.713.55T14.8 3H19q.825 0 1.413.588T21 5v14q0 .825-.587 1.413T19 21zm0-2h14V5H5zm7-14.75q.325 0 .538-.213t.212-.537t-.213-.537T12 2.75t-.537.213t-.213.537t.213.538t.537.212M5 19V5z"/></svg>
|
After Width: | Height: | Size: 440 B |
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M13 9V3h8v6zM3 13V3h8v10zm10 8V11h8v10zM3 21v-6h8v6zm2-10h4V5H5zm10 8h4v-6h-4zm0-12h4V5h-4zM5 19h4v-2H5zm4-2"/></svg>
|
After Width: | Height: | Size: 229 B |
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M14 20H4v-3c0-2.7 5.3-4 8-4c1.5 0 3.9.4 5.7 1.3c-.8.3-1.4.7-2 1.2c-1.1-.4-2.4-.6-3.7-.6c-3 0-6.1 1.5-6.1 2.1v1.1h8.3c-.1.4-.2.9-.2 1.4zm9-.5c0 1.9-1.6 3.5-3.5 3.5S16 21.4 16 19.5s1.6-3.5 3.5-3.5s3.5 1.6 3.5 3.5M12 6c1.1 0 2 .9 2 2s-.9 2-2 2s-2-.9-2-2s.9-2 2-2m0-2C9.8 4 8 5.8 8 8s1.8 4 4 4s4-1.8 4-4s-1.8-4-4-4"/></svg>
|
After Width: | Height: | Size: 431 B |
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><rect width="15" height="18.5" x="4.5" y="2.75" rx="3.5"/><path d="M8.5 6.755h7m-7 4h7m-7 4H12"/></g></svg>
|
After Width: | Height: | Size: 293 B |
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M4 20v-6a8 8 0 1 1 16 0v6h1v2H3v-2zm2 0h12v-6a6 6 0 0 0-12 0zm5-18h2v3h-2zm8.778 2.808l1.414 1.414l-2.12 2.121l-1.415-1.414zM2.808 6.222l1.414-1.414l2.121 2.12L4.93 8.344zM7 14a5 5 0 0 1 5-5v2a3 3 0 0 0-3 3z"/></svg>
|
After Width: | Height: | Size: 328 B |
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 10c0-3.771 0-5.657 1.172-6.828S7.229 2 11 2h2c3.771 0 5.657 0 6.828 1.172S21 6.229 21 10v4c0 3.771 0 5.657-1.172 6.828S16.771 22 13 22h-2c-3.771 0-5.657 0-6.828-1.172S3 17.771 3 14z"/><path stroke-linecap="round" d="M8 12h8M8 8h8m-8 8h5"/></g></svg>
|
After Width: | Height: | Size: 400 B |
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"><path d="M7 10.5v3m-5 0h10m-5-3a5 5 0 1 0 0-10a5 5 0 0 0 0 10m-5-5h10"/><path d="M7 10.5c3-3.42 3-6.76 0-10c-2.94 3.12-3 6.44 0 10"/></g></svg>
|
After Width: | Height: | Size: 327 B |
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4h6v6H4zm10 0h6v6h-6zM4 14h6v6H4zm10 3a3 3 0 1 0 6 0a3 3 0 1 0-6 0"/></svg>
|
After Width: | Height: | Size: 268 B |
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M4 6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z"/><path d="M4 9h6l1-2l2 4l1-2h6M4 14h16m-6 3v.01m3-.01v.01"/></g></svg>
|
After Width: | Height: | Size: 334 B |
|
@ -17,7 +17,55 @@ const SvgWechatIcon = createIconifyIcon('svg:wechat');
|
|||
const SvgQQIcon = createIconifyIcon('svg:qq');
|
||||
const SvgSnailJobIcon = createIconifyIcon('svg:snail-job');
|
||||
|
||||
// 后期添加菜单图标
|
||||
|
||||
const SvgEosIconsProductsOutlinedIcon = createIconifyIcon(
|
||||
'svg:eos-icons--products-outlined',
|
||||
);
|
||||
const SvgFluentMdl2ProductIcon = createIconifyIcon('svg:fluent-mdl2--product');
|
||||
const SvgTablerDeviceHeartMonitorIcon = createIconifyIcon(
|
||||
'svg:tabler--device-heart-monitor',
|
||||
);
|
||||
const SvgTablerCategoryIcon = createIconifyIcon('svg:tabler--category');
|
||||
const SvgMdiAccountOnlineOutlineIcon = createIconifyIcon(
|
||||
'svg:mdi--account-online-outline',
|
||||
);
|
||||
const SvgMaterialSymbolsAssignmentReturnOutlineIcon = createIconifyIcon(
|
||||
'svg:material-symbols--assignment-return-outline',
|
||||
);
|
||||
const SvgProiconsDocumentIcon = createIconifyIcon('svg:proicons--document');
|
||||
const SvgSolarDocumentTextLinearIcon = createIconifyIcon(
|
||||
'svg:solar--document-text-linear',
|
||||
);
|
||||
const SvgFlowbiteDesktopPcOutlineIcon = createIconifyIcon(
|
||||
'svg:flowbite--desktop-pc-outline',
|
||||
);
|
||||
const SvgIconParkOutlineRobotTwoIcon = createIconifyIcon(
|
||||
'svg:icon-park-outline--robot-two',
|
||||
);
|
||||
const SvgCarbonRuleDataQualityIcon = createIconifyIcon(
|
||||
'svg:carbon--rule-data-quality',
|
||||
);
|
||||
const SvgRiAlarmWarningLineIcon = createIconifyIcon(
|
||||
'svg:ri--alarm-warning-line',
|
||||
);
|
||||
const SvgIxProtocolIcon = createIconifyIcon('svg:ix--protocol');
|
||||
const SvgStreamlineNetworkIcon = createIconifyIcon('svg:streamline--network');
|
||||
const SvgCarbonIbmCloudTransitGatewayIcon = createIconifyIcon(
|
||||
'svg:carbon--ibm-cloud-transit-gateway',
|
||||
);
|
||||
const SvgHugeiconsLicenseMaintenanceIcon = createIconifyIcon(
|
||||
'svg:hugeicons--license-maintenance',
|
||||
);
|
||||
const SvgMaterialSymbolsDashboardOutlineIcon = createIconifyIcon(
|
||||
'svg:material-symbols--dashboard-outline',
|
||||
);
|
||||
const SvgAntDesignDashboardOutlinedIcon = createIconifyIcon(
|
||||
'svg:ant-design--dashboard-outlined',
|
||||
);
|
||||
|
||||
export {
|
||||
SvgAntDesignDashboardOutlinedIcon,
|
||||
SvgAntdvLogoIcon,
|
||||
SvgAvatar1Icon,
|
||||
SvgAvatar2Icon,
|
||||
|
@ -25,11 +73,28 @@ export {
|
|||
SvgAvatar4Icon,
|
||||
SvgBellIcon,
|
||||
SvgCakeIcon,
|
||||
SvgCarbonIbmCloudTransitGatewayIcon,
|
||||
SvgCarbonRuleDataQualityIcon,
|
||||
SvgCardIcon,
|
||||
SvgDownloadIcon,
|
||||
SvgEosIconsProductsOutlinedIcon,
|
||||
SvgFlowbiteDesktopPcOutlineIcon,
|
||||
SvgFluentMdl2ProductIcon,
|
||||
SvgHugeiconsLicenseMaintenanceIcon,
|
||||
SvgIconParkOutlineRobotTwoIcon,
|
||||
SvgIxProtocolIcon,
|
||||
SvgMaterialSymbolsAssignmentReturnOutlineIcon,
|
||||
SvgMaterialSymbolsDashboardOutlineIcon,
|
||||
SvgMaxKeyIcon,
|
||||
SvgMdiAccountOnlineOutlineIcon,
|
||||
SvgProiconsDocumentIcon,
|
||||
SvgQQIcon,
|
||||
SvgRiAlarmWarningLineIcon,
|
||||
SvgSnailJobIcon,
|
||||
SvgSolarDocumentTextLinearIcon,
|
||||
SvgStreamlineNetworkIcon,
|
||||
SvgTablerCategoryIcon,
|
||||
SvgTablerDeviceHeartMonitorIcon,
|
||||
SvgTopiamIcon,
|
||||
SvgWechatIcon,
|
||||
};
|
||||
|
|