fix: 🐛 个性主题色冲突

2025-11-01 03:35:28 +08:00 · 2024-12-12 18:03:44 +08:00
parent 098cfc135e
commit 4e4a1d0dff
56 changed files with 316 additions and 485 deletions
--- a/src/backend/NetAdmin/NetAdmin.SysComponent.Application/NetAdmin.SysComponent.Application.csproj
+++ b/src/backend/NetAdmin/NetAdmin.SysComponent.Application/NetAdmin.SysComponent.Application.csproj
@@ -1,5 +1,8 @@
 <Project Sdk="Microsoft.NET.Sdk">
    <Import Project="$(SolutionDir)/build/code.quality.props"/>
+    <ItemGroup>
+        <EmbeddedResource Include="$(SolutionDir)/assets/captcha/**" LinkBase="Assets/Captcha"/>
+    </ItemGroup>
    <ItemGroup>
        <ProjectReference Include="../NetAdmin.Application/NetAdmin.Application.csproj"/>
    </ItemGroup>
--- a/src/backend/NetAdmin/NetAdmin.SysComponent.Application/Services/Sys/CaptchaService.cs
+++ b/src/backend/NetAdmin/NetAdmin.SysComponent.Application/Services/Sys/CaptchaService.cs
@@ -7,8 +7,8 @@ namespace NetAdmin.SysComponent.Application.Services.Sys;
 /// <inheritdoc cref="ICaptchaService" />
 public sealed class CaptchaService : ServiceBase<ICaptchaService>, ICaptchaService
 {
-    private static readonly Assembly _entryAsm     = Assembly.GetEntryAssembly();
-    private static readonly string   _entryAsmName = _entryAsm.FullName![.._entryAsm.FullName.IndexOf(',')];
+    private static readonly Assembly _currAsm     = Assembly.GetAssembly(typeof(CaptchaService));
+    private static readonly string   _currAsmName = _currAsm.FullName![.._currAsm.FullName.IndexOf(',')];

    /// <summary>
    ///     Initializes a new instance of the <see cref="CaptchaService" /> class.
@@ -19,8 +19,8 @@ public sealed class CaptchaService : ServiceBase<ICaptchaService>, ICaptchaServi
    public async Task<GetCaptchaRsp> GetCaptchaImageAsync()
    {
        var (backgroundImage, sliderImage, offsetSaw) = await CaptchaImageHelper.CreateSawSliderImageAsync(
-                                                                                    _entryAsm, $"{_entryAsmName}.Assets.Captcha.background"
-                                                                                  , $"{_entryAsmName}.Assets.Captcha.template", (1, 101), (1, 7)
+                                                                                    _currAsm, $"{_currAsmName}.Assets.Captcha.background"
+                                                                                  , $"{_currAsmName}.Assets.Captcha.template", (1, 101), (1, 7)
                                                                                  , new Size(50, 50))
                                                                                .ConfigureAwait(false);

--- a/src/backend/NetAdmin/NetAdmin.SysComponent.Host/NetAdmin.SysComponent.Host.csproj
+++ b/src/backend/NetAdmin/NetAdmin.SysComponent.Host/NetAdmin.SysComponent.Host.csproj
@@ -1,8 +1,5 @@
 <Project Sdk="Microsoft.NET.Sdk">
    <Import Project="$(SolutionDir)/build/code.quality.props"/>
-    <ItemGroup>
-        <EmbeddedResource Include="$(SolutionDir)/assets/captcha/**" LinkBase="Assets/Captcha"/>
-    </ItemGroup>
    <ItemGroup>
        <ProjectReference Include="../NetAdmin.Host/NetAdmin.Host.csproj"/>
        <ProjectReference Include="../NetAdmin.SysComponent.Cache/NetAdmin.SysComponent.Cache.csproj"/>
--- a/src/frontend/admin/.prettierrc
+++ b/src/frontend/admin/.prettierrc
@@ -2,7 +2,7 @@
    "attributeGroups": ["^v-", "$DEFAULT"],
    "attributeSort": "ASC",
    "bracketSameLine": true,
-    "endOfLine": "auto",
+    "endOfLine": "lf",
    "plugins": ["prettier-plugin-organize-attributes"],
    "printWidth": 150,
    "semi": false,
--- a/src/frontend/admin/index.html
+++ b/src/frontend/admin/index.html
@@ -30,7 +30,7 @@
                justify-content: center;
                align-items: center;
                flex-direction: column;
-                background: #fff;
+                background: white;
            }

            .app-loading__logo {
@@ -47,7 +47,7 @@
                width: 35px;
                height: 35px;
                border: 5px solid transparent;
-                border-top-color: #000;
+                border-top-color: black;
                border-radius: 50%;
                animation: 0.5s loader linear infinite;
                position: relative;
@@ -79,7 +79,7 @@
            }

            .dark .app-loading__loader {
-                border-top-color: #fff;
+                border-top-color: white;
            }

            .dark .app-loading__title {
@@ -103,7 +103,7 @@
        <div class="aminui" id="app">
            <div class="app-loading">
                <div class="app-loading__logo">
-                    <img alt="" src="/src/assets/img/logo.png" />
+                    <img alt="" src="/src/assets/img/logo.svg" />
                </div>
                <div class="app-loading__loader"></div>
                <div class="app-loading__title">NetAdmin</div>
--- a/src/frontend/admin/public/favicon.ico
+++ b/src/frontend/admin/public/favicon.ico
--- a/src/frontend/admin/src/assets/img/404.png
+++ b/src/frontend/admin/src/assets/img/404.png
--- a/src/frontend/admin/src/assets/img/404.svg
+++ b/src/frontend/admin/src/assets/img/404.svg
@@ -0,0 +1,29 @@
+<svg t="1733995463464" class="icon" viewBox="0 0 1358 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12221" width="256" height="256">
+    <path d="M325.565072 415.978248c-93.950327 16.678484-160.353046 98.501438-149.450458 188.272105 5.809359 47.552418 29.347974 89.774013 89.90787 101.898039 160.657569 32.30285 767.123242 153.901176 886.275346-56.788497 92.896209-164.191373 37.533281-277.878797-48.740392-349.036758-86.273673-71.157961-264.934902-56.383582-412.789124-7.676653-109.94949 36.308497-191.705516 92.491294-365.203242 123.331764z" fill="#E6E6E6" opacity=".3" p-id="12222"></path>
+    <path d="M698.341229 875.165281c302.056575 0 546.919739-18.097359 546.919738-40.421229s-244.863163-40.417882-546.919738-40.417882-546.919739 18.094013-546.919739 40.417882c0 22.323869 244.863163 40.421229 546.919739 40.421229z" fill="#E6E6E6" opacity=".45" p-id="12223"></path>
+    <path d="M391.696732 273.558588c35.903582 0 65.010614-29.107033 65.010614-65.010614 0-35.906928-29.107033-65.010614-65.010614-65.010615-35.906928 0-65.010614 29.107033-65.010614 65.010615 0 35.906928 29.103686 65.010614 65.010614 65.010614z" fill="#FFD200" p-id="12224"></path>
+    <path d="M391.696732 332.488784c68.450719 0 123.94081-55.490092 123.94081-123.94081s-55.490092-123.944157-123.94081-123.944157S267.755922 140.097255 267.755922 208.547974s55.490092 123.94081 123.94081 123.94081z" fill="#FFD200" opacity=".15" p-id="12225"></path>
+    <path d="M664.683085 832.876758c95.988288 0 173.802248-77.813961 173.802248-173.802248 0-95.991634-77.813961-173.805595-173.802248-173.805595-95.991634 0-173.805595 77.813961-173.805595 173.805595 0 95.988288 77.813961 173.802248 173.805595 173.802248z" fill="#24285B" p-id="12226"></path>
+    <path d="M664.679739 768.478536c60.422693 0 109.404026-48.98468 109.404026-109.404026 0-60.422693-48.981333-109.407373-109.404026-109.407373-60.422693 0-109.404026 48.98468-109.404027 109.407373 0 60.419346 48.981333 109.404026 109.404027 109.404026z" fill="#FFFFFF" p-id="12227"></path>
+    <path d="M454.840052 700.54651c11.511634 0 15.65783 4.14285 15.65783 15.624366v19.80068c0 11.51498-3.396601 15.65783-15.65783 15.65783h-31.760732v60.292183c0 11.47817-4.14285 15.624366-15.65783 15.624366h-22.551425c-11.481516 0-15.624366-4.146196-15.624366-15.624366v-60.292183H217.382484c-11.47817 0-15.627712-4.14285-15.627713-15.65783v-16.574746a30.566065 30.566065 0 0 1 5.437909-18.8503l152.847059-189.634092a27.376941 27.376941 0 0 1 22.076235-11.036444h25.476183c11.51498 0 15.65783 3.225935 15.65783 15.65783v185.012706h31.590065z m-85.594353-123.365229l-99.896889 123.365229h99.896889v-123.365229zM1112.114196 700.54651c11.51498 0 15.65783 4.14285 15.65783 15.624366v19.80068c0 11.51498-3.225935 15.65783-15.65783 15.65783h-31.757386v60.292183c0 11.47817-4.14285 15.624366-15.65783 15.624366h-22.554771c-11.47817 0-15.624366-4.146196-15.624366-15.624366v-60.292183h-151.893333c-11.481516 0-15.624366-4.14285-15.624366-15.65783v-16.574746a30.545987 30.545987 0 0 1 5.50149-18.8503l152.847059-189.634092a27.417098 27.417098 0 0 1 22.076235-11.036444h25.305516c11.51498 0 15.65783 3.225935 15.657831 15.65783v185.012706h31.723921z m-85.594353-123.365229l-99.893542 123.365229h99.893542v-123.365229z" fill="#21A675" p-id="12228"></path>
+    <path d="M1043.944575 462.851346s-28.902902-7.880784-35.187451-34.816c0 0 44.801673-9.035294 46.090039 37.195295l-10.902588-2.379295z" fill="#21A675" opacity=".58" p-id="12229"></path>
+    <path d="M1047.511843 459.996863s-20.208941-31.961516-2.446222-61.818144c0 0 33.966013 21.637856 18.954039 61.888418l-16.507817-0.070274z" fill="#21A675" opacity=".73" p-id="12230"></path>
+    <path d="M1052.70881 460.030327s10.664993-33.761882 42.967844-40.146824c0 0 6.046954 21.908915-20.925072 40.217098l-22.042772-0.070274z" fill="#21A675" p-id="12231"></path>
+    <path d="M1031.750275 459.250614l5.842823 40.11336 36.920889 0.170667 5.434562-40.079896-48.198274-0.204131z" fill="#24285B" p-id="12232"></path>
+    <path d="M685.705203 430.856366s4.755242 22.926222 2.683817 38.821647a11.745882 11.745882 0 0 1-13.278536 10.189804c-7.984523-1.15451-18.445386-5.026301-22.487843-16.983007l-9.373282-19.52962a21.105778 21.105778 0 0 1 6.555608-23.438223c12.023634-11.073255 33.694954-3.021804 35.900236 10.939399z" fill="#F4A28C" p-id="12233"></path>
+    <path d="M644.945987 446.785255l-3.058614 76.796653 42.425725-1.35864-14.81119-55.329464-24.555921-20.108549z" fill="#F4A28C" p-id="12234"></path>
+    <path d="M680.033046 432.486065a92.929673 92.929673 0 0 1-21.637856 0.916915 19.549699 19.549699 0 0 1 2.516496 21.296523 15.912157 15.912157 0 0 1-18.341647 8.560105l-3.159006-29.95702a23.759477 23.759477 0 0 1 9.510483-22.554771 82.304837 82.304837 0 0 1 9.406745-6.080418c8.185307-4.484183 21.46719-0.237595 28.497987-6.96387a5.672157 5.672157 0 0 1 9.339817 2.650353c2.446222 8.931556 2.51315 23.438222-9.202614 29.856628a21.667974 21.667974 0 0 1-6.930405 2.275555z" fill="#24285B" p-id="12235"></path>
+    <path d="M663.321098 453.71566s-1.221438-8.968366-7.880784-7.472523c-6.656 1.492497-4.956026 14.433046 4.350327 14.536785l3.530457-7.064262zM687.947294 445.460078l7.572915 8.185308a3.761359 3.761359 0 0 1-0.066928 5.163503 3.781438 3.781438 0 0 1-1.596235 0.987189l-8.693961 2.713935 2.784209-17.049935z" fill="#F4A28C" p-id="12236"></path>
+    <path d="M673.273307 478.883974a27.989333 27.989333 0 0 1-14.603712-6.522144s2.242092 13.890928 19.225098 25.847634l-4.621386-19.32549z" fill="#CE8172" opacity=".31" p-id="12237"></path>
+    <path d="M641.957647 523.581908l42.425726-1.35864s66.640314-11.31085 89.770666 43.034771c23.130353 54.345621-6.522144 131.142275-6.522144 131.142275s-24.114196 81.076706-125.674248 72.111686c0 0-84.473307-4.892444-94.017255-120.681412a113.11519 113.11519 0 0 0-2.309019-15.011974c-3.871791-18.104052-6.113882-73.028601 96.326274-109.236706z" fill="#21A675" p-id="12238"></path>
+    <path d="M585.13234 595.727059s22.621699 2.479686 54.041098 55.091869c31.416052 52.612183 93.10034 33.320157 127.879529-5.605229l-64.535425 85.390223-72.279006-5.806014-39.296837-104.61532-5.809359-24.455529z" fill="#000000" opacity=".08" p-id="12239"></path>
+    <path d="M832.853333 473.948026l-12.425202 1.659817 4.832209 36.157909 12.421856-1.659817-4.828863-36.157909z" fill="#FFD200" p-id="12240"></path>
+    <path d="M832.853333 473.948026l-12.425202 1.659817 4.832209 36.157909 12.421856-1.659817-4.828863-36.157909z" fill="#000000" opacity=".08" p-id="12241"></path>
+    <path d="M839.837281 499.604915l-19.091242 2.549961 6.204236 46.42468 19.087895-2.549961-6.200889-46.42468z" fill="#24285B" p-id="12242"></path>
+    <path d="M815.184314 399.132444a41.087163 41.087163 0 0 0-33.430589 54.027713 41.100549 41.100549 0 1 0 33.430589-54.027713z m9.306353 69.491451a29.003294 29.003294 0 0 1-16.651713-2.690509 29.066876 29.066876 0 0 1-16.223372-27.90902 29.050144 29.050144 0 0 1 36.449045-26.24251 29.023373 29.023373 0 0 1 21.323295 24.234667 29.076915 29.076915 0 0 1-24.760053 32.607372h-0.137202z" fill="#FFD200" p-id="12243"></path>
+    <path d="M820.856471 469.169359a29.180654 29.180654 0 1 0 0-58.35796 29.180654 29.180654 0 0 0 0 58.35796z" fill="#FFFFFF" p-id="12244"></path>
+    <path d="M546.85281 601.43268a20.975268 20.975268 0 0 1 17.217255-15.49051 20.992 20.992 0 0 1 20.995347 9.784889 481.045752 481.045752 0 0 1 40.759215 82.843608c24.284863 64.736209 143.370039 22.042771 187.321726-128.90353l25.067922 15.590902s-34.578405 196.052497-173.772131 203.253961c0 0-86.886065 17.592052-113.275817-89.024418 0 0-6.793203-20.075085-7.201464-31.419399l-1.83383-12.769882a107.637124 107.637124 0 0 1 4.484183-33.527634l0.237594-0.337987z" fill="#21A675" p-id="12245"></path>
+    <path d="M546.85281 601.43268a20.975268 20.975268 0 0 1 17.217255-15.49051 20.992 20.992 0 0 1 20.995347 9.784889 481.045752 481.045752 0 0 1 40.759215 82.843608c24.284863 64.736209 143.370039 22.042771 187.321726-128.90353l25.067922 15.590902s-34.578405 196.052497-173.772131 203.253961c0 0-86.886065 17.592052-113.275817-89.024418 0 0-6.793203-20.075085-7.201464-31.419399l-1.83383-12.769882a107.637124 107.637124 0 0 1 4.484183-33.527634l0.237594-0.337987z" fill="#FFFFFF" opacity=".39" p-id="12246"></path>
+    <path d="M819.49783 553.472s2.546614-32.30285 15.861961-32.232575c13.315346 0.066928 44.597542 23.98034-3.701124 39.772026l-12.160837-7.539451z" fill="#F4A28C" p-id="12247"></path>
+    <path d="M1166.697412 306.845281a22.969725 22.969725 0 0 0-22.959687-22.959686c-1.241516 0-2.479686 0.100392-3.701124 0.301176a30.910745 30.910745 0 0 0-27.17281-16.30034h-1.121046a36.753569 36.753569 0 1 0-71.328627 0h-1.121046a30.991059 30.991059 0 0 0-22.564811 8.697308 30.960941 30.960941 0 0 0-6.980601 34.354196 30.957595 30.957595 0 0 0 29.545412 18.867032h107.432993v-0.200784a22.983111 22.983111 0 0 0 19.971347-22.758902zM274.104052 534.113046a19.696941 19.696941 0 0 0-19.696941-19.700288 23.776209 23.776209 0 0 0-3.159006 0.271059 26.523608 26.523608 0 0 0-23.401412-13.961203h-0.953726a31.509752 31.509752 0 0 0-16.738719-36.00732 31.499712 31.499712 0 0 0-27.661385 0 31.523137 31.523137 0 0 0-16.738719 36.00732h-0.950379a26.536993 26.536993 0 0 0-19.392419 7.432366 26.526954 26.526954 0 0 0-8.118379 19.114667 26.547033 26.547033 0 0 0 17.056628 24.800209 26.536993 26.536993 0 0 0 10.45417 1.743477h92.14996v-0.170666a19.743791 19.743791 0 0 0 17.153674-19.529621z" fill="#E6E6E6" p-id="12248"></path>
+</svg>
--- a/src/frontend/admin/src/assets/img/logo-r.png
+++ b/src/frontend/admin/src/assets/img/logo-r.png
--- a/src/frontend/admin/src/assets/img/logo.png
+++ b/src/frontend/admin/src/assets/img/logo.png
--- a/src/frontend/admin/src/assets/img/logo.svg
+++ b/src/frontend/admin/src/assets/img/logo.svg
@@ -1,50 +1,3 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 26.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" id="katman_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
-     viewBox="0 0 600 450" style="enable-background:new 0 0 600 450;" xml:space="preserve">
-<style type="text/css">
-    .st0{fill:#21A675;}
-    .st1{fill:#A4E2C6;}
-    .st2{fill:#424C50;}
-    .st3{fill:#FA9D3C;}
-    .st4{fill:#FDFDFB;}
-    .st5{fill:#93603B;}
-</style>
-    <symbol id="snail" viewBox="-30 -29 60 58.1">
-    <path class="st0" d="M-2.4,10.8c0,0-4.7-20.8-13.1-20.8c-15.1,0-15.5,27.8-5.3,37c3.1,2.8,16.1,2.8,43.5,0c2.9-0.3,1.8-3.1-2.3-5
-        C17.7,20.7,4.6,18.2-2.4,10.8" />
-        <g>
-        <ellipse class="st1" cx="-4.2" cy="7.7" rx="3.9" ry="6.7" />
-            <ellipse class="st1" cx="-0.5" cy="21.4" rx="2.4" ry="2.7" />
-            <ellipse class="st1" cx="-9.5" cy="16.5" rx="1.8" ry="3.1" />
-            <ellipse class="st1" cx="-11.8" cy="4.4" rx="1.4" ry="2.1" />
-    </g>
-        <path class="st2" d="M-22.4-5.9c0,1.2,0.4,2.3,1.1,2.9c0.3,0.3,0.7,0.5,1.1,0.7c0.2,0.1,0.4,0.1,0.6,0.1c0,0,0.3,0,0.4,0
-        s0.2,0,0.3,0c0.9,0,1.8-0.3,2.5-0.9c0.7-0.6,1.2-1.6,1.6-2.8c0.4,1.2,0.4,2.6-0.4,3.8c-0.8,1.2-2.3,1.9-3.7,1.9c-0.2,0-0.3,0-0.5,0
-        c-0.2,0-0.3,0-0.5-0.1c-0.4-0.1-0.7-0.2-1.1-0.3c-0.7-0.3-1.3-0.8-1.6-1.5C-23.3-3.3-23.2-4.9-22.4-5.9" />
-        <path class="st3" d="M26.9,10.2C30.3,6,30.8-1,28.9-5.2c-2.8-6.2-8.3-7.1-8.3-7.1c-7.4-11.9-27.8-11.9-34,2.7
-        C-8.1-6.4-5.1,2.2-3.4,7c1.6,6.3,4.7,12,9.8,13.5C8.6,21,9,18.8,9,18.8c1.4,2,4.3,3.4,6.9,2.7C25.6,18.7,26.9,10.2,26.9,10.2" />
-        <g>
-        <path class="st0" d="M-17.5-7.8l-2.6,0.9l-2.5-6.9l2.6-0.9L-17.5-7.8z" />
-            <path class="st0" d="M-11.7-5.3l-2.5-1.1l3.1-6.7l2.5,1.2L-11.7-5.3z" />
-            <path class="st0" d="M-13-19.4c0,4.7-3.8,8.5-8.5,8.5s-8.5-3.8-8.5-8.5s3.8-8.5,8.5-8.5C-16.8-27.8-13-23.9-13-19.4" />
-    </g>
-        <path class="st4" d="M-16.6-19c0,3.7-2.9,6.6-6.4,6.6c-3.6,0-6.4-3-6.4-6.6c0-3.7,2.9-6.6,6.4-6.6S-16.6-22.6-16.6-19" />
-        <path class="st2" d="M-17.4-19c0,2.5-2,4.6-4.4,4.6s-4.4-2-4.4-4.6c0-2.5,2-4.6,4.4-4.6C-19.3-23.5-17.4-21.5-17.4-19" />
-        <g>
-        <path class="st5" d="M9.1,18.7c-1.9-2.9-3.3-6.2-4-9.6C4.4,5.5,4.4,2,5.2-1.6s2.5-6.9,5.3-9.3c1.4-1.2,3.1-2,4.9-2.3
-            c1.8-0.3,3.6,0,5.2,0.8c-1.7-0.4-3.4-0.4-5,0.1s-2.9,1.4-4.1,2.5c-1.1,1.1-2.1,2.5-2.8,4s-1.3,3-1.6,4.6C6.3,2,6.2,5.4,6.6,8.7
-            C7.1,12.1,7.9,15.4,9.1,18.7" />
-            <path class="st5" d="M26.9,10.2c-0.7,0.9-1.6,1.6-2.6,2.2c-1,0.6-2.1,1-3.4,1.1c-1.2,0.1-2.5-0.3-3.6-1S15.4,11,14.7,10
-            c-1.4-2-1.9-4.7-1.6-7.1c0.3-2.4,1.4-4.8,3.1-6.6c0.9-0.9,1.9-1.7,3.2-2.1C20.6-6.3,22-6.4,23.3-6c1.4,0.4,2.5,1.4,3.1,2.5
-            C27-2.3,27.3-1,27.2,0.2c-0.1,1.3-0.5,2.6-1.5,3.5c-0.9,1-2.5,1.5-3.8,0.8S20,2.5,20.3,1.1c0.2-0.7,0.6-1.2,1.2-1.5
-            c0.3-0.1,0.7-0.2,1,0c0.3,0.1,0.5,0.3,0.7,0.6c-1-0.9-2,0.3-2.1,1.1c-0.1,0.9,0.5,1.9,1.3,2.2c0.4,0.2,0.8,0.1,1.3,0
-            c0.4-0.1,0.8-0.4,1.1-0.7c0.6-0.7,0.9-1.7,0.9-2.7s-0.2-2-0.7-2.8s-1.2-1.4-2.1-1.6c-1.8-0.5-3.8,0.4-5.2,1.9
-            C14.9,0.5,14,5.5,16.1,9.1c1,1.8,2.7,3.3,4.8,3.4C23,12.6,25.2,11.5,26.9,10.2" />
-    </g>
-        <path class="st0" d="M2.3-19.4c0,5.4-4.4,9.7-9.8,9.7s-9.8-4.4-9.8-9.7c0-5.4,4.4-9.7,9.8-9.7S2.3-24.6,2.3-19.4" />
-        <ellipse class="st4" cx="-9.3" cy="-18.9" rx="7.4" ry="7.6" />
-        <path class="st2" d="M-2.7-18.9c0,2.9-2.3,5.3-5.1,5.3s-5.1-2.4-5.1-5.3s2.3-5.3,5.1-5.3S-2.7-21.8-2.7-18.9" />
-</symbol>
-    <use xlink:href="#snail" width="60" height="58.1" x="-30" y="-29" transform="matrix(5.0964 0 0 5.0964 300 225)" style="overflow:visible;" />
+<svg t="1733997522763" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="24111" width="256" height="256">
+    <path d="M512 0a512 512 0 1 1 0 1024A512 512 0 0 1 512 0z m295.488 296.512a365.696 365.696 0 1 0-0.512 431.68l-155.712-97.664-8.704 9.6a182.848 182.848 0 1 1 16.64-236.416l157.376-94.08z m0.192 104h-26.624l-4.288 38.464h-32.64l-3.2 44.992h30.784l-6.272 56.32h-30.912l-3.2 45.056h29.056l-4.608 41.28h26.496l4.672-41.28h30.72l-4.608 41.28h26.432l4.672-41.28h20.736l3.2-44.992h-18.88l6.272-56.32h19.008l3.2-45.056h-17.088l4.288-38.464h-26.624l-4.224 38.464h-30.72l4.352-38.464z m21.312 83.456l-6.4 56.32h-30.72l6.4-56.32h30.72z" fill="#21A675" p-id="24112"></path>
 </svg>
--- a/src/frontend/admin/src/assets/img/no-widgets.svg
+++ b/src/frontend/admin/src/assets/img/no-widgets.svg
@@ -3,11 +3,11 @@
 <svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
     viewBox="0 0 750 750" style="enable-background:new 0 0 750 750;" xml:space="preserve">
 <style type="text/css">
-    .st0{opacity:0.35;fill:#B3B3B3;}
-    .st1{opacity:0.1;fill:#B3B3B3;}
-    .st2{opacity:0.3;fill:#B3B3B3;}
+    .st0{opacity:0.35;fill:silver;}
+    .st1{opacity:0.1;fill:silver;}
+    .st2{opacity:0.3;fill:silver;}
    .st3{opacity:0.1;}
-    .st4{fill:#B3B3B3;}
+    .st4{fill:silver;}
 </style>
    <g>
    <path class="st0" d="M465.1,261.4H264c-1.3,0-2.4,1.1-2.4,2.4v255.6c0,1.3,1.1,2.4,2.4,2.4h201.1c1.3,0,2.4-1.1,2.4-2.4V263.8
--- a/src/frontend/admin/src/components/naVerifition/index.vue
+++ b/src/frontend/admin/src/components/naVerifition/index.vue
--- a/src/frontend/admin/src/components/naVerifition/slide.vue
+++ b/src/frontend/admin/src/components/naVerifition/slide.vue
@@ -4,7 +4,9 @@
            <div :style="{ width: setSize.imgWidth, height: setSize.imgHeight }" class="verify-img-panel">
                <img :src="backImgBase" alt="" style="width: 100%; height: 100%; display: block" />
                <div v-show="showRefresh" @click="refresh" class="verify-refresh">
-                    <i class="iconfont icon-refresh"></i>
+                    <el-icon>
+                        <el-icon-refresh></el-icon-refresh>
+                    </el-icon>
                </div>
                <transition name="tips">
                    <span v-if="tipWords" :class="passFlag ? 'suc-bg' : 'err-bg'" class="verify-tips">{{ tipWords }}</span>
@@ -40,7 +42,9 @@
                    @mousedown="start"
                    @touchstart="start"
                    class="verify-move-block">
-                    <i :class="['verify-icon iconfont', iconClass]" :style="{ color: iconColor }"></i>
+                    <el-icon>
+                        <el-icon-arrow-right></el-icon-arrow-right>
+                    </el-icon>
                    <div
                        v-if="type === '2'"
                        :style="{
@@ -144,7 +148,7 @@ export default {
            leftBarWidth = ref(undefined),
            // 移动中样式
            moveBlockBackgroundColor = ref(undefined),
-            leftBarBorderColor = ref('#ddd'),
+            leftBarBorderColor = ref('gainsboro'),
            iconColor = ref(undefined),
            iconClass = ref('icon-right'),
            status = ref(false), //鼠标状态
@@ -259,9 +263,9 @@ export default {
            startMoveTime.value = new Date() //开始滑动的时间
            if (isEnd.value === false) {
                text.value = ''
-                moveBlockBackgroundColor.value = '#337ab7'
-                leftBarBorderColor.value = '#337AB7'
-                iconColor.value = '#fff'
+                moveBlockBackgroundColor.value = 'var(--el-color-primary)'
+                leftBarBorderColor.value = 'var(--el-color-primary)'
+                iconColor.value = 'white'
                e.stopPropagation()
                status.value = true
            }
@@ -308,7 +312,7 @@ export default {
                    if (res.data) {
                        moveBlockBackgroundColor.value = '#5cb85c'
                        leftBarBorderColor.value = '#5cb85c'
-                        iconColor.value = '#fff'
+                        iconColor.value = 'white'
                        iconClass.value = 'icon-check'
                        showRefresh.value = false
                        isEnd.value = true
@@ -328,7 +332,7 @@ export default {
                    } else {
                        moveBlockBackgroundColor.value = '#d9534f'
                        leftBarBorderColor.value = '#d9534f'
-                        iconColor.value = '#fff'
+                        iconColor.value = 'white'
                        iconClass.value = 'icon-close'
                        passFlag.value = false
                        setTimeout(function () {
@@ -352,9 +356,9 @@ export default {
            moveBlockLeft.value = 0
            leftBarWidth.value = undefined
            transitionWidth.value = 'width .3s'
-            leftBarBorderColor.value = '#ddd'
-            moveBlockBackgroundColor.value = '#fff'
-            iconColor.value = '#000'
+            leftBarBorderColor.value = 'gainsboro'
+            moveBlockBackgroundColor.value = 'white'
+            iconColor.value = 'black'
            iconClass.value = 'icon-right'
            isEnd.value = false
            getPicture()
--- a/src/frontend/admin/src/components/naVersionUpdater/index.vue
+++ b/src/frontend/admin/src/components/naVersionUpdater/index.vue
@@ -43,7 +43,7 @@ export default {
            const contents = []
            const msg = h('p', { style: 'width:230px;display:flex;justify-content:space-between' }, [
                h('span', {}, this.$t('即将开始更新……')),
-                h('a', { style: 'color:var(--na-color-primary)', href: 'javascript:window.location.reload()' }, this.$t('立即更新')),
+                h('a', { style: 'color:var(--el-color-primary)', href: 'javascript:window.location.reload()' }, this.$t('立即更新')),
            ])
            const task = h('p', { style: 'font-weight:bold' }, version)
            const progress = h(
@@ -55,7 +55,7 @@ export default {
                    style: {
                        width: '230px',
                        height: '6px',
-                        'background-color': 'var(--na-color-primary)',
+                        'background-color': 'var(--el-color-primary)',
                        'margin-top': '6px',
                        'border-radius': '6px',
                    },
--- a/src/frontend/admin/src/components/scContextmenu/index.vue
+++ b/src/frontend/admin/src/components/scContextmenu/index.vue
@@ -121,7 +121,7 @@ export default {

 .sc-contextmenu__menu > li.disabled {
    cursor: not-allowed;
-    color: #bbb;
+    color: var(--el-text-color-disabled);
    background: transparent;
 }

@@ -134,7 +134,7 @@ export default {

 .sc-contextmenu__suffix {
    margin-left: 3rem;
-    color: #999;
+    color: var(--el-color-info);
 }

 .sc-contextmenu__menu li ul {
--- a/src/frontend/admin/src/components/scCron/index.vue
+++ b/src/frontend/admin/src/components/scCron/index.vue
@@ -819,11 +819,7 @@ export default {
 }

 .sc-cron:deep(.el-tabs__item.is-active) .sc-cron-num h4 {
-    background: var(--na-color-primary);
-    color: #fff;
-}
-
-[data-theme='dark'] .sc-cron-num h4 {
-    background: var(--el-color-white);
+    background: var(--el-color-primary);
+    color: var(--el-color-white);
 }
 </style>
--- a/src/frontend/admin/src/components/scDialog/index.vue
+++ b/src/frontend/admin/src/components/scDialog/index.vue
@@ -88,7 +88,7 @@ export default {
 }

 .sc-dialog__headerbtn button:hover .el-dialog__close {
-    color: var(--na-color-primary);
+    color: var(--el-color-primary);
 }

 .sc-dialog:deep(.el-dialog).is-fullscreen {
@@ -109,6 +109,6 @@ export default {

 .sc-dialog:deep(.el-dialog).is-fullscreen .el-dialog__footer {
    padding-bottom: 1rem;
-    border-top: 1px solid var(--el-border-color-base);
+    border-top: 1px solid var(--el-border-color);
 }
 </style>
--- a/src/frontend/admin/src/components/scEcharts/echarts-theme-T.js
+++ b/src/frontend/admin/src/components/scEcharts/echarts-theme-T.js
@@ -1,7 +1,12 @@
-import DEFAULT_CONFIG from '@/config'
+import colorTool from '@/utils/color'
+const style = getComputedStyle(document.documentElement)
+const el_color_primary = style.getPropertyValue('--el-color-primary')
+const el_color_info = style.getPropertyValue('--el-color-info')
+const el_text_color_primary = style.getPropertyValue('--el-text-color-primary')
+const el_border_color_lighter = style.getPropertyValue('--el-border-color-lighter')

 const T = {
-    color: [DEFAULT_CONFIG.APP_SET_COLOR, '#36CE9E', '#f56e6a', '#626c91', '#edb00d', '#909399'],
+    color: [el_color_primary, colorTool.lighten(el_color_primary, 0.5), ...colorTool.colorSets],
    grid: {
        left: '3%',
        right: '3%',
@@ -11,30 +16,30 @@ const T = {
    },
    pie: {
        label: {
-            color: '#999',
+            color: el_color_info,
        },
    },
    gauge: {
        axisTick: {
            lineStyle: {
-                color: '#999',
+                color: el_color_info,
            },
        },
        splitLine: {
            lineStyle: {
-                color: '#999',
+                color: el_color_info,
            },
        },
        axisLabel: {
-            color: '#999',
+            color: el_color_info,
        },
        title: {
-            color: '#999',
+            color: el_color_info,
        },
    },
    legend: {
        textStyle: {
-            color: '#999',
+            color: el_color_info,
        },
        inactiveColor: 'rgba(128,128,128,0.4)',
    },
@@ -49,16 +54,16 @@ const T = {
        axisTick: {
            show: false,
            lineStyle: {
-                color: '#333',
+                color: el_text_color_primary,
            },
        },
        axisLabel: {
-            color: '#999',
+            color: el_color_info,
        },
        splitLine: {
            show: false,
            lineStyle: {
-                color: ['#eee'],
+                color: [el_border_color_lighter],
            },
        },
        splitArea: {
@@ -72,7 +77,7 @@ const T = {
        axisLine: {
            show: false,
            lineStyle: {
-                color: '#999',
+                color: el_color_info,
            },
        },
        splitLine: {
--- a/src/frontend/admin/src/components/scFileSelect/index.vue
+++ b/src/frontend/admin/src/components/scFileSelect/index.vue
@@ -89,7 +89,7 @@
                                    v-if="files[_getExt(item[fileProps.url])]"
                                    :class="files[_getExt(item[fileProps.url])].icon"
                                    :style="{ color: files[_getExt(item[fileProps.url])].color }"></i>
-                                <i v-else class="sc-icon-file-list-fill" style="color: #999"></i>
+                                <i v-else class="sc-icon-file-list-fill" style="color: var(--el-color-info)"></i>
                            </div>
                        </div>
                        <p :title="item[fileProps.fileName]">{{ item[fileProps.fileName] }}</p>
@@ -371,7 +371,7 @@ export default {
    right: 7px;
    z-index: 2;
    background: rgba(0, 0, 0, 0.2);
-    border: 1px solid #fff;
+    border: 1px solid var(--el-color-white);
    display: flex;
    flex-direction: column;
    align-items: center;
@@ -380,7 +380,7 @@ export default {

 .sc-file-select__item__checkbox i {
    font-size: 1.1rem;
-    color: #fff;
+    color: var(--el-color-white);
    font-weight: bold;
    display: none;
 }
@@ -401,7 +401,7 @@ export default {

 .sc-file-select__item__select i {
    font-size: 1.1rem;
-    color: #fff;
+    color: var(--el-color-white);
    font-weight: bold;
 }

@@ -431,7 +431,7 @@ export default {
 }

 .sc-file-select__item__file .item-file.item-file-doc {
-    color: var(--na-color-primary);
+    color: var(--el-color-primary);
 }

 .sc-file-select__item__upload {
@@ -478,7 +478,7 @@ export default {
 .sc-file-select__top .tips {
    font-size: 0.9rem;
    margin-left: 10px;
-    color: #999;
+    color: var(--el-color-info);
 }

 .sc-file-select__top .tips i {
--- a/src/frontend/admin/src/components/scIconSelect/index.vue
+++ b/src/frontend/admin/src/components/scIconSelect/index.vue
@@ -168,7 +168,7 @@ export default {
    width: 100%;
    height: 100%;
    font-size: 2rem;
-    color: #6d7882;
+    color: var(--el-text-color-regular);
    display: flex;
    justify-content: center;
    align-items: center;
@@ -176,11 +176,11 @@ export default {
 }

 .sc-icon-select__list li:hover {
-    box-shadow: 0 0 1px 0.3rem var(--na-color-primary);
+    box-shadow: 0 0 1px 0.3rem var(--el-color-primary);
    background: var(--el-color-primary-light-9);
 }

 .sc-icon-select__list li:hover i {
-    color: var(--na-color-primary);
+    color: var(--el-color-primary);
 }
 </style>
--- a/src/frontend/admin/src/components/scMini/scStatusIndicator.vue
+++ b/src/frontend/admin/src/components/scMini/scStatusIndicator.vue
@@ -14,7 +14,7 @@ export default {
 <style scoped>
 .sc-state {
    display: inline-block;
-    background: #000;
+    background: var(--el-color-black);
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
@@ -38,7 +38,7 @@ export default {
 }

 .sc-state-bg--primary {
-    background: var(--na-color-primary);
+    background: var(--el-color-primary);
 }

 .sc-state-bg--success {
--- a/src/frontend/admin/src/components/scMini/scTrend.vue
+++ b/src/frontend/admin/src/components/scMini/scTrend.vue
@@ -68,14 +68,14 @@ export default {
 }

 .sc-trend--P {
-    color: #f56c6c;
+    color: var(--el-color-danger);
 }

 .sc-trend--N {
-    color: #67c23a;
+    color: var(--el-color-success);
 }

 .sc-trend--Z {
-    color: #555;
+    color: var(--el-color-info);
 }
 </style>
--- a/src/frontend/admin/src/components/scPageHeader/index.vue
+++ b/src/frontend/admin/src/components/scPageHeader/index.vue
@@ -31,8 +31,8 @@ export default {

 <style scoped>
 .sc-page-header {
-    background: #fff;
-    border-bottom: 1px solid #e6e6e6;
+    background: var(--el-bg-color);
+    border-bottom: 1px solid var(--el-border-color-light);
    padding: 1.5rem 2rem;
    display: flex;
 }
@@ -44,7 +44,7 @@ export default {
 .sc-page-header__icon span {
    width: 2.5rem;
    height: 2.5rem;
-    background: var(--na-color-primary);
+    background: var(--el-color-primary);
    border-radius: 40%;
    display: flex;
    align-items: center;
@@ -52,7 +52,7 @@ export default {
 }

 .sc-page-header__icon span i {
-    color: #fff;
+    color: var(--el-color-white);
    font-size: 1.1rem;
 }

@@ -62,23 +62,14 @@ export default {

 .sc-page-header__title h2 {
    font-size: 1.3rem;
-    color: #3c4a54;
+    color: var(--el-text-color-primary);
    font-weight: bold;
    margin-top: 0.3rem;
 }

 .sc-page-header__title p {
    font-size: 1rem;
-    color: #999;
+    color: var(--el-color-info);
    margin-top: 1rem;
 }
-
-[data-theme='dark'] .sc-page-header {
-    background: #2b2b2b;
-    border-color: var(--el-border-color-base);
-}
-
-[data-theme='dark'] .sc-page-header__title h2 {
-    color: #c0c0c0;
-}
 </style>
--- a/src/frontend/admin/src/components/scSelect/index.vue
+++ b/src/frontend/admin/src/components/scSelect/index.vue
@@ -87,10 +87,10 @@ export default {
    left: 0;
    right: 0;
    bottom: 0;
-    background: #fff;
+    background: var(--el-color-white);
    z-index: 100;
    border-radius: 0.4rem;
-    border: 1px solid #ebeef5;
+    border: 1px solid var(--el-border-color-lighter);
    display: flex;
    align-items: center;
    padding-left: 1rem;
--- a/src/frontend/admin/src/components/scSelectFilter/index.vue
+++ b/src/frontend/admin/src/components/scSelectFilter/index.vue
@@ -183,7 +183,7 @@ export default {
    align-items: center;
    justify-content: space-between;
    padding-right: 1rem;
-    color: #999;
+    color: var(--el-color-info);
 }

 .sc-select-filter__item-options {
@@ -217,12 +217,12 @@ export default {
 }

 .sc-select-filter__item-options li:hover {
-    color: var(--na-color-primary);
+    color: var(--el-color-primary);
 }

 .sc-select-filter__item-options li.active {
-    background: var(--na-color-primary);
-    color: #fff;
+    background: var(--el-color-primary);
+    color: var(--el-color-white);
    font-weight: bold;
 }

@@ -231,7 +231,7 @@ export default {
 }

 .sc-select-filter__no-data {
-    color: #999;
+    color: var(--el-color-info);
 }

 .sc-select-filter__item-w100p {
--- a/src/frontend/admin/src/components/scStatistic/index.vue
+++ b/src/frontend/admin/src/components/scStatistic/index.vue
@@ -59,7 +59,7 @@ export default {
 <style scoped>
 .sc-statistic-title {
    font-size: 0.9rem;
-    color: #999;
+    color: var(--el-color-info);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
@@ -71,7 +71,7 @@ export default {

 .sc-statistic-content {
    font-size: 1.5rem;
-    color: #333;
+    color: var(--el-text-color-primary);
 }

 .sc-statistic-content-value {
@@ -90,11 +90,11 @@ export default {

 .sc-statistic-description {
    margin-top: 1rem;
-    color: #999;
+    color: var(--el-color-info);
 }

 .dark .sc-statistic-content {
-    color: #c0c0c0;
+    color: var(--el-text-color-primary);
 }

 .sc-statistic-icon {
--- a/src/frontend/admin/src/components/scTable/columnSetting.vue
+++ b/src/frontend/admin/src/components/scTable/columnSetting.vue
@@ -95,14 +95,14 @@ export default {

 <style scoped>
 .setting-column__title {
-    border-bottom: 1px solid #ebeef5;
+    border-bottom: 1px solid var(--el-border-color-lighter);
    padding-bottom: 1rem;
 }

 .setting-column__title span {
    display: inline-block;
    font-weight: bold;
-    color: #909399;
+    color: var(--el-text-color-secondary);
    font-size: 0.9rem;
 }

@@ -184,7 +184,7 @@ export default {
 }

 .setting-column__bottom {
-    border-top: 1px solid #ebeef5;
+    border-top: 1px solid var(--el-border-color-lighter);
    padding-top: 1rem;
    text-align: right;
 }
--- a/src/frontend/admin/src/components/scUpload/index.vue
+++ b/src/frontend/admin/src/components/scUpload/index.vue
@@ -308,7 +308,7 @@ export default {
    width: 1.9rem;
    height: 1.9rem;
    cursor: pointer;
-    color: #fff;
+    color: var(--el-color-white);
 }

 .sc-upload__img-actions span i {
@@ -316,7 +316,7 @@ export default {
 }

 .sc-upload__img-actions .del {
-    background: #f56c6c;
+    background: var(--el-color-danger);
 }

 .sc-upload__img:hover .sc-upload__img-actions {
@@ -376,7 +376,7 @@ export default {
 .sc-upload .file-empty h4 {
    font-size: 0.9rem;
    font-weight: normal;
-    color: #8c939d;
+    color: var(--el-color-info);
    margin-top: 1rem;
 }

--- a/src/frontend/admin/src/components/scUpload/multiple.vue
+++ b/src/frontend/admin/src/components/scUpload/multiple.vue
@@ -318,7 +318,7 @@ export default {
    width: 25px;
    height: 25px;
    cursor: pointer;
-    color: #fff;
+    color: var(--el-color-white);
 }

 .sc-upload__item-actions span i {
@@ -326,7 +326,7 @@ export default {
 }

 .sc-upload__item-actions .del {
-    background: #f56c6c;
+    background: var(--el-color-danger);
 }

 .sc-upload__item-progress {
--- a/src/frontend/admin/src/config/fileSelect.js
+++ b/src/frontend/admin/src/config/fileSelect.js
@@ -1,6 +1,5 @@
 import API from '@/api'
 import DEFAULT_CONFIG from '@/config/index'
-
 //文件选择器配置

 export default {
@@ -52,19 +51,19 @@ export default {
        },
        xls: {
            icon: 'sc-icon-file-excel-2-fill',
-            color: '#67C23A',
+            color: 'var(--el-color-success)',
        },
        xlsx: {
            icon: 'sc-icon-file-excel-2-fill',
-            color: '#67C23A',
+            color: 'var(--el-color-success)',
        },
        ppt: {
            icon: 'sc-icon-file-ppt-2-fill',
-            color: '#F56C6C',
+            color: 'var(--el-color-danger)',
        },
        pptx: {
            icon: 'sc-icon-file-ppt-2-fill',
-            color: '#F56C6C',
+            color: 'var(--el-color-danger)',
        },
    },
 }
--- a/src/frontend/admin/src/layout/components/iframeView.vue
+++ b/src/frontend/admin/src/layout/components/iframeView.vue
@@ -56,7 +56,7 @@ export default {
 .iframe-pages {
    width: 100%;
    height: 100%;
-    background: #fff;
+    background: var(--el-color-white);
 }

 iframe {
--- a/src/frontend/admin/src/layout/components/search.vue
+++ b/src/frontend/admin/src/layout/components/search.vue
@@ -148,7 +148,7 @@ export default {
 .sc-search-no-result {
    text-align: center;
    margin: 3rem 0;
-    color: #999;
+    color: var(--el-color-info);
 }

 .sc-search-history {
@@ -183,8 +183,8 @@ export default {
 }

 .sc-search-result li:hover {
-    background: var(--na-color-primary);
-    color: #fff;
-    border-color: var(--na-color-primary);
+    background: var(--el-color-primary);
+    color: var(--el-color-white);
+    border-color: var(--el-color-primary);
 }
 </style>
--- a/src/frontend/admin/src/layout/components/sideM.vue
+++ b/src/frontend/admin/src/layout/components/sideM.vue
@@ -9,7 +9,7 @@
        <el-container class="mobile-nav">
            <el-header>
                <div class="logo-bar">
-                    <img class="logo" src="@/assets/img/logo.png" /><span>{{ $CONFIG.APP_NAME }}</span>
+                    <img class="logo logo-fill-color" src="@/assets/img/logo.svg" /><span>{{ $CONFIG.APP_NAME }}</span>
                </div>
            </el-header>
            <el-main>
@@ -18,9 +18,7 @@
                        :active-text-color="DEFAULT_CONFIG.APP_SET_COLOR"
                        :default-active="$route.meta.active || $route.fullPath"
                        @select="select"
-                        background-color="#424c50"
-                        router
-                        text-color="#fff">
+                        router>
                        <NavMenu :navMenus="menu"></NavMenu>
                    </el-menu>
                </el-scrollbar>
@@ -142,20 +140,19 @@ export default {
    z-index: 10;
    width: 4rem;
    height: 4rem;
-    background: var(--na-color-primary);
-    box-shadow: 0 0.2rem 1rem 0 var(--na-color-primary);
+    background: var(--el-color-primary);
+    box-shadow: 0 0.2rem 1rem 0 var(--el-color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
 }

 .mobile-nav-button i {
-    color: #fff;
+    color: var(--el-color-white);
    font-size: 1.5rem;
 }

 .mobile-nav {
-    background: #424c50;
 }

 .mobile-nav .el-header {
@@ -172,7 +169,7 @@ export default {
    align-items: center;
    font-weight: bold;
    font-size: 1.5rem;
-    color: #fff;
+    color: var(--el-text-color-primary);
 }

 .mobile-nav .logo-bar img {
--- a/src/frontend/admin/src/layout/components/tags.vue
+++ b/src/frontend/admin/src/layout/components/tags.vue
@@ -58,10 +58,6 @@
            </li>
        </ul>
    </transition>
-
-    <el-tour v-model="tourOpen" @close="$TOOL.data.set('TOUR_TIP_READ_TAGS', true)">
-        <el-tour-step :target="this.$refs.tags" :title="$t('小提示')"> {{ $t('按下 ALT+Q 可快速关闭当前标签页') }} </el-tour-step>
-    </el-tour>
 </template>

 <script>
@@ -71,7 +67,6 @@ export default {
    name: 'tags',
    data() {
        return {
-            tourOpen: false,
            refreshTimer: null,
            contextMenuVisible: false,
            contextMenuItem: null,
@@ -134,11 +129,6 @@ export default {
    mounted() {
        this.tagDrop()
        this.scrollInit()
-        this.$nextTick(() => {
-            if (!this.$TOOL.data.get('TOUR_TIP_READ_TAGS')) {
-                this.tourOpen = true
-            }
-        })
    },
    methods: {
        //查找树
@@ -343,7 +333,7 @@ export default {
    cursor: pointer;
    line-height: 2.5rem;
    padding: 0 1.3rem;
-    color: #606266;
+    color: var(--el-text-color-primary);
 }

 .contextmenu li i {
@@ -351,14 +341,9 @@ export default {
    margin-right: 1rem;
 }

-.contextmenu li:hover {
-    background-color: #ecf5ff;
-    color: #66b1ff;
-}
-
 .contextmenu li.disabled {
    cursor: not-allowed;
-    color: #bbb;
+    color: var(--el-text-color-disabled);
    background: transparent;
 }

--- a/src/frontend/admin/src/layout/components/tasks/index.vue
+++ b/src/frontend/admin/src/layout/components/tasks/index.vue
@@ -5,7 +5,7 @@
                <template #description>
                    <h2>{{ $t('没有正在执行的作业') }}</h2>
                </template>
-                <p style="color: #999; line-height: 1.5; margin: 0 3rem">
+                <p style="color: var(--el-color-info); line-height: 1.5; margin: 0 3rem">
                    在处理耗时过久的作业时为了不阻碍正在处理的工作，可在作业中心进行异步执行。
                </p>
            </el-empty>
@@ -205,7 +205,7 @@ export default {
 }

 .user-bar-jobs-item:hover {
-    border-color: var(--na-color-primary);
+    border-color: var(--el-color-primary);
 }

 .user-bar-jobs-item.alert:hover {
@@ -224,7 +224,7 @@ export default {
    display: flex;
    justify-content: center;
    align-items: center;
-    color: var(--na-color-primary);
+    color: var(--el-color-primary);
    border-radius: 1.5rem;
 }

@@ -238,7 +238,7 @@ export default {

 .user-bar-jobs-item-body .title p {
    font-size: 1rem;
-    color: #999;
+    color: var(--el-color-info);
    margin-top: 0.5rem;
 }

--- a/src/frontend/admin/src/layout/components/userbar.vue
+++ b/src/frontend/admin/src/layout/components/userbar.vue
@@ -5,7 +5,7 @@
                <component :is="config.dark ? 'el-icon-sunny' : 'el-icon-moon'" />
            </el-icon>
        </div>
-        <div @click="search" class="panel-item hidden-sm-and-down">
+        <div @click="search" class="panel-item hidden-sm-and-down userbar-btn-search">
            <el-icon>
                <el-icon-search />
            </el-icon>
@@ -40,7 +40,7 @@
            </el-drawer>
        </div>
        <el-dropdown @command="handleUser" class="user panel-item" trigger="hover">
-            <div class="user-avatar">
+            <div class="user-avatar user-center">
                <el-avatar
                    :size="30"
                    :src="
--- a/src/frontend/admin/src/layout/index.vue
+++ b/src/frontend/admin/src/layout/index.vue
@@ -2,9 +2,9 @@
    <!-- 通栏布局 -->
    <template v-if="layout === 'header'">
        <header class="adminui-header">
-            <div class="adminui-header-left">
+            <div @click="logoClick" class="adminui-header-left">
                <div class="logo-bar">
-                    <img class="logo" src="@/assets/img/logo.png" />
+                    <img class="logo logo-fill-color" src="@/assets/img/logo.svg" />
                    <div>
                        <p>{{ $CONFIG.APP_NAME }}</p>
                        <p class="version color-secondary">{{ version }}</p>
@@ -62,9 +62,9 @@
    <!-- 经典布局 -->
    <template v-else-if="layout === 'menu'">
        <header class="adminui-header">
-            <div class="adminui-header-left">
+            <div @click="logoClick" class="adminui-header-left">
                <div class="logo-bar">
-                    <img class="logo" src="@/assets/img/logo.png" />
+                    <img class="logo logo-fill-color" src="@/assets/img/logo.svg" />
                    <div>
                        <p>{{ $CONFIG.APP_NAME }}</p>
                        <p class="version">{{ version }}</p>
@@ -109,9 +109,9 @@
    <!-- 功能坞布局 -->
    <template v-else-if="layout === 'dock'">
        <header class="adminui-header">
-            <div class="adminui-header-left">
+            <div @click="logoClick" class="adminui-header-left">
                <div class="logo-bar">
-                    <img class="logo" src="@/assets/img/logo.png" />
+                    <img class="logo logo-fill-color" src="@/assets/img/logo.svg" />
                    <div>
                        <p>{{ $CONFIG.APP_NAME }}</p>
                        <p class="version">{{ version }}</p>
@@ -122,7 +122,7 @@
                <div v-if="!ismobile" class="adminui-header-menu">
                    <el-menu
                        :default-active="active"
-                        active-text-color="var(--na-color-primary)"
+                        active-text-color="var(--el-color-primary)"
                        mode="horizontal"
                        router
                        text-color="var(--el-text-color-primary)">
@@ -147,14 +147,13 @@
            </div>
        </section>
    </template>
-
    <!-- 默认布局 -->
    <template v-else>
        <section class="aminui-wrapper">
            <div v-if="!ismobile" class="aminui-side-split">
                <div class="aminui-side-split-top">
                    <router-link :to="$CONFIG.DASHBOARD_URL">
-                        <img :title="$CONFIG.APP_NAME" class="logo" src="@/assets/img/logo-r.png" />
+                        <img :title="$CONFIG.APP_NAME" class="logo logo-fill-color" src="@/assets/img/logo.svg" />
                    </router-link>
                </div>
                <div class="adminui-side-split-scroll">
@@ -282,6 +281,9 @@ export default {
        },
    },
    methods: {
+        logoClick() {
+            this.$router.push({ path: '/' })
+        },
        onLayoutResize() {
            this.$store.commit('SET_ismobile', document.body.clientWidth < 992)
        },
--- a/src/frontend/admin/src/layout/other/404.vue
+++ b/src/frontend/admin/src/layout/other/404.vue
@@ -1,7 +1,7 @@
 <template>
    <div class="router-err">
        <div class="router-err__icon">
-            <img src="@/assets/img/404.png" />
+            <img src="@/assets/img/404.svg" />
        </div>
        <div class="router-err__content">
            <h2>{{ $t('无权限或找不到页面') }}</h2>
@@ -56,7 +56,7 @@ export default {

 .router-err__content p {
    font-size: 1.1rem;
-    color: #999;
+    color: var(--el-color-info);
    margin: 1rem 0 2.5rem 0;
    line-height: 1.5;
 }
--- a/src/frontend/admin/src/style/app.scss
+++ b/src/frontend/admin/src/style/app.scss
@@ -1,26 +1,22 @@
 /* 全局 */
-:root {
-    --na-color-primary: #21a675;
-}
-
 #app,
 body,
 html {
    width: 100%;
    height: 100%;
-    background-color: #f6f8f9;
+    background-color: var(--el-bg-color);
    font-size: var(--el-font-size-base);
    font-family: 'Microsoft YaHei', sans-serif;
 }

 a {
-    color: #333;
+    color: var(--el-text-color-primary);
    text-decoration: none;
 }

 a:hover,
 a:focus {
-    color: #000;
+    color: var(--el-color-black);
    text-decoration: none;
 }

@@ -96,7 +92,7 @@ textarea {
    bottom: 10rem;
    right: 0;
    z-index: 100;
-    background: var(--na-color-primary);
+    background: var(--el-color-primary);
    display: flex;
    flex-direction: column;
    align-items: center;
@@ -106,19 +102,20 @@ textarea {

 .layout-setting i {
    font-size: 1.3rem;
-    color: #fff;
+    color: var(--el-color-white);
 }

 /* 头部 */
 .adminui-header {
    height: 4rem;
-    background: #fff;
+    background: var(--el-color-white);
    display: flex;
    justify-content: space-between;
-    border-bottom: #ebeef5 1px solid;
+    border-bottom: var(--el-border-color-lighter) 1px solid;
 }

 .adminui-header-left {
+    cursor: pointer;
    display: flex;
    align-items: center;
    padding-left: 1rem;
@@ -142,6 +139,12 @@ textarea {
    height: 3rem;
 }

+.logo-fill-color {
+    position: relative;
+    left: -10000px;
+    filter: drop-shadow(var(--el-color-primary) 10000px 0);
+}
+
 .adminui-header .nav {
    display: flex;
    height: 100%;
@@ -168,7 +171,7 @@ textarea {
 }

 .adminui-header .nav li.active {
-    color: var(--na-color-primary);
+    color: var(--el-color-primary);
 }

 .adminui-header .user-bar .panel-item:hover {
@@ -183,11 +186,11 @@ textarea {
 .aminui-side-split {
    width: 5rem;
    flex-shrink: 0;
-    background: #fff;
+    background: var(--el-color-white);
    color: var(--el-menu-text-color);
    display: flex;
    flex-flow: column;
-    border-right: #ebeef5 1px solid;
+    border-right: var(--el-border-color-lighter) 1px solid;
 }

 .aminui-side-split-top {
@@ -238,8 +241,8 @@ textarea {
 }

 .aminui-side-split li.active {
-    background: var(--na-color-primary);
-    color: #fff;
+    background: var(--el-color-primary);
+    color: var(--el-color-white);
 }

 .adminui-side-split-scroll::-webkit-scrollbar-thumb {
@@ -264,13 +267,13 @@ textarea {
    flex-flow: column;
    flex-shrink: 0;
    width: 15rem;
-    background: #fff;
-    border-right: 1px solid #e6e6e6;
+    background: var(--el-color-white);
+    border-right: 1px solid var(--el-border-color-light);
    transition: width 0.3s;
 }

 .adminui-side-top {
-    border-bottom: 1px solid #ebeef5;
+    border-bottom: 1px solid var(--el-border-color-lighter);
    height: 4rem;
    line-height: 4rem;
 }
@@ -278,7 +281,7 @@ textarea {
 .adminui-side-top h2 {
    padding: 0 var(--el-menu-base-level-padding);
    font-size: 1.3rem;
-    color: #3c4a54;
+    color: var(--el-text-color-primary);
 }

 .adminui-side-scroll {
@@ -288,7 +291,7 @@ textarea {
 }

 .adminui-side-bottom {
-    border-top: 1px solid #ebeef5;
+    border-top: 1px solid var(--el-border-color-lighter);
    height: 4rem;
    cursor: pointer;
    display: flex;
@@ -301,7 +304,7 @@ textarea {
 }

 .adminui-side-bottom:hover {
-    color: var(--na-color-primary);
+    color: var(--el-color-primary);
 }

 .aminui-side.isCollapse {
@@ -314,7 +317,7 @@ textarea {
    line-height: 1.4rem;
    background: var(--el-color-danger);
    font-size: 0.9rem;
-    color: #fff;
+    color: var(--el-color-white);
    right: 1rem;
    border-radius: 1.5rem;
    padding: 0 0.5rem;
@@ -333,8 +336,8 @@ textarea {

 .adminui-topbar {
    height: 3rem;
-    border-bottom: 1px solid #ebeef5;
-    background: #fff;
+    border-bottom: 1px solid var(--el-border-color-lighter);
+    background: var(--el-color-white);
    display: flex;
    justify-content: space-between;
 }
@@ -358,8 +361,8 @@ textarea {

 .adminui-tags {
    height: 3rem;
-    background: #fff;
-    border-bottom: 1px solid #e6e6e6;
+    background: var(--el-color-white);
+    border-bottom: 1px solid var(--el-border-color-light);
 }

 .adminui-tags ul {
@@ -382,14 +385,14 @@ textarea {
    height: 100%;
    position: absolute;
    right: 0;
-    background-image: linear-gradient(#fff, #e6e6e6);
+    background-image: linear-gradient(var(--el-color-white), var(--el-border-color-light));
 }

 .adminui-tags li a {
    padding: 0 1rem;
    width: 100%;
    height: 100%;
-    color: #999;
+    color: var(--el-color-info);
    text-decoration: none;
    display: flex;
    align-items: center;
@@ -407,19 +410,19 @@ textarea {

 .adminui-tags li i:hover {
    background: rgba(0, 0, 0, 0.2);
-    color: #fff;
+    color: var(--el-color-white);
 }

 .adminui-tags li:hover {
-    background: #ecf5ff;
+    background: var(--el-fill-color-dark);
 }

 .adminui-tags li.active {
-    background: var(--na-color-primary);
+    background: var(--el-color-primary);
 }

 .adminui-tags li.active a {
-    color: #fff;
+    color: var(--el-color-white);
 }

 .adminui-tags li.sortable-ghost {
@@ -428,7 +431,7 @@ textarea {

 .adminui-main {
    overflow: auto;
-    background-color: #f6f8f9;
+    background-color: var(--el-bg-color);
    flex: 1;
 }

@@ -465,7 +468,7 @@ textarea {
 .main-maximize-exit i {
    font-size: 1rem;
    margin-top: 1.5rem;
-    color: #fff;
+    color: var(--el-color-white);
 }

 .main-maximize-exit:hover {
@@ -556,7 +559,7 @@ textarea {
    &:after {
        content: '';
        margin: 2rem 0;
-        border-bottom: var(--na-color-primary) 1px dashed;
+        border-bottom: var(--el-color-primary) 1px dashed;
        display: block;
    }

--- a/src/frontend/admin/src/style/dark.scss
+++ b/src/frontend/admin/src/style/dark.scss
@@ -6,6 +6,7 @@ html.dark {
    --el-text-color-regular: #c0c0c0;
    --el-text-color-secondary: #666666;
    --el-mask-color: rgba(29, 30, 31, 0.9);
+    --el-color-primary: rgba(0, 0, 0, 0);
    --el-color-primary-dark-2: var(--el-color-primary-light-2) !important;
    --el-color-primary-light-9: var(--el-color-primary-dark-8) !important;
    --el-color-primary-light-8: var(--el-color-primary-dark-7) !important;
@@ -94,7 +95,7 @@ html.dark {
    }

    .el-table th.is-sortable:hover {
-        background: #111;
+        background: black;
    }

    .jv-container .jv-code.open {
--- a/src/frontend/admin/src/style/fix.scss
+++ b/src/frontend/admin/src/style/fix.scss
@@ -1,32 +1,14 @@
 /* 覆盖element-plus样式 */

 :root {
-    --el-color-primary: #21a675;
-    --el-color-primary-light-1: #53a7ff;
-    --el-color-primary-light-2: #66b1ff;
-    --el-color-primary-light-3: #79bbff;
-    --el-color-primary-light-4: #8cc4ff;
-    --el-color-primary-light-5: #9fceff;
-    --el-color-primary-light-6: #b2d8ff;
-    --el-color-primary-light-7: #c5e1ff;
-    --el-color-primary-light-8: #d8ebff;
-    --el-color-primary-light-9: #ebf5ff;
-    --el-color-primary-dark-1: #398ee5;
-    --el-color-primary-dark-2: #337ecc;
-    --el-color-primary-dark-3: #2c6eb2;
-    --el-color-primary-dark-4: #265e99;
-    --el-color-primary-dark-5: #204f7f;
-    --el-color-primary-dark-6: #193f66;
-    --el-color-primary-dark-7: #132f4c;
-    --el-color-primary-dark-8: #0c1f32;
-    --el-color-primary-dark-9: #060f19;
+    --el-color-primary: rgba(0, 0, 0, 0);
    --el-font-size-base: 13px;
    --el-disabled-bg-color: --el-bg-color;
    --el-menu-horizontal-height: 4rem;
 }

 .el-menu--inline {
-    --el-menu-active-color: var(--na-color-primary) !important;
+    --el-menu-active-color: var(--el-color-primary) !important;
 }

 .el-form-item--default {
@@ -78,7 +60,7 @@

 .el-form-item-msg {
    font-size: 1rem;
-    color: #999;
+    color: var(--el-color-info);
    flex-grow: 1;
    line-height: 2rem;
 }
@@ -97,7 +79,7 @@
 }

 .el-header {
-    background: #fff;
+    background: var(--el-color-white);
    border-bottom: 1px solid var(--el-border-color-light);
    padding: 1rem 1rem;
    display: flex;
@@ -130,7 +112,7 @@

 .el-main.nopadding {
    padding: 0;
-    background: #fff;
+    background: var(--el-color-white);
 }

 .el-drawer__body {
@@ -156,7 +138,7 @@
 }

 .drawerBG {
-    background: #f6f8f9;
+    background: var(--el-bg-color);
 }

 .el-button + .el-dropdown {
@@ -205,11 +187,11 @@
 }

 .el-table th.is-sortable:hover {
-    background: #eee;
+    background: var(--el-fill-color-dark);
 }

 .el-table .el-table__body-wrapper {
-    background: #f6f8f9;
+    background: var(--el-bg-color);
 }

 .el-col .el-card {
@@ -269,7 +251,7 @@
 }

 .aminui-side-split li.active {
-    background-color: var(--na-color-primary);
+    background-color: var(--el-color-primary);
 }

 .adminui-tags li:hover {
@@ -277,7 +259,7 @@
 }

 .adminui-tags li.active {
-    background-color: var(--na-color-primary) !important;
+    background-color: var(--el-color-primary) !important;
 }

 .contextmenu li:hover {
@@ -286,12 +268,12 @@
 }

 .data-box .item-background {
-    background-color: var(--na-color-primary) !important;
+    background-color: var(--el-color-primary) !important;
 }

 .layout-setting,
 .diy-grid-setting {
-    background-color: var(--na-color-primary) !important;
+    background-color: var(--el-color-primary) !important;
 }

 .el-descriptions__body .el-descriptions__table {
--- a/src/frontend/admin/src/style/pages.scss
+++ b/src/frontend/admin/src/style/pages.scss
@@ -70,7 +70,7 @@

 .common-header-right a {
    font-size: 1.3rem;
-    color: var(--na-color-primary);
+    color: var(--el-color-primary);
    cursor: pointer;
 }

@@ -107,7 +107,7 @@
 }

 .common-main .link {
-    color: var(--na-color-primary);
+    color: var(--el-color-primary);
    cursor: pointer;
 }

--- a/src/frontend/admin/src/utils/avatar.js
+++ b/src/frontend/admin/src/utils/avatar.js
@@ -20,7 +20,7 @@ export default {
        // <text> name
        const text = document.createElement('text')

-        text.setAttribute('fill', '#fff')
+        text.setAttribute('fill', 'white')
        text.setAttribute('x', '50%')
        text.setAttribute('y', '50%')
        text.setAttribute('text-anchor', 'middle')
--- a/src/frontend/admin/src/utils/color.js
+++ b/src/frontend/admin/src/utils/color.js
@@ -1,4 +1,5 @@
 export default {
+    colorSets: ['#6cd8aa', '#b1ecd3', '#7ca594', '#ff997f', '#ffccbf', '#dfb2a7', '#6caad8', '#b1d3ec', '#7c94a5', '#ffbf7f', '#ffdfbf', '#dfc3a7'],
    //hex颜色转rgb颜色
    HexToRgb(str) {
        str = str.replace('#', '')
--- a/src/frontend/admin/src/utils/print.js
+++ b/src/frontend/admin/src/utils/print.js
@@ -43,7 +43,7 @@ Print.prototype = {
            str += styles[i].outerHTML
        }
        str += '<style>' + (this.options.noPrint ? this.options.noPrint : '.no-print') + '{display:none;}</style>'
-        str += '<style>html,body{background-color:#fff;}</style>'
+        str += '<style>html,body{background-color:white;}</style>'
        return str
    },

--- a/src/frontend/admin/src/views/dev/code/index.vue
+++ b/src/frontend/admin/src/views/dev/code/index.vue
@@ -6,7 +6,7 @@
                <el-card :body-style="{ padding: '0' }" shadow="hover">
                    <div class="code-item">
                        <div :style="{ background: 'blue' }" class="img">
-                            <el-icon :style="`background-image: -webkit-linear-gradient(top left, #fff, blue 10rem)`">
+                            <el-icon>
                                <component :is="`sc-icon-js`" />
                            </el-icon>
                        </div>
@@ -23,7 +23,7 @@
                <el-card :body-style="{ padding: '0' }" shadow="hover">
                    <div class="code-item">
                        <div :style="{ background: 'orange' }" class="img">
-                            <el-icon :style="`background-image: -webkit-linear-gradient(top left, #fff, blue 10rem)`">
+                            <el-icon>
                                <component :is="`sc-icon-csharp`" />
                            </el-icon>
                        </div>
@@ -49,7 +49,7 @@
                <el-card :body-style="{ padding: '0' }" shadow="hover">
                    <div class="code-item">
                        <div :style="{ background: 'green' }" class="img">
-                            <el-icon :style="`background-image: -webkit-linear-gradient(top left, #fff, green 10rem)`">
+                            <el-icon>
                                <component :is="`el-icon-picture`" />
                            </el-icon>
                        </div>
@@ -79,7 +79,7 @@
                <el-card :body-style="{ padding: '0' }" shadow="hover">
                    <div class="code-item">
                        <div :style="{ background: 'gray' }" class="img">
-                            <el-icon :style="`background-image: -webkit-linear-gradient(top left, #fff, green 10rem)`">
+                            <el-icon>
                                <component :is="`el-icon-picture`" />
                            </el-icon>
                        </div>
@@ -170,7 +170,6 @@ export default {
 .code-item .img {
    width: 100%;
    height: 10rem;
-    background: #09f;
    display: flex;
    align-items: center;
    justify-content: center;
@@ -178,9 +177,7 @@ export default {

 .code-item .img i {
    font-size: 7.7rem;
-    color: #fff;
-    background-image: -webkit-linear-gradient(top left, #fff, #09f 10rem);
-    -webkit-background-clip: text;
+    color: var(--el-color-white);
    -webkit-text-fill-color: transparent;
 }

@@ -194,7 +191,7 @@ export default {

 .code-item .title h4 {
    font-size: 0.9rem;
-    color: #999;
+    color: var(--el-color-info);
    font-weight: normal;
    margin-top: 0.4rem;
 }
--- a/src/frontend/admin/src/views/guest/components/commonPage.vue
+++ b/src/frontend/admin/src/views/guest/components/commonPage.vue
@@ -3,7 +3,7 @@
        <el-header>
            <div class="common-header-left">
                <div class="common-header-logo">
-                    <img :alt="$CONFIG.APP_NAME" src="@/assets/img/logo.png" />
+                    <img :alt="$CONFIG.APP_NAME" class="logo-fill-color" src="@/assets/img/logo.svg" />
                    <label>{{ $CONFIG.APP_NAME }}</label>
                </div>
                <div class="common-header-title">{{ title }}</div>
--- a/src/frontend/admin/src/views/guest/login.vue
+++ b/src/frontend/admin/src/views/guest/login.vue
@@ -34,7 +34,7 @@
            <div class="login-form">
                <div class="login-header">
                    <div class="logo">
-                        <img :alt="$CONFIG.APP_NAME" src="@/assets/img/logo.png" />
+                        <img :alt="$CONFIG.APP_NAME" class="logo-fill-color" src="@/assets/img/logo.svg" />
                        <label>{{ $CONFIG.APP_NAME }}</label>
                    </div>
                </div>
@@ -125,7 +125,7 @@ export default {
 .login_bg {
    width: 100%;
    height: 100%;
-    background: #fff;
+    background: var(--el-color-white);
    display: flex;
 }

@@ -166,7 +166,7 @@ export default {
 }

 .login-form:deep(.login-forgot) a {
-    color: var(--na-color-primary);
+    color: var(--el-color-primary);
 }

 .login-form:deep(.login-forgot) a:hover {
@@ -179,7 +179,7 @@ export default {
 }

 .login-form:deep(.login-reg) a {
-    color: var(--na-color-primary);
+    color: var(--el-color-primary);
 }

 .login-form:deep(.login-reg) a:hover {
--- a/src/frontend/admin/src/views/home/index.vue
+++ b/src/frontend/admin/src/views/home/index.vue
@@ -4,6 +4,15 @@
        <widgets v-if="dashboard" @on-customizing="onCustomizing"></widgets>
        <work v-else></work>
    </el-main>
+
+    <el-tour v-model="tour.open" @close="$TOOL.data.set('TOUR_TIP_READ_INDEX', true)">
+        <el-tour-step :target="tour.targets.tags" :title="$t('操作指引')"> {{ $t('按下 ALT+Q 可快速关闭当前标签页') }} </el-tour-step>
+        <el-tour-step :target="tour.targets.search" :title="$t('操作指引')"> {{ $t('快速查找菜单功能') }} </el-tour-step>
+        <el-tour-step :target="tour.targets.userCenter" :title="$t('操作指引')"> {{ $t('修改个人信息和密码') }} </el-tour-step>
+        <el-tour-step v-if="dashboard" :target="tour.targets.layoutSetting" :title="$t('操作指引')">
+            {{ $t('自定义首页布局') }}
+        </el-tour-step>
+    </el-tour>
 </template>

 <script>
@@ -19,6 +28,9 @@ export default {
    },
    data() {
        return {
+            tour: {
+                targets: {},
+            },
            loading: true,
            mainHeight: 'auto',
            dashboard: false,
@@ -30,7 +42,29 @@ export default {
        this.dashboard = this.$GLOBAL.user.roles.findIndex((x) => x.displayDashboard) >= 0
        this.loading = false
    },
-    mounted() {},
+    mounted() {
+        this.$nextTick(() => {
+            if (this.$TOOL.data.get('TOUR_TIP_READ_INDEX')) {
+                return
+            }
+
+            const timer = setInterval(() => {
+                this.tour.targets.tags = document.getElementsByClassName('adminui-tags')[0]
+                this.tour.targets.search = document.getElementsByClassName('userbar-btn-search')[0]
+                this.tour.targets.userCenter = document.getElementsByClassName('user-center')[0]
+                if (this.dashboard) {
+                    this.tour.targets.layoutSetting = document.getElementsByClassName('layout-setting')[0]
+                }
+                if (this.tour.targets.tags && this.tour.targets.search && this.tour.targets.userCenter) {
+                    if (this.dashboard && !this.tour.targets.layoutSetting) {
+                        return
+                    }
+                    this.tour.open = true
+                    clearInterval(timer)
+                }
+            }, 1000)
+        })
+    },
    methods: {
        onCustomizing(isCustomizing) {
            this.mainHeight = isCustomizing ? '100%' : 'auto'
--- a/src/frontend/admin/src/views/home/widgets/components/change-log.vue
+++ b/src/frontend/admin/src/views/home/widgets/components/change-log.vue
@@ -44,7 +44,7 @@ export default {
        display: none;
    }
    a {
-        color: var(--na-color-primary);
+        color: var(--el-color-primary);
    }
 }
 </style>
--- a/src/frontend/admin/src/views/home/widgets/components/components/layout.vue
+++ b/src/frontend/admin/src/views/home/widgets/components/components/layout.vue
@@ -84,14 +84,14 @@ export default {
 }

 .selectLayout-item:hover {
-    border-color: var(--na-color-primary);
+    border-color: var(--el-color-primary);
 }

 .selectLayout-item.active {
-    border-color: var(--na-color-primary);
+    border-color: var(--el-color-primary);
 }

 .selectLayout-item.active span {
-    background: var(--na-color-primary);
+    background: var(--el-color-primary);
 }
 </style>
--- a/src/frontend/admin/src/views/home/widgets/components/ver.vue
+++ b/src/frontend/admin/src/views/home/widgets/components/ver.vue
@@ -1,7 +1,7 @@
 <template>
    <el-card v-loading="loading" class="main" shadow="never">
        <div class="wrap">
-            <img alt="" src="@/assets/img/logo.png" width="200" />
+            <img alt="" class="logo-fill-color" src="@/assets/img/logo.svg" width="200" />
            <h2>{{ packageJson.name }}</h2>
            <p>{{ ver }}</p>
            <el-link href="https://github.com/nsnail/NetAdmin" target="_blank">{{ $t('喜欢就点个 Star⭐️ 吧！') }}</el-link>
--- a/src/frontend/admin/src/views/home/widgets/index.vue
+++ b/src/frontend/admin/src/views/home/widgets/index.vue
@@ -273,7 +273,7 @@ export default {

 .widgets-aside {
    width: 25rem;
-    background: #fff;
+    background: var(--el-color-white);
    position: relative;
    overflow: auto;
 }
@@ -335,7 +335,7 @@ export default {
 }

 .customizing .widgets-wrapper .draggable-box {
-    border: 1px dashed var(--na-color-primary);
+    border: 1px dashed var(--el-color-primary);
    padding: 1rem;
 }

@@ -364,8 +364,8 @@ export default {
 }

 .customize-overlay label {
-    background: var(--na-color-primary);
-    color: #fff;
+    background: var(--el-color-primary);
+    color: var(--el-color-white);
    height: 4rem;
    padding: 0 3rem;
    border-radius: 3rem;
@@ -409,7 +409,6 @@ export default {
    justify-content: center;
    font-size: 1.4rem;
    margin-right: 1rem;
-    color: #6a8bad;
 }

 .widgets-list-item .item-info {
@@ -424,7 +423,7 @@ export default {

 .widgets-list-item .item-info p {
    font-size: 0.9rem;
-    color: #999;
+    color: var(--el-color-info);
    cursor: default;
 }

@@ -442,10 +441,6 @@ export default {
 }

 .dark {
-    .widgets-aside {
-        background: #2b2b2b;
-    }
-
    .customize-overlay {
        background: rgba(43, 43, 43, 0.9);
    }
--- a/src/frontend/admin/src/views/home/work/components/myapp.vue
+++ b/src/frontend/admin/src/views/home/work/components/myapp.vue
@@ -1,7 +1,7 @@
 <template>
    <div>
        <ul class="myMods">
-            <li v-for="mod in myMods" :key="mod.path" :style="{ background: mod.meta.color || '#909399' }">
+            <li v-for="mod in myMods" :key="mod.path" :style="{ background: mod.meta.color || 'var(--el-text-color-secondary)' }">
                <a v-if="mod.meta.type === 'link'" :href="mod.path" target="_blank">
                    <el-icon>
                        <component :is="mod.meta.icon || `el-icon-menu`" />
@@ -29,7 +29,7 @@
                <h4>{{ $t('我的常用') }} ( {{ myMods.length }} )</h4>
                <draggable v-model="myMods" animation="200" group="people" item-key="path" tag="ul">
                    <template #item="{ element }">
-                        <li :style="{ background: element.meta.color || '#909399' }">
+                        <li :style="{ background: element.meta.color || 'var(--el-text-color-secondary)' }">
                            <el-icon>
                                <component :is="element.meta.icon || el - icon - menu" />
                            </el-icon>
@@ -42,7 +42,7 @@
                <h4>{{ $t('全部应用') }} ( {{ filterMods.length }} )</h4>
                <draggable v-model="filterMods" :sort="false" animation="200" group="people" item-key="path" tag="ul">
                    <template #item="{ element }">
-                        <li :style="{ background: element.meta.color || '#909399' }">
+                        <li :style="{ background: element.meta.color || 'var(--el-text-color-secondary)' }">
                            <el-icon>
                                <component :is="element.meta.icon || el - icon - menu" />
                            </el-icon>
@@ -148,17 +148,17 @@ export default {
    align-items: center;
    justify-content: center;
    text-align: center;
-    color: #fff;
+    color: var(--el-color-white);
 }

 .myMods li i {
    font-size: 2rem;
-    color: #fff;
+    color: var(--el-color-white);
 }

 .myMods li p {
    font-size: 0.9rem;
-    color: #fff;
+    color: var(--el-color-white);
    margin-top: 1rem;
    width: 100%;
    white-space: nowrap;
@@ -167,19 +167,19 @@ export default {
 }

 .modItem-add {
-    border: 1px dashed #ddd;
+    border: 1px dashed var(--el-border-color-darker);
    cursor: pointer;
 }

 .modItem-add i {
    font-size: 2.3rem;
-    color: #999 !important;
+    color: var(--el-color-info) !important;
 }

 .modItem-add:hover,
 .modItem-add:hover i {
-    border-color: var(--na-color-primary);
-    color: var(--na-color-primary) !important;
+    border-color: var(--el-color-primary);
+    color: var(--el-color-primary) !important;
 }

 .setMods {
@@ -202,7 +202,7 @@ export default {
    height: 6rem;
    text-align: center;
    margin: 0.4rem;
-    color: #fff;
+    color: var(--el-color-white);
    vertical-align: top;
    padding: 1rem 0.3rem 0.3rem;
    cursor: move;
--- a/src/frontend/admin/src/views/profile/settings.vue
+++ b/src/frontend/admin/src/views/profile/settings.vue
@@ -77,7 +77,7 @@ import DEFAULT_CONFIG from '@/config'
 export default {
    data() {
        return {
-            colorList: [DEFAULT_CONFIG.APP_SET_COLOR, '#009688', '#536dfe', '#ff5c93', '#c62f2f', '#fd726d'],
+            colorList: [DEFAULT_CONFIG.APP_SET_COLOR, ...colorTool.colorSets],
            config: {
                layout: this.$TOOL.data.get('APP_SET_LAYOUT') || this.$CONFIG.APP_SET_LAYOUT,
                menuIsCollapse: this.$TOOL.data.get('APP_SET_MENU_IS_COLLAPSE') || this.$CONFIG.APP_SET_MENU_IS_COLLAPSE,