by2025/admin-vben5
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: Optimize multi-theme switching

Browse Source
This commit is contained in:
vben
2024-06-23 19:17:31 +08:00
parent aa53353903
commit 6afed34437
55 changed files with 3534 additions and 772 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
apps/web-antd/package.json
View File

@@ -38,7 +38,6 @@
"@vben/styles": "workspace:*",
"@vben/types": "workspace:*",
"@vben/universal-ui": "workspace:*",
"@vben/chart-ui": "workspace:*",
"@vben/utils": "workspace:*",
"@vueuse/core": "^10.11.0",
"ant-design-vue": "^4.2.3",

47
apps/web-antd/src/app.vue
View File

@@ -42,3 +42,50 @@ const tokenTheme = computed(() => {
</ConfigProvider>
</GlobalProvider>
</template>
<!-- <style>
:root {
--background: 0 0% 100%;
--foreground: 240 10% 3.9%;
--card: 0 0% 100%;
--card-foreground: 240 10% 3.9%;
--popover: 0 0% 100%;
--popover-foreground: 240 10% 3.9%;
--primary: 240 5.9% 10%;
--primary-foreground: 0 0% 98%;
--secondary: 240 4.8% 95.9%;
--secondary-foreground: 240 5.9% 10%;
--muted: 240 4.8% 95.9%;
--muted-foreground: 240 3.8% 46.1%;
--accent: 240 4.8% 95.9%;
--accent-foreground: 240 5.9% 10%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 0 0% 98%;
--border: 240 5.9% 90%;
--input: 240 5.9% 90%;
--ring: 240 5.9% 10%;
--radius: 0.25rem;
}
.dark {
--background: 240 10% 3.9%;
--foreground: 0 0% 98%;
--card: 240 10% 3.9%;
--card-foreground: 0 0% 98%;
--popover: 240 10% 3.9%;
--popover-foreground: 0 0% 98%;
--primary: 0 0% 98%;
--primary-foreground: 240 5.9% 10%;
--secondary: 240 3.7% 15.9%;
--secondary-foreground: 0 0% 98%;
--muted: 240 3.7% 15.9%;
--muted-foreground: 240 5% 64.9%;
--accent: 240 3.7% 15.9%;
--accent-foreground: 0 0% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 0% 98%;
--border: 240 3.7% 15.9%;
--input: 240 3.7% 15.9%;
--ring: 240 4.9% 83.9%;
}
</style> -->

484
apps/web-antd/src/views/dashboard/index.vue
View File

@@ -1,249 +1,251 @@
<script lang="ts" setup>
import { ref } from 'vue';
// import { ref } from 'vue';
// import { echartsInstance as echarts } from '@vben/chart-ui';
defineOptions({ name: 'WelCome' });
import { Dashboard } from '@vben/universal-ui';
import { echartsInstance as echarts } from '@vben/chart-ui';
const cardList = ref([
{
title: '访问数',
extra: '月',
leftContent: '2000',
rightContent: 'flat-color-icons:conference-call',
leftFooter: '总访问数',
color: 'green',
rightFooter: '5000',
},
{
title: '销售额',
extra: '日',
leftContent: '$1350',
rightContent: 'flat-color-icons:sales-performance',
leftFooter: '总销售额',
color: 'red',
rightFooter: '$550000',
},
]);
const chartTabs = ref([
{
name: '1',
title: '流量趋势',
option: {
color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
// label: {
// backgroundColor: '#6a7985',
// },
},
},
legend: {
data: ['Line 1', 'Line 2', 'Line 3', 'Line 4', 'Line 5'],
},
toolbox: {
feature: {
saveAsImage: {},
},
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
},
],
yAxis: [
{
type: 'value',
},
],
series: [
{
name: 'Line 1',
type: 'line',
stack: 'Total',
smooth: true,
lineStyle: {
width: 0,
},
showSymbol: false,
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgb(128, 255, 165)',
},
{
offset: 1,
color: 'rgb(1, 191, 236)',
},
]),
},
emphasis: {
focus: 'series',
},
data: [140, 232, 101, 264, 90, 340, 250],
},
{
name: 'Line 2',
type: 'line',
stack: 'Total',
smooth: true,
lineStyle: {
width: 0,
},
showSymbol: false,
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgb(0, 221, 255)',
},
{
offset: 1,
color: 'rgb(77, 119, 255)',
},
]),
},
emphasis: {
focus: 'series',
},
data: [120, 282, 111, 234, 220, 340, 310],
},
{
name: 'Line 3',
type: 'line',
stack: 'Total',
smooth: true,
lineStyle: {
width: 0,
},
showSymbol: false,
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgb(55, 162, 255)',
},
{
offset: 1,
color: 'rgb(116, 21, 219)',
},
]),
},
emphasis: {
focus: 'series',
},
data: [320, 132, 201, 334, 190, 130, 220],
},
{
name: 'Line 4',
type: 'line',
stack: 'Total',
smooth: true,
lineStyle: {
width: 0,
},
showSymbol: false,
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgb(255, 0, 135)',
},
{
offset: 1,
color: 'rgb(135, 0, 157)',
},
]),
},
emphasis: {
focus: 'series',
},
data: [220, 402, 231, 134, 190, 230, 120],
},
{
name: 'Line 5',
type: 'line',
stack: 'Total',
smooth: true,
lineStyle: {
width: 0,
},
showSymbol: false,
label: {
show: true,
position: 'top',
},
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgb(255, 191, 0)',
},
{
offset: 1,
color: 'rgb(224, 62, 76)',
},
]),
},
emphasis: {
focus: 'series',
},
data: [220, 302, 181, 234, 210, 290, 150],
},
],
},
},
{
name: '2',
title: '访问量',
option: {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
},
yAxis: {
type: 'value',
},
series: [
{
data: [
120,
{
value: 200,
itemStyle: {
color: '#a90000',
},
},
150,
80,
70,
110,
130,
],
type: 'bar',
},
],
},
},
]);
// const cardList = ref([
// {
// color: 'green',
// extra: '月',
// leftContent: '2000',
// leftFooter: '总访问数',
// rightContent: 'flat-color-icons:conference-call',
// rightFooter: '5000',
// title: '访问数',
// },
// {
// color: 'red',
// extra: '日',
// leftContent: '$1350',
// leftFooter: '总销售额',
// rightContent: 'flat-color-icons:sales-performance',
// rightFooter: '$550000',
// title: '销售额',
// },
// ]);
// const chartTabs = ref([
// {
// name: '1',
// option: {
// color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
// grid: {
// bottom: '3%',
// containLabel: true,
// left: '3%',
// right: '4%',
// },
// legend: {
// data: ['Line 1', 'Line 2', 'Line 3', 'Line 4', 'Line 5'],
// },
// series: [
// {
// areaStyle: {
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
// {
// color: 'rgb(128, 255, 165)',
// offset: 0,
// },
// {
// color: 'rgb(1, 191, 236)',
// offset: 1,
// },
// ]),
// opacity: 0.8,
// },
// data: [140, 232, 101, 264, 90, 340, 250],
// emphasis: {
// focus: 'series',
// },
// lineStyle: {
// width: 0,
// },
// name: 'Line 1',
// showSymbol: false,
// smooth: true,
// stack: 'Total',
// type: 'line',
// },
// {
// areaStyle: {
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
// {
// color: 'rgb(0, 221, 255)',
// offset: 0,
// },
// {
// color: 'rgb(77, 119, 255)',
// offset: 1,
// },
// ]),
// opacity: 0.8,
// },
// data: [120, 282, 111, 234, 220, 340, 310],
// emphasis: {
// focus: 'series',
// },
// lineStyle: {
// width: 0,
// },
// name: 'Line 2',
// showSymbol: false,
// smooth: true,
// stack: 'Total',
// type: 'line',
// },
// {
// areaStyle: {
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
// {
// color: 'rgb(55, 162, 255)',
// offset: 0,
// },
// {
// color: 'rgb(116, 21, 219)',
// offset: 1,
// },
// ]),
// opacity: 0.8,
// },
// data: [320, 132, 201, 334, 190, 130, 220],
// emphasis: {
// focus: 'series',
// },
// lineStyle: {
// width: 0,
// },
// name: 'Line 3',
// showSymbol: false,
// smooth: true,
// stack: 'Total',
// type: 'line',
// },
// {
// areaStyle: {
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
// {
// color: 'rgb(255, 0, 135)',
// offset: 0,
// },
// {
// color: 'rgb(135, 0, 157)',
// offset: 1,
// },
// ]),
// opacity: 0.8,
// },
// data: [220, 402, 231, 134, 190, 230, 120],
// emphasis: {
// focus: 'series',
// },
// lineStyle: {
// width: 0,
// },
// name: 'Line 4',
// showSymbol: false,
// smooth: true,
// stack: 'Total',
// type: 'line',
// },
// {
// areaStyle: {
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
// {
// color: 'rgb(255, 191, 0)',
// offset: 0,
// },
// {
// color: 'rgb(224, 62, 76)',
// offset: 1,
// },
// ]),
// opacity: 0.8,
// },
// data: [220, 302, 181, 234, 210, 290, 150],
// emphasis: {
// focus: 'series',
// },
// label: {
// position: 'top',
// show: true,
// },
// lineStyle: {
// width: 0,
// },
// name: 'Line 5',
// showSymbol: false,
// smooth: true,
// stack: 'Total',
// type: 'line',
// },
// ],
// toolbox: {
// feature: {
// saveAsImage: {},
// },
// },
// tooltip: {
// axisPointer: {
// type: 'cross',
// // label: {
// // backgroundColor: '#6a7985',
// // },
// },
// trigger: 'axis',
// },
// xAxis: [
// {
// boundaryGap: false,
// data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
// type: 'category',
// },
// ],
// yAxis: [
// {
// type: 'value',
// },
// ],
// },
// title: '流量趋势',
// },
// {
// name: '2',
// option: {
// series: [
// {
// data: [
// 120,
// {
// itemStyle: {
// color: '#a90000',
// },
// value: 200,
// },
// 150,
// 80,
// 70,
// 110,
// 130,
// ],
// type: 'bar',
// },
// ],
// xAxis: {
// data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
// type: 'category',
// },
// yAxis: {
// type: 'value',
// },
// },
// title: '访问量',
// },
// ]);
</script>
<template>
<Dashboard :cardList="cardList" :chartTabs="chartTabs"></Dashboard>
<div>dashboard</div>
<!-- <Dashboard :card-list="cardList" :chart-tabs="chartTabs" /> -->
</template>