Merge branch 'master' of https://github.com/snowords/vue-element-plus-admin

CHANGELOG.md

@@ -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)
 
 

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/eslint-plugin": "^5.23.0",
-    "@typescript-eslint/parser": "^5.22.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": {

src/App.vue

@@ -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)
 }

src/components/Descriptions/src/Descriptions.vue

@@ -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"
     >

src/components/Dialog/src/Dialog.vue

@@ -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>

src/components/Footer/src/Footer.vue

@@ -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>

src/components/Form/src/Form.vue

@@ -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>

src/components/Logo/src/Logo.vue

@@ -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="/"
   >

src/components/Search/src/Search.vue

@@ -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>

src/components/Setting/src/Setting.vue

@@ -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 {

src/components/TagsView/src/TagsView.vue

@@ -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>

src/layout/components/AppView.vue

@@ -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,

src/layout/components/ToolHeader.vue

@@ -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' ? (

src/layout/components/useRenderLayout.tsx

@@ -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)]':

src/styles/index.less

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

src/styles/theme.less

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

src/views/Login/components/LoginForm.vue

@@ -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>

windi.config.ts

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