feat: Added login pages and functions (#7456)

3 years ago · 91e3423c72
9 changed files with 228 additions and 27 deletions
--- a/dolphinscheduler-ui-next/package.json
+++ b/dolphinscheduler-ui-next/package.json
@ -37,6 +37,7 @@
    "sass": "^1.44.0",
    "sass-loader": "^12.4.0",
    "typescript": "^4.4.4",
+    "typescript-plugin-css-modules": "^3.4.0",
    "vite": "^2.7.0",
    "vite-plugin-compression": "^0.3.6",
    "vue-tsc": "^0.28.10"
--- a/dolphinscheduler-ui-next/src/assets/images/logo.svg
+++ b/dolphinscheduler-ui-next/src/assets/images/logo.svg
@ -0,0 +1,99 @@
+<!-- Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License. -->
+<!-- <?xml version="1.0" encoding="utf-8"?> -->
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 180 46" style="enable-background:new 0 0 180 46;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#85CDF0;}
+	.st1{fill:#0097E0;}
+	.st2{fill:#282828;}
+</style>
+<g>
+	<path class="st0" d="M29.9,25.6H14.5c-2.1,0-3.8,1.8-3.8,3.9c0,0.8,0.2,1.6,0.7,2.2c0.3-0.1,0.6-0.2,0.9-0.3l0,0l0,0
+		c1-0.4,2.1-1.2,2.8-1.8c0.2-0.1,0.3-0.2,0.4-0.3c0.1-0.1,0.2-0.2,0.4-0.3c0.6-0.5,1.4-1.1,2.6-1.3c0.2,0,0.4,0,0.7,0
+		c1,0,1.9,0.3,2.5,0.9c0.2-0.1,0.4-0.2,0.5-0.3c0.3-0.1,0.5-0.3,0.7-0.4c0.2-0.1,0.5-0.2,0.8-0.2c0.6,0,1.2,0.3,1.5,0.9
+		c0.2,0.4,0.4,1.1-0.2,2.2c-0.1,0.2-0.3,0.4-0.4,0.7c-0.3,0.6-0.7,1.2-1.3,2h6.6c2.1,0,3.8-1.8,3.8-3.9C33.7,27.4,32,25.6,29.9,25.6
+		z"/>
+	<path class="st1" d="M5.7,20.3h1c0.6,0,1-0.4,1-1c0-0.6-0.4-1-1-1h-1c-2.1,0-3.7-1.7-3.7-3.9c0-2.1,1.6-3.8,3.6-3.9v2.1l2.8-2.9
+		l-2.8-3v1.7C2.6,8.6,0,11.2,0,14.4C0,17.7,2.5,20.3,5.7,20.3z"/>
+	<path class="st1" d="M38.4,18.6h-1c-0.6,0-1,0.4-1,1c0,0.6,0.4,1,1,1h1c2.1,0,3.7,1.7,3.7,3.9c0,2.1-1.6,3.8-3.6,3.9v-2.1L35.7,29
+		l2.8,3v-1.7c3-0.1,5.5-2.6,5.5-5.9C44.1,21.1,41.6,18.6,38.4,18.6z"/>
+	<path class="st0" d="M29.9,15.3H14.5c-2.1,0-3.8,1.8-3.8,3.9s1.7,3.9,3.8,3.9h15.4c2.1,0,3.8-1.8,3.8-3.9S32,15.3,29.9,15.3z"/>
+	<path class="st0" d="M29.9,5.1H14.5c-2.1,0-3.8,1.8-3.8,3.9v0c0,2.2,1.7,3.9,3.8,3.9h15.4c2.1,0,3.8-1.8,3.8-3.9v0
+		C33.7,6.8,32,5.1,29.9,5.1z"/>
+	<path class="st1" d="M19.5,39c0.2,1.3-0.4,1-0.9,0.6c-0.3-0.2-1.2-0.7-1.7-1c0.8-0.4,1.5-0.9,2-1.3C19.2,37.8,19.4,38.4,19.5,39z
+		 M18.4,31c-0.1,0-0.2,0.1-0.2,0.2s0.1,0.2,0.2,0.2s0.2-0.1,0.2-0.2S18.5,31,18.4,31z M24.2,30.3c-0.8,1.3-1.8,3.3-4.6,5.9
+		c-0.6,0.6-1.9,1.5-3.2,2.1c-0.4,0.2-1,0.4-1.6,0.6c0.4-0.6,0.6-1.2,0.7-1.8l-0.3,0c-0.7,2.3-2.4,4.3-4.5,5c-1.3,0.4-1-0.3-0.8-0.9
+		c0.2-0.4,0.7-2.4,0.9-3.4l-0.4-0.1c0,0,0,0.2-0.1,0.4c-0.1,0.2-0.1,0.5-0.2,0.8c-1.2-0.4-2.4-1-3.3-2.1c-1.3-1.6-1.9-3.1-2.2-5.9
+		c-0.1-0.7-0.8-1.4-1.6-2.3c-1-1.1-1-2.7-0.4-2.9c0.4-0.1,2.5,0.9,3.2,1.4c0.8-0.6,2-1.6,2.4-1.3C8.5,26,8.6,27,7.9,28.5
+		c-1.5,3.1,0.6,4,1.1,4.1c0.9,0.2,2.3,0.3,3.7-0.3c1.3-0.5,2.9-1.8,3.4-2.2c0.7-0.5,1.4-1.2,2.5-1.4c1.3-0.2,2.3,0.2,2.8,1.1
+		c0.6-0.2,1.4-0.8,2-1C23.9,28.5,25,28.9,24.2,30.3z M18.8,31.4c0-0.3-0.2-0.6-0.5-0.6c-0.3,0-0.5,0.3-0.5,0.6s0.2,0.6,0.5,0.6
+		C18.6,31.9,18.8,31.7,18.8,31.4z"/>
+	<g>
+		<path class="st2" d="M49,17.6h4.8c1.6,0,2.9,0.6,3.8,1.8c0.8,1.1,1.2,2.5,1.2,4.2c0,1.3-0.2,2.5-0.7,3.6c-0.8,1.9-2.3,2.8-4.3,2.8
+			H49V17.6z M53.5,28.6c0.5,0,1-0.1,1.3-0.2c0.6-0.2,1.1-0.6,1.5-1.3c0.3-0.5,0.5-1.1,0.7-1.9c0.1-0.5,0.1-0.9,0.1-1.3
+			c0-1.5-0.3-2.7-0.9-3.6c-0.6-0.8-1.5-1.3-2.8-1.3h-2.8v9.5H53.5z"/>
+		<path class="st2" d="M67.3,21.9c0.8,0.8,1.2,1.9,1.2,3.4c0,1.5-0.3,2.7-1,3.6c-0.7,1-1.7,1.4-3.2,1.4c-1.2,0-2.2-0.4-2.9-1.3
+			c-0.7-0.8-1.1-2-1.1-3.4c0-1.5,0.4-2.7,1.1-3.6c0.7-0.9,1.7-1.4,3-1.4C65.5,20.7,66.5,21.1,67.3,21.9z M66.3,27.9
+			c0.4-0.8,0.5-1.6,0.5-2.5c0-0.8-0.1-1.5-0.4-2.1c-0.4-0.8-1.1-1.2-2.1-1.2c-0.9,0-1.5,0.4-1.9,1.1c-0.4,0.7-0.6,1.6-0.6,2.6
+			c0,1,0.2,1.8,0.6,2.4c0.4,0.6,1,1,1.9,1C65.3,29.1,66,28.7,66.3,27.9z"/>
+		<path class="st2" d="M70.3,17.6h1.5V30h-1.5V17.6z"/>
+		<path class="st2" d="M73.8,21h1.4v1.2c0.3-0.4,0.6-0.7,1-1c0.5-0.3,1.1-0.5,1.8-0.5c1,0,1.8,0.4,2.5,1.2c0.7,0.8,1,1.9,1,3.4
+			c0,2-0.5,3.4-1.5,4.2c-0.6,0.5-1.4,0.8-2.2,0.8c-0.7,0-1.2-0.1-1.7-0.4c-0.3-0.2-0.6-0.5-0.9-0.9v4.6h-1.5V21z M79.4,28.1
+			c0.5-0.6,0.7-1.5,0.7-2.7c0-0.7-0.1-1.3-0.3-1.9c-0.4-1-1.1-1.5-2.1-1.5c-1,0-1.7,0.5-2.1,1.6c-0.2,0.6-0.3,1.3-0.3,2.1
+			c0,0.7,0.1,1.3,0.3,1.8c0.4,0.9,1.1,1.4,2.1,1.4C78.4,29,78.9,28.7,79.4,28.1z"/>
+		<path class="st2" d="M83.3,17.6h1.5v4.6c0.3-0.5,0.7-0.8,0.9-1c0.5-0.3,1.1-0.5,1.8-0.5c1.3,0,2.1,0.5,2.6,1.4
+			c0.2,0.5,0.4,1.2,0.4,2.1V30h-1.5v-5.7c0-0.7-0.1-1.2-0.2-1.5c-0.3-0.5-0.8-0.7-1.5-0.7c-0.6,0-1.2,0.2-1.7,0.7
+			c-0.5,0.4-0.7,1.3-0.7,2.5V30h-1.5V17.6z"/>
+		<path class="st2" d="M92.6,17.6h1.5v1.7h-1.5V17.6z M92.6,21h1.5v9h-1.5V21z"/>
+		<path class="st2" d="M96.4,21h1.4v1.3c0.4-0.5,0.9-0.9,1.3-1.1c0.5-0.2,1-0.3,1.5-0.3c1.2,0,2.1,0.4,2.5,1.3
+			c0.2,0.5,0.4,1.2,0.4,2.1V30H102v-5.7c0-0.6-0.1-1-0.2-1.3c-0.3-0.6-0.7-0.8-1.4-0.8c-0.3,0-0.6,0-0.9,0.1
+			c-0.4,0.1-0.8,0.4-1.1,0.7c-0.2,0.3-0.4,0.6-0.5,0.9c-0.1,0.3-0.1,0.8-0.1,1.4V30h-1.5V21z"/>
+		<path class="st2" d="M107,26c0,0.7,0.2,1.3,0.5,1.7c0.5,0.8,1.4,1.2,2.8,1.2c0.6,0,1.1-0.1,1.6-0.3c0.9-0.3,1.4-1,1.4-1.9
+			c0-0.7-0.2-1.2-0.6-1.4c-0.4-0.3-1-0.5-1.9-0.7l-1.6-0.4c-1-0.2-1.8-0.5-2.2-0.8c-0.7-0.5-1.1-1.3-1.1-2.3c0-1.1,0.4-2,1.1-2.7
+			c0.7-0.7,1.8-1.1,3.1-1.1c1.2,0,2.3,0.3,3.1,0.9c0.9,0.6,1.3,1.6,1.3,3h-1.5c-0.1-0.7-0.2-1.2-0.5-1.5c-0.5-0.6-1.3-1-2.4-1
+			c-0.9,0-1.6,0.2-2,0.6c-0.4,0.4-0.6,0.9-0.6,1.5c0,0.6,0.2,1.1,0.7,1.3c0.3,0.2,1,0.4,2.1,0.7l1.6,0.4c0.8,0.2,1.4,0.5,1.8,0.8
+			c0.7,0.6,1.1,1.4,1.1,2.5c0,1.4-0.5,2.4-1.4,2.9c-0.9,0.6-2,0.9-3.3,0.9c-1.5,0-2.6-0.4-3.4-1.2c-0.8-0.8-1.2-1.8-1.2-3.2H107z"/>
+		<path class="st2" d="M122.7,21.5c0.6,0.5,1,1.3,1.1,2.6h-1.4c-0.1-0.6-0.3-1-0.6-1.4c-0.3-0.4-0.8-0.6-1.5-0.6
+			c-0.9,0-1.6,0.5-2,1.4c-0.3,0.6-0.4,1.4-0.4,2.3c0,0.9,0.2,1.7,0.6,2.3c0.4,0.6,1,0.9,1.8,0.9c0.6,0,1.1-0.2,1.5-0.6
+			c0.4-0.4,0.6-0.9,0.7-1.6h1.4c-0.2,1.2-0.6,2.1-1.2,2.6c-0.7,0.6-1.5,0.8-2.5,0.8c-1.1,0-2.1-0.4-2.7-1.3c-0.7-0.9-1-1.9-1-3.2
+			c0-1.6,0.4-2.8,1.1-3.7c0.7-0.9,1.7-1.3,2.9-1.3C121.3,20.7,122.1,21,122.7,21.5z"/>
+		<path class="st2" d="M125.3,17.6h1.5v4.6c0.3-0.5,0.7-0.8,0.9-1c0.5-0.3,1.1-0.5,1.8-0.5c1.3,0,2.1,0.5,2.6,1.4
+			c0.2,0.5,0.4,1.2,0.4,2.1V30h-1.5v-5.7c0-0.7-0.1-1.2-0.2-1.5c-0.3-0.5-0.8-0.7-1.5-0.7c-0.6,0-1.2,0.2-1.7,0.7
+			c-0.5,0.4-0.7,1.3-0.7,2.5V30h-1.5V17.6z"/>
+		<path class="st2" d="M140,21.2c0.6,0.3,1,0.7,1.3,1.2c0.3,0.5,0.5,1,0.6,1.6c0.1,0.4,0.1,1.1,0.1,2h-6.4c0,0.9,0.2,1.7,0.6,2.2
+			c0.4,0.6,1,0.8,1.8,0.8c0.8,0,1.4-0.3,1.8-0.8c0.3-0.3,0.4-0.7,0.5-1.1h1.5c0,0.3-0.2,0.7-0.4,1.1c-0.2,0.4-0.5,0.7-0.7,1
+			c-0.4,0.5-1,0.8-1.7,0.9c-0.4,0.1-0.8,0.1-1.2,0.1c-1.1,0-2-0.4-2.8-1.2c-0.8-0.8-1.1-2-1.1-3.4c0-1.5,0.4-2.6,1.1-3.5
+			c0.8-0.9,1.8-1.4,3-1.4C138.9,20.8,139.5,20.9,140,21.2z M140.6,24.8c-0.1-0.7-0.2-1.2-0.4-1.6c-0.4-0.7-1.1-1.1-2-1.1
+			c-0.7,0-1.2,0.3-1.7,0.8c-0.5,0.5-0.7,1.1-0.7,1.9H140.6z"/>
+		<path class="st2" d="M148.8,21.3c0.3,0.2,0.6,0.5,0.9,0.9v-4.6h1.4V30h-1.3v-1.3c-0.3,0.6-0.7,1-1.2,1.2c-0.5,0.2-1,0.4-1.6,0.4
+			c-1,0-1.8-0.4-2.5-1.3c-0.7-0.8-1.1-2-1.1-3.4c0-1.3,0.3-2.5,1-3.4c0.7-1,1.6-1.4,2.8-1.4C147.8,20.8,148.3,21,148.8,21.3z
+			 M145.5,28.1c0.4,0.7,1,1,1.9,1c0.7,0,1.2-0.3,1.7-0.9c0.4-0.6,0.7-1.5,0.7-2.6c0-1.1-0.2-2-0.7-2.5c-0.5-0.5-1-0.8-1.7-0.8
+			c-0.7,0-1.3,0.3-1.8,0.9c-0.5,0.6-0.7,1.4-0.7,2.6C144.9,26.6,145.1,27.4,145.5,28.1z"/>
+		<path class="st2" d="M154.8,21v6c0,0.5,0.1,0.8,0.2,1.1c0.3,0.5,0.7,0.8,1.4,0.8c1,0,1.7-0.5,2-1.4c0.2-0.5,0.3-1.2,0.3-2.1V21
+			h1.5v9h-1.4l0-1.3c-0.2,0.3-0.4,0.6-0.7,0.9c-0.6,0.5-1.2,0.7-2,0.7c-1.2,0-2.1-0.4-2.5-1.3c-0.2-0.5-0.4-1.1-0.4-1.8V21H154.8z"
+			/>
+		<path class="st2" d="M162.7,17.6h1.5V30h-1.5V17.6z"/>
+		<path class="st2" d="M171.8,21.2c0.6,0.3,1,0.7,1.3,1.2c0.3,0.5,0.5,1,0.6,1.6c0.1,0.4,0.1,1.1,0.1,2h-6.4c0,0.9,0.2,1.7,0.6,2.2
+			c0.4,0.6,1,0.8,1.8,0.8c0.8,0,1.4-0.3,1.8-0.8c0.3-0.3,0.4-0.7,0.5-1.1h1.5c0,0.3-0.2,0.7-0.4,1.1c-0.2,0.4-0.5,0.7-0.7,1
+			c-0.4,0.5-1,0.8-1.7,0.9c-0.4,0.1-0.8,0.1-1.2,0.1c-1.1,0-2-0.4-2.8-1.2c-0.8-0.8-1.1-2-1.1-3.4c0-1.5,0.4-2.6,1.1-3.5
+			c0.8-0.9,1.8-1.4,3-1.4C170.6,20.8,171.2,20.9,171.8,21.2z M172.3,24.8c-0.1-0.7-0.2-1.2-0.4-1.6c-0.4-0.7-1.1-1.1-2-1.1
+			c-0.7,0-1.2,0.3-1.7,0.8c-0.5,0.5-0.7,1.1-0.7,1.9H172.3z"/>
+		<path class="st2" d="M175.7,21h1.4v1.6c0.1-0.3,0.4-0.7,0.8-1.1c0.4-0.4,1-0.7,1.5-0.7c0,0,0.1,0,0.1,0c0.1,0,0.2,0,0.3,0v1.6
+			c-0.1,0-0.2,0-0.2,0c-0.1,0-0.2,0-0.2,0c-0.7,0-1.3,0.2-1.7,0.7c-0.4,0.5-0.6,1.1-0.6,1.7V30h-1.5V21z"/>
+	</g>
+</g>
+</svg>
--- a/dolphinscheduler-ui-next/src/env.d.ts
+++ b/dolphinscheduler-ui-next/src/env.d.ts
@ -22,11 +22,6 @@ declare module '*.vue' {
  export default component
 }

-declare module '*.scss' {
-  const classes: { readonly [key: string]: string }
-  export default classes
-}
-
 declare module '*.png'
 declare module '*.jpg'
 declare module '*.jpeg'
--- a/dolphinscheduler-ui-next/src/locales/modules/en_US.ts
+++ b/dolphinscheduler-ui-next/src/locales/modules/en_US.ts
@ -17,6 +17,11 @@

 const login = {
  test: 'Test',
+  username: 'Username',
+  username_tips: 'Please enter your username',
+  password: 'Password',
+  password_tips: 'Please enter your password',
+  signin: 'Sign In'
 }

 export default {
--- a/dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts
+++ b/dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts
@ -17,6 +17,11 @@

 const login = {
  test: '测试',
+  username: '用户名',
+  username_tips: '请输入用户名',
+  password: '密码',
+  password_tips: '请输入密码',
+  signin: '登录'
 }

 export default {
--- a/dolphinscheduler-ui-next/src/utils/classification.ts
+++ b/dolphinscheduler-ui-next/src/utils/classification.ts
@ -17,11 +17,7 @@

 import type { Component } from 'vue'

-interface modules extends Object {
-  [key: string]: any
-}
-
-const classification = (modules: modules) => {
+const classification = (modules: any) => {
  const components: { [key: string]: Component } = {}
  // All TSX files under the views folder automatically generate mapping relationship
  Object.keys(modules).forEach((key: string) => {
--- a/dolphinscheduler-ui-next/src/views/login/index.module.scss
+++ b/dolphinscheduler-ui-next/src/views/login/index.module.scss
@ -21,4 +21,35 @@
  display: flex;
  justify-content: center;
  align-items: center;
-}
+  background: #0098e1;
+
+  .language-switch {
+    position: absolute;
+    top: 12px;
+    right: 12px;
+  }
+
+  .login-model {
+    width: 400px;
+    min-height: 260px;
+    background: #fff;
+    border-radius: 3px;
+    box-shadow: 0 2px 25px 0 rgb(0 0 0 / 30%);
+
+    .logo {
+      padding-top: 30px;
+
+      .logo-img {
+        width: 280px;
+        height: 60px;
+        display: block;
+        background: url('../../assets/images/logo.svg') no-repeat 23px;
+        margin: 0 auto;
+      }
+    }
+
+    .form-model {
+      padding: 30px 20px;
+    }
+  }
+}
--- a/dolphinscheduler-ui-next/src/views/login/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/login/index.tsx
@ -15,37 +15,105 @@
 * limitations under the License.
 */

-import { defineComponent } from 'vue'
+import { defineComponent, reactive, ref, toRefs, withKeys } from 'vue'
 import styles from './index.module.scss'
 import { useI18n } from 'vue-i18n'
-import { NButton } from 'naive-ui'
-import { useThemeStore } from '@/store/theme/theme'
+import { NInput, NButton, NSwitch, NForm, NFormItem, FormRules } from 'naive-ui'
+import { useRouter } from 'vue-router'
+import type { Router } from 'vue-router'

 const Login = defineComponent({
  name: 'login',
  setup() {
    const { t, locale } = useI18n()
-    const themeStore = useThemeStore()
+    const state = reactive({
+      loginFormRef: ref(),
+      loginForm: {
+        username: '',
+        password: '',
+      },
+      rules: {
+        username: {
+          trigger: ['input', 'blur'],
+          validator () {
+            if (state.loginForm.username === '') {
+              return new Error(`${t('login.username_tips')}`)
+            }
+          }
+        },
+        password: {
+          trigger: ['input', 'blur'],
+          validator () {
+            if (state.loginForm.password === '') {
+              return new Error(`${t('login.password_tips')}`)
+            }
+          }
+        }
+      } as FormRules
+    })

-    const setTheme = (): void => {
-      themeStore.setDarkTheme()
+    const handleChange = (value: string) => {
+      locale.value = value
    }

-    return { t, locale, setTheme }
+    const router: Router = useRouter()
+    const handleLogin = () => {
+      state.loginFormRef.validate((valid: any) => {
+        if (!valid) {
+          router.push({ path: 'home' })
+        } else {
+          console.log('Invalid')
+        }
+      })
+    }
+
+    return { t, locale, handleChange, handleLogin, ...toRefs(state)}
  },
  render() {
    return (
      <div class={styles.container}>
-        <NButton type='error' onClick={this.setTheme}>
-          {this.t('login.test')} + 切换主题
-        </NButton>
-        <select v-model={this.locale}>
-          <option value='en_US'>en_US</option>
-          <option value='zh_CN'>zh_CN</option>
-        </select>
+        <div class={styles['language-switch']}>
+          <NSwitch onUpdateValue={this.handleChange} checked-value="en_US" unchecked-value="zh_CN">
+            {{
+              checked: () => 'en_US', 
+              unchecked: () =>'zh_CN'
+            }}
+          </NSwitch>
+        </div>
+        <div class={styles['login-model']}>
+          <div class={styles.logo}>
+            <div class={styles['logo-img']}></div>
+          </div>
+          <div class={styles['form-model']}>
+            <NForm rules={this.rules} ref="loginFormRef">
+              <NFormItem label={this.t('login.username')} label-style={{color:'black'}} path="username">
+                <NInput
+                  type="text"
+                  size="large"
+                  v-model={[this.loginForm.username, 'value']}
+                  placeholder={this.t('login.username_tips')}
+                  autofocus
+                  onKeydown={withKeys(this.handleLogin, ['enter'])}
+                />
+              </NFormItem>
+              <NFormItem label={this.t('login.password')} label-style={{color:'black'}} path="password">
+                <NInput
+                  type="password"
+                  size="large"
+                  v-model={[this.loginForm.password, 'value']}
+                  placeholder={this.t('login.password_tips')}
+                  onKeydown={withKeys(this.handleLogin, ['enter'])}
+                />
+              </NFormItem>
+            </NForm>
+            <NButton round type="primary" onClick={this.handleLogin}>
+              {this.t('login.signin')}
+            </NButton>
+          </div>
+        </div>
      </div>
    )
  },
 })

-export default Login
+export default Login
--- a/dolphinscheduler-ui-next/tsconfig.json
+++ b/dolphinscheduler-ui-next/tsconfig.json
@ -13,7 +13,8 @@
    "paths": {
      "@/*": ["src/*"]
    },
-    "types": ["vite/client"]
+    "types": ["vite/client"],
+    "plugins": [{ "name": "typescript-plugin-css-modules" }]
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
 }