feat: 外观设置

ui/src/layout/components/app-header/index.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="app-header">
+    <TopBar>
+      <template #logo> </template>
+    </TopBar>
+  </div>
+</template>
+
+<script setup lang="ts">
+import TopBar from '../top-bar/index.vue'
+import useStore from '@/stores'
+const { common } = useStore()
+</script>
+
+<style lang="scss" scoped>
+.app-header {
+  background: var(--app-header-bg-color);
+  position: fixed;
+  width: 100%;
+  left: 0;
+  top: 0;
+  z-index: 100;
+}
+</style>

ui/src/layout/components/index.ts

@@ -1,3 +1,4 @@
 export { default as Sidebar } from './sidebar/index.vue'
 export { default as AppMain } from './app-main/index.vue'
 export { default as TopBar } from './top-bar/index.vue'
+export { default as AppHeader } from './app-header/index.vue'

ui/src/layout/components/top-bar/index.vue

@@ -12,7 +12,9 @@
     <div class="flex-center h-full">
       <div class="app-title-container cursor" @click="router.push('/')">
         <div class="logo flex-center">
-          <img src="@/assets/MaxKB-logo.svg" height="35" />
+          <slot name="logo">
+            <img src="@/assets/MaxKB-logo.svg" height="35" />
+          </slot>
         </div>
       </div>
       <TopMenu></TopMenu>

ui/src/layout/layout-template/AppLayout.vue

@@ -1,36 +1,15 @@
 <script setup lang="ts">
-import { TopBar, AppMain } from '../components'
+import { AppHeader, AppMain } from '../components'
 </script>
 
 <template>
   <div class="app-layout">
-    <div class="app-header">
+    <AppHeader />
-      <TopBar />
-    </div>
     <div class="app-main">
       <AppMain />
     </div>
   </div>
 </template>
 <style lang="scss">
-.app-layout {
+@import './index.scss';
-  background-color: var(--app-layout-bg-color);
-  height: 100%;
-}
-
-.app-main {
-  position: relative;
-  height: 100%;
-  padding: var(--app-header-height) 0 0 !important;
-  box-sizing: border-box;
-  overflow: auto;
-}
-.app-header {
-  background: var(--app-header-bg-color);
-  position: fixed;
-  width: 100%;
-  left: 0;
-  top: 0;
-  z-index: 100;
-}
 </style>

ui/src/layout/layout-template/DetailLayout.vue

@@ -12,15 +12,7 @@
 <script setup lang="ts">
 import {  Sidebar, AppMain } from '../components'
 </script>
-<style lang="scss">
+<style lang="scss" scoped>
-.sidebar-container {
+@import './index.scss';
-  box-sizing: border-box;
+
-  transition: width 0.28s;
-  width: var(--sidebar-width);
-  min-width: var(--sidebar-width);
-  background-color: var(--sidebar-bg-color);
-}
-.view-container {
-  width: calc(100% - var(--sidebar-width));
-}
 </style>

ui/src/layout/layout-template/SystemLayout.vue

@@ -1,8 +1,6 @@
 <template>
   <div class="app-layout">
-    <div class="app-header">
+    <AppHeader />
-      <TopBar />
-    </div>
     <div class="app-main">
       <div class="main-layout h-full flex">
         <div class="sidebar-container">
@@ -17,37 +15,8 @@
 </template>
 
 <script setup lang="ts">
-import { TopBar, Sidebar, AppMain } from '../components'
+import { AppHeader, Sidebar, AppMain } from '../components'
 </script>
-<style lang="scss">
+<style lang="scss" scoped>
-.app-layout {
+@import './index.scss';
-  background-color: var(--app-layout-bg-color);
-  height: 100%;
-}
-
-.app-main {
-  position: relative;
-  height: 100%;
-  padding: var(--app-header-height) 0 0 !important;
-  box-sizing: border-box;
-  overflow: auto;
-}
-.app-header {
-  background: var(--app-header-bg-color);
-  position: fixed;
-  width: 100%;
-  left: 0;
-  top: 0;
-  z-index: 100;
-}
-.sidebar-container {
-  box-sizing: border-box;
-  transition: width 0.28s;
-  width: var(--sidebar-width);
-  min-width: var(--sidebar-width);
-  background-color: var(--sidebar-bg-color);
-}
-.view-container {
-  width: calc(100% - var(--sidebar-width));
-}
 </style>

ui/src/layout/layout-template/index.scss

@@ -0,0 +1,23 @@
+.app-layout {
+  background-color: var(--app-layout-bg-color);
+  height: 100%;
+}
+
+.app-main {
+  position: relative;
+  height: 100%;
+  padding: var(--app-header-height) 0 0 !important;
+  box-sizing: border-box;
+  overflow: auto;
+}
+
+.sidebar-container {
+  box-sizing: border-box;
+  transition: width 0.28s;
+  width: var(--sidebar-width);
+  min-width: var(--sidebar-width);
+  background-color: var(--sidebar-bg-color);
+}
+.view-container {
+  width: calc(100% - var(--sidebar-width));
+}

ui/src/views/theme/index.vue

@@ -102,6 +102,8 @@ import { ref, reactive, watch } from 'vue'
 import type { FormInstance, FormRules } from 'element-plus'
 import LoginPreview from './LoginPreview.vue'
 import { useElementPlusTheme } from 'use-element-plus-theme'
+import useStore from '@/stores'
+const { common } = useStore()
 
 const themeList = [
   {
@@ -161,7 +163,7 @@ watch(
   () => themeForm.value.theme,
   (val) => {
     if (val) {
-      console.log(val)
+      common.setTheme(val)
     }
   }
 )