feat: admin console dark theme

2025-11-04 08:13:43 +08:00 · 2024-04-26 18:10:17 +08:00
parent 34648c704f
commit 5b16dc6ee7
17 changed files with 197 additions and 83 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,7 +6,7 @@
 * 功能优化：使用思维链提示词生成思维导图，确保生成的思维导图不会出现格式错误
 * 功能优化：优化首页登录注册页面的 UI
 * BUG修复：修复License验证的逻辑漏洞
-* 功能优化：支持点卡充值设置有效期
+* Bug修复：后台添加用户的时候密码规则限制跟前台注册保持一致

 ## v4.0.4

--- a/web/src/assets/css/color-dark.styl
+++ b/web/src/assets/css/color-dark.styl
@@ -1,30 +1,95 @@
-.admin-home {
-  .header {
-    
-  }
+.dark {
+  color-scheme: dark;
+  --el-color-primary: #409eff;
+  --el-color-primary-light-3: #3375b9;
+  --el-color-primary-light-5: #2a598a;
+  --el-color-primary-light-7: #213d5b;
+  --el-color-primary-light-8: #1d3043;
+  --el-color-primary-light-9: #18222c;
+  --el-color-primary-dark-2: #66b1ff;
+  --el-color-success: #67c23a;
+  --el-color-success-light-3: #4e8e2f;
+  --el-color-success-light-5: #3e6b27;
+  --el-color-success-light-7: #2d481f;
+  --el-color-success-light-8: #25371c;
+  --el-color-success-light-9: #1c2518;
+  --el-color-success-dark-2: #85ce61;
+  --el-color-warning: #e6a23c;
+  --el-color-warning-light-3: #a77730;
+  --el-color-warning-light-5: #7d5b28;
+  --el-color-warning-light-7: #533f20;
+  --el-color-warning-light-8: #3e301c;
+  --el-color-warning-light-9: #292218;
+  --el-color-warning-dark-2: #ebb563;
+  --el-color-danger: #f56c6c;
+  --el-color-danger-light-3: #b25252;
+  --el-color-danger-light-5: #854040;
+  --el-color-danger-light-7: #582e2e;
+  --el-color-danger-light-8: #412626;
+  --el-color-danger-light-9: #2b1d1d;
+  --el-color-danger-dark-2: #f78989;
+  --el-color-error: #f56c6c;
+  --el-color-error-light-3: #b25252;
+  --el-color-error-light-5: #854040;
+  --el-color-error-light-7: #582e2e;
+  --el-color-error-light-8: #412626;
+  --el-color-error-light-9: #2b1d1d;
+  --el-color-error-dark-2: #f78989;
+  --el-color-info: #909399;
+  --el-color-info-light-3: #6b6d71;
+  --el-color-info-light-5: #525457;
+  --el-color-info-light-7: #393a3c;
+  --el-color-info-light-8: #2d2d2f;
+  --el-color-info-light-9: #202121;
+  --el-color-info-dark-2: #a6a9ad;
+  --el-box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, 0.36), 0px 8px 20px rgba(0, 0, 0, 0.72);
+  --el-box-shadow-light: 0px 0px 12px rgba(0, 0, 0, 0.72);
+  --el-box-shadow-lighter: 0px 0px 6px rgba(0, 0, 0, 0.72);
+  --el-box-shadow-dark: 0px 16px 48px 16px rgba(0, 0, 0, 0.72), 0px 12px 32px #000000, 0px 8px 16px -8px #000000;
+  --el-bg-color-page: #0a0a0a;
+  --el-bg-color: #141414;
+  --el-bg-color-overlay: #1d1e1f;
+  --el-text-color-primary: #E5EAF3;
+  --el-text-color-regular: #CFD3DC;
+  --el-text-color-secondary: #A3A6AD;
+  --el-text-color-placeholder: #8D9095;
+  --el-text-color-disabled: #6C6E72;
+  --el-border-color-darker: #636466;
+  --el-border-color-dark: #58585B;
+  --el-border-color: #4C4D4F;
+  --el-border-color-light: #414243;
+  --el-border-color-lighter: #363637;
+  --el-border-color-extra-light: #2B2B2C;
+  --el-fill-color-darker: #424243;
+  --el-fill-color-dark: #39393A;
+  --el-fill-color: #303030;
+  --el-fill-color-light: #262727;
+  --el-fill-color-lighter: #1D1D1D;
+  --el-fill-color-extra-light: #191919;
+  --el-fill-color-blank: transparent;
+  --el-mask-color: rgba(0, 0, 0, 0.8);
+  --el-mask-color-extra-light: rgba(0, 0, 0, 0.3)
+  --el-menu-bg-color-dark: #39393A
+  --el-menu-bg-color-darker: #424243
+}

-  .login-wrap {
-    background: #324157;
-  }
+.dark .el-button {
+  --el-button-disabled-text-color: rgba(255, 255, 255, 0.5)
+}

