sheng/mes-ui-d2
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Merge pull request #10 from FairyEver/dev

Browse Source 
theme optimization

Former-commit-id: 5994c98def6cff655ba18cb06f05805b2c458a6d
Former-commit-id: 137d7622d8a3cb53a5bdce2d64745dffcd4bb17d
Former-commit-id: 06e96b7941096ea9d97a220b33d5d9f6056367bd
Former-commit-id: b901a9298ce3ac5ae9cf69d1eb8c4bd2b665a93e
This commit is contained in:
李杨
2018-06-12 00:46:41 +08:00
committed by GitHub
parent ebeadd9883 e171fbfca5
commit 1ec5678480
29 changed files with 270 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
docs/zh/guide/change-log.md
View File

@@ -12,6 +12,9 @@
* [ 修改 ] 所有类似 `dd-` 的样式前缀(包括自动注册图标的id前缀)统一改为 `d2-`
* [ 修复 ] 修复 `highlight` 组件和 `markdown` 组件的样式冲突
* [ 修改 ] 内置组件名称统一改为 `d2-` 前缀，统一使用横线连接 (kebab-case) 风格
* [ 修改 ] 顶栏 logo 阴影删除
* [ 新增 ] 主题系统
* [ 新增 ] 三个主题，分别为 `d2admin 经典`，`简约线条`，`流星`
## v1.0.0

1
src/assets/image/logo/github-banner.png.REMOVED.git-id
View File

@@ -1 +0,0 @@
d37095e66cfdce9f355275f0b0a92d6ac646c2af

1
src/assets/image/logo/header-dev.png.REMOVED.git-id
View File

@@ -1 +0,0 @@
3fcdead32f4159d2c1a90ce6442632dc64e672a5

1
src/assets/image/logo/header-test.png.REMOVED.git-id
View File

@@ -1 +0,0 @@
5d8b6bdb850f8f23d983ed2e18518c7fad31ca00

1
src/assets/image/logo/header.png.REMOVED.git-id
View File

@@ -1 +0,0 @@
762198f6b192d9faef94d5eab316518f842f9c88

1
src/assets/image/logo/header@1x.png.REMOVED.git-id
View File

@@ -1 +0,0 @@
762198f6b192d9faef94d5eab316518f842f9c88

16
src/assets/style/theme/d2/index.scss
View File

