update 重写管理端默认效果

admin-ui/.env

@@ -1,6 +1,6 @@
 # 页面标题
-VITE_APP_TITLE = 某某系统
+VITE_APP_TITLE = 管理中心
 
 VITE_APP_COPY = Copyright © 2023 xxx.xxx.cn All Rights Reserved.
 
-VITE_APP_COLOR = #257fbd
+VITE_APP_COLOR = "#fd4772"

admin-ui/src/assets/css/login.scss

@@ -11,7 +11,7 @@ body {
   --left-img: url(../images/login.png);
 
 
-  background-color: var(--bg);
+  background-image: linear-gradient(-25deg, #FFF0 30%, #FFF2 50%, #FFF0 70%), linear-gradient(to top, var(--bg),var(--bg));
   width: 100%;
   height: 100%;
   font-size: var(--size);
@@ -19,6 +19,17 @@ body {
   justify-content: center;
   align-items: center;
   overflow: hidden;
+  position: relative;
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background-image: radial-gradient(circle, #0001 .1em, #0000 1em,#0000 100%);
+    background-size: 2em 2em;
+    filter: url(#WEffectNoiseBgFilter);
+    transform: scale(2);
+  }
 
   &>.w-login-outer {
     position: relative;
@@ -34,13 +45,24 @@ body {
     box-shadow: 0 0 1em #0003;
 
     &> :first-child {
-      background-image: var(--left-img), linear-gradient(to bottom,var(--el-color-primary-light-9) 15%, var(--el-color-primary-light-8) 50%, var(--el-color-primary-light-3));
+
-      background-size: 70% auto, 100% 100%;
-      background-position: center center;
-      background-repeat: no-repeat;
       position: relative;
       box-shadow: -.3em 0 .6em #0001 inset;
+      background-image: radial-gradient(circle, #FFFFFF16 1px, #FFF0 1px,#FFF0 100%) ,linear-gradient(to bottom, var(--el-color-primary-light-9) 15%, var(--el-color-primary-light-8) 50%, var(--el-color-primary-light-3));
+      background-size: 5px 5px, auto;
       overflow: hidden;
+      opacity: .85;
+
+      &::after {
+        position: absolute;
+        inset: 0;
+        content:'';
+        background-image: var(--left-img);
+        background-size: 70% auto;
+        background-position: center;
+        background-repeat: no-repeat;
+        z-index: 2;
+      }
 
       &::before {
         position: absolute;
@@ -49,12 +71,21 @@ body {
         top: calc(50% - 2em);
         box-shadow: -.3em .3em .6em #0001;
         transform: scaleX(.8) rotate(45deg);
-
+        z-index: 3;
         width: 4em;
         height: 4em;
         content: '';
       }
 
+      &>div {
+        position: absolute;
+        inset: 0;
+        z-index: 1;
+        background-color: #0000;
+        background-image: radial-gradient(circle, #FFFFFF16 1px, #FFF0 1px,#FFF0 100%);
+        background-size: 5px 5px;
+      }
+
     }
 
     .w-login-form {

admin-ui/src/assets/styles/sidebar.scss

@@ -24,9 +24,51 @@
     left: 0;
     z-index: 1001;
     overflow: hidden;
+    text-shadow: .1em .1em 0 #000;
+
+    li {
+      position: relative;
+
+      &::before {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        background-color: #0003;
+        width: 100%;
+        height: 0;
+      }
+    }
+
+    &.theme-light {
+      text-shadow: .1em .1em 0 #FFF;
+
+      li {
+
+        &::before {
+          background-color: #FFF5;
+        }
+      }
+    }
+
     // -webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35);
     // box-shadow: 2px 0 6px rgba(0,21,41,.35);
 
+    &::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      // background-color: red;
+      background-image: radial-gradient(circle, var(--noise-color, #FFFFFF06) .5rem, #0000 1rem, #0000 100%);
+      background-size: 2rem 2rem;
+      filter: url(#WEffectNoiseBgFilter);
+      transform: scale(2);
+    }
+
+    &.theme-light::before {
+      --noise-color: #00000006;
+    }
+
     // reset element-ui css
     .horizontal-collapse-transition {
       transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
@@ -70,7 +112,8 @@
       width: 100% !important;
     }
 
-    .el-menu-item, .menu-title {
+    .el-menu-item,
+    .menu-title {
       overflow: hidden !important;
       text-overflow: ellipsis !important;
       white-space: nowrap !important;
@@ -90,8 +133,13 @@
 
     & .theme-dark .is-active>.el-sub-menu__title {
       color: $base-menu-color-active !important;
+
     }
 
+    // .el-menu-item.is-active {
+    //   --el-menu-active-color: #FFF;
+    // }
+
     & .nest-menu .el-sub-menu>.el-sub-menu__title,
     & .el-sub-menu .el-menu-item {
       min-width: $base-sidebar-width !important;
@@ -147,6 +195,7 @@
     }
 
     .el-menu--collapse {
+
       .el-sub-menu {
         &>.el-sub-menu__title {
           &>span {
@@ -156,6 +205,7 @@
             visibility: hidden;
             display: inline-block;
           }
+
           &>i {
             height: 0;
             width: 0;
@@ -222,6 +272,7 @@
     max-height: 100vh;
     overflow-y: auto;
 
+
     &::-webkit-scrollbar-track-piece {
       background: #d3dce6;
     }
@@ -235,4 +286,7 @@
       border-radius: 20px;
     }
   }
+
+
+
 }

admin-ui/src/assets/styles/variables.module.scss

@@ -9,17 +9,20 @@ $yellow: #FEC171;
 $panGreen: #30B08F;
 
 // 默认菜单主题风格
-$base-menu-color: #bfcbd9;
+$base-menu-color: #FFFC;
-$base-menu-color-active: #f4f4f5;
+$base-menu-color-active: #FFFE;
-$base-menu-background: hsl(210, 63%, 30%);
+// $base-menu-background: hsl(210, 63%, 30%);
-$base-logo-title-color: #ffffff;
+// $base-menu-background: #222;
+$base-menu-background: #0000;
+$base-logo-title-color: #FFFE;
 
-$base-menu-light-color: rgba(0, 0, 0, 0.7);
+$base-menu-light-color: #0009;
-$base-menu-light-background: #ffffff;
+// $base-menu-light-background: #F1F1F1;
-$base-logo-light-title-color: #001529;
+$base-menu-light-background: #0000;
+$base-logo-light-title-color: #000C;
 
-$base-sub-menu-background: hsl(210, 63%, 25%);
+$base-sub-menu-background: #0006;
-$base-sub-menu-hover: hsl(210, 63%, 20%);
+$base-sub-menu-hover: #0001;
 
 // 自定义暗色菜单风格
 /**

admin-ui/src/layout/components/Sidebar/index.vue

@@ -1,15 +1,26 @@
 <template>
-  <div style="box-shadow: 0 0 .5rem #0001;" :class="{ 'has-logo': showLogo }" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
+  <div style="box-shadow: 0 0 .5rem #0001;" :class="[showLogo?'has-logo':'no-logo',sideTheme]" :style="{ backgroundColor: sideTheme === 'theme-dark' ? 'var(--admin-menu-bg-dark,hsl(206, 97%, 12%))' : 'var(--admin-menu-bg-light,hsl(206, 97%, 96%))' }">
+    <svg style="display: none;">
+      <defs>
+        <filter id="WEffectNoiseBgFilter" color-interpolation-filters="linearRGB" filterUnits="objectBoundingBox"
+          primitiveUnits="userSpaceOnUse">
+          <feTurbulence type="turbulence" baseFrequency="1 1" numOctaves="100" seed="100" stitchTiles="stitch"
+            x="-100%" y="-100%" width="300%" height="300%" result="turbulence" />
+          <feDisplacementMap in="SourceGraphic" in2="turbulence" scale="200" xChannelSelector="R" yChannelSelector="A"
+            x="-100%" y="-100%" width="300%" height="300%" result="displacementMap" />
+        </filter>
+      </defs>
+    </svg>
     <logo v-if="showLogo" :collapse="isCollapse" />
     <el-scrollbar :class="sideTheme" wrap-class="scrollbar-wrapper">
       <el-menu
         :default-active="activeMenu"
         :collapse="isCollapse"
-        :background-color="sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground"
+        :background-color="sideTheme === 'theme-dark' && isCollapse?'var(--admin-menu-bg-dark,hsl(206, 97%, 12%))':'#0000'"
         :text-color="sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor"
         :unique-opened="true"
         :active-text-color="theme"
-        :collapse-transition="false"
+        :collapse-transition="true"
         mode="vertical"
       >
         <sidebar-item

admin-ui/src/settings.js

@@ -6,7 +6,7 @@ export default {
   /**
    * 侧边栏主题 深色主题theme-dark，浅色主题theme-light
    */
-  sideTheme: 'theme-light',
+  sideTheme: 'theme-dark',
   /**
    * 是否系统布局配置
    */

admin-ui/src/views/login.vue

@@ -1,8 +1,20 @@
 <template>
   <div class="w-login-content">
+    <svg style="display: none;">
+      <defs>
+        <filter id="WEffectNoiseBgFilter" color-interpolation-filters="linearRGB" filterUnits="objectBoundingBox"
+          primitiveUnits="userSpaceOnUse">
+          <feTurbulence type="turbulence" baseFrequency=".1 .1" numOctaves="100" seed="100" stitchTiles="stitch"
+            x="-100%" y="-100%" width="300%" height="300%" result="turbulence" />
+          <feDisplacementMap in="SourceGraphic" in2="turbulence" scale="200" xChannelSelector="R" yChannelSelector="A"
+            x="-100%" y="-100%" width="300%" height="300%" result="displacementMap" />
+        </filter>
+      </defs>
+    </svg>
 
     <div class="w-login-outer">
-      <div></div>
+      <div>
+      </div>
       <div class="w-login-form">
         <div>你好!<br />欢迎登录{{ title }}</div>
         <div><input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号" /></div>
@@ -22,10 +34,10 @@
           <span v-if="!loading">登 录</span>
           <span v-else>登 录 中...</span>
         </el-button>
-        <div style="text-align: right; position: absolute; top: 0; right: 1rem;"><el-link :underline="false" type="primary" href="/bi/">展示大屏</el-link></div>
         <div class="copy">{{ copy }} </div>
       </div>
     </div>
+
   </div>
 </template>
 
@@ -44,6 +56,7 @@ import { ElMessage, ElMessageBox } from "element-plus";
 const title = import.meta.env.VITE_APP_TITLE;
 const copy = import.meta.env.VITE_APP_COPY;
 const color = import.meta.env.VITE_APP_COLOR;
+console.debug("login", title, copy, color);
 
 onMounted(() => {
   useSettingsStore().title = "登录"

admin-ui/vite.config.mjs

@@ -49,7 +49,7 @@ export default defineConfig(({ mode, command }) => {
           changeOrigin: true
         },
         '/files': {
-          target: 'http://192.168.3.222:9000',
+          target: 'http://192.168.3.56:9000',
           changeOrigin: true
         }
       }