diff --git a/.env b/.env index 51d5db519a58a2e49d6822314ae3ab0cd6308151..fdd62d5cc18a183fd7d5ead2a21c259bc5385288 100644 --- a/.env +++ b/.env @@ -2,7 +2,7 @@ VITE_PORT = 3100 # spa-title -VITE_GLOB_APP_TITLE = Vben Admin 2.0 +VITE_GLOB_APP_TITLE = Vben Admin # spa shortname VITE_GLOB_APP_SHORT_NAME = vue_vben_admin_2x diff --git a/CHANGELOG.zh_CN.md b/CHANGELOG.zh_CN.md index 62a1be5ffd1bbf927d0f3439a0bec58aeab21db9..f8d8e881b698fdce06b2b0a9366efad33a983ca3 100644 --- a/CHANGELOG.zh_CN.md +++ b/CHANGELOG.zh_CN.md @@ -1,3 +1,13 @@ +## Wip + +### ⚡ Performance Improvements + +- Layout 界面布局样式调整 + +### 🐛 Bug Fixes + +- 修复表格类型错误 + ## 2.0.0-rc.7 (2020-10-31) ### ✨ Features diff --git a/src/assets/images/logo.png b/src/assets/images/logo.png index 6977038cfa560f6ff882af845bf4dec4559d2e0e..16f2e7ab7c74552c5653652547ebce7adc4901dc 100644 Binary files a/src/assets/images/logo.png and b/src/assets/images/logo.png differ diff --git a/src/components/Breadcrumb/Breadcrumb.vue b/src/components/Breadcrumb/Breadcrumb.vue index f57849fd544902a861337381a3a22d8ecc252e96..b37bd0432048be73d58776f7bd786b987ebb4a69 100644 --- a/src/components/Breadcrumb/Breadcrumb.vue +++ b/src/components/Breadcrumb/Breadcrumb.vue @@ -37,7 +37,7 @@ .breadcrumb { height: @header-height; padding-right: 20px; - font-size: 12px; + font-size: 14px; line-height: @header-height; // line-height: 1; diff --git a/src/components/Menu/src/BasicMenu.tsx b/src/components/Menu/src/BasicMenu.tsx index d4d1047b42c035b84502e6101ee5c87691bd9d85..030ebe9bc98201f3c70bb1fc5286d471a011b136 100644 --- a/src/components/Menu/src/BasicMenu.tsx +++ b/src/components/Menu/src/BasicMenu.tsx @@ -66,7 +66,7 @@ export default defineComponent({ offset += 54; } return { - height: `calc(100% - ${offset - 30}px)`, + height: `calc(100% - ${offset - 38}px)`, position: 'relative', overflow: 'auto', }; @@ -147,6 +147,7 @@ export default defineComponent({ } const showTitle = computed(() => { + if (props.isTop) return true; if (!props.isAppMenu) return true; if (!props.collapsedShowTitle) { return !menuStore.getCollapsedState; @@ -247,7 +248,6 @@ export default defineComponent({ return () => { const { getCollapsedState } = menuStore; const { mode } = props; - return mode === MenuModeEnum.HORIZONTAL ? ( renderMenu() ) : ( diff --git a/src/components/Menu/src/SearchInput.vue b/src/components/Menu/src/SearchInput.vue index 7c504fe75ba5d86e7940fa44bf083a56a3961edb..2a2424b11546db7d9cf348604e05718537ecab75 100644 --- a/src/components/Menu/src/SearchInput.vue +++ b/src/components/Menu/src/SearchInput.vue @@ -94,7 +94,7 @@ .ant-input { color: @text-color-base; background: #fff; - border: 0; + // border: 0; outline: none; &:hover, diff --git a/src/components/Menu/src/index.less b/src/components/Menu/src/index.less index 7e57fd056343fd6c38b4216e4da89abda182c419..c1c3e789cb0dfb9285603ab9e1f63a3d6581d116 100644 --- a/src/components/Menu/src/index.less +++ b/src/components/Menu/src/index.less @@ -4,7 +4,7 @@ color: @white; background: linear-gradient( 118deg, - rgba(@primary-color, 0.7), + rgba(@primary-color, 0.8), rgba(@primary-color, 1) ) !important; border-radius: 2px; @@ -32,6 +32,7 @@ font-size: 12px; flex-direction: column; line-height: 24px; + align-items: center; } & > li[role='menuitem']:not(.ant-menu-submenu) { @@ -93,6 +94,8 @@ } &-bg__sidebar-hor { + overflow: hidden; + &.ant-menu-horizontal { display: flex; border: 0; @@ -105,23 +108,16 @@ &.ant-menu-light { .ant-menu-item { &.basic-menu-item__level1 { - height: 38px; - line-height: 38px; + height: @header-height; + line-height: @header-height; } } - .ant-menu-item:hover, .ant-menu-submenu:hover, - .ant-menu-item-active, - .ant-menu-submenu-active, .ant-menu-item-open, .ant-menu-submenu-open, .ant-menu-item-selected, - .ant-menu-submenu-selected { - color: @primary-color !important; - border-bottom: 3px solid @primary-color; - } - + .ant-menu-submenu-selected, .ant-menu-item:hover, .ant-menu-item-active, .ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open, @@ -261,10 +257,13 @@ } &.ant-menu-light { + overflow-x: hidden; + border-right: none; + .basic-menu-item__level1 { &.top-active-menu { color: @primary-color; - border-bottom: 6px solid @primary-color; + border-bottom: 3px solid @primary-color; } } @@ -306,16 +305,9 @@ } &-light { - border-right: 1px solid rgba(221, 221, 221, 0.6); - .ant-layout-sider-trigger { color: @text-color-base; - background: @trigger-light-bg-color; - - &:hover { - color: @text-color-base; - background: @trigger-light-hover-bg-color; - } + border-top: 1px solid @border-color-light; } } } diff --git a/src/components/Menu/src/props.ts b/src/components/Menu/src/props.ts index 60193c9ae26e480a33248129444cbafe667840cb..ad28f487ec95e2b3459fe74408281e6216403a0e 100644 --- a/src/components/Menu/src/props.ts +++ b/src/components/Menu/src/props.ts @@ -54,6 +54,10 @@ export const basicProps = { type: Boolean as PropType, default: true, }, + isTop: { + type: Boolean as PropType, + default: false, + }, beforeClickFn: { type: Function as PropType, default: null, diff --git a/src/design/ant/index.less b/src/design/ant/index.less index 17e24c190ea517c71dc84eea31d902724069eb0a..8f4bf94f061774d3fe48e02769f0807082e82552 100644 --- a/src/design/ant/index.less +++ b/src/design/ant/index.less @@ -2,10 +2,15 @@ @import './input.less'; @import './btn.less'; +// TODO beta.11 fix .ant-col { width: 100%; } +// .ant-form-item-label { +// text-align: unset; +// } + // ================================= // ==============descriptions======= // ================================= diff --git a/src/design/index.less b/src/design/index.less index 542632b4de48f8020e773131b2f11b8602da992a..166a5e5098e45d56c7e2dd2b7e3bcb693efc292a 100644 --- a/src/design/index.less +++ b/src/design/index.less @@ -36,7 +36,8 @@ input::-ms-reveal { } body { - font-family: 'Microsoft YaHei,微软雅黑,Arial,sans-serif,Helvetica Neue,Helvetica,Pingfang SC,Hiragino Sans GB'; + // font-family: 'Microsoft YaHei,微软雅黑,Arial,sans-serif,Helvetica Neue,Helvetica,Pingfang SC,Hiragino Sans GB'; + font-family: '-apple-system,BlinkMacSystemFont,segoe ui,Roboto,helvetica neue,Arial,noto sans,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol,noto color emoji'; font-style: normal; font-weight: normal; line-height: 1.428571429; // 20/14 @@ -149,7 +150,7 @@ object { } .ant-layout { - background: #f1f1f6; + background: #f0f2f5; &-content { position: relative; diff --git a/src/design/public.less b/src/design/public.less index cb8ab901cdebe791980218887b9b7d5b6d2f6a94..2bcaa9f2f78030bef9cc2066e671a1c7cc03bada 100644 --- a/src/design/public.less +++ b/src/design/public.less @@ -5,11 +5,11 @@ } // TODO 滚动条样式-待修改 -::-webkit-scrollbar-track { - // background: rgba(0, 0, 0, 0.06); - // border-radius: 2px; - // box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.05); -} +// ::-webkit-scrollbar-track { +// // background: rgba(0, 0, 0, 0.06); +// // border-radius: 2px; +// // box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.05); +// } /* 滚动条滑块 */ ::-webkit-scrollbar-thumb { diff --git a/src/design/var/index.less b/src/design/var/index.less index a9736c911d87b0940bfbe0f5cf341b6bf3ed391e..48029ce7ca732a19c6f2d7f8f35fd5f36537dba9 100644 --- a/src/design/var/index.less +++ b/src/design/var/index.less @@ -3,13 +3,13 @@ @import 'breakpoint'; // tabs -@multiple-height: 36px; +@multiple-height: 30px; // headers -@header-height: 36px; +@header-height: 46px; // logo width -@logo-width: 40px; +@logo-width: 36px; // @sider-drag-z-index: 200; @@ -18,4 +18,4 @@ // app menu // left-menu -@app-menu-item-height: 44px; +@app-menu-item-height: 42px; diff --git a/src/layouts/Logo.vue b/src/layouts/Logo.vue index f2b133ed67fd88b3bb3f4898b9f68212053ec55c..de506c1bb845841b9a4fcf40546dc38ece09e86e 100644 --- a/src/layouts/Logo.vue +++ b/src/layouts/Logo.vue @@ -1,18 +1,23 @@ diff --git a/src/settings/projectSetting.ts b/src/settings/projectSetting.ts index e5f19efa371daa233c3dbe80fe3e50d097bf1830..9e0d9a589c25492056e8c9fe3741658adcd5aad2 100644 --- a/src/settings/projectSetting.ts +++ b/src/settings/projectSetting.ts @@ -55,7 +55,7 @@ const setting: ProjectConfig = { // 是否显示搜索框 showSearch: true, // 菜单宽度 - menuWidth: 180, + menuWidth: 200, // 菜单模式 mode: MenuModeEnum.INLINE, // 菜单类型 @@ -65,7 +65,7 @@ const setting: ProjectConfig = { // 分割菜单 split: false, // 顶部菜单布局 - topMenuAlign: 'start', + topMenuAlign: 'center', }, // 消息配置 messageSetting: { @@ -83,7 +83,7 @@ const setting: ProjectConfig = { // 开启快速操作 showQuick: true, // 显示icon - showIcon: true, + showIcon: false, // 标签页缓存最大数量 max: 12, },