diff --git a/server/public/favicon.ico b/server/public/favicon.ico index 2a21c8c..582308e 100644 Binary files a/server/public/favicon.ico and b/server/public/favicon.ico differ diff --git a/server/src/App.vue b/server/src/App.vue index ec9032c..4953bb1 100644 --- a/server/src/App.vue +++ b/server/src/App.vue @@ -6,6 +6,10 @@ diff --git a/server/src/components/Hamburger/index.vue b/server/src/components/Hamburger/index.vue index ccdcff7..d870a9d 100644 --- a/server/src/components/Hamburger/index.vue +++ b/server/src/components/Hamburger/index.vue @@ -3,14 +3,20 @@ - + /> --> + diff --git a/server/src/components/HeaderSearch/index.vue b/server/src/components/HeaderSearch/index.vue index 62e83a3..b13c057 100644 --- a/server/src/components/HeaderSearch/index.vue +++ b/server/src/components/HeaderSearch/index.vue @@ -1,6 +1,6 @@ @@ -54,3 +64,31 @@ export default { } } + diff --git a/server/src/main.js b/server/src/main.js index 7c34066..39ba5a3 100644 --- a/server/src/main.js +++ b/server/src/main.js @@ -2,11 +2,10 @@ import Vue from 'vue' import Clipboard from 'v-clipboard' import Cookies from 'js-cookie' -import 'normalize.css/normalize.css' // a modern alternative to CSS resets - +// import 'normalize.css/normalize.css' // a modern alternative to CSS resets import Element from 'element-ui' -import './styles/element-variables.scss' - +// import './styles/element-variables.scss' +// import 'element-ui/lib/theme-chalk/index.css' import '@/styles/index.scss' // global css import App from './App' @@ -35,7 +34,7 @@ if (process.env.NODE_ENV === 'production') { Vue.use(Clipboard) Vue.use(Element, { - size: localStorage.getItem('size') || 'mini', // set element-ui default size + size: localStorage.getItem('size') || 'small', // set element-ui default size i18n: (key, value) => i18n.t(key, value) }) diff --git a/server/src/router/index.js b/server/src/router/index.js index a070d61..e2c2112 100644 --- a/server/src/router/index.js +++ b/server/src/router/index.js @@ -85,19 +85,19 @@ export const constantRoutes = [ path: '/', component: Layout, redirect: '/index', - meta: { title: 'browser', icon: 'international' }, + meta: { title: 'browser', icon: 'globe-americas' }, children: [ { path: 'index', component: require('@/views/browser/index').default, name: 'Browser', - meta: { title: 'browser_list', icon: 'list', affix: true } + meta: { title: 'browser_list', icon: 'list-ul', affix: true } }, { path: 'group', component: require('@/views/browser/group').default, name: 'Group', - meta: { title: 'group', icon: 'tab', affix: true } + meta: { title: 'group', icon: 'collection-fill', affix: true } } ] } diff --git a/server/src/styles/element-ui.scss b/server/src/styles/element-ui.scss index 49474de..b069cc4 100644 --- a/server/src/styles/element-ui.scss +++ b/server/src/styles/element-ui.scss @@ -1,4 +1,105 @@ +@import './element-variables.scss'; +@import '~element-ui/packages/theme-chalk/src/index'; + // cover some element-ui styles +// 统一主题圆角尺寸 +.el-popover { + border-radius: $--border-radius-base; +} +.el-menu--popup { + border-radius: $--border-radius-base; + padding: 0 0 5px 0; +} +.el-menu-item { + height: 38px; + line-height: 38px; + margin: 5px 5px 0 5px; + border-radius: $--border-radius-small; +} +// 带边框的表格第一列居中 +.el-table--border th:first-child .cell, +.el-table--border td:first-child .cell { + padding-right: 10px; +} +// 统一small字体大小为13px +.el-table--small { + font-size: 13px; +} +// 修改primary按钮背景 +.el-button--primary { + background: linear-gradient(180deg, $--color-primary 0%, $--color-primary-light-1 100%); + &:hover, + &:focus { + // background: $--color-primary-light-2; + background: linear-gradient(180deg, $--color-primary-light-1 0%, $--color-primary-light-2 100%); + } +} +// 调整el-select样式 +.el-select-dropdown__item { + margin: 0 6px; + border-radius: 5px; +} +.emphasize-medium { + .el-select-dropdown__item { + height: 30px; + line-height: 30px; + padding: 0 17px; + font-size: 14px; + } +} +.emphasize-small { + .el-select-dropdown__item { + height: 27px; + line-height: 27px; + padding: 0 15px; + font-size: 13px; + } +} +.emphasize-mini { + .el-select-dropdown__list { + padding: 3px 0; + } + .el-select-dropdown__item { + height: 24px; + line-height: 24px; + padding: 0 10px; + font-size: 12px; + margin: 0 3px; + } +} +// checkbox边框加粗 +// 圆角调整 +.el-checkbox__inner { + border-width: 2px; + border-radius: 5px; +} +// 调整el-dropdown样式 +.el-dropdown-menu__item { + margin: 0 8px; + border-radius: 5px; +} + +.el-dropdown-menu--medium { + .el-dropdown-menu__item { + margin: 0 6px; + } +} + +.el-dropdown-menu--small { + .el-dropdown-menu__item { + margin: 0 6px; + } +} + +.el-dropdown-menu--mini { + .el-dropdown-menu__item { + margin: 0 3px; + } +} + +.el-message-box { + border-radius: 9px; +} .el-breadcrumb__inner, .el-breadcrumb__inner a { @@ -6,7 +107,7 @@ } .el-upload { - input[type="file"] { + input[type='file'] { display: none !important; } } @@ -48,6 +149,7 @@ // to fixed https://github.com/ElemeFE/element/issues/2461 .el-dialog { + border-radius: 9px; transform: none; left: 0; position: relative; @@ -69,7 +171,7 @@ // dropdown .el-dropdown-menu { a { - display: block + display: block; } } diff --git a/server/src/styles/element-variables.scss b/server/src/styles/element-variables.scss index 4e5f210..1d7387d 100644 --- a/server/src/styles/element-variables.scss +++ b/server/src/styles/element-variables.scss @@ -4,16 +4,24 @@ **/ /* theme color */ -$--color-primary: #2ea000; //#1890ff; -$--color-success: #13ce66; +// $--color-primary: #2ea000; //#1890ff; +// $--color-success: #13ce66; +// $--color-warning: #ffba00; +// $--color-danger: #ff4949; +$--color-primary: #1677ff; //#1890ff; +$--color-success: #3ec487; $--color-warning: #ffba00; -$--color-danger: #ff4949; +$--color-danger: #f03a5f; +$--color-info: #597b98; // $--color-info: #1E1E1E; +// 修改hover背景颜色 +$--background-color-base: #e4eeff; $--button-font-weight: 400; // $--color-text-regular: #1f2d3d; +$--border-color-base: #d9d9d9; $--border-color-light: #dfe4ed; $--border-color-lighter: #e6ebf5; @@ -22,7 +30,32 @@ $--table-border: 1px solid #dfe6ec; /* icon font path, required */ $--font-path: '~element-ui/lib/theme-chalk/fonts'; -@import '~element-ui/packages/theme-chalk/src/index'; +// 统一small字体大小为13px +$--button-small-font-size: 13px; + +// 默认字体颜色 +$--color-text-regular: rgba(0, 0, 0, 0.88); +$--color-text-secondary: #1a1a1a; +$--color-text-placeholder: #c0c4cc; + +/// borderRadius|1|Radius|0 +$--border-radius-base: 8px !default; +/// borderRadius|1|Radius|0 +$--border-radius-small: 6px !default; +/// borderRadius|1|Radius|0 +$--border-radius-circle: 100% !default; +/// borderRadius|1|Radius|0 +$--border-radius-zero: 0 !default; + +// Box-shadow +/// boxShadow|1|Shadow|1 +$--box-shadow-base: 0 0px 10px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04) !default; +// boxShadow|1|Shadow|1 +$--box-shadow-dark: 0 0px 10px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.12) !default; +/// boxShadow|1|Shadow|1 +$--box-shadow-light: 0 0px 12px 0 rgba(0, 0, 0, 0.1) !default; + +// @import '~element-ui/packages/theme-chalk/src/index'; // the :export directive is the magic sauce for webpack // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass diff --git a/server/src/styles/index.scss b/server/src/styles/index.scss index 8f9f761..19d0105 100644 --- a/server/src/styles/index.scss +++ b/server/src/styles/index.scss @@ -1,17 +1,18 @@ +@import './element-ui.scss'; @import './variables.scss'; @import './mixin.scss'; @import './transition.scss'; -@import './element-ui.scss'; @import './sidebar.scss'; @import './btn.scss'; body { + margin: 0; height: 100%; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; - font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, - sans-serif; + font-family: system-ui, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, + Arial, sans-serif; } label { @@ -123,6 +124,10 @@ aside { //main-container全局样式 .app-container { + height: calc(100vh - 50px); + display: flex; + flex-direction: column; + overflow: auto; padding: 20px; } @@ -211,5 +216,5 @@ aside { .el-message-box__message p { word-wrap: break-word; - margin-bottom: .2em; + margin-bottom: 0.2em; } diff --git a/server/src/styles/sidebar.scss b/server/src/styles/sidebar.scss index 94760cc..0f769fc 100644 --- a/server/src/styles/sidebar.scss +++ b/server/src/styles/sidebar.scss @@ -1,13 +1,13 @@ #app { - .main-container { min-height: 100%; - transition: margin-left .28s; + transition: margin-left 0.28s; margin-left: $sideBarWidth; position: relative; } .sidebar-container { + border-right: 1px solid #f0f0f0; transition: width 0.28s; width: $sideBarWidth !important; background-color: $menuBg; @@ -39,7 +39,7 @@ &.has-logo { .el-scrollbar { - height: calc(100% - 50px); + height: calc(100% - 130px); } } @@ -71,33 +71,43 @@ // menu hover .submenu-title-noDropdown, .el-submenu__title { + margin: 5px 5px 0 5px; + height: 40px; + line-height: 40px; + border-radius: 6px; &:hover { background-color: $menuHover !important; } } - .is-active>.el-submenu__title { + .is-active > .el-submenu__title { color: $subMenuActiveText !important; + background-color: $subMenuHover !important; } - & .nest-menu .el-submenu>.el-submenu__title, + & .nest-menu .el-submenu > .el-submenu__title, & .el-submenu .el-menu-item { - min-width: $sideBarWidth !important; + min-width: $sideBarWidth - 10px !important; background-color: $subMenuBg !important; + height: 38px; + line-height: 38px; &:hover { background-color: $subMenuHover !important; } + &.is-active { + background-color: $subMenuHover !important; + } } } .hideSidebar { .sidebar-container { - width: 54px !important; + width: 66px !important; } .main-container { - margin-left: 54px; + margin-left: 66px; } .submenu-title-noDropdown { @@ -120,7 +130,9 @@ .el-submenu { overflow: hidden; - &>.el-submenu__title { + & > .el-submenu__title { + margin: 6px 6px 0 6px; + border-radius: 8px; padding: 0 !important; .svg-icon { @@ -139,8 +151,8 @@ .el-menu--collapse { .el-submenu { - &>.el-submenu__title { - &>span { + & > .el-submenu__title { + & > span { height: 0; width: 0; overflow: hidden; @@ -163,7 +175,7 @@ } .sidebar-container { - transition: transform .28s; + transition: transform 0.28s; width: $sideBarWidth !important; } @@ -177,7 +189,6 @@ } .withoutAnimation { - .main-container, .sidebar-container { transition: none; @@ -187,7 +198,7 @@ // when menu collapsed .el-menu--vertical { - &>.el-menu { + & > .el-menu { .svg-icon { margin-right: 16px; } @@ -197,7 +208,7 @@ } } - .nest-menu .el-submenu>.el-submenu__title, + .nest-menu .el-submenu > .el-submenu__title, .el-menu-item { &:hover { // you can use $subMenuHover @@ -206,7 +217,7 @@ } // the scroll bar appears when the subMenu is too long - >.el-menu--popup { + > .el-menu--popup { max-height: 100vh; overflow-y: auto; diff --git a/server/src/styles/variables.scss b/server/src/styles/variables.scss index a19c27c..8893f29 100644 --- a/server/src/styles/variables.scss +++ b/server/src/styles/variables.scss @@ -1,23 +1,23 @@ // base color -$blue:#324157; -$light-blue:#3A71A8; -$red:#C03639; -$pink: #E65D6E; -$green: #30B08F; -$tiffany: #4AB7BD; -$yellow:#FEC171; -$panGreen: #30B08F; +$blue: #324157; +$light-blue: #3a71a8; +$red: #c03639; +$pink: #e65d6e; +$green: #30b08f; +$tiffany: #4ab7bd; +$yellow: #fec171; +$panGreen: #30b08f; // sidebar -$menuText:#bfcbd9; -$menuActiveText:#409EFF; -$subMenuActiveText:#f4f4f5; // https://github.com/ElemeFE/element/issues/12951 +$menuText: #1b1b1b; +$menuActiveText: #1677ff; +$subMenuActiveText: #1677ff; // https://github.com/ElemeFE/element/issues/12951 -$menuBg:#304156; -$menuHover:#263445; +$menuBg: #ffffff; +$menuHover: #e6f4ff; -$subMenuBg:#1f2d3d; -$subMenuHover:#001528; +$subMenuBg: #ffffff; +$subMenuHover: #e6f4ff; $sideBarWidth: 210px; diff --git a/server/src/views/browser/group.vue b/server/src/views/browser/group.vue index 6ce8d32..7b2cbbf 100644 --- a/server/src/views/browser/group.vue +++ b/server/src/views/browser/group.vue @@ -1,34 +1,35 @@ - + - +