This is an automated email from the ASF dual-hosted git repository.
benjobs pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/incubator-streampark.git
The following commit(s) were added to refs/heads/dev by this push:
new c9a44e92c [Improve] Improve the effect of the login page，fix add user
select bug (#1948)
c9a44e92c is described below
commit c9a44e92c9c10e2eccba7af0b8812d084911967b
Author: Sizhu Wang <[email protected]>
AuthorDate: Wed Nov 2 18:58:52 2022 +0800
[Improve] Improve the effect of the login page，fix add user select bug
(#1948)
* [Improve] Improve the effect of the login page,synchronize the
modification of application state
* [Fix] login page add github info, fix font size bug
* [Improve] Set the version dynamically
* [Fix] fix project create bug and flinksql check bug
---
.../streampark-console-newui/index.html | 285 ++++++++++---------
.../public/resource/css/fonts.css | 97 +++++++
.../public/resource/fonts/devanagari-1.woff2 | Bin 0 -> 39564 bytes
.../public/resource/fonts/devanagari-2.woff2 | Bin 0 -> 39136 bytes
.../public/resource/fonts/devanagari-3.woff2 | Bin 0 -> 39148 bytes
.../public/resource/fonts/latin-1.woff2 | Bin 0 -> 7884 bytes
.../public/resource/fonts/latin-2.woff2 | Bin 0 -> 7748 bytes
.../public/resource/fonts/latin-3.woff2 | Bin 0 -> 7816 bytes
.../public/resource/fonts/latin-ext-1.woff2 | Bin 0 -> 5544 bytes
.../public/resource/fonts/latin-ext-2.woff2 | Bin 0 -> 5452 bytes
.../public/resource/fonts/latin-ext-3.woff2 | Bin 0 -> 5384 bytes
.../src/assets/icons/block.svg | 3 +
.../src/assets/icons/dynamic-avatar-1.svg | 1 -
.../src/assets/icons/dynamic-avatar-2.svg | 1 -
.../src/assets/icons/dynamic-avatar-3.svg | 1 -
.../src/assets/icons/dynamic-avatar-4.svg | 1 -
.../src/assets/icons/dynamic-avatar-5.svg | 1 -
.../src/assets/icons/dynamic-avatar-6.svg | 1 -
.../src/views/base/login/ForgetPasswordForm.vue | 80 ------
.../src/views/base/login/Login.vue | 234 ++++++++--------
.../src/views/base/login/LoginForm.vue | 23 +-
.../src/views/base/login/LoginFormTitle.vue | 44 ---
.../src/views/base/login/LoginSlogan.less | 312 +++++++++++++++++++++
.../src/views/base/login/LoginSlogan.tsx | 99 +++++++
.../src/views/base/login/MobileForm.vue | 79 ------
.../src/views/base/login/RegisterForm.vue | 120 --------
.../src/views/flink/app/Add.vue | 7 +-
.../src/views/flink/app/View.vue | 6 +-
.../src/views/flink/app/components/State.tsx | 1 -
.../src/views/flink/app/components/flinkSql.vue | 5 +-
.../src/views/flink/app/data/index.ts | 1 +
.../src/views/flink/app/hooks/useAppTableAction.ts | 12 +-
.../src/views/flink/app/utils/index.ts | 6 +-
.../src/views/flink/project/useProject.ts | 12 +-
.../src/views/system/user/UserAdd.vue | 1 +
35 files changed, 827 insertions(+), 606 deletions(-)
diff --git a/streampark-console/streampark-console-newui/index.html
b/streampark-console/streampark-console-newui/index.html
index 963f6caa1..9e061e6ab 100644
--- a/streampark-console/streampark-console-newui/index.html
+++ b/streampark-console/streampark-console-newui/index.html
@@ -17,160 +17,171 @@
<!DOCTYPE html>
<html lang="en" id="htmlRoot">
- <head>
- <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,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"
- />
- <title><%= title %></title>
- <link rel="icon" href="/favicon.ico" />
- </head>
- <body>
- <script>
- (() => {
- var htmlRoot = document.getElementById('htmlRoot');
- var theme = window.localStorage.getItem('__APP__DARK__MODE__');
- if (htmlRoot && theme) {
- htmlRoot.setAttribute('data-theme', theme);
- theme = htmlRoot = null;
- }
- })();
- </script>
- <div id="app">
- <style>
- html[data-theme='dark'] .app-loading {
- background-color: #2c344a;
- }
- html[data-theme='dark'] .app-loading .app-loading-title {
- color: rgb(255 255 255 / 85%);
- }
+<head>
+ <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,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"
/>
+ <title>
+ <%= title %>
+ </title>
+ <link rel="stylesheet" href="/resource/css/fonts.css" />
+ <link rel="icon" href="/favicon.ico" />
+</head>
- .app-loading {
- display: flex;
- width: 100%;
- height: 100%;
- justify-content: center;
- align-items: center;
- flex-direction: column;
- background-color: #f4f7f9;
- }
+<body>
+ <script>
+ (() => {
+ var htmlRoot = document.getElementById('htmlRoot');
+ var theme = window.localStorage.getItem('__APP__DARK__MODE__');
+ if (htmlRoot && theme) {
+ htmlRoot.setAttribute('data-theme', theme);
+ theme = htmlRoot = null;
+ }
+ })();
+ </script>
+ <div id="app">
+ <style>
+ html[data-theme='dark'] .app-loading {
+ background-color: #2c344a;
+ }
- .app-loading .app-loading-wrap {
- position: absolute;
- top: 50%;
- left: 50%;
- display: flex;
- transform: translate3d(-50%, -50%, 0);
- justify-content: center;
- align-items: center;
- flex-direction: column;
- }
+ html[data-theme='dark'] .app-loading .app-loading-title {
+ color: rgb(255 255 255 / 85%);
+ }
- .app-loading .dots {
- display: flex;
- padding: 98px;
- justify-content: center;
- align-items: center;
- }
+ .app-loading {
+ display: flex;
+ width: 100%;
+ height: 100%;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ background-color: #f4f7f9;
+ }
- .app-loading .app-loading-title {
- display: flex;
- margin-top: 30px;
- font-size: 30px;
- color: rgb(0 0 0 / 85%);
- justify-content: center;
- align-items: center;
- }
+ .app-loading .app-loading-wrap {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ display: flex;
+ transform: translate3d(-50%, -50%, 0);
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ }
- .app-loading .app-loading-logo {
- display: block;
- width: 90px;
- margin: 0 auto;
- margin-bottom: 20px;
- }
+ .app-loading .dots {
+ display: flex;
+ padding: 98px;
+ justify-content: center;
+ align-items: center;
+ }
- .dot {
- position: relative;
- display: inline-block;
- width: 48px;
- height: 48px;
- margin-top: 30px;
- font-size: 32px;
- transform: rotate(45deg);
- box-sizing: border-box;
- animation: antRotate 1.2s infinite linear;
- }
+ .app-loading .app-loading-title {
+ display: flex;
+ margin-top: 30px;
+ font-size: 30px;
+ color: rgb(0 0 0 / 85%);
+ justify-content: center;
+ align-items: center;
+ }
- .dot i {
- position: absolute;
- display: block;
- width: 20px;
- height: 20px;
- background-color: #0065cc;
- border-radius: 100%;
- opacity: 30%;
- transform: scale(0.75);
- animation: antSpinMove 1s infinite linear alternate;
- transform-origin: 50% 50%;
- }
+ .app-loading .app-loading-logo {
+ display: block;
+ width: 90px;
+ margin: 0 auto;
+ margin-bottom: 20px;
+ }
- .dot i:nth-child(1) {
- top: 0;
- left: 0;
- }
+ .dot {
+ position: relative;
+ display: inline-block;
+ width: 48px;
+ height: 48px;
+ margin-top: 30px;
+ font-size: 32px;
+ transform: rotate(45deg);
+ box-sizing: border-box;
+ animation: antRotate 1.2s infinite linear;
+ }
- .dot i:nth-child(2) {
- top: 0;
- right: 0;
- animation-delay: 0.4s;
- }
+ .dot i {
+ position: absolute;
+ display: block;
+ width: 20px;
+ height: 20px;
+ background-color: #0065cc;
+ border-radius: 100%;
+ opacity: 30%;
+ transform: scale(0.75);
+ animation: antSpinMove 1s infinite linear alternate;
+ transform-origin: 50% 50%;
+ }
- .dot i:nth-child(3) {
- right: 0;
- bottom: 0;
- animation-delay: 0.8s;
- }
+ .dot i:nth-child(1) {
+ top: 0;
+ left: 0;
+ }
- .dot i:nth-child(4) {
- bottom: 0;
- left: 0;
- animation-delay: 1.2s;
- }
- @keyframes antRotate {
- to {
- transform: rotate(405deg);
- }
+ .dot i:nth-child(2) {
+ top: 0;
+ right: 0;
+ animation-delay: 0.4s;
+ }
+
+ .dot i:nth-child(3) {
+ right: 0;
+ bottom: 0;
+ animation-delay: 0.8s;
+ }
+
+ .dot i:nth-child(4) {
+ bottom: 0;
+ left: 0;
+ animation-delay: 1.2s;
+ }
+
+ @keyframes antRotate {
+ to {
+ transform: rotate(405deg);
}
- @keyframes antRotate {
- to {
- transform: rotate(405deg);
- }
+ }
+
+ @keyframes antRotate {
+ to {
+ transform: rotate(405deg);
}
- @keyframes antSpinMove {
- to {
- opacity: 100%;
- }
+ }
+
+ @keyframes antSpinMove {
+ to {
+ opacity: 100%;
}
- @keyframes antSpinMove {
- to {
- opacity: 100%;
- }
+ }
+
+ @keyframes antSpinMove {
+ to {
+ opacity: 100%;
}
- </style>
- <div class="app-loading">
- <div class="app-loading-wrap">
- <img src="/resource/img/logo.svg" class="app-loading-logo"
alt="Logo" />
- <div class="app-loading-dots">
- <span class="dot dot-spin"><i></i><i></i><i></i><i></i></span>
- </div>
- <div class="app-loading-title"><%= title %></div>
+ }
+
+ </style>
+ <div class="app-loading">
+ <div class="app-loading-wrap">
+ <img src="/resource/img/logo.svg" class="app-loading-logo" alt="Logo"
/>
+ <div class="app-loading-dots">
+ <span class="dot dot-spin"><i></i><i></i><i></i><i></i></span>
+ </div>
+ <div class="app-loading-title">
+ <%= title %>
</div>
</div>
</div>
- <script type="module" src="/src/main.ts"></script>
- </body>
+ </div>
+ <script type="module" src="/src/main.ts"></script>
+</body>
+
</html>
diff --git
a/streampark-console/streampark-console-newui/public/resource/css/fonts.css
b/streampark-console/streampark-console-newui/public/resource/css/fonts.css
new file mode 100644
index 000000000..c103c0062
--- /dev/null
+++ b/streampark-console/streampark-console-newui/public/resource/css/fonts.css
@@ -0,0 +1,97 @@
+/*
+ * 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
+ *
+ * https://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.
+ */
+/* devanagari */
+@font-face {
+ font-family: 'Poppins';
+ font-style: normal;
+ font-weight: 400;
+ font-display: swap;
+ src: url(../fonts/devanagari-1.woff2) format('woff2');
+ unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8,
U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
+}
+/* latin-ext */
+@font-face {
+ font-family: 'Poppins';
+ font-style: normal;
+ font-weight: 400;
+ font-display: swap;
+ src: url(../fonts/latin-ext-1.woff2) format('woff2');
+ unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+ font-family: 'Poppins';
+ font-style: normal;
+ font-weight: 400;
+ font-display: swap;
+ src: url(../fonts/latin-1.woff2) format('woff2');
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
U+2215, U+FEFF, U+FFFD;
+}
+/* devanagari */
+@font-face {
+ font-family: 'Poppins';
+ font-style: normal;
+ font-weight: 500;
+ font-display: swap;
+ src: url(../fonts/devanagari-2.woff2) format('woff2');
+ unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8,
U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
+}
+/* latin-ext */
+@font-face {
+ font-family: 'Poppins';
+ font-style: normal;
+ font-weight: 500;
+ font-display: swap;
+ src: url(../fonts/latin-ext-2.woff2) format('woff2');
+ unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+ font-family: 'Poppins';
+ font-style: normal;
+ font-weight: 500;
+ font-display: swap;
+ src: url(../fonts/latin-2.woff2) format('woff2');
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
U+2215, U+FEFF, U+FFFD;
+}
+/* devanagari */
+@font-face {
+ font-family: 'Poppins';
+ font-style: normal;
+ font-weight: 700;
+ font-display: swap;
+ src: url(../fonts/devanagari-3.woff2) format('woff2');
+ unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8,
U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
+}
+/* latin-ext */
+@font-face {
+ font-family: 'Poppins';
+ font-style: normal;
+ font-weight: 700;
+ font-display: swap;
+ src: url(../fonts/latin-ext-3.woff2) format('woff2');
+ unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+ font-family: 'Poppins';
+ font-style: normal;
+ font-weight: 700;
+ font-display: swap;
+ src: url(../fonts/latin-3.woff2) format('woff2');
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
U+2215, U+FEFF, U+FFFD;
+}
diff --git
a/streampark-console/streampark-console-newui/public/resource/fonts/devanagari-1.woff2
b/streampark-console/streampark-console-newui/public/resource/fonts/devanagari-1.woff2
new file mode 100644
index 000000000..3295a4cc9
Binary files /dev/null and
b/streampark-console/streampark-console-newui/public/resource/fonts/devanagari-1.woff2
differ
diff --git
a/streampark-console/streampark-console-newui/public/resource/fonts/devanagari-2.woff2
b/streampark-console/streampark-console-newui/public/resource/fonts/devanagari-2.woff2
new file mode 100644
index 000000000..7850aa30a
Binary files /dev/null and
b/streampark-console/streampark-console-newui/public/resource/fonts/devanagari-2.woff2
differ
diff --git
a/streampark-console/streampark-console-newui/public/resource/fonts/devanagari-3.woff2
b/streampark-console/streampark-console-newui/public/resource/fonts/devanagari-3.woff2
new file mode 100644
index 000000000..742e14424
Binary files /dev/null and
b/streampark-console/streampark-console-newui/public/resource/fonts/devanagari-3.woff2
differ
diff --git
a/streampark-console/streampark-console-newui/public/resource/fonts/latin-1.woff2
b/streampark-console/streampark-console-newui/public/resource/fonts/latin-1.woff2
new file mode 100644
index 000000000..b69e0091c
Binary files /dev/null and
b/streampark-console/streampark-console-newui/public/resource/fonts/latin-1.woff2
differ
diff --git
a/streampark-console/streampark-console-newui/public/resource/fonts/latin-2.woff2
b/streampark-console/streampark-console-newui/public/resource/fonts/latin-2.woff2
new file mode 100644
index 000000000..c6603368b
Binary files /dev/null and
b/streampark-console/streampark-console-newui/public/resource/fonts/latin-2.woff2
differ
diff --git
a/streampark-console/streampark-console-newui/public/resource/fonts/latin-3.woff2
b/streampark-console/streampark-console-newui/public/resource/fonts/latin-3.woff2
new file mode 100644
index 000000000..bf022fc77
Binary files /dev/null and
b/streampark-console/streampark-console-newui/public/resource/fonts/latin-3.woff2
differ
diff --git
a/streampark-console/streampark-console-newui/public/resource/fonts/latin-ext-1.woff2
b/streampark-console/streampark-console-newui/public/resource/fonts/latin-ext-1.woff2
new file mode 100644
index 000000000..c871a3e7f
Binary files /dev/null and
b/streampark-console/streampark-console-newui/public/resource/fonts/latin-ext-1.woff2
differ
diff --git
a/streampark-console/streampark-console-newui/public/resource/fonts/latin-ext-2.woff2
b/streampark-console/streampark-console-newui/public/resource/fonts/latin-ext-2.woff2
new file mode 100644
index 000000000..ba96dfd0f
Binary files /dev/null and
b/streampark-console/streampark-console-newui/public/resource/fonts/latin-ext-2.woff2
differ
diff --git
a/streampark-console/streampark-console-newui/public/resource/fonts/latin-ext-3.woff2
b/streampark-console/streampark-console-newui/public/resource/fonts/latin-ext-3.woff2
new file mode 100644
index 000000000..c1ee9a8c8
Binary files /dev/null and
b/streampark-console/streampark-console-newui/public/resource/fonts/latin-ext-3.woff2
differ
diff --git
a/streampark-console/streampark-console-newui/src/assets/icons/block.svg
b/streampark-console/streampark-console-newui/src/assets/icons/block.svg
new file mode 100644
index 000000000..64c6c4cf8
--- /dev/null
+++ b/streampark-console/streampark-console-newui/src/assets/icons/block.svg
@@ -0,0 +1,3 @@
+<svg width="200" height="200" viewBox="0 0 200 200"
xmlns="http://www.w3.org/2000/svg";>
+ <path fill="currentColor"
d="M42.5,-66.2C57.1,-56.7,72.5,-48.4,81.1,-35.3C89.8,-22.2,91.8,-4.4,89.6,13C87.3,30.4,80.7,47.4,69.5,60.1C58.3,72.9,42.4,81.5,25.9,84.6C9.5,87.8,-7.4,85.4,-22.7,79.8C-37.9,74.1,-51.5,65.2,-60.9,53.3C-70.4,41.4,-75.8,26.6,-79,10.8C-82.1,-5,-83.1,-21.7,-77.7,-36.4C-72.4,-51,-60.7,-63.7,-46.7,-73.5C-32.7,-83.3,-16.4,-90.1,-1.2,-88.2C13.9,-86.3,27.8,-75.7,42.5,-66.2Z"
transform="translate(100 100)" />
+</svg>
diff --git
a/streampark-console/streampark-console-newui/src/assets/icons/dynamic-avatar-1.svg
b/streampark-console/streampark-console-newui/src/assets/icons/dynamic-avatar-1.svg
deleted file mode 100644
index e1553e50e..000000000
---
a/streampark-console/streampark-console-newui/src/assets/icons/dynamic-avatar-1.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg"; viewBox="0 0 391.31
560.11"><defs><style>.cls-1{fill:#f9cdb7;}.cls-2{fill:#e2a78d;}.cls-3{fill:#213346;}.cls-4{fill:#bfe1ee;}.cls-5{fill:#dfe7ea;}.cls-6{fill:#b46078;}.cls-7{fill:#96426e;}.cls-8{fill:#fff;}.cls-9{fill:#fefdf5;}.cls-10{fill:#f4eae1;}.cls-11{fill:#f9637c;}.cls-12{fill:#ba4264;}.cls-13{fill:#b13a59;}</style></defs><title>Asset
15</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2"
data-name="Layer 1"><circle class="cls-1" cx= [...]
\ No newline at end of file
diff --git
a/streampark-console/streampark-console-newui/src/assets/icons/dynamic-avatar-2.svg
b/streampark-console/streampark-console-newui/src/assets/icons/dynamic-avatar-2.svg
deleted file mode 100644
index c4c172233..000000000
---
a/streampark-console/streampark-console-newui/src/assets/icons/dynamic-avatar-2.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg"; viewBox="0 0 379.47
510.81"><defs><style>.cls-1{fill:#dfe7ea;}.cls-2{fill:#ceea57;}.cls-3{fill:#213346;}.cls-4{fill:#95bc4a;}.cls-5{fill:#bfe1ee;}.cls-11,.cls-6{fill:#fff;}.cls-7{fill:#f5a2c6;}.cls-8{fill:#d676a3;}.cls-9{fill:#f9637c;}.cls-10{fill:#cc3656;}.cls-11{opacity:0.5;}.cls-12{fill:#f6aecd;}.cls-13{fill:#86b9f8;}.cls-14{fill:#7662fa;}</style></defs><title>Asset
16</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2"
data-name="Layer [...]
\ No newline at end of file
diff --git
a/streampark-console/streampark-console-newui/src/assets/icons/dynamic-avatar-3.svg
b/streampark-console/streampark-console-newui/src/assets/icons/dynamic-avatar-3.svg
deleted file mode 100644
index 81145f9b4..000000000
---
a/streampark-console/streampark-console-newui/src/assets/icons/dynamic-avatar-3.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg"; viewBox="0 0 391.79
532.35"><defs><style>.cls-1{fill:#f9cdb7;}.cls-2{fill:#e2a78d;}.cls-3{fill:#213346;}.cls-4{fill:#bfe1ee;}.cls-5{fill:#dfe7ea;}.cls-6{fill:#e99a4f;}.cls-7{fill:#ce7149;}.cls-8,.cls-9{fill:#fff;}.cls-9{opacity:0.5;}</style></defs><title>Asset
17</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2"
data-name="Layer 1"><circle class="cls-1" cx="345.9" cy="275.59"
r="41.4"/><path class="cls-2" d="M333.5,312.37a41.4,41.4,0,1,0 [...]
\ No newline at end of file
diff --git
a/streampark-console/streampark-console-newui/src/assets/icons/dynamic-avatar-4.svg
b/streampark-console/streampark-console-newui/src/assets/icons/dynamic-avatar-4.svg
deleted file mode 100644
index e586ed4e6..000000000
---
a/streampark-console/streampark-console-newui/src/assets/icons/dynamic-avatar-4.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg"; viewBox="0 0 464.12
605.75"><defs><style>.cls-1{fill:#dfe7ea;}.cls-2{fill:#f0d7c2;}.cls-3{fill:#d7ad8c;}.cls-4{fill:#c4987a;}.cls-5{fill:#8376a5;}.cls-6{fill:#655a8e;}.cls-7{fill:#ebcbac;}.cls-16,.cls-8,.cls-9{fill:none;stroke:#42565e;stroke-miterlimit:10;}.cls-8{stroke-linecap:round;}.cls-8,.cls-9{stroke-width:10px;}.cls-9{stroke-linecap:square;}.cls-10{fill:#dcb79b;}.cls-11{fill:#fff;}.cls-12{fill:#40565a;}.cls-13{fill:#a699d6;}.cls-14{fill:#485d
[...]
\ No newline at end of file
diff --git
a/streampark-console/streampark-console-newui/src/assets/icons/dynamic-avatar-5.svg
b/streampark-console/streampark-console-newui/src/assets/icons/dynamic-avatar-5.svg
deleted file mode 100644
index 746e4b888..000000000
---
a/streampark-console/streampark-console-newui/src/assets/icons/dynamic-avatar-5.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg"; viewBox="0 0 485.29
648.83"><defs><style>.cls-1{fill:#485d63;}.cls-2{fill:#dfe7ea;}.cls-3{fill:#f0d7c2;}.cls-4{fill:#e8bc70;}.cls-5{fill:#9e8863;}.cls-6{fill:#eace9b;}.cls-7{fill:#ebcbac;}.cls-8{fill:#d7ad8c;}.cls-9{fill:#fff;}.cls-10{fill:#ebdce8;}.cls-11,.cls-12,.cls-13,.cls-15,.cls-16{fill:none;stroke:#42565e;stroke-miterlimit:10;}.cls-11{stroke-linecap:square;}.cls-11,.cls-15,.cls-16{stroke-width:10px;}.cls-12,.cls-13{stroke-width:8px;}.cls-13,
[...]
\ No newline at end of file
diff --git
a/streampark-console/streampark-console-newui/src/assets/icons/dynamic-avatar-6.svg
b/streampark-console/streampark-console-newui/src/assets/icons/dynamic-avatar-6.svg
deleted file mode 100644
index b2432f225..000000000
---
a/streampark-console/streampark-console-newui/src/assets/icons/dynamic-avatar-6.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg"; viewBox="0 0 586.2
682.51"><defs><style>.cls-1{fill:#dfe7ea;}.cls-2{fill:#b0d7e9;}.cls-3{fill:#54b9d3;}.cls-4{fill:#f2c7a5;}.cls-20,.cls-5{opacity:0.5;}.cls-6{fill:#ffac89;}.cls-14,.cls-7{fill:none;stroke-miterlimit:10;stroke-width:10px;}.cls-7{stroke:#274b5b;}.cls-20,.cls-8{fill:#ef997b;}.cls-9{fill:#fcdac3;}.cls-10{fill:#fff;}.cls-11{fill:#274b5b;}.cls-12{fill:#3b535c;}.cls-13{fill:#d9edf4;}.cls-14{stroke:#42565e;stroke-linecap:round;}.cls-15{fil
[...]
\ No newline at end of file
diff --git
a/streampark-console/streampark-console-newui/src/views/base/login/ForgetPasswordForm.vue
b/streampark-console/streampark-console-newui/src/views/base/login/ForgetPasswordForm.vue
deleted file mode 100644
index 5cc2698f8..000000000
---
a/streampark-console/streampark-console-newui/src/views/base/login/ForgetPasswordForm.vue
+++ /dev/null
@@ -1,80 +0,0 @@
-<!--
- 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
-
- https://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.
--->
-<template>
- <template v-if="getShow">
- <LoginFormTitle class="enter-x" />
- <Form class="p-4 enter-x" :model="formData" :rules="getFormRules"
ref="formRef">
- <FormItem name="account" class="enter-x">
- <Input
- size="large"
- v-model:value="formData.account"
- :placeholder="t('sys.login.userName')"
- />
- </FormItem>
-
- <FormItem name="mobile" class="enter-x">
- <Input size="large" v-model:value="formData.mobile"
:placeholder="t('sys.login.mobile')" />
- </FormItem>
- <FormItem name="sms" class="enter-x">
- <CountdownInput
- size="large"
- v-model:value="formData.sms"
- :placeholder="t('sys.login.smsCode')"
- />
- </FormItem>
-
- <FormItem class="enter-x">
- <Button type="primary" size="large" block @click="handleReset"
:loading="loading">
- {{ t('common.resetText') }}
- </Button>
- <Button size="large" block class="mt-4" @click="handleBackLogin">
- {{ t('sys.login.backSignIn') }}
- </Button>
- </FormItem>
- </Form>
- </template>
-</template>
-<script lang="ts" setup>
- import { reactive, ref, computed, unref } from 'vue';
- import LoginFormTitle from './LoginFormTitle.vue';
- import { Form, Input, Button } from 'ant-design-vue';
- import { CountdownInput } from '/@/components/CountDown';
- import { useI18n } from '/@/hooks/web/useI18n';
- import { useLoginState, useFormRules, LoginStateEnum } from './useLogin';
-
- const FormItem = Form.Item;
- const { t } = useI18n();
- const { handleBackLogin, getLoginState } = useLoginState();
- const { getFormRules } = useFormRules();
-
- const formRef = ref();
- const loading = ref(false);
-
- const formData = reactive({
- account: '',
- mobile: '',
- sms: '',
- });
-
- const getShow = computed(() => unref(getLoginState) ===
LoginStateEnum.RESET_PASSWORD);
-
- async function handleReset() {
- const form = unref(formRef);
- if (!form) return;
- await form.resetFields();
- }
-</script>
diff --git
a/streampark-console/streampark-console-newui/src/views/base/login/Login.vue
b/streampark-console/streampark-console-newui/src/views/base/login/Login.vue
index 0b2ad2e3e..bb8ad3bbe 100644
--- a/streampark-console/streampark-console-newui/src/views/base/login/Login.vue
+++ b/streampark-console/streampark-console-newui/src/views/base/login/Login.vue
@@ -15,25 +15,73 @@
limitations under the License.
-->
<template>
- <div :class="prefixCls" class="relative w-full h-full px-4">
- <div class="relative h-full">
- <div class="flex h-full">
- <div class="flex w-full h-full py-5 xl:h-auto xl:py-0 xl:my-0">
+ <div
+ class="w-full bg-light-200 relative section bg-gradient-primary pb-260px
md:pt-130px px-50px overflow-hidden"
+ >
+ <div class="overlay bg-gradient-primary !opacity-90 -z-1"></div>
+
+ <figure class="scribble scale-4 !opacity-10 top-50 left-0">
+ <SvgIcon name="block" class="text-secondary" :size="200" />
+ </figure>
+
+ <figure class="scribble scale-5 !opacity-10 top-50 left-0">
+ <SvgIcon name="block" class="text-secondary" :size="200" />
+ </figure>
+
+ <figure class="scribble scale-6 !opacity-10 top-50 left-0">
+ <SvgIcon name="block" class="text-secondary" :size="200" />
+ </figure>
+
+ <figure class="scribble scale-7 !opacity-10 top-50 left-0">
+ <SvgIcon name="block" class="text-secondary" :size="200" />
+ </figure>
+ <div class="container px-7 pb-2">
+ <Row :gutter="24">
+ <Col :md="12" :span="24" class="self-center pr-5 z-100 -enter-x">
+ <LoginSlogan />
+ </Col>
+ <Col :md="12" :span="24">
<div
:class="`${prefixCls}-form`"
- class="relative w-auto px-12 bg-[rgba(0,0,0,0.4)] py-5 mx-auto
my-auto shadow-md enter-y"
+ class="relative w-auto m-auto max-w-460px px-12
bg-[rgba(0,0,0,0.5)] rounded-5px py-5 shadow-2xl shadow-blue-500 enter-x z-100"
>
<LoginForm />
</div>
- </div>
- </div>
+ </Col>
+ </Row>
</div>
+
+ <figure class="absolute -bottom-1 left-0 right-0 top-auto text-light-200
mb-0 z-8">
+ <svg
+ class="waves"
+ xmlns="http://www.w3.org/2000/svg";
+ xmlns:xlink="http://www.w3.org/1999/xlink";
+ viewBox="0 24 150 28"
+ preserveAspectRatio="none"
+ shape-rendering="auto"
+ >
+ <defs>
+ <path
+ id="gentle-wave"
+ d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18
v44h-352z"
+ />
+ </defs>
+ <g class="parallax">
+ <use xlink:href="#gentle-wave" x="48" y="0"
fill="rgba(255,255,255,0.7" />
+ <use xlink:href="#gentle-wave" x="48" y="3"
fill="rgba(255,255,255,0.5)" />
+ <use xlink:href="#gentle-wave" x="48" y="5"
fill="rgba(255,255,255,0.3)" />
+ <use xlink:href="#gentle-wave" x="48" y="7" fill="#fff" />
+ </g>
+ </svg>
+ </figure>
</div>
</template>
<script lang="ts" setup>
import LoginForm from './LoginForm.vue';
+ import LoginSlogan from './LoginSlogan';
import { useDesign } from '/@/hooks/web/useDesign';
-
+ import { Row, Col } from 'ant-design-vue';
+ import { SvgIcon } from '/@/components/Icon';
defineProps({
sessionTimeout: {
type: Boolean,
@@ -55,122 +103,80 @@
box-shadow: inherit !important;
}
- .@{prefix-cls} {
- min-height: 100%;
- overflow: hidden;
- background: url('/@/assets/images/sign-bg.jpg') no-repeat 50%;
- background-size: cover;
-
- .ant-input-affix-wrapper {
- border: 1px solid rgba(@active-color, 0.55);
- border-radius: 1px;
- color: rgba(@active-color, 0.65);
- margin-top: 10px;
- background-color: rgba(@active-color, 0.05) !important;
- }
-
- .signin-title {
- padding-top: 20px;
- font-size: 16px;
- color: rgba(255, 255, 255, 0.65);
- margin-top: 12px;
- margin-bottom: 20px;
- }
-
- .logo {
- padding-top: 20px;
- height: 130px;
- margin: auto;
- }
-
- .signin-form {
- .ant-form-item-has-error
:not(.ant-input-disabled):not(.ant-input-borderless).ant-input {
- background-color: transparent !important;
- }
+ .bg-gradient-primary {
+ background-image: linear-gradient(
+ 130deg,
+ #0e18d2 15%,
+ #3172f5 40%,
+ #3172f5 60%,
+ #60cff2 100%
+ ) !important;
+ }
- .ant-input {
- padding-top: 3px;
- padding-bottom: 3px;
- color: @white;
+ .overlay {
+ border-radius: inherit;
+ height: 100%;
+ left: 0;
+ opacity: 0.5;
+ position: absolute;
+ top: 0;
+ width: 100%;
+ }
- .ant-input-affix-wrapper:hover,
- .ant-input:not(.ant-input-disabled) {
- border-color: rgba(@active-color, 0.95);
- }
- }
- .ant-input-password-icon {
- color: @content-bg !important;
- }
- .signin-btn {
- .ant-btn {
- margin-top: 30px;
- height: 40px;
- background: rgba(@active-color, 0.4);
- border: unset;
- }
- }
+ .@{prefix-cls}-form {
+ .ant-input {
+ padding-top: 3px;
+ padding-bottom: 3px;
- .text-left {
- .ant-btn {
- padding: 0px;
- }
+ .ant-input-affix-wrapper:hover,
+ .ant-input:not(.ant-input-disabled) {
+ border-color: rgba(@active-color, 0.95);
}
}
-
- &::after {
- content: '';
- width: 100%;
- position: absolute;
- left: 0;
- top: 0;
- bottom: -20px;
- background: inherit;
- z-index: 2;
- filter: blur(1px);
- }
-
- &-sign-in-way {
- .anticon {
- font-size: 22px;
- color: #888;
- cursor: pointer;
-
- &:hover {
- color: @primary-color;
- }
- }
+ .form-title {
+ font-family: Poppins, sans-serif !important;
}
-
- input {
- min-width: 300px;
- background: transparent;
- &:autofill {
- background: transparent;
- }
- @media (max-width: @screen-xl) {
- min-width: 260px;
- }
-
- @media (max-width: @screen-lg) {
- min-width: 200px;
- }
-
- @media (max-width: @screen-md) {
- min-width: 180px;
- }
-
- @media (max-width: @screen-sm) {
- min-width: 100px;
+ .text-left {
+ .ant-btn {
+ padding: 0px;
}
}
+ }
- .@{countdown-prefix-cls} input {
- min-width: unset;
+ .waves {
+ position: relative;
+ width: 100%;
+ height: 24vh;
+ margin-bottom: -7px; /* 修复 Safari 等浏览器下方空隙 */
+ min-height: 150px;
+ max-height: 280px;
+ width: 100%;
+ }
+ .parallax > use {
+ animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
+ }
+ .parallax > use:nth-child(1) {
+ animation-delay: -2s;
+ animation-duration: 7s;
+ }
+ .parallax > use:nth-child(2) {
+ animation-delay: -3s;
+ animation-duration: 8s;
+ }
+ .parallax > use:nth-child(3) {
+ animation-delay: -4s;
+ animation-duration: 9s;
+ }
+ .parallax > use:nth-child(4) {
+ animation-delay: -5s;
+ animation-duration: 10s;
+ }
+ @keyframes move-forever {
+ 0% {
+ transform: translate3d(-90px, 0, 0);
}
-
- .ant-divider-inner-text {
- font-size: 12px;
- color: @text-color-secondary;
+ 100% {
+ transform: translate3d(85px, 0, 0);
}
}
</style>
diff --git
a/streampark-console/streampark-console-newui/src/views/base/login/LoginForm.vue
b/streampark-console/streampark-console-newui/src/views/base/login/LoginForm.vue
index e8b9b5a12..2e7866465 100644
---
a/streampark-console/streampark-console-newui/src/views/base/login/LoginForm.vue
+++
b/streampark-console/streampark-console-newui/src/views/base/login/LoginForm.vue
@@ -15,7 +15,12 @@
limitations under the License.
-->
<template>
- <LoginFormTitle v-show="getShow" class="enter-x mb-40px text-light-50" />
+ <div class="enter-x mb-20px text-light-50">
+ <div class="text-center enter-x">
+ <img class="logo w-140px mx-auto my-30px"
src="/@/assets/images/logo.png" />
+ <div class="text-4xl form-title">{{ title }}</div>
+ </div>
+ </div>
<Form
class="p-4 enter-x signin-form"
:model="formData"
@@ -28,6 +33,7 @@
<FormItem name="account" class="enter-x">
<Input
v-model:value="formData.account"
+ size="large"
:placeholder="t('sys.login.userName')"
class="fix-auto-fill"
>
@@ -39,6 +45,7 @@
<FormItem name="password" class="enter-x">
<InputPassword
visibilityToggle
+ size="large"
v-model:value="formData.password"
:placeholder="t('sys.login.password')"
>
@@ -47,8 +54,15 @@
</template>
</InputPassword>
</FormItem>
- <FormItem class="enter-x signin-btn">
- <Button type="primary" block @click="handleLogin" :loading="loading">
+ <FormItem class="enter-x">
+ <Button
+ type="primary"
+ class="my-10px"
+ size="large"
+ block
+ @click="handleLogin"
+ :loading="loading"
+ >
{{ loginText.buttonText }}
</Button>
</FormItem>
@@ -63,10 +77,10 @@
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
import { Form, Input, Button } from 'ant-design-vue';
- import LoginFormTitle from './LoginFormTitle.vue';
import { useI18n } from '/@/hooks/web/useI18n';
import { useMessage } from '/@/hooks/web/useMessage';
+ import { useGlobSetting } from '/@/hooks/setting';
import { useUserStore } from '/@/store/modules/user';
import {
@@ -86,6 +100,7 @@
const FormItem = Form.Item;
const InputPassword = Input.Password;
+ const { title } = useGlobSetting();
const { t } = useI18n();
const { createErrorModal, createMessage } = useMessage();
const { prefixCls } = useDesign('login');
diff --git
a/streampark-console/streampark-console-newui/src/views/base/login/LoginFormTitle.vue
b/streampark-console/streampark-console-newui/src/views/base/login/LoginFormTitle.vue
deleted file mode 100644
index e7c2dd61e..000000000
---
a/streampark-console/streampark-console-newui/src/views/base/login/LoginFormTitle.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-<!--
- 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
-
- https://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.
--->
-<template>
- <div class="text-center enter-x">
- <img class="logo" src="/@/assets/images/logo.png">
- <div class="signin-title">
- StreamPark ── Make stream processing easier!
- </div>
- </div>
-</template>
-<script lang="ts" setup>
- import { computed, unref } from 'vue';
- import { useI18n } from '/@/hooks/web/useI18n';
- import { LoginStateEnum, useLoginState } from './useLogin';
-
- const { t } = useI18n();
-
- const { getLoginState } = useLoginState();
-
- const getFormTitle = computed(() => {
- const titleObj = {
- [LoginStateEnum.RESET_PASSWORD]: t('sys.login.forgetFormTitle'),
- [LoginStateEnum.LOGIN]: t('sys.login.signInFormTitle'),
- [LoginStateEnum.REGISTER]: t('sys.login.signUpFormTitle'),
- [LoginStateEnum.MOBILE]: t('sys.login.mobileSignInFormTitle'),
- [LoginStateEnum.QR_CODE]: t('sys.login.qrSignInFormTitle'),
- };
- return titleObj[unref(getLoginState)];
- });
-</script>
diff --git
a/streampark-console/streampark-console-newui/src/views/base/login/LoginSlogan.less
b/streampark-console/streampark-console-newui/src/views/base/login/LoginSlogan.less
new file mode 100644
index 000000000..d298fd386
--- /dev/null
+++
b/streampark-console/streampark-console-newui/src/views/base/login/LoginSlogan.less
@@ -0,0 +1,312 @@
+/*
+ * 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
+ *
+ * https://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.
+ */
+.scribble:not(.position-relative) {
+ position: absolute;
+}
+
+.scribble svg {
+ background: none !important;
+}
+
+.scale-2 svg {
+ transform: scale(2);
+}
+
+.scale-3 svg {
+ transform: scale(3);
+}
+
+.scale-4 svg {
+ transform: scale(4);
+}
+
+.scale-5 svg {
+ transform: scale(5);
+}
+
+.scale-6 svg {
+ transform: scale(6);
+}
+
+.scale-7 svg {
+ transform: scale(7);
+}
+
+.text-secondary {
+ color: #1d253d !important;
+}
+
+.animated-gradient-text_background {
+ position: relative;
+ display: block;
+ user-select: none;
+}
+
+.animated-gradient-text_background-1::before {
+ animation: animated-gradient-text_fade-background-1 8s infinite;
+}
+
+.animated-gradient-text_foreground-1 {
+ animation: animated-gradient-text_fade-foreground-1 8s infinite;
+}
+
+.animated-gradient-text_background-2::before {
+ animation: animated-gradient-text_fade-background-2 8s infinite;
+}
+
+.animated-gradient-text_foreground-2 {
+ animation: animated-gradient-text_fade-foreground-2 8s infinite;
+}
+
+.animated-gradient-text_foreground {
+ background-clip: text;
+ -webkit-text-fill-color: transparent;
+ padding-left: 0.5rem;
+ padding-right: 0.5rem;
+ background-image: linear-gradient(90deg, var(--start-color),
var(--end-color));
+ position: relative;
+ z-index: 1;
+}
+
+.animated-gradient-text_background::before {
+ content: var(--content);
+ position: absolute;
+ display: block;
+ width: 100%;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ z-index: 0;
+ padding-left: 0.5rem;
+ padding-right: 0.5rem;
+}
+
+@keyframes animated-gradient-text_fade-foreground-1 {
+
+ 0%,
+ 16.667%,
+ to {
+ opacity: 1;
+ }
+
+ 50% {
+ opacity: 0;
+ }
+}
+
+@keyframes animated-gradient-text_fade-background-1 {
+
+ 0%,
+ 16.667%,
+ to {
+ opacity: 0;
+ }
+
+ 50% {
+ opacity: 1;
+ }
+}
+
+@keyframes animated-gradient-text_fade-foreground-2 {
+
+ 0%,
+ to {
+ opacity: 0;
+ }
+
+ 50% {
+ opacity: 1;
+ }
+
+ 16.667%,
+ 66.667% {
+ opacity: 0;
+ }
+}
+
+@keyframes animated-gradient-text_fade-background-2 {
+
+ 0%,
+ to {
+ opacity: 1;
+ }
+
+ 50% {
+ opacity: 0;
+ }
+
+ 25%,
+ 58.333% {
+ opacity: 1;
+ }
+}
+
+.system_info {
+ font-family: Poppins, sans-serif !important;
+}
+
+@media only screen and (min-width: 576px) and (max-width: 767px) {
+ .system_info {
+ padding-top: 40px;
+ margin-bottom: 0;
+ }
+}
+
+@media only screen and (max-width: 575px) {
+ .system_info {
+ padding-top: 30px;
+ margin-bottom: 0;
+ }
+}
+
+.system_info .project_title {
+ font-size: 4.5875rem;
+ margin-bottom: 15px;
+ font-weight: bolder;
+ line-height: 6.5rem;
+}
+
+.system_info h5 {
+ font-weight: 500;
+ font-size: 1.1rem;
+ line-height: 2;
+ color: #333;
+}
+
+.text-bg {
+ background-clip: text;
+ -webkit-text-fill-color: transparent;
+ padding-left: 0.5rem;
+ padding-right: 0.5rem;
+ background-image: linear-gradient(90deg, #007cf0, #00dfd8);
+}
+
+.streamx-btn {
+ color: #fff;
+ position: relative;
+ z-index: 1;
+ border: 2px solid transparent;
+ display: inline-block;
+ font-size: 0.875rem;
+ font-weight: 600;
+ padding: 1rem 1.5rem;
+ border-radius: 6px;
+ line-height: 1;
+ text-transform: uppercase;
+
+ &::before {
+ content: "";
+ position: absolute;
+ z-index: -1;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ display: inline-block;
+ transform: scaleX(0);
+ transform-origin: 51%;
+ transition-property: transform;
+ transition-duration: 0.3s;
+ border-radius: 6px;
+ border: none;
+ }
+
+ &.btn {
+ background-color: #2872ff; //
+ color: #fff;
+ border: 0;
+ max-width: 220px;
+ height: 45px;
+ position: relative;
+
+ &::before {
+ background: #0d6efd;
+ }
+
+ &:hover,
+ &:focus {
+ background-color: #588af2;
+ border: 0;
+ color: #fff;
+ }
+ }
+}
+
+.streamx-btn.btn-green:hover::before,
+.streamx-btn.btn:hover::before {
+ transform: scaleX(1);
+}
+
+.streamx-btn.btn-green {
+ background-color: #24a35a;
+}
+
+.streamx-btn.btn-green::before {
+ background: green;
+}
+
+.streamx-btn.btn-green:hover,
+.streamx-btn.btn-green:focus {
+ background-color: green;
+ border: 0;
+ color: #fff;
+}
+
+.streamx-btn.btn-purple::before {
+ background: #5e2ced;
+}
+
+.streamx-btn.btn-purple:hover,
+.streamx-btn.btn-purple:focus {
+ background: linear-gradient(-45deg, #5e2ced, #a485fd);
+ border: none;
+ color: #fff;
+}
+
+.shields img {
+ margin-right: 5px;
+}
+
+.badge {
+ border-radius: 30px 30px 30px 0;
+ display: inline-block;
+ font-size: 1rem;
+ line-height: 1;
+ padding: 0.25em 0.4em;
+ text-align: center;
+ vertical-align: initial;
+}
+
+.bg-secondary-home {
+ background-color: #1d253d !important;
+}
+
+.translate-top-1 {
+ transform: translate(0, -1rem);
+}
+
+.translate-bottom-1 {
+ transform: translate(0, 1rem);
+}
+
+.translate-top-2 {
+ transform: translate(0, -2rem);
+}
+
+.translate-bottom-2 {
+ transform: translate(0, 2rem);
+}
diff --git
a/streampark-console/streampark-console-newui/src/views/base/login/LoginSlogan.tsx
b/streampark-console/streampark-console-newui/src/views/base/login/LoginSlogan.tsx
new file mode 100644
index 000000000..e9e6060e4
--- /dev/null
+++
b/streampark-console/streampark-console-newui/src/views/base/login/LoginSlogan.tsx
@@ -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
+ *
+ * https://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.
+ */
+import { Tag } from 'ant-design-vue';
+import { defineComponent } from 'vue';
+import './LoginSlogan.less';
+import Icon from '/@/components/Icon';
+import { version } from '../../../../package.json';
+export default defineComponent({
+ name: 'LoginSlogan',
+ setup() {
+ return () => {
+ return (
+ <div className="!text-left mt-0">
+ <div className="mb-5 system_info pt-0">
+ <div className="project_title fw-bold text-white mb-3">
+ <div
+ className="animated-gradient-text_background
animated-gradient-text_background-1"
+ style={{
+ '--content': '"Apache"',
+ '--start-color': '#00DFD8',
+ '--end-color': '#FFF',
+ }}
+ >
+ <span className="animated-gradient-text_foreground
animated-gradient-text_foreground-1">
+ Apache
+ </span>
+ </div>
+ <div className="flex items-start">
+ <div
+ className="animated-gradient-text_background
animated-gradient-text_background-2"
+ style={{
+ '--content': '"StreamPark"',
+ '--start-color': '#FFF',
+ '--end-color': '#00DFD8',
+ }}
+ >
+ <span className="animated-gradient-text_foreground
animated-gradient-text_foreground-2">
+ StreamPark
+ </span>
+ </div>
+ <span className="badge bg-secondary-home text-xl
tag">Incubating</span>
+ </div>
+ </div>
+ <p className=" text-light-200 leading-40px" style={{ fontSize:
'20px' }}>
+ Make stream processing easier! easy-to-use streaming application
development framework
+ and operation platform
+ </p>
+ </div>
+ <div className="flex items-center mt-10">
+ <a
+ className="btn streamx-btn btn !flex items-center"
+ href="https://github.com/apache/incubator-streampark";
+ target="_blank"
+ >
+ <Icon icon="ant-design:github-filled"></Icon>
+ <div> GitHub</div>
+ </a>
+ <a
+ className="btn streamx-btn btn-green !flex items-center ml-10px"
+ href="https://streampark.apache.org/docs/intro";
+ target="_blank"
+ >
+ <Icon icon="carbon:document"></Icon>
+ <div> Document</div>
+ </a>
+ </div>
+
+ <div className="mt-20px shields z-3 flex items-center">
+ <img
+
src="https://img.shields.io/github/stars/apache/incubator-streampark.svg?sanitize=true";
+ className="wow fadeInUp"
+ ></img>
+ <img
+
src="https://img.shields.io/github/forks/apache/incubator-streampark.svg?sanitize=true";
+ className="wow fadeInUp"
+ ></img>
+ </div>
+ <div className="mt-20px shields z-3 flex items-center">
+ <Tag color="#477de9">Version: v{version}</Tag>
+ </div>
+ </div>
+ );
+ };
+ },
+});
diff --git
a/streampark-console/streampark-console-newui/src/views/base/login/MobileForm.vue
b/streampark-console/streampark-console-newui/src/views/base/login/MobileForm.vue
deleted file mode 100644
index 62820e0c1..000000000
---
a/streampark-console/streampark-console-newui/src/views/base/login/MobileForm.vue
+++ /dev/null
@@ -1,79 +0,0 @@
-<!--
- 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
-
- https://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.
--->
-<template>
- <template v-if="getShow">
- <LoginFormTitle class="enter-x" />
- <Form class="p-4 enter-x" :model="formData" :rules="getFormRules"
ref="formRef">
- <FormItem name="mobile" class="enter-x">
- <Input
- size="large"
- v-model:value="formData.mobile"
- :placeholder="t('sys.login.mobile')"
- class="fix-auto-fill"
- />
- </FormItem>
- <FormItem name="sms" class="enter-x">
- <CountdownInput
- size="large"
- class="fix-auto-fill"
- v-model:value="formData.sms"
- :placeholder="t('sys.login.smsCode')"
- />
- </FormItem>
-
- <FormItem class="enter-x">
- <Button type="primary" size="large" block @click="handleLogin"
:loading="loading">
- {{ t('sys.login.loginButton') }}
- </Button>
- <Button size="large" block class="mt-4" @click="handleBackLogin">
- {{ t('sys.login.backSignIn') }}
- </Button>
- </FormItem>
- </Form>
- </template>
-</template>
-<script lang="ts" setup>
- import { reactive, ref, computed, unref } from 'vue';
- import { Form, Input, Button } from 'ant-design-vue';
- import { CountdownInput } from '/@/components/CountDown';
- import LoginFormTitle from './LoginFormTitle.vue';
- import { useI18n } from '/@/hooks/web/useI18n';
- import { useLoginState, useFormRules, useFormValid, LoginStateEnum } from
'./useLogin';
-
- const FormItem = Form.Item;
- const { t } = useI18n();
- const { handleBackLogin, getLoginState } = useLoginState();
- const { getFormRules } = useFormRules();
-
- const formRef = ref();
- const loading = ref(false);
-
- const formData = reactive({
- mobile: '',
- sms: '',
- });
-
- const { validForm } = useFormValid(formRef);
-
- const getShow = computed(() => unref(getLoginState) ===
LoginStateEnum.MOBILE);
-
- async function handleLogin() {
- const data = await validForm();
- if (!data) return;
- console.log(data);
- }
-</script>
diff --git
a/streampark-console/streampark-console-newui/src/views/base/login/RegisterForm.vue
b/streampark-console/streampark-console-newui/src/views/base/login/RegisterForm.vue
deleted file mode 100644
index 7ea635ede..000000000
---
a/streampark-console/streampark-console-newui/src/views/base/login/RegisterForm.vue
+++ /dev/null
@@ -1,120 +0,0 @@
-<!--
- 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
-
- https://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.
--->
-<template>
- <template v-if="getShow">
- <LoginFormTitle class="enter-x" />
- <Form class="p-4 enter-x" :model="formData" :rules="getFormRules"
ref="formRef">
- <FormItem name="account" class="enter-x">
- <Input
- class="fix-auto-fill"
- size="large"
- v-model:value="formData.account"
- :placeholder="t('sys.login.userName')"
- />
- </FormItem>
- <FormItem name="mobile" class="enter-x">
- <Input
- size="large"
- v-model:value="formData.mobile"
- :placeholder="t('sys.login.mobile')"
- class="fix-auto-fill"
- />
- </FormItem>
- <FormItem name="sms" class="enter-x">
- <CountdownInput
- size="large"
- class="fix-auto-fill"
- v-model:value="formData.sms"
- :placeholder="t('sys.login.smsCode')"
- />
- </FormItem>
- <FormItem name="password" class="enter-x">
- <StrengthMeter
- size="large"
- v-model:value="formData.password"
- :placeholder="t('sys.login.password')"
- />
- </FormItem>
- <FormItem name="confirmPassword" class="enter-x">
- <InputPassword
- size="large"
- visibilityToggle
- v-model:value="formData.confirmPassword"
- :placeholder="t('sys.login.confirmPassword')"
- />
- </FormItem>
-
- <FormItem class="enter-x" name="policy">
- <!-- No logic, you need to deal with it yourself -->
- <Checkbox v-model:checked="formData.policy" size="small">
- {{ t('sys.login.policy') }}
- </Checkbox>
- </FormItem>
-
- <Button
- type="primary"
- class="enter-x"
- size="large"
- block
- @click="handleRegister"
- :loading="loading"
- >
- {{ t('sys.login.registerButton') }}
- </Button>
- <Button size="large" block class="mt-4 enter-x" @click="handleBackLogin">
- {{ t('sys.login.backSignIn') }}
- </Button>
- </Form>
- </template>
-</template>
-<script lang="ts" setup>
- import { reactive, ref, unref, computed } from 'vue';
- import LoginFormTitle from './LoginFormTitle.vue';
- import { Form, Input, Button, Checkbox } from 'ant-design-vue';
- import { StrengthMeter } from '/@/components/StrengthMeter';
- import { CountdownInput } from '/@/components/CountDown';
- import { useI18n } from '/@/hooks/web/useI18n';
- import { useLoginState, useFormRules, useFormValid, LoginStateEnum } from
'./useLogin';
-
- const FormItem = Form.Item;
- const InputPassword = Input.Password;
- const { t } = useI18n();
- const { handleBackLogin, getLoginState } = useLoginState();
-
- const formRef = ref();
- const loading = ref(false);
-
- const formData = reactive({
- account: '',
- password: '',
- confirmPassword: '',
- mobile: '',
- sms: '',
- policy: false,
- });
-
- const { getFormRules } = useFormRules(formData);
- const { validForm } = useFormValid(formRef);
-
- const getShow = computed(() => unref(getLoginState) ===
LoginStateEnum.REGISTER);
-
- async function handleRegister() {
- const data = await validForm();
- if (!data) return;
- console.log(data);
- }
-</script>
diff --git
a/streampark-console/streampark-console-newui/src/views/flink/app/Add.vue
b/streampark-console/streampark-console-newui/src/views/flink/app/Add.vue
index 07aa19f2f..97f058ba9 100644
--- a/streampark-console/streampark-console-newui/src/views/flink/app/Add.vue
+++ b/streampark-console/streampark-console-newui/src/views/flink/app/Add.vue
@@ -271,7 +271,10 @@
createMessage.warning('Flink Sql is required');
} else {
const access = await flinkSql?.value?.handleVerifySql();
- if (!access) return;
+ if (!access) {
+ createMessage.warning('SQL check error');
+ throw new Error(access);
+ }
}
}
if (formValue.jobType === 'customcode') {
@@ -295,8 +298,8 @@
const socketId = buildUUID();
ls.set('DOWN_SOCKET_ID', socketId);
Object.assign(param, { socketId });
- console.log('param', param);
const { data } = await fetchCreate(param as CreateParams);
+ submitLoading.value = false;
if (data.data) {
go('/flink/app');
} else {
diff --git
a/streampark-console/streampark-console-newui/src/views/flink/app/View.vue
b/streampark-console/streampark-console-newui/src/views/flink/app/View.vue
index f9bcf7028..4ea1855dc 100644
--- a/streampark-console/streampark-console-newui/src/views/flink/app/View.vue
+++ b/streampark-console/streampark-console-newui/src/views/flink/app/View.vue
@@ -145,15 +145,15 @@
optionApps[data.type].set(data.key, data.value);
}
- function handlePageDataReload() {
+ function handlePageDataReload(polling = false) {
nextTick(() => {
appDashboardRef.value?.handleDashboard(false);
- reload();
+ reload({ polling });
});
}
const { start, stop } = useTimeoutFn(() => {
if (!getLoading()) {
- handlePageDataReload();
+ handlePageDataReload(true);
}
start();
}, 2000);
diff --git
a/streampark-console/streampark-console-newui/src/views/flink/app/components/State.tsx
b/streampark-console/streampark-console-newui/src/views/flink/app/components/State.tsx
index 936586606..e61c6f487 100644
---
a/streampark-console/streampark-console-newui/src/views/flink/app/components/State.tsx
+++
b/streampark-console/streampark-console-newui/src/views/flink/app/components/State.tsx
@@ -32,7 +32,6 @@ const stateMap = {
8: { color: '#faad14', title: 'CANCELLING' },
9: { color: '#fa8c16', title: 'CANCELED' },
10: { color: '#1890ff', title: 'FINISHED' },
- 19: { color: '#1890ff', title: 'FINISHED' },
11: { color: '#722ed1', title: 'SUSPENDED' },
12: { color: '#eb2f96', title: 'RECONCILING', class:
'status-processing-reconciling' },
13: { color: '#000000', title: 'LOST' },
diff --git
a/streampark-console/streampark-console-newui/src/views/flink/app/components/flinkSql.vue
b/streampark-console/streampark-console-newui/src/views/flink/app/components/flinkSql.vue
index 5fe73489e..27d4afcba 100644
---
a/streampark-console/streampark-console-newui/src/views/flink/app/components/flinkSql.vue
+++
b/streampark-console/streampark-console-newui/src/views/flink/app/components/flinkSql.vue
@@ -79,6 +79,7 @@
});
const success = data.data === true || data.data === 'true';
if (success) {
+ vertifyRes.verified = true;
vertifyRes.errorMsg = '';
syntaxError();
return true;
@@ -93,7 +94,7 @@
vertifyRes.errorMsg = "SQL is not endWith ';'";
break;
default:
- vertifyRes.errorMsg = data.data.message;
+ vertifyRes.errorMsg = data.message;
break;
}
syntaxError();
@@ -104,7 +105,6 @@
return false;
}
}
- vertifyRes.verified = true;
}
async function syntaxError() {
@@ -112,7 +112,6 @@
if (editor) {
const model = editor.getModel();
const monaco = await getMonacoInstance();
-
if (vertifyRes.errorMsg) {
try {
monaco.editor.setModelMarkers(model, 'sql', [
diff --git
a/streampark-console/streampark-console-newui/src/views/flink/app/data/index.ts
b/streampark-console/streampark-console-newui/src/views/flink/app/data/index.ts
index 28bfd8897..17272eb5c 100644
---
a/streampark-console/streampark-console-newui/src/views/flink/app/data/index.ts
+++
b/streampark-console/streampark-console-newui/src/views/flink/app/data/index.ts
@@ -48,6 +48,7 @@ export const getAppColumns = (): BasicColumn[] => [
{ text: 'FAILED', value: '7' },
{ text: 'CANCELED', value: '9' },
{ text: 'FINISHED', value: '10' },
+ { text: 'SUSPENDED', value: '11' },
{ text: 'LOST', value: '13' },
{ text: 'SILENT', value: '17' },
{ text: 'TERMINATED', value: '18' },
diff --git
a/streampark-console/streampark-console-newui/src/views/flink/app/hooks/useAppTableAction.ts
b/streampark-console/streampark-console-newui/src/views/flink/app/hooks/useAppTableAction.ts
index e4d87a998..7616ad140 100644
---
a/streampark-console/streampark-console-newui/src/views/flink/app/hooks/useAppTableAction.ts
+++
b/streampark-console/streampark-console-newui/src/views/flink/app/hooks/useAppTableAction.ts
@@ -198,7 +198,7 @@ export const useAppTableAction = (
try {
await fetchAppRemove(app.id);
createMessage.success('delete successful');
- handlePageDataReload();
+ handlePageDataReload(false);
} catch (error) {
console.error(error);
} finally {
@@ -229,7 +229,7 @@ export const useAppTableAction = (
placeholder: 'Tags',
showSearch: true,
options: tagsOptions.value.map((t: Recordable) => ({ label: t,
value: t })),
- onChange: handlePageDataReload,
+ onChange: handlePageDataReload.bind(null, false),
},
},
{
@@ -242,7 +242,7 @@ export const useAppTableAction = (
options: users.value.map((u: Recordable) => {
return { label: u.nickName || u.username, value: u.userId };
}),
- onChange: handlePageDataReload,
+ onChange: handlePageDataReload.bind(null, false),
},
},
{
@@ -256,7 +256,7 @@ export const useAppTableAction = (
{ label: 'JAR', value: JobTypeEnum.JAR },
{ label: 'SQL', value: JobTypeEnum.SQL },
],
- onChange: handlePageDataReload,
+ onChange: handlePageDataReload.bind(null, false),
},
},
{
@@ -265,8 +265,8 @@ export const useAppTableAction = (
component: 'InputSearch',
componentProps: {
placeholder: 'Search',
- onChange: handlePageDataReload,
- onSearch: handlePageDataReload,
+ onChange: handlePageDataReload.bind(null, false),
+ onSearch: handlePageDataReload.bind(null, false),
},
},
],
diff --git
a/streampark-console/streampark-console-newui/src/views/flink/app/utils/index.ts
b/streampark-console/streampark-console-newui/src/views/flink/app/utils/index.ts
index ef09cfc85..cc2bd0e13 100644
---
a/streampark-console/streampark-console-newui/src/views/flink/app/utils/index.ts
+++
b/streampark-console/streampark-console-newui/src/views/flink/app/utils/index.ts
@@ -278,6 +278,6 @@ export function handleSubmitParams(
}
}
-export function filterOption(input, option) {
- return
option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase())
>= 0;
-}
+export const filterOption = (input: string, options: Recordable) => {
+ return options.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
+};
diff --git
a/streampark-console/streampark-console-newui/src/views/flink/project/useProject.ts
b/streampark-console/streampark-console-newui/src/views/flink/project/useProject.ts
index 7b5e45ae7..dec8b043a 100644
---
a/streampark-console/streampark-console-newui/src/views/flink/project/useProject.ts
+++
b/streampark-console/streampark-console-newui/src/views/flink/project/useProject.ts
@@ -20,9 +20,9 @@ import { computed, nextTick, reactive, ref, unref } from
'vue';
import { fetchBranches, getDetail, gitCheck, isExist } from
'/@/api/flink/project';
import { useForm } from '/@/components/Form';
import { useMessage } from '/@/hooks/web/useMessage';
-import { filterOption } from '../app/utils';
import { useRoute } from 'vue-router';
import { ProjectRecord } from '/@/api/flink/project/model/projectModel';
+import { filterOption } from '../app/utils';
export const useProject = () => {
const route = useRoute();
@@ -110,11 +110,15 @@ export const useProject = () => {
componentProps: ({ formModel }) => {
return {
showSearch: true,
- optionFilterProp: 'children',
filterOption,
placeholder: 'Select a branch',
options: unref(branchList),
- onClick: () => handleBranches(formModel),
+ onDropdownVisibleChange: (open: boolean) => {
+ console.log('open', open);
+ if (open) {
+ handleBranches(formModel);
+ }
+ },
};
},
},
@@ -193,7 +197,7 @@ export const useProject = () => {
if (branchList.value.length === 0) {
handleBranches(values);
}
- if (branchList.value.indexOf(values.branches) === -1) {
+ if (!branchList.value.find((v) => v.value == values.branches)) {
createErrorSwal(
'branch [' +
values.branches +
diff --git
a/streampark-console/streampark-console-webapp/src/views/system/user/UserAdd.vue
b/streampark-console/streampark-console-webapp/src/views/system/user/UserAdd.vue
index b40feb13c..9af83c04f 100644
---
a/streampark-console/streampark-console-webapp/src/views/system/user/UserAdd.vue
+++
b/streampark-console/streampark-console-webapp/src/views/system/user/UserAdd.vue
@@ -83,6 +83,7 @@
v-bind="formItemLayout">
<a-select
mode="single"
+ :getPopupContainer="(triggerNode) => triggerNode.parentNode"
:allow-clear="false"
style="width: 100%"
v-decorator="['userType',{rules: [{ required: true, message: 'please
select user type' }]}]">
![https://img.shields.io/github/stars/apache/incubator-streampark.svg?sanitize=true"](https://img.shields.io/github/stars/apache/incubator-streampark.svg?sanitize=true"){kind=link}
![https://img.shields.io/github/forks/apache/incubator-streampark.svg?sanitize=true"](https://img.shields.io/github/forks/apache/incubator-streampark.svg?sanitize=true"){kind=link}