+
+English | [简体中文](README_ZH.md)
+
+An open-source platform for managing and observing GPU resources, based on the HAMi project
+
+[](LICENSE)
+
+HAMi-WebUI is built upon the [HAMi](https://github.com/Project-HAMi/HAMi) open-source project. It extends HAMi by providing an intuitive web interface for visualizing and managing GPU resource allocation and usage across nodes. The platform supports detailed views for tasks and GPUs, enabling teams to monitor resource consumption effectively.
+
+- **Resource Overview:** Provides a comprehensive view of all resources, including node and GPU usage. Quickly assess the status of all nodes and GPUs.
+- **Node Management:** Explore detailed node information, including node status, resource usage, and availability.
+- **GPU Management:** Visualize the GPU usage on each node, providing detailed insights into the allocation and usage of compute power and memory.
+- **Task Management:** Track tasks and their resource consumption. View task creation times, status, GPU allocations, and more.
+
+## Get started
+
+- [Installation guide](docs/installation/helm/index.md)
+
+## Contributing
+
+If you're interested in contributing to HAMi-WebUI:
+
+- Start by reading the [Contributing guide](CONTRIBUTING.md).
+- Set up your local environment by following our [Developer guide](docs/contribute/developer-guide.md).
+- Explore [beginner-friendly issues](https://github.com/Project-HAMi/HAMi-WebUI/issues?q=is%3Aopen+is%3Aissue+label%3A%22beginner+friendly%22).
+
+## Get involved
+
+- Regular Community Meeting: Friday at 16:00 UTC+8 (Chinese)(weekly). [Convert to your timezone](https://www.thetimezoneconverter.com/?t=14%3A30&tz=GMT%2B8&).
+ - [Meeting Notes and Agenda](https://docs.google.com/document/d/1YC6hco03_oXbF9IOUPJ29VWEddmITIKIfSmBX8JtGBw/edit#heading=h.g61sgp7w0d0c)
+ - [Meeting Link](https://meeting.tencent.com/dm/Ntiwq1BICD1P)
+- Join our community on [Slack](https://join.slack.com/t/hami-hsf3791/shared_invite/zt-2gcteqiph-Ls8Atnpky6clrspCAQ_eGQ).
+
+## License
+
+HAMi-WebUI is distributed under [Apache-2.0](LICENSE). For details, see [LICENSE](LICENSE).
\ No newline at end of file
diff --git a/README_ZH.md b/README_ZH.md
new file mode 100644
index 0000000..004b9f8
--- /dev/null
+++ b/README_ZH.md
@@ -0,0 +1,38 @@
+
+ {{ title }}
+
+
+ {{ count }} {{ unit }}
+
+
+ {{ title }}管理 > {{ props.name }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/web/projects/vgpu/components/TabTop.vue b/packages/web/projects/vgpu/components/TabTop.vue
new file mode 100644
index 0000000..d3efdd1
--- /dev/null
+++ b/packages/web/projects/vgpu/components/TabTop.vue
@@ -0,0 +1,121 @@
+
+
+
+
+
+
+ 详细信息
+ -
+
-
+ {{ label }}
+
+ {{ detail[value] }} +
+
+ - + + {{ label }} + + {{ count }} 倍 + + +
-
+
-
+
+
+
+
+
+
+
+
+
+
+ '; + for (var i = 0; i < params.length; i++) { + res += + params[i].marker + (+params[i].value).toFixed(0) + ` ${unit}
`; + } + return res; + }, + }, + grid: { + top: 7, // 上边距 + bottom: 20, // 下边距 + left: '7%', // 左边距 + right: 10, // 右边距 + }, + xAxis: { + type: 'category', + data: data.map((item) => timeParse(+item.timestamp)), + axisLabel: { + formatter: function (value) { + return timeParse(value, 'HH:mm'); + }, + }, + }, + yAxis: { + type: 'value', + }, + series: [ + { + data: data.map((item) => { + return item.value.toFixed(1); + }), + type: 'line', + areaStyle: { + normal: { + color: { + type: 'linear', + x: 0, // 渐变起始点 0% + y: 0, // 渐变起始点 0% + x2: 0, // 渐变结束点 100% + y2: 1, // 渐变结束点 100% + colorStops: [ + { + offset: 0, + color: 'rgba(84, 112, 198, 0.16)', // 渐变起始颜色 + }, + { + offset: 1, + color: 'rgba(84, 112, 198, 0.00)', // 渐变结束颜色 + }, + ], + global: false, // 缺省为 false + }, + }, + }, + }, + ], + }; +}; diff --git a/packages/web/projects/vgpu/components/gauge.vue b/packages/web/projects/vgpu/components/gauge.vue new file mode 100644 index 0000000..d5a10a5 --- /dev/null +++ b/packages/web/projects/vgpu/components/gauge.vue @@ -0,0 +1,41 @@ + +
+
+
+
+
+
diff --git a/packages/web/projects/vgpu/components/previewBar.vue b/packages/web/projects/vgpu/components/previewBar.vue
new file mode 100644
index 0000000..a15662d
--- /dev/null
+++ b/packages/web/projects/vgpu/components/previewBar.vue
@@ -0,0 +1,219 @@
+
+
+ {{ title.includes('使用') ? '使用' : '分配' }}
+ ({{ unit }}) :
+ {{ used.toFixed(1) }}/{{ total.toFixed() }}
+
+ -
+
-
+
+ +++ ++ -
+
-
+ + + {{ name }} ++ + {{ value }} +
+
+ -
+
-
+
+
+ -
+
+
+
+
+
+
+
+
+
+ {{ title }}
+
+
+ {{ count }}
+
+ -
+
-
+
+
+
+ 显卡管理 > {{ detail.uuid }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/web/projects/vgpu/views/card/admin/Detail2.vue b/packages/web/projects/vgpu/views/card/admin/Detail2.vue
new file mode 100644
index 0000000..ea33df1
--- /dev/null
+++ b/packages/web/projects/vgpu/views/card/admin/Detail2.vue
@@ -0,0 +1,82 @@
+
+
+
+
+
+ 详细信息
+ -
+
-
+ {{ label }}
+
+ {{ detail[value] }} +
+
-
+
-
+
+
+ + + + +
+ -
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ '; + for (var i = 0; i < params.length; i++) { + res += + params[i].marker + + params[i].seriesName + + ' : ' + + (+params[i].value).toFixed(0) + + `%
`; + } + + return res; + }, + }, + grid: { + top: 37, // 上边距 + bottom: 20, // 下边距 + left: '7%', // 左边距 + right: 10, // 右边距 + }, + xAxis: { + type: 'category', + data: core.map((item) => timeParse(+item.timestamp)), + axisLabel: { + formatter: function (value) { + return timeParse(value, 'HH:mm'); + // return timeParse(value, 'MM-DD'); + }, + // interval: function (index, value) { + // var date = new Date(value); + // + // return date.getHours() % 2 === 0 && date.getMinutes() === 0; + // }, + }, + }, + yAxis: { + type: 'value', + // max: 100, + axisLabel: { + formatter: function (value) { + return `${value} %`; + }, + }, + }, + series: [ + { + name: '算力', + data: core, + type: 'line', + areaStyle: { + normal: { + color: { + type: 'linear', + x: 0, // 渐变起始点 0% + y: 0, // 渐变起始点 0% + x2: 0, // 渐变结束点 100% + y2: 1, // 渐变结束点 100% + colorStops: [ + { + offset: 0, + color: 'rgba(84, 112, 198, 0.16)', // 渐变起始颜色 + }, + { + offset: 1, + color: 'rgba(84, 112, 198, 0.00)', // 渐变结束颜色 + }, + ], + global: false, // 缺省为 false + }, + }, + }, + itemStyle: { + color: 'rgb(84, 112, 198)', // 设置线条颜色为橙色 + }, + lineStyle: { + color: 'rgb(84, 112, 198)', // 设置线条颜色为橙色 + }, + }, + { + name: '显存', + data: memory, + type: 'line', + areaStyle: { + normal: { + color: { + type: 'linear', + x: 0, // 渐变起始点 0% + y: 0, // 渐变起始点 0% + x2: 0, // 渐变结束点 100% + y2: 1, // 渐变结束点 100% + colorStops: [ + { + offset: 0, + color: 'rgba(34, 139, 34, 0.16)', // 渐变起始颜色 + }, + { + offset: 1, + color: 'rgba(34, 139, 34, 0.00)', // 渐变结束颜色 + }, + ], + global: false, // 缺省为 false + }, + }, + }, + itemStyle: { + color: 'rgb(145, 204, 117)', // 设置线条颜色为橙色 + }, + lineStyle: { + color: 'rgb(145, 204, 117)', // 设置线条颜色为橙色 + }, + }, + ], + }; +}; diff --git a/packages/web/projects/vgpu/views/card/admin/index.vue b/packages/web/projects/vgpu/views/card/admin/index.vue new file mode 100644 index 0000000..e52f74d --- /dev/null +++ b/packages/web/projects/vgpu/views/card/admin/index.vue @@ -0,0 +1,167 @@ + +
+
+
+
+
+
+
diff --git a/packages/web/projects/vgpu/views/monitor/overview/config.js b/packages/web/projects/vgpu/views/monitor/overview/config.js
new file mode 100644
index 0000000..f61321c
--- /dev/null
+++ b/packages/web/projects/vgpu/views/monitor/overview/config.js
@@ -0,0 +1,179 @@
+export const rangeConfigInit = [
+ {
+ title: '资源分配趋势',
+ dataSource: [
+ {
+ name: 'vGPU',
+ query: `sum(hami_container_vgpu_allocated) / sum(hami_vgpu_count) * 100`,
+ data: [],
+ type: 'line',
+ areaStyle: {
+ normal: {
+ color: {
+ type: 'linear',
+ x: 0, // 渐变起始点 0%
+ y: 0, // 渐变起始点 0%
+ x2: 0, // 渐变结束点 100%
+ y2: 1, // 渐变结束点 100%
+ colorStops: [
+ {
+ offset: 0,
+ color: 'rgba(250, 200, 88, 0.16)', // 渐变起始颜色
+ },
+ {
+ offset: 1,
+ color: 'rgba(250, 200, 88, 0.00)', // 渐变结束颜色
+ },
+ ],
+ global: false, // 缺省为 false
+ },
+ },
+ },
+ itemStyle: {
+ color: 'rgb(250, 200, 88)', // 设置线条颜色为橙色
+ },
+ lineStyle: {
+ color: 'rgb(250, 200, 88)', // 设置线条颜色为橙色
+ },
+ },
+ {
+ name: '算力',
+ query: `sum(hami_container_vcore_allocated) / sum(hami_core_size) * 100`,
+ data: [],
+ type: 'line',
+ areaStyle: {
+ normal: {
+ color: {
+ type: 'linear',
+ x: 0, // 渐变起始点 0%
+ y: 0, // 渐变起始点 0%
+ x2: 0, // 渐变结束点 100%
+ y2: 1, // 渐变结束点 100%
+ colorStops: [
+ {
+ offset: 0,
+ color: 'rgba(84, 112, 198, 0.16)', // 渐变起始颜色
+ },
+ {
+ offset: 1,
+ color: 'rgba(84, 112, 198, 0.00)', // 渐变结束颜色
+ },
+ ],
+ global: false, // 缺省为 false
+ },
+ },
+ },
+ itemStyle: {
+ color: 'rgb(84, 112, 198)', // 设置线条颜色为橙色
+ },
+ lineStyle: {
+ color: 'rgb(84, 112, 198)', // 设置线条颜色为橙色
+ },
+ },
+ {
+ name: '显存',
+ query: `sum(hami_container_vmemory_allocated) / sum(hami_memory_size) * 100`,
+ data: [],
+ areaStyle: {
+ normal: {
+ color: {
+ type: 'linear',
+ x: 0, // 渐变起始点 0%
+ y: 0, // 渐变起始点 0%
+ x2: 0, // 渐变结束点 100%
+ y2: 1, // 渐变结束点 100%
+ colorStops: [
+ {
+ offset: 0,
+ color: 'rgba(34, 139, 34, 0.16)', // 渐变起始颜色
+ },
+ {
+ offset: 1,
+ color: 'rgba(34, 139, 34, 0.00)', // 渐变结束颜色
+ },
+ ],
+ global: false, // 缺省为 false
+ },
+ },
+ },
+ itemStyle: {
+ color: 'rgb(145, 204, 117)', // 设置线条颜色为橙色
+ },
+ lineStyle: {
+ color: 'rgb(145, 204, 117)', // 设置线条颜色为橙色
+ },
+ },
+ ],
+ },
+ {
+ title: '资源使用趋势',
+ dataSource: [
+ {
+ name: '算力',
+ query: `avg(hami_core_util_avg)`,
+ data: [],
+ areaStyle: {
+ normal: {
+ color: {
+ type: 'linear',
+ x: 0, // 渐变起始点 0%
+ y: 0, // 渐变起始点 0%
+ x2: 0, // 渐变结束点 100%
+ y2: 1, // 渐变结束点 100%
+ colorStops: [
+ {
+ offset: 0,
+ color: 'rgba(84, 112, 198, 0.16)', // 渐变起始颜色
+ },
+ {
+ offset: 1,
+ color: 'rgba(84, 112, 198, 0.00)', // 渐变结束颜色
+ },
+ ],
+ global: false, // 缺省为 false
+ },
+ },
+ },
+ itemStyle: {
+ color: 'rgb(84, 112, 198)', // 设置线条颜色为橙色
+ },
+ lineStyle: {
+ color: 'rgb(84, 112, 198)', // 设置线条颜色为橙色
+ },
+ },
+ {
+ name: '显存',
+ query: `sum(hami_memory_used) / sum(hami_memory_size) * 100`,
+ data: [],
+ areaStyle: {
+ normal: {
+ color: {
+ type: 'linear',
+ x: 0, // 渐变起始点 0%
+ y: 0, // 渐变起始点 0%
+ x2: 0, // 渐变结束点 100%
+ y2: 1, // 渐变结束点 100%
+ colorStops: [
+ {
+ offset: 0,
+ color: 'rgba(34, 139, 34, 0.16)', // 渐变起始颜色
+ },
+ {
+ offset: 1,
+ color: 'rgba(34, 139, 34, 0.00)', // 渐变结束颜色
+ },
+ ],
+ global: false, // 缺省为 false
+ },
+ },
+ },
+ itemStyle: {
+ color: 'rgb(145, 204, 117)', // 设置线条颜色为橙色
+ },
+ lineStyle: {
+ color: 'rgb(145, 204, 117)', // 设置线条颜色为橙色
+ },
+ },
+ ],
+ },
+];
diff --git a/packages/web/projects/vgpu/views/monitor/overview/getOptions.js b/packages/web/projects/vgpu/views/monitor/overview/getOptions.js
new file mode 100644
index 0000000..54e6472
--- /dev/null
+++ b/packages/web/projects/vgpu/views/monitor/overview/getOptions.js
@@ -0,0 +1,560 @@
+import { timeParse } from '@/utils';
+import { cloneDeep } from 'lodash';
+import nodeApi from '~/vgpu/api/node';
+import { ElMessage } from 'element-plus';
+
+export const getResourceStatus = (statusConfig) => {
+ return {
+ tooltip: {
+ show: false,
+ },
+ // legend: {
+ // top: '5%',
+ // left: 'center',
+ // },
+
+ series: [
+ {
+ name: 'Access From',
+ type: 'pie',
+ radius: ['50%', '70%'],
+ avoidLabelOverlap: false,
+ itemStyle: {
+ borderRadius: 3,
+ borderColor: '#fff',
+ },
+ label: {
+ show: false,
+ position: 'center',
+ },
+ emphasis: {
+ label: {
+ show: false,
+ fontSize: 40,
+ fontWeight: 'bold',
+ },
+ },
+ labelLine: {
+ show: false,
+ },
+ // data: [
+ // { value: data.running, itemStyle: {color: '#ff0000'} },
+ // { value: data.stopped , itemStyle: {color: '#ff0000'}},
+ // { value: data.error , itemStyle: {color: '#ff0000'}},
+ // ],
+ data: statusConfig.map((item) => ({
+ ...item,
+ itemStyle: { color: item.color },
+ })),
+ },
+ ],
+ grid: {
+ top: 1, // 上边距
+ bottom: 1, // 下边距
+ left: 1, // 左边距
+ right: 1, // 右边距
+ },
+ graphic: [
+ {
+ type: 'text', // 添加文本标签
+ left: 'center', // 文本标签水平居中
+ top: 'center', // 文本标签垂直居中
+ style: {
+ text: '节点', // 设置文本内容
+ fill: '#333', // 文字颜色
+ fontSize: 12, // 文字大小
+ },
+ },
+ ],
+ };
+};
+
+export const getPressure = ({ percent = 0, title }) => {
+ let thisColor = '';
+
+ if (percent < 30) {
+ thisColor = '#16A34A';
+ } else if (percent >= 30 && percent <= 80) {
+ thisColor = '#2563EB';
+ } else {
+ thisColor = '#DC2626';
+ }
+
+ return {
+ series: [
+ {
+ type: 'gauge',
+ itemStyle: {
+ color: thisColor,
+ // shadowColor: thisColor,
+ // shadowBlur: 5,
+ // shadowOffsetX: 2,
+ // shadowOffsetY: 2,
+ },
+ progress: {
+ show: true,
+ width: 8,
+ },
+ axisLine: {
+ lineStyle: {
+ width: 8,
+ backgroundColor: '#F5F7FA',
+ },
+ },
+ axisTick: {
+ show: false,
+ },
+ axisLabel: {
+ show: false, // 隐藏刻度标签
+ },
+ // splitNumber: 0,
+ splitLine: {
+ length: 3,
+ lineStyle: {
+ width: 2,
+ color: '#999',
+ },
+ distance: 3,
+ },
+ anchor: {
+ show: false,
+ showAbove: false,
+ size: 25,
+ itemStyle: {
+ borderWidth: 10,
+ },
+ },
+ pointer: {
+ show: false,
+ },
+ title: {
+ show: false,
+ },
+ detail: {
+ valueAnimation: true,
+ width: '60%',
+ lineHeight: 40,
+ borderRadius: 8,
+ offsetCenter: [0, '0%'],
+ // fontSize: 16,
+ fontWeight: 'bolder',
+ formatter: '{a|{value}}{b|%}',
+
+ rich: {
+ a: {
+ color: '#1D2B3A',
+ lineHeight: 10,
+ fontSize: 20,
+ },
+ b: {
+ color: '#1D2B3A',
+ },
+ },
+ },
+ data: [
+ {
+ value: percent.toFixed(1),
+ },
+ ],
+ },
+ ],
+ graphic: [
+ {
+ type: 'text',
+ left: 'center',
+ bottom: 8,
+ style: {
+ text: title,
+ fill: '#333', // 设置标题文字颜色
+ fontSize: 14, // 设置标题文字大小
+ borderRadius: 999,
+ backgroundColor: '#F5F7FA',
+ padding: [6, 16],
+ },
+ },
+ ],
+ };
+};
+
+export const getAlarm = ({ timeKeys, data }) => {
+ return {
+ legend: {
+ // data: [],
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'cross',
+ },
+ },
+ xAxis: {
+ type: 'category',
+ data: data.map((item) => timeParse(+item.timestamp)),
+ axisLabel: {
+ formatter: function (value) {
+ return timeParse(value, 'HH:mm');
+ },
+ },
+ },
+ yAxis: {
+ type: 'value',
+ axisLabel: {
+ formatter: function (value) {
+ return `${value} 次`;
+ },
+ },
+ },
+ series: [
+ {
+ data,
+ type: 'line',
+ smooth: true,
+ showSymbol: true,
+ areaStyle: {
+ normal: {
+ color: {
+ type: 'linear',
+ x: 0, // 渐变起始点 0%
+ y: 0, // 渐变起始点 0%
+ x2: 0, // 渐变结束点 100%
+ y2: 1, // 渐变结束点 100%
+ colorStops: [
+ {
+ offset: 0,
+ color: 'rgba(37, 99, 235, 0.16)', // 渐变起始颜色
+ },
+ {
+ offset: 1,
+ color: 'rgba(37, 99, 235, 0.00)', // 渐变结束颜色
+ },
+ ],
+ global: false, // 缺省为 false
+ },
+ },
+ },
+ itemStyle: {
+ color: 'rgb(84, 112, 198)', // 设置线条颜色为橙色
+ },
+ lineStyle: {
+ color: 'rgb(84, 112, 198)', // 设置线条颜色为橙色
+ },
+ },
+ ],
+ grid: {
+ top: '3%', // 上边距
+ bottom: '8%', // 下边距
+ left: '8%', // 左边距
+ right: '3%', // 右边距
+ },
+ graphic: [
+ {
+ type: 'text', // 添加文本标签
+ left: '23%', // 文本标签水平居中
+ top: 'center', // 文本标签垂直居中
+ style: {
+ text: '显卡', // 设置文本内容
+ fill: '#333', // 文字颜色
+ fontSize: 12, // 文字大小
+ },
+ },
+ // {
+ // type: 'text', // 添加文本标签
+ // left: 'center', // 文本标签水平居中
+ // top: '170', // 文本标签垂直居中
+ // style: {
+ // text: list.length + '个', // 设置文本内容
+ // fill: '#333', // 文字颜色
+ // fontSize: 16, // 文字大小
+ // },
+ // },
+ ],
+ };
+};
+
+export const handleChartClick = async (params, router) => {
+ const name = params.data.name;
+ const { list } = await nodeApi.getNodes({ filters: {} });
+ const node = list.find((node) => node.name === name);
+
+ if (node) {
+ const uuid = node.uid;
+ router.push(`/admin/vgpu/node/admin/${uuid}?nodeName=${name}`);
+ } else {
+ ElMessage.error('节点未找到');
+ }
+};
+
+export const getCardOptions = (list, chartWidth) => {
+ const data = list.reduce((all, current) => {
+ const name = current.type;
+ if (all[name]) {
+ all[name]++;
+ } else {
+ all[name] = 1;
+ }
+
+ return all;
+ }, {});
+
+ const dataList = Object.entries(data);
+
+ return {
+ tooltip: {
+ show: false,
+ },
+ series: [
+ {
+ type: 'pie',
+ radius: ['50%', '65%'],
+ avoidLabelOverlap: false,
+ itemStyle: {
+ borderRadius: 1,
+ borderColor: '#fff',
+ },
+ label: {
+ alignTo: 'edge',
+ formatter: '{name|{b}}\n{cnt|{c} 张}',
+ minMargin: 5,
+ edgeDistance: 10,
+ lineHeight: 15,
+ rich: {
+ cnt: {
+ fontSize: 10,
+ color: '#999'
+ }
+ }
+ },
+ labelLayout: function (params) {
+ const isLeft = params.labelRect.x < chartWidth / 2;
+ const points = params.labelLinePoints;
+ points[2][0] = isLeft
+ ? params.labelRect.x
+ : params.labelRect.x + params.labelRect.width;
+ return {
+ labelLinePoints: points,
+ };
+ },
+ data: dataList.map(([key, value]) => ({
+ name: key,
+ value: value,
+ })),
+ },
+ ],
+
+ };
+};
+
+export const getLineOptions = ({
+ title,
+ usedData = [],
+ totalData = [],
+ unit = '%',
+}) => {
+ const xData = usedData;
+
+ let yData = cloneDeep(totalData);
+
+ const xAxisData = usedData.length ? usedData : totalData;
+
+ return {
+ legend: {
+ data: ['分配率', usedData.length && '使用率'],
+ // left: 0,
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'cross',
+ },
+ formatter: function (params) {
+ var res = timeParse(+params[0].name) + '
+
+ {{ title }}
+
+
+ '; + for (var i = 0; i < params.length; i++) { + res += + params[i].marker + + params[i].seriesName + + ' : ' + + (+params[i].value).toFixed(0) + + `${unit}
`; + } + return res; + }, + }, + grid: { + top: 37, // 上边距 + bottom: 20, // 下边距 + left: '7%', // 左边距 + right: 10, // 右边距 + }, + xAxis: { + type: 'category', + data: xAxisData.map((item) => timeParse(+item.timestamp)), + axisLabel: { + formatter: function (value) { + return timeParse(value, 'HH:mm'); + // return timeParse(value, 'MM-DD'); + }, + // interval: function (index, value) { + // var date = new Date(value); + // + // return date.getHours() % 2 === 0 && date.getMinutes() === 0; + // }, + }, + }, + yAxis: { + type: 'value', + max: 100, + axisLabel: { + formatter: function (value) { + return `${value} ${unit}`; + }, + }, + }, + series: [ + { + name: '使用率', + data: usedData.map((item) => { + if (title === 'GPU 内存使用') { + return (item.value / 1024).toFixed(1); + } + return { value: item.value.toFixed(1), name: item.timestamp }; + }), + type: 'line', + areaStyle: { + normal: { + color: { + type: 'linear', + x: 0, // 渐变起始点 0% + y: 0, // 渐变起始点 0% + x2: 0, // 渐变结束点 100% + y2: 1, // 渐变结束点 100% + colorStops: [ + { + offset: 0, + color: 'rgba(84, 112, 198, 0.16)', // 渐变起始颜色 + }, + { + offset: 1, + color: 'rgba(84, 112, 198, 0.00)', // 渐变结束颜色 + }, + ], + global: false, // 缺省为 false + }, + }, + }, + }, + { + name: '分配率', + data: yData.map((item) => { + if (!item) return item; + return { value: item.value.toFixed(1), name: item.timestamp }; + }), + type: 'line', + areaStyle: { + normal: { + color: { + type: 'linear', + x: 0, // 渐变起始点 0% + y: 0, // 渐变起始点 0% + x2: 0, // 渐变结束点 100% + y2: 1, // 渐变结束点 100% + colorStops: [ + { + offset: 0, + color: 'rgba(34, 139, 34, 0.16)', // 渐变起始颜色 + }, + { + offset: 1, + color: 'rgba(34, 139, 34, 0.00)', // 渐变结束颜色 + }, + ], + global: false, // 缺省为 false + }, + }, + }, + }, + ], + }; +}; + +export const getRangeOptions = (data) => { + return { + legend: { + // data: [], + }, + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'cross', + }, + formatter: function (params) { + var res = params[0].name + '
'; + for (var i = 0; i < params.length; i++) { + res += + params[i].marker + + params[i].seriesName + + ' : ' + + (+params[i].value).toFixed(0) + + `%
`; + } + + return res; + }, + }, + grid: { + top: 37, // 上边距 + bottom: 20, // 下边距 + left: '7%', // 左边距 + right: 10, // 右边距 + }, + xAxis: { + type: 'category', + data: data[0].data.map((item) => timeParse(+item.timestamp)), + axisLabel: { + formatter: function (value) { + return timeParse(value, 'HH:mm'); + // return timeParse(value, 'MM-DD'); + }, + // interval: function (index, value) { + // var date = new Date(value); + // + // return date.getHours() % 2 === 0 && date.getMinutes() === 0; + // }, + }, + }, + yAxis: { + type: 'value', + // max: 100, + axisLabel: { + formatter: function (value) { + return `${value} %`; + }, + }, + }, + series: data.map((item) => ({ + ...item, + type: 'line', + // areaStyle: { + // normal: { + // color: { + // type: 'linear', + // x: 0, // 渐变起始点 0% + // y: 0, // 渐变起始点 0% + // x2: 0, // 渐变结束点 100% + // y2: 1, // 渐变结束点 100% + // colorStops: [ + // { + // offset: 0, + // color: 'rgba(34, 139, 34, 0.16)', // 渐变起始颜色 + // }, + // { + // offset: 1, + // color: 'rgba(34, 139, 34, 0.00)', // 渐变结束颜色 + // }, + // ], + // global: false, // 缺省为 false + // }, + // }, + // }, + })), + }; +}; diff --git a/packages/web/projects/vgpu/views/monitor/overview/index.vue b/packages/web/projects/vgpu/views/monitor/overview/index.vue new file mode 100644 index 0000000..5e54652 --- /dev/null +++ b/packages/web/projects/vgpu/views/monitor/overview/index.vue @@ -0,0 +1,486 @@ + +
+
+
+
+
+
+
diff --git a/packages/web/projects/vgpu/views/monitor/overview/mock.js b/packages/web/projects/vgpu/views/monitor/overview/mock.js
new file mode 100644
index 0000000..3b61dcf
--- /dev/null
+++ b/packages/web/projects/vgpu/views/monitor/overview/mock.js
@@ -0,0 +1,140 @@
+export const leftConfig = [
+ {
+ title: '资源状态',
+ morePath: '/iac/manager/instance',
+ list: [
+ {
+ title: '云主机分布',
+ data: [
+ { name: '华为云', value: 400 },
+ { name: '阿里云', value: 300 },
+ { name: '腾讯云', value: 100 },
+ ],
+ unit: '台',
+ },
+ {
+ title: '云服务器状态',
+ data: [
+ { name: '开机', value: 700 },
+ { name: '关机', value: 100 },
+ ],
+ },
+ {
+ title: '云硬盘状态',
+ data: [
+ { name: '使用中', value: 900 },
+ { name: '闲置', value: 100 },
+ ],
+ },
+ {
+ title: '云网卡状态',
+ data: [
+ { name: '使用中', value: 300 },
+ { name: '闲置', value: 200 },
+ ],
+ },
+ ],
+ },
+ {
+ title: '优化建议',
+ morePath: '/iac/manager/instance',
+ list: [
+ { tip: '建议降配', value: 1 },
+ { tip: '建议升配', value: 1 },
+ { tip: '建议变更付费方式', value: 1 },
+ { tip: '建议回收', value: 114 },
+ ],
+ },
+ {
+ title: '资源消耗',
+ morePath: '/iac/manager/instance',
+ list: [
+ {
+ title: '按主机数用量',
+ data: [
+ { name: '业务1', value: 400 },
+ { name: '业务2', value: 300 },
+ { name: '业务3', value: 100 },
+ ],
+ unit: '台',
+ },
+ {
+ title: '按CPU用量',
+ data: [
+ { name: '业务1', value: 400 },
+ { name: '业务2', value: 200 },
+ { name: '业务3', value: 500 },
+ ],
+ },
+ {
+ title: '按内存用量',
+ data: [
+ { name: '业务1', value: 200 },
+ { name: '业务2', value: 100 },
+ { name: '业务3', value: 100 },
+ ],
+ },
+ {
+ title: '按存储数用量',
+ data: [
+ { name: '业务1', value: 400 },
+ { name: '业务2', value: 600 },
+ { name: '业务3', value: 300 },
+ ],
+ },
+ ],
+ },
+];
+
+export const rightConfig = {
+ provides: [
+ {
+ title: 'CPU',
+ percent: 20,
+ },
+ {
+ title: '内存',
+ percent: 67,
+ },
+ {
+ title: '存储',
+ percent: 50,
+ },
+ ],
+ approves: [
+ {
+ title: '待审批',
+ count: 80,
+ },
+ {
+ title: '审批中',
+ count: 15,
+ },
+ {
+ title: '已完成',
+ count: 228,
+ },
+ ],
+ myAdmin: [
+ {
+ title: '云账号',
+ count: 5,
+ },
+ {
+ title: '云主机',
+ count: 572,
+ },
+ {
+ title: '云硬盘',
+ count: 803,
+ },
+ {
+ title: '宿主机',
+ count: 12,
+ },
+ {
+ title: '存储器',
+ count: 31,
+ },
+ ],
+};
diff --git a/packages/web/projects/vgpu/views/monitor/overview/resso.jsx b/packages/web/projects/vgpu/views/monitor/overview/resso.jsx
new file mode 100644
index 0000000..b439b06
--- /dev/null
+++ b/packages/web/projects/vgpu/views/monitor/overview/resso.jsx
@@ -0,0 +1,13 @@
+export default function resso({ color }) {
+ return (
+
+ );
+}
diff --git a/packages/web/projects/vgpu/views/monitor/overview/style.scss b/packages/web/projects/vgpu/views/monitor/overview/style.scss
new file mode 100644
index 0000000..8c01b3a
--- /dev/null
+++ b/packages/web/projects/vgpu/views/monitor/overview/style.scss
@@ -0,0 +1,499 @@
+.home {
+ display: flex;
+ gap: 16px;
+ height: 100%;
+ font-size: 12px;
+ ul {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ }
+
+ .home-block {
+ margin-bottom: 0;
+ }
+
+ .all-btn {
+ color: #939ea9;
+ text-align: center;
+ font-family: 'PingFang SC';
+ font-size: 12px;
+ font-style: normal;
+ font-weight: 500;
+ line-height: 20px; /* 166.667% */
+
+ cursor: pointer;
+ &:hover {
+ color: var(--el-color-primary);
+ }
+ }
+
+ &-left {
+ width: 65%;
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ }
+
+ &-right {
+ flex: 1;
+ //display: flex;
+ //flex-direction: column;
+ //gap: 16px;
+ //width: 100%;
+ }
+
+ .visited {
+ list-style: none;
+ display: flex;
+ gap: 12px;
+ flex-wrap: wrap;
+ li {
+ display: flex;
+ padding: 8px 16px;
+ align-items: center;
+ gap: 8px;
+ // flex: 1 0 0;
+ border-radius: 4px;
+ border: 1px solid #e4ebf1;
+ background: #fff;
+
+ max-width: 180px;
+ &:hover {
+ border: 1px solid var(--el-color-primary-light-3);
+ color: var(--el-color-primary);
+ cursor: pointer;
+ }
+ }
+ }
+
+ .visited-empty {
+ text-align: center;
+ color: #939ea9;
+ }
+
+ .add-btn {
+ color: var(--el-color-primary);
+ text-align: center;
+ font-family: 'PingFang SC';
+ font-size: 12px;
+ font-style: normal;
+ font-weight: 500;
+ line-height: 20px; /* 166.667% */
+ cursor: pointer;
+
+ &:hover {
+ opacity: 0.7;
+ }
+ }
+
+ .resourceOverview {
+ display: grid;
+ grid-template-columns: repeat(5, 1fr);
+ gap: 12px;
+ li {
+ height: 80px;
+ flex-shrink: 0;
+ border-radius: 6px;
+ background: #f5f7fa;
+ padding: 16px;
+ display: flex;
+ //&:hover {
+ // color: var(--el-color-primary);
+ // cursor: pointer;
+ //}
+ .avatar {
+ display: flex;
+ width: 48px;
+ height: 48px;
+ padding: 14px;
+ justify-content: center;
+ align-items: center;
+ flex-shrink: 0;
+ border-radius: 999px;
+ border: 2px solid #fff;
+ background: linear-gradient(
+ 180deg,
+ rgba(255, 255, 255, 0) 0%,
+ #fff 100%
+ );
+ margin-right: 16px;
+ }
+
+ .count {
+ font-family: Roboto;
+ font-size: 20px;
+ font-style: normal;
+ font-weight: 700;
+ line-height: 100%; /* 20px */
+ margin-top: 10px;
+ }
+ }
+ }
+
+ .resourceStatus {
+ display: flex;
+ gap: 20px;
+ min-height: 160px;
+
+ &-left {
+ flex: 1;
+ // padding: 10px 20px;
+ padding-right: 0;
+ display: flex;
+ align-items: center;
+ gap: 34px;
+ .pie {
+ height: 120px;
+ width: 120px;
+ margin-left: 20px;
+ }
+ .counts {
+ flex: 1;
+
+ display: flex;
+ justify-content: space-between;
+ gap: 8px;
+ padding-right: 40px;
+ flex-wrap: wrap;
+ &-item {
+ padding: 8px 12px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ &-title {
+ margin-bottom: 10px;
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ }
+
+ &-count {
+ color: #1d2b3a;
+ font-family: Roboto;
+ font-size: 20px;
+ font-style: normal;
+ font-weight: 700;
+ line-height: 100%; /* 20px */
+ }
+ }
+ }
+ }
+
+ &-right {
+ width: 55%;
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ li {
+ flex: 1;
+ min-height: 150px;
+ border-radius: 6px;
+ background: #f5f7fa;
+ padding: 16px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ .title {
+ display: flex;
+ gap: 4px;
+ align-items: center;
+ }
+ .progress {
+ padding: 25px 0;
+ background-color: transparent;
+
+ .el-progress {
+ width: 100%;
+ }
+ }
+ .volume {
+ display: flex;
+ //flex-direction: column;
+ gap: 8px;
+ flex-wrap: wrap;
+ }
+ .volume-item {
+ flex: 1;
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ font-size: 12px;
+ min-width: 80px;
+
+ .title {
+ color: #697886;
+ font-family: 'PingFang SC';
+ font-size: 12px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 100%; /* 12px */
+ //width:80px ;
+ }
+ .count {
+ color: #1d2b3a;
+ font-family: Roboto;
+ font-size: 12px;
+ font-style: normal;
+ font-weight: 500;
+ line-height: 100%;
+ }
+ }
+ }
+ }
+ }
+
+ #alarm {
+ }
+
+ .alarm {
+ display: flex;
+ gap: 32px;
+ &-left {
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ &-item {
+ width: 202px;
+ height: 120px;
+ border-radius: 6px;
+ padding: 16px;
+ position: relative;
+ .title {
+ color: #324558;
+ font-family: 'PingFang SC';
+ font-size: 12px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 18px; /* 150% */
+ margin-bottom: 10px;
+ }
+ .count {
+ font-family: Roboto;
+ font-size: 20px;
+ font-style: normal;
+ font-weight: 700;
+ line-height: 100%; /* 20px */
+ }
+ .icon-bg {
+ position: absolute;
+ right: 10px;
+ bottom: -10px;
+ width: 56px;
+ height: 56px;
+ }
+ }
+ }
+
+ &-right {
+ flex: 1;
+ position: relative;
+ .title {
+ position: absolute;
+ top: -40px;
+ color: #1d2b3a;
+ font-family: 'PingFang SC';
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 500;
+ line-height: 20px; /* 142.857% */
+ }
+ }
+ }
+
+ .pressure {
+ display: flex;
+ height: 150px;
+ li {
+ flex: 1;
+ }
+ }
+
+ .user {
+ border: 1px solid #fff;
+ padding: 0;
+ }
+
+ .myApproval {
+ display: flex;
+ li {
+ display: flex;
+ padding: 8px 0px;
+ flex-direction: column;
+ align-items: center;
+ gap: 8px;
+ flex: 1 0 0;
+ &:hover {
+ color: var(--el-color-primary);
+ cursor: pointer;
+ }
+ .count {
+ font-family: Roboto;
+ font-size: 20px;
+ font-style: normal;
+ font-weight: 700;
+ line-height: 100%; /* 20px */
+ position: relative;
+ .isNew {
+ display: inline-flex;
+ min-width: 20px;
+ padding: 0px 6px;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ border-radius: 6px 6px 6px 2px;
+ background: var(--light-color-semantic-danger-default, #dc2626);
+ color: #fff;
+ text-align: center;
+ font-family: Roboto;
+ font-size: 12px;
+ font-style: normal;
+ font-weight: 500;
+ line-height: 20px; /* 166.667% */
+ position: absolute;
+ right: -40px;
+ top: -8px;
+ }
+ }
+ }
+ }
+
+ .myApply {
+ display: grid;
+ gap: 12px;
+ grid-template-columns: repeat(2, 1fr);
+
+ li {
+ display: flex;
+ // width: 202px;
+ padding: 16px 16px;
+ align-items: center;
+ gap: 8px;
+ border-radius: 4px;
+ background: #f5f7fa;
+ justify-content: space-between;
+ &:hover {
+ color: var(--el-color-primary);
+ cursor: pointer;
+ }
+ .count {
+ font-family: Roboto;
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 700;
+ line-height: 20px; /* 142.857% */
+ }
+ }
+ }
+
+ .node-all {
+ display: grid;
+ gap: 12px;
+ grid-template-columns: repeat(2, 1fr);
+
+ li {
+ display: flex;
+ // width: 202px;
+ padding: 16px 16px;
+ align-items: center;
+ gap: 8px;
+ border-radius: 4px;
+ background: #f5f7fa;
+ justify-content: space-between;
+ &:hover {
+ color: var(--el-color-primary);
+ cursor: pointer;
+ }
+ .count {
+ font-family: Roboto;
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 700;
+ line-height: 20px; /* 142.857% */
+ }
+ }
+ }
+
+ .card-resource {
+ display: flex;
+//padding: 0 20px;
+ min-height: 120px;
+ .left {
+ flex: 1;
+ min-width: 402px;
+
+ .pie {
+ width: 100%;
+ height: 100%;
+ }
+ }
+
+ .cardDetail {
+ flex: 1;
+ display: flex;
+ flex-wrap: wrap;
+ //grid-template-columns: repeat(3, 1fr);
+ gap: 12px;
+ align-content: center;
+ }
+ .cardDetail-item {
+ flex: 1;
+ height: 80px;
+ flex-shrink: 0;
+ border-radius: 6px;
+ background: #f5f7fa;
+ padding: 16px;
+ display: flex;
+ &:hover {
+ //color: var(--el-color-primary);
+ //cursor: pointer;
+ }
+ .avatar {
+ display: flex;
+ width: 48px;
+ height: 48px;
+ padding: 14px;
+ justify-content: center;
+ align-items: center;
+ flex-shrink: 0;
+ border-radius: 999px;
+ border: 2px solid #fff;
+ background: linear-gradient(
+ 180deg,
+ rgba(255, 255, 255, 0) 0%,
+ #fff 100%
+ );
+ margin-right: 16px;
+ }
+
+ .count {
+ font-family: Roboto;
+ font-size: 20px;
+ font-style: normal;
+ font-weight: 700;
+ line-height: 100%; /* 20px */
+ margin-top: 10px;
+ }
+ }
+ }
+
+ .exceed {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 12px;
+ li {
+ height: 80px;
+ border-radius: 4px;
+ background: #f5f7fa;
+ padding: 16px;
+ .count {
+ font-size: 20px;
+ font-weight: bold;
+ margin-top: 5px;
+ span {
+ font-size: 12px;
+ }
+ }
+ }
+ }
+}
diff --git a/packages/web/projects/vgpu/views/node/admin/Detail.vue b/packages/web/projects/vgpu/views/node/admin/Detail.vue
new file mode 100644
index 0000000..bfc5488
--- /dev/null
+++ b/packages/web/projects/vgpu/views/node/admin/Detail.vue
@@ -0,0 +1,438 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 全部
+
+
+
+
+
+
+ 全部
+
+ -
+
-
+ ++
+ ++
+
+
+
+
+
+
+
+
+
+
+ 全部
+
+ -
+
-
+ {{ title }}++ {{ count }} ++
+
+ 全部
+
+
+
+
+
+ 节点管理 > {{ detail.name }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/web/projects/vgpu/views/node/admin/getOptions.js b/packages/web/projects/vgpu/views/node/admin/getOptions.js
new file mode 100644
index 0000000..1bce542
--- /dev/null
+++ b/packages/web/projects/vgpu/views/node/admin/getOptions.js
@@ -0,0 +1,120 @@
+import { timeParse } from '@/utils';
+
+export const getRangeOptions = ({ core = [], memory = [] }) => {
+ return {
+ legend: {
+ // data: [],
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'cross',
+ },
+ formatter: function (params) {
+ var res = params[0].name + '
+
+
+
+
+
+ 详细信息
+ -
+
-
+ {{ label }}
+
+ {{ detail[value] }} +
+
-
+
-
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ '; + for (var i = 0; i < params.length; i++) { + res += + params[i].marker + + params[i].seriesName + + ' : ' + + (+params[i].value).toFixed(0) + + `%
`; + } + + return res; + }, + }, + grid: { + top: 37, // 上边距 + bottom: 20, // 下边距 + left: '7%', // 左边距 + right: 10, // 右边距 + }, + xAxis: { + type: 'category', + data: core.map((item) => timeParse(+item.timestamp)), + axisLabel: { + formatter: function (value) { + return timeParse(value, 'HH:mm'); + }, + }, + }, + yAxis: { + type: 'value', + // max: 100, + axisLabel: { + formatter: function (value) { + return `${value} %`; + }, + }, + }, + series: [ + { + name: '算力', + data: core, + type: 'line', + areaStyle: { + normal: { + color: { + type: 'linear', + x: 0, // 渐变起始点 0% + y: 0, // 渐变起始点 0% + x2: 0, // 渐变结束点 100% + y2: 1, // 渐变结束点 100% + colorStops: [ + { + offset: 0, + color: 'rgba(84, 112, 198, 0.16)', // 渐变起始颜色 + }, + { + offset: 1, + color: 'rgba(84, 112, 198, 0.00)', // 渐变结束颜色 + }, + ], + global: false, // 缺省为 false + }, + }, + }, + itemStyle: { + color: 'rgb(84, 112, 198)', // 设置线条颜色为橙色 + }, + lineStyle: { + color: 'rgb(84, 112, 198)', // 设置线条颜色为橙色 + }, + }, + { + name: '显存', + data: memory, + type: 'line', + areaStyle: { + normal: { + color: { + type: 'linear', + x: 0, // 渐变起始点 0% + y: 0, // 渐变起始点 0% + x2: 0, // 渐变结束点 100% + y2: 1, // 渐变结束点 100% + colorStops: [ + { + offset: 0, + color: 'rgba(34, 139, 34, 0.16)', // 渐变起始颜色 + }, + { + offset: 1, + color: 'rgba(34, 139, 34, 0.00)', // 渐变结束颜色 + }, + ], + global: false, // 缺省为 false + }, + }, + }, + itemStyle: { + color: 'rgb(145, 204, 117)', // 设置线条颜色为橙色 + }, + lineStyle: { + color: 'rgb(145, 204, 117)', // 设置线条颜色为橙色 + }, + }, + ], + }; +}; diff --git a/packages/web/projects/vgpu/views/node/admin/index.vue b/packages/web/projects/vgpu/views/node/admin/index.vue new file mode 100644 index 0000000..760994b --- /dev/null +++ b/packages/web/projects/vgpu/views/node/admin/index.vue @@ -0,0 +1,197 @@ + +
+
+
+
+
+
+
+
+
+
+
+
+
+ 详细信息
+ -
+
-
+ {{ label }}
+
+ {{ detail[value] }} +
+
+
+ - + + {{ label }} + + {{ count }} 倍 + + +
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/web/projects/vgpu/views/task/admin/top.vue b/packages/web/projects/vgpu/views/task/admin/top.vue
new file mode 100644
index 0000000..8e1a2b0
--- /dev/null
+++ b/packages/web/projects/vgpu/views/task/admin/top.vue
@@ -0,0 +1,110 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/web/projects/vgpu/views/task/index.vue b/packages/web/projects/vgpu/views/task/index.vue
new file mode 100644
index 0000000..a44ab87
--- /dev/null
+++ b/packages/web/projects/vgpu/views/task/index.vue
@@ -0,0 +1,3 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/web/src/components/BlockBox.vue b/packages/web/src/components/BlockBox.vue
new file mode 100644
index 0000000..1ad0c0e
--- /dev/null
+++ b/packages/web/src/components/BlockBox.vue
@@ -0,0 +1,39 @@
+
+
+
+
+
+
+
+
diff --git a/packages/web/src/components/ButtonGroup.vue b/packages/web/src/components/ButtonGroup.vue
new file mode 100644
index 0000000..9a94fef
--- /dev/null
+++ b/packages/web/src/components/ButtonGroup.vue
@@ -0,0 +1,36 @@
+
+
+
+ {{ title }}
+
+
+
+
+
+
+
+
+
diff --git a/packages/web/src/components/Confirm/index.js b/packages/web/src/components/Confirm/index.js
new file mode 100644
index 0000000..ba3486e
--- /dev/null
+++ b/packages/web/src/components/Confirm/index.js
@@ -0,0 +1,22 @@
+import ConfirmComponent from './index.vue'
+import { createVNode, render } from 'vue'
+
+const Confirm = {
+ install(app) {
+ const confirmVnode = createVNode(ConfirmComponent)
+ render(confirmVnode, document.body)
+ app.config.globalProperties.$Confirm = (confirmText, confirmObj, fn) => {
+ if(JSON.stringify(confirmObj) === '{}') {
+ confirmObj = {
+ confirmButtonText: '确定',
+ cancelButtonText: '取消',
+ type: '',
+ }
+ }
+ confirmVnode.component.ctx.showConfirm(confirmText, confirmObj, fn)
+ };
+ }
+}
+
+export default Confirm
+
diff --git a/packages/web/src/components/Confirm/index.vue b/packages/web/src/components/Confirm/index.vue
new file mode 100644
index 0000000..7748bb0
--- /dev/null
+++ b/packages/web/src/components/Confirm/index.vue
@@ -0,0 +1,127 @@
+
+
+
+ {{ value }}
+
+
+
+
+
+
+
diff --git a/packages/web/src/components/DetailDrawer.vue b/packages/web/src/components/DetailDrawer.vue
new file mode 100644
index 0000000..adfc992
--- /dev/null
+++ b/packages/web/src/components/DetailDrawer.vue
@@ -0,0 +1,70 @@
+
+
+
+
+
+
+
+
+ -
+
-
+
+ ++ ++ {{ v.value }} +
+
+
+
+
+
+
+
diff --git a/packages/web/src/components/FormPlus/FormGroup.vue b/packages/web/src/components/FormPlus/FormGroup.vue
new file mode 100644
index 0000000..82ae131
--- /dev/null
+++ b/packages/web/src/components/FormPlus/FormGroup.vue
@@ -0,0 +1,64 @@
+
+
+
+
+
+
+ {{ text }}:{{ q }}
+
+
+
+
+
+
+ {{ item.text }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/web/src/components/FormPlus/FormItem.vue b/packages/web/src/components/FormPlus/FormItem.vue
new file mode 100644
index 0000000..9f6ecf5
--- /dev/null
+++ b/packages/web/src/components/FormPlus/FormItem.vue
@@ -0,0 +1,362 @@
+
+
+ {{ label }}
+
+
+
+
+
+ {{ help }}
+
+
+
+
+
+
+
+ {{ label }}
+
+
+
+
+
+ {{ componentProps.formatter || value }}
+
+
+
+
+
+ {{ help }}
+
+
+
+
+
+
diff --git a/packages/web/src/components/FormPlus/FormList.vue b/packages/web/src/components/FormPlus/FormList.vue
new file mode 100644
index 0000000..109427b
--- /dev/null
+++ b/packages/web/src/components/FormPlus/FormList.vue
@@ -0,0 +1,273 @@
+
+
+
+
+
+
+
+
+
+
+
+ 或
+
+
+
+
+
+
+
+
+
+
+ {{ item.label }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/web/src/components/FormPlus/FormRender.vue b/packages/web/src/components/FormPlus/FormRender.vue
new file mode 100644
index 0000000..fe8b796
--- /dev/null
+++ b/packages/web/src/components/FormPlus/FormRender.vue
@@ -0,0 +1,83 @@
+
+
+
+ {{ title + (index + 1) }}
+ {{ title }}
+
+
+
+
+
+
+ 增加
+
+
+
+ {{ addTitle }}
+
+
+
+
+
+
diff --git a/packages/web/src/components/FormPlus/TableSelect/Toolbar.vue b/packages/web/src/components/FormPlus/TableSelect/Toolbar.vue
new file mode 100644
index 0000000..8684e41
--- /dev/null
+++ b/packages/web/src/components/FormPlus/TableSelect/Toolbar.vue
@@ -0,0 +1,177 @@
+
+
+
+
+
+
+
diff --git a/packages/web/src/components/FormPlus/TableSelect/index.vue b/packages/web/src/components/FormPlus/TableSelect/index.vue
new file mode 100644
index 0000000..277be7f
--- /dev/null
+++ b/packages/web/src/components/FormPlus/TableSelect/index.vue
@@ -0,0 +1,500 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ title }}
+
+
+
+ 更多
+
+
+
+
+ {{ title }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/web/src/components/FormPlus/elements/Cascader.vue b/packages/web/src/components/FormPlus/elements/Cascader.vue
new file mode 100644
index 0000000..cb2ce93
--- /dev/null
+++ b/packages/web/src/components/FormPlus/elements/Cascader.vue
@@ -0,0 +1,131 @@
+
+ {{ title }}
+
+ 重新选择
+
+ 将文件拖到此处 或 点击上传
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/web/src/components/ItemGroup.vue b/packages/web/src/components/ItemGroup.vue
new file mode 100644
index 0000000..b27902f
--- /dev/null
+++ b/packages/web/src/components/ItemGroup.vue
@@ -0,0 +1,43 @@
+
+
+
+
+
+
+
+
diff --git a/packages/web/src/components/ListHeader.vue b/packages/web/src/components/ListHeader.vue
new file mode 100644
index 0000000..3d50dfb
--- /dev/null
+++ b/packages/web/src/components/ListHeader.vue
@@ -0,0 +1,147 @@
+
+
+
+
+
+
+
+
diff --git a/packages/web/src/components/Message/index.js b/packages/web/src/components/Message/index.js
new file mode 100644
index 0000000..c4b329b
--- /dev/null
+++ b/packages/web/src/components/Message/index.js
@@ -0,0 +1,21 @@
+import MessageComponent from './index.vue'
+import { createVNode, render } from 'vue'
+const Message = {
+ install(app) {
+ const Vnode = createVNode(MessageComponent)
+ render(Vnode, document.body)
+ app.config.globalProperties.$Message = (type, msg, duration) => {
+ if(!msg){
+ msg = type==='success'?'操作成功':type==='info'?'消息提示':type==='warning'?'操作警告':type==='danger'?'操作失败':''
+ }
+ duration = duration || 2000
+ Vnode.component.ctx.showMessage(type, msg, duration)
+ setTimeout(()=>{
+ Vnode.component.ctx.hideMessage()
+ }, duration)
+ };
+ }
+ };
+
+export default Message
+
diff --git a/packages/web/src/components/Message/index.vue b/packages/web/src/components/Message/index.vue
new file mode 100644
index 0000000..9837c36
--- /dev/null
+++ b/packages/web/src/components/Message/index.vue
@@ -0,0 +1,196 @@
+
+
+
+
+
+
+
+ {{ title || route.meta.title }}
+
+ {{ description || route.meta.title }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/web/src/components/NumberInput.vue b/packages/web/src/components/NumberInput.vue
new file mode 100644
index 0000000..e9a7b82
--- /dev/null
+++ b/packages/web/src/components/NumberInput.vue
@@ -0,0 +1,47 @@
+
+
+
+
+
+
+ {{ renderLabel ? renderLabel(item, index) : item[labelKey] }}
+
+
+ {{ name }}
+
+
+
+
+
+
diff --git a/packages/web/src/components/SelectPlus.vue b/packages/web/src/components/SelectPlus.vue
new file mode 100644
index 0000000..a60c0b9
--- /dev/null
+++ b/packages/web/src/components/SelectPlus.vue
@@ -0,0 +1,310 @@
+
+
+
+
+
+
+
+
+
diff --git a/packages/web/src/components/TablePlus/SearchTag.vue b/packages/web/src/components/TablePlus/SearchTag.vue
new file mode 100644
index 0000000..f084539
--- /dev/null
+++ b/packages/web/src/components/TablePlus/SearchTag.vue
@@ -0,0 +1,45 @@
+
+
+
+
+
+
diff --git a/packages/web/src/components/TablePlus/style.scss b/packages/web/src/components/TablePlus/style.scss
new file mode 100644
index 0000000..14b8d01
--- /dev/null
+++ b/packages/web/src/components/TablePlus/style.scss
@@ -0,0 +1,108 @@
+.table-plus {
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+
+ --el-font-size-base: 12px;
+
+ .grid-table {
+ flex: 1;
+ display: flex;
+ overflow: hidden;
+ width: 100%;
+ flex-direction: column;
+ position: relative;
+ background-color: #fff;
+ padding: 20px;
+ box-sizing: border-box;
+ border-radius: 8px;
+ justify-content: space-between;
+
+ h3 {
+ margin-bottom: 0;
+ }
+
+ .actionBar {
+ display: flex;
+ justify-content: space-between;
+ .left{
+ margin-right: auto;
+
+ }
+ .right{
+ flex: 1;
+ display: flex;
+ justify-content: space-between;
+
+ }
+ .right.hasBatchButton{
+ justify-content: right;
+ }
+ }
+
+ .table-content {
+ height: calc(100% - 47px);
+ display: flex;
+ flex-direction: column;
+ }
+
+ .rowActions {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ height: 100%;
+ .el-button {
+ margin: 0;
+ }
+ .el-dropdown {
+ position: relative;
+ left: 8px;
+ }
+ }
+
+ .pagination {
+ margin-top: 15px;
+ justify-content: right;
+ position: sticky;
+ bottom: 0;
+ }
+
+ .expandContent {
+ padding: 0 20px;
+ }
+
+ h2 {
+ margin: 0 15px 15px;
+ }
+
+ .cell {
+ text-align: center;
+ font-size: 12px;
+ height: 44px;
+ line-height: 44px;
+ }
+
+ .el-loading-mask {
+ z-index: 10;
+ }
+ }
+
+ .el-table__header-wrapper {
+ .el-table__cell {
+ background: #f5f7fa !important;
+ }
+ }
+
+ .el-pagination {
+ font-size: 12px !important;
+ }
+
+ .el-select__wrapper {
+ font-size: 12px;
+ }
+
+ th {
+ padding: 0 !important;
+ }
+}
diff --git a/packages/web/src/components/TextPlus.vue b/packages/web/src/components/TextPlus.vue
new file mode 100644
index 0000000..3dcf78e
--- /dev/null
+++ b/packages/web/src/components/TextPlus.vue
@@ -0,0 +1,60 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ title }}
+
+
+
+ 更多
+
+
+
+
+ {{ title }}
+
+
+
+
+
+
+
+ {{ text }}
+
+
+
+
+
+
diff --git a/packages/web/src/components/TimePicker.vue b/packages/web/src/components/TimePicker.vue
new file mode 100644
index 0000000..4a16171
--- /dev/null
+++ b/packages/web/src/components/TimePicker.vue
@@ -0,0 +1,139 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/web/src/components/index.js b/packages/web/src/components/index.js
new file mode 100644
index 0000000..e406ab1
--- /dev/null
+++ b/packages/web/src/components/index.js
@@ -0,0 +1,49 @@
+import TablePlus from './TablePlus/index.vue';
+import FormPlus from './FormPlus';
+import FormPlusDrawer from './FormPlusDrawer.vue';
+import ListHeader from './ListHeader.vue';
+import SelectPlus from './SelectPlus.vue';
+import RadioPlus from './RadioPlus.vue';
+import FilterInput from './FilterInput.vue';
+import NumberInput from './NumberInput.vue';
+import ResourceName from './ResourceName.vue';
+import FormItem from './FormPlus/FormItem.vue';
+import FormRender from './FormPlus/FormRender.vue';
+import FormGroup from './FormPlus/FormGroup.vue';
+import ItemGroup from './ItemGroup.vue';
+import BackHeader from './BackHeader.vue';
+import InfoPreview from './InfoPreview.vue';
+import ButtonGroup from './ButtonGroup.vue';
+import DetailDrawer from './DetailDrawer.vue';
+import SliderPlus from './SliderPlus.vue';
+import EchartsPlus from './Echarts-plus.vue';
+import TimePicker from './TimePicker.vue';
+import TextPlus from './TextPlus.vue';
+import CodePre from './CodePre.vue';
+import FormList from './FormPlus/FormList.vue';
+
+export default (app) => {
+ app.component('TablePlus', TablePlus);
+ app.component('FormPlus', FormPlus);
+ app.component('FormPlusDrawer', FormPlusDrawer);
+ app.component('ListHeader', ListHeader);
+ app.component('SelectPlus', SelectPlus);
+ app.component('RadioPlus', RadioPlus);
+ app.component('FilterInput', FilterInput);
+ app.component('NumberInput', NumberInput);
+ app.component('ResourceName', ResourceName);
+ app.component('FormItem', FormItem);
+ app.component('FormRender', FormRender);
+ app.component('FormGroup', FormGroup);
+ app.component('ItemGroup', ItemGroup);
+ app.component('BackHeader', BackHeader);
+ app.component('InfoPreview', InfoPreview);
+ app.component('ButtonGroup', ButtonGroup);
+ app.component('DetailDrawer', DetailDrawer);
+ app.component('SliderPlus', SliderPlus);
+ app.component('EchartsPlus', EchartsPlus);
+ app.component('TimePicker', TimePicker);
+ app.component('TextPlus', TextPlus);
+ app.component('CodePre', CodePre);
+ app.component('FormList', FormList);
+};
diff --git a/packages/web/src/components/pagination/index.vue b/packages/web/src/components/pagination/index.vue
new file mode 100644
index 0000000..36bc880
--- /dev/null
+++ b/packages/web/src/components/pagination/index.vue
@@ -0,0 +1,101 @@
+
+
+
+
+
+
+
+
+
+ {{ userInfo.username }}
+ {{
+ userInfo.detail?.edges.roles.at(-1)?.name
+ }}
+
+ {{ userInfo.detail?.email }}
+
+
+
+
+
+
+
+
+
diff --git a/packages/web/src/components/sub-nav-bar/index.vue b/packages/web/src/components/sub-nav-bar/index.vue
new file mode 100644
index 0000000..9e7a35c
--- /dev/null
+++ b/packages/web/src/components/sub-nav-bar/index.vue
@@ -0,0 +1,46 @@
+
+
+
+
+
+
+
diff --git a/packages/web/src/hooks/index.js b/packages/web/src/hooks/index.js
new file mode 100644
index 0000000..8a513cd
--- /dev/null
+++ b/packages/web/src/hooks/index.js
@@ -0,0 +1 @@
+export { default as useRequest } from './useRequest'
\ No newline at end of file
diff --git a/packages/web/src/hooks/useFetchList.js b/packages/web/src/hooks/useFetchList.js
new file mode 100644
index 0000000..e331c22
--- /dev/null
+++ b/packages/web/src/hooks/useFetchList.js
@@ -0,0 +1,19 @@
+import { onMounted, ref } from 'vue';
+import { isArray } from 'lodash';
+
+const useFetchList = (req, path = 'list') => {
+ const list = ref([]);
+
+ const fetchList = async () => {
+ const { [path]: listData } = await req;
+ if (isArray(listData)) {
+ list.value = listData;
+ }
+ };
+
+ onMounted(fetchList);
+
+ return list;
+};
+
+export default useFetchList;
diff --git a/packages/web/src/hooks/useRequest.js b/packages/web/src/hooks/useRequest.js
new file mode 100644
index 0000000..e4f6e40
--- /dev/null
+++ b/packages/web/src/hooks/useRequest.js
@@ -0,0 +1,30 @@
+import { ref } from 'vue';
+import request from '@/utils/request';
+
+const useRequest = ({ url, method, params, data } = {}) => {
+ const loading = ref(false);
+
+ const run = async (options = {}) => {
+ loading.value = true;
+
+ try {
+ const res = await request({
+ url,
+ method,
+ params,
+ data,
+ ...options,
+ });
+
+ return res;
+ } catch (e) {
+ return Promise.reject(e);
+ } finally {
+ loading.value = false;
+ }
+ };
+
+ return { loading, run };
+};
+
+export default useRequest;
diff --git a/packages/web/src/icons/index.js b/packages/web/src/icons/index.js
new file mode 100644
index 0000000..7bac421
--- /dev/null
+++ b/packages/web/src/icons/index.js
@@ -0,0 +1,15 @@
+import SvgIcon from '@/components/SvgIcon'
+
+// https://webpack.docschina.org/guides/dependency-management/#requirecontext
+// 通过 require.context() 函数来新增自己的 context
+const svgRequire = require.context('./svg', false, /\.svg$/)
+const svgRequireMenu = require.context('./svg/menu', false, /\.svg$/)
+// 此时返回一个 require 的函数，可以接受一个 request 的参数，用于 require 的导入。
+// 该函数提供了三个属性，可以通过 require.keys() 获取到所有的 svg 图标
+// 遍历图标，把图标作为 request 传入到 require 导入函数中，完成本地 svg 图标的导入
+svgRequire.keys().forEach(svgIcon => svgRequire(svgIcon))
+svgRequireMenu.keys().forEach(svgIcon => svgRequireMenu(svgIcon))
+
+export default app => {
+ app.component('svg-icon', SvgIcon)
+}
diff --git a/packages/web/src/icons/svg/404.svg b/packages/web/src/icons/svg/404.svg
new file mode 100644
index 0000000..6df5019
--- /dev/null
+++ b/packages/web/src/icons/svg/404.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/ACTIVE copy.svg b/packages/web/src/icons/svg/ACTIVE copy.svg
new file mode 100644
index 0000000..a11ee35
--- /dev/null
+++ b/packages/web/src/icons/svg/ACTIVE copy.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/ACTIVE.svg b/packages/web/src/icons/svg/ACTIVE.svg
new file mode 100644
index 0000000..9bc3d30
--- /dev/null
+++ b/packages/web/src/icons/svg/ACTIVE.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/GPU.svg b/packages/web/src/icons/svg/GPU.svg
new file mode 100644
index 0000000..8ea1a00
--- /dev/null
+++ b/packages/web/src/icons/svg/GPU.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/SHUTOFF.svg b/packages/web/src/icons/svg/SHUTOFF.svg
new file mode 100644
index 0000000..3b24b51
--- /dev/null
+++ b/packages/web/src/icons/svg/SHUTOFF.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/about-sys.svg b/packages/web/src/icons/svg/about-sys.svg
new file mode 100644
index 0000000..930a380
--- /dev/null
+++ b/packages/web/src/icons/svg/about-sys.svg
@@ -0,0 +1,5 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/account.svg b/packages/web/src/icons/svg/account.svg
new file mode 100644
index 0000000..becf8a5
--- /dev/null
+++ b/packages/web/src/icons/svg/account.svg
@@ -0,0 +1,7 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/add.svg b/packages/web/src/icons/svg/add.svg
new file mode 100644
index 0000000..d2437f5
--- /dev/null
+++ b/packages/web/src/icons/svg/add.svg
@@ -0,0 +1,7 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/alarm-history.svg b/packages/web/src/icons/svg/alarm-history.svg
new file mode 100644
index 0000000..19eb721
--- /dev/null
+++ b/packages/web/src/icons/svg/alarm-history.svg
@@ -0,0 +1,14 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/alarm-warning.svg b/packages/web/src/icons/svg/alarm-warning.svg
new file mode 100644
index 0000000..fcf45ad
--- /dev/null
+++ b/packages/web/src/icons/svg/alarm-warning.svg
@@ -0,0 +1,24 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/alert.svg b/packages/web/src/icons/svg/alert.svg
new file mode 100644
index 0000000..f731833
--- /dev/null
+++ b/packages/web/src/icons/svg/alert.svg
@@ -0,0 +1,4 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/ali-lite.svg b/packages/web/src/icons/svg/ali-lite.svg
new file mode 100644
index 0000000..35aba41
--- /dev/null
+++ b/packages/web/src/icons/svg/ali-lite.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/ali.svg b/packages/web/src/icons/svg/ali.svg
new file mode 100644
index 0000000..68fe606
--- /dev/null
+++ b/packages/web/src/icons/svg/ali.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/all.svg b/packages/web/src/icons/svg/all.svg
new file mode 100644
index 0000000..f2fc14c
--- /dev/null
+++ b/packages/web/src/icons/svg/all.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/apply-my.svg b/packages/web/src/icons/svg/apply-my.svg
new file mode 100644
index 0000000..2e6037e
--- /dev/null
+++ b/packages/web/src/icons/svg/apply-my.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/apply.svg b/packages/web/src/icons/svg/apply.svg
new file mode 100644
index 0000000..407adc8
--- /dev/null
+++ b/packages/web/src/icons/svg/apply.svg
@@ -0,0 +1,6 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/approval.svg b/packages/web/src/icons/svg/approval.svg
new file mode 100644
index 0000000..b622f05
--- /dev/null
+++ b/packages/web/src/icons/svg/approval.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/apps.svg b/packages/web/src/icons/svg/apps.svg
new file mode 100644
index 0000000..a3f0cec
--- /dev/null
+++ b/packages/web/src/icons/svg/apps.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/art.svg b/packages/web/src/icons/svg/art.svg
new file mode 100644
index 0000000..9b6a6b1
--- /dev/null
+++ b/packages/web/src/icons/svg/art.svg
@@ -0,0 +1,5 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/bell.svg b/packages/web/src/icons/svg/bell.svg
new file mode 100644
index 0000000..879f526
--- /dev/null
+++ b/packages/web/src/icons/svg/bell.svg
@@ -0,0 +1,14 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/billing-invoice.svg b/packages/web/src/icons/svg/billing-invoice.svg
new file mode 100644
index 0000000..64c5b7f
--- /dev/null
+++ b/packages/web/src/icons/svg/billing-invoice.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/billing-strategy.svg b/packages/web/src/icons/svg/billing-strategy.svg
new file mode 100644
index 0000000..b1a6a40
--- /dev/null
+++ b/packages/web/src/icons/svg/billing-strategy.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/billing.svg b/packages/web/src/icons/svg/billing.svg
new file mode 100644
index 0000000..526c551
--- /dev/null
+++ b/packages/web/src/icons/svg/billing.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/block-bg.svg b/packages/web/src/icons/svg/block-bg.svg
new file mode 100644
index 0000000..75b39e1
--- /dev/null
+++ b/packages/web/src/icons/svg/block-bg.svg
@@ -0,0 +1,37 @@
+
diff --git a/packages/web/src/icons/svg/bug.svg b/packages/web/src/icons/svg/bug.svg
new file mode 100644
index 0000000..05a150d
--- /dev/null
+++ b/packages/web/src/icons/svg/bug.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/call.svg b/packages/web/src/icons/svg/call.svg
new file mode 100644
index 0000000..5120ce1
--- /dev/null
+++ b/packages/web/src/icons/svg/call.svg
@@ -0,0 +1,17 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/case-fill.svg b/packages/web/src/icons/svg/case-fill.svg
new file mode 100644
index 0000000..437c1ed
--- /dev/null
+++ b/packages/web/src/icons/svg/case-fill.svg
@@ -0,0 +1,3 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/catalog.svg b/packages/web/src/icons/svg/catalog.svg
new file mode 100644
index 0000000..3c6cf49
--- /dev/null
+++ b/packages/web/src/icons/svg/catalog.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/cbs.svg b/packages/web/src/icons/svg/cbs.svg
new file mode 100644
index 0000000..f3430fe
--- /dev/null
+++ b/packages/web/src/icons/svg/cbs.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/chart.svg b/packages/web/src/icons/svg/chart.svg
new file mode 100644
index 0000000..80e5cc7
--- /dev/null
+++ b/packages/web/src/icons/svg/chart.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/check-success.svg b/packages/web/src/icons/svg/check-success.svg
new file mode 100644
index 0000000..e0bbd65
--- /dev/null
+++ b/packages/web/src/icons/svg/check-success.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/clock-fill.svg b/packages/web/src/icons/svg/clock-fill.svg
new file mode 100644
index 0000000..60c18f6
--- /dev/null
+++ b/packages/web/src/icons/svg/clock-fill.svg
@@ -0,0 +1,3 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/clock.svg b/packages/web/src/icons/svg/clock.svg
new file mode 100644
index 0000000..ea015e7
--- /dev/null
+++ b/packages/web/src/icons/svg/clock.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/conan.svg b/packages/web/src/icons/svg/conan.svg
new file mode 100644
index 0000000..dc9ea73
--- /dev/null
+++ b/packages/web/src/icons/svg/conan.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/container-fill.svg b/packages/web/src/icons/svg/container-fill.svg
new file mode 100644
index 0000000..9539d8d
--- /dev/null
+++ b/packages/web/src/icons/svg/container-fill.svg
@@ -0,0 +1,3 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/copy-fill.svg b/packages/web/src/icons/svg/copy-fill.svg
new file mode 100644
index 0000000..f75a5b3
--- /dev/null
+++ b/packages/web/src/icons/svg/copy-fill.svg
@@ -0,0 +1,4 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/copy.svg b/packages/web/src/icons/svg/copy.svg
new file mode 100644
index 0000000..9cbc42c
--- /dev/null
+++ b/packages/web/src/icons/svg/copy.svg
@@ -0,0 +1,4 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/cpu.svg b/packages/web/src/icons/svg/cpu.svg
new file mode 100644
index 0000000..ac2cf2b
--- /dev/null
+++ b/packages/web/src/icons/svg/cpu.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/cronjob.svg b/packages/web/src/icons/svg/cronjob.svg
new file mode 100644
index 0000000..838ac7f
--- /dev/null
+++ b/packages/web/src/icons/svg/cronjob.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/dash-apps.svg b/packages/web/src/icons/svg/dash-apps.svg
new file mode 100644
index 0000000..5eadb11
--- /dev/null
+++ b/packages/web/src/icons/svg/dash-apps.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/dash-provider.svg b/packages/web/src/icons/svg/dash-provider.svg
new file mode 100644
index 0000000..ef81e30
--- /dev/null
+++ b/packages/web/src/icons/svg/dash-provider.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/dash-resource.svg b/packages/web/src/icons/svg/dash-resource.svg
new file mode 100644
index 0000000..ae12c0a
--- /dev/null
+++ b/packages/web/src/icons/svg/dash-resource.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/dashboard.svg b/packages/web/src/icons/svg/dashboard.svg
new file mode 100644
index 0000000..37faa70
--- /dev/null
+++ b/packages/web/src/icons/svg/dashboard.svg
@@ -0,0 +1,4 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/debian.svg b/packages/web/src/icons/svg/debian.svg
new file mode 100644
index 0000000..4946ab0
--- /dev/null
+++ b/packages/web/src/icons/svg/debian.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/delete.svg b/packages/web/src/icons/svg/delete.svg
new file mode 100644
index 0000000..528f1f2
--- /dev/null
+++ b/packages/web/src/icons/svg/delete.svg
@@ -0,0 +1,19 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/delivery-eff.svg b/packages/web/src/icons/svg/delivery-eff.svg
new file mode 100644
index 0000000..d530590
--- /dev/null
+++ b/packages/web/src/icons/svg/delivery-eff.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/delivery.svg b/packages/web/src/icons/svg/delivery.svg
new file mode 100644
index 0000000..ed2466b
--- /dev/null
+++ b/packages/web/src/icons/svg/delivery.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/deny.svg b/packages/web/src/icons/svg/deny.svg
new file mode 100644
index 0000000..f9ebe5e
--- /dev/null
+++ b/packages/web/src/icons/svg/deny.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/dept.svg b/packages/web/src/icons/svg/dept.svg
new file mode 100644
index 0000000..5dc2aa2
--- /dev/null
+++ b/packages/web/src/icons/svg/dept.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/dir.svg b/packages/web/src/icons/svg/dir.svg
new file mode 100644
index 0000000..97774f9
--- /dev/null
+++ b/packages/web/src/icons/svg/dir.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/docker.svg b/packages/web/src/icons/svg/docker.svg
new file mode 100644
index 0000000..0c5756e
--- /dev/null
+++ b/packages/web/src/icons/svg/docker.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/download.svg b/packages/web/src/icons/svg/download.svg
new file mode 100644
index 0000000..ba00b15
--- /dev/null
+++ b/packages/web/src/icons/svg/download.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/duty.svg b/packages/web/src/icons/svg/duty.svg
new file mode 100644
index 0000000..5514f6c
--- /dev/null
+++ b/packages/web/src/icons/svg/duty.svg
@@ -0,0 +1,8 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/ecs.svg b/packages/web/src/icons/svg/ecs.svg
new file mode 100644
index 0000000..6f39c26
--- /dev/null
+++ b/packages/web/src/icons/svg/ecs.svg
@@ -0,0 +1,2 @@
+
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/email.svg b/packages/web/src/icons/svg/email.svg
new file mode 100644
index 0000000..e9c1eed
--- /dev/null
+++ b/packages/web/src/icons/svg/email.svg
@@ -0,0 +1,18 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/empty.svg b/packages/web/src/icons/svg/empty.svg
new file mode 100644
index 0000000..7dc1084
--- /dev/null
+++ b/packages/web/src/icons/svg/empty.svg
@@ -0,0 +1,8 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/engine-version.svg b/packages/web/src/icons/svg/engine-version.svg
new file mode 100644
index 0000000..20b1614
--- /dev/null
+++ b/packages/web/src/icons/svg/engine-version.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/engine.svg b/packages/web/src/icons/svg/engine.svg
new file mode 100644
index 0000000..1754a08
--- /dev/null
+++ b/packages/web/src/icons/svg/engine.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/error.svg b/packages/web/src/icons/svg/error.svg
new file mode 100644
index 0000000..bfa8af1
--- /dev/null
+++ b/packages/web/src/icons/svg/error.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/event.svg b/packages/web/src/icons/svg/event.svg
new file mode 100644
index 0000000..f2ac7a9
--- /dev/null
+++ b/packages/web/src/icons/svg/event.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/evs-old.svg b/packages/web/src/icons/svg/evs-old.svg
new file mode 100644
index 0000000..927cc65
--- /dev/null
+++ b/packages/web/src/icons/svg/evs-old.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/evs.svg b/packages/web/src/icons/svg/evs.svg
new file mode 100644
index 0000000..aa48a4c
--- /dev/null
+++ b/packages/web/src/icons/svg/evs.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/exec.svg b/packages/web/src/icons/svg/exec.svg
new file mode 100644
index 0000000..4803d82
--- /dev/null
+++ b/packages/web/src/icons/svg/exec.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/expand-left.svg b/packages/web/src/icons/svg/expand-left.svg
new file mode 100644
index 0000000..c07dbb8
--- /dev/null
+++ b/packages/web/src/icons/svg/expand-left.svg
@@ -0,0 +1,4 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/expand-right.svg b/packages/web/src/icons/svg/expand-right.svg
new file mode 100644
index 0000000..864c068
--- /dev/null
+++ b/packages/web/src/icons/svg/expand-right.svg
@@ -0,0 +1,4 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/expand.svg b/packages/web/src/icons/svg/expand.svg
new file mode 100644
index 0000000..5f9dbe6
--- /dev/null
+++ b/packages/web/src/icons/svg/expand.svg
@@ -0,0 +1,3 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/eye-open.svg b/packages/web/src/icons/svg/eye-open.svg
new file mode 100644
index 0000000..88dcc98
--- /dev/null
+++ b/packages/web/src/icons/svg/eye-open.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/eye.svg b/packages/web/src/icons/svg/eye.svg
new file mode 100644
index 0000000..5b50c0f
--- /dev/null
+++ b/packages/web/src/icons/svg/eye.svg
@@ -0,0 +1,8 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/favorites.svg b/packages/web/src/icons/svg/favorites.svg
new file mode 100644
index 0000000..6903abf
--- /dev/null
+++ b/packages/web/src/icons/svg/favorites.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/file.svg b/packages/web/src/icons/svg/file.svg
new file mode 100644
index 0000000..5f729c5
--- /dev/null
+++ b/packages/web/src/icons/svg/file.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/fire.svg b/packages/web/src/icons/svg/fire.svg
new file mode 100644
index 0000000..6448617
--- /dev/null
+++ b/packages/web/src/icons/svg/fire.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/flavor.svg b/packages/web/src/icons/svg/flavor.svg
new file mode 100644
index 0000000..4ef6dc7
--- /dev/null
+++ b/packages/web/src/icons/svg/flavor.svg
@@ -0,0 +1,4 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/go.svg b/packages/web/src/icons/svg/go.svg
new file mode 100644
index 0000000..3d60998
--- /dev/null
+++ b/packages/web/src/icons/svg/go.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/gpu2.svg b/packages/web/src/icons/svg/gpu2.svg
new file mode 100644
index 0000000..e903bb3
--- /dev/null
+++ b/packages/web/src/icons/svg/gpu2.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/group.svg b/packages/web/src/icons/svg/group.svg
new file mode 100644
index 0000000..5d930e4
--- /dev/null
+++ b/packages/web/src/icons/svg/group.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/healthy.svg b/packages/web/src/icons/svg/healthy.svg
new file mode 100644
index 0000000..73a069b
--- /dev/null
+++ b/packages/web/src/icons/svg/healthy.svg
@@ -0,0 +1,5 @@
+
diff --git a/packages/web/src/icons/svg/helm.svg b/packages/web/src/icons/svg/helm.svg
new file mode 100644
index 0000000..6cd6050
--- /dev/null
+++ b/packages/web/src/icons/svg/helm.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/help.svg b/packages/web/src/icons/svg/help.svg
new file mode 100644
index 0000000..f675c20
--- /dev/null
+++ b/packages/web/src/icons/svg/help.svg
@@ -0,0 +1,3 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/high.svg b/packages/web/src/icons/svg/high.svg
new file mode 100644
index 0000000..c6a6312
--- /dev/null
+++ b/packages/web/src/icons/svg/high.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/highSearch.svg b/packages/web/src/icons/svg/highSearch.svg
new file mode 100644
index 0000000..bb22f8d
--- /dev/null
+++ b/packages/web/src/icons/svg/highSearch.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/home-avatar.svg b/packages/web/src/icons/svg/home-avatar.svg
new file mode 100644
index 0000000..381c02e
--- /dev/null
+++ b/packages/web/src/icons/svg/home-avatar.svg
@@ -0,0 +1,37 @@
+
diff --git a/packages/web/src/icons/svg/home.svg b/packages/web/src/icons/svg/home.svg
new file mode 100644
index 0000000..23b15ff
--- /dev/null
+++ b/packages/web/src/icons/svg/home.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/host.svg b/packages/web/src/icons/svg/host.svg
new file mode 100644
index 0000000..8c9fcb8
--- /dev/null
+++ b/packages/web/src/icons/svg/host.svg
@@ -0,0 +1,4 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/huawei-lite.svg b/packages/web/src/icons/svg/huawei-lite.svg
new file mode 100644
index 0000000..3470cc0
--- /dev/null
+++ b/packages/web/src/icons/svg/huawei-lite.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/huawei.svg b/packages/web/src/icons/svg/huawei.svg
new file mode 100644
index 0000000..4c02513
--- /dev/null
+++ b/packages/web/src/icons/svg/huawei.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/huojian.svg b/packages/web/src/icons/svg/huojian.svg
new file mode 100644
index 0000000..f41b401
--- /dev/null
+++ b/packages/web/src/icons/svg/huojian.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/iaas.svg b/packages/web/src/icons/svg/iaas.svg
new file mode 100644
index 0000000..7fe74d1
--- /dev/null
+++ b/packages/web/src/icons/svg/iaas.svg
@@ -0,0 +1,4 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/image.svg b/packages/web/src/icons/svg/image.svg
new file mode 100644
index 0000000..0e816a2
--- /dev/null
+++ b/packages/web/src/icons/svg/image.svg
@@ -0,0 +1,5 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/info.svg b/packages/web/src/icons/svg/info.svg
new file mode 100644
index 0000000..c68f1b5
--- /dev/null
+++ b/packages/web/src/icons/svg/info.svg
@@ -0,0 +1,3 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/instance-group.svg b/packages/web/src/icons/svg/instance-group.svg
new file mode 100644
index 0000000..caab0c2
--- /dev/null
+++ b/packages/web/src/icons/svg/instance-group.svg
@@ -0,0 +1,5 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/instance.svg b/packages/web/src/icons/svg/instance.svg
new file mode 100644
index 0000000..2d821d2
--- /dev/null
+++ b/packages/web/src/icons/svg/instance.svg
@@ -0,0 +1,4 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/line.svg b/packages/web/src/icons/svg/line.svg
new file mode 100644
index 0000000..1ccf184
--- /dev/null
+++ b/packages/web/src/icons/svg/line.svg
@@ -0,0 +1,10 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/list-head-expand.svg b/packages/web/src/icons/svg/list-head-expand.svg
new file mode 100644
index 0000000..78b4a3d
--- /dev/null
+++ b/packages/web/src/icons/svg/list-head-expand.svg
@@ -0,0 +1,4 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/list-head-narrow.svg b/packages/web/src/icons/svg/list-head-narrow.svg
new file mode 100644
index 0000000..4737d81
--- /dev/null
+++ b/packages/web/src/icons/svg/list-head-narrow.svg
@@ -0,0 +1,4 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/logo-vast.svg b/packages/web/src/icons/svg/logo-vast.svg
new file mode 100644
index 0000000..655b718
--- /dev/null
+++ b/packages/web/src/icons/svg/logo-vast.svg
@@ -0,0 +1,9 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/logout.svg b/packages/web/src/icons/svg/logout.svg
new file mode 100644
index 0000000..6042bda
--- /dev/null
+++ b/packages/web/src/icons/svg/logout.svg
@@ -0,0 +1,3 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/logs.svg b/packages/web/src/icons/svg/logs.svg
new file mode 100644
index 0000000..fbc15f2
--- /dev/null
+++ b/packages/web/src/icons/svg/logs.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/low.svg b/packages/web/src/icons/svg/low.svg
new file mode 100644
index 0000000..037507e
--- /dev/null
+++ b/packages/web/src/icons/svg/low.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/maintain.svg b/packages/web/src/icons/svg/maintain.svg
new file mode 100644
index 0000000..e9738e6
--- /dev/null
+++ b/packages/web/src/icons/svg/maintain.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/maven2.svg b/packages/web/src/icons/svg/maven2.svg
new file mode 100644
index 0000000..4e5fd5e
--- /dev/null
+++ b/packages/web/src/icons/svg/maven2.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/mem.svg b/packages/web/src/icons/svg/mem.svg
new file mode 100644
index 0000000..288c373
--- /dev/null
+++ b/packages/web/src/icons/svg/mem.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/menu.svg b/packages/web/src/icons/svg/menu.svg
new file mode 100644
index 0000000..e184f0c
--- /dev/null
+++ b/packages/web/src/icons/svg/menu.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/menu/resource-pool.svg b/packages/web/src/icons/svg/menu/resource-pool.svg
new file mode 100644
index 0000000..2655eca
--- /dev/null
+++ b/packages/web/src/icons/svg/menu/resource-pool.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/menu/rules.svg b/packages/web/src/icons/svg/menu/rules.svg
new file mode 100644
index 0000000..ae7e38e
--- /dev/null
+++ b/packages/web/src/icons/svg/menu/rules.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/menu/stress.svg b/packages/web/src/icons/svg/menu/stress.svg
new file mode 100644
index 0000000..f8e6671
--- /dev/null
+++ b/packages/web/src/icons/svg/menu/stress.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/menu/task.svg b/packages/web/src/icons/svg/menu/task.svg
new file mode 100644
index 0000000..7e27ddf
--- /dev/null
+++ b/packages/web/src/icons/svg/menu/task.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/menu/template.svg b/packages/web/src/icons/svg/menu/template.svg
new file mode 100644
index 0000000..a7b7246
--- /dev/null
+++ b/packages/web/src/icons/svg/menu/template.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/menu/user-group.svg b/packages/web/src/icons/svg/menu/user-group.svg
new file mode 100644
index 0000000..e92abc3
--- /dev/null
+++ b/packages/web/src/icons/svg/menu/user-group.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/menu/warn.svg b/packages/web/src/icons/svg/menu/warn.svg
new file mode 100644
index 0000000..397b1f3
--- /dev/null
+++ b/packages/web/src/icons/svg/menu/warn.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/messages.svg b/packages/web/src/icons/svg/messages.svg
new file mode 100644
index 0000000..781a826
--- /dev/null
+++ b/packages/web/src/icons/svg/messages.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/monitor-run.svg b/packages/web/src/icons/svg/monitor-run.svg
new file mode 100644
index 0000000..b39e5f1
--- /dev/null
+++ b/packages/web/src/icons/svg/monitor-run.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/more.svg b/packages/web/src/icons/svg/more.svg
new file mode 100644
index 0000000..d0a75d0
--- /dev/null
+++ b/packages/web/src/icons/svg/more.svg
@@ -0,0 +1,3 @@
+
diff --git a/packages/web/src/icons/svg/my-msg.svg b/packages/web/src/icons/svg/my-msg.svg
new file mode 100644
index 0000000..ac197b1
--- /dev/null
+++ b/packages/web/src/icons/svg/my-msg.svg
@@ -0,0 +1,6 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/next.svg b/packages/web/src/icons/svg/next.svg
new file mode 100644
index 0000000..f35f1ea
--- /dev/null
+++ b/packages/web/src/icons/svg/next.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/nic.svg b/packages/web/src/icons/svg/nic.svg
new file mode 100644
index 0000000..379419f
--- /dev/null
+++ b/packages/web/src/icons/svg/nic.svg
@@ -0,0 +1,6 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/node.svg b/packages/web/src/icons/svg/node.svg
new file mode 100644
index 0000000..9257221
--- /dev/null
+++ b/packages/web/src/icons/svg/node.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/npm.svg b/packages/web/src/icons/svg/npm.svg
new file mode 100644
index 0000000..acaaa70
--- /dev/null
+++ b/packages/web/src/icons/svg/npm.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/nuget.svg b/packages/web/src/icons/svg/nuget.svg
new file mode 100644
index 0000000..d6cabb6
--- /dev/null
+++ b/packages/web/src/icons/svg/nuget.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/op-analysis.svg b/packages/web/src/icons/svg/op-analysis.svg
new file mode 100644
index 0000000..d8bc467
--- /dev/null
+++ b/packages/web/src/icons/svg/op-analysis.svg
@@ -0,0 +1,4 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/org.svg b/packages/web/src/icons/svg/org.svg
new file mode 100644
index 0000000..3b5f83e
--- /dev/null
+++ b/packages/web/src/icons/svg/org.svg
@@ -0,0 +1,9 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/oss.svg b/packages/web/src/icons/svg/oss.svg
new file mode 100644
index 0000000..e467917
--- /dev/null
+++ b/packages/web/src/icons/svg/oss.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/overview.svg b/packages/web/src/icons/svg/overview.svg
new file mode 100644
index 0000000..1c3b235
--- /dev/null
+++ b/packages/web/src/icons/svg/overview.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/paas.svg b/packages/web/src/icons/svg/paas.svg
new file mode 100644
index 0000000..5e2b02e
--- /dev/null
+++ b/packages/web/src/icons/svg/paas.svg
@@ -0,0 +1,5 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/password.svg b/packages/web/src/icons/svg/password.svg
new file mode 100644
index 0000000..e291d85
--- /dev/null
+++ b/packages/web/src/icons/svg/password.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/plus.svg b/packages/web/src/icons/svg/plus.svg
new file mode 100644
index 0000000..c26d4dc
--- /dev/null
+++ b/packages/web/src/icons/svg/plus.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/pool.svg b/packages/web/src/icons/svg/pool.svg
new file mode 100644
index 0000000..7af583c
--- /dev/null
+++ b/packages/web/src/icons/svg/pool.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/promotion.svg b/packages/web/src/icons/svg/promotion.svg
new file mode 100644
index 0000000..2999f73
--- /dev/null
+++ b/packages/web/src/icons/svg/promotion.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/provider.svg b/packages/web/src/icons/svg/provider.svg
new file mode 100644
index 0000000..3cba75f
--- /dev/null
+++ b/packages/web/src/icons/svg/provider.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/pypi.svg b/packages/web/src/icons/svg/pypi.svg
new file mode 100644
index 0000000..2eab427
--- /dev/null
+++ b/packages/web/src/icons/svg/pypi.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/raw.svg b/packages/web/src/icons/svg/raw.svg
new file mode 100644
index 0000000..67c6beb
--- /dev/null
+++ b/packages/web/src/icons/svg/raw.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/rbac.svg b/packages/web/src/icons/svg/rbac.svg
new file mode 100644
index 0000000..27bbb6f
--- /dev/null
+++ b/packages/web/src/icons/svg/rbac.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/rds.svg b/packages/web/src/icons/svg/rds.svg
new file mode 100644
index 0000000..f3430fe
--- /dev/null
+++ b/packages/web/src/icons/svg/rds.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/read.svg b/packages/web/src/icons/svg/read.svg
new file mode 100644
index 0000000..9e14788
--- /dev/null
+++ b/packages/web/src/icons/svg/read.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/recycle.svg b/packages/web/src/icons/svg/recycle.svg
new file mode 100644
index 0000000..7b5ae8f
--- /dev/null
+++ b/packages/web/src/icons/svg/recycle.svg
@@ -0,0 +1,6 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/refresh.svg b/packages/web/src/icons/svg/refresh.svg
new file mode 100644
index 0000000..40f13bd
--- /dev/null
+++ b/packages/web/src/icons/svg/refresh.svg
@@ -0,0 +1,3 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/region.svg b/packages/web/src/icons/svg/region.svg
new file mode 100644
index 0000000..c2327f5
--- /dev/null
+++ b/packages/web/src/icons/svg/region.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/remove.svg b/packages/web/src/icons/svg/remove.svg
new file mode 100644
index 0000000..b442443
--- /dev/null
+++ b/packages/web/src/icons/svg/remove.svg
@@ -0,0 +1,8 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/resource-pool.svg b/packages/web/src/icons/svg/resource-pool.svg
new file mode 100644
index 0000000..2655eca
--- /dev/null
+++ b/packages/web/src/icons/svg/resource-pool.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/rpm.svg b/packages/web/src/icons/svg/rpm.svg
new file mode 100644
index 0000000..89652f8
--- /dev/null
+++ b/packages/web/src/icons/svg/rpm.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/rules.svg b/packages/web/src/icons/svg/rules.svg
new file mode 100644
index 0000000..ae7e38e
--- /dev/null
+++ b/packages/web/src/icons/svg/rules.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/search.svg b/packages/web/src/icons/svg/search.svg
new file mode 100644
index 0000000..2b4e37b
--- /dev/null
+++ b/packages/web/src/icons/svg/search.svg
@@ -0,0 +1,5 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/security-group.svg b/packages/web/src/icons/svg/security-group.svg
new file mode 100644
index 0000000..fa2b39f
--- /dev/null
+++ b/packages/web/src/icons/svg/security-group.svg
@@ -0,0 +1,5 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/set.svg b/packages/web/src/icons/svg/set.svg
new file mode 100644
index 0000000..b929037
--- /dev/null
+++ b/packages/web/src/icons/svg/set.svg
@@ -0,0 +1,9 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/setting.svg b/packages/web/src/icons/svg/setting.svg
new file mode 100644
index 0000000..244e8aa
--- /dev/null
+++ b/packages/web/src/icons/svg/setting.svg
@@ -0,0 +1,6 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/sg.svg b/packages/web/src/icons/svg/sg.svg
new file mode 100644
index 0000000..8686ef7
--- /dev/null
+++ b/packages/web/src/icons/svg/sg.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/sitemap.svg b/packages/web/src/icons/svg/sitemap.svg
new file mode 100644
index 0000000..adf58de
--- /dev/null
+++ b/packages/web/src/icons/svg/sitemap.svg
@@ -0,0 +1,25 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/slb.svg b/packages/web/src/icons/svg/slb.svg
new file mode 100644
index 0000000..f3c79fa
--- /dev/null
+++ b/packages/web/src/icons/svg/slb.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/stress.svg b/packages/web/src/icons/svg/stress.svg
new file mode 100644
index 0000000..f8e6671
--- /dev/null
+++ b/packages/web/src/icons/svg/stress.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/submit.svg b/packages/web/src/icons/svg/submit.svg
new file mode 100644
index 0000000..2dd1ee5
--- /dev/null
+++ b/packages/web/src/icons/svg/submit.svg
@@ -0,0 +1,4 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/subnet.svg b/packages/web/src/icons/svg/subnet.svg
new file mode 100644
index 0000000..ae8956a
--- /dev/null
+++ b/packages/web/src/icons/svg/subnet.svg
@@ -0,0 +1,6 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/successful.svg b/packages/web/src/icons/svg/successful.svg
new file mode 100644
index 0000000..faa81d0
--- /dev/null
+++ b/packages/web/src/icons/svg/successful.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/suggest-down.svg b/packages/web/src/icons/svg/suggest-down.svg
new file mode 100644
index 0000000..22d2704
--- /dev/null
+++ b/packages/web/src/icons/svg/suggest-down.svg
@@ -0,0 +1,4 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/suggest-set.svg b/packages/web/src/icons/svg/suggest-set.svg
new file mode 100644
index 0000000..58a0264
--- /dev/null
+++ b/packages/web/src/icons/svg/suggest-set.svg
@@ -0,0 +1,4 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/suggest-trash.svg b/packages/web/src/icons/svg/suggest-trash.svg
new file mode 100644
index 0000000..26c914c
--- /dev/null
+++ b/packages/web/src/icons/svg/suggest-trash.svg
@@ -0,0 +1,4 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/suggest-up.svg b/packages/web/src/icons/svg/suggest-up.svg
new file mode 100644
index 0000000..9dcb2eb
--- /dev/null
+++ b/packages/web/src/icons/svg/suggest-up.svg
@@ -0,0 +1,4 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/sys-app.svg b/packages/web/src/icons/svg/sys-app.svg
new file mode 100644
index 0000000..e6c79bd
--- /dev/null
+++ b/packages/web/src/icons/svg/sys-app.svg
@@ -0,0 +1,4 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/tablerSettingsCheck.svg b/packages/web/src/icons/svg/tablerSettingsCheck.svg
new file mode 100644
index 0000000..75b62f1
--- /dev/null
+++ b/packages/web/src/icons/svg/tablerSettingsCheck.svg
@@ -0,0 +1,19 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/tag.svg b/packages/web/src/icons/svg/tag.svg
new file mode 100644
index 0000000..e8e14b4
--- /dev/null
+++ b/packages/web/src/icons/svg/tag.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/task.svg b/packages/web/src/icons/svg/task.svg
new file mode 100644
index 0000000..7e27ddf
--- /dev/null
+++ b/packages/web/src/icons/svg/task.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/template.svg b/packages/web/src/icons/svg/template.svg
new file mode 100644
index 0000000..a7b7246
--- /dev/null
+++ b/packages/web/src/icons/svg/template.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/test.svg b/packages/web/src/icons/svg/test.svg
new file mode 100644
index 0000000..66f41ea
--- /dev/null
+++ b/packages/web/src/icons/svg/test.svg
@@ -0,0 +1,4 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/textDanger.svg b/packages/web/src/icons/svg/textDanger.svg
new file mode 100644
index 0000000..ac7370b
--- /dev/null
+++ b/packages/web/src/icons/svg/textDanger.svg
@@ -0,0 +1,6 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/textGreen.svg b/packages/web/src/icons/svg/textGreen.svg
new file mode 100644
index 0000000..2d9c5ac
--- /dev/null
+++ b/packages/web/src/icons/svg/textGreen.svg
@@ -0,0 +1,5 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/tip.svg b/packages/web/src/icons/svg/tip.svg
new file mode 100644
index 0000000..6b1f18c
--- /dev/null
+++ b/packages/web/src/icons/svg/tip.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/unhealthy.svg b/packages/web/src/icons/svg/unhealthy.svg
new file mode 100644
index 0000000..db75be0
--- /dev/null
+++ b/packages/web/src/icons/svg/unhealthy.svg
@@ -0,0 +1,5 @@
+
diff --git a/packages/web/src/icons/svg/unread.svg b/packages/web/src/icons/svg/unread.svg
new file mode 100644
index 0000000..5aaa129
--- /dev/null
+++ b/packages/web/src/icons/svg/unread.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/user-group.svg b/packages/web/src/icons/svg/user-group.svg
new file mode 100644
index 0000000..e92abc3
--- /dev/null
+++ b/packages/web/src/icons/svg/user-group.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/user.svg b/packages/web/src/icons/svg/user.svg
new file mode 100644
index 0000000..1f00a94
--- /dev/null
+++ b/packages/web/src/icons/svg/user.svg
@@ -0,0 +1,41 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/userGroup.svg b/packages/web/src/icons/svg/userGroup.svg
new file mode 100644
index 0000000..285e6b0
--- /dev/null
+++ b/packages/web/src/icons/svg/userGroup.svg
@@ -0,0 +1,9 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/vgpu-alert.svg b/packages/web/src/icons/svg/vgpu-alert.svg
new file mode 100644
index 0000000..3d5d531
--- /dev/null
+++ b/packages/web/src/icons/svg/vgpu-alert.svg
@@ -0,0 +1,6 @@
+
diff --git a/packages/web/src/icons/svg/vgpu-audit.svg b/packages/web/src/icons/svg/vgpu-audit.svg
new file mode 100644
index 0000000..66cca06
--- /dev/null
+++ b/packages/web/src/icons/svg/vgpu-audit.svg
@@ -0,0 +1,6 @@
+
diff --git a/packages/web/src/icons/svg/vgpu-card.svg b/packages/web/src/icons/svg/vgpu-card.svg
new file mode 100644
index 0000000..80ea344
--- /dev/null
+++ b/packages/web/src/icons/svg/vgpu-card.svg
@@ -0,0 +1,6 @@
+
diff --git a/packages/web/src/icons/svg/vgpu-cluster-duotone.svg b/packages/web/src/icons/svg/vgpu-cluster-duotone.svg
new file mode 100644
index 0000000..96644c7
--- /dev/null
+++ b/packages/web/src/icons/svg/vgpu-cluster-duotone.svg
@@ -0,0 +1,5 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/vgpu-cluster.svg b/packages/web/src/icons/svg/vgpu-cluster.svg
new file mode 100644
index 0000000..3bfc16e
--- /dev/null
+++ b/packages/web/src/icons/svg/vgpu-cluster.svg
@@ -0,0 +1,19 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/vgpu-core.svg b/packages/web/src/icons/svg/vgpu-core.svg
new file mode 100644
index 0000000..10336b9
--- /dev/null
+++ b/packages/web/src/icons/svg/vgpu-core.svg
@@ -0,0 +1,16 @@
+
diff --git a/packages/web/src/icons/svg/vgpu-flavor.svg b/packages/web/src/icons/svg/vgpu-flavor.svg
new file mode 100644
index 0000000..c75106c
--- /dev/null
+++ b/packages/web/src/icons/svg/vgpu-flavor.svg
@@ -0,0 +1,5 @@
+
diff --git a/packages/web/src/icons/svg/vgpu-gpu-d.svg b/packages/web/src/icons/svg/vgpu-gpu-d.svg
new file mode 100644
index 0000000..ef1600e
--- /dev/null
+++ b/packages/web/src/icons/svg/vgpu-gpu-d.svg
@@ -0,0 +1,12 @@
+
diff --git a/packages/web/src/icons/svg/vgpu-gpu-l.svg b/packages/web/src/icons/svg/vgpu-gpu-l.svg
new file mode 100644
index 0000000..901d990
--- /dev/null
+++ b/packages/web/src/icons/svg/vgpu-gpu-l.svg
@@ -0,0 +1,12 @@
+
diff --git a/packages/web/src/icons/svg/vgpu-license.svg b/packages/web/src/icons/svg/vgpu-license.svg
new file mode 100644
index 0000000..814f107
--- /dev/null
+++ b/packages/web/src/icons/svg/vgpu-license.svg
@@ -0,0 +1,6 @@
+
diff --git a/packages/web/src/icons/svg/vgpu-mem.svg b/packages/web/src/icons/svg/vgpu-mem.svg
new file mode 100644
index 0000000..2b89def
--- /dev/null
+++ b/packages/web/src/icons/svg/vgpu-mem.svg
@@ -0,0 +1,23 @@
+
diff --git a/packages/web/src/icons/svg/vgpu-node.svg b/packages/web/src/icons/svg/vgpu-node.svg
new file mode 100644
index 0000000..d308bfc
--- /dev/null
+++ b/packages/web/src/icons/svg/vgpu-node.svg
@@ -0,0 +1,6 @@
+
diff --git a/packages/web/src/icons/svg/vgpu-pool.svg b/packages/web/src/icons/svg/vgpu-pool.svg
new file mode 100644
index 0000000..ee5b5ba
--- /dev/null
+++ b/packages/web/src/icons/svg/vgpu-pool.svg
@@ -0,0 +1,4 @@
+
diff --git a/packages/web/src/icons/svg/vgpu-sched.svg b/packages/web/src/icons/svg/vgpu-sched.svg
new file mode 100644
index 0000000..b277da7
--- /dev/null
+++ b/packages/web/src/icons/svg/vgpu-sched.svg
@@ -0,0 +1,8 @@
+
diff --git a/packages/web/src/icons/svg/vgpu-sys-fill.svg b/packages/web/src/icons/svg/vgpu-sys-fill.svg
new file mode 100644
index 0000000..91b6a1f
--- /dev/null
+++ b/packages/web/src/icons/svg/vgpu-sys-fill.svg
@@ -0,0 +1,4 @@
+
diff --git a/packages/web/src/icons/svg/vgpu-sys.svg b/packages/web/src/icons/svg/vgpu-sys.svg
new file mode 100644
index 0000000..4b1fd5c
--- /dev/null
+++ b/packages/web/src/icons/svg/vgpu-sys.svg
@@ -0,0 +1,13 @@
+
diff --git a/packages/web/src/icons/svg/vgpu-task.svg b/packages/web/src/icons/svg/vgpu-task.svg
new file mode 100644
index 0000000..35d7762
--- /dev/null
+++ b/packages/web/src/icons/svg/vgpu-task.svg
@@ -0,0 +1,5 @@
+
diff --git a/packages/web/src/icons/svg/vgpu-tmpl.svg b/packages/web/src/icons/svg/vgpu-tmpl.svg
new file mode 100644
index 0000000..2e9ac0b
--- /dev/null
+++ b/packages/web/src/icons/svg/vgpu-tmpl.svg
@@ -0,0 +1,7 @@
+
diff --git a/packages/web/src/icons/svg/volume.svg b/packages/web/src/icons/svg/volume.svg
new file mode 100644
index 0000000..565148f
--- /dev/null
+++ b/packages/web/src/icons/svg/volume.svg
@@ -0,0 +1,4 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/vpc.svg b/packages/web/src/icons/svg/vpc.svg
new file mode 100644
index 0000000..1d58862
--- /dev/null
+++ b/packages/web/src/icons/svg/vpc.svg
@@ -0,0 +1,10 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svg/warn.svg b/packages/web/src/icons/svg/warn.svg
new file mode 100644
index 0000000..397b1f3
--- /dev/null
+++ b/packages/web/src/icons/svg/warn.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web/src/icons/svgo.yml b/packages/web/src/icons/svgo.yml
new file mode 100644
index 0000000..d11906a
--- /dev/null
+++ b/packages/web/src/icons/svgo.yml
@@ -0,0 +1,22 @@
+# replace default config
+
+# multipass: true
+# full: true
+
+plugins:
+
+ # - name
+ #
+ # or:
+ # - name: false
+ # - name: true
+ #
+ # or:
+ # - name:
+ # param1: 1
+ # param2: 2
+
+- removeAttrs:
+ attrs:
+ - 'fill'
+ - 'fill-rule'
diff --git a/packages/web/src/layout/components/AppMain.vue b/packages/web/src/layout/components/AppMain.vue
new file mode 100644
index 0000000..ed76992
--- /dev/null
+++ b/packages/web/src/layout/components/AppMain.vue
@@ -0,0 +1,28 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/web/src/layout/components/Sidebar/index-old.vue b/packages/web/src/layout/components/Sidebar/index-old.vue
new file mode 100644
index 0000000..3aee79a
--- /dev/null
+++ b/packages/web/src/layout/components/Sidebar/index-old.vue
@@ -0,0 +1,123 @@
+
+
+
+
+ {{
+ $route.matched[0].meta.title
+ }}
+
+
+
+
+
+
+
+
diff --git a/packages/web/src/layout/components/TopBar/index.vue b/packages/web/src/layout/components/TopBar/index.vue
new file mode 100644
index 0000000..3e0f674
--- /dev/null
+++ b/packages/web/src/layout/components/TopBar/index.vue
@@ -0,0 +1,43 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/web/src/layout/components/TopBar/logo.vue b/packages/web/src/layout/components/TopBar/logo.vue
new file mode 100644
index 0000000..67b6d1c
--- /dev/null
+++ b/packages/web/src/layout/components/TopBar/logo.vue
@@ -0,0 +1,16 @@
+
+
+
+
+
+
+ 
+
+
+
+
diff --git a/packages/web/src/layout/components/TopBar/style.scss b/packages/web/src/layout/components/TopBar/style.scss
new file mode 100644
index 0000000..4e9d79f
--- /dev/null
+++ b/packages/web/src/layout/components/TopBar/style.scss
@@ -0,0 +1,187 @@
+// $activeColor: rgba(255, 255, 255, 0.12);
+$activeColor: var(--el-color-primary);
+#topBar {
+ width: 100%;
+ background-color: #1d2b3a;
+ color: #adb0b8;
+ height: 56px;
+ line-height: 56px;
+ border-bottom: none;
+ z-index: 200;
+ position: fixed;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+
+ .left {
+ display: flex;
+ .logo {
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ margin-left: 20px;
+ margin-right: 20px;
+ }
+ }
+
+ .menus {
+ background-color: transparent;
+ border: none;
+ height: 32px;
+ align-items: center;
+ display: inline-flex;
+ gap: 4px;
+
+ .el-menu-item {
+ border: none;
+ font-size: 12px;
+ padding: 6px 12px;
+ color: rgba(255, 255, 255, 0.8);
+ &:hover {
+ color: #fff;
+ border-radius: 4px;
+ background-color: transparent;
+ }
+
+ .expand-ico {
+ margin-left: 5px;
+ font-size: 18px;
+ transition: 0.7s all;
+ }
+
+ .expand-ico-rotate {
+ transform: rotate(180deg);
+ }
+ }
+
+ .is-active {
+ color: #fff;
+ border-radius: 4px;
+ background: $activeColor;
+ &:hover {
+ background: $activeColor;
+ }
+ }
+
+ .el-sub-menu {
+ font-size: 12px;
+ height: 32px;
+ border-radius: 4px;
+ // position: relative;
+ // top: 1px;
+ .el-sub-menu__title {
+ border: none;
+ font-size: 12px;
+ color: rgba(255, 255, 255, 0.8);
+ &:hover {
+ color: #fff!important;
+ border-radius: 4px;
+ background-color: transparent!important;
+ }
+ }
+ }
+
+ }
+
+ .right {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ .searchBar {
+ width: 164px;
+ height: 32px;
+ position: relative;
+ .el-input {
+ position: absolute;
+ top: 0;
+ input::-webkit-input-placeholder {
+ font-size: 12px;
+ }
+ }
+ .el-input__wrapper {
+ background: rgba(255, 255, 255, 0.06) !important;
+ border: none !important;
+ box-shadow: none !important;
+
+ .el-input__inner {
+ border: none !important;
+ color: #fff;
+ }
+ }
+ }
+
+ .tools {
+ margin-right: 37px;
+ display: flex;
+ gap: 24px;
+
+ &-item {
+ display: flex;
+ align-items: center;
+ svg {
+ font-size: 26px;
+ cursor: pointer;
+ padding: 5px;
+ border-radius: 4px;
+ &:hover {
+ background: $activeColor;
+ }
+ }
+ }
+ }
+
+ .line {
+ margin: 0 20px;
+ }
+
+ .bell {
+ margin-left: 35px;
+ font-size: 16px;
+ }
+
+ .user {
+ cursor: pointer;
+ color: rgba(255, 255, 255, 0.8);
+ font-size: 12px;
+ margin-right: 21px;
+ display: flex;
+ align-items: center;
+ .user-icon {
+ height: 24px;
+ width: 24px;
+ // transform: scale(4.5);
+ // position: relative;
+ // top: 2px;
+ // left: -5px;
+ }
+
+ // &:hover {
+ // color: #fff;
+ // background: rgba($color: #fff, $alpha: 0.1);
+ // }
+ }
+ }
+}
+
+.user-menu {
+ &-item {
+ display: flex;
+ padding: 10px 8px;
+ align-items: center;
+ gap: 8px;
+ align-self: stretch;
+ border-radius: 6px;
+ &:hover {
+ background: #f5f7fa;
+ }
+ .title {
+ color: #324558;
+ font-family: 'PingFang SC';
+ font-size: 12px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 20px; /* 166.667% */
+ }
+ }
+}
diff --git a/packages/web/src/layout/components/index.js b/packages/web/src/layout/components/index.js
new file mode 100644
index 0000000..96f5e29
--- /dev/null
+++ b/packages/web/src/layout/components/index.js
@@ -0,0 +1,3 @@
+export { default as AppMain } from './AppMain';
+export { default as Sidebar } from './Sidebar/index.vue';
+export { default as TopBar } from './TopBar/index.vue';
diff --git a/packages/web/src/layout/index.vue b/packages/web/src/layout/index.vue
new file mode 100644
index 0000000..b8fdcb0
--- /dev/null
+++ b/packages/web/src/layout/index.vue
@@ -0,0 +1,82 @@
+
+
+
+
+
+
+
+
+
diff --git a/packages/web/src/main.js b/packages/web/src/main.js
new file mode 100644
index 0000000..0e34074
--- /dev/null
+++ b/packages/web/src/main.js
@@ -0,0 +1,22 @@
+import { createApp } from 'vue';
+import App from './App.vue';
+import router from './router';
+import store from './store';
+import installElementPlus from './plugins/element';
+import 'normalize.css/normalize.css'; // a modern alternative to CSS resets
+import '@/styles/index.scss'; // global css
+
+// 导入 svgIcon
+import installIcons from '@/icons';
+import Message from '@/components/Message/index.js';
+import Confirm from '@/components/Confirm/index.js';
+import components from '@/components';
+import '@/styles/element/index.scss';
+
+const app = createApp(App);
+installElementPlus(app);
+installIcons(app);
+
+app.use(components);
+
+app.use(store).use(router).use(Confirm).use(Message).mount('#app');
diff --git a/packages/web/src/mock/common.js b/packages/web/src/mock/common.js
new file mode 100644
index 0000000..91a16c8
--- /dev/null
+++ b/packages/web/src/mock/common.js
@@ -0,0 +1,42 @@
+import Mock from 'mockjs';
+import { timeParse } from '@/utils';
+
+const Random = Mock.Random;
+
+Random.extend({
+ ip: function () {
+ return this.pick(
+ Array.from(
+ { length: 20 },
+ () =>
+ `${Math.floor(Math.random() * 256)}.${Math.floor(
+ Math.random() * 256,
+ )}.${Math.floor(Math.random() * 256)}.${Math.floor(
+ Math.random() * 256,
+ )}`,
+ ),
+ );
+ },
+ status: function () {
+ return this.pick(['可用', '不可用']);
+ },
+ statusPermit: function () {
+ return this.pick(['已授权', '未授权', '已过期']);
+ },
+ time: function () {
+ return this.pick(
+ Array.from({ length: 20 }, (_, i) => timeParse(Date.now() - i * 10)),
+ );
+ },
+ random: function () {
+ return this.pick(
+ Array.from({ length: 20 }, () => Math.floor(Math.random() * 256)),
+ );
+ },
+});
+
+// Random.ip();
+// Random.status();
+// Random.random();
+
+export default Mock;
diff --git a/packages/web/src/mock/home.js b/packages/web/src/mock/home.js
new file mode 100644
index 0000000..642a9b5
--- /dev/null
+++ b/packages/web/src/mock/home.js
@@ -0,0 +1,38 @@
+import Mock from 'mockjs';
+
+Mock.mock('/mock/resourceOverview', 'get', () => {
+ return [
+ {
+ title: '云账号',
+ count: 5,
+ },
+ {
+ title: '云主机',
+ count: 572,
+ },
+ {
+ title: '云硬盘',
+ count: 803,
+ },
+ {
+ title: '宿主机',
+ count: 12,
+ },
+ {
+ title: '存储器',
+ count: 31,
+ },
+ ];
+});
+
+Mock.mock('/mock/resourceStatus', 'get', () => {
+ return {
+ instanceRunning: 52,
+ instanceStopped: 16,
+ instanceError: 4,
+ volumeRunning: 766,
+ volumeStopped: 37,
+ nicRunning: 19,
+ nicStopped: 12,
+ };
+});
diff --git a/packages/web/src/mock/index.js b/packages/web/src/mock/index.js
new file mode 100644
index 0000000..7e010e2
--- /dev/null
+++ b/packages/web/src/mock/index.js
@@ -0,0 +1,3 @@
+import './securityMock';
+import './home';
+import './vgpu';
diff --git a/packages/web/src/mock/securityMock.js b/packages/web/src/mock/securityMock.js
new file mode 100644
index 0000000..dc1a397
--- /dev/null
+++ b/packages/web/src/mock/securityMock.js
@@ -0,0 +1,50 @@
+import Mock from 'mockjs';
+
+const Random = Mock.Random;
+
+Random.extend({
+ format: function (date) {
+ var format = [
+ { name: 'Maven', icon: 'maven' },
+ { name: 'npm', icon: 'npm' },
+ { name: 'Go', icon: 'go' },
+ { name: 'PyPi', icon: 'pypi' },
+ { name: 'RPM', icon: 'rpm' },
+ { name: 'Debian', icon: 'debian' },
+ { name: 'Conan', icon: 'conan' },
+ { name: 'NuGet', icon: 'nuget' },
+ { name: 'Docker', icon: 'docker' },
+ { name: 'Helm', icon: 'helm' },
+ { name: 'Raw', icon: 'raw' },
+ ];
+ return this.pick(format.map((item) => item.icon));
+ },
+});
+Random.format();
+
+Mock.mock('/repoList', 'get', () => {
+ return Mock.mock({
+ status: 200,
+ 'list|1-10': [
+ {
+ name: `@first`,
+ format: '@format',
+ url: '@url',
+ time: '@time',
+ },
+ ],
+ });
+});
+
+Mock.mock('/mock/repoProsList', 'post', ({ body }) => {
+ const { repoId } = JSON.parse(body);
+
+ return Mock.mock({
+ status: 200,
+ 'list|1-10': [
+ {
+ name: `${repoId}-制品-@first`,
+ },
+ ],
+ });
+});
diff --git a/packages/web/src/mock/vgpu.js b/packages/web/src/mock/vgpu.js
new file mode 100644
index 0000000..bd00302
--- /dev/null
+++ b/packages/web/src/mock/vgpu.js
@@ -0,0 +1,31 @@
+import Mock from './common';
+
+Mock.mock('/mock/nodeList', 'post', ({ body }) => {
+ return Mock.mock({
+ status: 200,
+ 'list|1-10': [
+ {
+ group: `@first`,
+ ip: '@ip',
+ status: '@status',
+ model: '@first',
+ total: '@random',
+ },
+ ],
+ });
+});
+
+Mock.mock('/mock/permit', 'post', ({ body }) => {
+ return Mock.mock({
+ status: 200,
+ 'list|1-10': [
+ {
+ uuid: `GPU-@first`,
+ nodeName: 'node1',
+ time: '@time',
+ status: '@statusPermit',
+ type: 'Tesla A100-PCIE-40GB',
+ },
+ ],
+ });
+});
diff --git a/packages/web/src/plugins/element.js b/packages/web/src/plugins/element.js
new file mode 100644
index 0000000..c50721b
--- /dev/null
+++ b/packages/web/src/plugins/element.js
@@ -0,0 +1,7 @@
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+import locale from 'element-plus/dist/locale/zh-cn.mjs'
+
+export default (app) => {
+ app.use(ElementPlus, { locale })
+}
\ No newline at end of file
diff --git a/packages/web/src/router/index.js b/packages/web/src/router/index.js
new file mode 100644
index 0000000..b78b518
--- /dev/null
+++ b/packages/web/src/router/index.js
@@ -0,0 +1,77 @@
+import { createRouter, createWebHistory } from 'vue-router';
+import { pick, uniqBy } from 'lodash';
+/* Layout */
+import Layout from '@/layout';
+/* Router Modules */
+import vgpuRoutes from '../../projects/vgpu/router';
+// import vgpuHomeRoutes from '../../projects/vgpu/homeRouter';
+import { nextTick } from 'vue';
+
+/**
+ * constantRoutes
+ * a base page that does not have permission requirements
+ * all roles can be accessed
+ */
+
+export const constantRoutes = [
+ {
+ path: '/redirect',
+ component: Layout,
+ hidden: true,
+ children: [
+ {
+ path: '/redirect/:path(.*)',
+ component: () => import('@/views/redirect/index'),
+ },
+ ],
+ },
+ {
+ path: '/404',
+ component: () => import('@/views/error-page/404'),
+ hidden: true,
+ },
+ {
+ path: '/401',
+ component: () => import('@/views/error-page/401'),
+ hidden: true,
+ },
+ {
+ path: '/',
+ redirect: '/admin/vgpu/monitor/overview',
+ component: Layout,
+ hidden: true,
+ },
+ vgpuRoutes(Layout),
+];
+
+export const asyncRoutes = [
+ // vgpuHomeRoutes(Layout),
+ // vgpuRoutes(Layout),
+];
+
+const router = createRouter({
+ history: createWebHistory(),
+ routes: constantRoutes,
+});
+
+router.afterEach((to) => {
+ const history = JSON.parse(localStorage.getItem('history')) || [];
+ if (to.path !== '/home') {
+ history.unshift(to);
+ }
+ const newData = uniqBy(history, 'path')
+ .slice(0, 7)
+ .map((item) => pick(item, ['path', 'meta']));
+
+ localStorage.setItem('history', JSON.stringify(newData));
+
+ nextTick(() => {
+ const mainEl = document.getElementById('content');
+ try {
+ mainEl.scrollTo(0, 0);
+ } catch (error) {
+ }
+ });
+});
+
+export default router;
diff --git a/packages/web/src/settings.js b/packages/web/src/settings.js
new file mode 100644
index 0000000..1ac16a2
--- /dev/null
+++ b/packages/web/src/settings.js
@@ -0,0 +1,43 @@
+module.exports = {
+ title: 'Vue Element Admin',
+
+ /**
+ * @type {boolean} true | false
+ * @description Whether show the settings right-panel
+ */
+ showSettings: true,
+
+ /**
+ * @type {boolean} true | false
+ * @description Whether need tagsView
+ */
+ tagsView: true,
+
+ /**
+ * @type {boolean} true | false
+ * @description Whether fix the header
+ */
+ fixedHeader: false,
+
+ /**
+ * @type {boolean} true | false
+ * @description Whether show the logo in sidebar
+ */
+ sidebarLogo: false,
+
+ /**
+ * @type {string | array} 'production' | ['production', 'development']
+ * @description Need show err logs component.
+ * The default is only used in the production env
+ * If you want to also use it in dev, you can pass ['production', 'development']
+ */
+ errorLog: 'production'
+}
+// export const title = 'Vue Element Admin'
+// export const showSettings = true
+// export const tagsView = true
+// export const fixedHeader = false
+// export const sidebarLogo = false
+// export const errorLog = 'production'
+
+
diff --git a/packages/web/src/store/getters.js b/packages/web/src/store/getters.js
new file mode 100644
index 0000000..e281612
--- /dev/null
+++ b/packages/web/src/store/getters.js
@@ -0,0 +1,11 @@
+const getters = {
+ avatar: state => state.user.avatar,
+ name: state => state.user.name,
+ username: state => state.user.username,
+ roles: state => state.user.roles,
+ pagePermissions: state => state.user.pagePermission,
+ linkPermissions: state => state.user.linkPermissions,
+ apiPermissions: state => state.user.apiPermissions,
+ detail: state => state.user.detail,
+}
+export default getters
diff --git a/packages/web/src/store/index.js b/packages/web/src/store/index.js
new file mode 100644
index 0000000..05d51ca
--- /dev/null
+++ b/packages/web/src/store/index.js
@@ -0,0 +1,32 @@
+import { createStore } from 'vuex';
+import createPersistedState from 'vuex-persistedstate';
+import getters from './getters';
+
+// https://webpack.js.org/guides/dependency-management/#requirecontext
+const modulesFiles = require.context('./modules', true, /\.js$/);
+
+// you do not need `import app from './modules/app'`
+// it will auto require all vuex module from modules file
+const modules = modulesFiles.keys().reduce((modules, modulePath) => {
+ // set './app.js' => 'app'
+ const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1');
+ const value = modulesFiles(modulePath);
+ modules[moduleName] = value.default;
+ return modules;
+}, {});
+
+const global = createPersistedState({
+ key: 'global',
+ storage: window.localStorage, //window.localStorage
+ paths: ['global'],
+});
+
+const store = new createStore({
+ state: {},
+ modules,
+ getters,
+ // 将各个插件引用
+ plugins: [global],
+});
+
+export default store;
diff --git a/packages/web/src/store/modules/global.js b/packages/web/src/store/modules/global.js
new file mode 100644
index 0000000..304ec05
--- /dev/null
+++ b/packages/web/src/store/modules/global.js
@@ -0,0 +1,14 @@
+const global = {
+ state: {
+ regionData: {},
+ },
+ mutations: {
+ // 这里填充数据的操作方法
+ // 提交方法 $store.commit('changeHello',value)
+ changeRegion: (state, regionData) => {
+ state.regionData = regionData;
+ },
+ },
+};
+
+export default global;
diff --git a/packages/web/src/store/modules/layout.js b/packages/web/src/store/modules/layout.js
new file mode 100644
index 0000000..32fcdd6
--- /dev/null
+++ b/packages/web/src/store/modules/layout.js
@@ -0,0 +1,17 @@
+const layout = {
+ state: {
+ sidebarCollapse: false,
+ },
+ mutations: {
+ // 这里填充数据的操作方法
+ // 提交方法 $store.commit('changeHello',value)
+ changeSidebarCollapse: (state) => {
+ state.sidebarCollapse = !state.sidebarCollapse;
+ },
+ closeSidebar: (state) => {
+ state.sidebarCollapse = true;
+ },
+ },
+};
+
+export default layout;
diff --git a/packages/web/src/store/useCache.js b/packages/web/src/store/useCache.js
new file mode 100644
index 0000000..29fd075
--- /dev/null
+++ b/packages/web/src/store/useCache.js
@@ -0,0 +1,16 @@
+/**
+ * 配置浏览器本地存储的方式，可直接存储对象数组。
+ */
+
+import WebStorageCache from 'web-storage-cache'
+
+
+export const useCache = (type = 'localStorage') => {
+ const wsCache = new WebStorageCache({
+ storage: type
+ })
+
+ return {
+ wsCache
+ }
+}
diff --git a/packages/web/src/styles/btn.scss b/packages/web/src/styles/btn.scss
new file mode 100644
index 0000000..e6ba1a8
--- /dev/null
+++ b/packages/web/src/styles/btn.scss
@@ -0,0 +1,99 @@
+@import './variables.scss';
+
+@mixin colorBtn($color) {
+ background: $color;
+
+ &:hover {
+ color: $color;
+
+ &:before,
+ &:after {
+ background: $color;
+ }
+ }
+}
+
+.blue-btn {
+ @include colorBtn($blue)
+}
+
+.light-blue-btn {
+ @include colorBtn($light-blue)
+}
+
+.red-btn {
+ @include colorBtn($red)
+}
+
+.pink-btn {
+ @include colorBtn($pink)
+}
+
+.green-btn {
+ @include colorBtn($green)
+}
+
+.tiffany-btn {
+ @include colorBtn($tiffany)
+}
+
+.yellow-btn {
+ @include colorBtn($yellow)
+}
+
+.pan-btn {
+ font-size: 14px;
+ color: #fff;
+ padding: 14px 36px;
+ border-radius: 8px;
+ border: none;
+ outline: none;
+ transition: 600ms ease all;
+ position: relative;
+ display: inline-block;
+
+ &:hover {
+ background: #fff;
+
+ &:before,
+ &:after {
+ width: 100%;
+ transition: 600ms ease all;
+ }
+ }
+
+ &:before,
+ &:after {
+ content: '';
+ position: absolute;
+ top: 0;
+ right: 0;
+ height: 2px;
+ width: 0;
+ transition: 400ms ease all;
+ }
+
+ &::after {
+ right: inherit;
+ top: inherit;
+ left: 0;
+ bottom: 0;
+ }
+}
+
+.custom-button {
+ display: inline-block;
+ line-height: 1;
+ white-space: nowrap;
+ cursor: pointer;
+ background: #fff;
+ color: #fff;
+ -webkit-appearance: none;
+ text-align: center;
+ box-sizing: border-box;
+ outline: 0;
+ margin: 0;
+ padding: 10px 15px;
+ font-size: 14px;
+ border-radius: 4px;
+}
diff --git a/packages/web/src/styles/element-ui.scss b/packages/web/src/styles/element-ui.scss
new file mode 100644
index 0000000..26e0ffa
--- /dev/null
+++ b/packages/web/src/styles/element-ui.scss
@@ -0,0 +1,79 @@
+// cover some element-ui styles
+
+.el-breadcrumb__inner,
+.el-breadcrumb__inner a {
+ font-weight: 400 !important;
+}
+
+.el-upload {
+ input[type="file"] {
+ display: none !important;
+ }
+}
+
+.el-upload__input {
+ display: none;
+}
+
+.cell {
+ .el-tag {
+ margin-right: 0px;
+ }
+}
+
+.small-padding {
+ .cell {
+ padding-left: 5px;
+ padding-right: 5px;
+ }
+}
+
+.fixed-width {
+ .el-button--mini {
+ padding: 7px 10px;
+ min-width: 60px;
+ }
+}
+
+.status-col {
+ .cell {
+ padding: 0 10px;
+ text-align: center;
+
+ .el-tag {
+ margin-right: 0px;
+ }
+ }
+}
+
+// to fixed https://github.com/ElemeFE/element/issues/2461
+
+
+// refine element ui upload
+.upload-container {
+ .el-upload {
+ width: 100%;
+
+ .el-upload-dragger {
+ width: 100%;
+ height: 200px;
+ }
+ }
+}
+
+// dropdown
+.el-dropdown-menu {
+ a {
+ display: block
+ }
+}
+
+// fix date-picker ui bug in filter-item
+.el-range-editor.el-input__inner {
+ display: inline-flex !important;
+}
+
+// to fix el-date-picker css style
+.el-range-separator {
+ box-sizing: content-box;
+}
diff --git a/packages/web/src/styles/element-variables.scss b/packages/web/src/styles/element-variables.scss
new file mode 100644
index 0000000..1e93191
--- /dev/null
+++ b/packages/web/src/styles/element-variables.scss
@@ -0,0 +1,31 @@
+/**
+* I think element-ui's default theme color is too light for long-term use.
+* So I modified the default color and you can modify it to your liking.
+**/
+
+/* theme color */
+$--color-primary: #1890ff;
+$--color-success: #13ce66;
+$--color-warning: #ffba00;
+$--color-danger: #ff4949;
+// $--color-info: #1E1E1E;
+
+$--button-font-weight: 400;
+
+// $--color-text-regular: #1f2d3d;
+
+$--border-color-light: #dfe4ed;
+$--border-color-lighter: #e6ebf5;
+
+$--table-border: 1px solid #dfe6ec;
+
+/* icon font path, required */
+$--font-path: "~element-plus/dist/fonts";
+
+@import "~element-plus/dist/index";
+
+// the :export directive is the magic sauce for webpack
+// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
+:export {
+ theme: $--color-primary;
+}
\ No newline at end of file
diff --git a/packages/web/src/styles/element/index.scss b/packages/web/src/styles/element/index.scss
new file mode 100644
index 0000000..a400ee7
--- /dev/null
+++ b/packages/web/src/styles/element/index.scss
@@ -0,0 +1,10 @@
+@forward 'element-plus/theme-chalk/src/common/var.scss' with (
+ $colors: (
+ 'primary': (
+ 'base': #2563eb,
+ 'color': #fff,
+ ),
+ )
+);
+
+@use 'element-plus/theme-chalk/src/index.scss' as *;
diff --git a/packages/web/src/styles/index.scss b/packages/web/src/styles/index.scss
new file mode 100644
index 0000000..2916a0d
--- /dev/null
+++ b/packages/web/src/styles/index.scss
@@ -0,0 +1,243 @@
+@import './variables.scss';
+@import './mixin.scss';
+@import './transition.scss';
+@import './element-ui.scss';
+@import './sidebar.scss';
+@import './btn.scss';
+@import './luck.scss';
+
+
+
+
+body {
+ height: 100%;
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ text-rendering: optimizeLegibility;
+ font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
+ Microsoft YaHei, Arial, sans-serif;
+ background-color: #e4ebf1;
+
+ .el-message-box{
+ --el-messagebox-border-radius: 8px;
+ --el-messagebox-font-size: 16px;
+ --el-messagebox-padding-primary:20px;
+ .el-message-box__title{
+ font-weight: bold;
+ }
+ .el-message-box__headerbtn{
+ top:10px;
+ right: 10px;
+ }
+ }
+}
+
+label {
+ font-weight: 700;
+}
+
+html {
+ height: 100%;
+ box-sizing: border-box;
+}
+
+#app {
+ height: 100%;
+}
+
+*,
+*:before,
+*:after {
+ box-sizing: inherit;
+}
+
+.no-padding {
+ padding: 0px !important;
+}
+
+.padding-content {
+ padding: 4px 0;
+}
+
+a:focus,
+a:active {
+ outline: none;
+}
+
+a,
+a:focus,
+a:hover {
+ cursor: pointer;
+ color: inherit;
+ text-decoration: none;
+}
+
+div:focus {
+ outline: none;
+}
+
+.fr {
+ float: right;
+}
+
+.fl {
+ float: left;
+}
+
+.pr-5 {
+ padding-right: 5px;
+}
+
+.pl-5 {
+ padding-left: 5px;
+}
+
+.block {
+ display: block;
+}
+
+.pointer {
+ cursor: pointer;
+}
+
+.inlineBlock {
+ display: block;
+}
+
+.clearfix {
+ &:after {
+ visibility: hidden;
+ display: block;
+ font-size: 0;
+ content: ' ';
+ clear: both;
+ height: 0;
+ }
+}
+
+aside {
+ background: #eef1f6;
+ padding: 8px 24px;
+ margin-bottom: 20px;
+ border-radius: 2px;
+ display: block;
+ line-height: 32px;
+ font-size: 16px;
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
+ Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+ color: #2c3e50;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+
+ a {
+ color: #337ab7;
+ cursor: pointer;
+
+ &:hover {
+ color: rgb(32, 160, 255);
+ }
+ }
+}
+
+.components-container {
+ margin: 30px 50px;
+ position: relative;
+}
+
+.pagination-container {
+ margin-top: 30px;
+}
+
+.text-center {
+ text-align: center;
+}
+
+.sub-navbar {
+ height: 50px;
+ line-height: 50px;
+ position: relative;
+ width: 100%;
+ text-align: right;
+ padding-right: 20px;
+ transition: 600ms ease position;
+ background: linear-gradient(
+ 90deg,
+ rgba(32, 182, 249, 1) 0%,
+ rgba(32, 182, 249, 1) 0%,
+ rgba(33, 120, 241, 1) 100%,
+ rgba(33, 120, 241, 1) 100%
+ );
+
+ .subtitle {
+ font-size: 20px;
+ color: #fff;
+ }
+
+ &.draft {
+ background: #d0d0d0;
+ }
+
+ &.deleted {
+ background: #d0d0d0;
+ }
+}
+
+.link-type,
+.link-type:focus {
+ color: #337ab7;
+ cursor: pointer;
+
+ &:hover {
+ color: rgb(32, 160, 255);
+ }
+}
+
+.filter-container {
+ padding-bottom: 10px;
+
+ .filter-item {
+ display: inline-block;
+ vertical-align: middle;
+ margin-bottom: 10px;
+ }
+}
+
+//refine vue-multiselect plugin
+.multiselect {
+ line-height: 16px;
+}
+
+.multiselect--active {
+ z-index: 1000 !important;
+}
+
+.svgIconStyle {
+ width: 20px !important;
+ height: 20px !important;
+ margin: 0 8px 0 -4px;
+}
+
+.svgIconStyleTab {
+ width: 20px !important;
+ height: 20px !important;
+}
+
+.block {
+ background: #fff;
+ padding: 15px 10px;
+ margin-bottom: 20px;
+ border-radius: 10px;
+ box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.12);
+}
+
+.el-drawer{
+ border-radius:12px 0 0 12px;
+}
+
+.el-menu-item.is-active {
+ border-radius: 4px;
+ background: #2563eb!important;
+ span {
+ color: #fff!important;
+ }
+}
\ No newline at end of file
diff --git a/packages/web/src/styles/luck.scss b/packages/web/src/styles/luck.scss
new file mode 100644
index 0000000..22e62ff
--- /dev/null
+++ b/packages/web/src/styles/luck.scss
@@ -0,0 +1,21 @@
+@import './variables.scss';
+
+.form-control-md {
+ height: $md-height !important;
+}
+
+.btn-md {
+ height: $md-height !important;
+}
+
+.w-20 {
+ width: 20rem !important;
+}
+
+.avatar-list-stacked .avatar.avatar-mr-3 {
+ margin-right: calc(-0.3 * var(--tblr-avatar-size)) !important;
+}
+
+.tag-btn-close {
+ position: relative !important;
+}
diff --git a/packages/web/src/styles/mixin.scss b/packages/web/src/styles/mixin.scss
new file mode 100644
index 0000000..06fa061
--- /dev/null
+++ b/packages/web/src/styles/mixin.scss
@@ -0,0 +1,66 @@
+@mixin clearfix {
+ &:after {
+ content: "";
+ display: table;
+ clear: both;
+ }
+}
+
+@mixin scrollBar {
+ &::-webkit-scrollbar-track-piece {
+ background: #d3dce6;
+ }
+
+ &::-webkit-scrollbar {
+ width: 6px;
+ }
+
+ &::-webkit-scrollbar-thumb {
+ background: #99a9bf;
+ border-radius: 20px;
+ }
+}
+
+@mixin relative {
+ position: relative;
+ width: 100%;
+ height: 100%;
+}
+
+@mixin pct($pct) {
+ width: #{$pct};
+ position: relative;
+ margin: 0 auto;
+}
+
+@mixin triangle($width, $height, $color, $direction) {
+ $width: $width/2;
+ $color-border-style: $height solid $color;
+ $transparent-border-style: $width solid transparent;
+ height: 0;
+ width: 0;
+
+ @if $direction==up {
+ border-bottom: $color-border-style;
+ border-left: $transparent-border-style;
+ border-right: $transparent-border-style;
+ }
+
+ @else if $direction==right {
+ border-left: $color-border-style;
+ border-top: $transparent-border-style;
+ border-bottom: $transparent-border-style;
+ }
+
+ @else if $direction==down {
+ border-top: $color-border-style;
+ border-left: $transparent-border-style;
+ border-right: $transparent-border-style;
+ }
+
+ @else if $direction==left {
+ border-right: $color-border-style;
+ border-top: $transparent-border-style;
+ border-bottom: $transparent-border-style;
+ }
+}
diff --git a/packages/web/src/styles/sidebar.scss b/packages/web/src/styles/sidebar.scss
new file mode 100644
index 0000000..4cb899f
--- /dev/null
+++ b/packages/web/src/styles/sidebar.scss
@@ -0,0 +1,227 @@
+// #app {
+
+// .main-container {
+// min-height: 100%;
+// transition: margin-left .28s;
+// margin-left: $sideBarWidth;
+// position: relative;
+// }
+
+// .sidebar-container {
+// transition: width 0.28s;
+// width: $sideBarWidth !important;
+// background-color: $menuBg;
+// height: 100%;
+// position: fixed;
+// font-size: 0px;
+// top: 0;
+// bottom: 0;
+// left: 0;
+// z-index: 1001;
+// overflow: hidden;
+
+// // reset element-ui css
+// .horizontal-collapse-transition {
+// transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
+// }
+
+// .scrollbar-wrapper {
+// overflow-x: hidden !important;
+// }
+
+// .el-scrollbar__bar.is-vertical {
+// right: 0px;
+// }
+
+// .el-scrollbar {
+// height: 100%;
+// }
+
+// &.has-logo {
+// .el-scrollbar {
+// height: calc(100% - 50px);
+// }
+// }
+
+// .is-horizontal {
+// display: none;
+// }
+
+// a {
+// display: inline-block;
+// width: 100%;
+// overflow: hidden;
+// }
+
+// .svg-icon {
+// margin-right: 16px;
+// }
+
+// .sub-el-icon {
+// margin-right: 12px;
+// margin-left: -2px;
+// }
+
+// .el-menu {
+// border: none;
+// height: 100%;
+// width: 100% !important;
+// }
+
+// // menu hover
+// .submenu-title-noDropdown,
+// .el-submenu__title {
+// &:hover {
+// background-color: $menuHover !important;
+// }
+// }
+
+// .is-active>.el-submenu__title {
+// color: $subMenuActiveText !important;
+// }
+
+// & .nest-menu .el-submenu>.el-submenu__title,
+// & .el-submenu .el-menu-item {
+// min-width: $sideBarWidth !important;
+// background-color: $subMenuBg !important;
+
+// &:hover {
+// background-color: $subMenuHover !important;
+// }
+// }
+// }
+
+// .hideSidebar {
+// .sidebar-container {
+// width: 54px !important;
+// }
+
+// .main-container {
+// margin-left: 54px;
+// }
+
+// .submenu-title-noDropdown {
+// padding: 0 !important;
+// position: relative;
+
+// .el-tooltip {
+// padding: 0 !important;
+
+// .svg-icon {
+// margin-left: 20px;
+// }
+
+// .sub-el-icon {
+// margin-left: 19px;
+// }
+// }
+// }
+
+// .el-submenu {
+// overflow: hidden;
+
+// &>.el-submenu__title {
+// padding: 0 !important;
+
+// .svg-icon {
+// margin-left: 20px;
+// }
+
+// .sub-el-icon {
+// margin-left: 19px;
+// }
+
+// .el-submenu__icon-arrow {
+// display: none;
+// }
+// }
+// }
+
+// .el-menu--collapse {
+// .el-submenu {
+// &>.el-submenu__title {
+// &>span {
+// height: 0;
+// width: 0;
+// overflow: hidden;
+// visibility: hidden;
+// display: inline-block;
+// }
+// }
+// }
+// }
+// }
+
+// .el-menu--collapse .el-menu .el-submenu {
+// min-width: $sideBarWidth !important;
+// }
+
+// // mobile responsive
+// .mobile {
+// .main-container {
+// margin-left: 0px;
+// }
+
+// .sidebar-container {
+// transition: transform .28s;
+// width: $sideBarWidth !important;
+// }
+
+// &.hideSidebar {
+// .sidebar-container {
+// pointer-events: none;
+// transition-duration: 0.3s;
+// transform: translate3d(-$sideBarWidth, 0, 0);
+// }
+// }
+// }
+
+// .withoutAnimation {
+
+// .main-container,
+// .sidebar-container {
+// transition: none;
+// }
+// }
+// }
+
+// // when menu collapsed
+// .el-menu--vertical {
+// &>.el-menu {
+// .svg-icon {
+// margin-right: 16px;
+// }
+
+// .sub-el-icon {
+// margin-right: 12px;
+// margin-left: -2px;
+// }
+// }
+
+// .nest-menu .el-submenu>.el-submenu__title,
+// .el-menu-item {
+// &:hover {
+// // you can use $subMenuHover
+// background-color: $menuHover !important;
+// }
+// }
+
+// // the scroll bar appears when the subMenu is too long
+// >.el-menu--popup {
+// max-height: 100vh;
+// overflow-y: auto;
+
+// &::-webkit-scrollbar-track-piece {
+// background: #d3dce6;
+// }
+
+// &::-webkit-scrollbar {
+// width: 6px;
+// }
+
+// &::-webkit-scrollbar-thumb {
+// background: #99a9bf;
+// border-radius: 20px;
+// }
+// }
+// }
\ No newline at end of file
diff --git a/packages/web/src/styles/transition.scss b/packages/web/src/styles/transition.scss
new file mode 100644
index 0000000..4cb27cc
--- /dev/null
+++ b/packages/web/src/styles/transition.scss
@@ -0,0 +1,48 @@
+// global transition css
+
+/* fade */
+.fade-enter-active,
+.fade-leave-active {
+ transition: opacity 0.28s;
+}
+
+.fade-enter,
+.fade-leave-active {
+ opacity: 0;
+}
+
+/* fade-transform */
+.fade-transform-leave-active,
+.fade-transform-enter-active {
+ transition: all .5s;
+}
+
+.fade-transform-enter {
+ opacity: 0;
+ transform: translateX(-30px);
+}
+
+.fade-transform-leave-to {
+ opacity: 0;
+ transform: translateX(30px);
+}
+
+/* breadcrumb transition */
+.breadcrumb-enter-active,
+.breadcrumb-leave-active {
+ transition: all .5s;
+}
+
+.breadcrumb-enter,
+.breadcrumb-leave-active {
+ opacity: 0;
+ transform: translateX(20px);
+}
+
+.breadcrumb-move {
+ transition: all .5s;
+}
+
+.breadcrumb-leave-active {
+ position: absolute;
+}
diff --git a/packages/web/src/styles/variables.scss b/packages/web/src/styles/variables.scss
new file mode 100644
index 0000000..c835bec
--- /dev/null
+++ b/packages/web/src/styles/variables.scss
@@ -0,0 +1,37 @@
+// base color
+$blue:#324157;
+$light-blue:#3A71A8;
+$red:#C03639;
+$pink: #E65D6E;
+$green: #30B08F;
+$tiffany: #4AB7BD;
+$yellow:#FEC171;
+$panGreen: #30B08F;
+
+// sidebar
+$menuText:#bfcbd9;
+$menuActiveText:#409EFF;
+$subMenuActiveText:#f4f4f5; // https://github.com/ElemeFE/element/issues/12951
+
+$menuBg:#304156;
+$menuHover:#263445;
+
+$subMenuBg:#1f2d3d;
+$subMenuHover:#001528;
+
+$sideBarWidth: 210px;
+
+// the :export directive is the magic sauce for webpack
+// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
+:export {
+ menuText: $menuText;
+ menuActiveText: $menuActiveText;
+ subMenuActiveText: $subMenuActiveText;
+ menuBg: $menuBg;
+ menuHover: $menuHover;
+ subMenuBg: $subMenuBg;
+ subMenuHover: $subMenuHover;
+ sideBarWidth: $sideBarWidth;
+}
+
+$md-height: 32px;
diff --git a/packages/web/src/utils/clipboard.js b/packages/web/src/utils/clipboard.js
new file mode 100644
index 0000000..cf5b07a
--- /dev/null
+++ b/packages/web/src/utils/clipboard.js
@@ -0,0 +1,32 @@
+import Vue from 'vue'
+import Clipboard from 'clipboard'
+
+function clipboardSuccess() {
+ Vue.prototype.$message({
+ message: 'Copy successfully',
+ type: 'success',
+ duration: 1500
+ })
+}
+
+function clipboardError() {
+ Vue.prototype.$message({
+ message: 'Copy failed',
+ type: 'error'
+ })
+}
+
+export default function handleClipboard(text, event) {
+ const clipboard = new Clipboard(event.target, {
+ text: () => text
+ })
+ clipboard.on('success', () => {
+ clipboardSuccess()
+ clipboard.destroy()
+ })
+ clipboard.on('error', () => {
+ clipboardError()
+ clipboard.destroy()
+ })
+ clipboard.onClick(event)
+}
diff --git a/packages/web/src/utils/error-log.js b/packages/web/src/utils/error-log.js
new file mode 100644
index 0000000..83a5010
--- /dev/null
+++ b/packages/web/src/utils/error-log.js
@@ -0,0 +1,35 @@
+import Vue from 'vue'
+import store from '@/store2'
+import { isString, isArray } from '@/utils/validate'
+import settings from '@/settings'
+
+// you can set in settings.js
+// errorLog:'production' | ['production', 'development']
+const { errorLog: needErrorLog } = settings
+
+function checkNeed() {
+ const env = process.env.NODE_ENV
+ if (isString(needErrorLog)) {
+ return env === needErrorLog
+ }
+ if (isArray(needErrorLog)) {
+ return needErrorLog.includes(env)
+ }
+ return false
+}
+
+if (checkNeed()) {
+ Vue.config.errorHandler = function(err, vm, info, a) {
+ // Don't ask me why I use Vue.nextTick, it just a hack.
+ // detail see https://forum.vuejs.org/t/dispatch-in-vue-config-errorhandler-has-some-problem/23500
+ Vue.nextTick(() => {
+ store.dispatch('errorLog/addErrorLog', {
+ err,
+ vm,
+ info,
+ url: window.location.href
+ })
+ console.error(err, info)
+ })
+ }
+}
diff --git a/packages/web/src/utils/form.js b/packages/web/src/utils/form.js
new file mode 100644
index 0000000..d8d2549
--- /dev/null
+++ b/packages/web/src/utils/form.js
@@ -0,0 +1,48 @@
+import { isString, isPlainObject, isArray } from 'lodash';
+
+//模板转换函数，将一个由双大括号包裹的字符串，转化为js表达式并返回结果（context限制变量范围）
+export const templateParse = (str, context) => {
+ if (!str) return str;
+ if (typeof str !== 'string') return str;
+
+ const template = str.match(/{{(.+?)}}/);
+ if (template) {
+ try {
+ const parse = new Function(
+ Object.keys(context).join(','),
+ 'return ' + template[1],
+ );
+
+ return parse(...Object.values(context));
+ } catch (e) {
+ return str;
+ }
+ } else {
+ return str;
+ }
+};
+
+export const deepParse = (prop, context) => {
+ if (isString(prop)) {
+ return templateParse(prop, context);
+ }
+ if (isPlainObject(prop)) {
+ return Object.keys(prop).reduce((all, key) => {
+ if (prop.name) {
+ return {
+ ...all,
+ [key]: deepParse(prop[key], {
+ ...context,
+ // $value: context.$form[prop.name],
+ }),
+ };
+ }
+ return { ...all, [key]: deepParse(prop[key], context) };
+ }, {});
+ }
+ if (isArray(prop)) {
+ return prop.map((item) => deepParse(item, context));
+ }
+
+ return prop;
+};
diff --git a/packages/web/src/utils/get-page-title.js b/packages/web/src/utils/get-page-title.js
new file mode 100644
index 0000000..cab7fd9
--- /dev/null
+++ b/packages/web/src/utils/get-page-title.js
@@ -0,0 +1,10 @@
+import defaultSettings from '@/settings'
+
+const title = defaultSettings.title || 'Vue Element Admin'
+
+export default function getPageTitle(pageTitle) {
+ if (pageTitle) {
+ return `${pageTitle} - ${title}`
+ }
+ return `${title}`
+}
diff --git a/packages/web/src/utils/getFields.js b/packages/web/src/utils/getFields.js
new file mode 100644
index 0000000..06c0576
--- /dev/null
+++ b/packages/web/src/utils/getFields.js
@@ -0,0 +1,39 @@
+import { cloneDeep } from 'lodash';
+
+const getFields = (items = [], context) => {
+ const newItems = cloneDeep(items);
+
+ return newItems.reduce((all, current) => {
+ const { name, props, children } = current;
+ const { $form, $selectData } = context;
+ if (name) {
+ all[name] = current;
+ // 先赋原值
+ $form[name] && (all[name].value = $form[name]);
+
+ // 如果有选项数据源的，再次根据labelKey赋值
+ if ($selectData[name]) {
+ all[name].selectData = $selectData[name];
+
+ //默认优先赋值labelKey
+ all[name].value =
+ (props.formatter
+ ? props.formatter($selectData[name][props.labelKey || 'label'])
+ : $selectData[name][props.labelKey || 'label']) || $form[name];
+
+ //多选处理
+ if (props.multiple) {
+ all[name].value = $selectData[name].map(
+ (item) => item[props.labelKey],
+ );
+ }
+ }
+ }
+ if (children) {
+ Object.assign(all, getFields(children, context));
+ }
+ return all;
+ }, {});
+};
+
+export default getFields;
diff --git a/packages/web/src/utils/gogocodeTransfer.js b/packages/web/src/utils/gogocodeTransfer.js
new file mode 100644
index 0000000..124c4e4
--- /dev/null
+++ b/packages/web/src/utils/gogocodeTransfer.js
@@ -0,0 +1,59 @@
+const eventRegistryMap = new WeakMap();
+function getRegistry(instance) {
+ let events = eventRegistryMap.get(instance);
+ if (!events) {
+ eventRegistryMap.set(instance, (events = Object.create(null)));
+ }
+ return events;
+}
+export function $on(instance, event, fn) {
+ if (Array.isArray(event)) {
+ event.forEach((e) => $on(instance, e, fn));
+ } else {
+ const events = getRegistry(instance);
+ (events[event] || (events[event] = [])).push(fn);
+ }
+ return instance;
+}
+export function $once(instance, event, fn) {
+ const wrapped = (...args) => {
+ $off(instance, event, wrapped);
+ fn.call(instance, ...args);
+ };
+ wrapped.fn = fn;
+ $on(instance, event, wrapped);
+ return instance;
+}
+export function $off(instance, event, fn) {
+ const vm = instance;
+ // all
+ if (!event) {
+ eventRegistryMap.set(instance, Object.create(null));
+ return vm;
+ }
+ // array of events
+ if (Array.isArray(event)) {
+ event.forEach((e) => $off(instance, e, fn));
+ return vm;
+ }
+ // specific event
+ const events = getRegistry(instance);
+ const cbs = events[event];
+ if (!cbs) {
+ return vm;
+ }
+ if (!fn) {
+ events[event] = undefined;
+ return vm;
+ }
+ events[event] = cbs.filter((cb) => !(cb === fn || cb.fn === fn));
+ return vm;
+}
+export function $emit(instance, event, ...args) {
+ instance && instance.$emit && instance.$emit(event, ...args);
+ const cbs = getRegistry(instance)[event];
+ if (cbs) {
+ cbs.map((cb) => cb.apply(instance, args));
+ }
+ return instance;
+}
diff --git a/packages/web/src/utils/index.js b/packages/web/src/utils/index.js
new file mode 100644
index 0000000..31735c4
--- /dev/null
+++ b/packages/web/src/utils/index.js
@@ -0,0 +1,568 @@
+import { isFunction } from 'lodash';
+import { ElMessage } from 'element-plus';
+/**
+ * Created by PanJiaChen on 16/11/18.
+ */
+
+/**
+ * Parse the time to string
+ * @param {(Object|string|number)} time
+ * @param {string} cFormat
+ * @returns {string | null}
+ */
+export function parseTime(time, cFormat) {
+ if (arguments.length === 0 || !time) {
+ return null;
+ }
+ const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}';
+ let date;
+ if (typeof time === 'object') {
+ date = time;
+ } else {
+ if (typeof time === 'string') {
+ if (/^[0-9]+$/.test(time)) {
+ // support "1548221490638"
+ time = parseInt(time);
+ } else {
+ // support safari
+ // https://stackoverflow.com/questions/4310953/invalid-date-in-safari
+ time = time.replace(new RegExp(/-/gm), '/');
+ }
+ }
+
+ if (typeof time === 'number' && time.toString().length === 10) {
+ time = time * 1000;
+ }
+ date = new Date(time);
+ }
+ const formatObj = {
+ y: date.getFullYear(),
+ m: date.getMonth() + 1,
+ d: date.getDate(),
+ h: date.getHours(),
+ i: date.getMinutes(),
+ s: date.getSeconds(),
+ a: date.getDay(),
+ };
+ const time_str = format.replace(/{([ymdhisa])+}/g, (result, key) => {
+ const value = formatObj[key];
+ // Note: getDay() returns 0 on Sunday
+ if (key === 'a') {
+ return ['日', '一', '二', '三', '四', '五', '六'][value];
+ }
+ return value.toString().padStart(2, '0');
+ });
+ return time_str;
+}
+
+/**
+ * @param {number} time
+ * @param {string} option
+ * @returns {string}
+ */
+export function formatTime(time, option) {
+ if (('' + time).length === 10) {
+ time = parseInt(time) * 1000;
+ } else {
+ time = +time;
+ }
+ const d = new Date(time);
+ const now = Date.now();
+
+ const diff = (now - d) / 1000;
+
+ if (diff < 30) {
+ return '刚刚';
+ } else if (diff < 3600) {
+ // less 1 hour
+ return Math.ceil(diff / 60) + '分钟前';
+ } else if (diff < 3600 * 24) {
+ return Math.ceil(diff / 3600) + '小时前';
+ } else if (diff < 3600 * 24 * 2) {
+ return '1天前';
+ }
+ if (option) {
+ return parseTime(time, option);
+ } else {
+ return (
+ d.getMonth() +
+ 1 +
+ '月' +
+ d.getDate() +
+ '日' +
+ d.getHours() +
+ '时' +
+ d.getMinutes() +
+ '分'
+ );
+ }
+}
+
+/**
+ * @param {string} url
+ * @returns {Object}
+ */
+export function getQueryObject(url) {
+ url = url == null ? window.location.href : url;
+ const search = url.substring(url.lastIndexOf('?') + 1);
+ const obj = {};
+ const reg = /([^?&=]+)=([^?&=]*)/g;
+ search.replace(reg, (rs, $1, $2) => {
+ const name = decodeURIComponent($1);
+ let val = decodeURIComponent($2);
+ val = String(val);
+ obj[name] = val;
+ return rs;
+ });
+ return obj;
+}
+
+/**
+ * @param {string} input value
+ * @returns {number} output value
+ */
+export function byteLength(str) {
+ // returns the byte length of an utf8 string
+ let s = str.length;
+ for (var i = str.length - 1; i >= 0; i--) {
+ const code = str.charCodeAt(i);
+ if (code > 0x7f && code <= 0x7ff) s++;
+ else if (code > 0x7ff && code <= 0xffff) s += 2;
+ if (code >= 0xdc00 && code <= 0xdfff) i--;
+ }
+ return s;
+}
+
+/**
+ * @param {Array} actual
+ * @returns {Array}
+ */
+export function cleanArray(actual) {
+ const newArray = [];
+ for (let i = 0; i < actual.length; i++) {
+ if (actual[i]) {
+ newArray.push(actual[i]);
+ }
+ }
+ return newArray;
+}
+
+/**
+ * @param {Object} json
+ * @returns {Array}
+ */
+export function param(json) {
+ if (!json) return '';
+ return cleanArray(
+ Object.keys(json).map((key) => {
+ if (json[key] === undefined) return '';
+ return encodeURIComponent(key) + '=' + encodeURIComponent(json[key]);
+ }),
+ ).join('&');
+}
+
+/**
+ * @param {string} url
+ * @returns {Object}
+ */
+export function param2Obj(url) {
+ const search = decodeURIComponent(url.split('?')[1]).replace(/\+/g, ' ');
+ if (!search) {
+ return {};
+ }
+ const obj = {};
+ const searchArr = search.split('&');
+ searchArr.forEach((v) => {
+ const index = v.indexOf('=');
+ if (index !== -1) {
+ const name = v.substring(0, index);
+ const val = v.substring(index + 1, v.length);
+ obj[name] = val;
+ }
+ });
+ return obj;
+}
+
+/**
+ * @param {string} val
+ * @returns {string}
+ */
+export function html2Text(val) {
+ const div = document.createElement('div');
+ div.innerHTML = val;
+ return div.textContent || div.innerText;
+}
+
+/**
+ * Merges two objects, giving the last one precedence
+ * @param {Object} target
+ * @param {(Object|Array)} source
+ * @returns {Object}
+ */
+export function objectMerge(target, source) {
+ if (typeof target !== 'object') {
+ target = {};
+ }
+ if (Array.isArray(source)) {
+ return source.slice();
+ }
+ Object.keys(source).forEach((property) => {
+ const sourceProperty = source[property];
+ if (typeof sourceProperty === 'object') {
+ target[property] = objectMerge(target[property], sourceProperty);
+ } else {
+ target[property] = sourceProperty;
+ }
+ });
+ return target;
+}
+
+/**
+ * @param {HTMLElement} element
+ * @param {string} className
+ */
+export function toggleClass(element, className) {
+ if (!element || !className) {
+ return;
+ }
+ let classString = element.className;
+ const nameIndex = classString.indexOf(className);
+ if (nameIndex === -1) {
+ classString += '' + className;
+ } else {
+ classString =
+ classString.substr(0, nameIndex) +
+ classString.substr(nameIndex + className.length);
+ }
+ element.className = classString;
+}
+
+/**
+ * @param {string} type
+ * @returns {Date}
+ */
+export function getTime(type) {
+ if (type === 'start') {
+ return new Date().getTime() - 3600 * 1000 * 24 * 90;
+ } else {
+ return new Date(new Date().toDateString());
+ }
+}
+
+/**
+ * @param {Function} func
+ * @param {number} wait
+ * @param {boolean} immediate
+ * @return {*}
+ */
+export function debounce(func, wait, immediate) {
+ let timeout, args, context, timestamp, result;
+
+ const later = function () {
+ // 据上一次触发时间间隔
+ const last = +new Date() - timestamp;
+
+ // 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait
+ if (last < wait && last > 0) {
+ timeout = setTimeout(later, wait - last);
+ } else {
+ timeout = null;
+ // 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用
+ if (!immediate) {
+ result = func.apply(context, args);
+ if (!timeout) context = args = null;
+ }
+ }
+ };
+
+ return function (...args) {
+ context = this;
+ timestamp = +new Date();
+ const callNow = immediate && !timeout;
+ // 如果延时不存在，重新设定延时
+ if (!timeout) timeout = setTimeout(later, wait);
+ if (callNow) {
+ result = func.apply(context, args);
+ context = args = null;
+ }
+
+ return result;
+ };
+}
+
+/**
+ * This is just a simple version of deep copy
+ * Has a lot of edge cases bug
+ * If you want to use a perfect deep copy, use lodash's _.cloneDeep
+ * @param {Object} source
+ * @returns {Object}
+ */
+export function deepClone(source) {
+ if (!source && typeof source !== 'object') {
+ throw new Error('error arguments', 'deepClone');
+ }
+ const targetObj = source.constructor === Array ? [] : {};
+ Object.keys(source).forEach((keys) => {
+ if (source[keys] && typeof source[keys] === 'object') {
+ targetObj[keys] = deepClone(source[keys]);
+ } else {
+ targetObj[keys] = source[keys];
+ }
+ });
+ return targetObj;
+}
+
+/**
+ * @param {Array} arr
+ * @returns {Array}
+ */
+export function uniqueArr(arr) {
+ return Array.from(new Set(arr));
+}
+
+/**
+ * @returns {string}
+ */
+export function createUniqueString() {
+ const timestamp = +new Date() + '';
+ const randomNum = parseInt((1 + Math.random()) * 65536) + '';
+ return (+(randomNum + timestamp)).toString(32);
+}
+
+/**
+ * Check if an element has a class
+ * @param {HTMLElement} elm
+ * @param {string} cls
+ * @returns {boolean}
+ */
+export function hasClass(ele, cls) {
+ return !!ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
+}
+
+/**
+ * Add class to element
+ * @param {HTMLElement} elm
+ * @param {string} cls
+ */
+export function addClass(ele, cls) {
+ if (!hasClass(ele, cls)) ele.className += ' ' + cls;
+}
+
+/**
+ * Remove class from element
+ * @param {HTMLElement} elm
+ * @param {string} cls
+ */
+export function removeClass(ele, cls) {
+ if (hasClass(ele, cls)) {
+ const reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
+ ele.className = ele.className.replace(reg, ' ');
+ }
+}
+
+export const timeParse = (obj = new Date(), format = 'YYYY-MM-DD HH:mm:ss') => {
+ obj = new Date(obj);
+ const year = obj.getFullYear();
+ const mon =
+ obj.getMonth() + 1 < 10 ? '0' + (obj.getMonth() + 1) : obj.getMonth() + 1;
+ const day = obj.getDate() < 10 ? '0' + obj.getDate() : obj.getDate();
+ const hour = obj.getHours() < 10 ? '0' + obj.getHours() : obj.getHours();
+ const min = obj.getMinutes() < 10 ? '0' + obj.getMinutes() : obj.getMinutes();
+ const second =
+ obj.getSeconds() < 10 ? '0' + obj.getSeconds() : obj.getSeconds();
+
+ format = format
+ .replace('YYYY', year + '')
+ .replace('MM', mon + '')
+ .replace('DD', day + '')
+ .replace('HH', hour + '')
+ .replace('mm', min + '')
+ .replace('ss', second + '');
+
+ return format;
+};
+
+export const calculateDuration = (createTime) => {
+ if (!createTime) {
+ return '--';
+ }
+
+ const create = new Date(createTime);
+ if (isNaN(create.getTime())) {
+ return '--';
+ }
+
+ const now = new Date();
+ const diff = now - create; // 时间差（毫秒）
+
+ const seconds = Math.floor((diff / 1000) % 60);
+ const minutes = Math.floor((diff / 1000 / 60) % 60);
+ const hours = Math.floor((diff / 1000 / 60 / 60) % 24);
+ const days = Math.floor(diff / 1000 / 60 / 60 / 24);
+
+ let duration = '';
+ if (days > 0) duration += `${days} 天 `;
+ if (hours > 0) duration += `${hours} 小时 `;
+ if (minutes > 0) duration += `${minutes} 分钟 `;
+ if (seconds > 0 || duration === '') duration += `${seconds} 秒`;
+
+ return duration.trim();
+};
+//可指定长度，生成随机id
+export function getRandomId(length) {
+ const characters =
+ 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+ let randomId = '';
+
+ for (let i = 0; i < length; i++) {
+ const randomIndex = Math.floor(Math.random() * characters.length);
+ randomId += characters.charAt(randomIndex);
+ }
+
+ return randomId;
+}
+
+export const parseMemory = (memory) => {
+ return +memory + ' GB';
+};
+
+export const generateUUID = () => {
+ return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+ var r = (Math.random() * 16) | 0,
+ v = c === 'x' ? r : (r & 0x3) | 0x8;
+ return v.toString(16);
+ });
+};
+
+export const renderProps = (fn, props) => {
+ if (isFunction(fn)) {
+ return fn(props);
+ }
+ return fn;
+};
+
+export const getDaysInRange = (startDate, endDate) => {
+ const result = [];
+ let currentDate = new Date(startDate);
+
+ while (currentDate <= endDate) {
+ const formattedDate = currentDate.toISOString().split('T')[0]; // 获取年月日部分并格式化
+ result.push(formattedDate);
+ currentDate.setDate(currentDate.getDate() + 1);
+ }
+
+ return result;
+};
+
+export const getRandom = (max) => {
+ return Math.floor(Math.random() * max);
+};
+
+export const getDaysInMonth = (yearMonth) => {
+ const [year, month] = yearMonth.split('-').map(Number);
+ const currentDate = new Date();
+ const currentYear = currentDate.getFullYear();
+ const currentMonth = currentDate.getMonth() + 1;
+ const currentDay = currentDate.getDate();
+ const isCurrentMonth = year === currentYear && month === currentMonth;
+ const daysInMonth = isCurrentMonth
+ ? currentDay - 1
+ : new Date(year, month, 0).getDate();
+ const daysArray = [];
+
+ for (let day = 1; day <= daysInMonth; day++) {
+ const formattedDay = `${month.toString().padStart(2, '0')}-${day
+ .toString()
+ .padStart(2, '0')}`;
+ daysArray.push(formattedDay);
+ }
+
+ return daysArray;
+};
+
+export const getMonthsInYear = (year) => {
+ const currentDate = new Date();
+ const currentYear = currentDate.getFullYear();
+ const currentMonth = currentDate.getMonth() + 1;
+ const monthsArray = [];
+
+ for (let month = 1; month <= 12; month++) {
+ if (+year === currentYear && month > currentMonth) {
+ break; // 如果是当前年份且月份大于当前月份，停止循环
+ }
+ const formattedMonth = `${year}-${month.toString().padStart(2, '0')}`;
+ monthsArray.push(formattedMonth);
+ }
+
+ return monthsArray;
+};
+
+export const getDataByPath = (obj, path) => {
+ // 使用正则表达式分割路径字符串
+ const keys = path.split('.');
+
+ // 遍历路径，逐层深入对象
+ let result = obj;
+ for (const key of keys) {
+ if (result && typeof result === 'object' && key in result) {
+ result = result[key];
+ } else {
+ // 如果路径无效，返回 undefined 或者其他默认值
+ return undefined;
+ }
+ }
+
+ return result;
+};
+
+export function daysSince(dateString) {
+ // 将传入的日期字符串转换为Date对象
+ const pastDate = new Date(dateString);
+ // 获取当前日期
+ const currentDate = new Date();
+
+ // 计算两个日期之间的时间差，得到的结果是毫秒数
+ const timeDifference = currentDate - pastDate;
+
+ // 将时间差从毫秒转换为天，1天 = 24小时 * 60分钟 * 60秒 * 1000毫秒
+ const daysDifference = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
+
+ return daysDifference;
+}
+
+export function copy(str) {
+ const textarea = document.createElement('textarea');
+ textarea.value = str;
+ document.body.appendChild(textarea);
+ textarea.select();
+ document.execCommand('copy');
+ document.body.removeChild(textarea);
+
+ ElMessage.success('复制成功');
+}
+
+export function roundToDecimal(num, decimalPlaces) {
+ if (typeof num !== 'number' || typeof decimalPlaces !== 'number') {
+ throw new TypeError('参数必须是数字');
+ }
+
+ // 判断是否是小数
+ if (num % 1 !== 0) {
+ // 进行四舍五入
+ const factor = Math.pow(10, decimalPlaces);
+ return Math.round(num * factor) / factor;
+ }
+
+ // 如果不是小数，返回原数字
+ return num;
+}
+
+export function toBoolean(str) {
+ return str === 'true';
+}
+
+export const clearEdges = (items) =>
+ items.map((item) => ({
+ ...item,
+ children: clearEdges(item.edges.children),
+ }));
diff --git a/packages/web/src/utils/open-window.js b/packages/web/src/utils/open-window.js
new file mode 100644
index 0000000..1a655d7
--- /dev/null
+++ b/packages/web/src/utils/open-window.js
@@ -0,0 +1,25 @@
+/**
+ *Created by PanJiaChen on 16/11/29.
+ * @param {Sting} url
+ * @param {Sting} title
+ * @param {Number} w
+ * @param {Number} h
+ */
+export default function openWindow(url, title, w, h) {
+ // Fixes dual-screen position Most browsers Firefox
+ const dualScreenLeft = window.screenLeft !== undefined ? window.screenLeft : screen.left
+ const dualScreenTop = window.screenTop !== undefined ? window.screenTop : screen.top
+
+ const width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width
+ const height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height
+
+ const left = ((width / 2) - (w / 2)) + dualScreenLeft
+ const top = ((height / 2) - (h / 2)) + dualScreenTop
+ const newWindow = window.open(url, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=yes, copyhistory=no, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left)
+
+ // Puts focus on the newWindow
+ if (window.focus) {
+ newWindow.focus()
+ }
+}
+
diff --git a/packages/web/src/utils/permission.js b/packages/web/src/utils/permission.js
new file mode 100644
index 0000000..649a4e5
--- /dev/null
+++ b/packages/web/src/utils/permission.js
@@ -0,0 +1,21 @@
+import store from '@/store2'
+
+/**
+ * @param {Array} value
+ * @returns {Boolean}
+ * @example see @/views/permission/directive.vue
+ */
+export default function checkPermission(value) {
+ if (value && value instanceof Array && value.length > 0) {
+ const roles = store.getters && store.getters.roles
+ const permissionRoles = value
+
+ const hasPermission = roles.some(role => {
+ return permissionRoles.includes(role)
+ })
+ return hasPermission
+ } else {
+ console.error(`need roles! Like v-permission="['admin','editor']"`)
+ return false
+ }
+}
diff --git a/packages/web/src/utils/request.js b/packages/web/src/utils/request.js
new file mode 100644
index 0000000..dda7932
--- /dev/null
+++ b/packages/web/src/utils/request.js
@@ -0,0 +1,66 @@
+import axios from 'axios';
+
+import { ElMessage, ElMessageBox, ElNotification } from 'element-plus';
+
+const service = axios.create({
+ baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
+ timeout: 5000,
+ validateStatus: function (status) {
+ return (status >= 200 && status < 300) || status > 520;
+ },
+});
+
+// request interceptor
+service.interceptors.request.use(
+ (config) => {
+ return config;
+ },
+ (error) => {
+ // do something with request error
+ return Promise.reject(error);
+ },
+);
+
+// response interceptor
+service.interceptors.response.use(
+ /**
+ * If you want to get http information such as headers or status
+ * Please return response => response
+ */
+
+ /**
+ * Determine the request status by custom code
+ * Here is just an example
+ * You can also judge the status by HTTP Status Code
+ */
+ async (response) => {
+ const res = response.data;
+ // if the custom code is not 0, it is judged as an error.
+ if (res.code != null && res.code > 0 && res.code != 200) {
+ // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
+ if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
+ // to re-login
+ await ElMessageBox.alert('请求异常', '提示');
+ } else {
+ ElNotification({
+ title: res.reason,
+ message: res.message,
+ type: 'error',
+ position: 'bottom-right',
+ });
+ }
+ return Promise.reject(new Error(res.message || 'Error'));
+ } else {
+ return res;
+ }
+ },
+ (error) => {
+ ElMessage({
+ message: error.message,
+ type: 'error',
+ });
+ return Promise.reject(error);
+ },
+);
+
+export default service;
diff --git a/packages/web/src/utils/route.js b/packages/web/src/utils/route.js
new file mode 100644
index 0000000..98775a4
--- /dev/null
+++ b/packages/web/src/utils/route.js
@@ -0,0 +1,59 @@
+import path from 'path'
+/**
+ * 获取所有子路由
+ */
+const getChildrenRoutes = routes => {
+ const result = []
+ routes.forEach(route => {
+ if(route.children && route.children.length > 0) {
+ result.push(...route.children)
+ }
+ })
+ return result
+}
+
+/**
+ * 删除脱离层级的子路由
+ */
+export const filterRoutes = routes => {
+ const childrenRoutes = getChildrenRoutes(routes)
+ return routes.filter(route => {
+ return !childrenRoutes.find(childrenRoute => {
+ return childrenRoute.path === route.path
+ })
+ })
+}
+
+const isNull = (data) => {
+ if(!data) return true
+ if(JSON.stringify(data) === '{}') return true
+ if(JSON.stringify(data) === '[]') return true
+ return false
+}
+
+export const generatorMenus = (routes, basePath = '') => {
+ const result = []
+ routes.forEach(item => {
+ if(isNull(item.meta) && isNull(item.children)) return
+ if(isNull(item.meta) && !isNull(item.children)) {
+ result.push(...generatorMenus(item.children))
+ return
+ }
+ const routePath = path.resolve(basePath, item.path)
+ let route = result.find(item => item.path === routePath)
+ if(!route){
+ route = {
+ ...item,
+ path: routePath,
+ children: []
+ }
+ if(route.name){
+ result.push(route)
+ }
+ }
+ if(item.children) {
+ route.children.push(...generatorMenus(item.children, route.path))
+ }
+ })
+ return result
+}
\ No newline at end of file
diff --git a/packages/web/src/utils/scroll-to.js b/packages/web/src/utils/scroll-to.js
new file mode 100644
index 0000000..c5d8e04
--- /dev/null
+++ b/packages/web/src/utils/scroll-to.js
@@ -0,0 +1,58 @@
+Math.easeInOutQuad = function(t, b, c, d) {
+ t /= d / 2
+ if (t < 1) {
+ return c / 2 * t * t + b
+ }
+ t--
+ return -c / 2 * (t * (t - 2) - 1) + b
+}
+
+// requestAnimationFrame for Smart Animating http://goo.gl/sx5sts
+var requestAnimFrame = (function() {
+ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60) }
+})()
+
+/**
+ * Because it's so fucking difficult to detect the scrolling element, just move them all
+ * @param {number} amount
+ */
+function move(amount) {
+ document.documentElement.scrollTop = amount
+ document.body.parentNode.scrollTop = amount
+ document.body.scrollTop = amount
+}
+
+function position() {
+ return document.documentElement.scrollTop || document.body.parentNode.scrollTop || document.body.scrollTop
+}
+
+/**
+ * @param {number} to
+ * @param {number} duration
+ * @param {Function} callback
+ */
+export function scrollTo(to, duration, callback) {
+ const start = position()
+ const change = to - start
+ const increment = 20
+ let currentTime = 0
+ duration = (typeof (duration) === 'undefined') ? 500 : duration
+ var animateScroll = function() {
+ // increment the time
+ currentTime += increment
+ // find the value with the quadratic in-out easing function
+ var val = Math.easeInOutQuad(currentTime, start, change, duration)
+ // move the document.body
+ move(val)
+ // do the animation unless its over
+ if (currentTime < duration) {
+ requestAnimFrame(animateScroll)
+ } else {
+ if (callback && typeof (callback) === 'function') {
+ // the animation is done so lets callback
+ callback()
+ }
+ }
+ }
+ animateScroll()
+}
diff --git a/packages/web/src/utils/tips.js b/packages/web/src/utils/tips.js
new file mode 100644
index 0000000..8ce36aa
--- /dev/null
+++ b/packages/web/src/utils/tips.js
@@ -0,0 +1,11 @@
+export const Message = (instance, type, msg, duration) => {
+ instance.appContext.config.globalProperties.$Message(type, msg, duration);
+}
+
+export const Confirm = (instance, confirmText, confirmObj, fn) => {
+ instance.appContext.config.globalProperties.$Confirm(
+ confirmText,
+ confirmObj,
+ fn,
+ );
+};
\ No newline at end of file
diff --git a/packages/web/src/utils/validate.js b/packages/web/src/utils/validate.js
new file mode 100644
index 0000000..6b3ac41
--- /dev/null
+++ b/packages/web/src/utils/validate.js
@@ -0,0 +1,87 @@
+/**
+ * Created by PanJiaChen on 16/11/18.
+ */
+
+/**
+ * @param {string} path
+ * @returns {Boolean}
+ */
+export function isExternal(path) {
+ return /^(https?:|mailto:|tel:)/.test(path)
+}
+
+/**
+ * @param {string} str
+ * @returns {Boolean}
+ */
+export function validUsername(str) {
+ const valid_map = ['admin', 'editor']
+ return valid_map.indexOf(str.trim()) >= 0
+}
+
+/**
+ * @param {string} url
+ * @returns {Boolean}
+ */
+export function validURL(url) {
+ const reg = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/
+ return reg.test(url)
+}
+
+/**
+ * @param {string} str
+ * @returns {Boolean}
+ */
+export function validLowerCase(str) {
+ const reg = /^[a-z]+$/
+ return reg.test(str)
+}
+
+/**
+ * @param {string} str
+ * @returns {Boolean}
+ */
+export function validUpperCase(str) {
+ const reg = /^[A-Z]+$/
+ return reg.test(str)
+}
+
+/**
+ * @param {string} str
+ * @returns {Boolean}
+ */
+export function validAlphabets(str) {
+ const reg = /^[A-Za-z]+$/
+ return reg.test(str)
+}
+
+/**
+ * @param {string} email
+ * @returns {Boolean}
+ */
+export function validEmail(email) {
+ const reg = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
+ return reg.test(email)
+}
+
+/**
+ * @param {string} str
+ * @returns {Boolean}
+ */
+export function isString(str) {
+ if (typeof str === 'string' || str instanceof String) {
+ return true
+ }
+ return false
+}
+
+/**
+ * @param {Array} arg
+ * @returns {Boolean}
+ */
+export function isArray(arg) {
+ if (typeof Array.isArray === 'undefined') {
+ return Object.prototype.toString.call(arg) === '[object Array]'
+ }
+ return Array.isArray(arg)
+}
diff --git a/packages/web/src/views/dashboard/index.vue b/packages/web/src/views/dashboard/index.vue
new file mode 100644
index 0000000..3da121f
--- /dev/null
+++ b/packages/web/src/views/dashboard/index.vue
@@ -0,0 +1,9596 @@
+
+
+
+
+
+
+
+
+
diff --git a/packages/web/src/views/error-page/401.vue b/packages/web/src/views/error-page/401.vue
new file mode 100644
index 0000000..50f2783
--- /dev/null
+++ b/packages/web/src/views/error-page/401.vue
@@ -0,0 +1,100 @@
+
+
+
+
+
+
+
+
+
+
+
+
+ Overview
+ Vertical layout
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Revenue
+
+
+
+ Last 7 days
+
+
+
+
+ $4,300
+
+
+ 8%
+
+
+
+
+
+
+
+
+
+
+
+
+ 24 Jun
+
+
+
+
+
+
+
+ Profits: 28
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ New clients
+
+
+
+ Last 7 days
+
+
+
+
+ 6,782
+
+
+ 0%
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Active users
+
+
+
+ Last 7 days
+
+
+
+
+ 2,986
+
+
+ 4%
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 132 Sales
+ 12 waiting payments
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 78 Orders
+ 32 shipped
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 623 Shares
+ 16 today
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 132 Likes
+ 21 today
+
+
+
+
+
+
+ Traffic summary
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Locations
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Using Storage 6854.45 MB of 8 GB +
+
+
+
+
+
+
+
+
+
+ Regular
+ 915MB
+
+
+
+ System
+ 415MB
+
+
+
+ Shared
+ 201MB
+
+
+
+ Free
+ 612MB
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ JL
+
+
+
+
+ Jeffie Lewzey commented on your
+ "I'm not a witch." post.
+
+ yesterday
+
+
+
+
+
+
+
+
+
+
+
+
+
+ It's Mallory Hulme's birthday.
+ Wish him well!
+
+ 2 days ago
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Dunn Slane posted
+ "Well, what do you want?".
+
+ today
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Emmy Levet created a new project
+ Morning alarm clock.
+
+ 4 days ago
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Maryjo Lebarree liked your photo.
+
+ 2 days ago
+
+
+
+
+
+ EP
+
+
+
+
+ Egan Poetz registered new client
+ as Trilia.
+
+ yesterday
+
+
+
+
+
+
+
+
+
+
+ Kellie Skingley closed a new deal
+ on project
+ Pen Pineapple Apple Pen.
+
+ 2 days ago
+
+
+
+
+
+
+
+
+
+
+ Christabel Charlwood created a
+ new project for Wikibox.
+
+ 4 days ago
+
+
+
+
+
+ HS
+
+
+
+
+ Haskel Shelper change status of
+ Tabler Icons from
+ open to closed.
+
+ today
+
+
+
+
+
+
+
+
+
+
+ Lorry Mion liked
+ Tabler UI Kit.
+
+ yesterday
+
+
+
+
+
+
+
+
+
+
+ Leesa Beaty posted new video.
+
+ 2 days ago
+
+
+
+
+
+
+
+
+
+
+ Perren Keemar and 3 others
+ followed you.
+
+ 2 days ago
+
+
+
+
+
+ SA
+
+
+
+
+ Sunny Airey upload 3 new photos
+ to category Inspirations.
+
+ 2 days ago
+
+
+
+
+
+
+
+
+
+
+ Geoffry Flaunders made a
+ $10 donation.
+
+ 2 days ago
+
+
+
+
+
+
+
+
+
+
+ Thatcher Keel created a profile.
+
+ 3 days ago
+
+
+
+
+
+
+
+
+
+
+ Dyann Escala hosted the event
+ Tabler UI Birthday.
+
+ 4 days ago
+
+
+
+
+
+
+
+
+
+
+ Avivah Mugleston mentioned you on
+ Best of 2020.
+
+ 2 days ago
+
+
+
+
+
+ AA
+
+
+
+
+ Arlie Armstead sent a Review
+ Request to Amanda Blake.
+
+ 2 days ago
+
+
+
+
+
+
+ Development activity
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Today's Earning: $4,262.40
+
+
+
+ +5% more than yesterday
+
+
+
+
+
+
+
+
+
+ 19 Jul
+
+
+
+
+
+
+
+ Purchases: 52
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ | User | +Commit | +Date | +
|---|---|---|
| + + | +
+
+ Fix dart Sass compatibility (#29755)
+
+ |
+ 28 Nov 2019 | +
| + JL + | +
+
+ Change deprecated html tags to text decoration classes
+ (#29604)
+
+ |
+ 27 Nov 2019 | +
| + + | +
+
+ justify-content:between ⇒
+ justify-content:space-between (#29734)
+
+ |
+ 26 Nov 2019 | +
| + + | +
+
+ Update change-version.js (#29736)
+
+ |
+ 26 Nov 2019 | +
| + + | +
+
+ Regenerate package-lock.json (#29730)
+
+ |
+ 25 Nov 2019 | +
+
+
+
+
+
+ Invoices
+
+
+
+
+
+ Show
+
+
+
+
+ entries
+
+ Search:
+
+
+
+
+
+
+
+
+
+
+ | + + | ++ No. + + + | +Invoice Subject | +Client | +VAT No. | +Created | +Status | +Price | ++ |
|---|---|---|---|---|---|---|---|---|
| + + | +001401 | ++ Design Works + | ++ + Carlson Limited + | +87956621 | +15 Dec 2017 | +Paid | +$887 | ++ + + + + | +
| + + | +001402 | ++ UX Wireframes + | ++ + Adobe + | +87956421 | +12 Apr 2017 | ++ Pending + | +$1200 | ++ + + + + | +
| + + | +001403 | ++ New Dashboard + | ++ + Bluewolf + | +87952621 | +23 Oct 2017 | ++ Pending + | +$534 | ++ + + + + | +
| + + | +001404 | ++ Landing Page + | ++ + Salesforce + | +87953421 | +2 Sep 2017 | ++ Due in 2 + Weeks + | +$1500 | ++ + + + + | +
| + + | +001405 | ++ Marketing Templates + | ++ + Printic + | +87956621 | +29 Jan 2018 | ++ Paid Today + | +$648 | ++ + + + + | +
| + + | +001406 | ++ Sales Presentation + | ++ + Tabdaq + | +87956621 | +4 Feb 2018 | ++ Due in 3 + Weeks + | +$300 | ++ + + + + | +
| + + | +001407 | ++ Logo & Print + | ++ + Apple + | +87956621 | +22 Mar 2018 | ++ Paid Today + | +$2500 | ++ + + + + | +
| + + | +001408 | ++ Icons + | ++ + Tookapic + | +87956621 | +13 May 2018 | ++ Paid Today + | +$940 | ++ + + + + | +
+
+ 返回
+
+
+
+
+
+ ![Girl has dropped her ice cream.]()
+
+
+
+ ![]()
+
+
+
+
+
+
+
diff --git a/packages/web/src/views/error-page/404.vue b/packages/web/src/views/error-page/404.vue
new file mode 100644
index 0000000..1791f55
--- /dev/null
+++ b/packages/web/src/views/error-page/404.vue
@@ -0,0 +1,228 @@
+
+ Oops!
+ gif来源airbnb 页面 +你没有权限去该页面
+如有不满请联系你领导
+-
+
- 或者你可以去: +
-
+
回首页 +
+ - + 返回上一个页面 + +
+
+
+
+
+
+
diff --git a/packages/web/src/views/login/components/Login.vue b/packages/web/src/views/login/components/Login.vue
new file mode 100644
index 0000000..0870583
--- /dev/null
+++ b/packages/web/src/views/login/components/Login.vue
@@ -0,0 +1,214 @@
+
+
+
+
+ 
+ 
+
+
+
+
+
+
+
+
+
+ OOPS!
+ All rights reserved
+ wallstreetcn
+
+ {{ message }}
+ Please check that the URL you entered is correct, or click the button below to return to the homepage.
+ Back to home
+ 账号登录
+
+
+
+
+
+
+ 发送验证码
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+@/api2/user
\ No newline at end of file
diff --git a/packages/web/src/views/login/index.vue b/packages/web/src/views/login/index.vue
new file mode 100644
index 0000000..ce2c35c
--- /dev/null
+++ b/packages/web/src/views/login/index.vue
@@ -0,0 +1,26 @@
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/packages/web/src/views/redirect/index.vue b/packages/web/src/views/redirect/index.vue
new file mode 100644
index 0000000..db4c1d6
--- /dev/null
+++ b/packages/web/src/views/redirect/index.vue
@@ -0,0 +1,12 @@
+
diff --git a/packages/web/src/views/reset-password/index.vue b/packages/web/src/views/reset-password/index.vue
new file mode 100644
index 0000000..74c83f5
--- /dev/null
+++ b/packages/web/src/views/reset-password/index.vue
@@ -0,0 +1,276 @@
+
+
+
+
+
+
+
+ {{ codeLoading ? `${countdown} 秒后重新发送` : '发送验证码' }}
+
+
+
+
+
+
+
+
+
+
+
+
+ 确认
+
+
+
+
+
+
+
+