style: fix style

2 years ago · 8347f97a2a
17 changed files with 55 additions and 120 deletions
--- 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 {
--- 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;
--- 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 {
--- 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;

--- 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;
    }
  }
--- 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;
    }
  }

--- 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;

--- 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;
-
--- 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%);
 }
--- 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;
    }
  }

--- 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 {
--- 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;
      }
    }
  }
--- 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);
    }
  }
--- 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"] {
--- 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>
--- 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>
--- 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>