diff --git a/index.html b/index.html
index b8d6c2d..ec9c1ea 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,10 @@
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="renderer" content="webkit" />
- <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+ <meta
+ name="viewport"
+ content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"
+ />
<title>%VITE_GLOB_APP_TITLE%</title>
<link rel="icon" href="/favicon.ico" />
</head>
@@ -69,7 +72,8 @@
.app-loading .app-loading-logo {
display: block;
width: 90px;
- margin: 0 auto 20px;
+ margin: 0 auto;
+ margin-bottom: 20px;
}
.dot {
diff --git a/src/components/Application/src/search/AppSearchModal.vue b/src/components/Application/src/search/AppSearchModal.vue
index c1bcd4a..5f66b9a 100644
--- a/src/components/Application/src/search/AppSearchModal.vue
+++ b/src/components/Application/src/search/AppSearchModal.vue
@@ -221,7 +221,7 @@ function handleClose() {
padding-left: 14px;
margin-top: 8px;
font-size: 14px;
- color: @text-color-base;
+ // color: @text-color-base;
cursor: pointer;
background-color: var(--component-background);
border-radius: 4px;
diff --git a/src/components/Basic/src/BasicHelp.vue b/src/components/Basic/src/BasicHelp.vue
index 6552622..06c9450 100644
--- a/src/components/Basic/src/BasicHelp.vue
+++ b/src/components/Basic/src/BasicHelp.vue
@@ -96,7 +96,6 @@ export default defineComponent({
display: inline-block;
margin-left: 6px;
font-size: 14px;
- color: @text-color-help-dark;
cursor: pointer;
&__wrap {
diff --git a/src/components/Basic/src/BasicTitle.vue b/src/components/Basic/src/BasicTitle.vue
index 9ecf192..7d9c5ee 100644
--- a/src/components/Basic/src/BasicTitle.vue
+++ b/src/components/Basic/src/BasicTitle.vue
@@ -50,7 +50,6 @@ const getClass = computed(() => [
font-size: 16px;
font-weight: 500;
line-height: 24px;
- // color: @text-color-base;
cursor: pointer;
user-select: none;
diff --git a/src/components/ContextMenu/src/ContextMenu.vue b/src/components/ContextMenu/src/ContextMenu.vue
index 3f7daf9..2edb2c3 100644
--- a/src/components/ContextMenu/src/ContextMenu.vue
+++ b/src/components/ContextMenu/src/ContextMenu.vue
@@ -159,7 +159,7 @@ export default defineComponent({
}
&:not(.ant-menu-item-disabled):hover {
- color: @text-color-base;
+ color: @text-color;
background-color: @item-hover-bg;
}
}
diff --git a/src/components/Page/src/PageWrapper.vue b/src/components/Page/src/PageWrapper.vue
index 357c3cc..ff0a7ca 100644
--- a/src/components/Page/src/PageWrapper.vue
+++ b/src/components/Page/src/PageWrapper.vue
@@ -109,7 +109,14 @@ watch(
<template>
<div ref="wrapperRef" :class="getClass">
- <PageHeader v-if="getShowHeader" v-bind="omit($attrs, 'class')" ref="headerRef" :ghost="ghost" :title="title">
+ <PageHeader
+ v-if="getShowHeader"
+ v-bind="omit($attrs, 'class')"
+ ref="headerRef"
+ style="margin: 1rem; border-radius: 1rem;"
+ :ghost="ghost"
+ :title="title"
+ >
<template #default>
<template v-if="content">
{{ content }}
@@ -143,12 +150,14 @@ watch(
position: relative;
.@{prefix-cls}-content {
- margin: 12px;
+ margin: 1rem;
+ border-radius: 1rem;
}
.ant-page-header {
&:empty {
- padding: 0;
+ margin: 1rem;
+ border-radius: 1rem;
}
}
diff --git a/src/components/SimpleMenu/src/components/menu.less b/src/components/SimpleMenu/src/components/menu.less
index 76635b9..2533df3 100644
--- a/src/components/SimpleMenu/src/components/menu.less
+++ b/src/components/SimpleMenu/src/components/menu.less
@@ -68,7 +68,7 @@
&-light {
.@{menu-prefix-cls}-item,
.@{menu-prefix-cls}-submenu-title {
- color: @text-color-base;
+ color: @text-color;
&-selected {
z-index: 2;
@@ -88,7 +88,7 @@
padding: 0;
margin: 0;
font-size: @font-size-base;
- color: @text-color-base;
+ color: @text-color;
list-style: none;
outline: none;
diff --git a/src/design/color.less b/src/design/color.less
index b8b125f..4c376bb 100644
--- a/src/design/color.less
+++ b/src/design/color.less
@@ -18,15 +18,7 @@ html {
@content-bg: #f4f7f9;
-@text-color: fade(@black, 85%);
-
-@text-color-secondary: fade(@black, 45%);
-
-@text-color-inverse: @white;
-
-@icon-color: inherit;
-
-@icon-color-hover: fade(@black, 75%);
+@text-color: var(--text-color);
@component-background: #fff;
@@ -49,33 +41,6 @@ html {
// }
@iconify-bg-color: #5551;
-// =================================
-// ==============border-color=======
-// =================================
-@border-color-base: #fff;
-
-// Dark-dark
-@border-color-dark: #b6b7b9;
-
-// Dark-light
-@border-color-shallow-dark: #cececd;
-
-// Light-dark
-@border-color-light: @border-color-base;
-
-// =================================
-// ==============message==============
-// =================================
-
-// success-bg-color
-@success-background-color: #f1f9ec;
-// info-bg-color
-@info-background-color: #e8eff8;
-// warn-bg-color
-@warning-background-color: #fdf6ed;
-// danger-bg-color
-@danger-background-color: #fef0f0;
-
// =================================
// ==============Header=============
// =================================
@@ -100,46 +65,3 @@ html {
// trigger
@trigger-dark-hover-bg-color: rgba(255, 255, 255, 0.2);
@trigger-dark-bg-color: rgba(255, 255, 255, 0.1);
-
-// =================================
-// ==============tree============
-// =================================
-// tree item hover background
-@tree-hover-background-color: #f5f7fa;
-// tree item hover font color
-@tree-hover-font-color: #f5f7fa;
-
-// =================================
-// ==============link============
-// =================================
-// =================================
-// ==============Text color-=============
-// =================================
-
-// Main text color
-@text-color-base: @text-color;
-
-// Label color
-@text-color-call-out: #606266;
-
-// Auxiliary information color-dark
-@text-color-help-dark: #909399;
-
-// =================================
-// ==============breadcrumb=========
-// =================================
-@breadcrumb-item-normal-color: #999;
-// =================================
-// ==============button=============
-// =================================
-
-@button-ghost-color: @white;
-@button-ghost-hover-color: lighten(@white, 10%);
-@button-ghost-hover-bg-color: #e1ebf6;
-@button-ghost-active-color: darken(@white, 10%);
-
-@button-cancel-color: @text-color-call-out;
-
-@button-cancel-bg-color: @white;
-@button-cancel-border-color: @border-color-shallow-dark;
-
diff --git a/src/design/public.less b/src/design/public.less
index 835589e..d4e2c1f 100644
--- a/src/design/public.less
+++ b/src/design/public.less
@@ -21,9 +21,8 @@
}
::-webkit-scrollbar-thumb {
- // background: rgba(0, 0, 0, 0.6);
+ background: rgb(0 0 0 60%);
background-color: rgb(144 147 153 / 30%);
- // background-color: rgba(144, 147, 153, 0.3);
border-radius: 2px;
box-shadow: inset 0 0 6px rgb(0 0 0 / 20%);
}
diff --git a/src/layouts/default/header/components/Breadcrumb.vue b/src/layouts/default/header/components/Breadcrumb.vue
index 4a701fd..6b1d8d8 100644
--- a/src/layouts/default/header/components/Breadcrumb.vue
+++ b/src/layouts/default/header/components/Breadcrumb.vue
@@ -159,7 +159,7 @@ function getIcon(route) {
&--light {
.ant-breadcrumb-link {
- color: @breadcrumb-item-normal-color;
+ color: #999;
a {
color: rgb(0 0 0 / 65%);
@@ -167,7 +167,7 @@ function getIcon(route) {
}
.ant-breadcrumb-separator {
- color: @breadcrumb-item-normal-color;
+ color: #999;
}
}
diff --git a/src/layouts/default/header/components/user-dropdown/index.vue b/src/layouts/default/header/components/user-dropdown/index.vue
index 0cda0ec..05757a7 100644
--- a/src/layouts/default/header/components/user-dropdown/index.vue
+++ b/src/layouts/default/header/components/user-dropdown/index.vue
@@ -137,7 +137,7 @@ function handleMenuClick(e: MenuInfo) {
}
.@{prefix-cls}__name {
- color: @text-color-base;
+ color: @text-color;
}
.@{prefix-cls}__desc {
diff --git a/src/layouts/default/header/index.less b/src/layouts/default/header/index.less
index f5285ee..dc3ace2 100644
--- a/src/layouts/default/header/index.less
+++ b/src/layouts/default/header/index.less
@@ -141,7 +141,7 @@
border-left: 1px solid @header-light-bottom-border-color;
.@{header-prefix-cls}-logo {
- color: @text-color-base;
+ color: @text-color;
&:hover {
background-color: @header-light-bg-hover-color;
@@ -150,7 +150,7 @@
.@{header-prefix-cls}-action {
&__item {
- color: @text-color-base;
+ color: @text-color;
.app-iconify {
padding: 0 10px;
@@ -164,7 +164,7 @@
&-icon,
span[role="img"] {
- color: @text-color-base;
+ color: @text-color;
}
}
}
diff --git a/src/layouts/default/sider/LayoutSider.vue b/src/layouts/default/sider/LayoutSider.vue
index 395d861..2fd2894 100644
--- a/src/layouts/default/sider/LayoutSider.vue
+++ b/src/layouts/default/sider/LayoutSider.vue
@@ -132,7 +132,7 @@ const getTrigger = h(LayoutTrigger)
// box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05);
.ant-layout-sider-trigger {
- color: @text-color-base;
+ color: @text-color;
border-top: 1px solid var(--border-color);
}
}
diff --git a/src/layouts/default/tabs/index.less b/src/layouts/default/tabs/index.less
index 990a9e1..62ea80c 100644
--- a/src/layouts/default/tabs/index.less
+++ b/src/layouts/default/tabs/index.less
@@ -13,7 +13,7 @@
.ant-tabs.ant-tabs-card {
.ant-tabs-nav {
height: @multiple-height;
- padding-left: 10px;
+ // padding-left: 10px;
margin: 0;
background-color: var(--component-background);
border: 0;
@@ -28,7 +28,7 @@
position: relative;
z-index: 1;
height: @multiple-height;
- padding: 0 16px;
+ padding: 0 6px;
margin: 0 -14px 0 0 !important;
line-height: @multiple-height;
color: var(--text-color);
@@ -45,7 +45,7 @@
&:hover {
z-index: 2;
- padding: 0 22px;
+ padding: 0 12px;
.ant-tabs-tab-remove .anticon-close {
opacity: 1;
@@ -85,38 +85,43 @@
}
}
- // > div {
- // display: flex;
- // justify-content: center;
- // align-items: center;
- // }
+ > div {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
svg {
- fill: @text-color-base;
+ fill: @text-color;
}
&:first-child {
- padding: 0 16px !important;
+ padding: 0 6px !important;
}
&:active {
- padding: 0 16px !important;
+ padding: 0 6px !important;
}
}
.ant-tabs-tab-active {
position: relative;
z-index: 3;
- padding: 0 16px;
+ padding: 0 6px;
font-weight: inherit;
- background: #d4ebff;
+ background: #004b89;
border: 0;
+ .ant-tabs-tab-btn {
+ color: #fff;
+ }
+
.ant-tabs-tab-remove .anticon-close {
opacity: 1;
svg {
width: 0.6em;
+ fill: #fff;
}
}
@@ -130,7 +135,7 @@
padding: 0 6px;
.ant-tabs-tab {
- margin-right: -20px !important;
+ margin-right: -6px !important;
}
}
}
@@ -175,7 +180,7 @@
border-left: 1px solid var(--border-color);
&:hover {
- color: @text-color-base;
+ color: @text-color;
}
span[role="img"] {
diff --git a/src/layouts/default/tabs/index.vue b/src/layouts/default/tabs/index.vue
index 551a4b7..c83b53f 100644
--- a/src/layouts/default/tabs/index.vue
+++ b/src/layouts/default/tabs/index.vue
@@ -23,8 +23,6 @@ import { listenerRouteChange } from '@/logics/mitt/routeChange'
defineOptions({ name: 'MultipleTabs' })
-const TabPane = Tabs.TabPane
-
const affixTextList = initAffixTabs()
const activeKeyRef = ref('')
@@ -101,11 +99,11 @@ function handleEdit(targetKey: string) {
@edit="handleEdit"
>
<template v-for="item in getTabsState" :key="item.query ? item.fullPath : item.path">
- <TabPane :closable="!(item && item.meta && item.meta.affix)">
+ <Tabs.TabPane :closable="!(item && item.meta && item.meta.affix)">
<template #tab>
<TabContent :tab-item="item" />
</template>
- </TabPane>
+ </Tabs.TabPane>
</template>
<template v-if="getShowRedo || getShowQuick" #rightExtra>
diff --git a/src/views/base/login/SessionTimeoutLogin.vue b/src/views/base/login/SessionTimeoutLogin.vue
index 9272f09..6d60ced 100644
--- a/src/views/base/login/SessionTimeoutLogin.vue
+++ b/src/views/base/login/SessionTimeoutLogin.vue
@@ -50,6 +50,6 @@ onBeforeUnmount(() => {
z-index: 9999999;
width: 100%;
height: 100%;
- background: @component-background;
+ background: var(--component-background);
}
</style>
diff --git a/src/views/base/login/sso.vue b/src/views/base/login/sso.vue
index a707333..89f7eb9 100644
--- a/src/views/base/login/sso.vue
+++ b/src/views/base/login/sso.vue
@@ -195,7 +195,7 @@ html[data-theme='dark'] {
.ant-divider-inner-text {
font-size: 12px;
- color: @text-color-secondary;
+ color: var(--text-color-secondary);
}
}
</style>