feat(Layout): Add classic layout

src/components/Setting/src/Setting.vue

@@ -1,8 +1,64 @@
 <script setup lang="ts">
-import { ElDrawer } from 'element-plus'
-import { ref } from 'vue'
+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 InterfaceDisplay from './components/InterfaceDisplay.vue'
+
+const appStore = useAppStore()
+
+const { t } = useI18n()
 
 const drawer = ref(false)
+
+// 主题色相关
+const systemTheme = ref(appStore.getTheme.elColorPrimary)
+
+const setSystemTheme = (color: string) => {
+  setCssVar('--el-color-primary', color)
+  appStore.setTheme({ elColorPrimary: color })
+  const leftMenuBgColor = useCssVar('--left-menu-bg-color', document.documentElement)
+  setMenuTheme(trim(unref(leftMenuBgColor)))
+}
+
+// 菜单主题相关
+const menuTheme = ref(appStore.getTheme.leftMenuBgColor)
+
+const setMenuTheme = (color: string) => {
+  const primaryColor = useCssVar('--el-color-primary', document.documentElement)
+  const isDarkColor = colorIsDark(color)
+  const theme: Recordable = {
+    // 左侧菜单边框颜色
+    leftMenuBorderColor: isDarkColor ? 'inherit' : '#eee',
+    // 左侧菜单背景颜色
+    leftMenuBgColor: color,
+    // 左侧菜单浅色背景颜色
+    leftMenuBgLightColor: isDarkColor ? lighten(color!, 6) : color,
+    // 左侧菜单选中背景颜色
+    leftMenuBgActiveColor: isDarkColor
+      ? 'var(--el-color-primary)'
+      : hexToRGB(unref(primaryColor), 0.1),
+    // 左侧菜单收起选中背景颜色
+    leftMenuCollapseBgActiveColor: isDarkColor
+      ? 'var(--el-color-primary)'
+      : hexToRGB(unref(primaryColor), 0.1),
+    // 左侧菜单字体颜色
+    leftMenuTextColor: isDarkColor ? '#bfcbd9' : '#333',
+    // 左侧菜单选中字体颜色
+    leftMenuTextActiveColor: isDarkColor ? '#fff' : 'var(--el-color-primary)',
+    // logo字体颜色
+    logoTitleTextColor: isDarkColor ? '#fff' : 'inherit',
+    // logo边框颜色
+    logoBorderColor: isDarkColor ? 'inherit' : '#eee'
+  }
+  appStore.setTheme(theme)
+  appStore.setCssVarTheme()
+}
 </script>
 
 <template>
@@ -13,7 +69,58 @@ const drawer = ref(false)
     <Icon icon="ant-design:setting-outlined" color="#fff" />
   </div>
 
-  <ElDrawer v-model="drawer" :with-header="false" direction="rtl" size="300px">ddd</ElDrawer>
+  <ElDrawer v-model="drawer" direction="rtl" size="350px">
+    <template #title>
+      <span class="text-16px font-700">{{ t('setting.projectSetting') }}</span>
+    </template>
+
+    <div class="text-center">
+      <!-- 主题 -->
+      <ElDivider>{{ t('setting.theme') }}</ElDivider>
+      <ThemeSwitch />
+
+      <!-- 布局 -->
+      <ElDivider>{{ t('setting.layout') }}</ElDivider>
+
+      <!-- 系统主题 -->
+      <ElDivider>{{ t('setting.systemTheme') }}</ElDivider>
+      <ColorRadioPicker
+        v-model="systemTheme"
+        :schema="[
+          '#409eff',
+          '#009688',
+          '#536dfe',
+          '#ff5c93',
+          '#ee4f12',
+          '#0096c7',
+          '#9c27b0',
+          '#ff9800'
+        ]"
+        @change="setSystemTheme"
+      />
+
+      <!-- 菜单主题 -->
+      <ElDivider>{{ t('setting.menuTheme') }}</ElDivider>
+      <ColorRadioPicker
+        v-model="menuTheme"
+        :schema="[
+          '#fff',
+          '#001529',
+          '#212121',
+          '#273352',
+          '#191b24',
+          '#383f45',
+          '#001628',
+          '#344058'
+        ]"
+        @change="setMenuTheme"
+      />
+    </div>
+
+    <!-- 界面显示 -->
+    <ElDivider>{{ t('setting.interfaceDisplay') }}</ElDivider>
+    <InterfaceDisplay />
+  </ElDrawer>
 </template>
 
 <style lang="less" scoped>

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

