feat(Layout): Add classic layout

Author: kailong502431556

.vscode/settings.json

@@ -14,5 +14,6 @@
   "i18n-ally.enabledParsers": ["ts"],
   "i18n-ally.sourceLanguage": "en",
   "i18n-ally.displayLanguage": "zh-CN",
-  "i18n-ally.enabledFrameworks": ["vue", "react"]
+  "i18n-ally.enabledFrameworks": ["vue", "react"],
+  "god.tsconfig": "./tsconfig.json"
 }

src/App.vue

@@ -6,7 +6,9 @@ import { isDark } from '@/utils/is'
 
 const appStore = useAppStore()
 
-const size = computed(() => appStore.size)
+const currentSize = computed(() => appStore.getCurrentSize)
+
+const greyMode = computed(() => appStore.getGreyMode)
 
 const initDark = () => {
   const isDarkTheme = isDark()
@@ -17,12 +19,14 @@ initDark()
 </script>
 
 <template>
-  <ConfigGlobal :size="size">
-    <RouterView />
+  <ConfigGlobal :size="currentSize">
+    <RouterView :class="{ 'v-grey__mode': greyMode }" />
   </ConfigGlobal>
 </template>
 
 <style lang="less">
+@prefix-cls: ~'@{namespace}-grey';
+
 .size {
   width: 100%;
   height: 100%;
@@ -39,4 +43,13 @@ body {
     .size;
   }
 }
+
+.@{prefix-cls}__mode {
+  -webkit-filter: grayscale(100%);
+  -moz-filter: grayscale(100%);
+  -ms-filter: grayscale(100%);
+  -o-filter: grayscale(100%);
+  filter: grayscale(100%);
+  filter: progid:dximagetransform.microsoft.basicimage(grayscale=1);
+}
 </style>

src/components/Breadcrumb/src/Breadcrumb.vue

@@ -2,13 +2,18 @@
 import { ElBreadcrumb, ElBreadcrumbItem } from 'element-plus'
 import { ref, watch, computed, unref, defineComponent, TransitionGroup } from 'vue'
 import { useRouter } from 'vue-router'
-// import { compile } from 'path-to-regexp'
 import { usePermissionStore } from '@/store/modules/permission'
 import { filterBreadcrumb } from './helper'
 import { filter, treeToList } from '@/utils/tree'
 import type { RouteLocationNormalizedLoaded, RouteMeta } from 'vue-router'
 import { useI18n } from '@/hooks/web/useI18n'
 import { Icon } from '@/components/Icon'
+import { useAppStore } from '@/store/modules/app'
+
+const appStore = useAppStore()
+
+// 面包屑图标
+const breadcrumbIcon = computed(() => appStore.getBreadcrumbIcon)
 
 export default defineComponent({
   name: 'Breadcrumb',
@@ -41,7 +46,7 @@ export default defineComponent({
         const meta = v.meta as RouteMeta
         return (
           <ElBreadcrumbItem to={{ path: disabled ? '' : v.path }} key={v.name}>
-            {meta?.icon ? (
+            {meta?.icon && breadcrumbIcon.value ? (
               <>
                 <Icon icon={meta.icon} class="mr-[5px]"></Icon> {t(v?.meta?.title)}
               </>

src/components/ColorRadioPicker/index.ts

@@ -0,0 +1,3 @@
+import ColorRadioPicker from './src/ColorRadioPicker.vue'
+
+export { ColorRadioPicker }

src/components/ColorRadioPicker/src/ColorRadioPicker.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { PropType, watch, unref, ref } from 'vue'
+import { propTypes } from '@/utils/propTypes'
+
+const props = defineProps({
+  schema: {
+    type: Array as PropType<string[]>,
+    default: () => []
+  },
+  modelValue: propTypes.string.def('')
+})
+
+const emit = defineEmits(['update:modelValue', 'change'])
+
+const colorVal = ref(props.modelValue)
+
+watch(
+  () => props.modelValue,
+  (val: string) => {
+    if (val === unref(colorVal)) return
+    colorVal.value = val
+  }
+)
+
+// 监听
+watch(
+  () => colorVal.value,
+  (val: string) => {
+    emit('update:modelValue', val)
+    emit('change', val)
+  }
+)
+</script>
+
+<template>
+  <div class="v-color-radio-picker flex flex-wrap space-x-14px">
+    <span
+      v-for="(item, i) in schema"
+      :key="`radio-${i}`"
+      class="v-color-radio-picker w-20px h-20px cursor-pointer rounded-2px border-solid border-gray-300 border-2px text-center leading-20px mb-5px"
+      :class="{ 'is-active': colorVal === item }"
+      :style="{
+        background: item
+      }"
+      @click="colorVal = item"
+    >
+      <Icon v-if="colorVal === item" color="#fff" icon="ep:check" :size="16" />
+    </span>
+  </div>
+</template>
+
+<style lang="less" scoped>
+@prefix-cls: ~'@{namespace}-color-radio-picker';
+
+.@{prefix-cls} {
+  .is-active {
+    border-color: var(--el-color-primary);
+  }
+}
+</style>

src/components/ConfigGlobal/src/ConfigGlobal.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { provide, computed, watch } from 'vue'
+import { provide, computed, watch, onMounted } from 'vue'
 import { propTypes } from '@/utils/propTypes'
 import { ElConfigProvider } from 'element-plus'
 import { useLocaleStore } from '@/store/modules/locale'
@@ -9,8 +9,20 @@ import { setCssVar } from '@/utils'
 
 const appStore = useAppStore()
 
+const props = defineProps({
+  size: propTypes.oneOf<ElememtPlusSzie[]>(['default', 'small', 'large']).def('default')
+})
+
+provide('configGlobal', props)
+
+// 初始化所有主题色
+onMounted(() => {
+  appStore.setCssVarTheme()
+})
+
 const { width } = useWindowSize()
 
+// 监听窗口变化
 watch(
   () => width.value,
   (width: number) => {
@@ -29,19 +41,14 @@ watch(
   }
 )
 
+// 多语言相关
 const localeStore = useLocaleStore()
 
-const locale = computed(() => localeStore.locale)
-
-const props = defineProps({
-  size: propTypes.oneOf<ElememtPlusSzie[]>(['default', 'small', 'large']).def('default')
-})
-
-provide('configGlobal', props)
+const currentLocale = computed(() => localeStore.currentLocale)
 </script>
 
 <template>
-  <ElConfigProvider :locale="locale.elLocale" :message="{ max: 1 }" :size="size">
+  <ElConfigProvider :locale="currentLocale.elLocale" :message="{ max: 1 }" :size="size">
     <slot></slot>
   </ElConfigProvider>
 </template>

src/components/LocaleDropdown/src/LocaleDropdown.vue

@@ -8,13 +8,13 @@ const localeStore = useLocaleStore()
 
 const langMap = computed(() => localeStore.getLocaleMap)
 
-const currentLang = computed(() => localeStore.getLocale)
+const currentLang = computed(() => localeStore.getCurrentLocale)
 
 const setLang = (lang: LocaleType) => {
   if (lang === unref(currentLang).lang) return
   // 需要重新加载页面让整个语言多初始化
   window.location.reload()
-  localeStore.setLocale({
+  localeStore.setCurrentLocale({
     lang
   })
   const { changeLocale } = useLocale()

src/components/Logo/src/Logo.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watch, computed } from 'vue'
+import { ref, watch, computed, onMounted, unref } from 'vue'
 import { useAppStore } from '@/store/modules/app'
 
 const appStore = useAppStore()
@@ -12,6 +12,10 @@ const layout = computed(() => appStore.getLayout)
 
 const collapse = computed(() => appStore.getCollapse)
 
+onMounted(() => {
+  if (unref(collapse)) show.value = false
+})
+
 watch(
   () => collapse.value,
   (collapse: boolean) => {
@@ -37,7 +41,7 @@ watch(
       {
         'v-logo__Top': layout !== 'classic'
       },
-      'flex h-[var(--logo-height)] items-center cursor-pointer pl-8px'
+      'flex h-[var(--logo-height)] items-center cursor-pointer pl-8px relative'
     ]"
     to="/"
   >
@@ -50,3 +54,18 @@ watch(
     }}</div>
   </router-link>
 </template>
+
+<style lang="less" scoped>
+@prefix-cls: ~'@{namespace}-logo';
+
+.@{prefix-cls} {
+  &:after {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    width: 100%;
+    border-bottom: 1px solid var(--logo-border-color);
+    content: '';
+  }
+}
+</style>

src/components/Menu/src/Menu.vue

@@ -14,6 +14,9 @@ export default defineComponent({
   setup() {
     const appStore = useAppStore()
 
+    // logo
+    const logo = computed(() => appStore.logo)
+
     const { push, currentRoute } = useRouter()
 
     const permissionStore = usePermissionStore()
@@ -61,8 +64,8 @@ export default defineComponent({
           'bg-[var(--left-menu-bg-color)]'
         ]}
       >
-        <Logo></Logo>
-        <ElScrollbar class={[{ '!h-[calc(100%-var(--top-tool-height))]': true }]}>
+        {logo.value ? <Logo></Logo> : undefined}
+        <ElScrollbar class={[{ '!h-[calc(100%-var(--logo-height))]': logo.value }]}>
           <ElMenu
             defaultActive={unref(activeMenu)}
             mode={unref(menuMode)}
@@ -89,9 +92,28 @@ export default defineComponent({
 <style lang="less" scoped>
 @prefix-cls: ~'@{namespace}-menu';
 
+.is-active--after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 4px;
+  height: 100%;
+  background-color: var(--el-color-primary);
+  content: '';
+}
+
 .@{prefix-cls} {
   transition: width var(--transition-time-02);
 
+  &:after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    height: 100%;
+    border-left: 1px solid var(--left-menu-border-color);
+    content: '';
+  }
+
   :deep(.el-menu) {
     width: 100% !important;
     border-right: none;
@@ -123,6 +145,14 @@ export default defineComponent({
       }
     }
 
+    .el-menu-item.is-active {
+      position: relative;
+
+      &:after {
+        .is-active--after;
+      }
+    }
+
     // 设置子菜单的背景颜色
     .el-menu {
       .el-sub-menu__title,
@@ -138,7 +168,12 @@ export default defineComponent({
 
     & > .is-active,
     & > .is-active > .el-sub-menu__title {
+      position: relative;
       background-color: var(--left-menu-collapse-bg-active-color) !important;
+
+      &:after {
+        .is-active--after;
+      }
     }
   }
 
@@ -155,6 +190,16 @@ export default defineComponent({
 <style lang="less">
 @prefix-cls: ~'@{namespace}-menu-popper';
 
+.is-active--after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 4px;
+  height: 100%;
+  background-color: var(--el-color-primary);
+  content: '';
+}
+
 .@{prefix-cls} {
   &--vertical {
     // 设置选中时子标题的颜色
@@ -175,11 +220,16 @@ export default defineComponent({
 
     // 设置选中时的高亮背景
     .el-menu-item.is-active {
+      position: relative;
       background-color: var(--left-menu-bg-active-color) !important;
 
       &:hover {
         background-color: var(--left-menu-bg-active-color) !important;
       }
+
+      &:after {
+        .is-active--after;
+      }
     }
   }
 }