feat(component): Add Footer component

src/components/Setting/src/Setting.vue

@@ -32,7 +32,7 @@ const setSystemTheme = (color: string) => {
 }
 
 // 头部主题相关
-const headerTheme = ref(appStore.getTheme.topHeaderBgColor)
+const headerTheme = ref(appStore.getTheme.topHeaderBgColor || '')
 
 const setHeaderTheme = (color: string) => {
   const isDarkColor = colorIsDark(color)
@@ -55,7 +55,7 @@ const setHeaderTheme = (color: string) => {
 }
 
 // 菜单主题相关
-const menuTheme = ref(appStore.getTheme.leftMenuBgColor)
+const menuTheme = ref(appStore.getTheme.leftMenuBgColor || '')
 
 const setMenuTheme = (color: string) => {
   const primaryColor = useCssVar('--el-color-primary', document.documentElement)
@@ -91,13 +91,11 @@ const setMenuTheme = (color: string) => {
 // 监听layout变化，重置一些主题色
 watch(
   () => layout.value,
-  (n, o) => {
-    if (o === 'top') {
-      menuTheme.value = '#fff'
-      setMenuTheme('#fff')
-    }
-    if ((o === 'classic' || o === 'topLeft') && n === 'top') {
-      menuTheme.value = headerTheme.value
+  (n) => {
+    if (n === 'top') {
+      headerTheme.value = '#fff'
+      setHeaderTheme('#fff')
+    } else {
       setMenuTheme(unref(menuTheme))
     }
   }
@@ -125,6 +123,8 @@ tagsView: ${appStore.getTagsView},
 logo: ${appStore.getLogo},
 // 固定header
 fixedHeader: ${appStore.getFixedHeader},
+// 页脚
+footer: ${appStore.getFooter},
 // 灰色模式
 greyMode: ${appStore.getGreyMode},
 // layout布局

src/components/Setting/src/components/InterfaceDisplay.vue

@@ -71,6 +71,13 @@ const fixedHeaderChange = (show: boolean) => {
   appStore.setFixedHeader(show)
 }
 
+// 页脚
+const footer = ref(appStore.getFooter)
+
+const footerChange = (show: boolean) => {
+  appStore.setFooter(show)
+}
+
 // 灰色模式
 const greyMode = ref(appStore.getGreyMode)
 
@@ -137,6 +144,11 @@ watch(
       <ElSwitch v-model="fixedHeader" @change="fixedHeaderChange" />
     </div>
 
+    <div class="flex justify-between items-center">
+      <span class="text-14px">{{ t('setting.footer') }}</span>
+      <ElSwitch v-model="footer" @change="footerChange" />
+    </div>
+
     <div class="flex justify-between items-center">
       <span class="text-14px">{{ t('setting.greyMode') }}</span>
       <ElSwitch v-model="greyMode" @change="greyModeChange" />