chore: cleanup layouts codes (#107)

* chore: cleanup layouts codes

* chore

* fix: FoldButton

packages/hooks/src/config/useAppConfig.ts

@@ -8,7 +8,7 @@ import { useClipboard, _omit } from '@vben/utils'
 export const useAppConfig = () => {
   const useAppConfigStore = appConfigStore()
   const appConfigOptions = storeToRefs(useAppConfigStore)
-  const { openSettingDrawer, sidebar, menu, isMixSidebar, isSidebar, header } =
+  const { openSettingDrawer, sidebar, menu, isMixSidebar, isSidebar } =
     appConfigOptions
 
   const setAppConfig = (configs: DeepPartial<DefineAppConfigOptions>) => {
@@ -80,7 +80,6 @@ function handlerResults(
   value: any,
   configOptions: DefineAppConfigOptions,
 ): DeepPartial<DefineAppConfigOptions> {
-  console.log(event, value)
   const { themeColor, theme, sidebar, header } = configOptions
   switch (event) {
     case HandlerSettingEnum.CHANGE_LAYOUT:

packages/layouts/index.ts

@@ -1,3 +1,3 @@
 export { default as Layout } from './src/index.vue'
 export { initLayout } from './bridge'
-export { default as DarkModeToggle } from './src/components/setting/components/DarkModeToggle.vue'
+export { DarkModeToggle } from './src/components/setting'

packages/layouts/src/components/breadcrumb/index.vue

@@ -1,18 +1,19 @@
 <script lang="ts" setup>
 import { RouteLocationMatched, useRouter } from 'vue-router'
-import { h, ref, watchEffect } from 'vue'
+import { ref, watchEffect } from 'vue'
 import { useI18n } from '@vben/locale'
-import { useAppConfig, useGo } from '@vben/hooks'
+import { useGo } from '@vben/hooks'
 import { filterTree, isString } from '@vben/utils'
 import { REDIRECT_NAME } from '@vben/constants'
 import { VbenIconify } from '@vben/vbencomponents'
 import { Menu } from '@vben/types'
 import { renderIcon } from '../index'
 import { getMenus, getAllParentPath } from '@vben/router'
+import { context } from '../../../bridge'
+
+const { useAppConfig } = context
+
 const { header } = useAppConfig()
-// withDefaults(defineProps<{ theme: 'dark' | 'light' }>(), {
-//   theme: 'light',
-// })
 
 const { currentRoute } = useRouter()
 const { t } = useI18n()

packages/layouts/src/components/feature/index.vue

@@ -1,24 +1,24 @@
 <script lang="ts" setup>
 import { SettingButtonPosition } from '../setting'
-import {context} from '../../../bridge'
-import {computed, unref} from "vue";
+import { context } from '../../../bridge'
+import { computed, unref } from 'vue'
 import { SettingButtonPositionEnum } from '@vben/constants'
 
-
-const { useRootSetting, useHeaderSetting } = context;
-const { getShowSettingButton, getSettingButtonPosition, getFullContent } = useRootSetting();
-const { getShowHeader } = useHeaderSetting();
+const { useRootSetting, useHeaderSetting } = context
+const { getShowSettingButton, getSettingButtonPosition, getFullContent } =
+  useRootSetting()
+const { getShowHeader } = useHeaderSetting()
 const getIsFixedSettingDrawer = computed(() => {
   if (!unref(getShowSettingButton)) {
-    return false;
+    return false
   }
-  const settingButtonPosition = unref(getSettingButtonPosition);
+  const settingButtonPosition = unref(getSettingButtonPosition)
 
   if (settingButtonPosition === SettingButtonPositionEnum.AUTO) {
-    return !unref(getShowHeader) || unref(getFullContent);
+    return !unref(getShowHeader) || unref(getFullContent)
   }
-  return settingButtonPosition === SettingButtonPositionEnum.FIXED;
-});
+  return settingButtonPosition === SettingButtonPositionEnum.FIXED
+})
 </script>
 <template>
   <SettingButtonPosition v-if="getIsFixedSettingDrawer" />

packages/layouts/src/components/header.vue

@@ -8,35 +8,26 @@ import { SettingButton } from '../components/setting'
 import UserDropdown from '../components/user-dropdown/index.vue'
 import { context } from '../../bridge'
 import { computed, unref } from 'vue'
-import {
-  SettingButtonPositionEnum,
-  ThemeEnum,
-  NavBarModeEnum,
-} from '@vben/constants'
-import {
-  useAppConfig,
-  useMenuSetting,
-  useHeaderSetting,
-  useRootSetting,
-  useAppTheme,
-} from '@vben/hooks'
+import { SettingButtonPositionEnum, NavBarModeEnum } from '@vben/constants'
+import { useAppTheme } from '@vben/hooks'
 
-const { isMixSidebar, isTopMenu, isMix, sidebar, menu, header } = useAppConfig()
+const { useAppConfig, useMenuSetting, useHeaderSetting, useRootSetting } =
+  context
 
-const { useConfigStore, Logo, useAppInject, useMultipleTabSetting } = context
+const { isTopMenu, isMix, menu } = useAppConfig()
+
+const { Logo, useAppInject, useMultipleTabSetting } = context
 const {
-  getShowBread,
   getShowFullScreen,
   getShowLocalePicker,
   getShowSearch,
   getShowHeader,
   getShowNotice,
   getShowFullHeaderRef,
-  getShowHeaderLogo,
 } = useHeaderSetting()
 const { isDark } = useAppTheme()
 const { getSettingButtonPosition, getShowSettingButton } = useRootSetting()
-const { getMenuType, getMenuWidth, getIsTopMenu } = useMenuSetting()
+const { getMenuType, getMenuWidth } = useMenuSetting()
 const { getIsMobile } = useAppInject()
 const { getShowMultipleTab } = useMultipleTabSetting()
 const getShowSetting = computed(() => {

packages/layouts/src/components/menu/index.vue

@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import { ref, h, onMounted, unref, nextTick, computed } from 'vue'
 import { createNamespace, mapTree } from '@vben/utils'
-import { context } from '../../../bridge'
 import {
   RouteLocationNormalizedLoaded,
   RouterLink,
@@ -10,12 +9,13 @@ import {
 import { useI18n } from '@vben/locale'
 import { REDIRECT_NAME } from '@vben/constants'
 import { renderIcon } from '../index'
-const { Logo, useMenuSetting, useAppInject } = context
+import { context } from '../../../bridge'
+
+const { Logo, useAppInject, useAppConfig } = context
 import { getMenus, listenerRouteChange } from '@vben/router'
-import { useAppConfig } from '@vben/hooks'
-// const { getAccordion } = useMenuSetting()
-// const {  getMenuShowLogo } = useMenuSetting()
+
 const { getIsMobile } = useAppInject()
+
 const { menu, isMixSidebar, getCollapsedShowTitle, sidebar, isSidebar } =
   useAppConfig()
 const showSidebarLogo = computed(() => {

packages/layouts/src/components/search/AppSearchFooter.vue

@@ -30,8 +30,6 @@ const { t } = useI18n()
   </div>
 </template>
 <style lang="less" scoped>
-// @prefix-cls: ~'@{namespace}-app-search-footer';
-
 .vben-app-search-footer {
   position: relative;
   display: flex;

packages/layouts/src/components/search/AppSearchModal.vue

@@ -119,8 +119,6 @@ function handleClose() {
 </template>
 
 <style lang="less" scoped>
-// @prefix-cls: ~'@{namespace}-app-search-modal';
-// @footer-prefix-cls: ~'@{namespace}-app-search-footer';
 .vben-app-search-modal {
   position: fixed;
   top: 0;

packages/layouts/src/components/search/useMenuSearch.ts

@@ -16,10 +16,6 @@ export interface SearchResult {
   icon?: string
 }
 
-// interface ChangeEvent extends Event {
-//   target: HTMLInputElement
-// }
-
 // Translate special characters
 function transform(c: string) {
   const code: string[] = [