feat(projects): theme store完成

.eslintrc.js

@@ -56,6 +56,11 @@ module.exports = {
             group: 'internal',
             position: 'before'
           },
+          {
+            pattern: '@/settings',
+            group: 'internal',
+            position: 'before'
+          },
           {
             pattern: '@/enum',
             group: 'internal',

build/define/index.ts

@@ -0,0 +1,8 @@
+import dayjs from 'dayjs';
+
+/** 项目构建时间 */
+const PROJECT_BUILD_TIME = JSON.stringify(dayjs().format('YYYY-MM-DD HH:mm:ss'));
+
+export const define = {
+  PROJECT_BUILD_TIME
+};

build/index.ts

@@ -1 +1,2 @@
 export * from './plugins';
+export * from './define';

mock/api/route.ts

@@ -4,7 +4,7 @@ const routes: AuthRoute.Route[] = [
   {
     name: 'dashboard',
     path: '/dashboard',
-    component: 'layout',
+    component: 'basic',
     children: [
       {
         name: 'dashboard_analysis',
@@ -36,15 +36,15 @@ const routes: AuthRoute.Route[] = [
     component: 'self',
     meta: {
       title: '关于',
-      singleLayout: 'layout',
+      singleLayout: 'basic',
       permissions: ['super', 'admin', 'test'],
       icon: 'fluent:book-information-24-regular'
     }
   },
   {
     name: 'multi-menu',
     path: '/multi-menu',
-    component: 'layout',
+    component: 'basic',
     children: [
       {
         name: 'multi-menu_first',

package.json

@@ -1,6 +1,6 @@
 {
   "name": "soybean-admin-thin",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "scripts": {
     "dev": "cross-env VITE_HTTP_ENV=test vite",
     "dev:prod": "cross-env VITE_HTTP_ENV=prod vite",

src/components/common/DarkModeContainer/index.vue

@@ -0,0 +1,10 @@
+<template>
+  <div
+    class="bg-white text-[#333639] dark:(bg-[#18181c] text-white text-opacity-82) transition-all duration-300 ease-in-out"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+<style scoped></style>

src/components/common/index.ts

@@ -1,5 +1,6 @@
 import NaiveProvider from './NaiveProvider/index.vue';
 import SystemLogo from './SystemLogo/index.vue';
 import DarkModeSwitch from './DarkModeSwitch/index.vue';
+import DarkModeContainer from './DarkModeContainer/index.vue';
 
-export { NaiveProvider, SystemLogo, DarkModeSwitch };
+export { NaiveProvider, SystemLogo, DarkModeSwitch, DarkModeContainer };

src/enum/common/index.ts

@@ -2,3 +2,4 @@ export * from './typeof';
 export * from './storage';
 export * from './service';
 export * from './system';
+export * from './theme';

src/enum/common/theme.ts

@@ -0,0 +1,30 @@
+/** 布局模式 */
+export enum EnumThemeLayoutMode {
+  'vertical' = '左侧菜单模式',
+  'horizontal' = '顶部菜单模式',
+  'vertical-mix' = '左侧菜单混合模式',
+  'horizontal-mix' = '顶部菜单混合模式'
+}
+
+/** 多页签风格 */
+export enum EnumThemeTabMode {
+  'chrome' = '谷歌风格',
+  'button' = '按钮风格'
+}
+
+/** 水平模式的菜单位置 */
+export enum EnumThemeHorizontalMenuPosition {
+  'flex-start' = '居左',
+  'center' = '居中',
+  'flex-end' = '居右'
+}
+
+/** 过渡动画类型 */
+export enum EnumThemeAnimateMode {
+  'zoom-fade' = '渐变',
+  'zoom-out' = '闪现',
+  'fade-slide' = '滑动',
+  'fade' = '消退',
+  'fade-bottom' = '底部消退',
+  'fade-scale' = '缩放消退'
+}

src/hooks/common/index.ts

@@ -3,5 +3,6 @@ import useBoolean from './useBoolean';
 import useLoading from './useLoading';
 import useLoadingEmpty from './useLoadingEmpty';
 import useReload from './useReload';
+import useModalVisible from './useModalVisible';
 
-export { useContext, useBoolean, useLoading, useLoadingEmpty, useReload };
+export { useContext, useBoolean, useLoading, useLoadingEmpty, useReload, useModalVisible };

src/hooks/common/useModalVisible.ts

@@ -0,0 +1,34 @@
+import { watch, onUnmounted } from 'vue';
+import useBoolean from './useBoolean';
+
+/**
+ * 使用弹窗
+ * @param hide - 关闭html滚动条
+ */
+export default function useModalVisible(hideScroll = true) {
+  const { bool: visible, setTrue: openModal, setFalse: closeModal, toggle: toggleModal } = useBoolean();
+
+  const stopHandle = watch(visible, async newValue => {
+    if (hideScroll) {
+      const className = 'overflow-hidden';
+      if (newValue) {
+        document.body.classList.add(className);
+      } else {
+        setTimeout(() => {
+          document.body.classList.remove(className);
+        }, 300);
+      }
+    }
+  });
+
+  onUnmounted(() => {
+    stopHandle();
+  });
+
+  return {
+    visible,
+    openModal,
+    closeModal,
+    toggleModal
+  };
+}

src/interface/enum.ts

@@ -1,4 +1,22 @@
-import { EnumLoginModule } from '@/enum';
+import {
+  EnumThemeLayoutMode,
+  EnumThemeTabMode,
+  EnumThemeHorizontalMenuPosition,
+  EnumThemeAnimateMode,
+  EnumLoginModule
+} from '@/enum';
+
+/** 布局模式 */
+export type ThemeLayoutMode = keyof typeof EnumThemeLayoutMode;
+
+/** 多页签风格 */
+export type ThemeTabMode = keyof typeof EnumThemeTabMode;
+
+/** 水平模式的菜单位置 */
+export type ThemeHorizontalMenuPosition = keyof typeof EnumThemeHorizontalMenuPosition;
+
+/** 过渡动画 */
+export type ThemeAnimateMode = keyof typeof EnumThemeAnimateMode;
 
 /** 登录模块 */
 export type LoginModuleKey = keyof typeof EnumLoginModule;

src/interface/index.ts

@@ -1,2 +1,3 @@
 export * from './enum';
+export * from './theme';
 export * from './system';

src/interface/theme.ts

@@ -0,0 +1,137 @@
+import { EnumThemeTabMode, EnumThemeHorizontalMenuPosition, EnumThemeAnimateMode } from '@/enum';
+import type { ThemeLayoutMode, ThemeTabMode, ThemeHorizontalMenuPosition, ThemeAnimateMode } from './enum';
+
+/** 主题相关类型 */
+export interface ThemeSetting {
+  /** 暗黑模式 */
+  darkMode: boolean;
+  /** 布局样式 */
+  layout: ThemeLayout;
+  /** 主题颜色 */
+  themeColor: string;
+  /** 主题颜色列表 */
+  themeColorList: string[];
+  /** 其他颜色 */
+  otherColor: ThemeOtherColor;
+  /** 固定头部和多页签 */
+  fixedHeaderAndTab: boolean;
+  /** 显示重载按钮 */
+  showReload: boolean;
+  /** 头部样式 */
+  header: ThemeHeader;
+  /** 标多页签样式 */
+  tab: ThemeTab;
+  /** 侧边栏样式 */
+  sider: ThemeSider;
+  /** 菜单样式 */
+  menu: ThemeMenu;
+  /** 底部样式 */
+  footer: ThemeFooter;
+  /** 页面样式 */
+  page: ThemePage;
+}
+
+/** 布局样式 */
+interface ThemeLayout {
+  /** 最小宽度 */
+  minWidth: number;
+  /** 布局模式 */
+  mode: ThemeLayoutMode;
+}
+
+/** 其他主题颜色 */
+interface ThemeOtherColor {
+  /** 信息 */
+  info: string;
+  /** 成功 */
+  success: string;
+  /** 警告 */
+  warning: string;
+  /** 错误 */
+  error: string;
+}
+
+/** 头部样式 */
+interface ThemeHeader {
+  /** 头部高度 */
+  height: number;
+  /** 面包屑样式 */
+  crumb: ThemeCrumb;
+}
+/** 面包屑样式 */
+interface ThemeCrumb {
+  /** 面包屑可见 */
+  visible: boolean;
+  /** 显示图标 */
+  showIcon: boolean;
+}
+
+/** 标多页签样式 */
+export interface ThemeTab {
+  /** 多页签可见 */
+  visible: boolean;
+  /** 多页签高度 */
+  height: number;
+  /** 多页签风格 */
+  mode: ThemeTabMode;
+  /** 多页签风格列表 */
+  modeList: ThemeTabModeList[];
+  /** 开启多页签缓存 */
+  isCache: boolean;
+}
+
+/** 多页签风格列表 */
+interface ThemeTabModeList {
+  value: ThemeTabMode;
+  label: EnumThemeTabMode;
+}
+
+/** 侧边栏样式 */
+interface ThemeSider {
+  /** 侧边栏宽度 */
+  width: number;
+  /** 侧边栏折叠时的宽度 */
+  collapsedWidth: number;
+  /** vertical-mix模式下侧边栏宽度 */
+  mixWidth: number;
+  /** vertical-mix模式下侧边栏折叠时的宽度 */
+  mixCollapsedWidth: number;
+  /** vertical-mix模式下侧边栏的子菜单的宽度 */
+  mixChildMenuWidth: number;
+}
+
+/** 菜单样式 */
+interface ThemeMenu {
+  /** 水平模式的菜单的位置 */
+  horizontalPosition: ThemeHorizontalMenuPosition;
+  /** 水平模式的菜单的位置列表 */
+  horizontalPositionList: ThemeHorizontalMenuPositionList[];
+}
+/** 水平模式的菜单的位置列表 */
+interface ThemeHorizontalMenuPositionList {
+  value: ThemeHorizontalMenuPosition;
+  label: EnumThemeHorizontalMenuPosition;
+}
+
+/** 底部样式 */
+interface ThemeFooter {
+  /** 是否固定底部 */
+  fixed: boolean;
+  /** 底部高度 */
+  height: number;
+}
+
+/** 页面样式 */
+interface ThemePage {
+  /** 页面是否开启动画 */
+  animate: boolean;
+  /** 动画类型 */
+  animateMode: ThemeAnimateMode;
+  /** 动画类型列表 */
+  animateModeList: ThemeAnimateModeList[];
+}
+/** 动画类型列表 */
+interface ThemeAnimateModeList {
+  value: ThemeAnimateMode;
+  label: EnumThemeAnimateMode;
+}

src/layouts/BasicLayout/index.vue

@@ -0,0 +1,69 @@
+<template>
+  <soybean-layout
+    :mode="mode"
+    :fixed-header-and-tab="theme.fixedHeaderAndTab"
+    :header-height="theme.header.height"
+    :tab-visible="theme.tab.visible"
+    :tab-height="theme.tab.height"
+    :sider-visible="siderVisible"
+    :sider-width="siderWidth"
+    :sider-collapsed-width="siderCollapsedWidth"
+    :sider-collapse="false"
+    :fixed-footer="theme.footer.fixed"
+  >
+    <template #header>
+      <global-header />
+    </template>
+    <template #tab>
+      <global-tab />
+    </template>
+    <template #sider>
+      <global-sider />
+    </template>
+    <global-content />
+    <template #footer>
+      <global-footer />
+    </template>
+  </soybean-layout>
+  <setting-drawer />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useAppStore, useThemeStore } from '@/store';
+import { SoybeanLayout } from '@/package';
+import { SettingDrawer, GlobalHeader, GlobalTab, GlobalSider, GlobalContent, GlobalFooter } from '../common';
+
+const app = useAppStore();
+const theme = useThemeStore();
+
+const siderVisible = computed(() => theme.layout.mode !== 'horizontal');
+
+type LayoutMode = 'vertical' | 'horizontal';
+const mode = computed(() => {
+  const vertical: LayoutMode = 'vertical';
+  const horizontal: LayoutMode = 'horizontal';
+  return theme.layout.mode.includes(vertical) ? vertical : horizontal;
+});
+
+const siderWidth = computed(() => {
+  const { width, mixWidth, mixChildMenuWidth } = theme.sider;
+  const isVerticalMix = theme.layout.mode === 'vertical-mix';
+  let w = isVerticalMix ? mixWidth : width;
+  if (isVerticalMix && app.mixSiderFixed) {
+    w += mixChildMenuWidth;
+  }
+  return w;
+});
+
+const siderCollapsedWidth = computed(() => {
+  const { collapsedWidth, mixCollapsedWidth, mixChildMenuWidth } = theme.sider;
+  const isVerticalMix = theme.layout.mode === 'vertical-mix';
+  let w = isVerticalMix ? mixCollapsedWidth : collapsedWidth;
+  if (isVerticalMix && app.mixSiderFixed) {
+    w += mixChildMenuWidth;
+  }
+  return w;
+});
+</script>
+<style scoped></style>