mirror of
https://gitee.com/dolphinscheduler/DolphinScheduler.git
synced 2024-12-03 12:48:46 +08:00
feat: Added login pages and functions (#7456)
This commit is contained in:
labbomb
GitHub
parent
5c8b7b7940
commit
91e3423c72
@ -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"
|
||||
|
||||
99
dolphinscheduler-ui-next/src/assets/images/logo.svg
Normal file
99
dolphinscheduler-ui-next/src/assets/images/logo.svg
Normal file
@ -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>
|
||||
|
After Width: | Height: | Size: 8.4 KiB |
5
dolphinscheduler-ui-next/src/env.d.ts
vendored
5
dolphinscheduler-ui-next/src/env.d.ts
vendored
@ -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'
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -17,6 +17,11 @@
|
||||
|
||||
const login = {
|
||||
test: '测试',
|
||||
username: '用户名',
|
||||
username_tips: '请输入用户名',
|
||||
password: '密码',
|
||||
password_tips: '请输入密码',
|
||||
signin: '登录'
|
||||
}
|
||||
|
||||
export default {
|
||||
|
||||
@ -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) => {
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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
|
||||
@ -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"]
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user