lisang
/
d2-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

build image and file path compatibility repair 

Former-commit-id: 69e5e4092b151379d27aa2eccde1255672277fb8 [formerly 69e5e4092b151379d27aa2eccde1255672277fb8 [formerly 69e5e4092b151379d27aa2eccde1255672277fb8 [formerly 69e5e4092b151379d27aa2eccde1255672277fb8 [formerly b70254441d8a42159229d3a1ffb6337a4904ce87 [formerly 218fe905d457ba3c6d7f48ceda77fbd38a6341ce]]]]]
Former-commit-id: 185cbeff13a282fadbf959c1227927501f39a728
Former-commit-id: 5740a528b4627568a348f2d3b59528a16c7a6f34
Former-commit-id: 771cc66a523221c6ee2b0279a0819caab64b2f53 [formerly c7def5344c50d8edf8a3b41a2dbc1305445282f2]
Former-commit-id: 3a9c6a8dd6b4399b04be05749d21692bff9ddc33
Former-commit-id: 6a4677e1001a6ec39cd7e5e051eaee1b1bf85ae1
Former-commit-id: 553208b3aaf49b39a63f495eec7097f9efcb2bd5
Former-commit-id: 1887cc7586fb947dd9f8815e61e6abd349bbdb4b
Former-commit-id: 0ba5ab3302ce4540b3706a32178e515ba9053536
This commit is contained in:
liyang 2018-06-22 01:15:28 +08:00
parent 2ae9ee72f2
commit 9b1fe4cae8
17 changed files with 400 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
README.md
View File