@@ -30,22 +30,28 @@
// [组件] d2-container-full
.d2-container-full {
border: $theme-container-border;
border: $theme-container-border-outer;
border-bottom: none;
background-color: $theme-container-background-color;
.d2-container-full__header {
border-bottom: $theme-container-border;
border-bottom: $theme-container-border-inner;
background-color: $theme-container-header-footer-background-color;
}
.d2-container-full__footer {
border-top: $theme-container-border;
border-top: $theme-container-border-inner;
background-color: $theme-container-header-footer-background-color;
}
}
// [组件] d2-container-card
.d2-container-card {
border: $theme-container-border;
border: $theme-container-border-outer;
background-color: $theme-container-background-color;
.el-card__header {
border-bottom: $theme-container-border;
border-bottom: $theme-container-border-inner;
background-color: $theme-container-header-footer-background-color;
}
}
// 顶栏
.el-header {
// 切换按钮

8
src/assets/style/theme/d2/setting.scss
View File

@@ -4,8 +4,12 @@ $theme-name: 'd2';
$theme-bg-color: $color-bg;
// 主题背景图片
// $theme-bg-image: '/static/image/bg/xxx.jpg';
// container组件的边框
$theme-container-border: 1px solid $color-border-1;
// container组件
$theme-container-background-color: rgba(#FFF, 1);
$theme-container-header-footer-background-color: rgba(#FFF, .6);
$theme-container-border-inner: 1px solid $color-border-2;
$theme-container-border-outer: 1px solid $color-border-1;
// 顶栏和侧边栏中展开的菜单 hover 状态下
$theme-menu-item-color-hover: #293849;

162
src/assets/style/theme/line/index.scss Normal file
View File

@@ -0,0 +1,162 @@
@import '../theme.scss';
@import './setting.scss';
.theme-#{$theme-name} {
.layout-main {
background-color: $theme-bg-color;
background-image: url($theme-bg-image);
}
// 菜单项目
@mixin theme-menu-hover-style {
color: $theme-menu-item-color-hover;
i {
color: $theme-menu-item-color-hover;
}
background-color: $theme-menu-item-background-color-hover;
}
.el-submenu__title:hover {
@include theme-menu-hover-style;
}
.el-menu-item:hover {
@include theme-menu-hover-style;
}
.el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
@include theme-menu-hover-style;
}
.el-menu--horizontal .el-menu .el-submenu__title:hover {
@include theme-menu-hover-style;
}
// [组件] d2-container-full
.d2-container-full {
border: $theme-container-border-outer;
border-bottom: none;
background-color: $theme-container-background-color;
.d2-container-full__header {
border-bottom: $theme-container-border-inner;
background-color: $theme-container-header-footer-background-color;
}
.d2-container-full__footer {
border-top: $theme-container-border-inner;
background-color: $theme-container-header-footer-background-color;
}
}
// [组件] d2-container-card
.d2-container-card {
border: $theme-container-border-outer;
background-color: $theme-container-background-color;
.el-card__header {
border-bottom: $theme-container-border-inner;
background-color: $theme-container-header-footer-background-color;
}
}
// 顶栏
.el-header {
// 切换按钮
.toggle-aside-btn {
i {
color: $theme-header-item-color;
background-color: $theme-header-item-background-color;
&:hover {
color: $theme-header-item-color-hover;
}
}
}
// 顶栏菜单
.el-menu {
.el-menu-item {
transition: border-top-color 0s;
color: $theme-header-item-color;
background-color: $theme-header-item-background-color;
&:hover {
color: $theme-header-item-color-hover;
background-color: $theme-header-item-background-color-hover;
}
&:focus {
color: $theme-header-item-color-focus;
background-color: $theme-header-item-background-color-focus;
}
&.is-active {
color: $theme-header-item-color-active;
background-color: $theme-header-item-background-color-active;
}
}
.el-submenu {
.el-submenu__title {
transition: border-top-color 0s;
color: $theme-header-item-color;
background-color: $theme-header-item-background-color;
.el-submenu__icon-arrow {
color: $theme-header-item-color;
}
&:hover {
color: $theme-header-item-color-hover;
background-color: $theme-header-item-background-color-hover;
}
&:focus {
color: $theme-header-item-color-focus;
background-color: $theme-header-item-background-color-focus;
}
}
}
}
// 顶栏右侧
.d2-header-right {
.btn-text {
color: $theme-header-item-color;
&.can-hover {
&:hover {
color: $theme-header-item-color-hover;
background-color: $theme-header-item-background-color-hover;
}
}
}
}
}
// [布局] 顶栏下面
.el-container {
// 侧边栏
.el-aside {
// [菜单] 正常状态
.el-menu {
.el-menu-item {
color: $theme-aside-item-color;
background-color: $theme-aside-item-background-color;
i {
color: $theme-aside-item-color;
}
&:hover {
color: $theme-aside-item-color-hover;
background-color: $theme-aside-item-background-color-hover;
}
&:focus {
color: $theme-aside-item-color-focus;
background-color: $theme-aside-item-background-color-focus;
}
&.is-active {
color: $theme-aside-item-color-active;
background-color: $theme-aside-item-background-color-active;
}
}
}
.el-submenu {
.el-submenu__title {
color: $theme-aside-item-color;
background-color: $theme-aside-item-background-color;
i {
color: $theme-aside-item-color;
}
.el-submenu__icon-arrow {
color: $theme-aside-item-color;
}
&:hover {
color: $theme-aside-item-color-hover;
background-color: $theme-aside-item-background-color-hover;
}
}
}
}
}
}

42
src/assets/style/theme/line/setting.scss Normal file
View File

@@ -0,0 +1,42 @@
// 主题名称
$theme-name: 'line';
// 主题背景颜色
$theme-bg-color: $color-bg;
// 主题背景图片
$theme-bg-image: '/static/image/bg/line-squashed.jpg';
// container组件
$theme-container-background-color: rgba(#FFF, .8);
$theme-container-header-footer-background-color: rgba(#FFF, .6);
$theme-container-border-inner: 1px solid $color-border-2;
$theme-container-border-outer: 1px solid $color-border-1;
// 顶栏和侧边栏中展开的菜单 hover 状态下
$theme-menu-item-color-hover: #293849;
$theme-menu-item-background-color-hover: #ecf5ff;
// 顶栏上的文字颜色
$theme-header-item-color: $color-text-normal;
$theme-header-item-background-color: transparent;
// 顶栏上的项目在 hover 时
$theme-header-item-color-hover: $color-text-main;
$theme-header-item-background-color-hover: rgba(#000, .02);
// 顶栏上的项目在 focus 时
$theme-header-item-color-focus: $color-text-main;
$theme-header-item-background-color-focus: rgba(#000, .02);
// 顶栏上的项目在 active 时
$theme-header-item-color-active: $color-text-main;
$theme-header-item-background-color-active: rgba(#000, .03);
// 侧边栏上的文字颜色
$theme-aside-item-color: $color-text-normal;
$theme-aside-item-background-color: transparent;
// 侧边栏上的项目在 hover 时
$theme-aside-item-color-hover: $color-text-main;
$theme-aside-item-background-color-hover: rgba(#000, .02);
// 侧边栏上的项目在 focus 时
$theme-aside-item-color-focus: $color-text-main;
$theme-aside-item-background-color-focus: rgba(#000, .02);
// 侧边栏上的项目在 active 时
$theme-aside-item-color-active: $color-text-main;
$theme-aside-item-background-color-active: rgba(#000, .03);

16
src/assets/style/theme/star/index.scss
View File

@@ -30,20 +30,28 @@
// [组件] d2-container-full
.d2-container-full {
border: $theme-container-border-outer;
border-bottom: none;
background-color: $theme-container-background-color;
.d2-container-full__header {
border-bottom: $theme-container-border;
border-bottom: $theme-container-border-inner;
background-color: $theme-container-header-footer-background-color;
}
.d2-container-full__footer {
border-top: $theme-container-border;
border-top: $theme-container-border-inner;
background-color: $theme-container-header-footer-background-color;
}
}
// [组件] d2-container-card
.d2-container-card {
border: $theme-container-border;
border: $theme-container-border-outer;
background-color: $theme-container-background-color;
.el-card__header {
border-bottom: $theme-container-border;
border-bottom: $theme-container-border-inner;
background-color: $theme-container-header-footer-background-color;
}
}
// 顶栏
.el-header {
// 切换按钮

10
src/assets/style/theme/star/setting.scss
View File

@@ -3,9 +3,13 @@ $theme-name: 'star';
// 主题背景颜色
$theme-bg-color: #EFF4F8;
// 主题背景图片
$theme-bg-image: '/static/image/bg/star.jpg';
// container组件的边框
$theme-container-border: 1px solid #d8dfea;
$theme-bg-image: '/static/image/bg/star-squashed.jpg';
// container组件
$theme-container-background-color: rgba(#FFF, .9);
$theme-container-header-footer-background-color: rgba(#FFF, .6);
$theme-container-border-inner: 1px solid #8fb0b1;
$theme-container-border-outer: none;
// 顶栏和侧边栏中展开的菜单 hover 状态下
$theme-menu-item-color-hover: #293849;

1
src/assets/style/theme/theme.scss
View File

@@ -122,7 +122,6 @@
position: absolute;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
background-color: #FFF;
overflow: hidden;
color: #303133;
&:hover {

12
src/components/core/d2-layout-main/index.vue
View File

@@ -3,8 +3,8 @@
<!-- 顶栏 -->
<el-header>
<div class="logo-group" :style="{width: collapse ? asideWidthCollapse : asideWidth}">
<img v-if="collapse" src="@/assets/image/logo/header-icon-only.png">
<img v-else src="@/assets/image/logo/header.png">
<img v-if="collapse" :src="`/static/image/theme/${themeName}/logo/icon-only.png`">
<img v-else :src="`/static/image/theme/${themeName}/logo/all.png`">
</div>
<div class="toggle-aside-btn" @click="collapse = !collapse">
<d2-icon name="bars"/>
@@ -29,7 +29,7 @@
</template>
<script>
import { mapMutations } from 'vuex'
import { mapState, mapMutations } from 'vuex'
export default {
name: 'd2-layout-main',
components: {
@@ -46,6 +46,11 @@ export default {
asideWidthCollapse: '65px'
}
},
computed: {
...mapState({
themeName: state => state.theme.name
})
},
mounted () {
// 加载主题
this.loadTheme()
@@ -61,5 +66,6 @@ export default {
<style lang="scss">
// 主题
@import '~@/assets/style/theme/d2/index.scss';
@import '~@/assets/style/theme/line/index.scss';
@import '~@/assets/style/theme/star/index.scss';
</style>

2
src/pages/demo/chart/demo/components/d2-demo-chart-card.vue
View File

@@ -1,5 +1,5 @@
<template>
<el-card>
<el-card shadow="never">
<div slot="header">
<el-button type="primary" size="mini" @click="syncData">
<d2-icon name="refresh"/>

2
src/pages/demo/components/icon/svg.vue
View File

@@ -38,6 +38,6 @@
.icon-title {
font-size: 12px;
margin-top: 10px;
color: $color-text-placehoder;
color: $color-text-normal;
}
</style>

2
src/pages/demo/plugins/import/csv.vue
View File

@@ -15,7 +15,7 @@
</el-button>
</el-upload>
</div>
<el-table v-bind="table" class="d2-mb">
<el-table v-bind="table">
<el-table-column
v-for="(item, index) in table.columns"
:key="index"

2
src/pages/demo/plugins/import/xlsx.vue
View File

@@ -15,7 +15,7 @@
</el-button>
</el-upload>
</div>
<el-table v-bind="table" class="d2-mb">
<el-table v-bind="table">
<el-table-column
v-for="(item, index) in table.columns"
:key="index"

2
src/router/index.js
View File

@@ -28,7 +28,7 @@ const routes = [
children: (pre => [
{ path: 'container/full', name: `${pre}container-full`, component: () => import('@/pages/demo/components/container/full.vue') },
{ path: 'container/ghost', name: `${pre}container-ghost`, component: () => import('@/pages/demo/components/container/ghost.vue') },
{ path: 'container/normal', name: `${pre}container-card`, component: () => import('@/pages/demo/components/container/card.vue') },
{ path: 'container/card', name: `${pre}container-card`, component: () => import('@/pages/demo/components/container/card.vue') },
{ path: 'countup', name: `${pre}countup`, component: () => import('@/pages/demo/components/countup/index.vue') },
{ path: 'editor-quill', name: `${pre}editor-quill`, component: () => import('@/pages/demo/components/editor-quill/index.vue') },
{ path: 'editor-simpleMDE', name: `${pre}editor-simpleMDE`, component: () => import('@/pages/demo/components/editor-simpleMDE/index.vue') },

9
src/store/modules/theme.js
View File

@@ -6,12 +6,17 @@ export default {
{
name: 'd2admin 经典',
value: 'd2',
preview: '/static/image/theme-preview/d2@2x.png'
preview: '/static/image/theme/d2/preview@2x.png'
},
{
name: '简约线条',
value: 'line',
preview: '/static/image/theme/line/preview@2x.png'
},
{
name: '流星',
value: 'star',
preview: '/static/image/theme-preview/star@2x.png'
preview: '/static/image/theme/star/preview@2x.png'
}
],
name: ''

1
static/image/bg/bg.psd.REMOVED.git-id Normal file
View File

@@ -0,0 +1 @@
24e8df57cba3d9d4638a7979543e43ffa3a5a6ee

1
static/image/bg/line-squashed.jpg.REMOVED.git-id Normal file
View File

@@ -0,0 +1 @@
4945760143bfdf609d363ea8f87dfd81b8aa7e97

1
static/image/bg/star-squashed.jpg.REMOVED.git-id Normal file
View File

@@ -0,0 +1 @@
2176e399086eda9e0aa2e22640a4b2229d0dd4ba

1
static/image/bg/star.jpg.REMOVED.git-id
View File

@@ -1 +0,0 @@
5d5d5cae76bf221fe4df90af31aba1800c621bc3

1
static/image/theme-preview/d2@2x.png.REMOVED.git-id
View File

@@ -1 +0,0 @@
74d02da8079b497b2c221e237eda7a63594b3d85

1
static/image/theme-preview/star@2x.png.REMOVED.git-id
View File

@@ -1 +0,0 @@
a2ed3f2203f8040f54c623f3b0d07ee16277d514

1
static/image/theme/d2/preview@2x.png.REMOVED.git-id Normal file
View File

@@ -0,0 +1 @@
a3c1a12bf369a749925b815cbec60166a874a2bd

1
static/image/theme/line/preview@2x.png.REMOVED.git-id Normal file
View File

@@ -0,0 +1 @@
04779178ebb86b06fc26fcbcb4bc499deb794c10

1
static/image/theme/star/preview@2x.png.REMOVED.git-id Normal file
View File

@@ -0,0 +1 @@
63b120219f5efcbbcbe0766a862cbeeb0f670fff