-  .plugins-tips {
-    background: #eef1f6;
-  }
+.dark .el-card {
+  --el-card-bg-color: var(--el-bg-color-overlay)
+}

-  .plugins-tips a {
-    color: #20a0ff;
-  }
-
-  .tags-li.active {
-    border: 1px solid #409EFF;
-    background-color: #409EFF;
-  }
-
-  .message-title {
-    color: #20a0ff;
-  }
-
-  .collapse-btn:hover {
-    background: rgb(40, 52, 70);
-  }
+.dark .el-empty {
+  --el-empty-fill-color-0: var(--el-color-black);
+  --el-empty-fill-color-1: #4b4b52;
+  --el-empty-fill-color-2: #36383d;
+  --el-empty-fill-color-3: #1e1e20;
+  --el-empty-fill-color-4: #262629;
+  --el-empty-fill-color-5: #202124;
+  --el-empty-fill-color-6: #212224;
+  --el-empty-fill-color-7: #1b1c1f;
+  --el-empty-fill-color-8: #1c1d1f;
+  --el-empty-fill-color-9: #18181a
 }
--- a/web/src/assets/css/main.styl
+++ b/web/src/assets/css/main.styl
@@ -37,6 +37,19 @@ body {
    transition: left .3s ease-in-out;
    background: #f0f0f0;

+    ::-webkit-scrollbar {
+      width: 8px; /* 滚动条宽度 */
+    }
+
+    ::-webkit-scrollbar-thumb {
+      background-color: #666666;
+      border-radius 8px
+    }
+
+    ::-webkit-scrollbar-thumb:hover {
+      background-color: #999999;
+    }
+
    .content {
      width: auto;
      height: 100vh;
@@ -45,14 +58,8 @@ body {

      .container {
        padding: 15px 20px 30px 20px;
-        background: #fff;
-        border: 1px solid #ddd;
-        border-radius: 5px;
+        background: #ffffff;
        margin-bottom 80px
-
-        .handle-box {
-          margin-bottom: 20px;
-        }
      }

      .crumbs {
@@ -60,7 +67,7 @@ body {
      }

      .el-table th {
-        background-color: #f5f7fa !important;
+        background-color: #f5f7fa;
      }

      .pagination {
@@ -142,6 +149,23 @@ body {
        display: none !important;
      }
    }
+
+    .dark {
+      background: var(--el-bg-color);
+
+      .container {
+        background: var(--el-bg-color);
+      }
+
+      .crumbs {
+        margin: 10px 0;
+      }
+
+      .el-table th {
+        background-color: var(--el-fill-color-darker);
+      }
+
+    }
  }

  .content-collapse {
--- a/web/src/components/admin/AdminSidebar.vue
+++ b/web/src/components/admin/AdminSidebar.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="sidebar">
+  <div class="sidebar dark">
    <div class="logo">
      <el-image :src="logo"/>
      <span class="text" v-show="!sidebar.collapse">{{ title }}</span>
@@ -234,4 +234,32 @@ setMenuItems(items)
  width: 0;
 }

+.sidebar.dark {
+  border-right 1px solid var(--el-border-color-dark)
+
+  .logo {
+    background var(--el-bg-color)
+
+    .text {
+      color var(--el-text-color-regular)
+    }
+  }
+
+  ul {
+    background var(--el-bg-color)
+
+    .el-menu-item.is-active {
+      background-color var(--el-menu-bg-color-dark)
+    }
+
+    .el-menu-item:hover {
+      background-color var(--el-menu-bg-color-darker)
+    }
+  }
+
+  .sidebar-el-menu:not(.el-menu--collapse) {
+    width: 250px;
+  }
+}
+
 </style>
--- a/web/src/views/admin/ApiKey.vue
+++ b/web/src/views/admin/ApiKey.vue
@@ -284,15 +284,8 @@ const changePlatform = () => {

 <style lang="stylus" scoped>
 .list {
-
-  .opt-box {
-    padding-bottom: 10px;
-    display: flex;
-    justify-content flex-end
-
-    .el-icon {
-      margin-right: 5px;
-    }
+  .handle-box {
+    margin-bottom 20px
  }

  .copy-key {
--- a/web/src/views/admin/ChatList.vue
+++ b/web/src/views/admin/ChatList.vue
@@ -343,8 +343,8 @@ const showMessages = (row) => {

 <style lang="stylus" scoped>
 .chat-list {
-
  .handle-box {
+    margin-bottom 20px
    .handle-input {
      max-width 150px;
      margin-right 10px;
--- a/web/src/views/admin/ChatModel.vue
+++ b/web/src/views/admin/ChatModel.vue
@@ -350,14 +350,8 @@ const remove = function (row) {
@import "@/assets/css/admin/form.styl";
 .model-list {

-  .opt-box {
-    padding-bottom: 10px;
-    display: flex;
-    justify-content flex-end
-
-    .el-icon {
-      margin-right: 5px;
-    }
+  .handle-box {
+    margin-bottom 20px
  }

  .cell {
--- a/web/src/views/admin/Functions.vue
+++ b/web/src/views/admin/Functions.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="container role-list" v-loading="loading">
+  <div class="container function" v-loading="loading">
    <div class="handle-box">
      <el-button type="primary" :icon="Plus" @click="addRow">新增</el-button>
    </div>
@@ -296,15 +296,9 @@ const generateToken = () => {
 </script>

 <style lang="stylus" scoped>
-.role-list {
-  .opt-box {
-    padding-bottom: 10px;
-    display flex;
-    justify-content flex-end
-
-    .el-icon {
-      margin-right 5px;
-    }
+.function {
+  .handle-box {
+    margin-bottom 20px
  }

  .param-line {
--- a/web/src/views/admin/Home.vue
+++ b/web/src/views/admin/Home.vue
@@ -4,7 +4,7 @@
    <div class="content-box" :class="{ 'content-collapse': sidebar.collapse }">
      <admin-header/>
      <admin-tags/>
-      <div class="content">
+      <div class="content dark">
        <router-view v-slot="{ Component }">
          <transition name="move" mode="out-in">
            <keep-alive :include="tags.nameList">
@@ -40,7 +40,7 @@ checkAdminSession().then(() => {
 </script>

 <style scoped lang="stylus">
-@import '@/assets/css/main.css';
-@import '@/assets/css/color-dark.css';
+@import '@/assets/css/color-dark.styl';
+@import '@/assets/css/main.styl';
@import '@/assets/iconfont/iconfont.css';
 </style>
--- a/web/src/views/admin/LoginLog.vue
+++ b/web/src/views/admin/LoginLog.vue
@@ -63,14 +63,8 @@ const fetchList = function (_page, _pageSize) {
 <style lang="stylus" scoped>
 .list {

-  .opt-box {
-    padding-bottom: 10px;
-    display flex;
-    justify-content flex-start
-
-    .el-icon {
-      margin-right: 5px;
-    }
+  .handle-box {
+    margin-bottom 20px
  }

  .el-select {
--- a/web/src/views/admin/Manager.vue
+++ b/web/src/views/admin/Manager.vue
@@ -170,14 +170,8 @@ const remove = function (row) {
 <style lang="stylus" scoped>
 .list {

-  .opt-box {
-    padding-bottom: 10px;
-    display flex;
-    justify-content flex-end
-
-    .el-icon {
-      margin-right: 5px;
-    }
+  .handle-box {
+    margin-bottom 20px
  }

  .el-select {
--- a/web/src/views/admin/Order.vue
+++ b/web/src/views/admin/Order.vue
@@ -129,6 +129,7 @@ const remove = function (row) {
 .order {

  .handle-box {
+    margin-bottom 20px
    .handle-input {
      max-width 150px;
      margin-right 10px;
--- a/web/src/views/admin/PowerLog.vue
+++ b/web/src/views/admin/PowerLog.vue
@@ -135,6 +135,7 @@ const fetchData = () => {
 <style lang="stylus" scoped>
 .power-log {
  .handle-box {
+    margin-bottom 20px
    .handle-input {
      max-width 150px;
      margin-right 10px;
--- a/web/src/views/admin/Product.vue
+++ b/web/src/views/admin/Product.vue
@@ -207,6 +207,14 @@ const remove = function (row) {

 <style lang="stylus" scoped>
 .product {
+  .handle-box {
+    margin-bottom 20px
+
+    .handle-input {
+      max-width 150px;
+      margin-right 10px;
+    }
+  }

  .opt-box {
    padding-bottom: 10px;
--- a/web/src/views/admin/Reward.vue
+++ b/web/src/views/admin/Reward.vue
@@ -82,6 +82,14 @@ const remove = function (row) {

 <style lang="stylus" scoped>
 .list {
+  .handle-box {
+    margin-bottom 20px
+
+    .handle-input {
+      max-width 150px;
+      margin-right 10px;
+    }
+  }

  .opt-box {
    padding-bottom: 10px;
--- a/web/src/views/admin/Roles.vue
+++ b/web/src/views/admin/Roles.vue
@@ -322,6 +322,15 @@ const uploadImg = (file) => {

 <style lang="stylus" scoped>
 .role-list {
+  .handle-box {
+    margin-bottom 20px
+
+    .handle-input {
+      max-width 150px;
+      margin-right 10px;
+    }
+  }
+
  .opt-box {
    padding-bottom: 10px;
    display flex;
--- a/web/src/views/admin/Users.vue
+++ b/web/src/views/admin/Users.vue
@@ -332,6 +332,7 @@ const doResetPass = () => {
 .user-list {

  .handle-box {
+    margin-bottom 20px
    .handle-input {
      max-width 150px;
      margin-right 10px;