no message
Former-commit-id: 487e22a0c9bf5da4474f9449ce95070e9a4ed727
This commit is contained in:
liyang
@@ -0,0 +1,3 @@
|
|||||||
|
> 1%
|
||||||
|
last 2 versions
|
||||||
|
not ie <= 8
|
||||||
@@ -0,0 +1,7 @@
|
|||||||
|
# 所有环境默认
|
||||||
|
|
||||||
|
# 页面 title 前缀
|
||||||
|
VUE_APP_TITLE=D2Admin
|
||||||
|
|
||||||
|
# 网络请求公用地址
|
||||||
|
VUE_APP_API=/api/
|
||||||
@@ -0,0 +1,4 @@
|
|||||||
|
# 开发环境
|
||||||
|
|
||||||
|
# 页面 title 前缀
|
||||||
|
VUE_APP_TITLE=D2Admin Dev
|
||||||
@@ -0,0 +1,7 @@
|
|||||||
|
# No Mock 构建
|
||||||
|
|
||||||
|
# 指定构建模式
|
||||||
|
NODE_ENV=production
|
||||||
|
|
||||||
|
# 标记当前是 No Mock 构建
|
||||||
|
VUE_APP_BUILD_MODE=nomock
|
||||||
@@ -0,0 +1,7 @@
|
|||||||
|
# travis
|
||||||
|
|
||||||
|
# 指定构建模式
|
||||||
|
NODE_ENV=production
|
||||||
|
|
||||||
|
# 标记当前是 CI 自动构建
|
||||||
|
VUE_APP_BUILD_MODE=TRAVIS
|
||||||
@@ -0,0 +1,11 @@
|
|||||||
|
# 忽略目录
|
||||||
|
build/
|
||||||
|
tests/
|
||||||
|
node_modules/
|
||||||
|
|
||||||
|
# node 覆盖率文件
|
||||||
|
coverage/
|
||||||
|
|
||||||
|
# 忽略文件
|
||||||
|
**/*-min.js
|
||||||
|
**/*.min.js
|
||||||
@@ -0,0 +1,17 @@
|
|||||||
|
module.exports = {
|
||||||
|
root: true,
|
||||||
|
env: {
|
||||||
|
node: true
|
||||||
|
},
|
||||||
|
'extends': [
|
||||||
|
'plugin:vue/essential',
|
||||||
|
'@vue/standard'
|
||||||
|
],
|
||||||
|
rules: {
|
||||||
|
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
|
||||||
|
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
|
||||||
|
},
|
||||||
|
parserOptions: {
|
||||||
|
parser: 'babel-eslint'
|
||||||
|
}
|
||||||
|
}
|
||||||
+17
@@ -0,0 +1,17 @@
|
|||||||
|
.DS_Store
|
||||||
|
node_modules
|
||||||
|
/dist
|
||||||
|
|
||||||
|
# Log files
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.idea
|
||||||
|
.vscode
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw*
|
||||||
@@ -0,0 +1,5 @@
|
|||||||
|
module.exports = {
|
||||||
|
plugins: {
|
||||||
|
autoprefixer: {}
|
||||||
|
}
|
||||||
|
}
|
||||||
+22
@@ -0,0 +1,22 @@
|
|||||||
|
language: node_js
|
||||||
|
node_js: stable
|
||||||
|
|
||||||
|
cache:
|
||||||
|
directories:
|
||||||
|
- "node_modules"
|
||||||
|
|
||||||
|
branches:
|
||||||
|
only:
|
||||||
|
- master
|
||||||
|
|
||||||
|
script:
|
||||||
|
- npm run build:travis
|
||||||
|
|
||||||
|
before_install:
|
||||||
|
- ./qshell account $AK $SK
|
||||||
|
- curl -o- -L https://yarnpkg.com/install.sh | bash
|
||||||
|
- export PATH=$HOME/.yarn/bin:$PATH
|
||||||
|
|
||||||
|
after_success:
|
||||||
|
- ./qshell qupload qiniu-config
|
||||||
|
- ./qshell cdnrefresh -dirs cdnrefresh-dirs.txt
|
||||||
@@ -0,0 +1,21 @@
|
|||||||
|
MIT License
|
||||||
|
|
||||||
|
Copyright (c) 2018 李杨
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
|
in the Software without restriction, including without limitation the rights
|
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||||
|
copies of the Software, and to permit persons to whom the Software is
|
||||||
|
furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all
|
||||||
|
copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||||
|
SOFTWARE.
|
||||||
@@ -0,0 +1,5 @@
|
|||||||
|
[](https://www.travis-ci.org/d2-projects/d2-admin-start-kit)
|
||||||
|
|
||||||
|
[D2Admin](https://github.com/d2-projects/d2-admin) 简化版起始模板，删除所有完整版中的示例代码，保留所有核心功能。
|
||||||
|
|
||||||
|
[码云镜像](https://gitee.com/fairyever/d2-admin-start-kit)
|
||||||
@@ -0,0 +1,5 @@
|
|||||||
|
module.exports = {
|
||||||
|
presets: [
|
||||||
|
'@vue/app'
|
||||||
|
]
|
||||||
|
}
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
https://start-kit.d2admin.fairyever.com/
|
||||||
@@ -0,0 +1,23 @@
|
|||||||
|
module.exports = {
|
||||||
|
moduleFileExtensions: [
|
||||||
|
'js',
|
||||||
|
'jsx',
|
||||||
|
'json',
|
||||||
|
'vue'
|
||||||
|
],
|
||||||
|
transform: {
|
||||||
|
'^.+\\.vue$': 'vue-jest',
|
||||||
|
'.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
|
||||||
|
'^.+\\.jsx?$': 'babel-jest'
|
||||||
|
},
|
||||||
|
moduleNameMapper: {
|
||||||
|
'^@/(.*)$': '<rootDir>/src/$1'
|
||||||
|
},
|
||||||
|
snapshotSerializers: [
|
||||||
|
'jest-serializer-vue'
|
||||||
|
],
|
||||||
|
testMatch: [
|
||||||
|
'**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
|
||||||
|
],
|
||||||
|
testURL: 'http://localhost/'
|
||||||
|
}
|
||||||
Generated
+15519
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,66 @@
|
|||||||
|
{
|
||||||
|
"name": "d2-admin",
|
||||||
|
"version": "1.6.9",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"serve": "vue-cli-service serve --open",
|
||||||
|
"start": "npm run serve",
|
||||||
|
"dev": "npm run serve",
|
||||||
|
"build": "vue-cli-service build",
|
||||||
|
"build:nomock": "vue-cli-service build --mode nomock",
|
||||||
|
"build:travis": "vue-cli-service build --mode travis",
|
||||||
|
"lint": "vue-cli-service lint --fix",
|
||||||
|
"test:unit": "vue-cli-service test:unit"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@d2-projects/vue-filters-date": "^1.0.2",
|
||||||
|
"axios": "^0.17.1",
|
||||||
|
"babel-polyfill": "^6.26.0",
|
||||||
|
"better-scroll": "^1.12.1",
|
||||||
|
"dayjs": "^1.6.7",
|
||||||
|
"element-ui": "^2.4.4",
|
||||||
|
"flex.css": "^1.1.7",
|
||||||
|
"fuse.js": "^3.2.1",
|
||||||
|
"hotkeys-js": "^3.3.6",
|
||||||
|
"js-cookie": "^2.2.0",
|
||||||
|
"lodash": "^4.17.10",
|
||||||
|
"lowdb": "^1.0.0",
|
||||||
|
"mockjs": "^1.0.1-beta3",
|
||||||
|
"nprogress": "^0.2.0",
|
||||||
|
"qs": "^6.6.0",
|
||||||
|
"screenfull": "^3.3.2",
|
||||||
|
"ua-parser-js": "^0.7.18",
|
||||||
|
"vue": "^2.5.17",
|
||||||
|
"vue-i18n": "^7.4.2",
|
||||||
|
"vue-router": "^3.0.1",
|
||||||
|
"vuex": "^3.0.1"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@kazupon/vue-i18n-loader": "^0.3.0",
|
||||||
|
"@vue/cli-plugin-babel": "^3.0.0",
|
||||||
|
"@vue/cli-plugin-eslint": "^3.0.0",
|
||||||
|
"@vue/cli-plugin-unit-jest": "^3.0.0",
|
||||||
|
"@vue/cli-service": "^3.0.0",
|
||||||
|
"@vue/eslint-config-standard": "^3.0.0",
|
||||||
|
"@vue/test-utils": "^1.0.0-beta.20",
|
||||||
|
"babel-core": "7.0.0-bridge.0",
|
||||||
|
"babel-jest": "^23.0.1",
|
||||||
|
"lint-staged": "^7.2.0",
|
||||||
|
"node-sass": "^4.9.0",
|
||||||
|
"sass-loader": "^7.0.1",
|
||||||
|
"svg-sprite-loader": "^3.8.0",
|
||||||
|
"text-loader": "0.0.1",
|
||||||
|
"uglifyjs-webpack-plugin": "^2.0.1",
|
||||||
|
"vue-template-compiler": "^2.5.17"
|
||||||
|
},
|
||||||
|
"lint-staged": {
|
||||||
|
"*.js": [
|
||||||
|
"vue-cli-service lint",
|
||||||
|
"git add"
|
||||||
|
],
|
||||||
|
"*.vue": [
|
||||||
|
"vue-cli-service lint",
|
||||||
|
"git add"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
@@ -0,0 +1,6 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="white">
|
||||||
|
<path opacity=".25" d="M16 0 A16 16 0 0 0 16 32 A16 16 0 0 0 16 0 M16 4 A12 12 0 0 1 16 28 A12 12 0 0 1 16 4"/>
|
||||||
|
<path d="M16 0 A16 16 0 0 1 32 16 L28 16 A12 12 0 0 0 16 4z">
|
||||||
|
<animateTransform attributeName="transform" type="rotate" from="0 16 16" to="360 16 16" dur="0.8s" repeatCount="indefinite" />
|
||||||
|
</path>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 422 B |
Binary file not shown.
|
After Width: | Height: | Size: 6.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 86 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 359 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
@@ -0,0 +1,58 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||||
|
<link rel="icon" href="<%= BASE_URL %>icon.ico">
|
||||||
|
<title><%= VUE_APP_TITLE %></title>
|
||||||
|
<style>
|
||||||
|
html, body, #app { height: 100%; margin: 0px; padding: 0px; }
|
||||||
|
.d2-home { background-color: #303133; height: 100%; display: flex; flex-direction: column; }
|
||||||
|
.d2-home__main { user-select: none; width: 100%; flex-grow: 1; display: flex; justify-content: center; align-items: center; flex-direction: column; }
|
||||||
|
.d2-home__footer { width: 100%; flex-grow: 0; text-align: center; padding: 1em 0; }
|
||||||
|
.d2-home__footer > a { font-size: 12px; color: #ABABAB; text-decoration: none; }
|
||||||
|
.d2-home__loading { height: 32px; width: 32px; margin-bottom: 20px; }
|
||||||
|
.d2-home__title { color: #FFF; font-size: 14px; margin-bottom: 10px; }
|
||||||
|
.d2-home__sub-title { color: #ABABAB; font-size: 12px; }
|
||||||
|
</style>
|
||||||
|
<script>
|
||||||
|
var _hmt = _hmt || [];
|
||||||
|
var hmid = "1dfa88d0c8571eef2d383070cb3e5ca1";
|
||||||
|
(function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?" + hmid; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s);})();
|
||||||
|
</script>
|
||||||
|
<!-- ua -->
|
||||||
|
<script src="<%= BASE_URL %>script/ua-parser.min.js"></script>
|
||||||
|
<script src="<%= BASE_URL %>script/ua.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<noscript>
|
||||||
|
<strong>
|
||||||
|
很抱歉，如果没有 JavaScript 支持，D2Admin 将不能正常工作。请启用浏览器的 JavaScript 然后继续。
|
||||||
|
</strong>
|
||||||
|
</noscript>
|
||||||
|
<div id="app">
|
||||||
|
<div class="d2-home">
|
||||||
|
<div class="d2-home__main">
|
||||||
|
<img
|
||||||
|
class="d2-home__loading"
|
||||||
|
src="./image/loading/loading-spin.svg"
|
||||||
|
alt="loading">
|
||||||
|
<div class="d2-home__title">
|
||||||
|
正在加载资源
|
||||||
|
</div>
|
||||||
|
<div class="d2-home__sub-title">
|
||||||
|
初次加载资源可能需要较多时间 请耐心等待
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="d2-home__footer">
|
||||||
|
<a
|
||||||
|
href="https://github.com/d2-projects/d2-admin"
|
||||||
|
target="_blank">
|
||||||
|
https://github.com/d2-projects/d2-admin
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,13 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||||
|
<title>提示信息</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>请不要使用手机浏览</h1>
|
||||||
|
<!-- 请自行完善此页面 -->
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Vendored
+9
File diff suppressed because one or more lines are too long
@@ -0,0 +1,9 @@
|
|||||||
|
/* eslint-disable */
|
||||||
|
|
||||||
|
var parser = new UAParser()
|
||||||
|
|
||||||
|
var uaResult = parser.getResult()
|
||||||
|
|
||||||
|
if (uaResult.device.type === 'mobile') {
|
||||||
|
window.location.href = './is-mobile.html'
|
||||||
|
}
|
||||||
@@ -0,0 +1,18 @@
|
|||||||
|
{
|
||||||
|
"src_dir" : "/home/travis/build/d2-projects/d2-admin-start-kit/dist",
|
||||||
|
"bucket" : "d2-admin-start-kit",
|
||||||
|
"ignore_dir" : false,
|
||||||
|
"overwrite" : true,
|
||||||
|
"check_exists" : true,
|
||||||
|
"check_hash" : true,
|
||||||
|
"check_size" : true,
|
||||||
|
"rescan_local" : true,
|
||||||
|
"skip_file_prefixes" : "test,demo,",
|
||||||
|
"skip_path_prefixes" : "hello/,temp/",
|
||||||
|
"skip_fixed_strings" : ".svn,.git",
|
||||||
|
"skip_suffixes" : ".DS_Store,.exe",
|
||||||
|
"log_file" : "upload.log",
|
||||||
|
"log_level" : "info",
|
||||||
|
"log_rotate" : 1,
|
||||||
|
"log_stdout" : false
|
||||||
|
}
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
fd53ac81035ca2b6e7b5252caed08eff24e23002
|
||||||
+15
@@ -0,0 +1,15 @@
|
|||||||
|
<template>
|
||||||
|
<div id="app">
|
||||||
|
<router-view/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'app'
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
@import '~@/assets/style/public-class.scss';
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,9 @@
|
|||||||
|
import request from '@/plugin/axios'
|
||||||
|
|
||||||
|
export function AccountLogin (data) {
|
||||||
|
return request({
|
||||||
|
url: '/login',
|
||||||
|
method: 'post',
|
||||||
|
data
|
||||||
|
})
|
||||||
|
}
|
||||||
@@ -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 .5s;
|
||||||
|
}
|
||||||
|
.fade-scale-enter {
|
||||||
|
opacity: 0;
|
||||||
|
transform: scale(1.2);
|
||||||
|
}
|
||||||
|
.fade-scale-leave-to {
|
||||||
|
opacity: 0;
|
||||||
|
transform: scale(0.8);
|
||||||
|
}
|
||||||
@@ -0,0 +1,12 @@
|
|||||||
|
// 优化显示
|
||||||
|
html, body {
|
||||||
|
margin: 0px;
|
||||||
|
height: 100%;
|
||||||
|
font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif;
|
||||||
|
#app {
|
||||||
|
@extend %full;
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,19 @@
|
|||||||
|
// 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;
|
||||||
|
}
|
||||||
@@ -0,0 +1,8 @@
|
|||||||
|
#nprogress {
|
||||||
|
.bar {
|
||||||
|
background: $color-primary !important;
|
||||||
|
}
|
||||||
|
.peg {
|
||||||
|
box-shadow: 0 0 10px $color-primary, 0 0 5px $color-primary !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,67 @@
|
|||||||
|
@import 'public';
|
||||||
|
|
||||||
|
// 补丁 base
|
||||||
|
@import '~@/assets/style/fixed/base.scss';
|
||||||
|
// 补丁 element
|
||||||
|
@import '~@/assets/style/fixed/element.scss';
|
||||||
|
// 补丁 n-progress
|
||||||
|
@import '~@/assets/style/fixed/n-progress.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;
|
||||||
|
}
|
||||||
|
.#{$prefix}-clearfix:before,
|
||||||
|
.#{$prefix}-clearfix:after {
|
||||||
|
display: table;
|
||||||
|
content: "";
|
||||||
|
}
|
||||||
|
.#{$prefix}-clearfix:after {
|
||||||
|
clear: both
|
||||||
|
}
|
||||||
|
|
||||||
|
// 边距相关
|
||||||
|
$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; }
|
||||||
@@ -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;
|
||||||
|
}
|
||||||
@@ -0,0 +1,2 @@
|
|||||||
|
@import './setting.scss';
|
||||||
|
@import '../theme.scss';
|
||||||
@@ -0,0 +1,59 @@
|
|||||||
|
// 主题名称
|
||||||
|
$theme-name: 'd2';
|
||||||
|
// 主题背景颜色
|
||||||
|
$theme-bg-color: #ebf1f6;
|
||||||
|
// 主题背景图片遮罩
|
||||||
|
$theme-bg-mask: rgba(#000, 0);
|
||||||
|
|
||||||
|
// 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);
|
||||||
@@ -0,0 +1,2 @@
|
|||||||
|
@import './setting.scss';
|
||||||
|
@import '../theme.scss';
|
||||||
@@ -0,0 +1,59 @@
|
|||||||
|
// 主题名称
|
||||||
|
$theme-name: 'line';
|
||||||
|
// 主题背景颜色
|
||||||
|
$theme-bg-color: #f8f8f9;
|
||||||
|
// 主题背景图片遮罩
|
||||||
|
$theme-bg-mask: rgba(#000, 0);
|
||||||
|
|
||||||
|
// 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);
|
||||||
@@ -0,0 +1,7 @@
|
|||||||
|
@import '~@/assets/style/theme/theme-base.scss';
|
||||||
|
|
||||||
|
@import '~@/assets/style/theme/d2/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';
|
||||||
@@ -0,0 +1,2 @@
|
|||||||
|
@import './setting.scss';
|
||||||
|
@import '../theme.scss';
|
||||||
@@ -0,0 +1,59 @@
|
|||||||
|
// 主题名称
|
||||||
|
$theme-name: 'star';
|
||||||
|
// 主题背景颜色
|
||||||
|
$theme-bg-color: #EFF4F8;
|
||||||
|
// 主题背景图片遮罩
|
||||||
|
$theme-bg-mask: rgba(#000, .3);
|
||||||
|
|
||||||
|
// 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);
|
||||||
@@ -0,0 +1,445 @@
|
|||||||
|
// 减小弹出菜单的项目高度
|
||||||
|
.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 {
|
||||||
|
transition: width .3s;
|
||||||
|
position: relative;
|
||||||
|
.d2-layout-header-aside-menu-side {
|
||||||
|
@extend %full;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.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 {
|
||||||
|
transition: width .3s;
|
||||||
|
float: left;
|
||||||
|
text-align: center;
|
||||||
|
img {
|
||||||
|
height: 60px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 折叠侧边栏切换按钮
|
||||||
|
.toggle-aside-btn {
|
||||||
|
float: left;
|
||||||
|
height: 60px;
|
||||||
|
width: 60px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
@extend %unable-select;
|
||||||
|
i {
|
||||||
|
font-size: 20px;
|
||||||
|
margin-top: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// [菜单] 顶栏
|
||||||
|
.el-menu {
|
||||||
|
float: left;
|
||||||
|
border-bottom: none;
|
||||||
|
background-color: transparent;
|
||||||
|
%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-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 {
|
||||||
|
// 多页面控制器
|
||||||
|
.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;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,416 @@
|
|||||||
|
// 每个主题特有的设置
|
||||||
|
.theme-#{$theme-name} {
|
||||||
|
|
||||||
|
.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-icon-close {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,2 @@
|
|||||||
|
@import './setting.scss';
|
||||||
|
@import '../theme.scss';
|
||||||
@@ -0,0 +1,59 @@
|
|||||||
|
// 主题名称
|
||||||
|
$theme-name: 'tomorrow-night-blue';
|
||||||
|
// 主题背景颜色
|
||||||
|
$theme-bg-color: #002253;
|
||||||
|
// 主题背景图片遮罩
|
||||||
|
$theme-bg-mask: rgba(#000, 0);
|
||||||
|
|
||||||
|
// 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);
|
||||||
@@ -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%);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,59 @@
|
|||||||
|
// 主题名称
|
||||||
|
$theme-name: 'violet';
|
||||||
|
// 主题背景颜色
|
||||||
|
$theme-bg-color: #000;
|
||||||
|
// 主题背景图片遮罩
|
||||||
|
$theme-bg-mask: rgba(#000, 0);
|
||||||
|
|
||||||
|
// 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);
|
||||||
@@ -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;
|
||||||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 7.8 KiB |
@@ -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>
|
||||||
|
After Width: | Height: | Size: 2.6 KiB |
@@ -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))
|
||||||
@@ -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>
|
||||||
@@ -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>
|
||||||
@@ -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>
|
||||||
@@ -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>
|
||||||
@@ -0,0 +1,23 @@
|
|||||||
|
<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">
|
||||||
|
<slot/>
|
||||||
|
</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>
|
||||||
@@ -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>
|
||||||
@@ -0,0 +1,74 @@
|
|||||||
|
<template>
|
||||||
|
<div
|
||||||
|
class="d2-source"
|
||||||
|
:class="{ 'd2-source--active': isActive }"
|
||||||
|
@click="handleClick">
|
||||||
|
<d2-icon name="code"/> SourceCode
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
// 文件路径
|
||||||
|
filename: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
isActive: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted () {
|
||||||
|
// 一秒后显示按钮
|
||||||
|
setTimeout(() => {
|
||||||
|
this.isActive = true
|
||||||
|
}, 500)
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 点击按钮的时候跳转到源代码
|
||||||
|
handleClick () {
|
||||||
|
const file = this.filename.split('?')[0]
|
||||||
|
const url = file
|
||||||
|
? `https://github.com/d2-projects/d2-admin-start-kit/blob/master/${file}`
|
||||||
|
: 'https://github.com/d2-projects/d2-admin-start-kit'
|
||||||
|
this.$open(url)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</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>
|
||||||
@@ -0,0 +1,61 @@
|
|||||||
|
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,
|
||||||
|
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
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -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()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,111 @@
|
|||||||
|
// 组件
|
||||||
|
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 = [
|
||||||
|
h('div', this.$slots.default)
|
||||||
|
]
|
||||||
|
if (this.$slots.header) slots.push(h('div', { slot: 'header' }, [ this.$slots.header ]))
|
||||||
|
if (this.$slots.footer) slots.push(h('div', { slot: 'footer' }, [ this.$slots.footer ]))
|
||||||
|
return h('div', {
|
||||||
|
ref: 'container',
|
||||||
|
class: 'container-component'
|
||||||
|
}, [
|
||||||
|
h(this.component, {
|
||||||
|
ref: 'component',
|
||||||
|
props: this.$attrs,
|
||||||
|
on: {
|
||||||
|
scroll: e => this.$emit('scroll', e)
|
||||||
|
}
|
||||||
|
}, slots),
|
||||||
|
// 只在预览和开发模式下显示源码按钮
|
||||||
|
process.env.VUE_APP_BUILD_MODE === 'TRAVIS' || process.env.NODE_ENV === 'development' ? h(d2Source, {
|
||||||
|
props: this.$attrs
|
||||||
|
}) : undefined
|
||||||
|
])
|
||||||
|
},
|
||||||
|
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
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -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>
|
||||||
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 434 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -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>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 9.0 KiB |
@@ -0,0 +1,50 @@
|
|||||||
|
<template>
|
||||||
|
<div class="d2-page-cover">
|
||||||
|
<div class="d2-page-cover__logo">
|
||||||
|
<slot/>
|
||||||
|
</div>
|
||||||
|
<p class="d2-page-cover__title">D2 Admin {{$version}}</p>
|
||||||
|
<p class="d2-page-cover__sub-title">优雅的中后台集成方案</p>
|
||||||
|
<p class="d2-page-cover__build-time">FINAL BUILD TIME {{$buildTime}}</p>
|
||||||
|
<slot name="footer"/>
|
||||||
|
<a target="blank" href="https://github.com/d2-projects/d2-admin">
|
||||||
|
<img
|
||||||
|
style="position: absolute; top: 0; right: 0; border: 0; width: 150px;"
|
||||||
|
src="./image/darkblue@2x.png"
|
||||||
|
alt="Fork me on GitHub">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.d2-page-cover {
|
||||||
|
@extend %full;
|
||||||
|
@extend %unable-select;
|
||||||
|
display: flex;
|
||||||
|
flex-flow: column nowrap;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
.d2-page-cover__logo {
|
||||||
|
img {
|
||||||
|
width: 200px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.d2-page-cover__title {
|
||||||
|
margin: 0px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: $color-text-main;
|
||||||
|
}
|
||||||
|
.d2-page-cover__sub-title {
|
||||||
|
margin: 0px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
color: $color-text-normal;
|
||||||
|
}
|
||||||
|
.d2-page-cover__build-time {
|
||||||
|
margin: 0px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: $color-text-placehoder;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,9 @@
|
|||||||
|
import Vue from 'vue'
|
||||||
|
|
||||||
|
import d2Container from './d2-container'
|
||||||
|
|
||||||
|
// 注意 有些组件使用异步加载会有影响
|
||||||
|
Vue.component('d2-container', d2Container)
|
||||||
|
Vue.component('d2-page-cover', () => import('./d2-page-cover'))
|
||||||
|
Vue.component('d2-icon', () => import('./d2-icon'))
|
||||||
|
Vue.component('d2-icon-svg', () => import('./d2-icon-svg/index.vue'))
|
||||||
@@ -0,0 +1,17 @@
|
|||||||
|
import Vue from 'vue'
|
||||||
|
import VueI18n from 'vue-i18n'
|
||||||
|
|
||||||
|
import cn from './lang/cn'
|
||||||
|
import ja from './lang/ja'
|
||||||
|
import en from './lang/en'
|
||||||
|
|
||||||
|
Vue.use(VueI18n)
|
||||||
|
|
||||||
|
export default new VueI18n({
|
||||||
|
locale: 'cn',
|
||||||
|
messages: {
|
||||||
|
cn,
|
||||||
|
ja,
|
||||||
|
en
|
||||||
|
}
|
||||||
|
})
|
||||||
@@ -0,0 +1,7 @@
|
|||||||
|
export default {
|
||||||
|
pub: {
|
||||||
|
pageHeader: {
|
||||||
|
demo: '示例'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,7 @@
|
|||||||
|
export default {
|
||||||
|
pub: {
|
||||||
|
pageHeader: {
|
||||||
|
demo: 'Demo'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,7 @@
|
|||||||
|
export default {
|
||||||
|
pub: {
|
||||||
|
pageHeader: {
|
||||||
|
demo: 'サンプル'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,27 @@
|
|||||||
|
<template>
|
||||||
|
<el-menu-item :index="menu.path || uniqueId">
|
||||||
|
<i v-if="menu.icon" :class="`fa fa-${menu.icon}`"></i>
|
||||||
|
<i v-if="menu.icon === undefined & !menu.iconSvg" class="fa fa-file-o"></i>
|
||||||
|
<d2-icon-svg v-if="menu.iconSvg" :name="menu.iconSvg"/>
|
||||||
|
<span slot="title">{{menu.title || '未命名菜单'}}</span>
|
||||||
|
</el-menu-item>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { uniqueId } from 'lodash'
|
||||||
|
export default {
|
||||||
|
name: 'd2-layout-header-aside-menu-item',
|
||||||
|
props: {
|
||||||
|
menu: {
|
||||||
|
type: Object,
|
||||||
|
required: false,
|
||||||
|
default: () => {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
uniqueId: uniqueId('d2-menu-empty-')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,39 @@
|
|||||||
|
<template>
|
||||||
|
<el-submenu :index="menu.path || uniqueId">
|
||||||
|
<template slot="title">
|
||||||
|
<i v-if="menu.icon" :class="`fa fa-${menu.icon}`"></i>
|
||||||
|
<i v-if="menu.icon === undefined & !menu.iconSvg" class="fa fa-folder-o"></i>
|
||||||
|
<d2-icon-svg v-if="menu.iconSvg" :name="menu.iconSvg"/>
|
||||||
|
<span slot="title">{{menu.title}}</span>
|
||||||
|
</template>
|
||||||
|
<template v-for="(child, childIndex) in menu.children">
|
||||||
|
<d2-layout-header-aside-menu-item v-if="child.children === undefined" :menu="child" :key="childIndex"/>
|
||||||
|
<d2-layout-header-aside-menu-sub v-else :menu="child" :key="childIndex"/>
|
||||||
|
</template>
|
||||||
|
</el-submenu>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { uniqueId } from 'lodash'
|
||||||
|
// 组件
|
||||||
|
import d2LayoutMainMenuItem from '../menu-item'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'd2-layout-header-aside-menu-sub',
|
||||||
|
components: {
|
||||||
|
'd2-layout-header-aside-menu-item': d2LayoutMainMenuItem
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
menu: {
|
||||||
|
type: Object,
|
||||||
|
required: false,
|
||||||
|
default: () => {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
uniqueId: uniqueId('d2-menu-empty-')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,61 @@
|
|||||||
|
<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>
|
||||||
@@ -0,0 +1,71 @@
|
|||||||
|
<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>
|
||||||
+30
@@ -0,0 +1,30 @@
|
|||||||
|
<template>
|
||||||
|
<div
|
||||||
|
class="d2-error-log-list__expand"
|
||||||
|
:class="className">
|
||||||
|
<p class="d2-error-log-list__expand-title">{{title}}</p>
|
||||||
|
<p class="d2-error-log-list__expand-value">{{value === '' ? '无数据' : value}}</p>
|
||||||
|
<slot/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
type: {
|
||||||
|
default: 'log'
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
value: {
|
||||||
|
default: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
className () {
|
||||||
|
return this.type === 'log' ? 'd2-error-log-list__expand--log' : 'd2-error-log-list__expand--error'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,194 @@
|
|||||||
|
<template>
|
||||||
|
<el-table
|
||||||
|
:data="logReverse"
|
||||||
|
border
|
||||||
|
stripe
|
||||||
|
style="width: 100%"
|
||||||
|
size="mini">
|
||||||
|
|
||||||
|
<el-table-column type="expand">
|
||||||
|
<div slot-scope="props" class="d2-error-log-list__expand-group">
|
||||||
|
<expand-item
|
||||||
|
:type="props.row.type"
|
||||||
|
title="类型"
|
||||||
|
:value="props.row.type === 'log' ? '日志' : '异常'"/>
|
||||||
|
<expand-item
|
||||||
|
:type="props.row.type"
|
||||||
|
title="内容"
|
||||||
|
:value="props.row.info"/>
|
||||||
|
<expand-item
|
||||||
|
v-if="props.row.type === 'error'"
|
||||||
|
type="error"
|
||||||
|
title="报错组件"
|
||||||
|
:value="get(props.row.vm, '$vnode.tag', '')"/>
|
||||||
|
<expand-item
|
||||||
|
v-if="props.row.type === 'error'"
|
||||||
|
type="error"
|
||||||
|
title="错误名称"
|
||||||
|
:value="get(props.row.err, 'name', '')"/>
|
||||||
|
<expand-item
|
||||||
|
v-if="props.row.type === 'error'"
|
||||||
|
type="error"
|
||||||
|
title="错误信息"
|
||||||
|
:value="get(props.row.err, 'message', '')"/>
|
||||||
|
<expand-item
|
||||||
|
v-if="props.row.type === 'error'"
|
||||||
|
type="error"
|
||||||
|
title="错误堆栈"
|
||||||
|
value="见下">
|
||||||
|
<div style="overflow: auto;">
|
||||||
|
<pre>{{stackBeautify(props.row.err)}}</pre>
|
||||||
|
</div>
|
||||||
|
</expand-item>
|
||||||
|
<expand-item
|
||||||
|
:type="props.row.type"
|
||||||
|
title="用户名"
|
||||||
|
:value="get(props.row.user, 'name', '')"/>
|
||||||
|
<expand-item
|
||||||
|
:type="props.row.type"
|
||||||
|
title="uuid"
|
||||||
|
:value="props.row.uuid"/>
|
||||||
|
<expand-item
|
||||||
|
:type="props.row.type"
|
||||||
|
title="token"
|
||||||
|
:value="props.row.token"/>
|
||||||
|
<expand-item
|
||||||
|
:type="props.row.type"
|
||||||
|
title="页面地址"
|
||||||
|
:value="props.row.url"/>
|
||||||
|
<expand-item
|
||||||
|
:type="props.row.type"
|
||||||
|
title="时间"
|
||||||
|
:value="props.row.time"/>
|
||||||
|
</div>
|
||||||
|
</el-table-column>
|
||||||
|
|
||||||
|
<el-table-column
|
||||||
|
prop="type"
|
||||||
|
label="类型"
|
||||||
|
width="80px"
|
||||||
|
align="center"
|
||||||
|
:filters="[
|
||||||
|
{ text: '日志', value: 'log' },
|
||||||
|
{ text: '异常', value: 'error' }
|
||||||
|
]"
|
||||||
|
:filter-multiple="false"
|
||||||
|
:filter-method="filterType"
|
||||||
|
filter-placement="bottom">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-tag
|
||||||
|
v-if="scope.row.type === 'error'"
|
||||||
|
size="mini"
|
||||||
|
type="danger">
|
||||||
|
<d2-icon name="bug"/> Bug
|
||||||
|
</el-tag>
|
||||||
|
<el-tag
|
||||||
|
v-else
|
||||||
|
size="mini"
|
||||||
|
type="info">
|
||||||
|
<d2-icon name="dot-circle-o"/> Log
|
||||||
|
</el-tag>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
|
||||||
|
<el-table-column
|
||||||
|
label="地址"
|
||||||
|
prop="url"
|
||||||
|
width="140px"
|
||||||
|
:show-overflow-tooltip="true">
|
||||||
|
</el-table-column>
|
||||||
|
|
||||||
|
<el-table-column
|
||||||
|
label="内容"
|
||||||
|
prop="info"
|
||||||
|
:show-overflow-tooltip="true">
|
||||||
|
</el-table-column>
|
||||||
|
|
||||||
|
<el-table-column
|
||||||
|
label="错误类型"
|
||||||
|
width="140px"
|
||||||
|
:show-overflow-tooltip="true">
|
||||||
|
<template
|
||||||
|
slot-scope="scope">
|
||||||
|
{{get(scope.row.err, 'name', '')}}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
|
||||||
|
<el-table-column
|
||||||
|
label="错误信息"
|
||||||
|
width="300px">
|
||||||
|
<template
|
||||||
|
slot-scope="scope">
|
||||||
|
{{get(scope.row.err, 'message', '')}}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
|
||||||
|
</el-table>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { mapState } from 'vuex'
|
||||||
|
import { get } from 'lodash'
|
||||||
|
import ExpandItem from './components/ExpandItem'
|
||||||
|
export default {
|
||||||
|
name: 'd2-error-log-list',
|
||||||
|
components: {
|
||||||
|
ExpandItem
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapState('d2admin', {
|
||||||
|
logList: state => state.log.list
|
||||||
|
}),
|
||||||
|
logReverse () {
|
||||||
|
// 直接 reverse 的话有点问题
|
||||||
|
const res = []
|
||||||
|
const loglength = this.logList.length
|
||||||
|
this.logList.forEach((log, index) => {
|
||||||
|
res.push(this.logList[loglength - 1 - index])
|
||||||
|
})
|
||||||
|
return res
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
get,
|
||||||
|
filterType (value, row) {
|
||||||
|
return row.type === value
|
||||||
|
},
|
||||||
|
stackBeautify (err) {
|
||||||
|
if (!err) {
|
||||||
|
return ''
|
||||||
|
}
|
||||||
|
return err.stack
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.d2-error-log-list__expand-group {
|
||||||
|
.d2-error-log-list__expand {
|
||||||
|
padding-left: 20px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0px;
|
||||||
|
}
|
||||||
|
.d2-error-log-list__expand-title {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-top: 0px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
.d2-error-log-list__expand-value {
|
||||||
|
font-size: 12px;
|
||||||
|
margin-top: 0px;
|
||||||
|
margin-bottom: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.d2-error-log-list__expand--log {
|
||||||
|
border-left: 4px solid $color-info;
|
||||||
|
}
|
||||||
|
.d2-error-log-list__expand--error {
|
||||||
|
border-left: 4px solid $color-danger;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,82 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<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>
|
||||||
|
<el-dialog
|
||||||
|
:title="tooltipContent"
|
||||||
|
:fullscreen="true"
|
||||||
|
:visible.sync="dialogVisible"
|
||||||
|
:append-to-body="true">
|
||||||
|
<div class="d2-mb-10">
|
||||||
|
<el-button type="danger" size="mini" @click="handleLogClean">
|
||||||
|
<d2-icon name="trash-o"/>
|
||||||
|
清空
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
<d2-error-log-list/>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { mapGetters, mapMutations } from 'vuex'
|
||||||
|
import D2ErrorLogList from './components/list'
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
D2ErrorLogList
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
dialogVisible: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
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 () {
|
||||||
|
if (this.logLength > 0) {
|
||||||
|
this.dialogVisible = true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleLogClean () {
|
||||||
|
this.dialogVisible = false
|
||||||
|
this.clean()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user