feat(Layout): Add topLeft layout

src/components/Breadcrumb/src/Breadcrumb.vue

@@ -83,12 +83,27 @@ export default defineComponent({
 </script>
 
 <style lang="less" scoped>
-:deep(.el-breadcrumb__item) {
+:deep(.el-breadcrumb__item):not(:last-child) {
   display: flex;
 
   .el-breadcrumb__inner {
     display: flex;
     align-items: center;
+    color: var(--top-header-text-color);
+
+    &:hover {
+      color: var(--el-color-primary);
+    }
+  }
+}
+
+:deep(.el-breadcrumb__item):last-child {
+  .el-breadcrumb__inner {
+    color: rgba(255, 255, 255, 0.6);
+
+    &:hover {
+      color: rgba(255, 255, 255, 0.6);
+    }
   }
 }
 </style>

src/components/Collapse/src/Collapse.vue

@@ -1,6 +1,11 @@
 <script setup lang="ts">
 import { computed, unref } from 'vue'
 import { useAppStore } from '@/store/modules/app'
+import { propTypes } from '@/utils/propTypes'
+
+defineProps({
+  color: propTypes.string.def('')
+})
 
 const appStore = useAppStore()
 
@@ -17,6 +22,7 @@ const toggleCollapse = () => {
     <Icon
       :size="18"
       :icon="collapse ? 'ant-design:menu-unfold-outlined' : 'ant-design:menu-fold-outlined'"
+      :color="color"
       class="cursor-pointer"
       @click="toggleCollapse"
     />

src/components/LocaleDropdown/src/LocaleDropdown.vue

@@ -3,6 +3,11 @@ import { computed, unref } from 'vue'
 import { ElDropdown, ElDropdownMenu, ElDropdownItem } from 'element-plus'
 import { useLocaleStore } from '@/store/modules/locale'
 import { useLocale } from '@/hooks/web/useLocale'
+import { propTypes } from '@/utils/propTypes'
+
+defineProps({
+  color: propTypes.string.def('')
+})
 
 const localeStore = useLocaleStore()
 
@@ -24,7 +29,13 @@ const setLang = (lang: LocaleType) => {
 
 <template>
   <ElDropdown trigger="click" @command="setLang">
-    <Icon :size="18" icon="ion:language-sharp" class="cursor-pointer" :class="$attrs.class" />
+    <Icon
+      :size="18"
+      icon="ion:language-sharp"
+      class="cursor-pointer"
+      :class="$attrs.class"
+      :color="color"
+    />
     <template #dropdown>
       <ElDropdownMenu>
         <ElDropdownItem v-for="item in langMap" :key="item.lang" :command="item.lang">

src/components/Logo/src/Logo.vue

@@ -41,17 +41,26 @@ watch(
       {
         'v-logo__Top': layout !== 'classic'
       },
-      'flex h-[var(--logo-height)] items-center cursor-pointer pl-8px relative'
+      'flex !h-[var(--logo-height)] items-center cursor-pointer pl-8px relative'
     ]"
     to="/"
   >
     <img
       src="@/assets/imgs/logo.png"
       class="w-[calc(var(--logo-height)-10px)] h-[calc(var(--logo-height)-10px)]"
     />
-    <div v-if="show" class="text-[var(--logo-title-text-color)] ml-10px text-16px font-700">{{
-      title
-    }}</div>
+    <div
+      v-if="show"
+      :class="[
+        'ml-10px text-16px font-700',
+        {
+          'text-[var(--logo-title-text-color)]': layout === 'classic',
+          'text-[var(--top-header-text-color)]': layout === 'topLeft'
+        }
+      ]"
+    >
+      {{ title }}
+    </div>
   </router-link>
 </template>
 

src/components/Menu/src/Menu.vue

@@ -7,23 +7,19 @@ import type { LayoutType } from '@/config/app'
 import { useRenderMenuItem } from './components/useRenderMenuItem'
 import { useRouter } from 'vue-router'
 import { isUrl } from '@/utils/is'
-import { Logo } from '@/components/Logo'
 
 export default defineComponent({
   name: 'Menu',
   setup() {
     const appStore = useAppStore()
 
-    // logo
-    const logo = computed(() => appStore.logo)
-
     const { push, currentRoute } = useRouter()
 
     const permissionStore = usePermissionStore()
 
     const menuMode = computed((): 'vertical' | 'horizontal' => {
       // 竖
-      const vertical: LayoutType[] = ['classic']
+      const vertical: LayoutType[] = ['classic', 'topLeft']
 
       if (vertical.includes(appStore.getLayout)) {
         return 'vertical'
@@ -64,8 +60,7 @@ export default defineComponent({
           'bg-[var(--left-menu-bg-color)]'
         ]}
       >
-        {logo.value ? <Logo></Logo> : undefined}
-        <ElScrollbar class={[{ '!h-[calc(100%-var(--logo-height))]': logo.value }]}>
+        <ElScrollbar>
           <ElMenu
             defaultActive={unref(activeMenu)}
             mode={unref(menuMode)}
@@ -103,6 +98,7 @@ export default defineComponent({
 }
 
 .@{prefix-cls} {
+  position: relative;
   transition: width var(--transition-time-02);
 
   &:after {

src/components/Screenfull/src/Screenfull.vue

@@ -1,6 +1,11 @@
 <script setup lang="ts">
 import { Icon } from '@/components/Icon'
 import { useFullscreen } from '@vueuse/core'
+import { propTypes } from '@/utils/propTypes'
+
+defineProps({
+  color: propTypes.string.def('')
+})
 
 const { toggle, isFullscreen } = useFullscreen()
 
@@ -11,6 +16,10 @@ const toggleFullscreen = () => {
 
 <template>
   <div @click="toggleFullscreen">
-    <Icon :size="18" :icon="isFullscreen ? 'zmdi:fullscreen-exit' : 'zmdi:fullscreen'" />
+    <Icon
+      :size="18"
+      :icon="isFullscreen ? 'zmdi:fullscreen-exit' : 'zmdi:fullscreen'"
+      :color="color"
+    />
   </div>
 </template>

src/components/Setting/src/Setting.vue

@@ -3,12 +3,13 @@ import { ElDrawer, ElDivider } from 'element-plus'
 import { ref, unref } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import { ThemeSwitch } from '@/components/ThemeSwitch'
-import { ColorRadioPicker } from '@/components/ColorRadioPicker'
 import { colorIsDark, lighten, hexToRGB } from '@/utils/color'
 import { useCssVar } from '@vueuse/core'
 import { useAppStore } from '@/store/modules/app'
 import { trim, setCssVar } from '@/utils'
+import ColorRadioPicker from './components/ColorRadioPicker.vue'
 import InterfaceDisplay from './components/InterfaceDisplay.vue'
+import LayoutRadioPicker from './components/LayoutRadioPicker.vue'
 
 const appStore = useAppStore()
 
@@ -26,6 +27,23 @@ const setSystemTheme = (color: string) => {
   setMenuTheme(trim(unref(leftMenuBgColor)))
 }
 
+// 头部主题相关
+const headerTheme = ref(appStore.getTheme.topHeaderBgColor)
+
+const setHeaderTheme = (color: string) => {
+  const isDarkColor = colorIsDark(color)
+  const textColor = isDarkColor ? '#fff' : 'inherit'
+  const textHoverColor = isDarkColor ? lighten(color!, 6) : '#f6f6f6'
+  setCssVar('--top-header-bg-color', color)
+  setCssVar('--top-header-text-color', textColor)
+  setCssVar('--top-header-hover-color', textHoverColor)
+  appStore.setTheme({
+    topHeaderBgColor: color,
+    topHeaderTextColor: textColor,
+    topHeaderHoverColor: textHoverColor
+  })
+}
+
 // 菜单主题相关
 const menuTheme = ref(appStore.getTheme.leftMenuBgColor)
 
@@ -81,6 +99,7 @@ const setMenuTheme = (color: string) => {
 
       <!-- 布局 -->
       <ElDivider>{{ t('setting.layout') }}</ElDivider>
+      <LayoutRadioPicker />
 
       <!-- 系统主题 -->
       <ElDivider>{{ t('setting.systemTheme') }}</ElDivider>
@@ -99,6 +118,23 @@ const setMenuTheme = (color: string) => {
         @change="setSystemTheme"
       />
 
+      <!-- 头部主题 -->
+      <ElDivider>{{ t('setting.headerTheme') }}</ElDivider>
+      <ColorRadioPicker
+        v-model="headerTheme"
+        :schema="[
+          '#fff',
+          '#151515',
+          '#5172dc',
+          '#e74c3c',
+          '#24292e',
+          '#394664',
+          '#009688',
+          '#383f45'
+        ]"
+        @change="setHeaderTheme"
+      />
+
       <!-- 菜单主题 -->
       <ElDivider>{{ t('setting.menuTheme') }}</ElDivider>
       <ColorRadioPicker

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

@@ -71,6 +71,13 @@ const logoChange = (show: boolean) => {
   appStore.setLogo(show)
 }
 
+// 固定头部
+const fixedHeader = ref(appStore.getFixedHeader)
+
+const fixedHeaderChange = (show: boolean) => {
+  appStore.setFixedHeader(show)
+}
+
 // 灰色模式
 const greyMode = ref(appStore.getGreyMode)
 
@@ -126,6 +133,11 @@ const greyModeChange = (show: boolean) => {
       <ElSwitch v-model="logo" @change="logoChange" />
     </div>
 
+    <div class="flex justify-between items-center">
+      <span class="text-14px">{{ t('setting.fixedHeader') }}</span>
+      <ElSwitch v-model="fixedHeader" @change="fixedHeaderChange" />
+    </div>
+
     <div class="flex justify-between items-center">
       <span class="text-14px">{{ t('setting.greyMode') }}</span>
       <ElSwitch v-model="greyMode" @change="greyModeChange" />

src/components/Setting/src/components/LayoutRadioPicker.vue

@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import { useAppStore } from '@/store/modules/app'
+import { computed } from 'vue'
+
+const appStore = useAppStore()
+
+const layout = computed(() => appStore.getLayout)
+console.log(layout.value)
+</script>
+
+<template>
+  <div class="v-layout-radio-picker flex flex-wrap space-x-14px">
+    <div
+      :class="[
+        'v-layout-radio-picker__classic relative w-56px h-48px cursor-pointer bg-gray-100',
+        {
+          'is-acitve': layout === 'classic'
+        }
+      ]"
+      @click="appStore.setLayout('classic')"
+    ></div>
+    <div
+      :class="[
+        'v-layout-radio-picker__top-left relative w-56px h-48px cursor-pointer bg-gray-100',
+        {
+          'is-acitve': layout === 'topLeft'
+        }
+      ]"
+      @click="appStore.setLayout('topLeft')"
+    ></div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+@prefix-cls: ~'@{namespace}-layout-radio-picker';
+
+.@{prefix-cls} {
+  &__classic {
+    border: 2px solid #e5e7eb;
+    border-radius: 4px;
+
+    &:before {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 1;
+      width: 33%;
+      height: 100%;
+      background-color: #273352;
+      border-radius: 4px 0 0 4px;
+      content: '';
+    }
+
+    &:after {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 25%;
+      background-color: #fff;
+      border-radius: 4px 4px 0 4px;
+      content: '';
+    }
+  }
+
+  &__top-left {
+    border: 2px solid #e5e7eb;
+    border-radius: 4px;
+
+    &:before {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 1;
+      width: 100%;
+      height: 33%;
+      background-color: #273352;
+      border-radius: 4px 4px 0 0;
+      content: '';
+    }
+
+    &:after {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 33%;
+      height: 100%;
+      background-color: #fff;
+      border-radius: 4px 0 0 4px;
+      content: '';
+    }
+  }
+
+  .is-acitve {
+    border-color: var(--el-color-primary);
+  }
+}
+</style>