mirror of
https://gitee.com/dromara/dbswitch.git
synced 2025-09-09 13:39:10 +00:00
inrgihc
39
dbswitch-admin-ui/package-lock.json
generated
39
dbswitch-admin-ui/package-lock.json
generated
@@ -9,7 +9,8 @@
|
||||
"dependencies": {
|
||||
"axios": "^0.19.2",
|
||||
"echarts": "^4.9.0",
|
||||
"element-ui": "^2.13.2",
|
||||
"element-ui": "^2.15.6",
|
||||
"urlencode": "^1.1.0",
|
||||
"vue": "^2.5.2",
|
||||
"vue-count-to": "^1.0.13",
|
||||
"vue-cron": "^1.0.9",
|
||||
@@ -4032,9 +4033,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/element-ui": {
|
||||
"version": "2.14.1",
|
||||
"resolved": "https://registry.npm.taobao.org/element-ui/download/element-ui-2.14.1.tgz",
|
||||
"integrity": "sha1-i1dFxzZsHBpgO7bAIShupxh+KqI=",
|
||||
"version": "2.15.6",
|
||||
"resolved": "https://registry.npmmirror.com/element-ui/-/element-ui-2.15.6.tgz",
|
||||
"integrity": "sha512-rcYXEKd/j2G0AgficAOk1Zd1AsnHRkhmrK4yLHmNOiimU2JfsywgfKUjMoFuT6pQx0luhovj8lFjpE4Fnt58Iw==",
|
||||
"dependencies": {
|
||||
"async-validator": "~1.8.1",
|
||||
"babel-helper-vue-jsx-merge-props": "^2.0.0",
|
||||
@@ -5546,7 +5547,6 @@
|
||||
"version": "0.4.24",
|
||||
"resolved": "https://registry.npm.taobao.org/iconv-lite/download/iconv-lite-0.4.24.tgz?cache=0&sync_timestamp=1594184325364&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ficonv-lite%2Fdownload%2Ficonv-lite-0.4.24.tgz",
|
||||
"integrity": "sha1-ICK0sl+93CHS9SSXSkdKr+czkIs=",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"safer-buffer": ">= 2.1.2 < 3"
|
||||
},
|
||||
@@ -11480,8 +11480,7 @@
|
||||
"node_modules/safer-buffer": {
|
||||
"version": "2.1.2",
|
||||
"resolved": "https://registry.npm.taobao.org/safer-buffer/download/safer-buffer-2.1.2.tgz",
|
||||
"integrity": "sha1-RPoWGwGHuVSd2Eu5GAL5vYOFzWo=",
|
||||
"dev": true
|
||||
"integrity": "sha1-RPoWGwGHuVSd2Eu5GAL5vYOFzWo="
|
||||
},
|
||||
"node_modules/sax": {
|
||||
"version": "1.2.4",
|
||||
@@ -12970,6 +12969,14 @@
|
||||
"integrity": "sha1-llOgNvt8HuQjQvIyXM7v6jkmxI0=",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/urlencode": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmmirror.com/urlencode/-/urlencode-1.1.0.tgz",
|
||||
"integrity": "sha512-OOAOh9owHXr/rCN1tteSnYwIvsrGHamSz0hafMhmQa7RcS4+Ets6/2iVClVGjt9jkDW84UqoMw/Gmpc7QolX6A==",
|
||||
"dependencies": {
|
||||
"iconv-lite": "~0.4.11"
|
||||
}
|
||||
},
|
||||
"node_modules/use": {
|
||||
"version": "3.1.1",
|
||||
"resolved": "https://registry.npm.taobao.org/use/download/use-3.1.1.tgz",
|
||||
@@ -17882,9 +17889,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"element-ui": {
|
||||
"version": "2.14.1",
|
||||
"resolved": "https://registry.npm.taobao.org/element-ui/download/element-ui-2.14.1.tgz",
|
||||
"integrity": "sha1-i1dFxzZsHBpgO7bAIShupxh+KqI=",
|
||||
"version": "2.15.6",
|
||||
"resolved": "https://registry.npmmirror.com/element-ui/-/element-ui-2.15.6.tgz",
|
||||
"integrity": "sha512-rcYXEKd/j2G0AgficAOk1Zd1AsnHRkhmrK4yLHmNOiimU2JfsywgfKUjMoFuT6pQx0luhovj8lFjpE4Fnt58Iw==",
|
||||
"requires": {
|
||||
"async-validator": "~1.8.1",
|
||||
"babel-helper-vue-jsx-merge-props": "^2.0.0",
|
||||
@@ -19174,7 +19181,6 @@
|
||||
"version": "0.4.24",
|
||||
"resolved": "https://registry.npm.taobao.org/iconv-lite/download/iconv-lite-0.4.24.tgz?cache=0&sync_timestamp=1594184325364&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ficonv-lite%2Fdownload%2Ficonv-lite-0.4.24.tgz",
|
||||
"integrity": "sha1-ICK0sl+93CHS9SSXSkdKr+czkIs=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"safer-buffer": ">= 2.1.2 < 3"
|
||||
}
|
||||
@@ -24032,8 +24038,7 @@
|
||||
"safer-buffer": {
|
||||
"version": "2.1.2",
|
||||
"resolved": "https://registry.npm.taobao.org/safer-buffer/download/safer-buffer-2.1.2.tgz",
|
||||
"integrity": "sha1-RPoWGwGHuVSd2Eu5GAL5vYOFzWo=",
|
||||
"dev": true
|
||||
"integrity": "sha1-RPoWGwGHuVSd2Eu5GAL5vYOFzWo="
|
||||
},
|
||||
"sax": {
|
||||
"version": "1.2.4",
|
||||
@@ -25309,6 +25314,14 @@
|
||||
"requires-port": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"urlencode": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmmirror.com/urlencode/-/urlencode-1.1.0.tgz",
|
||||
"integrity": "sha512-OOAOh9owHXr/rCN1tteSnYwIvsrGHamSz0hafMhmQa7RcS4+Ets6/2iVClVGjt9jkDW84UqoMw/Gmpc7QolX6A==",
|
||||
"requires": {
|
||||
"iconv-lite": "~0.4.11"
|
||||
}
|
||||
},
|
||||
"use": {
|
||||
"version": "3.1.1",
|
||||
"resolved": "https://registry.npm.taobao.org/use/download/use-3.1.1.tgz",
|
||||
|
||||
@@ -12,7 +12,8 @@
|
||||
"dependencies": {
|
||||
"axios": "^0.19.2",
|
||||
"echarts": "^4.9.0",
|
||||
"element-ui": "^2.13.2",
|
||||
"element-ui": "^2.15.6",
|
||||
"urlencode": "^1.1.0",
|
||||
"vue": "^2.5.2",
|
||||
"vue-count-to": "^1.0.13",
|
||||
"vue-cron": "^1.0.9",
|
||||
|
||||
539
dbswitch-admin-ui/src/assets/iconfont/demo.css
Normal file
539
dbswitch-admin-ui/src/assets/iconfont/demo.css
Normal file
@@ -0,0 +1,539 @@
|
||||
/* Logo 字体 */
|
||||
@font-face {
|
||||
font-family: "iconfont logo";
|
||||
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
|
||||
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
|
||||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
|
||||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
|
||||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-family: "iconfont logo";
|
||||
font-size: 160px;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/* tabs */
|
||||
.nav-tabs {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nav-tabs .nav-more {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 42px;
|
||||
line-height: 42px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
#tabs {
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
#tabs li {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
border-bottom: 2px solid transparent;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-bottom: -1px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
|
||||
#tabs .active {
|
||||
border-bottom-color: #f00;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
.tab-container .content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 页面布局 */
|
||||
.main {
|
||||
padding: 30px 100px;
|
||||
width: 960px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.main .logo {
|
||||
color: #333;
|
||||
text-align: left;
|
||||
margin-bottom: 30px;
|
||||
line-height: 1;
|
||||
height: 110px;
|
||||
margin-top: -50px;
|
||||
overflow: hidden;
|
||||
*zoom: 1;
|
||||
}
|
||||
|
||||
.main .logo a {
|
||||
font-size: 160px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.helps {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.helps pre {
|
||||
padding: 20px;
|
||||
margin: 10px 0;
|
||||
border: solid 1px #e7e1cd;
|
||||
background-color: #fffdef;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.icon_lists {
|
||||
width: 100% !important;
|
||||
overflow: hidden;
|
||||
*zoom: 1;
|
||||
}
|
||||
|
||||
.icon_lists li {
|
||||
width: 100px;
|
||||
margin-bottom: 10px;
|
||||
margin-right: 20px;
|
||||
text-align: center;
|
||||
list-style: none !important;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.icon_lists li .code-name {
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.icon_lists .icon {
|
||||
display: block;
|
||||
height: 100px;
|
||||
line-height: 100px;
|
||||
font-size: 42px;
|
||||
margin: 10px auto;
|
||||
color: #333;
|
||||
-webkit-transition: font-size 0.25s linear, width 0.25s linear;
|
||||
-moz-transition: font-size 0.25s linear, width 0.25s linear;
|
||||
transition: font-size 0.25s linear, width 0.25s linear;
|
||||
}
|
||||
|
||||
.icon_lists .icon:hover {
|
||||
font-size: 100px;
|
||||
}
|
||||
|
||||
.icon_lists .svg-icon {
|
||||
/* 通过设置 font-size 来改变图标大小 */
|
||||
width: 1em;
|
||||
/* 图标和文字相邻时，垂直对齐 */
|
||||
vertical-align: -0.15em;
|
||||
/* 通过设置 color 来改变 SVG 的颜色/fill */
|
||||
fill: currentColor;
|
||||
/* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
|
||||
normalize.css 中也包含这行 */
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.icon_lists li .name,
|
||||
.icon_lists li .code-name {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* markdown 样式 */
|
||||
.markdown {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.markdown img {
|
||||
vertical-align: middle;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.markdown h1 {
|
||||
color: #404040;
|
||||
font-weight: 500;
|
||||
line-height: 40px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.markdown h2,
|
||||
.markdown h3,
|
||||
.markdown h4,
|
||||
.markdown h5,
|
||||
.markdown h6 {
|
||||
color: #404040;
|
||||
margin: 1.6em 0 0.6em 0;
|
||||
font-weight: 500;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.markdown h1 {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.markdown h2 {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.markdown h3 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.markdown h4 {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.markdown h5 {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.markdown h6 {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.markdown hr {
|
||||
height: 1px;
|
||||
border: 0;
|
||||
background: #e9e9e9;
|
||||
margin: 16px 0;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.markdown p {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.markdown>p,
|
||||
.markdown>blockquote,
|
||||
.markdown>.highlight,
|
||||
.markdown>ol,
|
||||
.markdown>ul {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.markdown ul>li {
|
||||
list-style: circle;
|
||||
}
|
||||
|
||||
.markdown>ul li,
|
||||
.markdown blockquote ul>li {
|
||||
margin-left: 20px;
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
.markdown>ul li p,
|
||||
.markdown>ol li p {
|
||||
margin: 0.6em 0;
|
||||
}
|
||||
|
||||
.markdown ol>li {
|
||||
list-style: decimal;
|
||||
}
|
||||
|
||||
.markdown>ol li,
|
||||
.markdown blockquote ol>li {
|
||||
margin-left: 20px;
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
.markdown code {
|
||||
margin: 0 3px;
|
||||
padding: 0 5px;
|
||||
background: #eee;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.markdown strong,
|
||||
.markdown b {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.markdown>table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0px;
|
||||
empty-cells: show;
|
||||
border: 1px solid #e9e9e9;
|
||||
width: 95%;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.markdown>table th {
|
||||
white-space: nowrap;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.markdown>table th,
|
||||
.markdown>table td {
|
||||
border: 1px solid #e9e9e9;
|
||||
padding: 8px 16px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.markdown>table th {
|
||||
background: #F7F7F7;
|
||||
}
|
||||
|
||||
.markdown blockquote {
|
||||
font-size: 90%;
|
||||
color: #999;
|
||||
border-left: 4px solid #e9e9e9;
|
||||
padding-left: 0.8em;
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.markdown blockquote p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.markdown .anchor {
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.markdown .waiting {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.markdown h1:hover .anchor,
|
||||
.markdown h2:hover .anchor,
|
||||
.markdown h3:hover .anchor,
|
||||
.markdown h4:hover .anchor,
|
||||
.markdown h5:hover .anchor,
|
||||
.markdown h6:hover .anchor {
|
||||
opacity: 1;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.markdown>br,
|
||||
.markdown>p>br {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
|
||||
.hljs {
|
||||
display: block;
|
||||
background: white;
|
||||
padding: 0.5em;
|
||||
color: #333333;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.hljs-comment,
|
||||
.hljs-meta {
|
||||
color: #969896;
|
||||
}
|
||||
|
||||
.hljs-string,
|
||||
.hljs-variable,
|
||||
.hljs-template-variable,
|
||||
.hljs-strong,
|
||||
.hljs-emphasis,
|
||||
.hljs-quote {
|
||||
color: #df5000;
|
||||
}
|
||||
|
||||
.hljs-keyword,
|
||||
.hljs-selector-tag,
|
||||
.hljs-type {
|
||||
color: #a71d5d;
|
||||
}
|
||||
|
||||
.hljs-literal,
|
||||
.hljs-symbol,
|
||||
.hljs-bullet,
|
||||
.hljs-attribute {
|
||||
color: #0086b3;
|
||||
}
|
||||
|
||||
.hljs-section,
|
||||
.hljs-name {
|
||||
color: #63a35c;
|
||||
}
|
||||
|
||||
.hljs-tag {
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.hljs-title,
|
||||
.hljs-attr,
|
||||
.hljs-selector-id,
|
||||
.hljs-selector-class,
|
||||
.hljs-selector-attr,
|
||||
.hljs-selector-pseudo {
|
||||
color: #795da3;
|
||||
}
|
||||
|
||||
.hljs-addition {
|
||||
color: #55a532;
|
||||
background-color: #eaffea;
|
||||
}
|
||||
|
||||
.hljs-deletion {
|
||||
color: #bd2c00;
|
||||
background-color: #ffecec;
|
||||
}
|
||||
|
||||
.hljs-link {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* 代码高亮 */
|
||||
/* PrismJS 1.15.0
|
||||
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
|
||||
/**
|
||||
* prism.js default theme for JavaScript, CSS and HTML
|
||||
* Based on dabblet (http://dabblet.com)
|
||||
* @author Lea Verou
|
||||
*/
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
color: black;
|
||||
background: none;
|
||||
text-shadow: 0 1px white;
|
||||
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
word-wrap: normal;
|
||||
line-height: 1.5;
|
||||
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
|
||||
-webkit-hyphens: none;
|
||||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
}
|
||||
|
||||
pre[class*="language-"]::-moz-selection,
|
||||
pre[class*="language-"] ::-moz-selection,
|
||||
code[class*="language-"]::-moz-selection,
|
||||
code[class*="language-"] ::-moz-selection {
|
||||
text-shadow: none;
|
||||
background: #b3d4fc;
|
||||
}
|
||||
|
||||
pre[class*="language-"]::selection,
|
||||
pre[class*="language-"] ::selection,
|
||||
code[class*="language-"]::selection,
|
||||
code[class*="language-"] ::selection {
|
||||
text-shadow: none;
|
||||
background: #b3d4fc;
|
||||
}
|
||||
|
||||
@media print {
|
||||
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Code blocks */
|
||||
pre[class*="language-"] {
|
||||
padding: 1em;
|
||||
margin: .5em 0;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
:not(pre)>code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
background: #f5f2f0;
|
||||
}
|
||||
|
||||
/* Inline code */
|
||||
:not(pre)>code[class*="language-"] {
|
||||
padding: .1em;
|
||||
border-radius: .3em;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.token.comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: slategray;
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.namespace {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
.token.property,
|
||||
.token.tag,
|
||||
.token.boolean,
|
||||
.token.number,
|
||||
.token.constant,
|
||||
.token.symbol,
|
||||
.token.deleted {
|
||||
color: #905;
|
||||
}
|
||||
|
||||
.token.selector,
|
||||
.token.attr-name,
|
||||
.token.string,
|
||||
.token.char,
|
||||
.token.builtin,
|
||||
.token.inserted {
|
||||
color: #690;
|
||||
}
|
||||
|
||||
.token.operator,
|
||||
.token.entity,
|
||||
.token.url,
|
||||
.language-css .token.string,
|
||||
.style .token.string {
|
||||
color: #9a6e3a;
|
||||
background: hsla(0, 0%, 100%, .5);
|
||||
}
|
||||
|
||||
.token.atrule,
|
||||
.token.attr-value,
|
||||
.token.keyword {
|
||||
color: #07a;
|
||||
}
|
||||
|
||||
.token.function,
|
||||
.token.class-name {
|
||||
color: #DD4A68;
|
||||
}
|
||||
|
||||
.token.regex,
|
||||
.token.important,
|
||||
.token.variable {
|
||||
color: #e90;
|
||||
}
|
||||
|
||||
.token.important,
|
||||
.token.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.token.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.token.entity {
|
||||
cursor: help;
|
||||
}
|
||||
276
dbswitch-admin-ui/src/assets/iconfont/demo_index.html
Normal file
276
dbswitch-admin-ui/src/assets/iconfont/demo_index.html
Normal file
@@ -0,0 +1,276 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>iconfont Demo</title>
|
||||
<link rel="shortcut icon" href="//img.alicdn.com/imgextra/i2/O1CN01ZyAlrn1MwaMhqz36G_!!6000000001499-73-tps-64-64.ico" type="image/x-icon"/>
|
||||
<link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01EYTRnJ297D6vehehJ_!!6000000008020-55-tps-64-64.svg"/>
|
||||
<link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
|
||||
<link rel="stylesheet" href="demo.css">
|
||||
<link rel="stylesheet" href="iconfont.css">
|
||||
<script src="iconfont.js"></script>
|
||||
<!-- jQuery -->
|
||||
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
|
||||
<!-- 代码高亮 -->
|
||||
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
|
||||
<style>
|
||||
.main .logo {
|
||||
margin-top: 0;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.main .logo a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.main .logo .sub-title {
|
||||
margin-left: 0.5em;
|
||||
font-size: 22px;
|
||||
color: #fff;
|
||||
background: linear-gradient(-45deg, #3967FF, #B500FE);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="main">
|
||||
<h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
|
||||
<img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
|
||||
|
||||
</a></h1>
|
||||
<div class="nav-tabs">
|
||||
<ul id="tabs" class="dib-box">
|
||||
<li class="dib active"><span>Unicode</span></li>
|
||||
<li class="dib"><span>Font class</span></li>
|
||||
<li class="dib"><span>Symbol</span></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
<div class="tab-container">
|
||||
<div class="content unicode" style="display: block;">
|
||||
<ul class="icon_lists dib-box">
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">数据库</div>
|
||||
<div class="code-name">&#xe615;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">列表视图</div>
|
||||
<div class="code-name">&#xe65f;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">数据库</div>
|
||||
<div class="code-name">&#xe997;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">视图_表格</div>
|
||||
<div class="code-name">&#xe6a2;</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<div class="article markdown">
|
||||
<h2 id="unicode-">Unicode 引用</h2>
|
||||
<hr>
|
||||
|
||||
<p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
|
||||
<ul>
|
||||
<li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
|
||||
<li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
|
||||
</ul>
|
||||
<blockquote>
|
||||
<p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
|
||||
</blockquote>
|
||||
<p>Unicode 使用步骤如下：</p>
|
||||
<h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
|
||||
<pre><code class="language-css"
|
||||
>@font-face {
|
||||
font-family: 'iconfont';
|
||||
src: url('iconfont.ttf?t=1646232408265') format('truetype');
|
||||
}
|
||||
</code></pre>
|
||||
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
|
||||
<pre><code class="language-css"
|
||||
>.iconfont {
|
||||
font-family: "iconfont" !important;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
</code></pre>
|
||||
<h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
|
||||
<pre>
|
||||
<code class="language-html"
|
||||
><span class="iconfont">&#x33;</span>
|
||||
</code></pre>
|
||||
<blockquote>
|
||||
<p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content font-class">
|
||||
<ul class="icon_lists dib-box">
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-shujuku"></span>
|
||||
<div class="name">
|
||||
数据库
|
||||
</div>
|
||||
<div class="code-name">.icon-shujuku
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-viewList"></span>
|
||||
<div class="name">
|
||||
列表视图
|
||||
</div>
|
||||
<div class="code-name">.icon-viewList
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-shujuku1"></span>
|
||||
<div class="name">
|
||||
数据库
|
||||
</div>
|
||||
<div class="code-name">.icon-shujuku1
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-shitu_biaoge"></span>
|
||||
<div class="name">
|
||||
视图_表格
|
||||
</div>
|
||||
<div class="code-name">.icon-shitu_biaoge
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<div class="article markdown">
|
||||
<h2 id="font-class-">font-class 引用</h2>
|
||||
<hr>
|
||||
|
||||
<p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
|
||||
<p>与 Unicode 使用方式相比，具有如下特点：</p>
|
||||
<ul>
|
||||
<li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
|
||||
<li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
|
||||
</ul>
|
||||
<p>使用步骤如下：</p>
|
||||
<h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
|
||||
<pre><code class="language-html"><link rel="stylesheet" href="./iconfont.css">
|
||||
</code></pre>
|
||||
<h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
|
||||
<pre><code class="language-html"><span class="iconfont icon-xxx"></span>
|
||||
</code></pre>
|
||||
<blockquote>
|
||||
<p>"
|
||||
iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content symbol">
|
||||
<ul class="icon_lists dib-box">
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-shujuku"></use>
|
||||
</svg>
|
||||
<div class="name">数据库</div>
|
||||
<div class="code-name">#icon-shujuku</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-viewList"></use>
|
||||
</svg>
|
||||
<div class="name">列表视图</div>
|
||||
<div class="code-name">#icon-viewList</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-shujuku1"></use>
|
||||
</svg>
|
||||
<div class="name">数据库</div>
|
||||
<div class="code-name">#icon-shujuku1</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-shitu_biaoge"></use>
|
||||
</svg>
|
||||
<div class="name">视图_表格</div>
|
||||
<div class="code-name">#icon-shitu_biaoge</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<div class="article markdown">
|
||||
<h2 id="symbol-">Symbol 引用</h2>
|
||||
<hr>
|
||||
|
||||
<p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
|
||||
这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
|
||||
<ul>
|
||||
<li>支持多色图标了，不再受单色限制。</li>
|
||||
<li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
|
||||
<li>兼容性较差，支持 IE9+，及现代浏览器。</li>
|
||||
<li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
|
||||
</ul>
|
||||
<p>使用步骤如下：</p>
|
||||
<h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
|
||||
<pre><code class="language-html"><script src="./iconfont.js"></script>
|
||||
</code></pre>
|
||||
<h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
|
||||
<pre><code class="language-html"><style>
|
||||
.icon {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
vertical-align: -0.15em;
|
||||
fill: currentColor;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
</code></pre>
|
||||
<h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
|
||||
<pre><code class="language-html"><svg class="icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-xxx"></use>
|
||||
</svg>
|
||||
</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
$('.tab-container .content:first').show()
|
||||
|
||||
$('#tabs li').click(function (e) {
|
||||
var tabContent = $('.tab-container .content')
|
||||
var index = $(this).index()
|
||||
|
||||
if ($(this).hasClass('active')) {
|
||||
return
|
||||
} else {
|
||||
$('#tabs li').removeClass('active')
|
||||
$(this).addClass('active')
|
||||
|
||||
tabContent.hide().eq(index).fadeIn()
|
||||
}
|
||||
})
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
29
dbswitch-admin-ui/src/assets/iconfont/iconfont.css
Normal file
29
dbswitch-admin-ui/src/assets/iconfont/iconfont.css
Normal file
@@ -0,0 +1,29 @@
|
||||
@font-face {
|
||||
font-family: "iconfont"; /* Project id */
|
||||
src: url('iconfont.ttf?t=1646232408265') format('truetype');
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-family: "iconfont" !important;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-shujuku:before {
|
||||
content: "\e615";
|
||||
}
|
||||
|
||||
.icon-viewList:before {
|
||||
content: "\e65f";
|
||||
}
|
||||
|
||||
.icon-shujuku1:before {
|
||||
content: "\e997";
|
||||
}
|
||||
|
||||
.icon-shitu_biaoge:before {
|
||||
content: "\e6a2";
|
||||
}
|
||||
|
||||
1
dbswitch-admin-ui/src/assets/iconfont/iconfont.js
Normal file
1
dbswitch-admin-ui/src/assets/iconfont/iconfont.js
Normal file
File diff suppressed because one or more lines are too long
37
dbswitch-admin-ui/src/assets/iconfont/iconfont.json
Normal file
37
dbswitch-admin-ui/src/assets/iconfont/iconfont.json
Normal file
@@ -0,0 +1,37 @@
|
||||
{
|
||||
"id": "",
|
||||
"name": "",
|
||||
"font_family": "iconfont",
|
||||
"css_prefix_text": "icon-",
|
||||
"description": "",
|
||||
"glyphs": [
|
||||
{
|
||||
"icon_id": "3977828",
|
||||
"name": "数据库",
|
||||
"font_class": "shujuku",
|
||||
"unicode": "e615",
|
||||
"unicode_decimal": 58901
|
||||
},
|
||||
{
|
||||
"icon_id": "14835758",
|
||||
"name": "列表视图",
|
||||
"font_class": "viewList",
|
||||
"unicode": "e65f",
|
||||
"unicode_decimal": 58975
|
||||
},
|
||||
{
|
||||
"icon_id": "18267958",
|
||||
"name": "数据库",
|
||||
"font_class": "shujuku1",
|
||||
"unicode": "e997",
|
||||
"unicode_decimal": 59799
|
||||
},
|
||||
{
|
||||
"icon_id": "24206743",
|
||||
"name": "视图_表格",
|
||||
"font_class": "shitu_biaoge",
|
||||
"unicode": "e6a2",
|
||||
"unicode_decimal": 59042
|
||||
}
|
||||
]
|
||||
}
|
||||
BIN
dbswitch-admin-ui/src/assets/iconfont/iconfont.ttf
Normal file
BIN
dbswitch-admin-ui/src/assets/iconfont/iconfont.ttf
Normal file
Binary file not shown.
@@ -5,6 +5,7 @@ import App from './App'
|
||||
import router from './router'
|
||||
import axios from './assets/axios.js';
|
||||
import ElementUI from 'element-ui';
|
||||
import './assets/iconfont/iconfont.css'
|
||||
import 'element-ui/lib/theme-chalk/index.css';
|
||||
import VueCron from 'vue-cron'
|
||||
import echarts from 'echarts'
|
||||
|
||||
@@ -28,10 +28,16 @@ const constantRouter = new Router({
|
||||
icon: "el-icon-s-order",
|
||||
component: () => import('@/views/connection/list')
|
||||
},
|
||||
{
|
||||
path: '/metadata',
|
||||
name: '数据目录',
|
||||
icon: "el-icon-coin",
|
||||
component: () => import('@/views/metadata/index')
|
||||
},
|
||||
{
|
||||
path: '/task',
|
||||
name: '任务管理',
|
||||
icon: "el-icon-folder-opened",
|
||||
icon: "el-icon-s-tools",
|
||||
component: () => import('@/views/task/index'),
|
||||
children: [
|
||||
{
|
||||
|
||||
@@ -8,7 +8,8 @@
|
||||
icon="el-icon-document-add"
|
||||
@click="createFormVisible=true">添加</el-button>
|
||||
</div>
|
||||
<el-table :data="tableData"
|
||||
<el-table :header-cell-style="{background:'#eef1f6',color:'#606266'}"
|
||||
:data="tableData"
|
||||
size="small"
|
||||
border>
|
||||
<el-table-column prop="id"
|
||||
@@ -17,6 +18,9 @@
|
||||
<el-table-column prop="name"
|
||||
label="连接名称"
|
||||
min-width="20%"></el-table-column>
|
||||
<el-table-column prop="createTime"
|
||||
label="创建时间"
|
||||
min-width="20%"></el-table-column>
|
||||
<el-table-column prop="type"
|
||||
label="数据库类型"
|
||||
min-width="10%"></el-table-column>
|
||||
@@ -25,7 +29,7 @@
|
||||
show-overflow-tooltip
|
||||
min-width="30%"></el-table-column>
|
||||
<el-table-column prop="username"
|
||||
label="账号名称"
|
||||
label="账号"
|
||||
min-width="10%"></el-table-column>
|
||||
<el-table-column label="操作"
|
||||
min-width="30%">
|
||||
@@ -164,6 +168,7 @@
|
||||
</el-form-item>
|
||||
<el-form-item label="连接密码"
|
||||
label-width="120px"
|
||||
prop="password"
|
||||
style="width:85%">
|
||||
<el-input type="password"
|
||||
v-model="createform.password"
|
||||
@@ -228,6 +233,7 @@
|
||||
</el-form-item>
|
||||
<el-form-item label="连接密码"
|
||||
label-width="120px"
|
||||
prop="password"
|
||||
style="width:85%">
|
||||
<el-input type="password"
|
||||
v-model="updateform.password"
|
||||
@@ -305,10 +311,17 @@ export default {
|
||||
],
|
||||
username: [
|
||||
{
|
||||
required: false,
|
||||
required: true,
|
||||
message: "连接账号名必须提供",
|
||||
trigger: "blur"
|
||||
}
|
||||
],
|
||||
password: [
|
||||
{
|
||||
required: true,
|
||||
message: "连接密码必须提供",
|
||||
trigger: "blur"
|
||||
}
|
||||
]
|
||||
},
|
||||
dialogFormVisible: false,
|
||||
@@ -358,7 +371,6 @@ export default {
|
||||
);
|
||||
},
|
||||
handleClose (done) {
|
||||
|
||||
},
|
||||
handleDelete: function (index, row) {
|
||||
this.$confirm(
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
:startVal="startVal"
|
||||
:endVal="statistics.connectionStatistics.totalCount"
|
||||
:duration="2000"></CountTo>
|
||||
<p class="cardItem_p1">数据库连接总数</p>
|
||||
<p class="cardItem_p1">数据库连接数</p>
|
||||
</div>
|
||||
<div class="cardItem_icon">
|
||||
<i class="el-icon-s-grid color-green1"></i>
|
||||
@@ -22,7 +22,7 @@
|
||||
:startVal="startVal"
|
||||
:endVal="statistics.assignmentTaskStatistics.totalCount"
|
||||
:duration="2000"></CountTo>
|
||||
<p class="cardItem_p1">任务安排总数</p>
|
||||
<p class="cardItem_p1">任务安排数</p>
|
||||
</div>
|
||||
<div class="cardItem_icon">
|
||||
<i class="el-icon-s-data color-blue"></i>
|
||||
@@ -36,7 +36,7 @@
|
||||
:startVal="startVal"
|
||||
:endVal="statistics.assignmentTaskStatistics.publishedCount"
|
||||
:duration="2000"></CountTo>
|
||||
<p class="cardItem_p1">任务发布总数</p>
|
||||
<p class="cardItem_p1">任务发布数</p>
|
||||
</div>
|
||||
<div class="cardItem_icon">
|
||||
<i class="el-icon-loading color-green2"></i>
|
||||
@@ -50,7 +50,7 @@
|
||||
:startVal="startVal"
|
||||
:endVal="statistics.assignmentJobStatistics.totalCount"
|
||||
:duration="2000"></CountTo>
|
||||
<p class="cardItem_p1">作业执行总数</p>
|
||||
<p class="cardItem_p1">作业执行数</p>
|
||||
</div>
|
||||
<div class="cardItem_icon">
|
||||
<i class="el-icon-office-building color-red"></i>
|
||||
@@ -126,8 +126,6 @@ export default {
|
||||
res => {
|
||||
if (0 === res.data.code) {
|
||||
this.statistics = res.data.data;
|
||||
} else {
|
||||
alert("加载数据失败:" + res.data.message);
|
||||
}
|
||||
},
|
||||
error => {
|
||||
|
||||
417
dbswitch-admin-ui/src/views/metadata/index.vue
Normal file
417
dbswitch-admin-ui/src/views/metadata/index.vue
Normal file
@@ -0,0 +1,417 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-card>
|
||||
<div class="flex-between">
|
||||
<div class="tree-container">
|
||||
<el-tree class="el-scrollbar"
|
||||
:props="props"
|
||||
:load="loadNode"
|
||||
:expand-on-click-node="true"
|
||||
:highlight-current="true"
|
||||
:render-content="renderContent"
|
||||
@check-change="handleCheckChange"
|
||||
@node-click="handleNodeClick"
|
||||
lazy>
|
||||
</el-tree>
|
||||
</div>
|
||||
<div class="table-container">
|
||||
<span>当前表：{{currentNode.schemaName}} / {{currentNode.tableName}}</span>
|
||||
<el-tabs v-model="activeName">
|
||||
<el-tab-pane label="基本信息"
|
||||
name="first">
|
||||
<el-descriptions title="元数据"
|
||||
size="small"
|
||||
:column="1"
|
||||
colon
|
||||
border>
|
||||
<el-descriptions-item label="表名称">{{tableMeta.tableName}}</el-descriptions-item>
|
||||
<el-descriptions-item label="表类型">{{tableMeta.type}}</el-descriptions-item>
|
||||
<el-descriptions-item label="模式名">{{tableMeta.schemaName}}</el-descriptions-item>
|
||||
<el-descriptions-item label="建表DDL">
|
||||
<el-input type="textarea"
|
||||
:rows="16"
|
||||
v-model="tableMeta.createSql"
|
||||
auto-complete="off"
|
||||
:readonly=true></el-input>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="表注释">
|
||||
<el-input type="textarea"
|
||||
:rows="2"
|
||||
v-model="tableMeta.remarks"
|
||||
auto-complete="off"
|
||||
:readonly=true></el-input>
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="字段信息"
|
||||
name="seconde">
|
||||
<el-table :header-cell-style="{background:'#eef1f6',color:'#606266'}"
|
||||
:data="tableMeta.columns"
|
||||
size="small"
|
||||
border
|
||||
style="width: 100%">
|
||||
<template slot="empty">
|
||||
<span>单击左侧展开"数据源导航数"来查看表的元数据记录</span>
|
||||
</template>
|
||||
<el-table-column prop="fieldName"
|
||||
min-width="20%"
|
||||
show-overflow-tooltip
|
||||
label="名称">
|
||||
</el-table-column>
|
||||
<el-table-column prop="typeName"
|
||||
min-width="20%"
|
||||
label="类型">
|
||||
</el-table-column>
|
||||
<el-table-column prop="fieldType"
|
||||
min-width="7%"
|
||||
label="枚举值">
|
||||
</el-table-column>
|
||||
<el-table-column prop="displaySize"
|
||||
min-width="7%"
|
||||
label="长度">
|
||||
</el-table-column>
|
||||
<el-table-column prop="precision"
|
||||
min-width="5%"
|
||||
label="精确">
|
||||
</el-table-column>
|
||||
<el-table-column prop="scale"
|
||||
min-width="5%"
|
||||
label="位数">
|
||||
</el-table-column>
|
||||
<el-table-column prop="isPrimaryKey"
|
||||
min-width="5%"
|
||||
label="主键">
|
||||
</el-table-column>
|
||||
<el-table-column prop="isAutoIncrement"
|
||||
min-width="5%"
|
||||
label="自增">
|
||||
</el-table-column>
|
||||
<el-table-column prop="isNullable"
|
||||
min-width="5%"
|
||||
label="空">
|
||||
</el-table-column>
|
||||
<el-table-column prop="remarks"
|
||||
min-width="20%"
|
||||
show-overflow-tooltip
|
||||
label="注释">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane class="table-container-data-table"
|
||||
label="取样数据"
|
||||
name="third">
|
||||
<el-table :header-cell-style="{background:'#eef1f6',color:'#606266'}"
|
||||
:data="sampleData.rows"
|
||||
border>
|
||||
<template slot="empty">
|
||||
<span>单击左侧展开"数据源导航数"来查看表的数据记录</span>
|
||||
</template>
|
||||
<el-table-column v-for="(item,index) in sampleData.columns"
|
||||
:prop="item"
|
||||
:label="item"
|
||||
:key="index"
|
||||
show-overflow-tooltip>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import urlencode from "urlencode";
|
||||
|
||||
// 参考文章：https://blog.csdn.net/m0_50255772/article/details/109484828
|
||||
export default {
|
||||
components: {},
|
||||
data () {
|
||||
return {
|
||||
props: {
|
||||
label: 'label',
|
||||
children: 'children',
|
||||
disabled: false,
|
||||
isLeaf: false
|
||||
},
|
||||
currentNode: {
|
||||
tableName: '-',
|
||||
schemaName: '-'
|
||||
},
|
||||
activeName: 'first',
|
||||
tableMeta: {
|
||||
tableName: '-',
|
||||
schemaName: '-',
|
||||
remarks: '',
|
||||
type: '-',
|
||||
createSql: "",
|
||||
primaryKeys: [],
|
||||
columns: []
|
||||
},
|
||||
count: 1,
|
||||
sampleData: []
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleCheckChange (data, checked, indeterminate) {
|
||||
//console.log(data, checked, indeterminate);
|
||||
},
|
||||
handleNodeClick (data) {
|
||||
//console.log(data);
|
||||
var id = data.id;
|
||||
var schema = data.schemaName;
|
||||
var table = data.tableName;
|
||||
if (!data.hasChild && id && schema && table) {
|
||||
this.activeName = 'first';
|
||||
this.getTableMeta(id, schema, table);
|
||||
this.getTableData(id, schema, table);
|
||||
}
|
||||
},
|
||||
loadNode (node, resolve) {
|
||||
if (node.level === 0) {
|
||||
const rootNode = [{ label: '数据源导航树', value: 0, hasChild: true, children: 'child' }]
|
||||
return resolve(rootNode);
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
if (node.level === 1) {
|
||||
this.loadConnectionList(resolve);
|
||||
} else if (node.level === 2) {
|
||||
this.loadSchemasList(resolve, node.data.value)
|
||||
} else if (node.level === 3) {
|
||||
this.loadTablesList(resolve, node.data.parent, node.data.label)
|
||||
} else if (node.level == 4) {
|
||||
resolve([]);
|
||||
//this.loadColumnList(resolve, node.data.id, node.data.parent, node.data.label)
|
||||
} else {
|
||||
resolve([]);
|
||||
}
|
||||
}, 500);
|
||||
},
|
||||
clearDataSet () {
|
||||
this.tableData = [];
|
||||
this.tableMeta = {
|
||||
tableName: '-',
|
||||
schemaName: '-',
|
||||
remarks: '',
|
||||
type: '-',
|
||||
createSql: "",
|
||||
primaryKeys: [],
|
||||
columns: []
|
||||
},
|
||||
this.sampleData = []
|
||||
},
|
||||
getTableMeta (id, schema, table) {
|
||||
this.$http({
|
||||
method: "GET",
|
||||
url: "/dbswitch/admin/api/v1/metadata/meta/table/" + id + "?schema=" + urlencode(schema) + "&table=" + urlencode(table)
|
||||
}).then(
|
||||
res => {
|
||||
if (0 === res.data.code) {
|
||||
//console.log("list4:" + JSON.stringify(res.data.data))
|
||||
this.tableMeta = res.data.data;
|
||||
this.currentNode.tableName = table;
|
||||
this.currentNode.schemaName = schema;
|
||||
} else {
|
||||
this.$alert("加载失败，原因：" + res.data.message, '数据加载失败');
|
||||
this.clearDataSet();
|
||||
}
|
||||
}
|
||||
);
|
||||
},
|
||||
async getTableData (id, schema, table) {
|
||||
this.$http({
|
||||
method: "GET",
|
||||
url: "/dbswitch/admin/api/v1/metadata/data/table/" + id + "?schema=" + urlencode(schema) + "&table=" + urlencode(table)
|
||||
}).then(
|
||||
res => {
|
||||
if (0 === res.data.code) {
|
||||
this.sampleData = res.data.data;
|
||||
//console.log(this.sampleData)
|
||||
} else {
|
||||
this.$alert("加载失败，原因：" + res.data.message, '数据加载失败');
|
||||
this.clearDataSet();
|
||||
}
|
||||
}
|
||||
);
|
||||
},
|
||||
loadConnectionList (resolve) {
|
||||
this.$http({
|
||||
method: "GET",
|
||||
url: "/dbswitch/admin/api/v1/connection/list/name"
|
||||
}).then(
|
||||
res => {
|
||||
if (0 === res.data.code) {
|
||||
//console.log("list1:" + JSON.stringify(res.data.data))
|
||||
res.data.data.forEach(function (element) {
|
||||
element['label'] = element.name;
|
||||
element['parent'] = 0;
|
||||
element['value'] = element.id;
|
||||
element['hasChild'] = true;
|
||||
element['children'] = 'child';
|
||||
});
|
||||
return resolve(res.data.data);
|
||||
} else {
|
||||
this.$alert("加载失败，原因：" + res.data.message, '数据加载失败');
|
||||
this.clearDataSet();
|
||||
}
|
||||
}
|
||||
);
|
||||
},
|
||||
loadSchemasList (resolve, id) {
|
||||
//console.log("id=" + id);
|
||||
this.$http({
|
||||
method: "GET",
|
||||
url: "/dbswitch/admin/api/v1/metadata/schemas/" + id + "/1/0"
|
||||
}).then(
|
||||
res => {
|
||||
if (0 === res.data.code) {
|
||||
//console.log("list2:" + JSON.stringify(res.data.data))
|
||||
res.data.data.forEach(function (element) {
|
||||
element['label'] = element.schema;
|
||||
element['parent'] = id;
|
||||
element['value'] = element.connection;
|
||||
element['hasChild'] = true;
|
||||
element['children'] = 'child';
|
||||
});
|
||||
//this.tableData = res.data.data;
|
||||
return resolve(res.data.data);
|
||||
} else {
|
||||
this.$alert("加载失败，原因：" + res.data.message, '数据加载失败');
|
||||
this.clearDataSet();
|
||||
}
|
||||
}
|
||||
);
|
||||
},
|
||||
loadTablesList (resolve, id, schema) {
|
||||
//console.log("id=" + id + ",schema=" + schema);
|
||||
this.$http({
|
||||
method: "GET",
|
||||
url: "/dbswitch/admin/api/v1/metadata/tables/" + id + "/1/0?schema=" + urlencode(schema)
|
||||
}).then(
|
||||
res => {
|
||||
if (0 === res.data.code) {
|
||||
//console.log("list3:" + JSON.stringify(res.data.data))
|
||||
res.data.data.forEach(function (element) {
|
||||
element['label'] = element.tableName;
|
||||
element['parent'] = schema;
|
||||
element['id'] = id;
|
||||
element['value'] = element.type;
|
||||
element['hasChild'] = false;
|
||||
element['children'] = 'child';
|
||||
});
|
||||
//this.tableData = res.data.data;
|
||||
return resolve(res.data.data);
|
||||
} else {
|
||||
this.$alert("加载失败，原因：" + res.data.message, '数据加载失败');
|
||||
this.clearDataSet();
|
||||
}
|
||||
}
|
||||
);
|
||||
},
|
||||
loadColumnList (resolve, id, schema, table) {
|
||||
//console.log("id=" + id);
|
||||
this.$http({
|
||||
method: "GET",
|
||||
url: "/dbswitch/admin/api/v1/metadata/columns/" + id + "/1/0?schema=" + urlencode(schema) + "&table=" + urlencode(table)
|
||||
}).then(
|
||||
res => {
|
||||
if (0 === res.data.code) {
|
||||
//console.log("list3:" + JSON.stringify(res.data.data))
|
||||
res.data.data.forEach(function (element) {
|
||||
element['label'] = element.fieldName.name;
|
||||
element['parent'] = schema;
|
||||
element['value'] = element.fieldName.value;
|
||||
element['hasChild'] = false;
|
||||
element['children'] = 'child';
|
||||
});
|
||||
this.tableData = res.data.data;
|
||||
return resolve([]);
|
||||
} else {
|
||||
this.$alert("加载失败，原因：" + res.data.message, '数据加载失败');
|
||||
this.clearDataSet();
|
||||
}
|
||||
}
|
||||
);
|
||||
},
|
||||
renderContent (h, { node, data, store }) {
|
||||
if (node.level === 1) {
|
||||
return (
|
||||
<div class="custom-tree-node">
|
||||
<i class="el-icon-takeaway-box"></i>
|
||||
<span>{data.label}</span>
|
||||
</div>
|
||||
);
|
||||
} else if (node.level === 2) {
|
||||
return (
|
||||
<div class="custom-tree-node">
|
||||
<i class="el-icon-folder-opened"></i>
|
||||
<span>{data.label}</span>
|
||||
</div>
|
||||
);
|
||||
} else if (node.level === 3) {
|
||||
return (
|
||||
<div class="custom-tree-node">
|
||||
<i class="iconfont icon-shujuku1"></i>
|
||||
<span>{data.label}</span>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
var icon_pic = "iconfont icon-shitu_biaoge";
|
||||
if (data.value === 'VIEW') {
|
||||
icon_pic = "iconfont icon-viewList"
|
||||
}
|
||||
|
||||
return (
|
||||
<div class="custom-tree-node">
|
||||
<i class={icon_pic}></i>
|
||||
<el-tooltip class="item" effect="light" placement="left">
|
||||
<div slot="content">{node.label}</div>
|
||||
<span>{data.label}</span>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.el-card,
|
||||
.el-message {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
.flex-between {
|
||||
display: flex;
|
||||
}
|
||||
.tree-container {
|
||||
overflow: hidden;
|
||||
background: #f1ecec;
|
||||
}
|
||||
.tree-container .el-tree {
|
||||
min-width: 350px;
|
||||
max-width: 350px;
|
||||
position: relative;
|
||||
cursor: default;
|
||||
background: #f3f1f1;
|
||||
color: #242425;
|
||||
}
|
||||
.tree-container .tree {
|
||||
overflow: auto;
|
||||
max-height: 200px;
|
||||
}
|
||||
.table-container {
|
||||
width: 80%;
|
||||
padding: 10px;
|
||||
}
|
||||
.table-container-data-table {
|
||||
height: 90%;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
</style>
|
||||
@@ -6,9 +6,11 @@
|
||||
width="65%">
|
||||
<el-button type="primary"
|
||||
icon="el-icon-document-add"
|
||||
size="small"
|
||||
@click="handleCreate">添加</el-button>
|
||||
</div>
|
||||
<el-table :data="tableData"
|
||||
<el-table :header-cell-style="{background:'#eef1f6',color:'#606266'}"
|
||||
:data="tableData"
|
||||
size="small"
|
||||
border>
|
||||
<el-table-column prop="id"
|
||||
@@ -79,14 +81,14 @@
|
||||
label-width="120px"
|
||||
:required=true
|
||||
prop="name"
|
||||
style="width:85%">
|
||||
style="width:65%">
|
||||
<el-input v-model="createform.name"
|
||||
auto-complete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="描述"
|
||||
label-width="120px"
|
||||
prop="description"
|
||||
style="width:85%">
|
||||
style="width:65%">
|
||||
<el-input v-model="createform.description"
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
@@ -96,7 +98,7 @@
|
||||
label-width="120px"
|
||||
:required=true
|
||||
prop="scheduleMode"
|
||||
style="width:85%">
|
||||
style="width:65%">
|
||||
<el-select v-model="createform.scheduleMode">
|
||||
<el-option label="手动调度"
|
||||
value="MANUAL"></el-option>
|
||||
@@ -106,17 +108,17 @@
|
||||
</el-form-item>
|
||||
<el-form-item label="Cron表达式"
|
||||
label-width="120px"
|
||||
style="width:85%"
|
||||
style="width:65%"
|
||||
v-if="createform.scheduleMode=='SYSTEM_SCHEDULED'">
|
||||
<el-col :span="8">
|
||||
<el-col :span="10">
|
||||
<el-popover v-model="cronPopover">
|
||||
<vueCron @change="changeCreateCronExpression"
|
||||
@close="cronPopover=false"
|
||||
i18n="cn" />
|
||||
<el-input slot="reference"
|
||||
disabled="true"
|
||||
:disabled=false
|
||||
v-model="createform.cronExpression"
|
||||
placeholder="定时策略"
|
||||
placeholder="点击选择"
|
||||
@click="cronPopover=true" />
|
||||
</el-popover>
|
||||
</el-col>
|
||||
@@ -125,7 +127,7 @@
|
||||
label-width="120px"
|
||||
:required=true
|
||||
prop="sourceConnectionId"
|
||||
style="width:85%">
|
||||
style="width:65%">
|
||||
<el-select v-model="createform.sourceConnectionId"
|
||||
@change="selectChangedSourceConnection"
|
||||
placeholder="请选择">
|
||||
@@ -166,7 +168,7 @@
|
||||
label-width="120px"
|
||||
:required=false
|
||||
prop="sourceTables"
|
||||
style="width:85%">
|
||||
style="width:65%">
|
||||
<el-tooltip placement="top">
|
||||
<div slot="content">
|
||||
当为包含表时，选择所要精确包含的表名，如果不选则代表选择所有；当为排除表时，选择索要精确排除的表名。
|
||||
@@ -186,7 +188,7 @@
|
||||
label-width="120px"
|
||||
:required=true
|
||||
prop="targetConnectionId"
|
||||
style="width:85%">
|
||||
style="width:65%">
|
||||
<el-select v-model="createform.targetConnectionId"
|
||||
@change="selectChangedTargetConnection"
|
||||
placeholder="请选择">
|
||||
@@ -211,15 +213,29 @@
|
||||
</el-form-item>
|
||||
<el-form-item label="目的端表名前缀"
|
||||
label-width="120px"
|
||||
style="width:85%">
|
||||
style="width:65%">
|
||||
<el-tooltip placement="top">
|
||||
<div slot="content">
|
||||
目的端表增加的前缀，例如: DEST_，因某些数据库有表名字符长度限制(如Oracle为32个字符)，该参数不宜过长
|
||||
</div>
|
||||
<i class="el-icon-question"></i>
|
||||
</el-tooltip>
|
||||
<el-input v-model="createform.tablePrefix"
|
||||
:maxlength="12"
|
||||
style="width:50%"
|
||||
auto-complete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="数据批次大小"
|
||||
label-width="120px"
|
||||
:required=true
|
||||
prop="batchSize"
|
||||
style="width:85%">
|
||||
style="width:65%">
|
||||
<el-tooltip placement="top">
|
||||
<div slot="content">
|
||||
数据同步时单个批次处理的行记录总数，该值越到越占用内存空间。建议：小字段表设置为10000，大字段表设置为1000
|
||||
</div>
|
||||
<i class="el-icon-question"></i>
|
||||
</el-tooltip>
|
||||
<el-select v-model="createform.batchSize">
|
||||
<el-option label=1000
|
||||
:value=1000></el-option>
|
||||
@@ -251,13 +267,13 @@
|
||||
label-width="120px"
|
||||
:required=true
|
||||
prop="name"
|
||||
style="width:85%">
|
||||
style="width:65%">
|
||||
<el-input v-model="updateform.name"
|
||||
auto-complete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="描述"
|
||||
label-width="120px"
|
||||
style="width:85%">
|
||||
style="width:65%">
|
||||
<el-input v-model="updateform.description"
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
@@ -267,7 +283,7 @@
|
||||
label-width="120px"
|
||||
:required=true
|
||||
prop="scheduleMode"
|
||||
style="width:85%">
|
||||
style="width:65%">
|
||||
<el-select v-model="updateform.scheduleMode">
|
||||
<el-option label="手动调度"
|
||||
value="MANUAL"></el-option>
|
||||
@@ -277,17 +293,17 @@
|
||||
</el-form-item>
|
||||
<el-form-item label="Cron表达式"
|
||||
label-width="120px"
|
||||
style="width:85%"
|
||||
style="width:65%"
|
||||
v-if="updateform.scheduleMode=='SYSTEM_SCHEDULED'">
|
||||
<el-col :span="8">
|
||||
<el-col :span="10">
|
||||
<el-popover v-model="cronPopover">
|
||||
<vueCron @change="changeUpdateCronExpression"
|
||||
@close="cronPopover=false"
|
||||
i18n="cn" />
|
||||
<el-input slot="reference"
|
||||
disabled="true"
|
||||
:disabled=false
|
||||
v-model="updateform.cronExpression"
|
||||
placeholder="定时策略"
|
||||
placeholder="点击选择"
|
||||
@click="cronPopover=true" />
|
||||
</el-popover>
|
||||
</el-col>
|
||||
@@ -296,7 +312,7 @@
|
||||
label-width="120px"
|
||||
:required=true
|
||||
prop="sourceConnectionId"
|
||||
style="width:85%">
|
||||
style="width:65%">
|
||||
<el-select v-model="updateform.sourceConnectionId"
|
||||
@change="selectChangedSourceConnection"
|
||||
placeholder="请选择">
|
||||
@@ -337,7 +353,7 @@
|
||||
label-width="120px"
|
||||
:required=false
|
||||
prop="sourceTables"
|
||||
style="width:85%">
|
||||
style="width:65%">
|
||||
<el-tooltip placement="top">
|
||||
<div slot="content">
|
||||
当为包含表时，选择所要精确包含的表名，如果不选则代表选择所有；当为排除表时，选择索要精确排除的表名。
|
||||
@@ -357,7 +373,7 @@
|
||||
label-width="120px"
|
||||
:required=true
|
||||
prop="targetConnectionId"
|
||||
style="width:85%">
|
||||
style="width:65%">
|
||||
<el-select v-model="updateform.targetConnectionId"
|
||||
@change="selectChangedTargetConnection"
|
||||
placeholder="请选择">
|
||||
@@ -382,15 +398,29 @@
|
||||
</el-form-item>
|
||||
<el-form-item label="目的端表名前缀"
|
||||
label-width="120px"
|
||||
style="width:85%">
|
||||
style="width:65%">
|
||||
<el-tooltip placement="top">
|
||||
<div slot="content">
|
||||
目的端表增加的前缀，例如: DEST_，因某些数据库有表名字符长度限制(如Oracle为32个字符)，该参数不宜过长
|
||||
</div>
|
||||
<i class="el-icon-question"></i>
|
||||
</el-tooltip>
|
||||
<el-input v-model="updateform.tablePrefix"
|
||||
:maxlength="12"
|
||||
style="width:50%"
|
||||
auto-complete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="数据批次大小"
|
||||
label-width="120px"
|
||||
:required=true
|
||||
prop="batchSize"
|
||||
style="width:85%">
|
||||
style="width:65%">
|
||||
<el-tooltip placement="top">
|
||||
<div slot="content">
|
||||
数据同步时单个批次处理的行记录总数，该值越到越占用内存空间。建议：小字段表设置为10000，大字段表设置为1000
|
||||
</div>
|
||||
<i class="el-icon-question"></i>
|
||||
</el-tooltip>
|
||||
<el-select v-model="updateform.batchSize">
|
||||
<el-option label=1000
|
||||
:value=1000></el-option>
|
||||
@@ -564,6 +594,40 @@ export default {
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
clearAndReset: function () {
|
||||
this.cronPopover = false;
|
||||
this.createform = {
|
||||
name: "",
|
||||
description: "",
|
||||
scheduleMode: "MANUAL",
|
||||
cronExpression: "",
|
||||
sourceConnectionId: 0,
|
||||
sourceSchema: "",
|
||||
includeOrExclude: "",
|
||||
sourceTables: [],
|
||||
tablePrefix: "",
|
||||
targetConnectionId: 0,
|
||||
targetDropTable: true,
|
||||
targetSchema: "",
|
||||
batchSize: 5000
|
||||
};
|
||||
this.updateform = {
|
||||
id: 0,
|
||||
name: "",
|
||||
description: "",
|
||||
scheduleMode: "MANUAL",
|
||||
cronExpression: "",
|
||||
sourceConnectionId: 0,
|
||||
sourceSchema: "",
|
||||
includeOrExclude: "",
|
||||
sourceTables: [],
|
||||
tablePrefix: "",
|
||||
targetConnectionId: 0,
|
||||
targetDropTable: true,
|
||||
targetSchema: "",
|
||||
batchSize: 5000
|
||||
}
|
||||
},
|
||||
loadData: function () {
|
||||
this.$http({
|
||||
method: "GET",
|
||||
@@ -707,6 +771,7 @@ export default {
|
||||
this.$message("添加任务成功");
|
||||
this.createform = {};
|
||||
this.loadData();
|
||||
this.clearAndReset();
|
||||
} else {
|
||||
alert("添加任务失败:" + res.data.message);
|
||||
}
|
||||
@@ -749,6 +814,7 @@ export default {
|
||||
this.$message("修改任务成功");
|
||||
this.updateformform = {};
|
||||
this.loadData();
|
||||
this.clearAndReset();
|
||||
} else {
|
||||
alert("修改任务失败," + res.data.message);
|
||||
}
|
||||
@@ -896,4 +962,11 @@ export default {
|
||||
margin-bottom: 0;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.el-input.is-disabled .el-input__inner {
|
||||
background-color: #f5f7fa;
|
||||
border-color: #e4e7ed;
|
||||
color: #c0c4cc;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -2,19 +2,29 @@
|
||||
<div>
|
||||
<el-card>
|
||||
<div class="container">
|
||||
<el-card class="box-card">
|
||||
<div slot="header"
|
||||
class="clearfix">
|
||||
<span>任务安排列表</span>
|
||||
</div>
|
||||
<div class="navsBox">
|
||||
<ul>
|
||||
<li v-for="(item,index) in allTaskAssignments"
|
||||
:key="index"
|
||||
@click="handleChooseClick(item.id,index)"
|
||||
:class="{active:index==isActive}">[{{item.id}}]{{item.name}}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<div class="navsBox">
|
||||
<ul>
|
||||
<li v-for="(item,index) in allTaskAssignments"
|
||||
:key="index"
|
||||
@click="handleChooseClick(item.id,index)"
|
||||
:class="{active:index==isActive}">[{{item.id}}]{{item.name}}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="contentBox">
|
||||
<el-table :data="jobTableData"
|
||||
<el-table :header-cell-style="{background:'#eef1f6',color:'#606266'}"
|
||||
:data="jobTableData"
|
||||
size="small"
|
||||
border>
|
||||
<template slot="empty">
|
||||
<span>单击左侧任务列表记录来查看作业调度记录</span>
|
||||
</template>
|
||||
<el-table-column type="expand">
|
||||
<template slot-scope="props">
|
||||
<el-form label-position="left"
|
||||
@@ -209,11 +219,19 @@ export default {
|
||||
}
|
||||
|
||||
.container > * {
|
||||
float: left; /* 水平排列 */
|
||||
float: left; /* 水平排列 */
|
||||
}
|
||||
|
||||
.container .navsBox {
|
||||
background: #f2f2f2;
|
||||
.container .el-card {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.container .el-card__header {
|
||||
padding: 8px 10px;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.container .navsBox ul {
|
||||
@@ -229,7 +247,7 @@ export default {
|
||||
cursor: pointer; /*鼠标悬停变小手*/
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
width: 250px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.container .navsBox .active {
|
||||
|
||||
Reference in New Issue
Block a user