admin/jdcProject_front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 提取 css 变量

Browse Source
This commit is contained in:
pany 2022-05-25 21:53:38 +08:00
parent 66fd1861d7
commit ec3408d343
12 changed files with 101 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "v3-admin-vite",
"version": "3.1.7",
"version": "3.1.8",
"description": "一个免费开源的中后台管理系统基础解决方案，基于 Vue3、TypeScript、Element-Plus、Pinia 和 Vite 等主流技术.",
"author": {
"name": "pany",

10
src/layout/components/AppMain.vue
View File

@ -22,26 +22,24 @@ const key = computed(() => {
<style lang="scss" scoped>
.app-main {
/* 50 = navbar height */
min-height: calc(100vh - 50px);
min-height: calc(100vh - var(--v3-navigationbar-height));
width: 100%;
position: relative;
overflow: hidden;
}
.fixed-header + .app-main {
padding-top: 50px;
padding-top: var(--v3-navigationbar-height);
height: 100vh;
overflow: auto;
}
.hasTagsView {
.app-main {
/* 84 = navbar + tags-view = 50 + 34 */
min-height: calc(100vh - 84px);
min-height: calc(100vh - var(--v3-header-height));
}
.fixed-header + .app-main {
padding-top: 84px;
padding-top: var(--v3-header-height);
}
}
</style>

2
src/layout/components/BreadCrumb/index.vue
View File

@ -73,7 +73,7 @@ onBeforeMount(() => {
.app-breadcrumb.el-breadcrumb {
display: inline-block;
font-size: 14px;
line-height: 50px;
line-height: var(--v3-navigationbar-height);
margin-left: 8px;
.no-redirect {
color: #97a8be;

2
src/layout/components/NavigationBar/index.vue
View File

@ -82,7 +82,7 @@ const state = reactive({
<style lang="scss" scoped>
.navbar {
height: 50px;
height: var(--v3-navigationbar-height);
overflow: hidden;
background: #fff;
.hamburger {

2
src/layout/components/RightPanel/index.vue
View File

@ -27,7 +27,7 @@ const show = ref(false)
.handle-button {
width: 48px;
height: 48px;
background-color: #152d3d;
background-color: var(--v3-rightpanel-button-bg-color);
position: absolute;
right: 0px;
text-align: center;

16
src/layout/components/Sidebar/SidebarLogo.vue
View File

@ -34,9 +34,9 @@ defineProps({
.sidebar-logo-container {
position: relative;
width: 100%;
height: 84px;
line-height: 84px;
background: #0c202b;
height: var(--v3-header-height);
line-height: var(--v3-header-height);
background-color: var(--v3-sidebarlogo-bg-color);
text-align: center;
overflow: hidden;
.sidebar-logo {
@ -49,16 +49,6 @@ defineProps({
height: 100%;
vertical-align: middle;
}
& .sidebar-title {
display: inline-block;
margin: 0;
color: #fff;
font-weight: 600;
line-height: 50px;
font-size: 16px;
font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
vertical-align: middle;
}
}
&.collapse {
.sidebar-logo {

24
src/layout/components/Sidebar/index.vue
View File

@ -6,6 +6,11 @@ import { usePermissionStore } from "@/store/modules/permission"
import { useSettingsStore } from "@/store/modules/settings"
import SidebarItem from "./SidebarItem.vue"
import SidebarLogo from "./SidebarLogo.vue"
import { getCssVariableValue } from "@/utils"
const v3SidebarMenuBgColor = getCssVariableValue("--v3-sidebar-menu-bg-color")
const v3SidebarMenuTextColor = getCssVariableValue("--v3-sidebar-menu-text-color")
const v3SidebarMenuActiveTextColor = getCssVariableValue("--v3-sidebar-menu-active-text-color")
const route = useRoute()
@ -40,9 +45,9 @@ const isCollapse = computed(() => {
:collapse="isCollapse"
:unique-opened="true"
:default-active="activeMenu"
background-color="#152d3d"
text-color="#C0C4CC"
active-text-color="#fff"
:background-color="v3SidebarMenuBgColor"
:text-color="v3SidebarMenuTextColor"
:active-text-color="v3SidebarMenuActiveTextColor"
mode="vertical"
>
<SidebarItem
@ -89,7 +94,7 @@ const isCollapse = computed(() => {
left: 0;
width: 4px;
height: 100%;
background-color: #66b1ff;
background-color: var(--v3-sidebar-menu-tip-line-bg-color);
}
}
@ -99,8 +104,7 @@ const isCollapse = computed(() => {
.has-logo {
.el-scrollbar {
// 84px 是 logo 区域的 height
height: calc(100% - 84px);
height: calc(100% - var(--v3-header-height));
}
}
@ -113,10 +117,10 @@ const isCollapse = computed(() => {
::v-deep(.el-menu-item),
::v-deep(.el-sub-menu__title),
::v-deep(.el-sub-menu .el-menu-item) {
height: 60px;
line-height: 60px;
height: var(--v3-sidebar-menu-item-height);
line-height: var(--v3-sidebar-menu-item-height);
&:hover {
background-color: #ffffff10;
background-color: var(--v3-sidebar-menu-hover-bg-color);
}
display: block;
* {
@ -134,7 +138,7 @@ const isCollapse = computed(() => {
::v-deep(.el-sub-menu) {
&.is-active {
.el-sub-menu__title {
color: #fff !important;
color: var(--v3-sidebar-menu-active-text-color) !important;
@include tip-line;
}
}

26
src/layout/components/TagsView/index.vue
View File

@ -210,9 +210,9 @@ onBeforeMount(() => {
<style lang="scss" scoped>
.tags-view-container {
height: 34px;
height: var(--v3-tagsview-height);
width: 100%;
background: #fff;
background-color: #fff;
border-bottom: 1px solid #d8dce5;
box-shadow: 0 1px 3px 0 #00000010, 0 0 3px 0 #00000010;
.tags-view-wrapper {
@ -222,9 +222,9 @@ onBeforeMount(() => {
cursor: pointer;
height: 26px;
line-height: 26px;
border: 1px solid #d8dce5;
color: #495060;
background: #fff;
border: 1px solid var(--v3-tagsview-tag-border-color);
color: var(--v3-tagsview-tag-text-color);
background-color: var(--v3-tagsview-tag-bg-color);
padding: 0 8px;
font-size: 12px;
margin-left: 5px;
@ -236,12 +236,12 @@ onBeforeMount(() => {
margin-right: 15px;
}
&.active {
background-color: #409eff;
color: #fff;
border-color: #409eff;
background-color: var(--v3-tagsview-tag-active-bg-color);
color: var(--v3-tagsview-tag-active-text-color);
border-color: var(--v3-tagsview-tag-active-border-color);
&::before {
content: "";
background: #fff;
background-color: var(--v3-tagsview-tag-active-before-color);
display: inline-block;
width: 8px;
height: 8px;
@ -255,15 +255,15 @@ onBeforeMount(() => {
vertical-align: middle;
border-radius: 50%;
&:hover {
background-color: #00000030;
color: #fff;
background-color: var(--v3-tagsview-tag-icon-hover-bg-color);
color: var(--v3-tagsview-tag-icon-hover-color);
}
}
}
}
.contextmenu {
margin: 0;
background: #fff;
background-color: #fff;
z-index: 3000;
position: absolute;
list-style-type: none;
@ -278,7 +278,7 @@ onBeforeMount(() => {
padding: 7px 16px;
cursor: pointer;
&:hover {
background: #eee;
background-color: #eee;
}
}
}

19
src/layout/index.vue
View File

@ -63,7 +63,6 @@ onBeforeUnmount(() => {
<style lang="scss" scoped>
@import "@/styles/mixins.scss";
$sideBarWidth: 220px;
.app-wrapper {
@include clearfix;
@ -72,7 +71,7 @@ $sideBarWidth: 220px;
}
.drawer-bg {
background: #000;
background-color: #000;
opacity: 0.3;
width: 100%;
top: 0;
@ -84,13 +83,13 @@ $sideBarWidth: 220px;
.main-container {
min-height: 100%;
transition: margin-left 0.28s;
margin-left: $sideBarWidth;
margin-left: var(--v3-sidebar-width);
position: relative;
}
.sidebar-container {
transition: width 0.28s;
width: $sideBarWidth !important;
width: var(--v3-sidebar-width) !important;
height: 100%;
position: fixed;
font-size: 0;
@ -106,19 +105,19 @@ $sideBarWidth: 220px;
top: 0;
right: 0;
z-index: 9;
width: calc(100% - #{$sideBarWidth});
width: calc(100% - var(--v3-sidebar-width));
transition: width 0.28s;
}
.hideSidebar {
.main-container {
margin-left: 54px;
margin-left: var(--v3-sidebar-hide-width);
}
.sidebar-container {
width: 54px !important;
width: var(--v3-sidebar-hide-width) !important;
}
.fixed-header {
width: calc(100% - 54px);
width: calc(100% - var(--v3-sidebar-hide-width));
}
}
@ -129,7 +128,7 @@ $sideBarWidth: 220px;
}
.sidebar-container {
transition: transform 0.28s;
width: $sideBarWidth !important;
width: var(--v3-sidebar-width) !important;
}
&.openSidebar {
position: fixed;
@ -139,7 +138,7 @@ $sideBarWidth: 220px;
.sidebar-container {
pointer-events: none;
transition-duration: 0.3s;
transform: translate3d(-$sideBarWidth, 0, 0);
transform: translate3d(calc(0px - var(--v3-sidebar-width)), 0, 0);
}
}

12
src/styles/index.scss
View File

@ -1,7 +1,11 @@
@import "./mixins.scss"; // mixins
@import "./transition.scss"; // transition
@import "./theme/register.scss"; // 注册主题
// 全局 css 变量
@import "variables.css";
// transition
@import "./transition.scss";
// 注册主题
@import "./theme/register.scss";
// 业务页面几乎都应该在根元素上挂载 class="app-container"，以保持页面美观
.app-container {
padding: 20px;
}
@ -12,7 +16,7 @@ html {
body {
height: 100%;
background-color: #f0f2f5; // 全局背景色
background-color: var(--v3-body-bg-color);
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial,

34
src/styles/variables.css Normal file
View File

@ -0,0 +1,34 @@
/** 全局 css 变量，这种变量不仅可以在 css 和 scss 中使用，还可以导入到 js 中使用 */
:root {
/** 全局背景色 */
--v3-body-bg-color: #f0f2f5;
/** Header 区域 = NavigationBar 组件 + TagsView 组件 */
--v3-header-height: calc(var(--v3-navigationbar-height) + var(--v3-tagsview-height));
/** NavigationBar 组件 */
--v3-navigationbar-height: 50px;
/** Sidebar 组件 */
--v3-sidebar-width: 220px;
--v3-sidebar-hide-width: 54px;
--v3-sidebar-menu-item-height: 60px;
--v3-sidebar-menu-tip-line-bg-color: #66b1ff;
--v3-sidebar-menu-bg-color: #152d3d;
--v3-sidebar-menu-hover-bg-color: #ffffff10;
--v3-sidebar-menu-text-color: #c0c4cc;
--v3-sidebar-menu-active-text-color: #ffffff;
/** SidebarLogo 组件 */
--v3-sidebarlogo-bg-color: #0c202b;
/** TagsView 组件 */
--v3-tagsview-height: 34px;
--v3-tagsview-tag-text-color: #495060;
--v3-tagsview-tag-active-text-color: #ffffff;
--v3-tagsview-tag-bg-color: #ffffff;
--v3-tagsview-tag-active-bg-color: #409eff;
--v3-tagsview-tag-border-color: #d8dce5;
--v3-tagsview-tag-active-border-color: #409eff;
--v3-tagsview-tag-active-before-color: #ffffff;
--v3-tagsview-tag-icon-hover-bg-color: #00000030;
--v3-tagsview-tag-icon-hover-color: #ffffff;
/** RightPanel 组件 */
--v3-rightpanel-button-bg-color: #152d3d;
}

12
src/utils/index.ts
View File

@ -8,3 +8,15 @@ export const formatDateTime = (time: any) => {
const date = new Date(time)
return dayjs(date).format("YYYY-MM-DD HH:mm:ss")
}
/** 将全局 css 导入 js 中使用 */
export const getCssVariableValue = (cssVariableName: string) => {
let cssVariableValue = ""
try {
// 没有拿到值时，会返回空串
cssVariableValue = getComputedStyle(document.documentElement).getPropertyValue(cssVariableName)
} catch (error) {
console.error(error)
}
return cssVariableValue
}