wyw/EdgeManager
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

node configure增改接近完成，删除后端还没做

Browse Source
This commit is contained in:
Yu Sun
2022-07-07 01:27:45 +08:00
parent 331a941941
commit e018f19f09
189 changed files with 25627 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/App.vue Normal file
View File

@@ -0,0 +1,28 @@
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
import util from '@/libs/util'
export default {
name: 'app',
watch: {
'$i18n.locale': 'i18nHandle'
},
created () {
this.i18nHandle(this.$i18n.locale)
},
methods: {
i18nHandle (val, oldVal) {
util.cookies.set('lang', val)
document.querySelector('html').setAttribute('lang', val)
}
}
}
</script>
<style lang="scss">
@import '~@/assets/style/public-class.scss';
</style>

17
src/api/index.js Normal file
View File

@@ -0,0 +1,17 @@
import { assign, map } from 'lodash'
import faker from 'faker/locale/zh_CN'
import { service, request, serviceForMock, requestForMock, mock } from './service'
import * as tools from './tools'
const files = require.context('./modules', true, /\.api\.js$/)
const generators = files.keys().map(key => files(key).default)
export default assign({}, ...map(generators, generator => generator({
service,
request,
serviceForMock,
requestForMock,
mock,
faker,
tools
})))

25
src/api/modules/scada.configure.api.js Normal file
View File

@@ -0,0 +1,25 @@
export default ({ service, request, serviceForMock, requestForMock, mock, faker, tools }) => ({
/**
* @description 方法名称
* @param {Object} data 请求携带的信息
*/
ADD_NODE (data) {
return request({
url: '',
method: 'post',
data
})
},
UPDATE_NODE (data) {
return request({
url: '',
method: 'post',
data
})
},
QUERY_NODE () {
return request({ url: '?query=nodes' })
}
})

31
src/api/modules/sys.user.api.js Normal file
View File

@@ -0,0 +1,31 @@
import { find, assign } from 'lodash'
const users = [
{ username: 'admin', password: 'admin', uuid: 'admin-uuid', name: 'Admin' },
{ username: 'editor', password: 'editor', uuid: 'editor-uuid', name: 'Editor' },
{ username: 'user1', password: 'user1', uuid: 'user1-uuid', name: 'User1' }
]
export default ({ service, request, serviceForMock, requestForMock, mock, faker, tools }) => ({
/**
* @description 登录
* @param {Object} data 登录携带的信息
*/
SYS_USER_LOGIN (data = {}) {
// 模拟数据
mock
.onAny('/login')
.reply(config => {
const user = find(users, tools.parse(config.data))
return user
? tools.responseSuccess(assign({}, user, { token: faker.random.uuid() }))
: tools.responseError({}, '账号或密码不正确')
})
// 接口请求
return requestForMock({
url: '/login',
method: 'post',
data
})
}
})

102
src/api/service.js Normal file
View File

@@ -0,0 +1,102 @@
import axios from 'axios'
import Adapter from 'axios-mock-adapter'
import { get } from 'lodash'
import util from '@/libs/util'
import { errorLog, errorCreate } from './tools'
/**
* @description 创建请求实例
*/
function createService () {
// 创建一个 axios 实例
const service = axios.create()
// 请求拦截
service.interceptors.request.use(
config => config,
error => {
// 发送失败
console.log(error)
return Promise.reject(error)
}
)
// 响应拦截
service.interceptors.response.use(
response => {
// dataAxios 是 axios 返回数据中的 data
const dataAxios = response.data
// 这个状态码是和后端约定的
const { code } = dataAxios
// 根据 code 进行判断
if (code === undefined) {
// 如果没有 code 代表这不是项目后端开发的接口 比如可能是 D2Admin 请求最新版本
return dataAxios
} else {
// 有 code 代表这是一个后端接口 可以进行进一步的判断
switch (code) {
case 0:
// [ 示例 ] code === 0 代表没有错误
return dataAxios.data
case 'xxx':
// [ 示例 ] 其它和后台约定的 code
errorCreate(`[ code: xxx ] ${dataAxios.msg}: ${response.config.url}`)
break
default:
// 不是正确的 code
errorCreate(`${dataAxios.msg}: ${response.config.url}`)
break
}
}
},
error => {
const status = get(error, 'response.status')
switch (status) {
case 400: error.message = '请求错误'; break
case 401: error.message = '未授权，请登录'; break
case 403: error.message = '拒绝访问'; break
case 404: error.message = `请求地址出错: ${error.response.config.url}`; break
case 408: error.message = '请求超时'; break
case 500: error.message = '服务器内部错误'; break
case 501: error.message = '服务未实现'; break
case 502: error.message = '网关错误'; break
case 503: error.message = '服务不可用'; break
case 504: error.message = '网关超时'; break
case 505: error.message = 'HTTP版本不受支持'; break
default: break
}
errorLog(error)
return Promise.reject(error)
}
)
return service
}
/**
* @description 创建请求方法
* @param {Object} service axios 实例
*/
function createRequestFunction (service) {
return function (config) {
const token = util.cookies.get('token')
const configDefault = {
headers: {
Authorization: token,
'Content-Type': get(config, 'headers.Content-Type', 'application/json')
},
timeout: 5000,
baseURL: process.env.VUE_APP_API,
data: {}
}
return service(Object.assign(configDefault, config))
}
}
// 用于真实网络请求的实例和请求方法
export const service = createService()
export const request = createRequestFunction(service)
// 用于模拟网络请求的实例和请求方法
export const serviceForMock = createService()
export const requestForMock = createRequestFunction(serviceForMock)
// 网络请求数据模拟工具
export const mock = new Adapter(serviceForMock)

86
src/api/tools.js Normal file
View File

@@ -0,0 +1,86 @@
import { Message } from 'element-ui'
import store from '@/store'
import util from '@/libs/util'
/**
* @description 安全地解析 json 字符串
* @param {String} jsonString 需要解析的 json 字符串
* @param {String} defaultValue 默认值
*/
export function parse (jsonString = '{}', defaultValue = {}) {
let result = defaultValue
try {
result = JSON.parse(jsonString)
} catch (error) {
console.log(error)
}
return result
}
/**
* @description 接口请求返回
* @param {Any} data 返回值
* @param {String} msg 状态信息
* @param {Number} code 状态码
*/
export function response (data = {}, msg = '', code = 0) {
return [
200,
{ code, msg, data }
]
}
/**
* @description 接口请求返回 正确返回
* @param {Any} data 返回值
* @param {String} msg 状态信息
*/
export function responseSuccess (data = {}, msg = '成功') {
return response(data, msg)
}
/**
* @description 接口请求返回 错误返回
* @param {Any} data 返回值
* @param {String} msg 状态信息
* @param {Number} code 状态码
*/
export function responseError (data = {}, msg = '请求失败', code = 500) {
return response(data, msg, code)
}
/**
* @description 记录和显示错误
* @param {Error} error 错误对象
*/
export function errorLog (error) {
// 添加到日志
store.dispatch('d2admin/log/push', {
message: '数据请求异常',
type: 'danger',
meta: {
error
}
})
// 打印到控制台
if (process.env.NODE_ENV === 'development') {
util.log.danger('>>>>>> Error >>>>>>')
console.log(error)
}
// 显示提示
Message({
message: error.message,
type: 'error',
duration: 5 * 1000
})
}
/**
* @description 创建一个错误
* @param {String} msg 错误信息
*/
export function errorCreate (msg) {
const error = new Error(msg)
errorLog(error)
throw error
}

27
src/assets/style/animate/vue-transition.scss Normal file
View File

@@ -0,0 +1,27 @@
// 过渡动画 横向渐变
.fade-transverse-leave-active,
.fade-transverse-enter-active {
transition: all .5s;
}
.fade-transverse-enter {
opacity: 0;
transform: translateX(-30px);
}
.fade-transverse-leave-to {
opacity: 0;
transform: translateX(30px);
}
// 过渡动画 缩放渐变
.fade-scale-leave-active,
.fade-scale-enter-active {
transition: all .3s;
}
.fade-scale-enter {
opacity: 0;
transform: scale(1.2);
}
.fade-scale-leave-to {
opacity: 0;
transform: scale(0.8);
}

12
src/assets/style/fixed/base.scss Normal file
View File

@@ -0,0 +1,12 @@
// 优化显示
html, body {
margin: 0px;
height: 100%;
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
#app {
@extend %full;
a {
text-decoration: none;
}
}
}

31
src/assets/style/fixed/element.scss Normal file
View File

@@ -0,0 +1,31 @@
// element 样式补丁
.el-card {
&.is-always-shadow {
box-shadow: 0 0 8px 0 rgba(232,237,250,.6), 0 2px 4px 0 rgba(232,237,250,.5);
}
&.is-hover-shadow {
&:hover {
box-shadow: 0 0 8px 0 rgba(232,237,250,.6), 0 2px 4px 0 rgba(232,237,250,.5);
}
}
}
.el-menu--horizontal {
border-bottom: none !important;
}
.el-tabs__item:focus.is-active.is-focus:not(:active) {
box-shadow: none !important;
}
// 修复IE宽度不能撑满
.el-table__body,
.el-table__header {
width: 100% !important;
}
// Chrome下表格头部错位修复
.el-table th.gutter,
.el-table colgroup.gutter {
display: table-cell !important;
}

9
src/assets/style/fixed/markdown.scss Normal file
View File

@@ -0,0 +1,9 @@
// markdown 样式补丁
.markdown-body {
ul {
list-style: disc;
}
h1, h2 {
border-bottom: none;
}
}

8
src/assets/style/fixed/n-progress.scss Normal file
View File

@@ -0,0 +1,8 @@
#nprogress {
.bar {
background: $color-primary !important;
}
.peg {
box-shadow: 0 0 10px $color-primary, 0 0 5px $color-primary !important;
}
}

5
src/assets/style/fixed/tree-view.scss Normal file
View File

@@ -0,0 +1,5 @@
.tree-view-wrapper.tree-view-small {
.tree-view-item {
font-size: 10px;
}
}

9
src/assets/style/fixed/vue-grid-layout.scss Normal file
View File

@@ -0,0 +1,9 @@
// vue-splitpane 样式补丁
.vue-grid-item {
&.vue-grid-placeholder {
border: 1px solid $color-border-1;
background-color: rgba(#FFF, .3);
opacity: 1;
border-radius: 4px;
}
}

5
src/assets/style/fixed/vue-splitpane.scss Normal file
View File

@@ -0,0 +1,5 @@
// vue-splitpane 样式补丁
.splitter-pane-resizer {
background-color: $color-border-1 !important;
opacity: 1 !important;
}

67
src/assets/style/public-class.scss Normal file
View File

@@ -0,0 +1,67 @@
@import 'public';
// 补丁 base
@import '~@/assets/style/fixed/base.scss';
// 补丁 element
@import '~@/assets/style/fixed/element.scss';
// 补丁 markdown
@import '~@/assets/style/fixed/markdown.scss';
// 补丁 n-progress
@import '~@/assets/style/fixed/n-progress.scss';
// 补丁 vue-splitpane
@import '~@/assets/style/fixed/vue-splitpane.scss';
// 补丁 vue-grid-layout
@import '~@/assets/style/fixed/vue-grid-layout.scss';
// 补丁 tree-view
@import '~@/assets/style/fixed/tree-view.scss';
// 动画
@import '~@/assets/style/animate/vue-transition.scss';
// 在这里写公用的class
// 注意 这个文件里只写class
// mixin等内容请在 public.scss 里书写
// 文字相关
.#{$prefix}-text-center {
text-align: center;
}
// 浮动相关
.#{$prefix}-fl {
float: left;
}
.#{$prefix}-fr {
float: right;
}
// 边距相关
$sizes: (0, 5, 10, 15, 20);
@for $index from 1 to 6 {
.#{$prefix}-m-#{nth($sizes, $index)} { margin: #{nth($sizes, $index)}px !important; }
.#{$prefix}-mt-#{nth($sizes, $index)} { margin-top: #{nth($sizes, $index)}px !important; }
.#{$prefix}-mr-#{nth($sizes, $index)} { margin-right: #{nth($sizes, $index)}px !important; }
.#{$prefix}-mb-#{nth($sizes, $index)} { margin-bottom: #{nth($sizes, $index)}px !important; }
.#{$prefix}-ml-#{nth($sizes, $index)} { margin-left: #{nth($sizes, $index)}px !important; }
.#{$prefix}-p-#{nth($sizes, $index)} { padding: #{nth($sizes, $index)}px !important; }
.#{$prefix}-pt-#{nth($sizes, $index)} { padding-top: #{nth($sizes, $index)}px !important; }
.#{$prefix}-pr-#{nth($sizes, $index)} { padding-right: #{nth($sizes, $index)}px !important; }
.#{$prefix}-pb-#{nth($sizes, $index)} { padding-bottom: #{nth($sizes, $index)}px !important; }
.#{$prefix}-pl-#{nth($sizes, $index)} { padding-left: #{nth($sizes, $index)}px !important; }
}
// 快速使用
.#{$prefix}-m { margin: 20px !important; }
.#{$prefix}-mt { margin-top: 20px !important; }
.#{$prefix}-mr { margin-right: 20px !important; }
.#{$prefix}-mb { margin-bottom: 20px !important; }
.#{$prefix}-ml { margin-left: 20px !important; }
.#{$prefix}-p { padding: 20px !important; }
.#{$prefix}-pt { padding-top: 20px !important; }
.#{$prefix}-pr { padding-right: 20px !important; }
.#{$prefix}-pb { padding-bottom: 20px !important; }
.#{$prefix}-pl { padding-left: 20px !important; }

44
src/assets/style/public.scss Normal file
View File

