Merge branch 'master' of https://github.com/snowords/vue-element-plus-admin
This commit is contained in:
commit
88552f39e9
|
@ -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)
|
||||
|
||||
|
||||
|
|
14
package.json
14
package.json
|
@ -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": {
|
||||
|
|
473
pnpm-lock.yaml
473
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
|
@ -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)
|
||||
}
|
||||
|
|
|
@ -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"
|
||||
>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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="/"
|
||||
>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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' ? (
|
||||
|
|
|
@ -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)]':
|
||||
|
|
|
@ -1 +1,2 @@
|
|||
@import './var.css';
|
||||
@import 'element-plus/theme-chalk/dark/css-vars.css';
|
|
@ -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));
|
||||
// }
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -64,6 +64,11 @@ export default defineConfig({
|
|||
backgroundColor: 'var(--top-header-hover-color)'
|
||||
}
|
||||
},
|
||||
'.dark .hover-tigger': {
|
||||
'&:hover': {
|
||||
backgroundColor: 'var(--el-bg-color-overlay)'
|
||||
}
|
||||
},
|
||||
...obj
|
||||
})
|
||||
})
|
||||
|
|
Loading…
Reference in New Issue