@ -8,7 +8,7 @@ Solution of management system front-end based on `vue.js` and `ElementUI`
D2Admin 是一个开源的管理系统前端集成方案
[Github仓库](https://github.com/FairyEver/d2-admin) - [预览地址](http://d2admin.fairyever.com/)
[Github仓库](https://github.com/FairyEver/d2-admin) - [预览地址](https://fairyever.gitee.io/d2-admin-preview)
[中文文档](https://fairyever.github.io/d2-admin/zh/)
@ -56,6 +56,7 @@ D2Admin 是完全开源免费的管理系统集成方案，由 [FairyEver](https
* 内置4种主题
* 公用样式抽离，方便的主题定制
* 支持百万级数据量的表格组件
* 打包后随意目录部署（已经做好兼容设置）
## TODO

2
config/index.js
View File

@ -56,7 +56,7 @@ module.exports = {
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
// 请根据你的站点地址修改这里
assetsPublicPath: '/',
assetsPublicPath: '/d2-admin-preview/',
/**
* Source Maps

7
docs/zh/guide/README.md
View File

@ -2,7 +2,7 @@
D2Admin 是一个开源的管理系统前端集成方案
[Github仓库](https://github.com/FairyEver/d2-admin) - [预览地址](http://d2admin.fairyever.com/)
[Github仓库](https://github.com/FairyEver/d2-admin) - [预览地址](https://fairyever.gitee.io/d2-admin-preview)
<div>
<iframe src="//ghbtns.com/github-btn.html?user=FairyEver&repo=d2-admin&type=star&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100" height="20"></iframe>
@ -15,7 +15,9 @@ D2Admin 是一个开源的管理系统前端集成方案
D2Admin 是完全开源免费的管理系统集成方案，由 [FairyEver](https://github.com/FairyEver) 在工作之余完全由兴趣驱动完成，如果你也一样喜欢前端开发，欢迎加入我们的讨论/学习群，群内可以`提问答疑`，`分享学习资料`或者随便扯淡
**QQ群号 806395827 | 微信 liyang1711467488**
**QQ群号 806395827 | 作者微信 liyang1711467488**
微信群需要先加群主才可以拉进群
::: tip Thanks
D2Admin 创建于2018年1月14日零点51分，在2018年5月26日正式发布，中间断断续续做了四个多月，发布一个月内收获将近 700star，在此对支持我的朋友表示感谢，D2Admin 将会保持更新，如果你有想法、建议、或者问题欢迎加群讨论
@ -63,6 +65,7 @@ D2Admin 创建于2018年1月14日零点51分，在2018年5月26日正式发布
* 内置4种主题
* 公用样式抽离，方便的主题定制
* 支持百万级数据量的表格组件
* 打包后随意目录部署（已经做好兼容设置）
## TODO

3
src/assets/style/fixed/markdown.scss
View File

@ -7,7 +7,4 @@
h1, h2 {
border-bottom: none;
}
img {
background-color: transparent;
}
}

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

@ -2,8 +2,6 @@
$theme-name: 'd2';
// 主题背景颜色
$theme-bg-color: #f8f8f9;
// 主题背景图片
$theme-bg-image: none;
// 主题背景图片遮罩
$theme-bg-mask: rgba(#000, 0);

2
src/assets/style/theme/line/setting.scss
View File

@ -2,8 +2,6 @@
$theme-name: 'line';
// 主题背景颜色
$theme-bg-color: #f8f8f9;
// 主题背景图片
$theme-bg-image: url('/static/image/bg/line-squashed.jpg');
// 主题背景图片遮罩
$theme-bg-mask: rgba(#000, 0);

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

@ -2,8 +2,6 @@
$theme-name: 'star';
// 主题背景颜色
$theme-bg-color: #EFF4F8;
// 主题背景图片
$theme-bg-image: url('/static/image/bg/star-squashed.jpg');
// 主题背景图片遮罩
$theme-bg-mask: rgba(#000, .3);

358
src/assets/style/theme/theme.scss Normal file
View File

@ -0,0 +1,358 @@
// 主题公用
.layout-main-group {
height: 100%;
width: 100%;
background-size: cover;
background-position: center;
position: relative;
// 背景上面的半透明遮罩
.layout-main-mask {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
}
// 主体
.layout-main {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
// [布局] 顶栏
.el-header {
padding: 0px;
// logo区域
.logo-group {
transition: width .3s;
float: left;
text-align: center;
img {
height: 60px;
}
}
// 折叠侧边栏切换按钮
.toggle-aside-btn {
float: left;
height: 60px;
width: 60px;
display: flex;
justify-content: center;
align-items: center;
@extend %unable-select;
i {
font-size: 20px;
margin-top: 4px;
}
}
// [菜单] 顶栏
.el-menu {
float: left;
border-bottom: none;
background-color: transparent;
.el-menu-item {
@extend %unable-select;
border-bottom: none;
}
.el-submenu {
@extend %unable-select;
.el-submenu__title {
border-bottom: none;
}
}
}
// 顶栏右侧的按钮
.d2-header-right {
float: right;
height: 60px;
display: flex;
align-items: center;
.btn-text {
padding: 14px 12px;
border-radius: 4px;
margin: 0px !important;
margin-left: 10px !important;
}
.el-dropdown {
@extend %unable-select;
}
}
}
// [布局] 顶栏下面
.el-container {
// 侧边栏
.el-aside {
transition: width .3s;
overflow: auto;
// [菜单] 正常状态
.el-menu {
@extend %unable-select;
background-color: transparent;
border-right: none;
.el-menu-item {
i {
margin-right: 5px;
font-size: 20px;
}
}
}
.el-submenu {
@extend %unable-select;
.el-submenu__title {
i {
margin-right: 5px;
font-size: 20px;
}
.el-submenu__icon-arrow {
margin-top: -10px;
}
}
}
// 菜单为空的时候显示的信息
.menu-empty {
height: 160px;
margin: 10px;
margin-top: 0px;
border-radius: 4px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
@extend %unable-select;
i {
font-size: 30px;
margin-bottom: 10px;
}
span {
font-size: 14px;
}
}
// [菜单] 折叠状态
.el-menu--collapse {
background-color: transparent;
.el-submenu__title {
text-align: center;
}
}
}
.el-main {
padding: 0px;
position: relative;
overflow: hidden;
}
}
}
}
// 每个主题特有的设置
.theme-#{$theme-name} {
// 背景图片和遮罩
.layout-main-group {
background-color: $theme-bg-color;
.layout-main-mask {
background-color: $theme-bg-mask;
}
}
// 菜单项目
@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 {
@extend %unable-select;
}
.el-menu-item {
@extend %unable-select;
}
.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;
.el-submenu__icon-arrow {
color: $theme-header-item-color-hover;
}
}
&:focus {
color: $theme-header-item-color-focus;
background-color: $theme-header-item-background-color-focus;
.el-submenu__icon-arrow {
color: $theme-header-item-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 {
// 菜单为空的时候显示的信息
.menu-empty {
background-color: $theme-aside-menu-empty-background-color;
i {
color: $theme-aside-menu-empty-icon-color;
}
span {
color: $theme-aside-menu-empty-text-color;
}
&:hover {
background-color: $theme-aside-menu-empty-background-color-hover;
i {
color: $theme-aside-menu-empty-icon-color-hover;
}
span {
color: $theme-aside-menu-empty-text-color-hover;
}
}
}
// [菜单] 正常状态
.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;
i {
color: $theme-aside-item-color-hover;
}
}
&:focus {
color: $theme-aside-item-color-focus;
background-color: $theme-aside-item-background-color-focus;
i {
color: $theme-aside-item-color-focus;
}
}
&.is-active {
color: $theme-aside-item-color-active;
background-color: $theme-aside-item-background-color-active;
i {
color: $theme-aside-item-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;
i {
color: $theme-aside-item-color-hover;
}
.el-submenu__icon-arrow {
color: $theme-aside-item-color-hover;
}
}
}
}
}
}
}

1
src/assets/style/theme/theme.scss.REMOVED.git-id
View File

@ -1 +0,0 @@
7951ca687a987c2f872c6a63ac497cfc58cba7dc

2
src/assets/style/theme/tomorrow-night-blue/setting.scss
View File

@ -2,8 +2,6 @@
$theme-name: 'tomorrow-night-blue';
// 主题背景颜色
$theme-bg-color: #002253;
// 主题背景图片
$theme-bg-image: none;
// 主题背景图片遮罩
$theme-bg-mask: rgba(#000, 0);

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

@ -1,12 +1,12 @@
<template>
<div class="layout-main-group">
<div class="layout-main-group" :style="styleLayoutMainGroup">
<div class="layout-main-mask"></div>
<el-container class="layout-main">
<!-- 顶栏 -->
<el-header>
<div class="logo-group" :style="{width: collapse ? asideWidthCollapse : asideWidth}">
<img v-if="collapse" :src="`/static/image/theme/${themeName}/logo/icon-only.png`">
<img v-else :src="`/static/image/theme/${themeName}/logo/all.png`">
<img v-if="collapse" :src="`${$assetsPublicPath}static/image/theme/${themeName}/logo/icon-only.png`">
<img v-else :src="`${$assetsPublicPath}static/image/theme/${themeName}/logo/all.png`">
</div>
<div class="toggle-aside-btn" @click="collapse = !collapse">
<d2-icon name="bars"/>
@ -60,8 +60,14 @@ export default {
},
computed: {
...mapState({
themeName: state => state.theme.name
})
themeName: state => state.theme.name,
themeBackGroundImage: state => state.theme.backGroundImage
}),
styleLayoutMainGroup () {
return {
...this.themeBackGroundImage ? {backgroundImage: `url('${this.$assetsPublicPath}${this.themeBackGroundImage}')`} : {}
}
}
},
mounted () {
// 加载主题

2
src/components/core/d2-markdown/index.vue
View File

@ -69,7 +69,7 @@ export default {
const renderer = new marked.Renderer()
renderer.blockquote = (quote) => {
// 百度网盘
return (this.baidupan && bandupan(quote)) || `<blockquote>${quote}</blockquote>`
return (this.baidupan && bandupan(quote, this.$assetsPublicPath)) || `<blockquote>${quote}</blockquote>`
}
return marked(data, {
...this.highlight ? {highlight: (code) => highlight.highlightAuto(code).value} : {},

6
src/components/core/d2-markdown/plugin/baidupan.js
View File

@ -1,4 +1,4 @@
export default (quote) => {
export default (quote, assetsPublicPath) => {
const _quote = quote.replace(/<[^<>]+>/g, '').trim()
const bdPanUrl = /^https:\/\/pan\.baidu\.com\/s\/[a-z0-9]+$/i
const bdPanUrlPwd = /^链接: https:\/\/pan\.baidu\.com\/s\/[a-z0-9]+ 密码: [a-z0-9]{4}$/i
@ -6,7 +6,7 @@ export default (quote) => {
return `<div class="baidupan">
<a href="${_quote}" class="container">
<div class="icon">
<img src="/static/image/baidu-pan-logo.png">
<img src="${assetsPublicPath}static/image/baidu-pan-logo.png" style="background-color: transparent;">
</div>
<div class="url">${_quote}</div>
</a>
@ -18,7 +18,7 @@ export default (quote) => {
<div class="container">
<a href="${url[0]}">
<div class="icon">
<img src="/static/image/baidu-pan-logo.png">
<img src="${assetsPublicPath}static/image/baidu-pan-logo.png" style="background-color: transparent;">
</div>
<div class="url">${url[0]}</div>
</a>

2
src/components/core/d2-theme-list/index.vue
View File

@ -2,7 +2,7 @@
<el-table :data="themeList" v-bind="table">
<el-table-column prop="name" align="center" width="160"/>
<el-table-column label="预览" width="220">
<div slot-scope="scope" class="theme-preview" :style="{'backgroundImage': `url(${ scope.row.preview })`}"></div>
<div slot-scope="scope" class="theme-preview" :style="{'backgroundImage': `url(${$assetsPublicPath}${scope.row.preview})`}"></div>
</el-table-column>
<el-table-column prop="address" align="center">
<template slot-scope="scope">

4
src/main.js
View File

@ -48,6 +48,8 @@ import pluginOpen from '@/plugin/open'
// 插件 支持百万级数据的表格
import bigdataTable from '@/plugin/vue-bigdata-table'
import buildConfig from '../config/index'
Vue.use(ElementUI)
Vue.use(contentmenu)
@ -61,6 +63,8 @@ Vue.config.productionTip = false
Vue.prototype.$env = process.env.NODE_ENV === 'development'
Vue.prototype.$assetsPublicPath = process.env.NODE_ENV === 'development' ? buildConfig.dev.assetsPublicPath : buildConfig.build.assetsPublicPath
/* eslint-disable no-new */
new Vue({
el: '#app',

2
src/pages/demo/components/markdown/url.vue
View File

@ -1,6 +1,6 @@
<template>
<d2-container>
<template slot="header">异步加载文件</template>
<d2-markdown url="/static/md/demo.md"/>
<d2-markdown :url="`${$assetsPublicPath}static/md/demo.md`"/>
</d2-container>
</template>

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

@ -6,25 +6,28 @@ export default {
{
name: 'd2admin 经典',
value: 'd2',
preview: '/static/image/theme/d2/preview@2x.png'
preview: 'static/image/theme/d2/preview@2x.png'
},
{
name: '简约线条',
value: 'line',
preview: '/static/image/theme/line/preview@2x.png'
backgroundImage: 'static/image/bg/line-squashed.jpg',
preview: 'static/image/theme/line/preview@2x.png'
},
{
name: '流星',
value: 'star',
preview: '/static/image/theme/star/preview@2x.png'
backgroundImage: 'static/image/bg/star-squashed.jpg',
preview: 'static/image/theme/star/preview@2x.png'
},
{
name: 'Tomorrow Night Blue (vsCode)',
value: 'tomorrow-night-blue',
preview: '/static/image/theme/tomorrow-night-blue/preview@2x.png'
preview: 'static/image/theme/tomorrow-night-blue/preview@2x.png'
}
],
name: ''
name: '',
backGroundImage: ''
},
mutations: {
// 从 cookie 加载主题
@ -53,6 +56,11 @@ export default {
},
// 激活当前主题
activeTheme (state) {
// 设置背景图片
const themeSetting = state.list.find(e => e.value === state.name)
if (themeSetting) {
state.backGroundImage = themeSetting.backgroundImage || ''
}
document.body.className = `theme-${state.name}`
}
}