Skip to content

Commit c58c079

Browse files
anncwbanncwb
committed
feat: add dashboard page
1 parent 199d550 commit c58c079

File tree

100 files changed

+1908
-1081
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

100 files changed

+1908
-1081
lines changed

‎apps/web-antd/mock/user.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ const fakeUserList = [
55
accessToken: 'fakeAdminToken',
66
avatar: '',
77
desc: 'manager',
8-
homePath: '/welcome',
8+
homePath: '/',
99
password: '123456',
1010
realName: 'Vben Admin',
1111
roles: [
@@ -21,7 +21,7 @@ const fakeUserList = [
2121
accessToken: 'fakeTestToken',
2222
avatar: '',
2323
desc: 'tester',
24-
homePath: '/welcome',
24+
homePath: '/',
2525
password: '123456',
2626
realName: 'test user',
2727
roles: [

‎apps/web-antd/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@
4444
"ant-design-vue": "^4.2.3",
4545
"dayjs": "^1.11.11",
4646
"pinia": "2.1.7",
47-
"vue": "^3.4.30",
47+
"vue": "^3.4.31",
4848
"vue-router": "^4.4.0"
4949
},
5050
"devDependencies": {

‎apps/web-antd/src/router/routes/modules/dashboard.ts

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import type { RouteRecordRaw } from 'vue-router';
2+
3+
import { $t } from '@vben/locales/helper';
4+
5+
import { BasicLayout } from '#/layouts';
6+
7+
const routes: RouteRecordRaw[] = [
8+
{
9+
component: BasicLayout,
10+
meta: {
11+
order: -1,
12+
title: $t('page.dashboard.title'),
13+
},
14+
name: 'Dashboard',
15+
path: '/',
16+
redirect: '/analytics',
17+
children: [
18+
{
19+
name: 'Analytics',
20+
path: '/analytics',
21+
component: () => import('#/views/dashboard/analytics/index.vue'),
22+
meta: {
23+
affixTab: true,
24+
title: $t('page.dashboard.analytics'),
25+
},
26+
},
27+
{
28+
name: 'Workspace',
29+
path: '/workspace',
30+
component: () => import('#/views/dashboard/workspace/index.vue'),
31+
meta: {
32+
title: $t('page.dashboard.workspace'),
33+
},
34+
},
35+
],
36+
},
37+
];
38+
39+
export default routes;

‎apps/web-antd/src/router/routes/modules/fallback.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ const routes: RouteRecordRaw[] = [
99
component: BasicLayout,
1010
meta: {
1111
icon: 'mdi:lightbulb-error-outline',
12-
title: $t('page.fallback.page'),
12+
title: $t('page.fallback.title'),
1313
},
1414
name: 'FallbackLayout',
1515
path: '/fallback',

‎apps/web-antd/src/router/routes/modules/home.ts

Lines changed: 0 additions & 30 deletions
This file was deleted.

‎apps/web-antd/src/router/routes/modules/nested.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ const routes: RouteRecordRaw[] = [
1111
icon: 'ic:round-menu',
1212
keepAlive: true,
1313
order: 1000,
14-
title: $t('page.nested.page'),
14+
title: $t('page.nested.title'),
1515
},
1616
name: 'Nested',
1717
path: '/nested',

‎apps/web-antd/src/router/routes/modules/outside.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ const routes: RouteRecordRaw[] = [
99
component: BasicLayout,
1010
meta: {
1111
icon: 'ic:round-settings-input-composite',
12-
title: $t('page.outside.page'),
12+
title: $t('page.outside.title'),
1313
},
1414
name: 'Outside',
1515
path: '/outside',

‎apps/web-antd/src/store/index.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import type { InitStoreOptions } from '@vben-core/stores';
22

33
import type { App } from 'vue';
44

5-
import { initStore } from '@vben-core/stores';
5+
import { initStore, useAccessStore, useTabsStore } from '@vben-core/stores';
66

77
/**
88
* @zh_CN 初始化pinia
@@ -13,4 +13,4 @@ async function setupStore(app: App, options: InitStoreOptions) {
1313
app.use(pinia);
1414
}
1515

16-
export { setupStore };
16+
export { setupStore, useAccessStore, useTabsStore };

‎apps/web-antd/src/views/dashboard/analytics/analytics-trends.vue

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
<script lang="ts" setup>
2+
import { onMounted, ref } from 'vue';
3+
4+
import { EchartsUI, type EchartsUIType, useEcharts } from '@vben/chart-ui';
5+
6+
defineOptions({ name: 'AnalyticsTrends' });
7+
8+
const chartRef = ref<EchartsUIType>();
9+
const { renderEcharts } = useEcharts(chartRef);
10+
11+
onMounted(() => {
12+
renderEcharts({
13+
grid: {
14+
bottom: 0,
15+
containLabel: true,
16+
left: '1%',
17+
right: '1%',
18+
top: '2 %',
19+
},
20+
series: [
21+
{
22+
areaStyle: {},
23+
data: [
24+
111, 2000, 6000, 16_000, 33_333, 55_555, 64_000, 33_333, 18_000,
25+
36_000, 70_000, 42_444, 23_222, 13_000, 8000, 4000, 1200, 333, 222,
26+
111,
27+
],
28+
itemStyle: {
29+
color: '#5ab1ef',
30+
},
31+
smooth: true,
32+
type: 'line',
33+
},
34+
{
35+
areaStyle: {},
36+
data: [
37+
33, 66, 88, 333, 3333, 6200, 20_000, 3000, 1200, 13_000, 22_000,
38+
11_000, 2221, 1201, 390, 198, 60, 30, 22, 11,
39+
],
40+
itemStyle: {
41+
color: '#019680',
42+
},
43+
smooth: true,
44+
type: 'line',
45+
},
46+
],
47+
tooltip: {
48+
axisPointer: {
49+
lineStyle: {
50+
color: '#019680',
51+
width: 1,
52+
},
53+
},
54+
trigger: 'axis',
55+
},
56+
xAxis: {
57+
axisTick: {
58+
show: false,
59+
},
60+
boundaryGap: false,
61+
data: Array.from({ length: 18 }).map((_item, index) => `${index + 6}:00`),
62+
type: 'category',
63+
},
64+
yAxis: [
65+
{
66+
axisTick: {
67+
show: false,
68+
},
69+
max: 80_000,
70+
71+
type: 'value',
72+
},
73+
],
74+
});
75+
});
76+
</script>
77+
78+
<template>
79+
<EchartsUI ref="chartRef" />
80+
</template>

‎apps/web-antd/src/views/dashboard/analytics/analytics-visits-data.vue

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
<script lang="ts" setup>
2+
import { onMounted, ref } from 'vue';
3+
4+
import { EchartsUI, type EchartsUIType, useEcharts } from '@vben/chart-ui';
5+
6+
defineOptions({ name: 'AnalyticsVisitsData' });
7+
8+
const chartRef = ref<EchartsUIType>();
9+
const { renderEcharts } = useEcharts(chartRef);
10+
11+
onMounted(() => {
12+
renderEcharts({
13+
legend: {
14+
bottom: 0,
15+
data: ['访问', '趋势'],
16+
},
17+
radar: {
18+
indicator: [
19+
{
20+
name: '网页',
21+
},
22+
{
23+
name: '移动端',
24+
},
25+
{
26+
name: 'Ipad',
27+
},
28+
{
29+
name: '客户端',
30+
},
31+
{
32+
name: '第三方',
33+
},
34+
{
35+
name: '其它',
36+
},
37+
],
38+
radius: '60%',
39+
splitNumber: 8,
40+
},
41+
series: [
42+
{
43+
areaStyle: {
44+
opacity: 1,
45+
shadowBlur: 0,
46+
shadowColor: 'rgba(0,0,0,.2)',
47+
shadowOffsetX: 0,
48+
shadowOffsetY: 10,
49+
},
50+
data: [
51+
{
52+
itemStyle: {
53+
color: '#b6a2de',
54+
},
55+
name: '访问',
56+
value: [90, 50, 86, 40, 50, 20],
57+
},
58+
{
59+
itemStyle: {
60+
color: '#5ab1ef',
61+
},
62+
name: '趋势',
63+
value: [70, 75, 70, 76, 20, 85],
64+
},
65+
],
66+
itemStyle: {
67+
// borderColor: '#fff',
68+
borderRadius: 10,
69+
borderWidth: 2,
70+
},
71+
symbolSize: 0,
72+
type: 'radar',
73+
},
74+
],
75+
tooltip: {},
76+
});
77+
});
78+
</script>
79+
80+
<template>
81+
<EchartsUI ref="chartRef" />
82+
</template>

0 commit comments

Comments
 (0)