From 300ad76b4666462c3d5b94f0cde56f242c798625 Mon Sep 17 00:00:00 2001
From: unitwk <unitwk@outlook.com>
Date: Wed, 27 Dec 2023 16:27:24 +0800
Subject: [PATCH] Feat: optimize login ui

---
 frontend/src/components/CardError.vue         |  6 +--
 frontend/src/hooks/useTerminal.ts             |  7 ++-
 frontend/src/widgets/LoginCard.vue            | 45 ++++++++++++++-----
 frontend/src/widgets/instance/ManagerBtns.vue |  8 +++-
 panel/src/app/service/frontend_layout.ts      |  2 +-
 5 files changed, 49 insertions(+), 19 deletions(-)

diff --git a/frontend/src/components/CardError.vue b/frontend/src/components/CardError.vue
index 92bb87b3..f8552bb4 100644
--- a/frontend/src/components/CardError.vue
+++ b/frontend/src/components/CardError.vue
@@ -1,11 +1,7 @@
 <script lang="ts" setup>
 import { t } from "@/lang/i18n";
 import { useLayoutContainerStore } from "@/stores/useLayoutContainerStore";
-import {
-  CloseCircleOutlined,
-  ExclamationCircleOutlined,
-  InfoCircleOutlined
-} from "@ant-design/icons-vue";
+import { CloseCircleOutlined, ExclamationCircleOutlined } from "@ant-design/icons-vue";
 
 const { containerState } = useLayoutContainerStore();
 CloseCircleOutlined;
diff --git a/frontend/src/hooks/useTerminal.ts b/frontend/src/hooks/useTerminal.ts
index 4ec3f9fa..acc46eab 100644
--- a/frontend/src/hooks/useTerminal.ts
+++ b/frontend/src/hooks/useTerminal.ts
@@ -152,8 +152,13 @@ export function useTerminal() {
     termFitAddon.value = fitAddon;
 
     term.onData((data) => {
-      socket?.emit("stream/stdin", { data });
+      socket?.emit("stream/write", {
+        data: {
+          input: data
+        }
+      });
     });
+
     term.writeln(
       `${TERM_COLOR.TERM_TEXT_GREEN}[MCSManager] ${TERM_COLOR.TERM_TEXT_GRAY}Instance app terminal.${TERM_COLOR.TERM_RESET}`
     );
diff --git a/frontend/src/widgets/LoginCard.vue b/frontend/src/widgets/LoginCard.vue
index 36442084..805c68a6 100644
--- a/frontend/src/widgets/LoginCard.vue
+++ b/frontend/src/widgets/LoginCard.vue
@@ -15,6 +15,7 @@ import { reportError } from "@/tools/validator";
 import { useAppStateStore } from "@/stores/useAppStateStore";
 import type { LayoutCard } from "@/types";
 import { markdownToHTML } from "@/tools/safe";
+import { message } from "ant-design-vue";
 
 const { state: pageInfoResult, execute } = loginPageInfo();
 
@@ -36,6 +37,10 @@ const { updateUserInfo, isAdmin } = useAppStateStore();
 const loginStep = ref(0);
 
 const handleLogin = async () => {
+  if (!formData.username.trim() || !formData.password.trim()) {
+    return message.error(t("请完善账号信息！"));
+  }
+
   loginStep.value++;
   await sleep(1500);
 
@@ -50,7 +55,6 @@ const handleLogin = async () => {
     await updateUserInfo();
     await loginSuccess();
   } catch (error: any) {
-    console.log(error);
     reportError(error.message ? error.message : error);
     loginStep.value--;
   }
@@ -135,21 +139,22 @@ const loginSuccess = () => {
                 </a>
               </div>
               <a-button size="large" type="primary" style="min-width: 95px" @click="handleLogin">
-                {{ t("TXT_CODE_940f7d5") }}
+                {{ t("确定") }}
               </a-button>
             </div>
           </div>
         </div>
         <div v-show="loginStep === 1" class="login-panel-body flex-center">
           <div style="text-align: center">
-            <LoadingOutlined :style="{ fontSize: '50px' }" />
+            <LoadingOutlined class="logging-icon" :style="{ fontSize: '62px', fontWeight: 800 }" />
           </div>
         </div>
         <div v-show="loginStep >= 2" class="login-panel-body flex-center">
           <div style="text-align: center">
             <CheckCircleOutlined
+              class="login-success-icon"
               :style="{
-                fontSize: '40px',
+                fontSize: '68px',
                 color: 'var(--color-green-6)'
               }"
             />
@@ -173,16 +178,10 @@ const loginSuccess = () => {
 
 <style lang="scss" scoped>
 .loginDone {
-  .login-page-container {
-    opacity: 0;
-    background-color: rgba(255, 255, 255, 0);
-    backdrop-filter: blur(0);
-    transform: scale(0.8) !important;
-  }
 }
 .logging {
   .login-panel {
-    transform: scale(0.8);
+    transform: scale(0.96);
   }
 }
 .login-panel {
@@ -208,6 +207,30 @@ const loginSuccess = () => {
     text-decoration: underline;
   }
 }
+.logging-icon {
+  animation: opacityAnimation 0.6s;
+}
+.login-success-icon {
+  animation: scaleAnimation 0.6s;
+}
+
+@keyframes opacityAnimation {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes scaleAnimation {
+  0% {
+    transform: scale(0);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
 
 @keyframes moveAnimation {
   0% {
diff --git a/frontend/src/widgets/instance/ManagerBtns.vue b/frontend/src/widgets/instance/ManagerBtns.vue
index 81577d80..e5635477 100644
--- a/frontend/src/widgets/instance/ManagerBtns.vue
+++ b/frontend/src/widgets/instance/ManagerBtns.vue
@@ -23,6 +23,7 @@ import PingConfig from "./dialogs/PingConfig.vue";
 import InstanceDetails from "./dialogs/InstanceDetails.vue";
 import { GLOBAL_INSTANCE_NAME } from "../../config/const";
 import type { RouteLocationPathRaw } from "vue-router";
+import { TYPE_UNIVERSAL, TYPE_WEB_SHELL } from "../../hooks/useInstance";
 const terminalConfigDialog = ref<InstanceType<typeof TermConfig>>();
 const eventConfigDialog = ref<InstanceType<typeof EventConfig>>();
 const pingConfigDialog = ref<InstanceType<typeof PingConfig>>();
@@ -73,7 +74,12 @@ const btns = computed(() =>
     {
       title: t("TXT_CODE_d07742fe"),
       icon: ControlOutlined,
-      condition: () => !isGlobalTerminal.value,
+      condition: () => {
+        return (
+          !isGlobalTerminal.value &&
+          ![TYPE_UNIVERSAL, TYPE_WEB_SHELL].includes(instanceInfo.value?.config.type || "")
+        );
+      },
       click: (): void => {
         toPage({
           path: "/instances/terminal/serverConfig",
diff --git a/panel/src/app/service/frontend_layout.ts b/panel/src/app/service/frontend_layout.ts
index 98fc2956..45d4f561 100644
--- a/panel/src/app/service/frontend_layout.ts
+++ b/panel/src/app/service/frontend_layout.ts
@@ -526,7 +526,7 @@ function getDefaultFrontendLayoutConfig(): IPageLayoutConfig[] {
           id: getRandomId(),
           meta: {},
           type: "LoginCard",
-          title: t("TXT_CODE_1f925226"),
+          title: t("身份验证"),
           width: 4,
           height: LayoutCardHeight.AUTO,
           disableDelete: true