theme change is ready

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