@@ -0,0 +1,44 @@
@import '~@/assets/style/unit/color.scss';
// 工具类名统一前缀
$prefix: d2;
// 禁止用户选中 鼠标变为手形
%unable-select {
user-select: none;
cursor: pointer;
}
// 填满父元素
// 组要父元素 position: relative | absolute;
%full {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
}
// flex 垂直水平居中
%flex-center-row {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}
%flex-center-col {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
// 将元素模拟成卡片外观
%card {
border: 1px solid #dddee1;
border-color: #e9eaec;
background: #fff;
border-radius: 4px;
font-size: 14px;
position: relative;
}

2
src/assets/style/theme/chester/index.scss Normal file
View File

@@ -0,0 +1,2 @@
@import './setting.scss';
@import '../theme.scss';

64
src/assets/style/theme/chester/setting.scss Normal file
View File

@@ -0,0 +1,64 @@
// 主题名称
$theme-name: 'chester';
// 主题背景颜色
$theme-bg-color: #2C3643;
// 主题背景图片遮罩
$theme-bg-mask: rgba(#000, 0);
// 消息提示
$theme-message-info-background-color: #FFFFFF;
$theme-message-info-text-color: #222A34;
$theme-message-info-border-color: #222A34;
// container组件
$theme-container-background-color: rgba(#FFF, 1);
$theme-container-header-footer-background-color: #FFF;
$theme-container-border-inner: 1px solid #CFD7E5;
$theme-container-border-outer: 1px solid #2A2D2E;
$theme-multiple-page-control-color: #CCCCCC;
$theme-multiple-page-control-color-active: #242D38;
$theme-multiple-page-control-nav-prev-color: #CCCCCC;
$theme-multiple-page-control-nav-next-color: #CCCCCC;
$theme-multiple-page-control-border-color: #2A2D2E;
$theme-multiple-page-control-border-color-active: #FFFFFF;
$theme-multiple-page-control-background-color: #242D38;
$theme-multiple-page-control-background-color-active: #FFFFFF;
// 顶栏和侧边栏中展开的菜单 hover 状态下
$theme-menu-item-color-hover: #CCCCCC;
$theme-menu-item-background-color-hover: #2A2D2E;
// 顶栏上的文字颜色
$theme-header-item-color: #CCCCCC;
$theme-header-item-background-color: transparent;
// 顶栏上的项目在 hover 时
$theme-header-item-color-hover: #CCCCCC;
$theme-header-item-background-color-hover: #2A2D2E;
// 顶栏上的项目在 focus 时
$theme-header-item-color-focus: #CCCCCC;
$theme-header-item-background-color-focus: #222A34;
// 顶栏上的项目在 active 时
$theme-header-item-color-active: #FFFFFF;
$theme-header-item-background-color-active: #222A34;
// 侧边栏上的文字颜色
$theme-aside-item-color: #CCCCCC;
$theme-aside-item-background-color: transparent;
// 侧边栏上的项目在 hover 时
$theme-aside-item-color-hover: #CCCCCC;
$theme-aside-item-background-color-hover: #2A2D2E;
// 侧边栏上的项目在 focus 时
$theme-aside-item-color-focus: #CCCCCC;
$theme-aside-item-background-color-focus: #222A34;
// 侧边栏上的项目在 active 时
$theme-aside-item-color-active: #FFFFFF;
$theme-aside-item-background-color-active: #222A34;
// 侧边栏菜单为空的时候显示的元素
$theme-aside-menu-empty-icon-color: #CCCCCC;
$theme-aside-menu-empty-text-color: #CCCCCC;
$theme-aside-menu-empty-background-color: #242D38;
$theme-aside-menu-empty-icon-color-hover: #FFFFFF;
$theme-aside-menu-empty-text-color-hover: #FFFFFF;
$theme-aside-menu-empty-background-color-hover: #242D38;

2
src/assets/style/theme/d2/index.scss Normal file
View File

@@ -0,0 +1,2 @@
@import './setting.scss';
@import '../theme.scss';

64
src/assets/style/theme/d2/setting.scss Normal file
View File

@@ -0,0 +1,64 @@
// 主题名称
$theme-name: 'd2';
// 主题背景颜色
$theme-bg-color: #ebf1f6;
// 主题背景图片遮罩
$theme-bg-mask: rgba(#000, 0);
// 消息提示
$theme-message-info-background-color: $color-bg;
$theme-message-info-text-color: $color-text-normal;
$theme-message-info-border-color: $color-border-1;
// container组件
$theme-container-background-color: rgba(#FFF, 1);
$theme-container-header-footer-background-color: #FFF;
$theme-container-border-inner: 1px solid #cfd7e5;
$theme-container-border-outer: 1px solid #cfd7e5;
$theme-multiple-page-control-color: $color-text-normal;
$theme-multiple-page-control-color-active: #2f74ff;
$theme-multiple-page-control-nav-prev-color: #cfd7e5;
$theme-multiple-page-control-nav-next-color: #cfd7e5;
$theme-multiple-page-control-border-color: #cfd7e5;
$theme-multiple-page-control-border-color-active: #FFF;
$theme-multiple-page-control-background-color: rgba(#000, .03);
$theme-multiple-page-control-background-color-active: #FFF;
// 顶栏和侧边栏中展开的菜单 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: #2f74ff;
$theme-header-item-background-color-hover: rgba(#FFF, .5);
// 顶栏上的项目在 focus 时
$theme-header-item-color-focus: #2f74ff;
$theme-header-item-background-color-focus: rgba(#FFF, .5);
// 顶栏上的项目在 active 时
$theme-header-item-color-active: #2f74ff;
$theme-header-item-background-color-active: rgba(#FFF, .5);
// 侧边栏上的文字颜色
$theme-aside-item-color: $color-text-normal;
$theme-aside-item-background-color: transparent;
// 侧边栏上的项目在 hover 时
$theme-aside-item-color-hover: #2f74ff;
$theme-aside-item-background-color-hover: rgba(#FFF, .5);
// 侧边栏上的项目在 focus 时
$theme-aside-item-color-focus: #2f74ff;
$theme-aside-item-background-color-focus: rgba(#FFF, .5);
// 侧边栏上的项目在 active 时
$theme-aside-item-color-active: #2f74ff;
$theme-aside-item-background-color-active: rgba(#FFF, .5);
// 侧边栏菜单为空的时候显示的元素
$theme-aside-menu-empty-icon-color: $color-text-normal;
$theme-aside-menu-empty-text-color: $color-text-normal;
$theme-aside-menu-empty-background-color: rgba(#000, .03);
$theme-aside-menu-empty-icon-color-hover: $color-text-main;
$theme-aside-menu-empty-text-color-hover: $color-text-main;
$theme-aside-menu-empty-background-color-hover: rgba(#000, .05);

2
src/assets/style/theme/element/index.scss Normal file
View File

@@ -0,0 +1,2 @@
@import './setting.scss';
@import '../theme.scss';

64
src/assets/style/theme/element/setting.scss Normal file
View File

@@ -0,0 +1,64 @@
// 主题名称
$theme-name: 'element';
// 主题背景颜色
$theme-bg-color: #314255;
// 主题背景图片遮罩
$theme-bg-mask: rgba(#000, 0);
// 消息提示
$theme-message-info-background-color: #FFFFFF;
$theme-message-info-text-color: #202D3D;
$theme-message-info-border-color: #202D3D;
// container组件
$theme-container-background-color: rgba(#FFF, 1);
$theme-container-header-footer-background-color: #FFF;
$theme-container-border-inner: 1px solid #CFD7E5;
$theme-container-border-outer: 1px solid #011527;
$theme-multiple-page-control-color: #BFCBD9;
$theme-multiple-page-control-color-active: #46A0FC;
$theme-multiple-page-control-nav-prev-color: #BFCBD9;
$theme-multiple-page-control-nav-next-color: #BFCBD9;
$theme-multiple-page-control-border-color: #011527;
$theme-multiple-page-control-border-color-active: #FFFFFF;
$theme-multiple-page-control-background-color: #212D3D;
$theme-multiple-page-control-background-color-active: #FFFFFF;
// 顶栏和侧边栏中展开的菜单 hover 状态下
$theme-menu-item-color-hover: #BFCBD9;
$theme-menu-item-background-color-hover: #011527;
// 顶栏上的文字颜色
$theme-header-item-color: #BFCBD9;
$theme-header-item-background-color: transparent;
// 顶栏上的项目在 hover 时
$theme-header-item-color-hover: #BFCBD9;
$theme-header-item-background-color-hover: #011527;
// 顶栏上的项目在 focus 时
$theme-header-item-color-focus: #BFCBD9;
$theme-header-item-background-color-focus: #202D3D;
// 顶栏上的项目在 active 时
$theme-header-item-color-active: #46A0FC;
$theme-header-item-background-color-active: #202D3D;
// 侧边栏上的文字颜色
$theme-aside-item-color: #BFCBD9;
$theme-aside-item-background-color: transparent;
// 侧边栏上的项目在 hover 时
$theme-aside-item-color-hover: #BFCBD9;
$theme-aside-item-background-color-hover: #011527;
// 侧边栏上的项目在 focus 时
$theme-aside-item-color-focus: #BFCBD9;
$theme-aside-item-background-color-focus: #202D3D;
// 侧边栏上的项目在 active 时
$theme-aside-item-color-active: #46A0FC;
$theme-aside-item-background-color-active: #202D3D;
// 侧边栏菜单为空的时候显示的元素
$theme-aside-menu-empty-icon-color: #BFCBD9;
$theme-aside-menu-empty-text-color: #BFCBD9;
$theme-aside-menu-empty-background-color: #202D3D;
$theme-aside-menu-empty-icon-color-hover: #46A0FC;
$theme-aside-menu-empty-text-color-hover: #46A0FC;
$theme-aside-menu-empty-background-color-hover: #202D3D;

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

@@ -0,0 +1,2 @@
@import './setting.scss';
@import '../theme.scss';

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

@@ -0,0 +1,64 @@
// 主题名称
$theme-name: 'line';
// 主题背景颜色
$theme-bg-color: #f8f8f9;
// 主题背景图片遮罩
$theme-bg-mask: rgba(#000, 0);
// 消息提示
$theme-message-info-background-color: $color-bg;
$theme-message-info-text-color: $color-text-normal;
$theme-message-info-border-color: $color-border-1;
// container组件
$theme-container-background-color: rgba(#FFF, .8);
$theme-container-header-footer-background-color: #FFF;
$theme-container-border-inner: 1px solid $color-border-2;
$theme-container-border-outer: 1px solid #cfd7e5;
$theme-multiple-page-control-color: #FFF;
$theme-multiple-page-control-color-active: $color-text-normal;
$theme-multiple-page-control-nav-prev-color: #cfd7e5;
$theme-multiple-page-control-nav-next-color: #cfd7e5;
$theme-multiple-page-control-border-color: #cfd7e5;
$theme-multiple-page-control-border-color-active: #FFF;
$theme-multiple-page-control-background-color: #cfd7e5;
$theme-multiple-page-control-background-color-active: #FFF;
// 顶栏和侧边栏中展开的菜单 hover 状态下
$theme-menu-item-color-hover: #293849;
$theme-menu-item-background-color-hover: #EFEFEF;
// 顶栏上的文字颜色
$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);
// 侧边栏菜单为空的时候显示的元素
$theme-aside-menu-empty-icon-color: $color-text-normal;
$theme-aside-menu-empty-text-color: $color-text-normal;
$theme-aside-menu-empty-background-color: rgba(#000, .03);
$theme-aside-menu-empty-icon-color-hover: $color-text-main;
$theme-aside-menu-empty-text-color-hover: $color-text-main;
$theme-aside-menu-empty-background-color-hover: rgba(#000, .05);

9
src/assets/style/theme/register.scss Normal file
View File

@@ -0,0 +1,9 @@
@import '~@/assets/style/theme/theme-base.scss';
@import '~@/assets/style/theme/d2/index.scss';
@import '~@/assets/style/theme/chester/index.scss';
@import '~@/assets/style/theme/element/index.scss';
@import '~@/assets/style/theme/line/index.scss';
@import '~@/assets/style/theme/star/index.scss';
@import '~@/assets/style/theme/tomorrow-night-blue/index.scss';
@import '~@/assets/style/theme/violet/index.scss';

2
src/assets/style/theme/star/index.scss Normal file
View File

@@ -0,0 +1,2 @@
@import './setting.scss';
@import '../theme.scss';

64
src/assets/style/theme/star/setting.scss Normal file
View File

@@ -0,0 +1,64 @@
// 主题名称
$theme-name: 'star';
// 主题背景颜色
$theme-bg-color: #EFF4F8;
// 主题背景图片遮罩
$theme-bg-mask: rgba(#000, .3);
// 消息提示
$theme-message-info-background-color: $color-bg;
$theme-message-info-text-color: $color-text-normal;
$theme-message-info-border-color: $color-border-1;
// container组件
$theme-container-background-color: rgba(#FFF, .9);
$theme-container-header-footer-background-color: #FFF;
$theme-container-border-inner: 1px solid $color-border-1;
$theme-container-border-outer: 1px solid #114450;
$theme-multiple-page-control-color: #FFF;
$theme-multiple-page-control-color-active: $color-text-normal;
$theme-multiple-page-control-nav-prev-color: #FFF;
$theme-multiple-page-control-nav-next-color: #FFF;
$theme-multiple-page-control-border-color: #114450;
$theme-multiple-page-control-border-color-active: #FFF;
$theme-multiple-page-control-background-color: rgba(#FFF, .5);
$theme-multiple-page-control-background-color-active: #FFF;
// 顶栏和侧边栏中展开的菜单 hover 状态下
$theme-menu-item-color-hover: #293849;
$theme-menu-item-background-color-hover: #ecf5ff;
// 顶栏上的文字颜色
$theme-header-item-color: #FFF;
$theme-header-item-background-color: transparent;
// 顶栏上的项目在 hover 时
$theme-header-item-color-hover: #FFF;
$theme-header-item-background-color-hover: rgba(#000, .2);
// 顶栏上的项目在 focus 时
$theme-header-item-color-focus: #FFF;
$theme-header-item-background-color-focus: rgba(#000, .2);
// 顶栏上的项目在 active 时
$theme-header-item-color-active: #FFF;
$theme-header-item-background-color-active: rgba(#000, .3);
// 侧边栏上的文字颜色
$theme-aside-item-color: #FFF;
$theme-aside-item-background-color: transparent;
// 侧边栏上的项目在 hover 时
$theme-aside-item-color-hover: #FFF;
$theme-aside-item-background-color-hover: rgba(#000, .2);
// 侧边栏上的项目在 focus 时
$theme-aside-item-color-focus: #FFF;
$theme-aside-item-background-color-focus: rgba(#000, .2);
// 侧边栏上的项目在 active 时
$theme-aside-item-color-active: #FFF;
$theme-aside-item-background-color-active: rgba(#000, .3);
// 侧边栏菜单为空的时候显示的元素
$theme-aside-menu-empty-icon-color: #FFF;
$theme-aside-menu-empty-text-color: #FFF;
$theme-aside-menu-empty-background-color: rgba(#FFF, .2);
$theme-aside-menu-empty-icon-color-hover: #FFF;
$theme-aside-menu-empty-text-color-hover: #FFF;
$theme-aside-menu-empty-background-color-hover: rgba(#FFF, .3);

454
src/assets/style/theme/theme-base.scss Normal file
View File

@@ -0,0 +1,454 @@
// 减小弹出菜单的项目高度
.el-menu--popup {
.el-menu-item {
height: 36px;
line-height: 36px;
}
.el-submenu__title {
height: 36px;
line-height: 36px;
}
}
// 整体框架结构
.d2-layout-header-aside-group {
height: 100%;
width: 100%;
min-width: 900px;
background-size: cover;
background-position: center;
overflow: hidden;
position: relative;
// 背景上面的半透明遮罩
.d2-layout-header-aside-mask {
@extend %full;
}
// 内容层
.d2-layout-header-aside-content {
@extend %full;
.d2-theme-header {
height: 60px;
.d2-theme-header-menu {
overflow: hidden;
&.is-scrollable {
position: relative;
padding: 0 20px;
.d2-theme-header-menu__prev, .d2-theme-header-menu__next {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
}
.d2-theme-header-menu__content {
overflow: hidden;
.d2-theme-header-menu__scroll {
white-space: nowrap;
position: relative;
-webkit-transition: -webkit-transform .3s;
transition: -webkit-transform .3s;
transition: transform .3s;
transition: transform .3s, -webkit-transform .3s;
transition: transform .3s,-webkit-transform .3s;
float: left;
}
}
.d2-theme-header-menu__prev, .d2-theme-header-menu__next {
height: 60px;
position: absolute;
top: 0;
font-size: 20px;
cursor: pointer;
display: none;
}
.d2-theme-header-menu__prev {
left: 0;
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
}
.d2-theme-header-menu__next {
right: 0;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
}
}
}
.d2-theme-container {
.d2-theme-container-aside {
position: relative;
.d2-layout-header-aside-menu-side {
@extend %full;
overflow: hidden;
}
}
.d2-theme-container-transition {
transition: width .3s;
}
.d2-theme-container-main {
padding: 0px;
position: relative;
overflow: hidden;
.d2-theme-container-main-layer {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
}
.d2-theme-container-main-body {
position: relative;
}
}
}
}
}
// 主题公用
.d2-layout-header-aside-group {
&.grayMode {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
}
// 主体
.d2-layout-header-aside-content {
// [布局] 顶栏
.d2-theme-header {
// logo区域
.logo-group {
float: left;
text-align: center;
img {
height: 60px;
}
}
.logo-transition {
transition: width .3s;
}
// 折叠侧边栏切换按钮
.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;
%header-menu-item {
@extend %unable-select;
i.fa {
font-size: 16px;
margin-right: 4px;
}
}
.el-menu-item {
@extend %header-menu-item;
border-bottom: none;
}
.el-submenu {
@extend %header-menu-item;
.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;
&.el-color-picker.el-color-picker--mini {
padding: 9px 6px;
}
}
.el-dropdown {
@extend %unable-select;
}
}
}
// [布局] 顶栏下面
.d2-theme-container {
// 侧边栏
.d2-theme-container-aside {
%d2-theme-container-aside-menu-icon {
width: 20px;
text-align: center;
font-size: 16px;
}
// [菜单] 正常状态
.el-menu {
@extend %unable-select;
background-color: transparent;
border-right: none;
.el-menu-item {
i {
@extend %d2-theme-container-aside-menu-icon;
}
}
}
.el-submenu {
@extend %unable-select;
.el-submenu__title {
i {
@extend %d2-theme-container-aside-menu-icon;
}
.el-submenu__icon-arrow {
margin-top: -10px;
}
}
}
// 菜单为空的时候显示的信息
.d2-layout-header-aside-menu-empty {
height: 160px;
margin: 10px;
margin-top: 0px;
border-radius: 4px;
@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;
}
}
}
// 右下 主体
.d2-theme-container-main {
// 主体部分分为多页面控制器 和主体
.d2-theme-container-main-header {
height: 41px;
// 多页面控制器
.d2-multiple-page-control-group {
padding-right: 20px;
.d2-multiple-page-control-content {
overflow: auto;
position: relative;
.d2-multiple-page-control-content-inner {
.d2-multiple-page-control {
.el-tabs__header.is-top {
margin: 0px;
}
.el-tabs__nav {
overflow: hidden;
}
}
}
}
.d2-multiple-page-control-btn {
position: relative;
bottom: -1px;
.el-dropdown {
.el-button-group {
.el-button:first-child {
border-bottom-left-radius: 0px;
}
.el-button:last-child {
border-bottom-right-radius: 0px;
}
}
}
}
}
}
// 主体
.d2-theme-container-main-body {
// 布局组件
.container-component {
@extend %full;
overflow: hidden;
// 填充式布局组件
.d2-container-full {
position: absolute;
top: 0px;
right: 20px;
bottom: 0px;
left: 0px;
display: flex;
flex-direction: column;
overflow: hidden;
.d2-container-full__header {
padding: 20px;
}
.d2-container-full__body {
flex-grow: 1;
height: 100%;
padding: 20px 20px;
overflow: auto;
position: relative;
}
.d2-container-full__footer {
padding: 20px;
}
}
// 填充式布局组件 - 滚动优化
.d2-container-full-bs {
position: absolute;
top: 0px;
right: 20px;
bottom: 0px;
left: 0px;
display: flex;
flex-direction: column;
overflow: hidden;
.d2-container-full-bs__header {
padding: 20px;
}
.d2-container-full-bs__body {
flex-grow: 1;
overflow: hidden;
position: relative;
.d2-container-full-bs__body-wrapper-inner {
padding: 20px;
position: relative;
}
}
.d2-container-full-bs__footer {
padding: 20px;
}
}
// 隐形布局组件
.d2-container-ghost {
position: absolute;
top: 0px;
right: 20px;
bottom: 0px;
left: 0px;
display: flex;
flex-direction: column;
overflow: hidden;
.d2-container-ghost__header {
padding: 20px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
.d2-container-ghost__body {
flex-grow: 1;
overflow: auto;
position: relative;
}
.d2-container-ghost__footer {
padding: 20px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
}
// 隐形布局组件 - 滚动优化
.d2-container-ghost-bs {
position: absolute;
top: 0px;
right: 20px;
bottom: 0px;
left: 0px;
display: flex;
flex-direction: column;
overflow: hidden;
.d2-container-ghost-bs__header {
padding: 20px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
.d2-container-ghost-bs__body {
flex-grow: 1;
overflow: hidden;
position: relative;
}
.d2-container-ghost-bs__footer {
padding: 20px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
}
// 卡片式布局组件
.d2-container-card {
position: absolute;
top: 0px;
right: 20px;
bottom: 0px;
left: 0px;
display: flex;
flex-direction: column;
overflow: hidden;
.d2-container-card__header {
padding: 20px;
}
.d2-container-card__body {
flex-grow: 1;
overflow: auto;
.d2-container-card__body-card {
position: relative;
margin-bottom: 20px;
padding: 20px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
}
.d2-container-card__footer {
padding: 20px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
}
// 卡片式布局组件 - 滚动优化
.d2-container-card-bs {
position: absolute;
top: 0px;
right: 20px;
bottom: 0px;
left: 0px;
display: flex;
flex-direction: column;
overflow: hidden;
.d2-container-card-bs__header {
padding: 20px;
}
.d2-container-card-bs__body {
position: relative;
flex-grow: 1;
overflow: hidden;
.d2-container-card-bs__body-wrapper-inner {
padding-bottom: 20px;
}
.d2-container-card-bs__body-card {
position: relative;
padding: 20px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
}
.d2-container-card-bs__footer {
padding: 20px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
}
}
}
}
}
}
}

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

@@ -0,0 +1,421 @@
// 每个主题特有的设置
.theme-#{$theme-name} {
.el-message {
&.el-message--info {
background-color: $theme-message-info-background-color;
color: $theme-message-info-text-color;
border-color: $theme-message-info-border-color;
}
}
.el-card {
&.d2-card {
border: $theme-container-border-outer;
.el-card__header {
border-bottom: $theme-container-border-outer;
}
}
}
// 背景图片和遮罩
.d2-layout-header-aside-group {
background-color: $theme-bg-color;
.d2-layout-header-aside-mask {
background: $theme-bg-mask;
}
}
// 菜单项目
@mixin theme-menu-hover-style {
color: $theme-menu-item-color-hover;
i.fa {
color: $theme-menu-item-color-hover;
}
background: $theme-menu-item-background-color-hover;
}
%el-menu-icon {
i {
display: inline-block;
width: 14px;
text-align: center;
margin-right: 5px;
}
svg {
margin: 0px;
height: 14px;
width: 14px;
margin-right: 5px;
}
}
.el-submenu__title {
@extend %unable-select;
@extend %el-menu-icon;
}
.el-menu-item {
@extend %unable-select;
@extend %el-menu-icon;
}
.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-theme-header {
// 顶栏菜单空间不足时显示的滚动控件
.d2-theme-header-menu {
.d2-theme-header-menu__prev, .d2-theme-header-menu__next {
color: $theme-header-item-color;
background: $theme-header-item-background-color;
&:hover {
color: $theme-header-item-color-hover;
background: $theme-header-item-background-color-hover;
}
}
}
// 切换按钮
.toggle-aside-btn {
i {
color: $theme-header-item-color;
background: $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: $theme-header-item-background-color;
i.fa { color: inherit; }
&:hover {
color: $theme-header-item-color-hover;
background: $theme-header-item-background-color-hover;
i.fa { color: inherit; }
}
&:focus {
color: $theme-header-item-color-focus;
background: $theme-header-item-background-color-focus;
i.fa { color: inherit; }
}
&.is-active {
color: $theme-header-item-color-active;
background: $theme-header-item-background-color-active;
i.fa { color: inherit; }
}
}
.el-submenu {
&.is-active {
.el-submenu__title {
color: $theme-header-item-color-active;
background: $theme-header-item-background-color-active;
i.fa { color: inherit; }
}
}
.el-submenu__title {
transition: border-top-color 0s;
color: $theme-header-item-color;
background: $theme-header-item-background-color;
i.fa { color: inherit; }
.el-submenu__icon-arrow {
color: $theme-header-item-color;
}
&:hover {
color: $theme-header-item-color-hover;
background: $theme-header-item-background-color-hover;
i.fa { color: inherit; }
.el-submenu__icon-arrow {
color: $theme-header-item-color-hover;
}
}
&:focus {
color: $theme-header-item-color-focus;
background: $theme-header-item-background-color-focus;
i.fa { color: inherit; }
.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: $theme-header-item-background-color-hover;
}
}
}
}
}
// [布局] 顶栏下面
.d2-theme-container {
// 侧边栏
.d2-theme-container-aside {
// 菜单为空的时候显示的信息
.d2-layout-header-aside-menu-empty {
background: $theme-aside-menu-empty-background-color;
i {
color: $theme-aside-menu-empty-icon-color;
}
span {
color: $theme-aside-menu-empty-text-color;
}
&:hover {
background: $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: $theme-aside-item-background-color;
i {
color: $theme-aside-item-color;
}
&:hover {
color: $theme-aside-item-color-hover;
fill: $theme-aside-item-color-hover;
background: $theme-aside-item-background-color-hover;
i {
color: $theme-aside-item-color-hover;
}
}
&:focus {
color: $theme-aside-item-color-focus;
fill: $theme-aside-item-color-focus;
background: $theme-aside-item-background-color-focus;
i {
color: $theme-aside-item-color-focus;
}
}
&.is-active {
color: $theme-aside-item-color-active;
fill: $theme-aside-item-color-active;
background: $theme-aside-item-background-color-active;
i {
color: $theme-aside-item-color-active;
}
}
}
}
.el-submenu {
.el-submenu__title {
color: $theme-aside-item-color;
background: $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: $theme-aside-item-background-color-hover;
i {
color: $theme-aside-item-color-hover;
}
.el-submenu__icon-arrow {
color: $theme-aside-item-color-hover;
}
}
}
}
}
.d2-theme-container-main {
// 主体部分分为多页面控制器 和主体
.d2-theme-container-main-header {
// 多页面控制器
.d2-multiple-page-control {
.el-tabs__header.is-top {
border-bottom-color: $theme-multiple-page-control-border-color;
}
.el-tabs__nav {
border-color: $theme-multiple-page-control-border-color;
.el-tabs__item {
@extend %unable-select;
color: $theme-multiple-page-control-color;
background-color: $theme-multiple-page-control-background-color;
border-left-color: $theme-multiple-page-control-border-color;
&:first-child {
border-left: none;
&:hover {
padding: 0px 20px;
}
}
}
.el-tabs__item.is-active {
color: $theme-multiple-page-control-color-active;
background-color: $theme-multiple-page-control-background-color-active;
border-bottom-color: $theme-multiple-page-control-border-color-active;
}
}
%el-tabs__nav {
font-size: 20px;
}
.el-tabs__nav-prev {
@extend %el-tabs__nav;
color: $theme-multiple-page-control-nav-prev-color;
}
.el-tabs__nav-next {
@extend %el-tabs__nav;
color: $theme-multiple-page-control-nav-next-color;
}
}
// 多页控制器的关闭控制
.d2-multiple-page-control-btn {
.el-dropdown {
.el-button-group {
.el-button {
border-color: $theme-multiple-page-control-border-color;
}
}
}
}
}
// 主体
.d2-theme-container-main-body {
// 布局组件
.container-component {
// [组件]
// d2-container-full 填充型
.d2-container-full {
border: $theme-container-border-outer;
border-top: none;
border-bottom: none;
.d2-container-full__header {
border-bottom: $theme-container-border-inner;
background: $theme-container-header-footer-background-color;
}
.d2-container-full__body {
background: $theme-container-background-color;
}
.d2-container-full__footer {
border-top: $theme-container-border-inner;
background: $theme-container-header-footer-background-color;
}
}
// [组件]
// d2-container-full-bs 填充型 滚动优化
.d2-container-full-bs {
border: $theme-container-border-outer;
border-top: none;
border-bottom: none;
.d2-container-full-bs__header {
border-bottom: $theme-container-border-inner;
background: $theme-container-header-footer-background-color;
}
.d2-container-full-bs__body {
background: $theme-container-background-color;
}
.d2-container-full-bs__footer {
border-top: $theme-container-border-inner;
background: $theme-container-header-footer-background-color;
}
}
// [组件]
// d2-container-ghost 隐形布局组件
.d2-container-ghost {
.d2-container-ghost__header {
border-bottom: $theme-container-border-outer;
border-left: $theme-container-border-outer;
border-right: $theme-container-border-outer;
background: $theme-container-header-footer-background-color;
}
.d2-container-ghost__footer {
border-top: $theme-container-border-outer;
border-left: $theme-container-border-outer;
border-right: $theme-container-border-outer;
background: $theme-container-header-footer-background-color;
}
}
// [组件]
// d2-container-ghost-bs 隐形布局组件 滚动优化
.d2-container-ghost-bs {
.d2-container-ghost-bs__header {
border-bottom: $theme-container-border-outer;
border-left: $theme-container-border-outer;
border-right: $theme-container-border-outer;
background: $theme-container-header-footer-background-color;
}
.d2-container-ghost-bs__footer {
border-top: $theme-container-border-outer;
border-left: $theme-container-border-outer;
border-right: $theme-container-border-outer;
background: $theme-container-header-footer-background-color;
}
}
// [组件]
// d2-container-card 卡片型
.d2-container-card {
.d2-container-card__header {
border-bottom: $theme-container-border-inner;
border-left: $theme-container-border-outer;
border-right: $theme-container-border-outer;
background: $theme-container-header-footer-background-color;
}
.d2-container-card__body {
.d2-container-card__body-card {
background: $theme-container-background-color;
border-left: $theme-container-border-outer;
border-right: $theme-container-border-outer;
border-bottom: $theme-container-border-outer;
}
}
.d2-container-card__footer {
border-top: $theme-container-border-outer;
border-left: $theme-container-border-outer;
border-right: $theme-container-border-outer;
background: $theme-container-header-footer-background-color;
}
}
// [组件]
// d2-container-card-bs 卡片型 滚动优化
.d2-container-card-bs {
.d2-container-card-bs__header {
border-bottom: $theme-container-border-inner;
border-left: $theme-container-border-outer;
border-right: $theme-container-border-outer;
background: $theme-container-header-footer-background-color;
}
.d2-container-card-bs__body {
.d2-container-card-bs__body-card {
background: $theme-container-background-color;
border-left: $theme-container-border-outer;
border-right: $theme-container-border-outer;
border-bottom: $theme-container-border-outer;
}
}
.d2-container-card-bs__footer {
border-top: $theme-container-border-outer;
border-left: $theme-container-border-outer;
border-right: $theme-container-border-outer;
background: $theme-container-header-footer-background-color;
}
}
}
}
}
}
}

2
src/assets/style/theme/tomorrow-night-blue/index.scss Normal file
View File

@@ -0,0 +1,2 @@
@import './setting.scss';
@import '../theme.scss';

64
src/assets/style/theme/tomorrow-night-blue/setting.scss Normal file
View File

@@ -0,0 +1,64 @@
// 主题名称
$theme-name: 'tomorrow-night-blue';
// 主题背景颜色
$theme-bg-color: #002253;
// 主题背景图片遮罩
$theme-bg-mask: rgba(#000, 0);
// 消息提示
$theme-message-info-background-color: $color-bg;
$theme-message-info-text-color: $color-text-normal;
$theme-message-info-border-color: $color-border-1;
// container组件
$theme-container-background-color: rgba(#FFF, 1);
$theme-container-header-footer-background-color: #FFF;
$theme-container-border-inner: 1px solid $color-border-1;
$theme-container-border-outer: 1px solid #002253;
$theme-multiple-page-control-color: #FFF;
$theme-multiple-page-control-color-active: $color-text-normal;
$theme-multiple-page-control-nav-prev-color: #FFF;
$theme-multiple-page-control-nav-next-color: #FFF;
$theme-multiple-page-control-border-color: #002253;
$theme-multiple-page-control-border-color-active: #FFF;
$theme-multiple-page-control-background-color: rgba(#FFF, .2);
$theme-multiple-page-control-background-color-active: #FFF;
// 顶栏和侧边栏中展开的菜单 hover 状态下
$theme-menu-item-color-hover: #293849;
$theme-menu-item-background-color-hover: #ecf5ff;
// 顶栏上的文字颜色
$theme-header-item-color: #FF929A;
$theme-header-item-background-color: transparent;
// 顶栏上的项目在 hover 时
$theme-header-item-color-hover: #FFEBA4;
$theme-header-item-background-color-hover: rgba(#FFF, .05);
// 顶栏上的项目在 focus 时
$theme-header-item-color-focus: #FFB870;
$theme-header-item-background-color-focus: rgba(#FFF, .05);
// 顶栏上的项目在 active 时
$theme-header-item-color-active: #FFB870;
$theme-header-item-background-color-active: rgba(#FFF, .05);
// 侧边栏上的文字颜色
$theme-aside-item-color: #FF929A;
$theme-aside-item-background-color: transparent;
// 侧边栏上的项目在 hover 时
$theme-aside-item-color-hover: #FFEBA4;
$theme-aside-item-background-color-hover: rgba(#FFF, .05);
// 侧边栏上的项目在 focus 时
$theme-aside-item-color-focus: #FFB870;
$theme-aside-item-background-color-focus: rgba(#FFF, .05);
// 侧边栏上的项目在 active 时
$theme-aside-item-color-active: #FFB870;
$theme-aside-item-background-color-active: rgba(#FFF, .05);
// 侧边栏菜单为空的时候显示的元素
$theme-aside-menu-empty-icon-color: #FFB870;
$theme-aside-menu-empty-text-color: #FFB870;
$theme-aside-menu-empty-background-color: rgba(#FFF, .1);
$theme-aside-menu-empty-icon-color-hover: #FFEBA4;
$theme-aside-menu-empty-text-color-hover: #FFEBA4;
$theme-aside-menu-empty-background-color-hover: rgba(#FFF, .2);

9
src/assets/style/theme/violet/index.scss Normal file
View File

@@ -0,0 +1,9 @@
@import './setting.scss';
@import '../theme.scss';
.theme-#{$theme-name} {
.d2-layout-header-aside-group {
background: #bc00e3;
background: linear-gradient(120deg, #bc00e3 0%, #4EFFFB 100%);
}
}

64
src/assets/style/theme/violet/setting.scss Normal file
View File

@@ -0,0 +1,64 @@
// 主题名称
$theme-name: 'violet';
// 主题背景颜色
$theme-bg-color: #000;
// 主题背景图片遮罩
$theme-bg-mask: rgba(#000, 0);
// 消息提示
$theme-message-info-background-color: $color-bg;
$theme-message-info-text-color: $color-text-normal;
$theme-message-info-border-color: $color-border-1;
// container组件
$theme-container-background-color: #FFF;
$theme-container-header-footer-background-color: #FFF;
$theme-container-border-inner: 1px solid $color-border-2;
$theme-container-border-outer: 1px solid #8C40E2;
$theme-multiple-page-control-color: #FFF;
$theme-multiple-page-control-color-active: $color-text-normal;
$theme-multiple-page-control-nav-prev-color: #FFF;
$theme-multiple-page-control-nav-next-color: #FFF;
$theme-multiple-page-control-border-color: #8C40E2;
$theme-multiple-page-control-border-color-active: #FFF;
$theme-multiple-page-control-background-color: rgba(#FFF, .3);
$theme-multiple-page-control-background-color-active: #FFF;
// 顶栏和侧边栏中展开的菜单 hover 状态下
$theme-menu-item-color-hover: #293849;
$theme-menu-item-background-color-hover: #ecf5ff;
// 顶栏上的文字颜色
$theme-header-item-color: #FFF;
$theme-header-item-background-color: transparent;
// 顶栏上的项目在 hover 时
$theme-header-item-color-hover: #FFF;
$theme-header-item-background-color-hover: linear-gradient(-180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.12) 100%);
// 顶栏上的项目在 focus 时
$theme-header-item-color-focus: #FFF;
$theme-header-item-background-color-focus: linear-gradient(-180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.12) 100%);
// 顶栏上的项目在 active 时
$theme-header-item-color-active: #FFF;
$theme-header-item-background-color-active: linear-gradient(-180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.12) 100%);
// 侧边栏上的文字颜色
$theme-aside-item-color: #FFF;
$theme-aside-item-background-color: transparent;
// 侧边栏上的项目在 hover 时
$theme-aside-item-color-hover: #FFF;
$theme-aside-item-background-color-hover: linear-gradient(90deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.00) 100%);
// 侧边栏上的项目在 focus 时
$theme-aside-item-color-focus: #FFF;
$theme-aside-item-background-color-focus: linear-gradient(90deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.00) 100%);
// 侧边栏上的项目在 active 时
$theme-aside-item-color-active: #FFF;
$theme-aside-item-background-color-active: linear-gradient(90deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.00) 100%);
// 侧边栏菜单为空的时候显示的元素
$theme-aside-menu-empty-icon-color: #FFF;
$theme-aside-menu-empty-text-color: #FFF;
$theme-aside-menu-empty-background-color: rgba(#000, .1);
$theme-aside-menu-empty-icon-color-hover: #FFF;
$theme-aside-menu-empty-text-color-hover: #FFF;
$theme-aside-menu-empty-background-color-hover: rgba(#000, .15);

23
src/assets/style/unit/color.scss Normal file
View File

@@ -0,0 +1,23 @@
// 主色
$color-primary: #409EFF;
// 辅助色
$color-info: #909399;
$color-success: #67C23A;
$color-warning: #E6A23C;
$color-danger: #F56C6C;
// 文字
$color-text-main: #303133;
$color-text-normal: #606266;
$color-text-sub: #909399;
$color-text-placehoder: #C0C4CC;
// 边框
$color-border-1: #DCDFE6;
$color-border-2: #E4E7ED;
$color-border-3: #EBEEF5;
$color-border-4: #F2F6FC;
// 背景
$color-bg: #f8f8f9;

19
src/assets/svg-icons/icons/d2-admin-text.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 7.8 KiB

13
src/assets/svg-icons/icons/d2-admin.svg Normal file
View File

@@ -0,0 +1,13 @@
<svg viewBox="0 0 60 54" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<desc>D2Admin</desc>
<defs></defs>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="logo-no-shadow" transform="translate(-3.000000, -3.000000)">
<path d="M44.2833805,33.4299717 L6.05798302,56.3652102 C4.16366196,57.5018028 1.70662094,56.8875426 0.570028297,54.9932215 C0.197031333,54.3715599 8.87839274e-17,53.6602143 0,52.9352385 L-4.4408921e-16,7.06476152 C-7.1463071e-16,4.85562252 1.790861,3.06476152 4,3.06476152 C4.72497578,3.06476152 5.43632142,3.26179285 6.05798302,3.63478981 L44.2833805,26.5700283 C46.1777016,27.7066209 46.7919618,30.163662 45.6553692,32.057983 C45.3175701,32.6209814 44.8463789,33.0921727 44.2833805,33.4299717 Z" id="Triangle-Copy" fill="#35495E" transform="translate(25.000000, 30.000000) rotate(-180.000000) translate(-25.000000, -30.000000) "></path>
<path d="M60.2833805,33.4299717 L22.057983,56.3652102 C20.163662,57.5018028 17.7066209,56.8875426 16.5700283,54.9932215 C16.1970313,54.3715599 16,53.6602143 16,52.9352385 L16,7.06476152 C16,4.85562252 17.790861,3.06476152 20,3.06476152 C20.7249758,3.06476152 21.4363214,3.26179285 22.057983,3.63478981 L60.2833805,26.5700283 C62.1777016,27.7066209 62.7919618,30.163662 61.6553692,32.057983 C61.3175701,32.6209814 60.8463789,33.0921727 60.2833805,33.4299717 Z" id="Triangle" fill="#409EFF"></path>
<path d="M42.4688663,31.7973091 L24.0289915,42.8612339 C23.081831,43.4295303 21.8533105,43.1224001 21.2850141,42.1752396 C21.0985157,41.8644088 21,41.508736 21,41.1462481 L21,19.0183984 C21,17.9138289 21.8954305,17.0183984 23,17.0183984 C23.3624879,17.0183984 23.7181607,17.116914 24.0289915,17.3034125 L42.4688663,28.3673374 C43.4160268,28.9356337 43.7231569,30.1641542 43.1548606,31.1113147 C42.9859611,31.3928139 42.7503655,31.6284096 42.4688663,31.7973091 Z" id="Triangle-Copy" fill="#FFFFFF" transform="translate(31.000000, 30.082670) rotate(-180.000000) translate(-31.000000, -30.082670) "></path>
<path d="M37.5708451,30.8574929 L30.5144958,35.0913025 C30.0409155,35.3754507 29.4266552,35.2218856 29.1425071,34.7483054 C29.0492578,34.59289 29,34.4150536 29,34.2338096 L29,25.7661904 C29,25.2139056 29.4477153,24.7661904 30,24.7661904 C30.1812439,24.7661904 30.3590804,24.8154482 30.5144958,24.9086975 L37.5708451,29.1425071 C38.0444254,29.4266552 38.1979905,30.0409155 37.9138423,30.5144958 C37.8293925,30.6552454 37.7115947,30.7730432 37.5708451,30.8574929 Z" id="Triangle" fill="#409EFF"></path>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

7
src/assets/svg-icons/index.js Normal file
View File

@@ -0,0 +1,7 @@
import Vue from 'vue'
const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./icons', false, /\.svg$/)
const iconMap = requireAll(req)
Vue.prototype.$IconSvg = iconMap.map(e => e.default.id.slice(3))

27
src/components/d2-container/components/d2-container-card-bs.vue Normal file
View File

@@ -0,0 +1,27 @@
<template>
<div class="d2-container-card-bs">
<div v-if="$slots.header" class="d2-container-card-bs__header" ref="header">
<slot name="header"/>
</div>
<div class="d2-container-card-bs__body" ref="wrapper">
<div class="d2-container-card-bs__body-wrapper-inner">
<div class="d2-container-card-bs__body-card">
<slot/>
</div>
</div>
</div>
<div v-if="$slots.footer" class="d2-container-card-bs__footer" ref="footer">
<slot name="footer"/>
</div>
</div>
</template>
<script>
import bs from './mixins/bs'
export default {
name: 'd2-container-card-bs',
mixins: [
bs
]
}
</script>

33
src/components/d2-container/components/d2-container-card.vue Normal file
View File

@@ -0,0 +1,33 @@
<template>
<div class="d2-container-card">
<div v-if="$slots.header" class="d2-container-card__header" ref="header">
<slot name="header"/>
</div>
<div class="d2-container-card__body" ref="body">
<div class="d2-container-card__body-card">
<slot/>
</div>
</div>
<div v-if="$slots.footer" class="d2-container-card__footer" ref="footer">
<slot name="footer"/>
</div>
</div>
</template>
<script>
import scroll from './mixins/normal'
export default {
name: 'd2-container-card',
mixins: [
scroll
],
mounted () {
// 增加滚动事件监听
this.addScrollListener()
},
beforeDestroy () {
// 移除滚动事件监听
this.removeScrollListener()
}
}
</script>

25
src/components/d2-container/components/d2-container-full-bs.vue Normal file
View File

@@ -0,0 +1,25 @@
<template>
<div class="d2-container-full-bs">
<div v-if="$slots.header" class="d2-container-full-bs__header" ref="header">
<slot name="header"/>
</div>
<div class="d2-container-full-bs__body" ref="wrapper">
<div class="d2-container-full-bs__body-wrapper-inner">
<slot/>
</div>
</div>
<div v-if="$slots.footer" class="d2-container-full-bs__footer" ref="footer">
<slot name="footer"/>
</div>
</div>
</template>
<script>
import bs from './mixins/bs'
export default {
name: 'd2-container-card-bs',
mixins: [
bs
]
}
</script>

31
src/components/d2-container/components/d2-container-full.vue Normal file
View File

@@ -0,0 +1,31 @@
<template>
<div class="d2-container-full">
<div v-if="$slots.header" class="d2-container-full__header" ref="header">
<slot name="header"/>
</div>
<div class="d2-container-full__body" ref="body">
<slot/>
</div>
<div v-if="$slots.footer" class="d2-container-full__footer" ref="footer">
<slot name="footer"/>
</div>
</div>
</template>
<script>
import scroll from './mixins/normal'
export default {
name: 'd2-container-full',
mixins: [
scroll
],
mounted () {
// 增加滚动事件监听
this.addScrollListener()
},
beforeDestroy () {
// 移除滚动事件监听
this.removeScrollListener()
}
}
</script>

26
src/components/d2-container/components/d2-container-ghost-bs.vue Normal file
View File

@@ -0,0 +1,26 @@
<template>
<div class="d2-container-ghost-bs">
<div v-if="$slots.header" class="d2-container-ghost-bs__header" ref="header">
<slot name="header"/>
</div>
<div class="d2-container-ghost-bs__body" ref="wrapper">
<!-- https://github.com/d2-projects/d2-admin/issues/181 -->
<div>
<slot/>
</div>
</div>
<div v-if="$slots.footer" class="d2-container-ghost-bs__footer" ref="footer">
<slot name="footer"/>
</div>
</div>
</template>
<script>
import bs from './mixins/bs'
export default {
name: 'd2-container-card-bs',
mixins: [
bs
]
}
</script>

31
src/components/d2-container/components/d2-container-ghost.vue Normal file
View File

@@ -0,0 +1,31 @@
<template>
<div class="d2-container-ghost">
<div v-if="$slots.header" class="d2-container-ghost__header" ref="header">
<slot name="header"/>
</div>
<div class="d2-container-ghost__body" ref="body">
<slot/>
</div>
<div v-if="$slots.footer" class="d2-container-ghost__footer" ref="footer">
<slot name="footer"/>
</div>
</div>
</template>
<script>
import scroll from './mixins/normal'
export default {
name: 'd2-container-ghost',
mixins: [
scroll
],
mounted () {
// 增加滚动事件监听
this.addScrollListener()
},
beforeDestroy () {
// 移除滚动事件监听
this.removeScrollListener()
}
}
</script>

79
src/components/d2-container/components/d2-source.vue Normal file
View File

@@ -0,0 +1,79 @@
<template>
<div
v-if="show"
class="d2-source"
:class="{ 'd2-source--active': isActive }"
@click="handleClick">
<d2-icon name="code"/> 本页源码
</div>
</template>
<script>
import { last, get } from 'lodash'
export default {
data () {
return {
isActive: false,
path: ''
}
},
computed: {
show () {
return process.env.VUE_APP_SCOURCE_LINK === 'TRUE'
}
},
watch: {
$route: {
handler (to) {
this.path = get(last(to.matched), 'components.default.__source')
},
immediate: true
}
},
mounted () {
// 一秒后显示按钮
setTimeout(() => {
this.isActive = true
}, 500)
},
methods: {
// 点击按钮的时候跳转到源代码
handleClick () {
this.$open(`${process.env.VUE_APP_REPO}/blob/master/${this.path}`)
}
}
}
</script>
<style lang="scss" scoped>
.d2-source {
$borderRadius: 4px;
$paddingLR: 15px;
$paddingTB: 7px;
$fontSize: 12px;
$rightOuter: $paddingLR / 2;
opacity: 0;
position: fixed;
z-index: 9999;
right: - $borderRadius - $rightOuter;
bottom: 20px;
font-size: $fontSize;
line-height: $fontSize;
font-weight: bold;
border-radius: $borderRadius;
padding: $paddingTB $paddingLR;
padding-right: $borderRadius + $paddingLR;
background-color: rgba(#000, .7);
border: 1px solid #000;
color: #FFF;
transition: all .3s;
@extend %unable-select;
&.d2-source--active {
opacity: 1;
}
&:hover {
right: - $borderRadius;
background-color: rgba(#000, .9);
}
}
</style>

62
src/components/d2-container/components/mixins/bs.js Normal file
View File

@@ -0,0 +1,62 @@
import BScroll from 'better-scroll'
export default {
props: {
// 滚动优化的选项
betterScrollOptions: {
type: Object,
required: false,
default: () => ({})
}
},
data () {
return {
BS: null
}
},
mounted () {
this.scrollInit()
},
beforeDestroy () {
this.scrollDestroy()
},
methods: {
scrollInit () {
// 初始化 bs
this.BS = new BScroll(this.$refs.wrapper, Object.assign({
mouseWheel: true,
click: true,
scrollbar: {
fade: true,
interactive: false
}
}, this.betterScrollOptions))
// 滚动时发出事件 并且统一返回的数据格式
this.BS.on('scroll', ({ x, y }) => this.$emit('scroll', {
x: -x,
y: -y
}))
},
scrollDestroy () {
// https://github.com/d2-projects/d2-admin/issues/75
try {
this.BS.destroy()
} catch (e) {
delete this.BS
this.BS = null
}
},
// 外部调用的方法 返回顶部
scrollToTop () {
if (this.BS) this.BS.scrollTo(0, 0, 300)
},
// 手动发出滚动事件
scroll () {
if (this.BS) {
this.$emit('scroll', {
x: -this.BS.x,
y: -this.BS.y
})
}
}
}
}

67
src/components/d2-container/components/mixins/normal.js Normal file
View File

@@ -0,0 +1,67 @@
// 提供滚动方面的功能
// 非滚动优化模式通用
import { throttle } from 'lodash'
// 生成滚动事件的 handler
function handleMaker (wait) {
return throttle(e => {
this.$emit('scroll', {
x: e.target.scrollLeft,
y: e.target.scrollTop
})
}, wait)
}
export default {
props: {
// 滚动事件节流间隔
scrollDelay: {
type: Number,
required: false,
default: 10
}
},
data () {
return {
handleScroll: null
}
},
watch: {
scrollDelay (val) {
// 移除旧的监听
this.removeScrollListener()
// 生成新的 handle 方法
this.handleScroll = handleMaker.call(this, val)
// 添加新的监听
this.addScrollListener()
}
},
methods: {
// 增加滚动事件监听
addScrollListener () {
if (typeof this.handleScroll !== 'function') {
// mounted 生命周期内调用这个方法的时候会进入这里的判断
this.handleScroll = handleMaker.call(this, this.scrollDelay)
}
// 添加监听
this.$refs.body.addEventListener('scroll', this.handleScroll)
},
// 移除滚动事件监听
removeScrollListener () {
this.$refs.body.removeEventListener('scroll', this.handleScroll)
},
// 外部调用的方法 返回顶部
scrollToTop () {
const smoothscroll = () => {
const body = this.$refs.body
const currentScroll = body.scrollTop
if (currentScroll > 0) {
window.requestAnimationFrame(smoothscroll)
body.scrollTo(0, currentScroll - (currentScroll / 5))
}
}
smoothscroll()
}
}
}

106
src/components/d2-container/index.js Normal file
View File

@@ -0,0 +1,106 @@
// 组件
import d2ContainerFull from './components/d2-container-full.vue'
import d2ContainerFullBs from './components/d2-container-full-bs.vue'
import d2ContainerGhost from './components/d2-container-ghost.vue'
import d2ContainerGhostBs from './components/d2-container-ghost-bs.vue'
import d2ContainerCard from './components/d2-container-card.vue'
import d2ContainerCardBs from './components/d2-container-card-bs.vue'
import d2Source from './components/d2-source.vue'
export default {
name: 'd2-container',
props: {
// 容器样式
type: {
type: String,
required: false,
default: 'full'
},
// 滚动优化
betterScroll: {
type: Boolean,
required: false,
default: false
}
},
computed: {
// 始终返回渲染组件
component () {
if (this.type === 'card' && !this.betterScroll) return d2ContainerCard
if (this.type === 'card' && this.betterScroll) return d2ContainerCardBs
if (this.type === 'ghost' && !this.betterScroll) return d2ContainerGhost
if (this.type === 'ghost' && this.betterScroll) return d2ContainerGhostBs
if (this.type === 'full' && !this.betterScroll) return d2ContainerFull
if (this.type === 'full' && this.betterScroll) return d2ContainerFullBs
else {
return 'div'
}
}
},
render (h) {
const slots = [
this.$slots.default,
this.$slots.header ? <template slot="header">{ this.$slots.header }</template> : null,
this.$slots.footer ? <template slot="footer">{ this.$slots.footer }</template> : null
]
return <div
ref="container"
class="container-component">
<this.component
ref="component"
{ ...{ attrs: this.$attrs } }
onScroll={ e => this.$emit('scroll', e) }>
{ slots }
</this.component>
<d2Source/>
</div>
},
methods: {
// 返回顶部
scrollToTop () {
this.$refs.component.scrollToTop()
// 如果开启了 better scroll 还需要手动触发一遍 scroll 事件
const bs = this.$refs.component.BS
if (bs) this.$refs.component.scroll()
},
// 用法同原生方法 scrollBy
scrollBy (x = 0, y = 0, time = 300) {
if (this.betterScroll) {
const bs = this.$refs.component.BS
if (bs) {
bs.scrollBy(-x, -y, time)
// 手动触发一遍 scroll 事件
this.$refs.component.scroll()
}
} else {
this.$refs.component.$refs.body.scrollBy(x, y)
}
},
// 用法同原生方法 scrollTo
scrollTo (x = 0, y = 0, time = 300) {
if (this.betterScroll) {
const bs = this.$refs.component.BS
if (bs) {
bs.scrollTo(-x, -y, time)
// 手动触发一遍 scroll 事件
this.$refs.component.scroll()
}
} else {
this.$refs.component.$refs.body.scrollTo(x, y)
}
},
// 用法同原生方法 scrollTop
scrollTop (top = 0, time = 300) {
if (this.betterScroll) {
const bs = this.$refs.component.BS
if (bs) {
bs.scrollTo(bs.x, -top, time)
// 手动触发一遍 scroll 事件
this.$refs.component.scroll()
}
} else {
this.$refs.component.$refs.body.scrollTop = top
}
}
}
}

22
src/components/d2-icon-svg/index.vue Normal file
View File

@@ -0,0 +1,22 @@
<template>
<svg aria-hidden="true">
<use :xlink:href="icon"></use>
</svg>
</template>
<script>
export default {
name: 'd2-icon-svg',
props: {
name: {
type: String,
required: true
}
},
computed: {
icon () {
return `#d2-${this.name}`
}
}
}
</script>

4
src/components/d2-icon/font-awesome-4.7.0/css/font-awesome.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

BIN
src/components/d2-icon/font-awesome-4.7.0/fonts/FontAwesome.otf Normal file
View File

Binary file not shown.

BIN
src/components/d2-icon/font-awesome-4.7.0/fonts/fontawesome-webfont.eot Normal file
View File

Binary file not shown.

2671
src/components/d2-icon/font-awesome-4.7.0/fonts/fontawesome-webfont.svg Normal file
View File

File diff suppressed because it is too large Load Diff
Side by Side

After

Width:  |  Height:  |  Size: 434 KiB

BIN
src/components/d2-icon/font-awesome-4.7.0/fonts/fontawesome-webfont.ttf Normal file
View File

Binary file not shown.

BIN
src/components/d2-icon/font-awesome-4.7.0/fonts/fontawesome-webfont.woff Normal file
View File

Binary file not shown.

BIN
src/components/d2-icon/font-awesome-4.7.0/fonts/fontawesome-webfont.woff2 Normal file
View File

Binary file not shown.

17
src/components/d2-icon/index.vue Normal file
View File

@@ -0,0 +1,17 @@
<template>
<i class="fa" :class="`fa-${name}`" aria-hidden="true"></i>
</template>
<script>
import './font-awesome-4.7.0/css/font-awesome.min.css'
export default {
name: 'd2-icon',
props: {
name: {
type: String,
required: false,
default: 'font-awesome'
}
}
}
</script>

8
src/components/index.js Normal file
View File

@@ -0,0 +1,8 @@
import Vue from 'vue'
import d2Container from './d2-container'
// 注意 有些组件使用异步加载会有影响
Vue.component('d2-container', d2Container)
Vue.component('d2-icon', () => import('./d2-icon'))
Vue.component('d2-icon-svg', () => import('./d2-icon-svg/index.vue'))

37
src/i18n.js Normal file
View File

@@ -0,0 +1,37 @@
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import util from '@/libs/util'
Vue.use(VueI18n)
function loadLocaleMessages () {
const locales = require.context('./locales', true, /[A-Za-z0-9-_,\s]+\.json$/i)
const messages = {}
for (const key of locales.keys()) {
const matched = key.match(/([A-Za-z0-9-_]+)\./i)
if (matched && matched.length > 1) {
const locale = matched[1]
const localeElementUI = require(`element-ui/lib/locale/lang/${locales(key)._element}`)
messages[locale] = {
...locales(key),
...localeElementUI ? localeElementUI.default : {}
}
}
}
return messages
}
const messages = loadLocaleMessages()
Vue.prototype.$languages = Object.keys(messages).map(langlage => ({
label: messages[langlage]._name,
value: langlage
}))
const i18n = new VueI18n({
locale: util.cookies.get('lang') || process.env.VUE_APP_I18N_LOCALE,
fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE,
messages
})
export default i18n

50
src/layout/header-aside/components/contextmenu/components/contentmenuList/index.vue Normal file
View File

@@ -0,0 +1,50 @@
<template>
<div class="d2-contentmenu-list" @click="rowClick">
<div v-for="item in menulist" :key="item.value" :data-value="item.value" class="d2-contentmenu-item" flex="cross:center main:center">
<d2-icon v-if="item.icon" :name="item.icon"/>
<div class="d2-contentmenu-item-title" flex-box="1">
{{item.title}}
</div>
</div>
</div>
</template>
<script>
export default {
name: 'd2-contextmenu-list',
props: {
menulist: {
type: Array,
default: () => []
}
},
methods: {
rowClick (event) {
let target = event.target
while (!target.dataset.value) {
target = target.parentNode
}
this.$emit('rowClick', target.dataset.value)
}
}
}
</script>
<style lang="scss">
.d2-contentmenu-list {
.d2-contentmenu-item {
padding: 8px 20px 8px 15px;
margin: 0;
font-size: 14px;
color: #606266;
cursor: pointer;
&:hover {
background: #ecf5ff;
color: #66b1ff;
}
.d2-contentmenu-item-title {
margin-left: 10px;
}
}
}
</style>

68
src/layout/header-aside/components/contextmenu/index.vue Normal file
View File

@@ -0,0 +1,68 @@
<template>
<div class="d2-contextmenu" v-show="flag" :style="style">
<slot/>
</div>
</template>
<script>
export default {
name: 'd2-contextmenu',
props: {
visible: {
type: Boolean,
default: false
},
x: {
type: Number,
default: 0
},
y: {
type: Number,
default: 0
}
},
computed: {
flag: {
get () {
if (this.visible) {
// 注册全局监听事件 [ 目前只考虑鼠标解除触发 ]
window.addEventListener('mousedown', this.watchContextmenu)
}
return this.visible
},
set (newVal) {
this.$emit('update:visible', newVal)
}
},
style () {
return {
left: this.x + 'px',
top: this.y + 'px',
display: this.visible ? 'block' : 'none '
}
}
},
methods: {
watchContextmenu (event) {
if (!this.$el.contains(event.target) || event.button !== 0) this.flag = false
window.removeEventListener('mousedown', this.watchContextmenu)
}
},
mounted () {
// 将菜单放置到body下
document.querySelector('body').appendChild(this.$el)
}
}
</script>
<style>
.d2-contextmenu {
position: absolute;
padding: 5px 0;
z-index: 2018;
background: #FFF;
border: 1px solid #cfd7e5;
border-radius: 4px;
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
}
</style>

44
src/layout/header-aside/components/header-color/index.vue Normal file
View File

@@ -0,0 +1,44 @@
<template>
<el-color-picker
class="btn-text can-hover"
:value="value"
:predefine="predefine"
size="mini"
@change="set"/>
</template>
<script>
import { mapState, mapActions } from 'vuex'
export default {
name: 'd2-header-color',
data () {
return {
predefine: [
'#ff4500',
'#ff8c00',
'#ffd700',
'#90ee90',
'#00ced1',
'#1e90ff',
'#c71585'
]
}
},
computed: {
...mapState('d2admin/color', [
'value'
])
},
watch: {
value (value) {
this.set(value)
}
},
methods: {
...mapActions('d2admin/color', [
'set'
])
}
}
</script>

24
src/layout/header-aside/components/header-fullscreen/index.vue Normal file
View File

@@ -0,0 +1,24 @@
<template>
<el-tooltip effect="dark" :content="active ? '退出全屏' : '全屏'" placement="bottom">
<el-button class="d2-mr btn-text can-hover" type="text" @click="toggle">
<d2-icon v-if="active" name="compress"/>
<d2-icon v-else name="arrows-alt" style="font-size: 16px"/>
</el-button>
</el-tooltip>
</template>
<script>
import { mapState, mapActions } from 'vuex'
export default {
computed: {
...mapState('d2admin/fullscreen', [
'active'
])
},
methods: {
...mapActions('d2admin/fullscreen', [
'toggle'
])
}
}
</script>

25
src/layout/header-aside/components/header-locales/index.vue Normal file
View File

@@ -0,0 +1,25 @@
<template>
<el-dropdown placement="bottom" size="small" @command="onChangeLocale">
<el-button class="d2-mr btn-text can-hover" type="text">
<d2-icon name="language" style="font-size: 16px;"/>
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item
v-for="language in $languages"
:key="language.value"
:command="language.value">
<d2-icon :name="$i18n.locale === language.value ? 'dot-circle-o' : 'circle-o'" class="d2-mr-5"/>
{{ language.label }}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
<script>
import localeMixin from '@/locales/mixin.js'
export default {
mixins: [
localeMixin
]
}
</script>

39
src/layout/header-aside/components/header-log/index.vue Normal file
View File

@@ -0,0 +1,39 @@
<template>
<el-tooltip effect="dark" :content="tooltipContent" placement="bottom">
<el-button class="d2-ml-0 d2-mr btn-text can-hover" type="text" @click="handleClick">
<el-badge v-if="logLength > 0" :max="99" :value="logLengthError" :is-dot="logLengthError === 0">
<d2-icon :name="logLengthError === 0 ? 'dot-circle-o' : 'bug'" style="font-size: 20px"/>
</el-badge>
<d2-icon v-else name="dot-circle-o" style="font-size: 20px"/>
</el-button>
</el-tooltip>
</template>
<script>
import { mapGetters, mapMutations } from 'vuex'
export default {
computed: {
...mapGetters('d2admin', {
logLength: 'log/length',
logLengthError: 'log/lengthError'
}),
tooltipContent () {
return this.logLength === 0
? '没有日志或异常'
: `${this.logLength} 条日志${this.logLengthError > 0
? ` | 包含 ${this.logLengthError} 个异常`
: ''}`
}
},
methods: {
...mapMutations('d2admin/log', [
'clean'
]),
handleClick () {
this.$router.push({
name: 'log'
})
}
}
}
</script>

15
src/layout/header-aside/components/header-search/index.vue Normal file
View File

@@ -0,0 +1,15 @@
<template>
<el-button class="d2-mr btn-text can-hover" type="text" @click="handleClick">
<d2-icon name="search" style="font-size: 18px;"/>
</el-button>
</template>
<script>
export default {
methods: {
handleClick () {
this.$emit('click')
}
}
}
</script>

54
src/layout/header-aside/components/header-size/index.vue Normal file
View File

@@ -0,0 +1,54 @@
<template>
<el-dropdown placement="bottom" size="small" @command="handleChange">
<el-button class="d2-mr btn-text can-hover" type="text">
<d2-icon name="font" style="font-size: 16px;"/>
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item v-for="item in options" :key="item.value" :command="item.value">
<d2-icon :name="iconName(item.value)" class="d2-mr-5"/>{{item.label}}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
<script>
import { mapState, mapMutations, mapActions } from 'vuex'
export default {
name: 'd2-header-size',
data () {
return {
options: [
{ label: '默认', value: 'default' },
{ label: '中', value: 'medium' },
{ label: '小', value: 'small' },
{ label: '最小', value: 'mini' }
]
}
},
computed: {
...mapState('d2admin/size', [
'value'
])
},
methods: {
...mapMutations({
pageKeepAliveClean: 'd2admin/page/keepAliveClean'
}),
...mapActions({
sizeSet: 'd2admin/size/set'
}),
handleChange (value) {
this.sizeSet(value)
this.$notify({
title: '提示',
dangerouslyUseHTMLString: true,
message: '已更新页面内 <b>组件</b> 的 <b>默认尺寸</b><br/>例如按钮大小，<b>非字号</b>',
type: 'success'
})
},
iconName (name) {
return name === this.value ? 'dot-circle-o' : 'circle-o'
}
}
}
</script>

53
src/layout/header-aside/components/header-theme/components/d2-theme-list/index.vue Normal file
View File

@@ -0,0 +1,53 @@
<template>
<el-table :data="list" v-bind="table">
<el-table-column prop="title" align="center" width="160"/>
<el-table-column label="预览" width="120">
<div slot-scope="scope" class="theme-preview" :style="{ backgroundImage: `url(${$baseUrl}${scope.row.preview})` }"/>
</el-table-column>
<el-table-column prop="address" align="center">
<template slot-scope="scope">
<el-button v-if="activeName === scope.row.name" type="success" icon="el-icon-check" round>已激活</el-button>
<el-button v-else round @click="handleSelectTheme(scope.row.name)">使用</el-button>
</template>
</el-table-column>
</el-table>
</template>
<script>
import { mapState, mapActions } from 'vuex'
export default {
name: 'd2-theme-list',
data () {
return {
table: {
showHeader: false,
border: true
}
}
},
computed: {
...mapState('d2admin/theme', [
'list',
'activeName'
])
},
methods: {
...mapActions('d2admin/theme', [
'set'
]),
handleSelectTheme (name) {
this.set(name)
}
}
}
</script>
<style lang="scss" scoped>
.theme-preview {
height: 50px;
width: 100px;
border-radius: 4px;
background-size: cover;
border: 1px solid $color-border-1;
}
</style>

38
src/layout/header-aside/components/header-theme/index.vue Normal file
View File

@@ -0,0 +1,38 @@
<template>
<div>
<el-tooltip
effect="dark"
content="主题"
placement="bottom">
<el-button
class="d2-ml-0 d2-mr btn-text can-hover"
type="text"
@click="dialogVisible = true">
<d2-icon
name="diamond"
style="font-size: 16px"/>
</el-button>
</el-tooltip>
<el-dialog
title="主题"
width="600px"
:visible.sync="dialogVisible"
:append-to-body="true">
<d2-theme-list style="margin-top: -25px;"/>
</el-dialog>
</div>
</template>
<script>
import themeList from './components/d2-theme-list'
export default {
components: {
'd2-theme-list': themeList
},
data () {
return {
dialogVisible: false
}
}
}
</script>

35
src/layout/header-aside/components/header-user/index.vue Normal file
View File

@@ -0,0 +1,35 @@
<template>
<el-dropdown size="small" class="d2-mr">
<span class="btn-text">{{info.name ? `你好 ${info.name}` : '未登录'}}</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item @click.native="logOff">
<d2-icon name="power-off" class="d2-mr-5"/>
注销
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
<script>
import { mapState, mapActions } from 'vuex'
export default {
computed: {
...mapState('d2admin/user', [
'info'
])
},
methods: {
...mapActions('d2admin/account', [
'logout'
]),
/**
* @description 登出
*/
logOff () {
this.logout({
confirm: true
})
}
}
}
</script>

46
src/layout/header-aside/components/libs/util.menu.js Normal file
View File

@@ -0,0 +1,46 @@
/**
* @description 创建菜单
* @param {Function} h createElement
* @param {Object} menu 菜单项
*/
export function elMenuItem (h, menu) {
let icon = null
if (menu.icon) icon = <i class={ `fa fa-${menu.icon}` }/>
else if (menu.iconSvg) icon = <d2-icon-svg name={ menu.iconSvg }/>
else icon = <i class="fa fa-file-o"/>
return <el-menu-item
key={ menu.path }
index={ menu.path }>
{ icon }
<span slot="title">{ menu.title || '未命名菜单' }</span>
</el-menu-item>
}
/**
* @description 创建子菜单
* @param {Function} h createElement
* @param {Object} menu 菜单项
*/
export function elSubmenu (h, menu) {
let icon = null
if (menu.icon) icon = <i slot="title" class={ `fa fa-${menu.icon}` }/>
else if (menu.iconSvg) icon = <d2-icon-svg slot="title" name={ menu.iconSvg }/>
else icon = <i slot="title" class="fa fa-folder-o"/>
return <el-submenu
key={ menu.path }
index={ menu.path }>
{ icon }
<span slot="title">{ menu.title || '未命名菜单' }</span>
{ menu.children.map(child => createMenu.call(this, h, child)) }
</el-submenu>
}
/**
* @description 在组件中调用此方法渲染菜单项目
* @param {Function} h createElement
* @param {Object} menu 菜单项
*/
export function createMenu (h, menu) {
if (menu.children === undefined) return elMenuItem.call(this, h, menu)
return elSubmenu.call(this, h, menu)
}

140
src/layout/header-aside/components/menu-header/index.js Normal file
View File

@@ -0,0 +1,140 @@
import { throttle } from 'lodash'
import { mapState } from 'vuex'
import menuMixin from '../mixin/menu'
import { createMenu } from '../libs/util.menu'
export default {
name: 'd2-layout-header-aside-menu-header',
mixins: [
menuMixin
],
render (h) {
return <div
flex="cross:center"
class={ { 'd2-theme-header-menu': true, 'is-scrollable': this.isScroll } }
ref="page">
<div
ref="content"
class="d2-theme-header-menu__content"
flex-box="1"
flex>
<div
class="d2-theme-header-menu__scroll"
flex-box="0"
style={ { transform: `translateX(${this.currentTranslateX}px)` } }
ref="scroll">
<el-menu
mode="horizontal"
defaultActive={ this.active }
onSelect={ this.handleMenuSelect }>
{ this.header.map(menu => createMenu.call(this, h, menu)) }
</el-menu>
</div>
</div>
{
this.isScroll
? [
<div
class="d2-theme-header-menu__prev"
flex="main:center cross:center"
flex-box="0"
onClick={ () => this.scroll('left') }>
<i class="el-icon-arrow-left"></i>
</div>,
<div
class="d2-theme-header-menu__next"
flex="main:center cross:center"
flex-box="0"
onClick={ () => this.scroll('right') }>
<i class="el-icon-arrow-right"></i>
</div>
]
: []
}
</div>
},
computed: {
...mapState('d2admin/menu', [
'header'
])
},
data () {
return {
active: '',
isScroll: false,
scrollWidth: 0,
contentWidth: 0,
currentTranslateX: 0,
throttledCheckScroll: null
}
},
watch: {
'$route.matched': {
handler (val) {
this.active = val[val.length - 1].path
},
immediate: true
}
},
methods: {
scroll (direction) {
if (direction === 'left') {
// 向右滚动
this.currentTranslateX = 0
} else {
// 向左滚动
if (this.contentWidth * 2 - this.currentTranslateX <= this.scrollWidth) {
this.currentTranslateX -= this.contentWidth
} else {
this.currentTranslateX = this.contentWidth - this.scrollWidth
}
}
},
checkScroll () {
let contentWidth = this.$refs.content.clientWidth
let scrollWidth = this.$refs.scroll.clientWidth
if (this.isScroll) {
// 页面依旧允许滚动的情况，需要更新width
if (this.contentWidth - this.scrollWidth === this.currentTranslateX) {
// currentTranslateX 也需要相应变化【在右端到头的情况时】
this.currentTranslateX = contentWidth - scrollWidth
// 快速的滑动依旧存在判断和计算时对应的contentWidth变成正数，所以需要限制一下
if (this.currentTranslateX > 0) {
this.currentTranslateX = 0
}
}
// 更新元素数据
this.contentWidth = contentWidth
this.scrollWidth = scrollWidth
// 判断何时滚动消失: 当scroll > content
if (contentWidth > scrollWidth) {
this.isScroll = false
}
}
// 判断何时滚动出现: 当scroll < content
if (!this.isScroll && contentWidth < scrollWidth) {
this.isScroll = true
// 注意，当isScroll变为true，对应的元素盒子大小会发生变化
this.$nextTick(() => {
contentWidth = this.$refs.content.clientWidth
scrollWidth = this.$refs.scroll.clientWidth
this.contentWidth = contentWidth
this.scrollWidth = scrollWidth
this.currentTranslateX = 0
})
}
}
},
mounted () {
// 初始化判断
// 默认判断父元素和子元素的大小，以确定初始情况是否显示滚动
this.checkScroll()
// 全局窗口变化监听，判断父元素和子元素的大小，从而控制isScroll的开关
this.throttledCheckScroll = throttle(this.checkScroll, 300)
window.addEventListener('resize', this.throttledCheckScroll)
},
beforeDestroy () {
// 取消监听
window.removeEventListener('resize', this.throttledCheckScroll)
}
}

82
src/layout/header-aside/components/menu-side/index.js Normal file
View File

@@ -0,0 +1,82 @@
import { mapState } from 'vuex'
import menuMixin from '../mixin/menu'
import { createMenu } from '../libs/util.menu'
import BScroll from 'better-scroll'
export default {
name: 'd2-layout-header-aside-menu-side',
mixins: [
menuMixin
],
render (h) {
return <div class="d2-layout-header-aside-menu-side">
<el-menu
collapse={ this.asideCollapse }
collapseTransition={ this.asideTransition }
uniqueOpened={ true }
defaultActive={ this.$route.fullPath }
ref="menu"
onSelect={ this.handleMenuSelect }>
{ this.aside.map(menu => createMenu.call(this, h, menu)) }
</el-menu>
{
this.aside.length === 0 && !this.asideCollapse
? <div class="d2-layout-header-aside-menu-empty" flex="dir:top main:center cross:center">
<d2-icon name="inbox"></d2-icon>
<span>没有侧栏菜单</span>
</div>
: null
}
</div>
},
data () {
return {
asideHeight: 300,
BS: null
}
},
computed: {
...mapState('d2admin/menu', [
'aside',
'asideCollapse',
'asideTransition'
])
},
watch: {
// 折叠和展开菜单的时候销毁 better scroll
asideCollapse (val) {
this.scrollDestroy()
setTimeout(() => {
this.scrollInit()
}, 500)
}
},
mounted () {
this.scrollInit()
},
beforeDestroy () {
this.scrollDestroy()
},
methods: {
scrollInit () {
this.BS = new BScroll(this.$el, {
mouseWheel: true,
click: true
// 如果你愿意可以打开显示滚动条
// scrollbar: {
// fade: true,
// interactive: false
// }
})
},
scrollDestroy () {
// https://github.com/d2-projects/d2-admin/issues/75
try {
this.BS.destroy()
} catch (e) {
delete this.BS
this.BS = null
}
}
}
}

17
src/layout/header-aside/components/mixin/menu.js Normal file
View File

@@ -0,0 +1,17 @@
import util from '@/libs/util.js'
export default {
methods: {
handleMenuSelect (index, indexPath) {
if (/^d2-menu-empty-\d+$/.test(index) || index === undefined) {
this.$message.warning('临时菜单')
} else if (/^https:\/\/|http:\/\//.test(index)) {
util.open(index)
} else {
this.$router.push({
path: index
})
}
}
}
}

104
src/layout/header-aside/components/panel-search/components/panel-search-item/index.vue Normal file
View File

@@ -0,0 +1,104 @@
<template>
<div class="d2-panel-search-item" :class="hoverMode ? 'can-hover' : ''" flex>
<div class="d2-panel-search-item__icon" flex-box="0">
<div class="d2-panel-search-item__icon-box" flex="main:center cross:center">
<d2-icon v-if="item.icon" :name="item.icon"/>
<d2-icon-svg v-else-if="item.iconSvg" :name="item.iconSvg"/>
<d2-icon v-else name="file-o"/>
</div>
</div>
<div class="d2-panel-search-item__info" flex-box="1" flex="dir:top">
<div class="d2-panel-search-item__info-title" flex-box="1" flex="cross:center">
<span>{{item.title}}</span>
</div>
<div class="d2-panel-search-item__info-fullTitle" flex-box="0">
<span>{{item.fullTitle}}</span>
</div>
<div class="d2-panel-search-item__info-path" flex-box="0">
<span>{{item.path}}</span>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
item: {
default: () => ({})
},
hoverMode: {
default: false
}
}
}
</script>
<style lang="scss" scoped>
.d2-panel-search-item {
height: 64px;
margin: 0px -20px;
&.can-hover {
@extend %unable-select;
margin: 0px;
&:hover {
background-color: #F5F7FA;
.d2-panel-search-item__icon {
.d2-panel-search-item__icon-box {
i {
font-size: 24px;
color: $color-primary;
}
}
}
.d2-panel-search-item__info {
.d2-panel-search-item__info-title {
color: $color-text-main;
}
.d2-panel-search-item__info-fullTitle {
color: $color-text-normal;
}
.d2-panel-search-item__info-path {
color: $color-text-normal;
}
}
}
}
.d2-panel-search-item__icon {
width: 64px;
.d2-panel-search-item__icon-box {
height: 64px;
width: 64px;
border-right: 1px solid $color-border-3;
i {
font-size: 20px;
color: $color-text-sub;
}
svg {
height: 20px;
width: 20px;
}
}
}
.d2-panel-search-item__info {
margin-left: 10px;
.d2-panel-search-item__info-title {
font-size: 16px;
line-height: 16px;
font-weight: bold;
color: $color-text-normal;
}
.d2-panel-search-item__info-fullTitle {
font-size: 10px;
line-height: 14px;
color: $color-text-placehoder;
}
.d2-panel-search-item__info-path {
margin-bottom: 4px;
font-size: 10px;
line-height: 14px;
color: $color-text-placehoder;
}
}
}
</style>

199
src/layout/header-aside/components/panel-search/index.vue Normal file
View File

@@ -0,0 +1,199 @@
<template>
<div class="panel-search" flex="dir:top">
<div class="panel-search__input-group" flex-box="0" flex="dir:top main:center cross:center" @click.self="handlePanelClick">
<d2-icon-svg class="panel-search__logo" name="d2-admin-text"/>
<el-autocomplete
class="panel-search__input"
ref="input"
v-model="searchText"
suffix-icon="el-icon-search"
placeholder="搜索页面"
:fetch-suggestions="querySearch"
:trigger-on-focus="false"
:clearable="true"
@keydown.esc.native="handleEsc"
@select="handleSelect">
<d2-panel-search-item slot-scope="{ item }" :item="item"/>
</el-autocomplete>
<div class="panel-search__tip">
您可以使用快捷键
<span class="panel-search__key">{{hotkey.open}}</span>
唤醒搜索面板，按
<span class="panel-search__key">{{hotkey.close}}</span>
关闭
</div>
</div>
<div v-if="resultsList.length > 0" class="panel-search__results-group" flex-box="1">
<el-card shadow="never">
<div class="panel-search__results-group-inner">
<d2-panel-search-item
v-for="(item, index) in resultsList"
:key="index"
:item="item"
:hover-mode="true"
@click.native="handleResultsGroupItemClick(item.path)"/>
</div>
</el-card>
</div>
</div>
</template>
<script>
import Fuse from 'fuse.js'
import { mapState } from 'vuex'
import mixin from '../mixin/menu'
export default {
mixins: [
mixin
],
components: {
'd2-panel-search-item': () => import('./components/panel-search-item/index.vue')
},
data () {
return {
searchText: '',
results: []
}
},
computed: {
...mapState('d2admin/search', [
'hotkey',
'pool'
]),
// 这份数据是展示在搜索面板下面的
resultsList () {
return (this.results.length === 0 && this.searchText === '') ? this.pool.map(e => ({
value: e.fullTitle,
...e
})) : this.results
},
// 根据 pool 更新 fuse 实例
fuse () {
return new Fuse(this.pool, {
shouldSort: true,
tokenize: true,
threshold: 0.6,
location: 0,
distance: 100,
maxPatternLength: 32,
minMatchCharLength: 1,
keys: [
'fullTitle',
'path'
]
})
}
},
methods: {
/**
* @description 过滤选项 这个方法在每次输入框的值发生变化时会触发
*/
querySearch (queryString, callback) {
const results = this.fuse.search(queryString).map(e => e.item)
this.results = results
callback(results)
},
/**
* @description 聚焦输入框
*/
focus () {
this.input = ''
setTimeout(() => {
if (this.$refs.input) {
this.$refs.input.focus()
}
// 还原
this.searchText = ''
this.results = []
}, 500)
},
/**
* @description 接收用户在列表中选择项目的事件
*/
handleResultsGroupItemClick (path) {
// 如果用户选择的就是当前页面 就直接关闭搜索面板
if (path === this.$route.path) {
this.handleEsc()
return
}
// 用户选择的是其它页面
this.handleMenuSelect(path)
},
/**
* @description 接收用户在下拉菜单中选中事件
*/
async handleSelect ({ path }) {
// 如果用户选择的就是当前页面 就直接关闭搜索面板
if (path === this.$route.path) {
this.handleEsc()
return
}
// 用户选择的是其它页面
await this.$nextTick()
this.handleMenuSelect(path)
},
/**
* @augments 关闭输入框的下拉菜单
*/
closeSuggestion () {
if (this.$refs.input.activated) {
this.$refs.input.suggestions = []
this.$refs.input.activated = false
}
},
/**
* @augments 接收用户点击空白区域的关闭
*/
handlePanelClick () {
this.handleEsc()
},
/**
* @augments 接收用户触发的关闭
*/
async handleEsc () {
this.closeSuggestion()
await this.$nextTick()
this.$emit('close')
}
}
}
</script>
<style lang="scss" scoped>
.panel-search {
margin: 20px;
width: 100%;
.panel-search__input-group {
height: 240px;
.panel-search__logo {
width: 80px;
height: 80px;
margin-bottom: 20px;
}
.panel-search__input {
width: 500px;
}
.panel-search__tip {
@extend %unable-select;
margin-top: 20px;
margin-bottom: 40px;
font-size: 12px;
color: $color-text-sub;
.panel-search__key {
padding: 1px 5px;
margin: 0px 2px;
border-radius: 2px;
background-color: $color-text-normal;
color: $color-bg;
}
}
}
.panel-search__results-group {
overflow: auto;
margin-bottom: -20px;
.panel-search__results-group-inner {
margin: -20px;
}
}
}
</style>

185
src/layout/header-aside/components/tabs/index.vue Normal file
View File

@@ -0,0 +1,185 @@
<template>
<div class="d2-multiple-page-control-group" flex>
<div class="d2-multiple-page-control-content" flex-box="1">
<div class="d2-multiple-page-control-content-inner">
<d2-contextmenu
:visible.sync="contextmenuFlag"
:x="contentmenuX"
:y="contentmenuY">
<d2-contextmenu-list
:menulist="tagName === '/index' ? contextmenuListIndex : contextmenuList"
@rowClick="contextmenuClick"/>
</d2-contextmenu>
<el-tabs
class="d2-multiple-page-control d2-multiple-page-sort"
:value="current"
type="card"
@tab-click="handleClick"
@tab-remove="handleTabRemove"
@contextmenu.native="handleContextmenu">
<el-tab-pane
v-for="page in opened"
:key="page.fullPath"
:label="page.meta.title || '未命名'"
:name="page.fullPath"
:closable="isTabClosable(page)"/>
</el-tabs>
</div>
</div>
<div class="d2-multiple-page-control-btn" flex-box="0">
<el-dropdown
size="default"
split-button
@click="closeAll"
@command="command => handleControlItemClick(command)">
<d2-icon name="times-circle"/>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="left">
<d2-icon name="arrow-left" class="d2-mr-10"/>
关闭左侧
</el-dropdown-item>
<el-dropdown-item command="right">
<d2-icon name="arrow-right" class="d2-mr-10"/>
关闭右侧
</el-dropdown-item>
<el-dropdown-item command="other">
<d2-icon name="times" class="d2-mr-10"/>
关闭其它
</el-dropdown-item>
<el-dropdown-item command="all">
<d2-icon name="times-circle" class="d2-mr-10"/>
全部关闭
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div>
</template>
<script>
import { mapState, mapActions } from 'vuex'
import Sortable from 'sortablejs'
export default {
components: {
D2Contextmenu: () => import('../contextmenu'),
D2ContextmenuList: () => import('../contextmenu/components/contentmenuList')
},
data () {
return {
contextmenuFlag: false,
contentmenuX: 0,
contentmenuY: 0,
contextmenuListIndex: [
{ icon: 'times-circle', title: '关闭全部', value: 'all' }
],
contextmenuList: [
{ icon: 'refresh', title: '刷新', value: 'refresh' },
{ icon: 'arrow-left', title: '关闭左侧', value: 'left' },
{ icon: 'arrow-right', title: '关闭右侧', value: 'right' },
{ icon: 'times', title: '关闭其它', value: 'other' },
{ icon: 'times-circle', title: '关闭全部', value: 'all' }
],
tagName: '/index'
}
},
computed: {
...mapState('d2admin/page', [
'opened',
'current'
])
},
methods: {
...mapActions('d2admin/page', [
'close',
'closeLeft',
'closeRight',
'closeOther',
'closeAll',
'openedSort'
]),
/**
* @description 计算某个标签页是否可关闭
* @param {Object} page 其中一个标签页
*/
isTabClosable (page) {
return page.name !== 'index'
},
/**
* @description 右键菜单功能点击
* @param {Object} event 事件
*/
handleContextmenu (event) {
let target = event.target
// fix https://github.com/d2-projects/d2-admin/issues/54
let flag = false
if (target.className.indexOf('el-tabs__item') > -1) flag = true
else if (target.parentNode.className.indexOf('el-tabs__item') > -1) {
target = target.parentNode
flag = true
}
if (flag) {
event.preventDefault()
event.stopPropagation()
this.contentmenuX = event.clientX
this.contentmenuY = event.clientY
this.tagName = target.getAttribute('aria-controls').slice(5)
this.contextmenuFlag = true
}
},
/**
* @description 右键菜单的 row-click 事件
* @param {String} command 事件类型
*/
contextmenuClick (command) {
this.handleControlItemClick(command, this.tagName)
},
/**
* @description 接收点击关闭控制上选项的事件
* @param {String} command 事件类型
* @param {String} tagName tab 名称
*/
handleControlItemClick (command, tagName = null) {
if (tagName) this.contextmenuFlag = false
const params = { pageSelect: tagName }
switch (command) {
case 'refresh': this.$router.push({ name: 'refresh' }); break
case 'left': this.closeLeft(params); break
case 'right': this.closeRight(params); break
case 'other': this.closeOther(params); break
case 'all': this.closeAll(); break
default: this.$message.error('无效的操作'); break
}
},
/**
* @description 接收点击 tab 标签的事件
* @param {object} tab 标签
* @param {object} event 事件
*/
handleClick (tab, event) {
// 找到点击的页面在 tag 列表里是哪个
const page = this.opened.find(page => page.fullPath === tab.name)
if (page) {
const { name, params, query } = page
this.$router.push({ name, params, query })
}
},
/**
* @description 点击 tab 上的删除按钮触发这里
* @param {String} tagName tab 名称
*/
handleTabRemove (tagName) {
this.close({ tagName })
}
},
mounted () {
const el = document.querySelectorAll('.d2-multiple-page-sort .el-tabs__nav')[0]
Sortable.create(el, {
onEnd: (evt) => {
const { oldIndex, newIndex } = evt
this.openedSort({ oldIndex, newIndex })
}
})
}
}
</script>

3
src/layout/header-aside/index.js Normal file
View File

@@ -0,0 +1,3 @@
import layout from './layout'
export default layout

164
src/layout/header-aside/layout.vue Normal file
View File

@@ -0,0 +1,164 @@
<template>
<div class="d2-layout-header-aside-group" :style="styleLayoutMainGroup" :class="{grayMode: grayActive}">
<!-- 半透明遮罩 -->
<div class="d2-layout-header-aside-mask"></div>
<!-- 主体内容 -->
<div class="d2-layout-header-aside-content" flex="dir:top">
<!-- 顶栏 -->
<div class="d2-theme-header" :style="{ opacity: this.searchActive ? 0.5 : 1 }" flex-box="0" flex>
<router-link
to="/index"
:class="{'logo-group': true, 'logo-transition': asideTransition}"
:style="{width: asideCollapse ? asideWidthCollapse : asideWidth}"
flex-box="0">
<img v-if="asideCollapse" :src="`${$baseUrl}image/theme/${themeActiveSetting.name}/logo/icon-only.png`">
<img v-else :src="`${$baseUrl}image/theme/${themeActiveSetting.name}/logo/all.png`">
</router-link>
<div class="toggle-aside-btn" @click="handleToggleAside" flex-box="0">
<d2-icon name="bars"/>
</div>
<d2-menu-header flex-box="1"/>
<!-- 顶栏右侧 -->
<div class="d2-header-right" flex-box="0">
<!-- 如果你只想在开发环境显示这个按钮请添加 v-if="$env === 'development'" -->
<d2-header-search @click="handleSearchClick"/>
<d2-header-log/>
<d2-header-fullscreen/>
<d2-header-theme/>
<d2-header-size/>
<d2-header-locales/>
<d2-header-color/>
<d2-header-user/>
</div>
</div>
<!-- 下面 主体 -->
<div class="d2-theme-container" flex-box="1" flex>
<!-- 主体 侧边栏 -->
<div
flex-box="0"
ref="aside"
:class="{'d2-theme-container-aside': true, 'd2-theme-container-transition': asideTransition}"
:style="{
width: asideCollapse ? asideWidthCollapse : asideWidth,
opacity: this.searchActive ? 0.5 : 1
}">
<d2-menu-side/>
</div>
<!-- 主体 -->
<div class="d2-theme-container-main" flex-box="1" flex>
<!-- 搜索 -->
<transition name="fade-scale">
<div v-if="searchActive" class="d2-theme-container-main-layer" flex>
<d2-panel-search ref="panelSearch" @close="searchPanelClose"/>
</div>
</transition>
<!-- 内容 -->
<transition name="fade-scale">
<div v-if="!searchActive" class="d2-theme-container-main-layer" flex="dir:top">
<!-- tab -->
<div class="d2-theme-container-main-header" flex-box="0">
<d2-tabs/>
</div>
<!-- 页面 -->
<div class="d2-theme-container-main-body" flex-box="1">
<transition :name="transitionActive ? 'fade-transverse' : ''">
<keep-alive :include="keepAlive">
<router-view :key="routerViewKey" />
</keep-alive>
</transition>
</div>
</div>
</transition>
</div>
</div>
</div>
</div>
</template>
<script>
import d2MenuSide from './components/menu-side'
import d2MenuHeader from './components/menu-header'
import d2Tabs from './components/tabs'
import d2HeaderFullscreen from './components/header-fullscreen'
import d2HeaderLocales from './components/header-locales'
import d2HeaderSearch from './components/header-search'
import d2HeaderSize from './components/header-size'
import d2HeaderTheme from './components/header-theme'
import d2HeaderUser from './components/header-user'
import d2HeaderLog from './components/header-log'
import d2HeaderColor from './components/header-color'
import { mapState, mapGetters, mapActions } from 'vuex'
import mixinSearch from './mixins/search'
export default {
name: 'd2-layout-header-aside',
mixins: [
mixinSearch
],
components: {
d2MenuSide,
d2MenuHeader,
d2Tabs,
d2HeaderFullscreen,
d2HeaderLocales,
d2HeaderSearch,
d2HeaderSize,
d2HeaderTheme,
d2HeaderUser,
d2HeaderLog,
d2HeaderColor
},
data () {
return {
// [侧边栏宽度] 正常状态
asideWidth: '200px',
// [侧边栏宽度] 折叠状态
asideWidthCollapse: '65px'
}
},
computed: {
...mapState('d2admin', {
keepAlive: state => state.page.keepAlive,
grayActive: state => state.gray.active,
transitionActive: state => state.transition.active,
asideCollapse: state => state.menu.asideCollapse,
asideTransition: state => state.menu.asideTransition
}),
...mapGetters('d2admin', {
themeActiveSetting: 'theme/activeSetting'
}),
/**
* @description 用来实现带参路由的缓存
*/
routerViewKey () {
// 默认情况下 key 类似 __transition-n-/foo
// 这里的字符串操作是为了最终 key 的格式和原来相同 类似 __transition-n-__stamp-time-/foo
const stamp = this.$route.meta[`__stamp-${this.$route.path}`] || ''
return `${stamp ? `__stamp-${stamp}-` : ''}${this.$route.path}`
},
/**
* @description 最外层容器的背景图片样式
*/
styleLayoutMainGroup () {
return this.themeActiveSetting.backgroundImage
? { backgroundImage: `url('${this.$baseUrl}${this.themeActiveSetting.backgroundImage}')` }
: {}
}
},
methods: {
...mapActions('d2admin/menu', [
'asideCollapseToggle'
]),
/**
* 接收点击切换侧边栏的按钮
*/
handleToggleAside () {
this.asideCollapseToggle()
}
}
}
</script>
<style lang="scss">
// 注册主题
@import '~@/assets/style/theme/register.scss';
</style>

66
src/layout/header-aside/mixins/search.js Normal file
View File

@@ -0,0 +1,66 @@
import { mapState, mapMutations } from 'vuex'
import hotkeys from 'hotkeys-js'
export default {
components: {
'd2-panel-search': () => import('../components/panel-search')
},
mounted () {
// 绑定搜索功能快捷键 [ 打开 ]
hotkeys(this.searchHotkey.open, event => {
event.preventDefault()
this.searchPanelOpen()
})
// 绑定搜索功能快捷键 [ 关闭 ]
hotkeys(this.searchHotkey.close, event => {
event.preventDefault()
this.searchPanelClose()
})
},
beforeDestroy () {
hotkeys.unbind(this.searchHotkey.open)
hotkeys.unbind(this.searchHotkey.close)
},
computed: {
...mapState('d2admin', {
searchActive: state => state.search.active,
searchHotkey: state => state.search.hotkey
})
},
methods: {
...mapMutations({
searchToggle: 'd2admin/search/toggle',
searchSet: 'd2admin/search/set'
}),
/**
* 接收点击搜索按钮
*/
handleSearchClick () {
this.searchToggle()
if (this.searchActive) {
setTimeout(() => {
if (this.$refs.panelSearch) {
this.$refs.panelSearch.focus()
}
}, 500)
}
},
searchPanelOpen () {
if (!this.searchActive) {
this.searchSet(true)
setTimeout(() => {
if (this.$refs.panelSearch) {
this.$refs.panelSearch.focus()
}
}, 500)
}
},
// 关闭搜索面板
searchPanelClose () {
if (this.searchActive) {
this.searchSet(false)
}
}
}
}

42
src/libs/util.cookies.js Normal file
View File

@@ -0,0 +1,42 @@
import Cookies from 'js-cookie'
const cookies = {}
/**
* @description 存储 cookie 值
* @param {String} name cookie name
* @param {String} value cookie value
* @param {Object} setting cookie setting
*/
cookies.set = function (name = 'default', value = '', cookieSetting = {}) {
const currentCookieSetting = {
expires: 1
}
Object.assign(currentCookieSetting, cookieSetting)
Cookies.set(`d2admin-${process.env.VUE_APP_VERSION}-${name}`, value, currentCookieSetting)
}
/**
* @description 拿到 cookie 值
* @param {String} name cookie name
*/
cookies.get = function (name = 'default') {
return Cookies.get(`d2admin-${process.env.VUE_APP_VERSION}-${name}`)
}
/**
* @description 拿到 cookie 全部的值
*/
cookies.getAll = function () {
return Cookies.get()
}
/**
* @description 删除 cookie
* @param {String} name cookie name
*/
cookies.remove = function (name = 'default') {
return Cookies.remove(`d2admin-${process.env.VUE_APP_VERSION}-${name}`)
}
export default cookies

102
src/libs/util.db.js Normal file
View File

@@ -0,0 +1,102 @@
import low from 'lowdb'
import LocalStorage from 'lowdb/adapters/LocalStorage'
import util from '@/libs/util'
import { cloneDeep } from 'lodash'
const adapter = new LocalStorage(`d2admin-${process.env.VUE_APP_VERSION}`)
const db = low(adapter)
db
.defaults({
sys: {},
database: {}
})
.write()
export default db
/**
* @description 检查路径是否存在 不存在的话初始化
* @param {Object} payload dbName {String} 数据库名称
* @param {Object} payload path {String} 路径
* @param {Object} payload user {Boolean} 区分用户
* @param {Object} payload validator {Function} 数据校验钩子 返回 true 表示验证通过
* @param {Object} payload defaultValue {*} 初始化默认值
* @returns {String} 可以直接使用的路径
*/
export function pathInit ({
dbName = 'database',
path = '',
user = true,
validator = () => true,
defaultValue = ''
}) {
const uuid = util.cookies.get('uuid') || 'ghost-uuid'
const currentPath = `${dbName}.${user ? `user.${uuid}` : 'public'}${path ? `.${path}` : ''}`
const value = db.get(currentPath).value()
if (!(value !== undefined && validator(value))) {
db
.set(currentPath, defaultValue)
.write()
}
return currentPath
}
/**
* @description 将数据存储到指定位置 | 路径不存在会自动初始化
* @description 效果类似于取值 dbName.path = value
* @param {Object} payload dbName {String} 数据库名称
* @param {Object} payload path {String} 存储路径
* @param {Object} payload value {*} 需要存储的值
* @param {Object} payload user {Boolean} 是否区分用户
*/
export function dbSet ({
dbName = 'database',
path = '',
value = '',
user = false
}) {
db.set(pathInit({
dbName,
path,
user
}), value).write()
}
/**
* @description 获取数据
* @description 效果类似于取值 dbName.path || defaultValue
* @param {Object} payload dbName {String} 数据库名称
* @param {Object} payload path {String} 存储路径
* @param {Object} payload defaultValue {*} 取值失败的默认值
* @param {Object} payload user {Boolean} 是否区分用户
*/
export function dbGet ({
dbName = 'database',
path = '',
defaultValue = '',
user = false
}) {
return cloneDeep(db.get(pathInit({
dbName,
path,
user,
defaultValue
})).value())
}
/**
* @description 获取存储数据库对象
* @param {Object} payload user {Boolean} 是否区分用户
*/
export function database ({
dbName = 'database',
path = '',
user = false,
validator = () => true,
defaultValue = ''
} = {}) {
return db.get(pathInit({
dbName, path, user, validator, defaultValue
}))
}

1
src/libs/util.import.development.js Executable file
View File

@@ -0,0 +1 @@
module.exports = file => require('@/views/' + file).default

1
src/libs/util.import.production.js Executable file
View File

@@ -0,0 +1 @@
module.exports = file => () => import('@/views/' + file)

34
src/libs/util.js Normal file
View File

@@ -0,0 +1,34 @@
import cookies from './util.cookies'
import db from './util.db'
import log from './util.log'
const util = {
cookies,
db,
log
}
/**
* @description 更新标题
* @param {String} title 标题
*/
util.title = function (titleText) {
const processTitle = process.env.VUE_APP_TITLE || 'D2Admin'
window.document.title = `${processTitle}${titleText ? ` | ${titleText}` : ''}`
}
/**
* @description 打开新页面
* @param {String} url 地址
*/
util.open = function (url) {
var a = document.createElement('a')
a.setAttribute('href', url)
a.setAttribute('target', '_blank')
a.setAttribute('id', 'd2admin-link-temp')
document.body.appendChild(a)
a.click()
document.body.removeChild(document.getElementById('d2admin-link-temp'))
}
export default util

80
src/libs/util.log.js Normal file
View File

@@ -0,0 +1,80 @@
const log = {}
/**
* @description 返回这个样式的颜色值
* @param {String} type 样式名称 [ primary | success | warning | danger | text ]
*/
function typeColor (type = 'default') {
let color = ''
switch (type) {
case 'default': color = '#35495E'; break
case 'primary': color = '#3488ff'; break
case 'success': color = '#43B883'; break
case 'warning': color = '#e6a23c'; break
case 'danger': color = '#f56c6c'; break
default:; break
}
return color
}
/**
* @description 打印一个 [ title | text ] 样式的信息
* @param {String} title title text
* @param {String} info info text
* @param {String} type style
*/
log.capsule = function (title, info, type = 'primary') {
console.log(
`%c ${title} %c ${info} %c`,
'background:#35495E; padding: 1px; border-radius: 3px 0 0 3px; color: #fff;',
`background:${typeColor(type)}; padding: 1px; border-radius: 0 3px 3px 0; color: #fff;`,
'background:transparent'
)
}
/**
* @description 打印彩色文字
*/
log.colorful = function (textArr) {
console.log(
`%c${textArr.map(t => t.text || '').join('%c')}`,
...textArr.map(t => `color: ${typeColor(t.type)};`)
)
}
/**
* @description 打印 default 样式的文字
*/
log.default = function (text) {
log.colorful([{ text }])
}
/**
* @description 打印 primary 样式的文字
*/
log.primary = function (text) {
log.colorful([{ text, type: 'primary' }])
}
/**
* @description 打印 success 样式的文字
*/
log.success = function (text) {
log.colorful([{ text, type: 'success' }])
}
/**
* @description 打印 warning 样式的文字
*/
log.warning = function (text) {
log.colorful([{ text, type: 'warning' }])
}
/**
* @description 打印 danger 样式的文字
*/
log.danger = function (text) {
log.colorful([{ text, type: 'danger' }])
}
export default log

13
src/locales/en.json Normal file
View File

@@ -0,0 +1,13 @@
{
"_element": "en",
"_name": "English",
"page": {
"demo": {
"playground": {
"locales": {
"text": "D2Admin is a fully open source and free enterprise back-end product front-end integration solution, using the latest front-end technology stack, has prepared most of the project preparations, and with a lot of sample code to help the management system agile development."
}
}
}
}
}

13
src/locales/ja.json Normal file
View File

@@ -0,0 +1,13 @@
{
"_element": "ja",
"_name": "日本語",
"page": {
"demo": {
"playground": {
"locales": {
"text": "D2Adminは、最新のフロントエンドテクノロジースタックを使用した、完全にオープンソースの無料エンタープライズバックエンド製品フロントエンド統合ソリューションであり、プロジェクトのほとんどの準備を整えており、システムのアジャイル開発の管理に役立つ多くのサンプルコードを備えています。"
}
}
}
}
}

20
src/locales/mixin.js Normal file
View File

@@ -0,0 +1,20 @@
export default {
methods: {
onChangeLocale (command) {
this.$i18n.locale = command
let message = `当前语言：${this.$t('_name')} [ ${this.$i18n.locale} ]`
if (process.env.VUE_APP_BUILD_MODE === 'PREVIEW') {
message = [
`当前语言：${this.$t('_name')} [ ${this.$i18n.locale} ]`,
'仅提供切换功能，没有配置具体的语言数据 ',
'文档参考：<a class="el-link el-link--primary is-underline" target="_blank" href="https://d2.pub/zh/doc/d2-admin/locales">《国际化 | D2Admin》</a>'
].join('<br/>')
}
this.$notify({
title: '语言变更',
dangerouslyUseHTMLString: true,
message
})
}
}
}

13
src/locales/zh-chs.json Normal file
View File

@@ -0,0 +1,13 @@
{
"_element": "zh-CN",
"_name": "简体中文",
"page": {
"demo": {
"playground": {
"locales": {
"text": "D2Admin 是一个完全 开源免费 的企业中后台产品前端集成方案，使用最新的前端技术栈，已经做好大部分项目前期准备工作，并且带有大量示例代码，助力管理系统敏捷开发。"
}
}
}
}
}

13
src/locales/zh-cht.json Normal file
View File

@@ -0,0 +1,13 @@
{
"_element": "zh-TW",
"_name": "繁體中文",
"page": {
"demo": {
"playground": {
"locales": {
"text": "D2Admin 是一個完全 開源免費 的企業中後台產品前端集成方案，使用最新的前端技術棧，已經做好大部分項目前期準備工作，並且帶有大量示例代碼，助力管理系統敏捷開發。"
}
}
}
}
}

45
src/main.js Normal file
View File

@@ -0,0 +1,45 @@
// Vue
import Vue from 'vue'
import i18n from './i18n'
import App from './App'
// 核心插件
import d2Admin from '@/plugin/d2admin'
// store
import store from '@/store/index'
// D2-Crud
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import D2Crud from '@d2-projects/d2-crud'
// 菜单和路由设置
import router from './router'
import { menuAside } from '@/menu'
import { frameInRoutes } from '@/router/routes'
// 核心插件
Vue.use(d2Admin)
Vue.use(ElementUI)
Vue.use(D2Crud)
new Vue({
router,
store,
i18n,
render: h => h(App),
created () {
// 处理路由 得到每一级的路由设置
this.$store.commit('d2admin/page/init', frameInRoutes)
// 设置侧边栏菜单
this.$store.commit('d2admin/menu/asideSet', menuAside)
},
mounted () {
// 展示系统信息
this.$store.commit('d2admin/releases/versionShow')
// 用户登录后从数据库加载一系列的设置
this.$store.dispatch('d2admin/account/load')
// 获取并记录用户 UA
this.$store.commit('d2admin/ua/get')
// 初始化全屏监听
this.$store.dispatch('d2admin/fullscreen/listen')
}
}).$mount('#app')

27
src/menu/index.js Normal file
View File

@@ -0,0 +1,27 @@
import { uniqueId } from 'lodash'
/**
* @description 给菜单数据补充上 path 字段
* @description https://github.com/d2-projects/d2-admin/issues/209
* @param {Array} menu 原始的菜单数据
*/
function supplementPath (menu) {
return menu.map(e => ({
...e,
path: e.path || uniqueId('d2-menu-empty-'),
...e.children ? {
children: supplementPath(e.children)
} : {}
}))
}
export const menuAside = supplementPath([
{ path: '/index', title: '首页', icon: 'home' },
{
title: 'SCADA管理',
children: [
{ path: '/scada_configure', title: 'SCADA节点配置' },
{ path: '/scada_query', title: 'SCADA数据查询' }
]
}
])

7
src/plugin/api/index.js Normal file
View File

@@ -0,0 +1,7 @@
import api from '@/api'
export default {
install (Vue) {
Vue.prototype.$api = api
}
}

42
src/plugin/d2admin/index.js Normal file
View File

@@ -0,0 +1,42 @@
// Element
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// flex 布局库
import 'flex.css'
// 组件
import '@/components'
// svg 图标
import '@/assets/svg-icons'
// 国际化
import i18n from '@/i18n.js'
// 功能插件
import pluginApi from '@/plugin/api'
import pluginError from '@/plugin/error'
import pluginLog from '@/plugin/log'
import pluginOpen from '@/plugin/open'
export default {
async install (Vue, options) {
// 设置为 false 以阻止 vue 在启动时生成生产提示
// https://cn.vuejs.org/v2/api/#productionTip
Vue.config.productionTip = false
// 当前环境
Vue.prototype.$env = process.env.NODE_ENV
// 当前的 baseUrl
Vue.prototype.$baseUrl = process.env.BASE_URL
// 当前版本
Vue.prototype.$version = process.env.VUE_APP_VERSION
// 构建时间
Vue.prototype.$buildTime = process.env.VUE_APP_BUILD_TIME
// Element
Vue.use(ElementUI, {
i18n: (key, value) => i18n.t(key, value)
})
// 插件
Vue.use(pluginApi)
Vue.use(pluginError)
Vue.use(pluginLog)
Vue.use(pluginOpen)
}
}

56
src/plugin/error/index.js Normal file
View File

@@ -0,0 +1,56 @@
import { get, isObject } from 'lodash'
import store from '@/store'
import util from '@/libs/util'
export default {
install (Vue, options) {
function writeLog (logType) {
return (error, vm, info = '') => {
Vue.nextTick(() => {
store.dispatch('d2admin/log/push', {
message: `${info}: ${isObject(error) ? error.message : error}`,
type: logType,
meta: {
error,
vm
}
})
if (process.env.NODE_ENV !== 'development') return
util.log.capsule('D2Admin', 'ErrorHandler', logType)
util.log.danger('>>>>>> 错误信息 >>>>>>')
console.log(info)
util.log.danger('>>>>>> Vue 实例 >>>>>>')
console.log(vm)
util.log.danger('>>>>>> Error >>>>>>')
console.log(error)
})
}
}
if (process.env.NODE_ENV === 'development') {
Vue.config.warnHandler = writeLog('warning')
}
Vue.config.errorHandler = writeLog('danger')
window.onunhandledrejection = error => {
store.dispatch('d2admin/log/push', {
message: get(error, 'reason.message', 'Unknown error'),
type: 'danger',
meta: {
error: get(error, 'reason'),
trace: get(error, 'reason.stack')
}
})
}
window.onerror = (event, source, lineno, colno, error) => {
store.dispatch('d2admin/log/push', {
message: get(error, 'message', 'Unknown error'),
type: 'danger',
meta: {
error,
trace: get(error, 'stack'),
source: `${source}@${lineno}:${colno}`,
event: event
}
})
}
}
}

25
src/plugin/log/index.js Normal file
View File

@@ -0,0 +1,25 @@
import store from '@/store'
import util from '@/libs/util'
export default {
install (Vue, options) {
// 快速打印 log
Vue.prototype.$log = {
...util.log,
push (data) {
if (typeof data === 'string') {
// 如果传递来的数据是字符串
// 赋值给 message 字段
// 为了方便使用
// eg: this.$log.push('foo text')
store.dispatch('d2admin/log/push', {
message: data
})
} else if (typeof data === 'object') {
// 如果传递来的数据是对象
store.dispatch('d2admin/log/push', data)
}
}
}
}
}

7
src/plugin/open/index.js Normal file
View File

@@ -0,0 +1,7 @@
import util from '@/libs/util'
export default {
install (Vue, options) {
Vue.prototype.$open = util.open
}
}

78
src/router/index.js Executable file
View File

@@ -0,0 +1,78 @@
import Vue from 'vue'
import VueRouter from 'vue-router'
// 进度条
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
import store from '@/store/index'
import util from '@/libs/util.js'
// 路由数据
import routes from './routes'
// fix vue-router NavigationDuplicated
const VueRouterPush = VueRouter.prototype.push
VueRouter.prototype.push = function push (location) {
return VueRouterPush.call(this, location).catch(err => err)
}
const VueRouterReplace = VueRouter.prototype.replace
VueRouter.prototype.replace = function replace (location) {
return VueRouterReplace.call(this, location).catch(err => err)
}
Vue.use(VueRouter)
// 导出路由 在 main.js 里使用
const router = new VueRouter({
routes
})
/**
* 路由拦截
* 权限验证
*/
router.beforeEach(async (to, from, next) => {
// 确认已经加载多标签页数据 https://github.com/d2-projects/d2-admin/issues/201
await store.dispatch('d2admin/page/isLoaded')
// 确认已经加载组件尺寸设置 https://github.com/d2-projects/d2-admin/issues/198
await store.dispatch('d2admin/size/isLoaded')
// 进度条
NProgress.start()
// 关闭搜索面板
store.commit('d2admin/search/set', false)
// 验证当前路由所有的匹配中是否需要有登录验证的
if (to.matched.some(r => r.meta.auth)) {
// 这里暂时将cookie里是否存有token作为验证是否登录的条件
// 请根据自身业务需要修改
const token = util.cookies.get('token')
if (token && token !== 'undefined') {
next()
} else {
// 没有登录的时候跳转到登录界面
// 携带上登陆成功之后需要跳转的页面完整路径
next({
name: 'login',
query: {
redirect: to.fullPath
}
})
// https://github.com/d2-projects/d2-admin/issues/138
NProgress.done()
}
} else {
// 不需要身份校验 直接通过
next()
}
})
router.afterEach(to => {
// 进度条
NProgress.done()
// 多页控制 打开新的页面
store.dispatch('d2admin/page/open', to)
// 更改标题
util.title(to.meta.title)
})
export default router

101
src/router/routes.js Normal file
View File

@@ -0,0 +1,101 @@
import layoutHeaderAside from '@/layout/header-aside'
// 由于懒加载页面太多的话会造成webpack热更新太慢，所以开发环境不使用懒加载，只有生产环境使用懒加载
const _import = require('@/libs/util.import.' + process.env.NODE_ENV)
/**
* 在主框架内显示
*/
const frameIn = [
{
path: '/',
redirect: { name: 'index' },
component: layoutHeaderAside,
children: [
// 首页
{
path: 'index',
name: 'index',
meta: {
auth: true
},
component: _import('system/index')
},
{
path: 'scada_configure',
name: 'scada_configure',
meta: {
title: 'SCADA节点配置',
auth: true
},
component: _import('scada/scadaConfigure')
},
{
path: 'scada_query',
name: 'scada_query',
meta: {
title: 'SCADA数据查询',
auth: true
},
component: _import('scada/scadaQuery')
},
// 系统 前端日志
{
path: 'log',
name: 'log',
meta: {
title: '前端日志',
auth: true
},
component: _import('system/log')
},
// 刷新页面 必须保留
{
path: 'refresh',
name: 'refresh',
hidden: true,
component: _import('system/function/refresh')
},
// 页面重定向 必须保留
{
path: 'redirect/:route*',
name: 'redirect',
hidden: true,
component: _import('system/function/redirect')
}
]
}
]
/**
* 在主框架之外显示
*/
const frameOut = [
// 登录
{
path: '/login',
name: 'login',
component: _import('system/login')
}
]
/**
* 错误页面
*/
const errorPage = [
{
path: '*',
name: '404',
component: _import('system/error/404')
}
]
// 导出需要显示菜单的
export const frameInRoutes = frameIn
// 重新组织后导出
export default [
...frameIn,
...frameOut,
...errorPage
]

78
src/setting.js Normal file
View File

@@ -0,0 +1,78 @@
export default {
// 快捷键
// 支持快捷键 例如 ctrl+shift+s
hotkey: {
search: {
open: 's',
close: 'esc'
}
},
// 侧边栏默认配置
menu: {
asideCollapse: false,
asideTransition: true
},
// 在读取持久化数据失败时默认页面
page: {
opened: [
{
name: 'index',
fullPath: '/index',
meta: {
title: '首页',
auth: false
}
}
]
},
// 菜单搜索
search: {
enable: true
},
// 注册的主题
theme: {
list: [
{
title: 'd2admin 经典',
name: 'd2',
preview: 'image/theme/d2/preview@2x.png'
},
{
title: 'Chester',
name: 'chester',
preview: 'image/theme/chester/preview@2x.png'
},
{
title: 'Element',
name: 'element',
preview: 'image/theme/element/preview@2x.png'
},
{
title: '紫罗兰',
name: 'violet',
preview: 'image/theme/violet/preview@2x.png'
},
{
title: '简约线条',
name: 'line',
backgroundImage: 'image/theme/line/bg.jpg',
preview: 'image/theme/line/preview@2x.png'
},
{
title: '流星',
name: 'star',
backgroundImage: 'image/theme/star/bg.jpg',
preview: 'image/theme/star/preview@2x.png'
},
{
title: 'Tomorrow Night Blue (vsCode)',
name: 'tomorrow-night-blue',
preview: 'image/theme/tomorrow-night-blue/preview@2x.png'
}
]
},
// 是否默认开启页面切换动画
transition: {
active: true
}
}

Some files were not shown because too many files have changed in this diff Show More