This commit is contained in:
Snoword 2022-05-12 09:06:45 +08:00
commit 88552f39e9
19 changed files with 373 additions and 284 deletions

View File

@ -2,6 +2,13 @@
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
## [1.4.0](https://github.com/kailong321200875/vue-element-plus-admin/compare/v1.3.2...v1.4.0) (2022-05-10)
### Features
* add dark mode ([0758a6a](https://github.com/kailong321200875/vue-element-plus-admin/commit/0758a6a9d83170e53d45d39c3313e52ff5885746))
### [1.3.2](https://github.com/kailong321200875/vue-element-plus-admin/compare/v1.3.1...v1.3.2) (2022-05-07)

View File

@ -1,6 +1,6 @@
{
"name": "vue-element-plus-admin",
"version": "1.3.2",
"version": "1.4.0",
"description": "一套基于vue3、element-plus、typesScript、vite2的后台集成方案。",
"author": "Archer <502431556@qq.com>",
"private": false,
@ -35,7 +35,7 @@
"axios": "^0.27.2",
"echarts": "^5.3.2",
"echarts-wordcloud": "^2.0.0",
"element-plus": "2.1.11",
"element-plus": "2.2.0",
"intro.js": "^5.1.0",
"lodash-es": "^4.17.21",
"mitt": "^3.0.0",
@ -55,7 +55,7 @@
"devDependencies": {
"@commitlint/cli": "^16.2.4",
"@commitlint/config-conventional": "^16.2.4",
"@iconify/json": "^2.1.38",
"@iconify/json": "^2.1.39",
"@intlify/vite-plugin-vue-i18n": "^3.4.0",
"@purge-icons/generated": "^0.8.1",
"@types/intro.js": "^3.0.2",
@ -64,8 +64,8 @@
"@types/nprogress": "^0.2.0",
"@types/qrcode": "^1.4.2",
"@types/qs": "^6.9.7",
"@typescript-eslint/eslint-plugin": "^5.22.0",
"@typescript-eslint/parser": "^5.22.0",
"@typescript-eslint/eslint-plugin": "^5.23.0",
"@typescript-eslint/parser": "^5.23.0",
"@vitejs/plugin-vue": "^2.3.2",
"@vitejs/plugin-vue-jsx": "^1.3.10",
"autoprefixer": "^10.4.7",
@ -74,7 +74,7 @@
"eslint-define-config": "^1.4.0",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-vue": "^8.7.1",
"husky": "^7.0.4",
"husky": "^8.0.1",
"less": "^4.1.2",
"lint-staged": "^12.4.1",
"plop": "^3.1.0",
@ -100,7 +100,7 @@
"vite-plugin-svg-icons": "^2.0.1",
"vite-plugin-windicss": "^1.8.4",
"vue-tsc": "^0.34.11",
"windicss": "^3.5.1",
"windicss": "^3.5.2",
"windicss-analysis": "^0.3.5"
},
"engines": {

File diff suppressed because it is too large Load Diff

View File

@ -4,6 +4,7 @@ import { useAppStore } from '@/store/modules/app'
import { ConfigGlobal } from '@/components/ConfigGlobal'
import { isDark } from '@/utils/is'
import { useDesign } from '@/hooks/web/useDesign'
import { useCache } from '@/hooks/web/useCache'
const { getPrefixCls } = useDesign()
@ -15,8 +16,14 @@ const currentSize = computed(() => appStore.getCurrentSize)
const greyMode = computed(() => appStore.getGreyMode)
const { wsCache } = useCache()
//
const setDefaultTheme = () => {
if (wsCache.get('isDark')) {
appStore.setIsDark(wsCache.get('isDark'))
return
}
const isDarkTheme = isDark()
appStore.setIsDark(isDarkTheme)
}

View File

@ -62,12 +62,17 @@ const toggleClick = () => {
</script>
<template>
<div :class="[prefixCls, 'bg-[var(--el-color-white)]']">
<div
:class="[
prefixCls,
'bg-[var(--el-color-white)] dark:(bg-[var(--el-bg-color)] border-[var(--el-border-color)] border-1px)'
]"
>
<div
v-if="title"
:class="[
`${prefixCls}-header`,
'h-50px flex justify-between items-center mb-10px border-bottom-1 border-solid border-[var(--tags-view-border-color)] px-10px cursor-pointer'
'h-50px flex justify-between items-center mb-10px border-bottom-1 border-solid border-[var(--tags-view-border-color)] px-10px cursor-pointer dark:border-[var(--el-border-color)]'
]"
@click="toggleClick"
>

View File

@ -40,7 +40,6 @@ watch(
if (val) {
const windowHeight = document.documentElement.offsetHeight
dialogHeight.value = `${windowHeight - 55 - 60 - (slots.footer ? 63 : 0)}px`
console.log(windowHeight)
} else {
dialogHeight.value = isNumber(props.maxHeight) ? `${props.maxHeight}px` : props.maxHeight
}
@ -73,7 +72,7 @@ const dialogStyle = computed(() => {
</slot>
<Icon
v-if="fullscreen"
class="mr-11px cursor-pointer is-hover mt-2px"
class="mr-18px cursor-pointer is-hover mt-2px"
:icon="isFullscreen ? 'zmdi:fullscreen-exit' : 'zmdi:fullscreen'"
color="var(--el-color-info)"
@click="toggleFull"
@ -94,6 +93,7 @@ const dialogStyle = computed(() => {
<style lang="less">
.@{elNamespace}-dialog__header {
border-bottom: 1px solid var(--tags-view-border-color);
margin-right: 0 !important;
}
.@{elNamespace}-dialog__footer {
@ -105,4 +105,14 @@ const dialogStyle = computed(() => {
color: var(--el-color-primary) !important;
}
}
.dark {
.@{elNamespace}-dialog__header {
border-bottom: 1px solid var(--el-border-color);
}
.@{elNamespace}-dialog__footer {
border-top: 1px solid var(--el-border-color);
}
}
</style>

View File

@ -15,7 +15,7 @@ const title = computed(() => appStore.getTitle)
<template>
<div
:class="prefixCls"
class="text-center text-[var(--el-text-color-placeholder)] bg-[var(--app-contnet-bg-color)] h-[var(--app-footer-height)] leading-[var(--app-footer-height)]"
class="text-center text-[var(--el-text-color-placeholder)] bg-[var(--app-contnet-bg-color)] h-[var(--app-footer-height)] leading-[var(--app-footer-height)] dark:bg-[var(--el-bg-color)]"
>
Copyright ©2021-present {{ title }}
</div>

View File

@ -290,3 +290,10 @@ export default defineComponent({
}
})
</script>
<style lang="less" scoped>
.@{elNamespace}-form.@{namespace}-form .@{elNamespace}-row {
margin-left: 0 !important;
margin-right: 0 !important;
}
</style>

View File

@ -59,7 +59,8 @@ watch(
:class="[
prefixCls,
layout !== 'classic' ? `${prefixCls}__Top` : '',
'flex !h-[var(--logo-height)] items-center cursor-pointer pl-8px relative'
'flex !h-[var(--logo-height)] items-center cursor-pointer pl-8px relative',
'dark:bg-[var(--el-bg-color)]'
]"
to="/"
>

View File

@ -111,7 +111,7 @@ const setVisible = () => {
<Icon icon="ep:refresh-right" class="mr-5px" />
{{ t('common.reset') }}
</ElButton>
<ElButton v-if="expand" type="text" @click="setVisible">
<ElButton v-if="expand" text @click="setVisible">
{{ t(visible ? 'common.shrink' : 'common.expand') }}
<Icon :icon="visible ? 'ant-design:up-outlined' : 'ant-design:down-outlined'" />
</ElButton>
@ -129,7 +129,7 @@ const setVisible = () => {
<Icon icon="ep:refresh-right" class="mr-5px" />
{{ t('common.reset') }}
</ElButton>
<ElButton v-if="expand" type="text" @click="setVisible">
<ElButton v-if="expand" text @click="setVisible">
{{ t(visible ? 'common.shrink' : 'common.expand') }}
<Icon :icon="visible ? 'ant-design:up-outlined' : 'ant-design:down-outlined'" />
</ElButton>

View File

@ -92,7 +92,7 @@ const setMenuTheme = (color: string) => {
appStore.setTheme(theme)
appStore.setCssVarTheme()
}
if (layout.value === 'top') {
if (layout.value === 'top' && !appStore.getIsDark) {
headerTheme.value = '#fff'
setHeaderTheme('#fff')
}
@ -101,7 +101,7 @@ if (layout.value === 'top') {
watch(
() => layout.value,
(n) => {
if (n === 'top') {
if (n === 'top' && !appStore.getIsDark) {
headerTheme.value = '#fff'
setHeaderTheme('#fff')
} else {

View File

@ -258,18 +258,24 @@ watch(
</script>
<template>
<div :id="prefixCls" :class="prefixCls" class="h-[var(--tags-view-height)] flex w-full relative">
<div
:id="prefixCls"
:class="prefixCls"
class="flex w-full relative bg-[#fff] dark:bg-[var(--el-bg-color)]"
>
<span
:class="`${prefixCls}__tool`"
class="w-[var(--tags-view-height)] h-[var(--tags-view-height)] text-center leading-[var(--tags-view-height)] cursor-pointer"
@click="move(-200)"
>
<Icon icon="ep:d-arrow-left" color="#333" />
<Icon
icon="ep:d-arrow-left"
:color="appStore.getIsDark ? 'var(--el-text-color-regular)' : '#333'"
/>
</span>
<div class="overflow-hidden flex-1">
<ElScrollbar ref="scrollbarRef" class="h-full" @scroll="scroll">
<div class="flex h-full">
<div></div>
<ContextMenu
:ref="itemRefs.set"
:schema="[
@ -376,14 +382,20 @@ watch(
class="w-[var(--tags-view-height)] h-[var(--tags-view-height)] text-center leading-[var(--tags-view-height)] cursor-pointer"
@click="move(200)"
>
<Icon icon="ep:d-arrow-right" color="#333" />
<Icon
icon="ep:d-arrow-right"
:color="appStore.getIsDark ? 'var(--el-text-color-regular)' : '#333'"
/>
</span>
<span
:class="`${prefixCls}__tool`"
class="w-[var(--tags-view-height)] h-[var(--tags-view-height)] text-center leading-[var(--tags-view-height)] cursor-pointer"
@click="refreshSelectedTag(selectedTag)"
>
<Icon icon="ant-design:reload-outlined" color="#333" />
<Icon
icon="ant-design:reload-outlined"
:color="appStore.getIsDark ? 'var(--el-text-color-regular)' : '#333'"
/>
</span>
<ContextMenu
trigger="click"
@ -440,7 +452,10 @@ watch(
:class="`${prefixCls}__tool`"
class="w-[var(--tags-view-height)] h-[var(--tags-view-height)] text-center leading-[var(--tags-view-height)] cursor-pointer block"
>
<Icon icon="ant-design:setting-outlined" color="#333" />
<Icon
icon="ant-design:setting-outlined"
:color="appStore.getIsDark ? 'var(--el-text-color-regular)' : '#333'"
/>
</span>
</ContextMenu>
</div>
@ -450,7 +465,6 @@ watch(
@prefix-cls: ~'@{namespace}-tags-view';
.@{prefix-cls} {
background-color: #fff;
:deep(.@{elNamespace}-scrollbar__view) {
height: 100%;
}
@ -519,4 +533,47 @@ watch(
}
}
}
.dark {
.@{prefix-cls} {
&__tool {
&:hover {
:deep(span) {
color: #fff !important;
}
}
&:after {
border-right: 1px solid var(--el-border-color);
border-left: 1px solid var(--el-border-color);
}
}
&__item {
position: relative;
top: 2px;
height: calc(~'100% - 4px');
padding-right: 25px;
font-size: 12px;
cursor: pointer;
border: 1px solid var(--el-border-color);
}
&__item:not(.is-active) {
&:hover {
color: var(--el-color-primary);
}
}
&__item.is-active {
color: var(--el-color-white);
background-color: var(--el-color-primary);
.@{prefix-cls}__item--close {
:deep(span) {
color: var(--el-color-white) !important;
}
}
}
}
}
</style>

View File

@ -22,7 +22,7 @@ const getCaches = computed((): string[] => {
<template>
<section
:class="[
'p-[var(--app-content-padding)] w-[100%] bg-[var(--app-contnet-bg-color)]',
'p-[var(--app-content-padding)] w-[100%] bg-[var(--app-contnet-bg-color)] dark:bg-[var(--el-bg-color)]',
{
'!min-h-[calc(100%-var(--app-footer-height))]':
fixedHeader && (layout === 'classic' || layout === 'topLeft') && footer,

View File

@ -41,7 +41,8 @@ export default defineComponent({
id={`${variables.namespace}-tool-header`}
class={[
prefixCls,
'h-[var(--top-tool-height)] relative px-[var(--top-tool-p-x)] flex items-center justify-between'
'h-[var(--top-tool-height)] relative px-[var(--top-tool-p-x)] flex items-center justify-between',
'dark:(bg-[var(--el-bg-color)] border-[--el-border-color])'
]}
>
{layout.value !== 'top' ? (

View File

@ -40,7 +40,7 @@ export const useRenderLayout = () => {
{logo.value ? (
<Logo
class={[
'bg-[var(--left-menu-bg-color)] border-bottom-1 border-solid border-[var(--logo-border-color)]',
'bg-[var(--left-menu-bg-color)] border-bottom-1 border-solid border-[var(--logo-border-color)] dark:border-[var(--el-border-color)]',
{
'!pl-0': mobile.value && collapse.value,
'w-[var(--left-menu-min-width)]': appStore.getCollapse,
@ -89,10 +89,10 @@ export const useRenderLayout = () => {
]}
style="transition: all var(--transition-time-02);"
>
<ToolHeader class="border-bottom-1 border-solid border-[var(--top-tool-border-color)] bg-[var(--top-header-bg-color)]"></ToolHeader>
<ToolHeader class="border-bottom-1 border-solid border-[var(--top-tool-border-color)] bg-[var(--top-header-bg-color)] dark:border-[var(--el-border-color)]"></ToolHeader>
{tagsView.value ? (
<TagsView class="border-bottom-1 border-top-1 border-solid border-[var(--tags-view-border-color)]"></TagsView>
<TagsView class="border-bottom-1 border-top-1 border-solid border-[var(--tags-view-border-color)] dark:border-[var(--el-border-color)]"></TagsView>
) : undefined}
</div>
@ -106,7 +106,7 @@ export const useRenderLayout = () => {
const renderTopLeft = () => {
return (
<>
<div class="flex items-center bg-[var(--top-header-bg-color)] border-bottom-1 border-solid border-[var(--top-tool-border-color)]">
<div class="flex items-center bg-[var(--top-header-bg-color)] border-bottom-1 border-solid border-[var(--top-tool-border-color)] dark:border-[var(--el-border-color)]">
{logo.value ? <Logo class="hover-tigger !pr-15px"></Logo> : undefined}
<ToolHeader class="flex-1"></ToolHeader>
@ -139,7 +139,7 @@ export const useRenderLayout = () => {
{tagsView.value ? (
<TagsView
class={[
'border-bottom-1 border-top-1 border-solid border-[var(--tags-view-border-color)]',
'border-bottom-1 border-top-1 border-solid border-[var(--tags-view-border-color)] dark:border-[var(--el-border-color)]',
{
'!fixed top-0 left-0 z-10': fixedHeader.value,
'w-[calc(100%-var(--left-menu-min-width))] left-[var(--left-menu-min-width)] mt-[var(--logo-height)]':
@ -163,7 +163,7 @@ export const useRenderLayout = () => {
const renderTop = () => {
return (
<>
<div class="flex items-center justify-between bg-[var(--top-header-bg-color)] border-bottom-1 border-solid border-[var(--top-tool-border-color)]">
<div class="flex items-center justify-between bg-[var(--top-header-bg-color)] border-bottom-1 border-solid border-[var(--top-tool-border-color)] dark:border-[var(--el-border-color)]">
{logo.value ? <Logo class="hover-tigger"></Logo> : undefined}
<Menu class="flex-1 px-10px h-[var(--top-tool-height)]"></Menu>
<ToolHeader></ToolHeader>
@ -181,7 +181,7 @@ export const useRenderLayout = () => {
{tagsView.value ? (
<TagsView
class={[
'border-bottom-1 border-top-1 border-solid border-[var(--tags-view-border-color)]',
'border-bottom-1 border-top-1 border-solid border-[var(--tags-view-border-color)] dark:border-[var(--el-border-color)]',
{
'!fixed w-full top-[var(--top-tool-height)] left-0': fixedHeader.value
}
@ -200,7 +200,7 @@ export const useRenderLayout = () => {
const renderCutMenu = () => {
return (
<>
<div class="flex items-center bg-[var(--top-header-bg-color)] border-bottom-1 border-solid border-[var(--top-tool-border-color)]">
<div class="flex items-center bg-[var(--top-header-bg-color)] border-bottom-1 border-solid border-[var(--top-tool-border-color)] dark:border-[var(--el-border-color)]">
{logo.value ? <Logo class="hover-tigger !pr-15px"></Logo> : undefined}
<ToolHeader class="flex-1"></ToolHeader>
@ -233,7 +233,7 @@ export const useRenderLayout = () => {
{tagsView.value ? (
<TagsView
class={[
'border-bottom-1 border-top-1 border-solid border-[var(--tags-view-border-color)]',
'border-bottom-1 border-top-1 border-solid border-[var(--tags-view-border-color)] dark:border-[var(--el-border-color)]',
{
'!fixed top-0 left-0 z-10': fixedHeader.value,
'w-[calc(100%-var(--tab-menu-min-width))] left-[var(--tab-menu-min-width)] mt-[var(--logo-height)]':

View File

@ -1 +1,2 @@
@import './var.css';
@import 'element-plus/theme-chalk/dark/css-vars.css';

View File

@ -1,6 +1,6 @@
.text-color {
color: var(--el-text-color-regular);
}
.dark .dark\:text-color {
color: rgba(255, 255, 255, var(--dark-text-color));
}
// .text-color {
// color: var(--el-text-color-regular);
// }
// .dark .dark\:text-color {
// color: rgba(255, 255, 255, var(--dark-text-color));
// }

View File

@ -171,6 +171,7 @@ const getRole = async () => {
label-position="top"
hide-required-asterisk
size="large"
class="dark:(border-1 border-[var(--el-border-color)] border-solid)"
@register="register"
>
<template #title>

View File

@ -64,6 +64,11 @@ export default defineConfig({
backgroundColor: 'var(--top-header-hover-color)'
}
},
'.dark .hover-tigger': {
'&:hover': {
backgroundColor: 'var(--el-bg-color-overlay)'
}
},
...obj
})
})