From bf020a82580e6b1fbda1cc1e0bd6176770434884 Mon Sep 17 00:00:00 2001 From: Soybean Date: Sat, 8 Jan 2022 20:49:21 +0800 Subject: [PATCH] =?UTF-8?q?feat(projects):=20theme=20store=E5=AE=8C?= =?UTF-8?q?=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .eslintrc.js | 5 + build/define/index.ts | 8 + build/index.ts | 1 + mock/api/route.ts | 6 +- package.json | 2 +- .../common/DarkModeContainer/index.vue | 10 + src/components/common/index.ts | 3 +- src/enum/common/index.ts | 1 + src/enum/common/theme.ts | 30 +++ src/hooks/common/index.ts | 3 +- src/hooks/common/useModalVisible.ts | 34 +++ src/interface/enum.ts | 20 +- src/interface/index.ts | 1 + src/interface/theme.ts | 137 ++++++++++ src/layouts/BasicLayout/index.vue | 69 +++++ src/layouts/BlankLayout/index.vue | 8 + src/layouts/Layout/index.vue | 100 +++---- src/layouts/common/GlobalFooter/index.vue | 10 + src/layouts/common/GlobalHeader/index.vue | 12 + src/layouts/common/GlobalSider/index.vue | 12 + src/layouts/common/GlobalTab/index.vue | 12 + .../components/DrawerButton/index.vue | 8 +- src/layouts/common/index.ts | 6 +- src/layouts/index.ts | 4 +- src/package/SoybeanLayout/index.ts | 3 + .../{ => src}/components/LayoutContent.vue | 0 .../{ => src}/components/LayoutFooter.vue | 4 +- .../{ => src}/components/LayoutHeader.vue | 0 .../{ => src}/components/LayoutSider.vue | 0 .../{ => src}/components/LayoutTab.vue | 0 .../{ => src}/components/index.ts | 0 .../SoybeanLayout/{ => src}/hooks/index.ts | 0 src/package/SoybeanLayout/{ => src}/index.vue | 0 src/package/index.ts | 2 +- src/router/guard/permission.ts | 11 +- src/settings/index.ts | 1 + src/settings/theme.json | 0 src/settings/theme.ts | 91 +++++++ src/store/modules/app/index.ts | 32 ++- src/store/modules/theme/hooks.ts | 253 ++++++++++++++++++ src/store/modules/theme/index.ts | 221 +++++++++++---- src/styles/css/transition.css | 63 +++++ src/typings/common/global.d.ts | 2 + src/typings/common/route.d.ts | 10 +- src/utils/common/index.ts | 1 + src/utils/common/object.ts | 4 + src/utils/router/helpers.ts | 17 +- src/views/about/components/DevDependency.vue | 17 ++ src/views/about/components/ProDependency.vue | 17 ++ src/views/about/components/ProjectInfo.vue | 27 ++ .../about/components/ProjectIntroduction.vue | 13 + src/views/about/components/index.ts | 6 + src/views/about/index.vue | 15 +- src/views/about/model.ts | 43 +++ vite.config.ts | 3 +- windi.config.ts | 9 + 56 files changed, 1204 insertions(+), 163 deletions(-) create mode 100644 build/define/index.ts create mode 100644 src/components/common/DarkModeContainer/index.vue create mode 100644 src/enum/common/theme.ts create mode 100644 src/hooks/common/useModalVisible.ts create mode 100644 src/interface/theme.ts create mode 100644 src/layouts/BasicLayout/index.vue create mode 100644 src/layouts/BlankLayout/index.vue create mode 100644 src/layouts/common/GlobalFooter/index.vue create mode 100644 src/layouts/common/GlobalHeader/index.vue create mode 100644 src/layouts/common/GlobalSider/index.vue create mode 100644 src/layouts/common/GlobalTab/index.vue create mode 100644 src/package/SoybeanLayout/index.ts rename src/package/SoybeanLayout/{ => src}/components/LayoutContent.vue (100%) rename src/package/SoybeanLayout/{ => src}/components/LayoutFooter.vue (94%) rename src/package/SoybeanLayout/{ => src}/components/LayoutHeader.vue (100%) rename src/package/SoybeanLayout/{ => src}/components/LayoutSider.vue (100%) rename src/package/SoybeanLayout/{ => src}/components/LayoutTab.vue (100%) rename src/package/SoybeanLayout/{ => src}/components/index.ts (100%) rename src/package/SoybeanLayout/{ => src}/hooks/index.ts (100%) rename src/package/SoybeanLayout/{ => src}/index.vue (100%) create mode 100644 src/settings/index.ts create mode 100644 src/settings/theme.json create mode 100644 src/settings/theme.ts create mode 100644 src/store/modules/theme/hooks.ts create mode 100644 src/typings/common/global.d.ts create mode 100644 src/utils/common/object.ts create mode 100644 src/views/about/components/DevDependency.vue create mode 100644 src/views/about/components/ProDependency.vue create mode 100644 src/views/about/components/ProjectInfo.vue create mode 100644 src/views/about/components/ProjectIntroduction.vue create mode 100644 src/views/about/components/index.ts create mode 100644 src/views/about/model.ts diff --git a/.eslintrc.js b/.eslintrc.js index c3348e17c..5cf33b46c 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -56,6 +56,11 @@ module.exports = { group: 'internal', position: 'before' }, + { + pattern: '@/settings', + group: 'internal', + position: 'before' + }, { pattern: '@/enum', group: 'internal', diff --git a/build/define/index.ts b/build/define/index.ts new file mode 100644 index 000000000..2b7190b31 --- /dev/null +++ b/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 +}; diff --git a/build/index.ts b/build/index.ts index 460ab6b51..e81a1951e 100644 --- a/build/index.ts +++ b/build/index.ts @@ -1 +1,2 @@ export * from './plugins'; +export * from './define'; diff --git a/mock/api/route.ts b/mock/api/route.ts index efedcfc8b..ac43dc67d 100644 --- a/mock/api/route.ts +++ b/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,7 +36,7 @@ const routes: AuthRoute.Route[] = [ component: 'self', meta: { title: '关于', - singleLayout: 'layout', + singleLayout: 'basic', permissions: ['super', 'admin', 'test'], icon: 'fluent:book-information-24-regular' } @@ -44,7 +44,7 @@ const routes: AuthRoute.Route[] = [ { name: 'multi-menu', path: '/multi-menu', - component: 'layout', + component: 'basic', children: [ { name: 'multi-menu_first', diff --git a/package.json b/package.json index 119274552..0a347e216 100644 --- a/package.json +++ b/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", diff --git a/src/components/common/DarkModeContainer/index.vue b/src/components/common/DarkModeContainer/index.vue new file mode 100644 index 000000000..28827c9dd --- /dev/null +++ b/src/components/common/DarkModeContainer/index.vue @@ -0,0 +1,10 @@ + + + + diff --git a/src/components/common/index.ts b/src/components/common/index.ts index 2e5b4cabb..01c8d2dd4 100644 --- a/src/components/common/index.ts +++ b/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 }; diff --git a/src/enum/common/index.ts b/src/enum/common/index.ts index 43b1a397c..5eb4ea81b 100644 --- a/src/enum/common/index.ts +++ b/src/enum/common/index.ts @@ -2,3 +2,4 @@ export * from './typeof'; export * from './storage'; export * from './service'; export * from './system'; +export * from './theme'; diff --git a/src/enum/common/theme.ts b/src/enum/common/theme.ts new file mode 100644 index 000000000..53ae9ca7e --- /dev/null +++ b/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' = '缩放消退' +} diff --git a/src/hooks/common/index.ts b/src/hooks/common/index.ts index 1d1b78adf..4b5fa7300 100644 --- a/src/hooks/common/index.ts +++ b/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 }; diff --git a/src/hooks/common/useModalVisible.ts b/src/hooks/common/useModalVisible.ts new file mode 100644 index 000000000..37ddc7c5b --- /dev/null +++ b/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 + }; +} diff --git a/src/interface/enum.ts b/src/interface/enum.ts index 646adb973..97dccc084 100644 --- a/src/interface/enum.ts +++ b/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; diff --git a/src/interface/index.ts b/src/interface/index.ts index 0e406d1c6..7ae6856d7 100644 --- a/src/interface/index.ts +++ b/src/interface/index.ts @@ -1,2 +1,3 @@ export * from './enum'; +export * from './theme'; export * from './system'; diff --git a/src/interface/theme.ts b/src/interface/theme.ts new file mode 100644 index 000000000..705490f48 --- /dev/null +++ b/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; +} diff --git a/src/layouts/BasicLayout/index.vue b/src/layouts/BasicLayout/index.vue new file mode 100644 index 000000000..161f132a8 --- /dev/null +++ b/src/layouts/BasicLayout/index.vue @@ -0,0 +1,69 @@ + + + + diff --git a/src/layouts/BlankLayout/index.vue b/src/layouts/BlankLayout/index.vue new file mode 100644 index 000000000..a65cd2564 --- /dev/null +++ b/src/layouts/BlankLayout/index.vue @@ -0,0 +1,8 @@ + + + + diff --git a/src/layouts/Layout/index.vue b/src/layouts/Layout/index.vue index 2e6d3e564..161f132a8 100644 --- a/src/layouts/Layout/index.vue +++ b/src/layouts/Layout/index.vue @@ -1,81 +1,69 @@ diff --git a/src/layouts/common/GlobalFooter/index.vue b/src/layouts/common/GlobalFooter/index.vue new file mode 100644 index 000000000..2149052e0 --- /dev/null +++ b/src/layouts/common/GlobalFooter/index.vue @@ -0,0 +1,10 @@ + + + + diff --git a/src/layouts/common/GlobalHeader/index.vue b/src/layouts/common/GlobalHeader/index.vue new file mode 100644 index 000000000..787bb9537 --- /dev/null +++ b/src/layouts/common/GlobalHeader/index.vue @@ -0,0 +1,12 @@ + + + + diff --git a/src/layouts/common/GlobalSider/index.vue b/src/layouts/common/GlobalSider/index.vue new file mode 100644 index 000000000..37ce923ab --- /dev/null +++ b/src/layouts/common/GlobalSider/index.vue @@ -0,0 +1,12 @@ + + + + diff --git a/src/layouts/common/GlobalTab/index.vue b/src/layouts/common/GlobalTab/index.vue new file mode 100644 index 000000000..4b9a3ad1a --- /dev/null +++ b/src/layouts/common/GlobalTab/index.vue @@ -0,0 +1,12 @@ + + + + diff --git a/src/layouts/common/SettingDrawer/components/DrawerButton/index.vue b/src/layouts/common/SettingDrawer/components/DrawerButton/index.vue index d1d94d7b0..2cd2ecdf3 100644 --- a/src/layouts/common/SettingDrawer/components/DrawerButton/index.vue +++ b/src/layouts/common/SettingDrawer/components/DrawerButton/index.vue @@ -1,10 +1,12 @@ diff --git a/src/layouts/common/index.ts b/src/layouts/common/index.ts index 41510d313..824cc68db 100644 --- a/src/layouts/common/index.ts +++ b/src/layouts/common/index.ts @@ -1,4 +1,8 @@ import SettingDrawer from './SettingDrawer/index.vue'; +import GlobalHeader from './GlobalHeader/index.vue'; +import GlobalTab from './GlobalTab/index.vue'; +import GlobalSider from './GlobalSider/index.vue'; import GlobalContent from './GlobalContent/index.vue'; +import GlobalFooter from './GlobalFooter/index.vue'; -export { SettingDrawer, GlobalContent }; +export { SettingDrawer, GlobalHeader, GlobalTab, GlobalSider, GlobalContent, GlobalFooter }; diff --git a/src/layouts/index.ts b/src/layouts/index.ts index 66e9dc222..700257e60 100644 --- a/src/layouts/index.ts +++ b/src/layouts/index.ts @@ -1,3 +1,5 @@ import Layout from './Layout/index.vue'; +import BasicLayout from './BasicLayout/index.vue'; +import BlankLayout from './BlankLayout/index.vue'; -export { Layout }; +export { Layout, BasicLayout, BlankLayout }; diff --git a/src/package/SoybeanLayout/index.ts b/src/package/SoybeanLayout/index.ts new file mode 100644 index 000000000..aeeed8f80 --- /dev/null +++ b/src/package/SoybeanLayout/index.ts @@ -0,0 +1,3 @@ +import SoybeanLayout from './src/index.vue'; + +export default SoybeanLayout; diff --git a/src/package/SoybeanLayout/components/LayoutContent.vue b/src/package/SoybeanLayout/src/components/LayoutContent.vue similarity index 100% rename from src/package/SoybeanLayout/components/LayoutContent.vue rename to src/package/SoybeanLayout/src/components/LayoutContent.vue diff --git a/src/package/SoybeanLayout/components/LayoutFooter.vue b/src/package/SoybeanLayout/src/components/LayoutFooter.vue similarity index 94% rename from src/package/SoybeanLayout/components/LayoutFooter.vue rename to src/package/SoybeanLayout/src/components/LayoutFooter.vue index 649db9cb0..c3cf1b30b 100644 --- a/src/package/SoybeanLayout/components/LayoutFooter.vue +++ b/src/package/SoybeanLayout/src/components/LayoutFooter.vue @@ -1,7 +1,7 @@ + diff --git a/src/views/about/components/ProDependency.vue b/src/views/about/components/ProDependency.vue new file mode 100644 index 000000000..d13834348 --- /dev/null +++ b/src/views/about/components/ProDependency.vue @@ -0,0 +1,17 @@ + + + + diff --git a/src/views/about/components/ProjectInfo.vue b/src/views/about/components/ProjectInfo.vue new file mode 100644 index 000000000..505b1d06c --- /dev/null +++ b/src/views/about/components/ProjectInfo.vue @@ -0,0 +1,27 @@ + + + + diff --git a/src/views/about/components/ProjectIntroduction.vue b/src/views/about/components/ProjectIntroduction.vue new file mode 100644 index 000000000..4d113b27e --- /dev/null +++ b/src/views/about/components/ProjectIntroduction.vue @@ -0,0 +1,13 @@ + + + + diff --git a/src/views/about/components/index.ts b/src/views/about/components/index.ts new file mode 100644 index 000000000..3f0450933 --- /dev/null +++ b/src/views/about/components/index.ts @@ -0,0 +1,6 @@ +import ProjectIntroduction from './ProjectIntroduction.vue'; +import ProjectInfo from './ProjectInfo.vue'; +import ProDependency from './ProDependency.vue'; +import DevDependency from './DevDependency.vue'; + +export { ProjectIntroduction, ProjectInfo, ProDependency, DevDependency }; diff --git a/src/views/about/index.vue b/src/views/about/index.vue index 96f928d04..68d86fb83 100644 --- a/src/views/about/index.vue +++ b/src/views/about/index.vue @@ -1,9 +1,14 @@ - + diff --git a/src/views/about/model.ts b/src/views/about/model.ts new file mode 100644 index 000000000..e95884cd4 --- /dev/null +++ b/src/views/about/model.ts @@ -0,0 +1,43 @@ +import pkg from '~/package.json'; + +/** npm依赖包版本信息 */ +export interface PkgVersionInfo { + name: string; + version: string; +} + +interface Package { + name: string; + version: string; + dependencies: { + [key: string]: string; + }; + devDependencies: { + [key: string]: string; + }; + [key: string]: any; +} + +interface PkgJson { + name: string; + version: string; + dependencies: PkgVersionInfo[]; + devDependencies: PkgVersionInfo[]; +} + +const pkgWithType = pkg as Package; + +function transformVersionData(tuple: [string, string]): PkgVersionInfo { + const [name, version] = tuple; + return { + name, + version + }; +} + +export const pkgJson: PkgJson = { + name: pkgWithType.name, + version: pkgWithType.version, + dependencies: Object.entries(pkgWithType.dependencies).map(item => transformVersionData(item)), + devDependencies: Object.entries(pkgWithType.devDependencies).map(item => transformVersionData(item)) +}; diff --git a/vite.config.ts b/vite.config.ts index d23568b85..a93afebbf 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,6 +1,6 @@ import { fileURLToPath } from 'url'; import { defineConfig, loadEnv } from 'vite'; -import { setupVitePlugins } from './build'; +import { setupVitePlugins, define } from './build'; export default defineConfig(configEnv => { const viteEnv = loadEnv(configEnv.mode, `.env.${configEnv.mode}`); @@ -13,6 +13,7 @@ export default defineConfig(configEnv => { '~': fileURLToPath(new URL('./', import.meta.url)) } }, + define, plugins: setupVitePlugins(configEnv), css: { preprocessorOptions: { diff --git a/windi.config.ts b/windi.config.ts index 32beeeb8d..afb0742f3 100644 --- a/windi.config.ts +++ b/windi.config.ts @@ -41,6 +41,7 @@ export default defineConfig({ 'nowrap-hidden': 'whitespace-nowrap overflow-hidden', 'ellipsis-text': 'nowrap-hidden overflow-ellipsis', 'transition-base': 'transition-all duration-300 ease-in-out', + // 'dark-transition': "", 'init-loading-spin': 'w-16px h-16px bg-primary rounded-8px animate-pulse' }, theme: { @@ -67,6 +68,14 @@ export default defineConfig({ 'error-pressed': 'var(--error-color-pressed)', 'error-active': 'var(--error-color-active)' }, + backgroundColor: { + dark: '#18181c', + 'dark-base': '#101014' + }, + textColor: { + 'black-base': '#333639', + 'white-base': 'rgba(255, 255, 255, 0.82)' + }, transitionProperty: ['padding-left'] } },