fix: improve login page style

CHANGELOG.zh_CN.md

@@ -1,3 +1,9 @@
+## Wip
+
+### 🐛 Bug Fixes
+
+- 登录页样式修复
+
 ## 2.2.0 (2021-04-06)
 
 ### ✨ Features

build/vite/plugin/theme.ts

@@ -3,6 +3,7 @@
  * https://github.com/anncwb/vite-plugin-theme
  */
 import type { Plugin } from 'vite';
+import path from 'path';
 import {
   viteThemePlugin,
   antdDarkThemePlugin,
@@ -25,6 +26,10 @@ export function configThemePlugin(isBuild: boolean): Plugin[] {
       colorVariables: [...getThemeColors(), ...colors],
     }),
     antdDarkThemePlugin({
+      preloadFiles: [
+        path.resolve(process.cwd(), 'node_modules/ant-design-vue/dist/antd.less'),
+        path.resolve(process.cwd(), 'src/design/index.less'),
+      ],
       filter: (id) => (isBuild ? !id.endsWith('antd.less') : true),
       // extractCss: false,
       darkModifyVars: {

package.json

@@ -114,7 +114,7 @@
     "vite-plugin-pwa": "^0.7.0",
     "vite-plugin-style-import": "^0.9.2",
     "vite-plugin-svg-icons": "^0.4.1",
-    "vite-plugin-theme": "^0.6.1",
+    "vite-plugin-theme": "^0.6.3",
     "vite-plugin-windicss": "0.12.5",
     "vue-eslint-parser": "^7.6.0"
   },

src/components/Form/src/components/FormItem.vue

@@ -210,7 +210,7 @@
             props.setFormModel(field, value);
           },
         };
-        const Comp = componentMap.get(component) as typeof defineComponent;
+        const Comp = componentMap.get(component) as ReturnType<typeof defineComponent>;
 
         const { autoSetPlaceHolder, size } = props.formProps;
         const propsData: Recordable = {

src/views/sys/login/Login.vue

@@ -30,6 +30,7 @@
         </div>
         <div class="h-full xl:h-auto flex py-5 xl:py-0 xl:my-0 w-full xl:w-6/12">
           <div
+            :class="`${prefixCls}-form`"
             class="my-auto mx-auto xl:ml-20 xl:bg-transparent px-5 py-8 sm:px-8 xl:p-4 rounded-md shadow-md xl:shadow-none w-full sm:w-3/4 lg:w-2/4 xl:w-auto enter-x relative"
           >
             <LoginForm />
@@ -89,10 +90,11 @@
   @prefix-cls: ~'@{namespace}-login';
   @logo-prefix-cls: ~'@{namespace}-app-logo';
   @countdown-prefix-cls: ~'@{namespace}-countdown-input';
+  @dark-bg: #293146;
 
   html[data-theme='dark'] {
     .@{prefix-cls} {
-      background: #293146;
+      background: @dark-bg;
 
       &::before {
         background-image: url(/@/assets/svg/login-bg-dark.svg);
@@ -106,13 +108,21 @@
       .ant-btn:not(.ant-btn-link):not(.ant-btn-primary) {
         border: 1px solid #4a5569;
       }
+
+      &-form {
+        background: transparent !important;
+      }
     }
   }
 
   .@{prefix-cls} {
     overflow: hidden;
     @media (max-width: @screen-xl) {
-      background: linear-gradient(180deg, #1c3faa, #1c3faa);
+      background: #293146;
+
+      .@{prefix-cls}-form {
+        background: #fff;
+      }
     }
 
     &::before {

src/views/sys/login/LoginForm.vue

@@ -46,7 +46,7 @@
           {{ t('sys.login.mobileSignInFormTitle') }}
         </Button>
       </ACol>
-      <ACol :md="8" :xs="24" class="xs:my-2 md:my-0 xs:mx-0 md:mx-2">
+      <ACol :md="8" :xs="24" class="!my-2 !md:my-0 xs:mx-0 md:mx-2">
         <Button block @click="setLoginState(LoginStateEnum.QR_CODE)">
           {{ t('sys.login.qrSignInFormTitle') }}
         </Button>

yarn.lock

@@ -9173,10 +9173,10 @@ vite-plugin-svg-icons@^0.4.1:
     svg-baker "1.7.0"
     svgo "^2.3.0"
 
-vite-plugin-theme@^0.6.1:
-  version "0.6.1"
-  resolved "https://registry.npmjs.org/vite-plugin-theme/-/vite-plugin-theme-0.6.1.tgz#8fd87e1d57ae83f49531aeb65bfc8f6adcf2b71f"
-  integrity sha512-r+v+AxeatliReg6fBkCbKQ/PHpv0J9EG22QLoAyXNPdZxei+xydxdHVWrN2nUh231im0v9fZzWKzOOxw5VW0fA==
+vite-plugin-theme@^0.6.3:
+  version "0.6.3"
+  resolved "https://registry.npmjs.org/vite-plugin-theme/-/vite-plugin-theme-0.6.3.tgz#77be00b039eb53452c9adfce7fd90e39a39a81ee"
+  integrity sha512-ffhnqCtCG/0Y7egfiF9upJRo5ZEKS6lQOQsSztqu8gA2/SGsNTm3lsmEWvARMeUAj/8aF5PYzAv5EikfhcPENQ==
   dependencies:
     "@types/node" "^14.14.37"
     "@types/tinycolor2" "^1.4.2"