@@ -0,0 +1,134 @@
+<script setup lang="ts">
+import { ElSwitch } from 'element-plus'
+import { useI18n } from '@/hooks/web/useI18n'
+import { useAppStore } from '@/store/modules/app'
+import { ref } from 'vue'
+
+const appStore = useAppStore()
+
+const { t } = useI18n()
+
+// 面包屑
+const breadcrumb = ref(appStore.getBreadcrumb)
+
+const breadcrumbChange = (show: boolean) => {
+  appStore.setBreadcrumb(show)
+}
+
+// 面包屑图标
+const breadcrumbIcon = ref(appStore.getBreadcrumbIcon)
+
+const breadcrumbIconChange = (show: boolean) => {
+  appStore.setBreadcrumbIcon(show)
+}
+
+// 折叠菜单
+const collapse = ref(appStore.getCollapse)
+
+const collapseChange = (show: boolean) => {
+  appStore.setCollapse(show)
+}
+
+// 折叠图标
+const hamburger = ref(appStore.getHamburger)
+
+const hamburgerChange = (show: boolean) => {
+  appStore.setHamburger(show)
+}
+
+// 全屏图标
+const screenfull = ref(appStore.getScreenfull)
+
+const screenfullChange = (show: boolean) => {
+  appStore.setScreenfull(show)
+}
+
+// 尺寸图标
+const size = ref(appStore.getSize)
+
+const sizeChange = (show: boolean) => {
+  appStore.setSize(show)
+}
+
+// 多语言图标
+const locale = ref(appStore.getLocale)
+
+const localeChange = (show: boolean) => {
+  appStore.setLocale(show)
+}
+
+// 标签页
+const tagsView = ref(appStore.getTagsView)
+
+const tagsViewChange = (show: boolean) => {
+  appStore.setTagsView(show)
+}
+
+// logo
+const logo = ref(appStore.getLogo)
+
+const logoChange = (show: boolean) => {
+  appStore.setLogo(show)
+}
+
+// 灰色模式
+const greyMode = ref(appStore.getGreyMode)
+
+const greyModeChange = (show: boolean) => {
+  appStore.setGreyMode(show)
+}
+</script>
+
+<template>
+  <div class="v-interface-display">
+    <div class="flex justify-between items-center">
+      <span class="text-14px">{{ t('setting.breadcrumb') }}</span>
+      <ElSwitch v-model="breadcrumb" @change="breadcrumbChange" />
+    </div>
+
+    <div class="flex justify-between items-center">
+      <span class="text-14px">{{ t('setting.breadcrumbIcon') }}</span>
+      <ElSwitch v-model="breadcrumbIcon" @change="breadcrumbIconChange" />
+    </div>
+
+    <div class="flex justify-between items-center">
+      <span class="text-14px">{{ t('setting.collapseMenu') }}</span>
+      <ElSwitch v-model="collapse" @change="collapseChange" />
+    </div>
+
+    <div class="flex justify-between items-center">
+      <span class="text-14px">{{ t('setting.hamburgerIcon') }}</span>
+      <ElSwitch v-model="hamburger" @change="hamburgerChange" />
+    </div>
+
+    <div class="flex justify-between items-center">
+      <span class="text-14px">{{ t('setting.screenfullIcon') }}</span>
+      <ElSwitch v-model="screenfull" @change="screenfullChange" />
+    </div>
+
+    <div class="flex justify-between items-center">
+      <span class="text-14px">{{ t('setting.sizeIcon') }}</span>
+      <ElSwitch v-model="size" @change="sizeChange" />
+    </div>
+
+    <div class="flex justify-between items-center">
+      <span class="text-14px">{{ t('setting.localeIcon') }}</span>
+      <ElSwitch v-model="locale" @change="localeChange" />
+    </div>
+
+    <div class="flex justify-between items-center">
+      <span class="text-14px">{{ t('setting.tagsView') }}</span>
+      <ElSwitch v-model="tagsView" @change="tagsViewChange" />
+    </div>
+
+    <div class="flex justify-between items-center">
+      <span class="text-14px">{{ t('setting.logo') }}</span>
+      <ElSwitch v-model="logo" @change="logoChange" />
+    </div>
+
+    <div class="flex justify-between items-center">
+      <span class="text-14px">{{ t('setting.greyMode') }}</span>
+      <ElSwitch v-model="greyMode" @change="greyModeChange" />
+    </div>
+  </div>
+</template>