Vben
5 years ago
109 changed files with 881 additions and 2883 deletions
@ -0,0 +1,35 @@ |
|||
import { generateAntColors, primaryColor } from '../config/themeConfig'; |
|||
import { getThemeVariables } from 'ant-design-vue/dist/theme'; |
|||
import { resolve } from 'path'; |
|||
|
|||
/** |
|||
* less global variable |
|||
*/ |
|||
export function generateModifyVars(dark = false) { |
|||
const palettes = generateAntColors(primaryColor); |
|||
const primary = palettes[5]; |
|||
|
|||
const primaryColorObj: Record<string, string> = {}; |
|||
|
|||
for (let index = 0; index < 10; index++) { |
|||
primaryColorObj[`primary-${index + 1}`] = palettes[index]; |
|||
} |
|||
|
|||
const modifyVars = getThemeVariables({ dark }); |
|||
return { |
|||
...modifyVars, |
|||
// Used for global import to avoid the need to import each style file separately
|
|||
// reference: Avoid repeated references
|
|||
hack: `${modifyVars.hack} @import (reference) "${resolve('src/design/config.less')}";`, |
|||
'primary-color': primary, |
|||
...primaryColorObj, |
|||
'info-color': primary, |
|||
'processing-color': primary, |
|||
'success-color': '#55D187', // Success color
|
|||
'error-color': '#ED6F6F', // False color
|
|||
'warning-color': '#EFBD47', // Warning color
|
|||
'font-size-base': '14px', // Main font size
|
|||
'border-radius-base': '2px', // Component/float fillet
|
|||
'link-color': primary, // Link color
|
|||
}; |
|||
} |
|||
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 3.7 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
@ -0,0 +1,111 @@ |
|||
<template> |
|||
<div |
|||
v-if="getShowDarkModeToggle" |
|||
:class="[ |
|||
prefixCls, |
|||
`${prefixCls}--${size}`, |
|||
{ |
|||
[`${prefixCls}--dark`]: isDark, |
|||
}, |
|||
]" |
|||
@click="toggleDarkMode" |
|||
> |
|||
<div :class="`${prefixCls}-inner`"> </div> |
|||
<SvgIcon size="14" name="sun" /> |
|||
<SvgIcon size="14" name="moon" /> |
|||
</div> |
|||
</template> |
|||
<script lang="ts"> |
|||
import { defineComponent, computed } from 'vue'; |
|||
|
|||
import { useDesign } from '/@/hooks/web/useDesign'; |
|||
|
|||
import { SvgIcon } from '/@/components/Icon'; |
|||
import { useRootSetting } from '/@/hooks/setting/useRootSetting'; |
|||
import { updateHeaderBgColor, updateSidebarBgColor } from '/@/logics/theme/updateBackground'; |
|||
import { updateDarkTheme } from '/@/logics/theme/dark'; |
|||
|
|||
import { ThemeEnum } from '/@/enums/appEnum'; |
|||
|
|||
export default defineComponent({ |
|||
name: 'DarkModeToggle', |
|||
components: { SvgIcon }, |
|||
props: { |
|||
size: { |
|||
type: String, |
|||
default: 'default', |
|||
validate: (val) => ['default', 'large'].includes(val), |
|||
}, |
|||
}, |
|||
setup() { |
|||
const { prefixCls } = useDesign('dark-mode-toggle'); |
|||
const { getDarkMode, setDarkMode, getShowDarkModeToggle } = useRootSetting(); |
|||
const isDark = computed(() => getDarkMode.value === ThemeEnum.DARK); |
|||
function toggleDarkMode() { |
|||
const darkMode = getDarkMode.value === ThemeEnum.DARK ? ThemeEnum.LIGHT : ThemeEnum.DARK; |
|||
setDarkMode(darkMode); |
|||
updateDarkTheme(darkMode); |
|||
updateHeaderBgColor(); |
|||
updateSidebarBgColor(); |
|||
} |
|||
|
|||
return { |
|||
isDark, |
|||
prefixCls, |
|||
toggleDarkMode, |
|||
getShowDarkModeToggle, |
|||
}; |
|||
}, |
|||
}); |
|||
</script> |
|||
<style lang="less" scoped> |
|||
@prefix-cls: ~'@{namespace}-dark-mode-toggle'; |
|||
|
|||
html[data-theme='dark'] { |
|||
.@{prefix-cls} { |
|||
border: 1px solid rgb(196, 188, 188); |
|||
} |
|||
} |
|||
|
|||
.@{prefix-cls} { |
|||
position: relative; |
|||
display: flex; |
|||
width: 50px; |
|||
height: 26px; |
|||
padding: 0 6px; |
|||
margin-left: auto; |
|||
cursor: pointer; |
|||
background-color: #151515; |
|||
border-radius: 30px; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
|
|||
&-inner { |
|||
position: absolute; |
|||
z-index: 1; |
|||
width: 18px; |
|||
height: 18px; |
|||
background-color: #fff; |
|||
border-radius: 50%; |
|||
transition: transform 0.5s, background-color 0.5s; |
|||
will-change: transform; |
|||
} |
|||
|
|||
&--dark { |
|||
.@{prefix-cls}-inner { |
|||
transform: translateX(calc(100% + 2px)); |
|||
} |
|||
} |
|||
|
|||
&--large { |
|||
width: 72px; |
|||
height: 34px; |
|||
padding: 0 10px; |
|||
|
|||
.@{prefix-cls}-inner { |
|||
width: 26px; |
|||
height: 26px; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,31 @@ |
|||
.bg-white { |
|||
background: @component-background !important; |
|||
} |
|||
|
|||
html[data-theme='light'] { |
|||
.text-secondary { |
|||
color: rgba(0, 0, 0, 0.45); |
|||
} |
|||
} |
|||
|
|||
html[data-theme='dark'] { |
|||
.text-secondary { |
|||
color: #8b949e; |
|||
} |
|||
|
|||
.ant-card-grid-hoverable:hover { |
|||
box-shadow: 0 3px 6px -4px rgb(0 0 0 / 48%), 0 6px 16px 0 rgb(0 0 0 / 32%), |
|||
0 9px 28px 8px rgb(0 0 0 / 20%); |
|||
} |
|||
|
|||
.ant-alert-message, |
|||
.ant-alert-with-description .ant-alert-message, |
|||
.ant-alert-description { |
|||
color: rgba(0, 0, 0, 0.85); |
|||
} |
|||
|
|||
.ant-checkbox-checked .ant-checkbox-inner::after { |
|||
border-top: 0; |
|||
border-left: 0; |
|||
} |
|||
} |
|||
@ -1,57 +0,0 @@ |
|||
import { useTimeoutFn } from '/@/hooks/core/useTimeout'; |
|||
import { unref, Ref, nextTick } from 'vue'; |
|||
import { tryOnUnmounted } from '@vueuse/core'; |
|||
|
|||
interface CallBackFn { |
|||
(instance: Nullable<ApexCharts>): void; |
|||
} |
|||
|
|||
export function useApexCharts(elRef: Ref<HTMLDivElement>) { |
|||
let chartInstance: Nullable<ApexCharts> = null; |
|||
|
|||
function setOptions(options: any, callback?: CallBackFn) { |
|||
nextTick(() => { |
|||
useTimeoutFn(async () => { |
|||
const el = unref(elRef); |
|||
|
|||
if (!el || !unref(el)) return; |
|||
const ApexCharts = await (await import('apexcharts')).default; |
|||
chartInstance = new ApexCharts(el, options); |
|||
|
|||
chartInstance && chartInstance.render(); |
|||
|
|||
// The callback method is added to setOptions to return the chartInstance to facilitate the re-operation of the chart, such as calling the updateOptions method to update the chart
|
|||
callback && callback(chartInstance); |
|||
}, 30); |
|||
}); |
|||
} |
|||
|
|||
// Call the updateOptions method of ApexCharts to update the chart
|
|||
function updateOptions( |
|||
chartInstance: Nullable<ApexCharts>, |
|||
options: any, |
|||
redraw = false, |
|||
animate = true, |
|||
updateSyncedCharts = true, |
|||
callback: CallBackFn |
|||
) { |
|||
nextTick(() => { |
|||
useTimeoutFn(() => { |
|||
chartInstance && chartInstance.updateOptions(options, redraw, animate, updateSyncedCharts); |
|||
|
|||
callback && callback(chartInstance); |
|||
}, 30); |
|||
}); |
|||
} |
|||
|
|||
tryOnUnmounted(() => { |
|||
if (!chartInstance) return; |
|||
chartInstance?.destroy?.(); |
|||
chartInstance = null; |
|||
}); |
|||
|
|||
return { |
|||
setOptions, |
|||
updateOptions, |
|||
}; |
|||
} |
|||
@ -0,0 +1,13 @@ |
|||
import { darkCssIsReady, loadDarkThemeCss } from 'vite-plugin-theme/es/client'; |
|||
|
|||
export async function updateDarkTheme(mode: string | null = 'light') { |
|||
const htmlRoot = document.getElementById('htmlRoot'); |
|||
if (mode === 'dark') { |
|||
if (import.meta.env.PROD && !darkCssIsReady) { |
|||
await loadDarkThemeCss(); |
|||
} |
|||
htmlRoot?.setAttribute('data-theme', 'dark'); |
|||
} else { |
|||
htmlRoot?.setAttribute('data-theme', 'light'); |
|||
} |
|||
} |
|||
@ -1,58 +0,0 @@ |
|||
<template> |
|||
<div ref="chartRef" :style="{ width: '100%' }"></div> |
|||
</template> |
|||
<script lang="ts"> |
|||
import { defineComponent, ref, Ref, onMounted } from 'vue'; |
|||
|
|||
import { useApexCharts } from '/@/hooks/web/useApexCharts'; |
|||
|
|||
export default defineComponent({ |
|||
setup() { |
|||
const chartRef = ref<HTMLDivElement | null>(null); |
|||
const { setOptions } = useApexCharts(chartRef as Ref<HTMLDivElement>); |
|||
|
|||
onMounted(() => { |
|||
setOptions({ |
|||
series: [ |
|||
{ |
|||
name: 'series1', |
|||
data: [31, 40, 28, 51, 42, 109, 100], |
|||
}, |
|||
{ |
|||
name: 'series2', |
|||
data: [11, 32, 45, 32, 34, 52, 41], |
|||
}, |
|||
], |
|||
chart: { |
|||
height: 350, |
|||
type: 'area', |
|||
}, |
|||
dataLabels: { |
|||
enabled: false, |
|||
}, |
|||
stroke: { |
|||
curve: 'smooth', |
|||
}, |
|||
xaxis: { |
|||
type: 'datetime', |
|||
categories: [ |
|||
'2018-09-19T00:00:00.000Z', |
|||
'2018-09-19T01:30:00.000Z', |
|||
'2018-09-19T02:30:00.000Z', |
|||
'2018-09-19T03:30:00.000Z', |
|||
'2018-09-19T04:30:00.000Z', |
|||
'2018-09-19T05:30:00.000Z', |
|||
'2018-09-19T06:30:00.000Z', |
|||
], |
|||
}, |
|||
tooltip: { |
|||
x: { |
|||
format: 'dd/MM/yy HH:mm', |
|||
}, |
|||
}, |
|||
}); |
|||
}); |
|||
return { chartRef }; |
|||
}, |
|||
}); |
|||
</script> |
|||
@ -1,52 +0,0 @@ |
|||
<template> |
|||
<div ref="chartRef" :style="{ width: '100%' }"></div> |
|||
</template> |
|||
<script lang="ts"> |
|||
import { defineComponent, ref, Ref, onMounted } from 'vue'; |
|||
|
|||
import { useApexCharts } from '/@/hooks/web/useApexCharts'; |
|||
|
|||
export default defineComponent({ |
|||
setup() { |
|||
const chartRef = ref<HTMLDivElement | null>(null); |
|||
const { setOptions } = useApexCharts(chartRef as Ref<HTMLDivElement>); |
|||
|
|||
onMounted(() => { |
|||
setOptions({ |
|||
series: [ |
|||
{ |
|||
data: [400, 430, 448, 470, 540, 580, 690, 1100, 1200, 1380], |
|||
}, |
|||
], |
|||
chart: { |
|||
type: 'bar', |
|||
height: 350, |
|||
}, |
|||
plotOptions: { |
|||
bar: { |
|||
horizontal: true, |
|||
}, |
|||
}, |
|||
dataLabels: { |
|||
enabled: false, |
|||
}, |
|||
xaxis: { |
|||
categories: [ |
|||
'South Korea', |
|||
'Canada', |
|||
'United Kingdom', |
|||
'Netherlands', |
|||
'Italy', |
|||
'France', |
|||
'Japan', |
|||
'United States', |
|||
'China', |
|||
'Germany', |
|||
], |
|||
}, |
|||
}); |
|||
}); |
|||
return { chartRef }; |
|||
}, |
|||
}); |
|||
</script> |
|||
@ -1,53 +0,0 @@ |
|||
<template> |
|||
<div ref="chartRef" :style="{ width: '100%' }"></div> |
|||
</template> |
|||
<script lang="ts"> |
|||
import { defineComponent, ref, Ref, onMounted } from 'vue'; |
|||
|
|||
import { useApexCharts } from '/@/hooks/web/useApexCharts'; |
|||
|
|||
export default defineComponent({ |
|||
setup() { |
|||
const chartRef = ref<HTMLDivElement | null>(null); |
|||
const { setOptions } = useApexCharts(chartRef as Ref<HTMLDivElement>); |
|||
|
|||
onMounted(() => { |
|||
setOptions({ |
|||
series: [ |
|||
{ |
|||
name: 'Desktops', |
|||
data: [10, 41, 35, 51, 49, 62, 69, 91, 148], |
|||
}, |
|||
], |
|||
chart: { |
|||
height: 350, |
|||
type: 'line', |
|||
zoom: { |
|||
enabled: false, |
|||
}, |
|||
}, |
|||
dataLabels: { |
|||
enabled: false, |
|||
}, |
|||
stroke: { |
|||
curve: 'straight', |
|||
}, |
|||
title: { |
|||
text: 'Product Trends by Month', |
|||
align: 'left', |
|||
}, |
|||
grid: { |
|||
row: { |
|||
colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns |
|||
opacity: 0.5, |
|||
}, |
|||
}, |
|||
xaxis: { |
|||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'], |
|||
}, |
|||
}); |
|||
}); |
|||
return { chartRef }; |
|||
}, |
|||
}); |
|||
</script> |
|||
@ -1,138 +0,0 @@ |
|||
<template> |
|||
<div ref="chartRef" :style="{ width: '100%' }"></div> |
|||
</template> |
|||
<script lang="ts"> |
|||
import { defineComponent, ref, Ref, onMounted } from 'vue'; |
|||
|
|||
import { useApexCharts } from '/@/hooks/web/useApexCharts'; |
|||
|
|||
export default defineComponent({ |
|||
setup() { |
|||
const chartRef = ref<HTMLDivElement | null>(null); |
|||
const { setOptions } = useApexCharts(chartRef as Ref<HTMLDivElement>); |
|||
|
|||
onMounted(() => { |
|||
setOptions({ |
|||
series: [ |
|||
{ |
|||
name: 'Income', |
|||
type: 'column', |
|||
data: [1.4, 2, 2.5, 1.5, 2.5, 2.8, 3.8, 4.6], |
|||
}, |
|||
{ |
|||
name: 'Cashflow', |
|||
type: 'column', |
|||
data: [1.1, 3, 3.1, 4, 4.1, 4.9, 6.5, 8.5], |
|||
}, |
|||
{ |
|||
name: 'Revenue', |
|||
type: 'line', |
|||
data: [20, 29, 37, 36, 44, 45, 50, 58], |
|||
}, |
|||
], |
|||
chart: { |
|||
height: 350, |
|||
type: 'line', |
|||
stacked: false, |
|||
}, |
|||
dataLabels: { |
|||
enabled: false, |
|||
}, |
|||
stroke: { |
|||
width: [1, 1, 4], |
|||
}, |
|||
title: { |
|||
text: 'XYZ - Stock Analysis (2009 - 2016)', |
|||
align: 'left', |
|||
offsetX: 110, |
|||
}, |
|||
xaxis: { |
|||
categories: [2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016], |
|||
}, |
|||
yaxis: [ |
|||
{ |
|||
axisTicks: { |
|||
show: true, |
|||
}, |
|||
axisBorder: { |
|||
show: true, |
|||
color: '#008FFB', |
|||
}, |
|||
labels: { |
|||
style: { |
|||
colors: '#008FFB', |
|||
}, |
|||
}, |
|||
title: { |
|||
text: 'Income (thousand crores)', |
|||
style: { |
|||
color: '#008FFB', |
|||
}, |
|||
}, |
|||
tooltip: { |
|||
enabled: true, |
|||
}, |
|||
}, |
|||
{ |
|||
seriesName: 'Income', |
|||
opposite: true, |
|||
axisTicks: { |
|||
show: true, |
|||
}, |
|||
axisBorder: { |
|||
show: true, |
|||
color: '#00E396', |
|||
}, |
|||
labels: { |
|||
style: { |
|||
colors: '#00E396', |
|||
}, |
|||
}, |
|||
title: { |
|||
text: 'Operating Cashflow (thousand crores)', |
|||
style: { |
|||
color: '#00E396', |
|||
}, |
|||
}, |
|||
}, |
|||
{ |
|||
seriesName: 'Revenue', |
|||
opposite: true, |
|||
axisTicks: { |
|||
show: true, |
|||
}, |
|||
axisBorder: { |
|||
show: true, |
|||
color: '#FEB019', |
|||
}, |
|||
labels: { |
|||
style: { |
|||
colors: '#FEB019', |
|||
}, |
|||
}, |
|||
title: { |
|||
text: 'Revenue (thousand crores)', |
|||
style: { |
|||
color: '#FEB019', |
|||
}, |
|||
}, |
|||
}, |
|||
], |
|||
tooltip: { |
|||
fixed: { |
|||
enabled: true, |
|||
position: 'topLeft', // topRight, topLeft, bottomRight, bottomLeft |
|||
offsetY: 30, |
|||
offsetX: 60, |
|||
}, |
|||
}, |
|||
legend: { |
|||
horizontalAlign: 'left', |
|||
offsetX: 40, |
|||
}, |
|||
}); |
|||
}); |
|||
return { chartRef }; |
|||
}, |
|||
}); |
|||
</script> |
|||
@ -1,61 +0,0 @@ |
|||
<template> |
|||
<div ref="chartRef" :style="{ width: '100%' }"></div> |
|||
</template> |
|||
<script lang="ts"> |
|||
import { defineComponent, Ref, ref, onMounted } from 'vue'; |
|||
|
|||
import { useApexCharts } from '/@/hooks/web/useApexCharts'; |
|||
|
|||
export default defineComponent({ |
|||
setup() { |
|||
const chartRef = ref<HTMLDivElement | null>(null); |
|||
const { setOptions } = useApexCharts(chartRef as Ref<HTMLDivElement>); |
|||
onMounted(() => { |
|||
setOptions({ |
|||
series: [ |
|||
{ name: 'Visits', data: [90, 50, 86, 40, 100, 20] }, |
|||
{ name: 'Sales', data: [70, 75, 70, 76, 20, 85] }, |
|||
], |
|||
chart: { |
|||
height: 350, |
|||
type: 'radar', |
|||
toolbar: { |
|||
show: false, |
|||
}, |
|||
}, |
|||
yaxis: { |
|||
show: false, |
|||
}, |
|||
|
|||
title: { |
|||
show: false, |
|||
}, |
|||
markers: { |
|||
// size: 0, |
|||
}, |
|||
xaxis: { |
|||
categories: ['2016', '2017', '2018', '2019', '2020', '2021'], |
|||
}, |
|||
stroke: { |
|||
width: 0, |
|||
}, |
|||
colors: ['#9f8ed7', '#1edec5'], |
|||
|
|||
fill: { |
|||
type: 'gradient', |
|||
gradient: { |
|||
shade: 'dark', |
|||
gradientToColors: ['#8e9ad6', '#1fcadb'], |
|||
shadeIntensity: 1, |
|||
type: 'horizontal', |
|||
opacityFrom: 1, |
|||
opacityTo: 1, |
|||
stops: [0, 100, 100, 100], |
|||
}, |
|||
}, |
|||
}); |
|||
}); |
|||
return { chartRef }; |
|||
}, |
|||
}); |
|||
</script> |
|||
@ -1,46 +0,0 @@ |
|||
<template> |
|||
<div class="apex-demo p-4"> |
|||
<div class="demo-box"> |
|||
<Line /> |
|||
</div> |
|||
<div class="demo-box"> |
|||
<Bar /> |
|||
</div> |
|||
<div class="demo-box"> |
|||
<Area /> |
|||
</div> |
|||
<div class="demo-box"> |
|||
<Mixed /> |
|||
</div> |
|||
<div class="demo-box"> |
|||
<SaleRadar /> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import { defineComponent } from 'vue'; |
|||
|
|||
import Line from './Line.vue'; |
|||
import Bar from './Bar.vue'; |
|||
import Area from './Area.vue'; |
|||
import Mixed from './Mixed.vue'; |
|||
import SaleRadar from './SaleRadar.vue'; |
|||
export default defineComponent({ |
|||
components: { Line, Bar, Area, Mixed, SaleRadar }, |
|||
setup() {}, |
|||
}); |
|||
</script> |
|||
<style lang="less" scoped> |
|||
.apex-demo { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
justify-content: space-between; |
|||
|
|||
.demo-box { |
|||
width: 49%; |
|||
margin-bottom: 20px; |
|||
background: #fff; |
|||
border-radius: 10px; |
|||
} |
|||
} |
|||
</style> |
|||
Some files were not shown because too many files changed in this diff
Loading…
Reference in new issue