theme change is ready

web/src/assets/css/main.styl

@@ -52,7 +52,6 @@ body {
 
     .content {
       width: auto;
-      height: 100vh;
       overflow-y: scroll;
       box-sizing: border-box;
 

web/src/components/ConfigDialog.vue

@@ -25,10 +25,8 @@
 
 <script setup>
 import {computed, onMounted, ref} from "vue"
-import {httpGet, httpPost} from "@/utils/http";
+import {httpGet} from "@/utils/http";
 import {ElMessage} from "element-plus";
-import {Plus} from "@element-plus/icons-vue";
-import Compressor from "compressorjs";
 import {dateFormat} from "@/utils/libs";
 
 // eslint-disable-next-line no-undef

web/src/components/admin/AdminHeader.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="header admin-header">
+  <div :class="'admin-header '+theme">
     <!-- 折叠按钮 -->
     <div class="collapse-btn" @click="collapseChange">
       <el-icon v-if="sidebar.collapse">
@@ -17,17 +17,15 @@
     </div>
     <div class="header-right">
       <div class="header-user-con">
-        <!-- 消息中心 -->
-        <div class="btn-bell">
-          <el-tooltip
-              effect="dark"
-              :content="message ? `有${message}条未读消息` : `消息中心`"
-              placement="bottom"
-          >
-            <i class="iconfont icon-bell"></i>
-          </el-tooltip>
-          <span class="btn-bell-badge" v-if="message"></span>
-        </div>
+        <!-- 切换主题 -->
+        <el-switch
+            style="margin-right: 10px"
+            v-model="dark"
+            inline-prompt
+            :active-action-icon="Moon"
+            :inactive-action-icon="Sunny"
+            @change="changeTheme"
+        />
         <!-- 用户名下拉菜单 -->
         <el-dropdown class="user-name" :hide-on-click="true" trigger="click">
 					<span class="el-dropdown-link">
@@ -79,15 +77,14 @@
   </div>
 </template>
 <script setup>
-import {onMounted, ref} from 'vue';
+import {computed, onMounted, ref} from 'vue';
 import {getMenuItems, useSidebarStore} from '@/store/sidebar';
 import {useRouter} from 'vue-router';
-import {ArrowDown, ArrowRight, Expand, Fold} from "@element-plus/icons-vue";
+import {ArrowDown, ArrowRight, Expand, Fold, Moon, Sunny} from "@element-plus/icons-vue";
 import {httpGet} from "@/utils/http";
 import {ElMessage} from "element-plus";
 import {removeAdminToken} from "@/store/session";
 
-const message = ref(5);
 const sysTitle = ref(process.env.VUE_APP_TITLE)
 const version = ref(process.env.VUE_APP_VERSION)
 const avatar = ref('/images/user-info.jpg')
@@ -97,6 +94,22 @@ const sidebar = useSidebarStore();
 const router = useRouter();
 const breadcrumb = ref([])
 
+// eslint-disable-next-line no-undef
+const props = defineProps({
+  theme: String,
+});
+
+const theme = computed(() => {
+  return props.theme
+})
+const dark = ref(props.theme === 'dark' ? true : false)
+
+
+// eslint-disable-next-line no-undef
+const emits = defineEmits(['changeTheme']);
+const changeTheme = () => {
+  emits('changeTheme', dark.value)
+}
 
 router.afterEach((to, from) => {
   initBreadCrumb(to.path)
@@ -166,7 +179,7 @@ const logout = function () {
 }
 </script>
 <style scoped lang="stylus">
-.header {
+.admin-header {
   position: relative;
   box-sizing: border-box;
   overflow hidden

web/src/components/admin/AdminSidebar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="sidebar dark">
+  <div :class="'sidebar '+theme">
     <div class="logo">
       <el-image :src="logo"/>
       <span class="text" v-show="!sidebar.collapse">{{ title }}</span>
@@ -69,6 +69,15 @@ httpGet('/api/admin/config/get?key=system').then(res => {
   ElMessage.error("加载系统配置失败: " + e.message)
 })
 
+// eslint-disable-next-line no-undef
+const props = defineProps({
+  theme: String,
+});
+
+const theme = computed(() => {
+  return props.theme
+})
+
 const items = [
   {
     icon: 'home',

web/src/components/admin/AdminTags.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="tags" v-if="tags.show">
+  <div :class="'tags '+theme" v-if="tags.show">
     <ul>
       <li
           class="tags-li"
@@ -38,6 +38,16 @@ import {onBeforeRouteUpdate, useRoute, useRouter} from 'vue-router';
 import {ArrowDown, Close} from "@element-plus/icons-vue";
 import {checkAdminSession} from "@/action/session";
 import {ElMessageBox} from "element-plus";
+import {computed} from "vue";
+
+// eslint-disable-next-line no-undef
+const props = defineProps({
+  theme: String,
+});
+
+const theme = computed(() => {
+  return props.theme
+})
 
 const router = useRouter();
 checkAdminSession().catch(() => {
@@ -135,21 +145,17 @@ const handleTags = (command) => {
   overflow: hidden;
   cursor: pointer;
   height: 23px;
-  border: 1px solid #e9eaec;
-  background: #fff;
+  border: 1px solid var(--el-border-color);
+  background: var(--el-bg-color);
   padding: 0 5px 0 12px;
-  color: #666;
+  color: var(--el-text-color);
   -webkit-transition: all 0.3s ease-in;
   -moz-transition: all 0.3s ease-in;
   transition: all 0.3s ease-in;
 }
 
-.tags-li:not(.active):hover {
-  background: #f8f8f8;
-}
-
-.tags-li.active {
-  color: #fff;
+.tags-li:hover {
+  background: var(--el-menu-bg-color-dark);
 }
 
 .tags-li-title {
@@ -163,7 +169,7 @@ const handleTags = (command) => {
 }
 
 .tags-li.active .tags-li-title {
-  color: #fff;
+  color: var(--el-color-primary)
 }
 
 .tags-close-box {
@@ -175,7 +181,8 @@ const handleTags = (command) => {
   text-align: center;
   width: 110px;
   height: 30px;
-  background: #fff;
-//box-shadow: -3px 0 15px 3px rgba(0, 0, 0, 0.1); z-index: 10;
+  background: var(--el-bg-color);
+  box-shadow: -3px 0 15px 3px rgba(0, 0, 0, 0.1);
+  z-index: 10;
 }
 </style>

web/src/store/system.js

@@ -1,6 +1,7 @@
 import Storage from "good-storage";
 
 const MOBILE_THEME = process.env.VUE_APP_KEY_PREFIX + "MOBILE_THEME"
+const ADMIN_THEME = process.env.VUE_APP_KEY_PREFIX + "ADMIN_THEME"
 
 export function getMobileTheme() {
     return Storage.get(MOBILE_THEME) ? Storage.get(MOBILE_THEME) : 'light'
@@ -8,4 +9,12 @@ export function getMobileTheme() {
 
 export function setMobileTheme(theme) {
     Storage.set(MOBILE_THEME, theme)
+}
+
+export function getAdminTheme() {
+    return Storage.get(ADMIN_THEME) ? Storage.get(ADMIN_THEME) : 'light'
+}
+
+export function setAdminTheme(theme) {
+    Storage.set(ADMIN_THEME, theme)
 }

web/src/views/admin/ApiKey.vue

@@ -296,6 +296,12 @@ const changePlatform = () => {
   .el-select {
     width: 100%
   }
+
+  .pagination {
+    padding 20px 0
+    display flex
+    justify-content righ
+  }
 }
 
 .el-form {

web/src/views/admin/ChatList.vue

@@ -178,7 +178,7 @@
 import {onMounted, ref} from "vue";
 import {httpGet, httpPost} from "@/utils/http";
 import {ElMessage} from "element-plus";
-import {dateFormat, processContent, removeArrayItem} from "@/utils/libs";
+import {dateFormat, processContent} from "@/utils/libs";
 import {Search} from "@element-plus/icons-vue";
 import 'highlight.js/styles/a11y-dark.css'
 import hl from "highlight.js";
@@ -365,6 +365,12 @@ const showMessages = (row) => {
     width: 100%
   }
 
+  .pagination {
+    padding 20px 0
+    display flex
+    justify-content right
+  }
+
   .chat-box {
     overflow-y: auto;
     overflow-x hidden

web/src/views/admin/ChatModel.vue

@@ -365,5 +365,11 @@ const remove = function (row) {
     width: 100%
   }
 
+  .pagination {
+    padding 20px 0
+    display flex
+    justify-content right
+  }
+
 }
 </style>

web/src/views/admin/Functions.vue

@@ -328,5 +328,11 @@ const generateToken = () => {
       text-align center
     }
   }
+
+  .pagination {
+    padding 20px 0
+    display flex
+    justify-content right
+  }
 }
 </style>

web/src/views/admin/Home.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="admin-home" v-if="isLogin">
-    <admin-sidebar/>
+    <admin-sidebar v-model:theme="theme"/>
     <div class="content-box" :class="{ 'content-collapse': sidebar.collapse }">
-      <admin-header/>
-      <admin-tags/>
-      <div class="content dark">
+      <admin-header v-model:theme="theme" @changeTheme="changeTheme"/>
+      <admin-tags v-model:theme="theme"/>
+      <div :class="'content '+theme" :style="{height:contentHeight+'px'}">
         <router-view v-slot="{ Component }">
           <transition name="move" mode="out-in">
             <keep-alive :include="tags.nameList">
@@ -25,10 +25,13 @@ import AdminTags from "@/components/admin/AdminTags.vue";
 import {useRouter} from "vue-router";
 import {checkAdminSession} from "@/action/session";
 import {ref} from "vue";
+import {getAdminTheme, setAdminTheme} from "@/store/system";
 
 const sidebar = useSidebarStore();
 const tags = useTagsStore();
 const isLogin = ref(false)
+const contentHeight = window.innerHeight - 80
+const theme = ref(getAdminTheme())
 
 // 获取会话信息
 const router = useRouter();
@@ -37,6 +40,16 @@ checkAdminSession().then(() => {
 }).catch(() => {
   router.replace('/admin/login')
 })
+
+const changeTheme = (value) => {
+  if (value) {
+    theme.value = 'dark'
+  } else {
+    theme.value = 'light'
+  }
+  setAdminTheme(theme.value)
+}
+
 </script>
 
 <style scoped lang="stylus">

web/src/views/admin/LoginLog.vue

@@ -71,5 +71,11 @@ const fetchList = function (_page, _pageSize) {
     width: 100%
   }
 
+  .pagination {
+    padding 20px 0
+    display flex
+    justify-content right
+  }
+
 }
 </style>

web/src/views/admin/Manager.vue

@@ -74,7 +74,6 @@ import {httpGet, httpPost} from "@/utils/http";
 import {ElMessage, ElMessageBox} from "element-plus";
 import {dateFormat, removeArrayItem} from "@/utils/libs";
 import {Plus} from "@element-plus/icons-vue";
-import {Sortable} from "sortablejs";
 
 // 变量定义
 const items = ref([])
@@ -178,5 +177,11 @@ const remove = function (row) {
     width: 100%
   }
 
+  .pagination {
+    padding 20px 0
+    display flex
+    justify-content right
+  }
+
 }
 </style>

web/src/views/admin/Order.vue

@@ -150,5 +150,11 @@ const remove = function (row) {
     width: 100%
   }
 
+  .pagination {
+    padding 20px 0
+    display flex
+    justify-content right
+  }
+
 }
 </style>

web/src/views/admin/PowerLog.vue

@@ -68,7 +68,7 @@
 
 <script setup>
 import {onMounted, ref} from "vue";
-import {httpGet, httpPost} from "@/utils/http";
+import {httpPost} from "@/utils/http";
 import {ElMessage} from "element-plus";
 import {dateFormat} from "@/utils/libs";
 import {Search} from "@element-plus/icons-vue";
@@ -156,5 +156,12 @@ const fetchData = () => {
     width: 100%
   }
 
+  .pagination {
+    padding 20px 0
+    display flex
+    width 100%
+    justify-content right
+  }
+
 }
 </style>

web/src/views/admin/Product.vue

@@ -230,5 +230,11 @@ const remove = function (row) {
     width: 100%
   }
 
+  .pagination {
+    padding 20px 0
+    display flex
+    justify-content right
+  }
+
 }
 </style>

web/src/views/admin/Reward.vue

@@ -105,5 +105,11 @@ const remove = function (row) {
     width: 100%
   }
 
+  .pagination {
+    padding 20px 0
+    display flex
+    justify-content right
+  }
+
 }
 </style>

web/src/views/admin/Roles.vue

@@ -369,5 +369,11 @@ const uploadImg = (file) => {
       text-align center
     }
   }
+
+  .pagination {
+    padding 20px 0
+    display flex
+    justify-content right
+  }
 }
 </style>

web/src/views/admin/SysConfig.vue

@@ -459,10 +459,9 @@ const onUploadImg = (files, callback) => {
 
   .el-tabs {
     width 100%
-    background-color #ffffff
+    background-color var(--el-bg-color)
     padding 10px 20px 40px 20px
-    border: 1px solid #ddd;
-    border-radius: 5px
+    border: 1px solid var(--el-border-color);
 
     .container {
       .el-form {

web/src/views/admin/Users.vue

@@ -351,6 +351,11 @@ const doResetPass = () => {
     }
   }
 
+  .pagination {
+    padding 20px 0
+    display flex
+  }
+
   .el-select {
     width: 100%
   }