Skip to content

Commit

Permalink
refactor: 重构样式(白天,黑夜)
Browse files Browse the repository at this point in the history
  • Loading branch information
jsxiaosi committed May 16, 2022
1 parent fe83083 commit 399fdc9
Show file tree
Hide file tree
Showing 21 changed files with 149 additions and 196 deletions.
2 changes: 1 addition & 1 deletion build/vite/css.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ export function createViteCSS(): CSSOptions {
// 配置scss全局样式以及变量
scss: {
charset: false,
additionalData: '@import "./src/styles/index.scss";',
additionalData: '@use "./src/styles/element/index.scss" as *;',
javascriptEnabled: true,
},
},
Expand Down
10 changes: 7 additions & 3 deletions build/vite/plugin/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import type { Plugin, ConfigEnv } from 'vite';
// 按需加载样式配置
import { configStylePlugin } from './style';
// 主题切换配置
import { configThemePlugin } from './theme';
// import { configThemePlugin } from './theme';
// svg配置
import { configSvgPlugin } from './svg';
// 压缩
Expand All @@ -31,15 +31,19 @@ export function createVitePlugins(isBuild = false, _configEnv: ConfigEnv) {

vitePlugins.push(configStylePlugin());

vitePlugins.push(configThemePlugin());
// vitePlugins.push(configThemePlugin());

vitePlugins.push(configSvgPlugin());

vitePlugins.push(configCompressPlugin('gzip', true));

vitePlugins.push(configMockPlugin(isBuild));

vitePlugins.push(ElementPlus());
vitePlugins.push(
ElementPlus({
useSource: true,
}),
);

// 使用此插件会导致vite启动变慢 100ms左右
// vitePlugins.push(configEsLinterPlugin(configEnv))
Expand Down
51 changes: 26 additions & 25 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -26,78 +26,79 @@
},
"dependencies": {
"@element-plus/icons-vue": "^1.1.4",
"@logicflow/core": "^1.1.14",
"@logicflow/extension": "^1.1.14",
"axios": "^0.26.1",
"@logicflow/core": "^1.1.15",
"@logicflow/extension": "^1.1.15",
"axios": "^0.27.2",
"echarts": "^5.3.2",
"element-plus": "^2.1.10",
"element-plus": "^2.2.0",
"es6-promise": "^4.2.8",
"i18next": "^21.6.16",
"i18next": "^21.8.2",
"image-conversion": "^2.1.1",
"intro.js": "^5.1.0",
"lodash-es": "^4.17.21",
"marked": "^4.0.14",
"marked": "^4.0.15",
"mockjs": "^1.1.0",
"pinia": "^2.0.13",
"pinia": "^2.0.14",
"sortablejs": "^1.15.0",
"vue": "^3.2.33",
"vue-i18n": "^9.1.9",
"vue-router": "^4.0.14",
"vue-i18n": "^9.1.10",
"vue-router": "^4.0.15",
"vue-types": "^4.1.1",
"vuex": "^4.0.2",
"wangeditor": "^4.7.15"
},
"devDependencies": {
"@commitlint/cli": "^16.2.3",
"@commitlint/config-conventional": "^16.2.1",
"@commitlint/cli": "^17.0.0",
"@commitlint/config-conventional": "^17.0.0",
"@ehutch79/vite-eslint": "^0.0.1",
"@types/core-js": "^2.5.5",
"@types/intro.js": "^3.0.2",
"@types/lodash-es": "^4.17.6",
"@types/marked": "^4.0.3",
"@types/node": "^17.0.26",
"@types/sortablejs": "^1.10.7",
"@typescript-eslint/eslint-plugin": "^5.20.0",
"@typescript-eslint/parser": "^5.20.0",
"@vitejs/plugin-vue": "^2.3.1",
"@types/node": "^17.0.33",
"@types/sortablejs": "^1.13.0",
"@typescript-eslint/eslint-plugin": "^5.23.0",
"@typescript-eslint/parser": "^5.23.0",
"@vitejs/plugin-vue": "^2.3.3",
"@vitejs/plugin-vue-jsx": "^1.3.10",
"@vue/compiler-sfc": "^3.2.33",
"@vue/tsconfig": "^0.1.3",
"@zougt/vite-plugin-theme-preprocessor": "^1.4.5",
"autoprefixer": "^10.4.5",
"autoprefixer": "^10.4.7",
"babel-eslint": "^10.1.0",
"commitizen": "^4.2.4",
"cz-conventional-changelog": "^3.3.0",
"cz-customizable": "^6.3.0",
"eslint": "^8.14.0",
"eslint": "^8.15.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-promise": "^6.0.0",
"eslint-plugin-vue": "^8.7.1",
"http-server": "^14.1.0",
"husky": "^7.0.4",
"lint-staged": "^12.4.0",
"husky": "^8.0.1",
"lint-staged": "^12.4.1",
"postcss-html": "^1.4.1",
"postcss-import": "^14.1.0",
"prettier": "2.6.2",
"pretty-quick": "^3.1.3",
"sass": "^1.50.1",
"stylelint": "^14.7.1",
"sass": "^1.51.0",
"stylelint": "^14.8.2",
"stylelint-config-prettier": "^9.0.3",
"stylelint-config-recess-order": "^3.0.0",
"stylelint-config-standard": "^25.0.0",
"stylelint-order": "^5.0.0",
"stylelint-scss": "^4.2.0",
"typescript": "^4.6.3",
"typescript": "^4.6.4",
"unplugin-element-plus": "^0.4.0",
"vite": "^2.9.5",
"vite": "^2.9.9",
"vite-plugin-compression": "^0.5.1",
"vite-plugin-linter": "^1.2.0",
"vite-plugin-mock": "^2.9.6",
"vite-plugin-style-import": "^2.0.0",
"vite-plugin-svg-icons": "^2.0.1",
"vue-tsc": "^0.34.10"
"vue-tsc": "^0.34.15"
},
"license": "MIT",
"config": {
Expand Down
2 changes: 1 addition & 1 deletion src/components/Application/AppLocale.vue
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@

<style lang="scss" scoped>
.icon {
color: #{$text-color-primary};
color: var(--text-color-primary);
font-size: 1em;
}
</style>
23 changes: 13 additions & 10 deletions src/components/Application/AppTheme.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<div class="theme" :class="{ 'theme-dark': isDark === 'dark' }" @click="toggleDarkMode">
<div class="theme" :class="{ 'theme-dark': color === 'dark' }" @click="toggleDarkMode">
<div class="theme-inner"></div>
<SvgIcon name="sun"></SvgIcon>
<SvgIcon name="moon"></SvgIcon>
Expand All @@ -10,28 +10,31 @@
import { ref } from 'vue';
import SvgIcon from '../SvgIcon/index.vue';
import { toggleTheme } from '@zougt/vite-plugin-theme-preprocessor/dist/browser-utils';
import { useAppStore } from '@/store/modules/app';
// import { useAppStore } from '@/store/modules/app';
import { getAppCollapseMenu } from '@/hooks/userAppWindow';
import { useColorMode } from '@vueuse/core';
// const toggleTheme = (scopeName = 'theme-default') => {
// document.documentElement.className = scopeName
// }
const appStore = useAppStore();
// const appStore = useAppStore();
const { appConfigMode } = getAppCollapseMenu();
const isDark = ref<string>(appConfigMode.value.themeMode);
isDark.value = appConfigMode.value.themeMode;
toggleTheme({
scopeName: `variables-theme-${isDark.value}`,
});
const color = useColorMode();
const toggleDarkMode = () => {
isDark.value = isDark.value === 'day' ? 'dark' : 'day';
appConfigMode.value.themeMode = isDark.value;
appStore.setAppConfigMode(appConfigMode.value);
toggleTheme({
scopeName: `variables-theme-${isDark.value}`,
});
color.value = color.value === 'dark' ? 'light' : 'dark';
// appConfigMode.value.themeMode = isDark.value;
// appStore.setAppConfigMode(appConfigMode.value);
// toggleTheme({
// scopeName: `variables-theme-${isDark.value}`,
// });
};
</script>

Expand All @@ -44,7 +47,7 @@
justify-content: space-between;
align-items: center;
background-color: 151515;
border: 1px solid #{$text-color-primary};
border: 1px solid var(--text-color-primary);
padding: 0 6px;
font-size: 1em;
border-radius: 30px;
Expand All @@ -53,7 +56,7 @@
z-index: 1;
width: 18px;
height: 18px;
background-color: #{$text-color-primary};
background-color: var(--text-color-primary);
border-radius: 50%;
transition: transform 0.5s, background-color 0.5s;
will-change: transform;
Expand Down
8 changes: 4 additions & 4 deletions src/layouts/pageLayouts/components/Sidebar/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -21,24 +21,24 @@
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { computed, PropType } from 'vue';
import { useRoute } from 'vue-router';
import SidebarItem from './SidebarItem.vue';
import routeModuleList from '@/router/modules';
import { getAppCollapseMenu } from '@/hooks/userAppWindow';
defineProps({
mode: {
type: String,
type: String as PropType<'vertical' | 'horizontal'>,
default: 'vertical',
},
});
const activeMenyu = computed(() => {
const activeMenyu = computed<string>(() => {
const route = useRoute();
const { meta, path } = route;
if (meta.activeMenu) {
return meta.activeMenu;
return meta.activeMenu as string;
}
return path;
});
Expand Down
120 changes: 20 additions & 100 deletions src/styles/el-theme.scss
Original file line number Diff line number Diff line change
@@ -1,105 +1,25 @@
// 修改element主题
:root {
--el-border-color-lighter: #{$text-color-placeholder};
--el-datepicker-border-color: #{$text-color-placeholder};
--el-text-color-primary: #{$text-color-primary};
--el-text-color-regular: #{$text-color-regular};
--el-text-color-secondary: #{$text-color-secondary};
--el-text-color-placeholder: #{$text-color-placeholder};
--el-input-bg-color: #{$main-bg-color};
--el-disabled-bg-color: #{$main-bg-color};
--el-fill-base: #{$main-bg-color};
--el-bg-color: #{$sub-main-bg-content};
// --el-disabled-border-color: #{$text-color-placeholder};
}

// input
.el-input {
--el-input-bg-color: #{$main-bg-color};
}
.el-textarea {
--el-input-bg-color: #{$main-bg-color};
}

.el-date-editor {
--el-input-bg-color: #{$main-bg-color};
}

.el-drawer {
--el-drawer-bg-color: #{$main-bg-color};
}

.el-scrollbar {
--el-scrollbar-bg-color: #{$main-bg-color};
}

.el-range-input {
background-color: #{$main-bg-color};
}

// 时间选择器
.el-date-range-picker {
--el-datepicker-inner-border-color: #{$text-color-placeholder};
--el-datepicker-inrange-bg-color: #{$sub-main-bg-content};
--el-datepicker-inrange-hover-bg-color: #{$sub-main-bg-content};
}
.el-picker-panel {
background-color: #{$main-bg-color};
}
.el-picker-panel__footer {
background-color: #{$main-bg-color};
}

// select颜色
.el-select__popper.el-popper {
background-color: #{$main-bg-color};
}

.el-dropdown-menu {
background-color: #{$main-bg-color};
}
// .el-select-dropdown__item.hover,
// .el-select-dropdown__item:hover {
// background-color: #{$sub-main-bg-content};
// }
.el-popper.is-light .el-popper__arrow::before {
background-color: #{$main-bg-color};
}

.el-card {
--el-card-bg-color: #{$main-bg-color};
--el-card-border-color: #{$text-color-placeholder};
}

.el-descriptions {
--el-descriptions-item-bordered-label-background: #{$sub-main-bg-content};
:deep(.el-descriptions__body) {
background-color: #{$main-bg-color};
}
}

// 左侧导航栏(此地方颜色全部改成自定义)
$sideBarWidth: 210px;
$navBarHeight: 57px;
$BreadcrumbHeight: 50px; //面包屑高度

$menuBg: $main-bg-color; // 侧边栏背景颜色
$menuHover: $sub-main-bg-content; // 焦点背景色
$menuHoverText: $mian-color; //焦点文字颜色
$menuText: $text-color-primary; //文字颜色
$menuActiveText: $mian-color; //选中的文字颜色

$menuItemBg: $main-bg-color; //二级背景颜色
$menuItemBorderLeft: $main-bg-color; //二级未选中的背景颜色
$menuItemText: $text-color-primary; //二级文字颜色
$menuItemHover: $sub-main-bg-content; //二级焦点背景颜色
$menuItemHoverText: $mian-color; //二级焦点文字颜色
$menuItemActiveText: $mian-color; //二级选中的背景颜色
$menuItemActiveBg: $sub-color1; //二级选中背景颜色
$menuItemActiveBorderLeft: $mian-color; //二级左描边背景颜色

$app-main-bg-color: $sub-main-bg-content; //app-mian背景颜色
$navBarColor: $main-bg-color; //顶部导航栏背景颜色
$navBarBorderBottomColor: $text-color-placeholder;
$BreadcrumbColor: $main-bg-color; //面包屑背景颜色
$BreadcrumbText: $text-color-primary; //面包屑文字颜色
$menuBg: var(--main-bg-color); // 侧边栏背景颜色
$menuHover: var(--sub-main-bg-content); // 焦点背景色
$menuHoverText: var(--mian-color); //焦点文字颜色
$menuText: var(--text-color-primary); //文字颜色
$menuActiveText: var(--mian-color); //选中的文字颜色

$menuItemBg: var(--main-bg-color); //二级背景颜色
$menuItemBorderLeft: var(--main-bg-color); //二级未选中的背景颜色
$menuItemText: var(--text-color-primary); //二级文字颜色
$menuItemHover: var(--sub-main-bg-content); //二级焦点背景颜色
$menuItemHoverText: var(--mian-color); //二级焦点文字颜色
$menuItemActiveText: var(--mian-color); //二级选中的背景颜色
$menuItemActiveBg: var(--sub-color1); //二级选中背景颜色
$menuItemActiveBorderLeft: var(--mian-color); //二级左描边背景颜色

$app-main-bg-color: var(--sub-main-bg-content); //app-mian背景颜色
$navBarColor: var(--main-bg-color); //顶部导航栏背景颜色
$navBarBorderBottomColor: var(--text-color-placeholder);
$BreadcrumbColor: var(--main-bg-color); //面包屑背景颜色
$BreadcrumbText: var(--text-color-primary); //面包屑文字颜色
10 changes: 10 additions & 0 deletions src/styles/element/index.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
/* 修改element颜色变量 */
// @forward 'element-plus/theme-chalk/src/common/var.scss' with (
// $colors: (
// 'primary': (
// 'base': green,
// ),
// )
// );

@import './src/styles/index.scss';
Loading

0 comments on commit 399fdc9

Please sign in to comment.