From b0d5be7685c042c6698352b9af2b0f3b45d3d208 Mon Sep 17 00:00:00 2001
From: Linhao-Qian <17768709606@163.com>
Date: Sat, 27 Jul 2024 19:53:06 +0800
Subject: [PATCH] [linkis-web-next]: Refactored Navbar & Login Page

---
 linkis-web-next/src/App.vue                   |   2 -
 .../src/components/sidebar/index.less         |   2 +-
 linkis-web-next/src/dss/view/login/index.vue  | 181 +++++-------------
 linkis-web-next/src/helper/db.ts              |  51 +++--
 linkis-web-next/src/helper/storage.ts         |   8 +-
 linkis-web-next/src/layout.vue                | 130 +++++++++++--
 linkis-web-next/src/locales/en.ts             |  12 +-
 linkis-web-next/src/locales/zh.ts             |   4 +-
 linkis-web-next/src/main.ts                   |   3 +-
 .../pages/globalHistoryManagement/filter.vue  |  11 +-
 .../pages/globalHistoryManagement/index.vue   |   3 +-
 .../src/pages/parameterConfig/drawer.vue      |   7 +-
 12 files changed, 211 insertions(+), 203 deletions(-)

diff --git a/linkis-web-next/src/App.vue b/linkis-web-next/src/App.vue
index 104f17c2f4..8a47ecd48b 100644
--- a/linkis-web-next/src/App.vue
+++ b/linkis-web-next/src/App.vue
@@ -18,5 +18,3 @@
 <template>
     <router-view />
 </template>
-
-<style scoped></style>
diff --git a/linkis-web-next/src/components/sidebar/index.less b/linkis-web-next/src/components/sidebar/index.less
index dd8b3a637a..a1d2c7c7ad 100644
--- a/linkis-web-next/src/components/sidebar/index.less
+++ b/linkis-web-next/src/components/sidebar/index.less
@@ -16,7 +16,7 @@
  */
 
 .menu-wrapper {
-  width: 200px;
+  width: 250px;
   height: 100%;
   #menu {
     padding-top: 16px;
diff --git a/linkis-web-next/src/dss/view/login/index.vue b/linkis-web-next/src/dss/view/login/index.vue
index bf365a579c..7b97c028e6 100644
--- a/linkis-web-next/src/dss/view/login/index.vue
+++ b/linkis-web-next/src/dss/view/login/index.vue
@@ -18,20 +18,12 @@
 
 <template>
     <div class="login">
-        <i class="login-bg" />
+        <i class="login-bg"></i>
         <div class="login-main">
-            <!-- :rules="ruleInline" -->
             <FForm ref="loginFormRef" :model="loginForm" labelPosition="top">
-                <span class="login-title">
+                <div class="login-title">
                     {{ $t('message.common.login.loginTitle') }}
-                </span>
-
-                <!-- :rules="[
-                        {
-                            required: true,
-                            message: $t('message.common.login.userName'),
-                        },
-                    ]" -->
+                </div>
                 <FFormItem prop="user">
                     <template #label>
                         <div class="label">
@@ -41,17 +33,10 @@
                     <FInput
                         class="login-input"
                         v-model="loginForm.user"
-                        type="text"
                         :placeholder="$t('message.common.login.userName')"
                         size="large"
                     />
                 </FFormItem>
-                <!-- :rules="[
-                        {
-                            required: true,
-                            message: $t('message.common.login.passwordHint'),
-                        },
-                    ]" -->
                 <FFormItem prop="password">
                     <template #label>
                         <div class="label password">
@@ -70,11 +55,10 @@
                     v-model="rememberUserNameAndPass"
                     class="remember-user-name"
                 >
-                    {{ $t('message.common.login.remenber') }}
+                    {{ $t('message.common.login.remember') }}
                 </FCheckbox>
-
                 <FButton
-                    @click="handleSubmit('loginForm')"
+                    @click="handleSubmit"
                     class="login-btn"
                     :loading="loading"
                     type="primary"
@@ -99,8 +83,7 @@ import { config } from '@/config/db';
 
 export default defineComponent({
     setup() {
-        const loginFormRef = ref(null);
-
+        const loginFormRef = ref();
         return {
             userName: '',
             loginFormRef,
@@ -109,24 +92,6 @@ export default defineComponent({
                 user: '',
                 password: '',
             },
-            ruleInline: {
-                user: [
-                    {
-                        required: true,
-                        message: 'message.common.login.userName',
-                        trigger: 'blur',
-                    },
-                    // {type: 'string', pattern: /^[0-9a-zA-Z\.\-_]{4,16}$/, message: '无效的用户名！', trigger: 'change'},
-                ],
-                password: [
-                    {
-                        required: true,
-                        message: 'message.common.login.password',
-                        trigger: 'blur',
-                    },
-                    // {type: 'string', pattern: /^(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z])[0-9a-zA-Z]{8,18}$/, message: '请输入6至12位的密码', trigger: 'change'},
-                ],
-            },
             rememberUserNameAndPass: false,
             publicKeyData: {
                 enableLoginEncrypt: null,
@@ -150,10 +115,7 @@ export default defineComponent({
                 this.publicKeyData = res;
             });
         },
-        handleSubmit(name: string) {
-            console.log(this.loginForm.user, name);
-            // this.loginFormRef.validate((valid: boolean) => {
-            // if (valid) {
+        handleSubmit() {
             this.loading = true;
             if (!this.rememberUserNameAndPass) {
                 storage.remove('saveUserNameAndPass', 'local');
@@ -191,57 +153,43 @@ export default defineComponent({
                 Object.keys(config.stores).map((key) =>
                     (db as any).db?.[key]?.clear(),
                 );
-                api.fetch('/user/login', params)
-                    .then((rst: any) => {
-                        this.loading = false;
-                        storage.set('userName', rst.userName, 'session');
+                api.fetch('/user/login', params).then((rst: any) => {
+                    this.loading = false;
+                    storage.set('userName', rst.userName, 'session');
+                    storage.set(
+                        'enableWatermark',
+                        rst.enableWatermark,
+                        'session',
+                    );
+                    // save username(保存用户名)
+                    if (this.rememberUserNameAndPass) {
+                        storage.set(
+                            'saveUserNameAndPass',
+                            `${this.loginForm.user}&${this.loginForm.password}`,
+                            'local',
+                        );
+                    }
+                    if (rst) {
+                        this.userName = rst.userName;
+                        this.$router.push({ path: '/' });
+                        FMessage.success(
+                            this.$t('message.common.login.loginSuccess'),
+                        );
+                    }
+                }).catch((err: any) => {
+                    if (this.rememberUserNameAndPass) {
                         storage.set(
-                            'enableWatermark',
-                            rst.enableWatermark,
-                            'session',
+                            'saveUserNameAndPass',
+                            `${this.loginForm.user}&${this.loginForm.password}`,
+                            'local',
                         );
-                        // save username(保存用户名)
-                        if (this.rememberUserNameAndPass) {
-                            storage.set(
-                                'saveUserNameAndPass',
-                                `${this.loginForm.user}&${this.loginForm.password}`,
-                                'local',
-                            );
-                        }
-                        if (rst) {
-                            this.userName = rst.userName;
-                            this.$router.push({ path: '/' });
-                            FMessage.success(
-                                this.$t('message.common.login.loginSuccess'),
-                            );
-                        }
-                    })
-                    .catch((err: any) => {
-                        if (this.rememberUserNameAndPass) {
-                            storage.set(
-                                'saveUserNameAndPass',
-                                `${this.loginForm.user}&${this.loginForm.password}`,
-                                'local',
-                            );
-                        }
-                        if (
-                            err.message.indexOf(
-                                '已经登录，请先退出再进行登录',
-                            ) !== -1
-                        ) {
-                            // this.getPageHomeUrl().then(() => {
-                            this.$router.push({ path: '/' });
-                            // });
-                        }
-                        this.loading = false;
-                    });
+                    }
+                    if (err.message.indexOf('已经登录，请先退出再进行登录') !== -1) {
+                        this.$router.push({ path: '/' });
+                    }
+                    this.loading = false;
+                });
             });
-            // }
-            //  else {
-            //   console.error(this.$t('message.common.login.vaildFaild'))
-            //   FMessage.error(this.$t('message.common.login.vaildFaild'))
-            // }
-            // })
         },
         // clear local cache
         clearSession() {
@@ -255,26 +203,17 @@ export default defineComponent({
 
 .login {
     height: 100%;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    background-color: #001c40;
     display: flex;
     align-items: center;
     justify-content: flex-end;
-
     .login-bg {
         position: fixed;
         width: 100%;
         height: 100%;
-        top: 0;
-        left: 0;
         background: url('@/dss/assets/images/loginbgc.svg') no-repeat;
         background-position: 55% 40%;
         background-color: #001c40;
     }
-
     .login-main {
         position: relative;
         width: 450px;
@@ -284,23 +223,17 @@ export default defineComponent({
         padding: 50px;
         border-radius: 6px;
         box-shadow: 2px 2px 40px 0px rgba(0, 0, 0, 0.9);
-        z-index: 10;
-
         .login-title {
             font-size: 20px;
-            font-weight: 400px;
-            display: block;
             text-align: center;
             color: #044b93;
             font-weight: 600;
         }
-
         .label {
             font-size: 14px;
             line-height: 22px;
             margin-top: 20px;
         }
-
         .login-input {
             height: 50px;
             border-radius: 4px;
@@ -308,14 +241,17 @@ export default defineComponent({
             color: #515a6e;
             border: 1px solid #dee4ec;
         }
-
+        .remember-user-name {
+            position: absolute;
+            bottom: 106px;
+            font-size: 12px;
+        }
         .login-btn {
             position: absolute;
             bottom: 50px;
             left: 50px;
             width: 357px;
         }
-
         :deep(span.fes-input-inner) {
             display: block;
             height: 48px;
@@ -324,39 +260,14 @@ export default defineComponent({
             padding: auto 6px;
             padding: 0;
         }
-
         :deep(.fes-input.login-input) {
             padding: 0;
         }
-
         :deep(.fes-input-inner-el) {
             transform: translateY(-2px);
             padding-left: 12px;
             height: 100%;
         }
-
-        .remember-user-name {
-            position: absolute;
-            bottom: 106px;
-            font-size: 12px;
-        }
-
-        .ivu-form-item {
-            margin-bottom: 20px;
-        }
-    }
-
-    :deep(.fes-form-item-label::before) {
-        display: none;
-    }
-
-    .radioGroup {
-        padding-left: 20px;
-        display: block;
-
-        .ivu-radio-group-item {
-            width: 100%;
-        }
     }
 }
 </style>
diff --git a/linkis-web-next/src/helper/db.ts b/linkis-web-next/src/helper/db.ts
index 3e0369d38e..0423f42527 100644
--- a/linkis-web-next/src/helper/db.ts
+++ b/linkis-web-next/src/helper/db.ts
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Dexie } from 'dexie';
+import { Dexie, Table } from 'dexie';
 /**
  * wrap db operator
  * @class DB
@@ -27,7 +27,7 @@ export default class DB {
     errHandler: any;
     /**
      * Creates an instance of DB.
-     * @param {*} name
+     * @param {String} name
      * @param {Object} stores
      * @param {Number} version
      * @memberof DB
@@ -39,7 +39,7 @@ export default class DB {
     /**
      *
      * @param {*} stores
-     * @param {*} version
+     * @param {Number} version
      * @memberof DB
      */
     updateVersion(stores: any, version: number) {
@@ -56,17 +56,16 @@ export default class DB {
      * If it does not exist, it will be added.
      * @param {String} table
      * @param {Object | Array} fields
-     * @param {*} id
      * @memberof DB
      */
-    async put(table, fields) {
+    async put(table: keyof Dexie, fields: object[]) {
         const promiseArr = [];
         if (Array.isArray(fields)) {
             fields.forEach((item) => {
-                promiseArr.push(this.db[table].put(item));
+                promiseArr.push((this.db[table] as unknown as Table).put(item));
             });
         } else {
-            promiseArr.push(this.db[table].put(fields));
+            promiseArr.push((this.db[table] as unknown as Table).put(fields));
         }
         try {
             return await Promise.all(promiseArr);
@@ -80,14 +79,14 @@ export default class DB {
      * @param {Array} keys
      * @memberof DB
      */
-    async get(table, keys) {
+    async get(table: keyof Dexie, keys: string[]) {
         const promiseArr = [];
         if (Array.isArray(keys)) {
             keys.forEach((item) => {
-                promiseArr.push(this.db[table].get(item));
+                promiseArr.push((this.db[table] as unknown as Table).get(item));
             });
         } else {
-            promiseArr.push(this.db[table].get(keys));
+            promiseArr.push((this.db[table] as unknown as Table).get(keys));
         }
         try {
             return await Promise.all(promiseArr);
@@ -97,37 +96,37 @@ export default class DB {
     }
     /**
      *
-     * @param {*} table
-     * @param {String | Object} clause
+     * @param {String} table
+     * @param {String | Array} clause
      * @memberof DB
      * @return {this}
      */
-    where(table, clause) {
-        this.whereClause = this.db[table].where(clause);
+    where(table: keyof Dexie, clause: string | string[]) {
+        this.whereClause = (this.db[table] as unknown as Table).where(clause);
         return this;
     }
     /**
      *
-     * @param {*} table
+     * @param {String} table
      * @param {*} key
      * @param {*} changes
      * @return {updated}
      * @memberof DB
      */
-    async update(table, key, changes) {
+    async update(table: keyof Dexie, key: any, changes: {[keyPath: string]: any}) {
         try {
-            return await this.db[table].update(key, changes);
+            return await (this.db[table] as unknown as Table).update(key, changes);
         } catch (e) {
             return this._errorCatch(e);
         }
     }
     /**
      *
-     * @param {String | Object} clause
+     * @param {String | Array} clause
      * @memberof DB
      * @return {this}
      */
-    equals(clause) {
+    equals(clause: string| string[]) {
         this.collection = this.whereClause.where(clause);
         return this;
     }
@@ -137,7 +136,7 @@ export default class DB {
      * @memberof DB
      * @return {this}
      */
-    anyOf(clause) {
+    anyOf(clause: string| string[]) {
         this.collection = this.whereClause.where(clause);
         return this;
     }
@@ -147,7 +146,7 @@ export default class DB {
      * @memberof DB
      * @return {Promise}
      */
-    async first(cb) {
+    async first(cb: Function) {
         try {
             return await this.collection.first(cb);
         } catch (e) {
@@ -159,26 +158,26 @@ export default class DB {
      * @memberof DB
      * @return {Promise}
      */
-    async delete(...args) {
+    async delete(...args: any[]) {
         const len = args.length;
-        const table = args[0];
+        const table: keyof Dexie = args[0];
         let key = args[1];
         try {
             if (len === 0) {
                 return await this.collection.delete();
             } else if (len === 2) {
-                return await this.db[table].delete(key);
+                return await (this.db[table] as unknown as Table).delete(key);
             }
         } catch (e) {
             return this._errorCatch(e);
         }
     }
     /**
-     * @param {*} table
+     * @param {String} table
      * @memberof DB
      * @return {Promise}
      */
-    async toArray(table) {
+    async toArray(table: keyof Dexie) {
         try {
             if (table) {
                 this.collection = this.db[table];
diff --git a/linkis-web-next/src/helper/storage.ts b/linkis-web-next/src/helper/storage.ts
index 272d3a96ba..e448f9bc79 100644
--- a/linkis-web-next/src/helper/storage.ts
+++ b/linkis-web-next/src/helper/storage.ts
@@ -66,7 +66,7 @@ const docCookies = {
     },
     setItem: function (
         sKey: string,
-        sValue: string,
+        sValue: string | boolean,
         vEnd?: number | string | Date | boolean,
         sPath?: string,
         sDomain?: string,
@@ -135,7 +135,7 @@ const docCookies = {
 };
 
 export const storageManager = {
-    set: function (key: string, value: string, storage: string) {
+    set: function (key: string, value: string | boolean, storage: string) {
         try {
             window[storage].setItem(key, JSON.stringify(value));
         } catch (e) {
@@ -162,7 +162,7 @@ export const storageManager = {
 };
 
 export const cookieManager = {
-    set: function (key: string, value: string, expired: number | string | Date | boolean) {
+    set: function (key: string, value: string | boolean, expired: number | string | Date | boolean) {
         if (expired) docCookies.setItem(key, value, expired);
         else docCookies.setItem(key, value);
     },
@@ -182,7 +182,7 @@ export const cookieManager = {
 export default {
     set: function (
         key: string,
-        value: string,
+        value: string | boolean,
         category = SESSION,
         expired = false,
     ) {
diff --git a/linkis-web-next/src/layout.vue b/linkis-web-next/src/layout.vue
index 4cd0ba5b5c..80c49c3645 100644
--- a/linkis-web-next/src/layout.vue
+++ b/linkis-web-next/src/layout.vue
@@ -20,20 +20,32 @@
     <div class="wrapper">
       <f-layout>
         <f-header class="header">
-          <f-button class="collapse-btn" @click="handleCollapse">
-            <template #icon>
-              <div v-if="collapsed"><IndentOutlined :size="24"/></div>
-              <div v-else><OutdentOutlined :size="24"/></div>
-            </template>
-          </f-button>
+          <div class="header-left">
+            <f-button class="collapse-btn" @click="handleCollapse">
+              <template #icon>
+                <div v-if="collapsed"><IndentOutlined :size="24"/></div>
+                <div v-else><OutdentOutlined :size="24"/></div>
+              </template>
+            </f-button>
+            <img src="@/dss/assets/images/Linkis.svg" @click="handleClickImage" />
+          </div>
+          <div class="header-right">
+            <FDropdown trigger="click" :options="userOptions" @visible-change="handleVisibleChange" placement="bottom-end">
+              <div class="user-options">
+                {{ userName }}
+                <DownOutlined v-if="!isShowUserOptions" class="icon" />
+                <UpOutlined v-else class="icon" />
+              </div>
+            </FDropdown>
+          </div>
         </f-header>
         <f-layout>
-          <f-aside class="side">
-            <Sidebar :collapsed="collapsed"></Sidebar>
+          <f-aside class="side" width="250px" collapsedWidth="48px" >
+            <Sidebar :collapsed="collapsed" />
           </f-aside>
-          <f-layout fixed :style="{ left: collapsed ? '48px' : '200px' }">
+          <f-layout fixed :style="{ left: collapsed ? '48px' : '250px' }">
             <f-main class="main">
-              <router-view></router-view>
+              <router-view />
             </f-main>
           </f-layout>
         </f-layout>
@@ -43,14 +55,65 @@
 </template>
 <script setup lang="ts">
 import Sidebar from "@/components/sidebar/index.vue";
-import { IndentOutlined, OutdentOutlined } from '@fesjs/fes-design/icon';
-import { ref } from "vue";
+import { FDropdown, FMessage } from "@fesjs/fes-design";
+import { DownOutlined, UpOutlined, IndentOutlined, OutdentOutlined, SwapOutlined, QuitOutlined } from '@fesjs/fes-design/icon';
+import { h, reactive, ref } from "vue";
+import { useI18n } from 'vue-i18n';
+import storage from "./helper/storage";
+import router from "./router";
+import api from "./service/api";
+const { t } = useI18n();
 
 const collapsed = ref(false);
+const isShowUserOptions = ref(false);
+const userName = storage.get('userName', 'session');
+const userOptions = reactive([
+  {
+    value: 'changeLang',
+    label: () => h('div', {
+      onClick: handleChangeLang
+    }, t('message.common.lang')),
+    icon: () => h(SwapOutlined),
+  },
+  {
+    value: 'logout',
+    label: () => h('div', {
+      onClick: handleLogOut
+    }, t('message.common.logOut')),
+    icon: () => h(QuitOutlined),
+  },
+])
 
 const handleCollapse = () => {
   collapsed.value = !collapsed.value;
 }
+
+const handleClickImage = () => {
+  router.push('/console/globalHistoryManagement');
+}
+
+const handleVisibleChange = (visible: boolean) => {
+  isShowUserOptions.value = visible;
+}
+
+const handleChangeLang = () => {
+  const lang = storage.get('locale', 'local');
+  if (!lang || lang === 'zh') {
+    storage.set('locale', 'en', 'local');
+  } else {
+    storage.set('locale', 'zh', 'local');
+  }
+  window.location.reload();
+}
+
+const handleLogOut = () => {
+  api.fetch('/user/logout', {}).then(() => {
+    storage.set('need-refresh-proposals-hql', true);
+    storage.set('need-refresh-proposals-python', true);
+    router.push({ path: '/login' });
+    FMessage.success(t('message.common.login.logoutSuccess'));
+  });
+}
 </script>
 <style lang="less" scoped>
 .wd-page {
@@ -60,17 +123,44 @@ const handleCollapse = () => {
     width: 100%;
     height: 100%;
     .header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
       background: #fff;
       border: 1px solid rgba(15,18,34,0.06);
       box-shadow: 0 2px 12px 0 rgba(15,18,34,0.10);
       z-index: 10;
-      .collapse-btn {
-        border-radius: 0;
-        border: 0;
-        background: #5384ff;
-        color: #fff;
-        height: 54px;
-        transform: translateY(-3px);
+      .header-left {
+        display: flex;
+        align-items: center;
+        .collapse-btn {
+          border-radius: 0;
+          border: 0;
+          background: #5384ff;
+          color: #fff;
+          height: 56px;
+          transform: translate(-1px, -1px);
+        }
+        img {
+          width: 200px;
+          height: 56px;
+          padding: 0 36px;
+          cursor: pointer;
+          background-color: #5384ff;
+          transform: translateY(-1px);
+        }
+      }
+      .header-right {
+        margin-right: 16px;
+        cursor: pointer;
+        .user-options {
+          margin-right: 6px;
+          font-weight: 640;
+          font-size: 18px;
+          .icon {
+            transform: translateY(2px);
+          }
+        }
       }
     }
     .side {
@@ -80,7 +170,7 @@ const handleCollapse = () => {
       background: #f7f8fa;
     }
     .main {
-      min-width: calc(100vw - 250px);
+      min-width: calc(100vw - 300px);
       margin: 16px;
       padding: 24px;
       background: #fff;
diff --git a/linkis-web-next/src/locales/en.ts b/linkis-web-next/src/locales/en.ts
index 53d087f5cc..1d10100c49 100644
--- a/linkis-web-next/src/locales/en.ts
+++ b/linkis-web-next/src/locales/en.ts
@@ -18,6 +18,7 @@
 export default {
     message: {
         common: {
+            lang: '简体中文',
             statisticsTime: 'Time Range',
             fullScreen: 'FullScreen',
             log: 'Log',
@@ -301,16 +302,17 @@ export default {
             login: {
                 loginTitle: 'Welcome to Linkis Console!',
                 userName: 'Please enter your username',
-                remenber: 'Remember me',
+                remember: 'Remember me',
                 login: 'Login',
                 passwordHint: 'Please enter your password',
                 password: 'Please enter password！',
-                loginSuccess: 'Login Success',
+                loginSuccess: 'Log in successfully',
                 haveLogin:
                     'You have already logged in, please do not login repeatedly',
                 vaildFaild: 'Authentication failed!',
                 toRegister: 'No account? Create one',
                 selectProxyTip: 'No select proxy',
+                logoutSuccess: 'Log out successfully'
             },
             dynamicForm: {
                 rule: {
@@ -405,8 +407,8 @@ export default {
             globalConfigs: 'Global Configs',
             applicationDesc: 'Desc',
             applicationName: 'Name',
-            addApplicationAndEngine: 'ADD',
-            editApplicationAndEngine: 'EDIT',
+            addApplicationAndEngine: 'Add application and engine',
+            editApplicationAndEngine: 'Edit application and engine',
             failedToAddCreator: 'Failed to add creator',
             successfullyAddCreator: 'Successfully add creator',
             nonRepetitiveEngines: 'Do not add repetitive engines',
@@ -664,7 +666,7 @@ export default {
                 failedReason: 'Key Information',
                 executeApplicationName: 'Engine',
                 requestApplicationName: 'Application',
-                umUser: 'Creator',
+                umUser: 'Username',
                 progress: 'Progress',
                 createdTime: 'Created at',
                 updatedTime: 'Updated at',
diff --git a/linkis-web-next/src/locales/zh.ts b/linkis-web-next/src/locales/zh.ts
index f1c0c3c235..81f568e6bd 100644
--- a/linkis-web-next/src/locales/zh.ts
+++ b/linkis-web-next/src/locales/zh.ts
@@ -18,6 +18,7 @@
 export default {
     message: {
         common: {
+            lang: 'English',
             statisticsTime: '统计日期',
             fullScreen: '全屏',
             log: '日志',
@@ -286,13 +287,14 @@ export default {
             login: {
                 loginTitle: '欢迎登录Linkis系统！',
                 userName: '请输入用户名',
-                remenber: '记住当前用户',
+                remember: '记住当前用户',
                 login: '登录',
                 passwordHint: '请输入密码！',
                 loginSuccess: '登录成功',
                 haveLogin: '您已经登录，请不要重复登录',
                 vaildFaild: '验证未通过！',
                 selectProxyTip: '用户代理未选择！',
+                logoutSuccess: '您已成功退出'
             },
             dynamicForm: {
                 rule: {
diff --git a/linkis-web-next/src/main.ts b/linkis-web-next/src/main.ts
index 71883ebf57..95c4b6fda6 100644
--- a/linkis-web-next/src/main.ts
+++ b/linkis-web-next/src/main.ts
@@ -52,9 +52,10 @@ import {
 import App from '@/App.vue';
 import router from '@/router/index';
 import messages from '@/locales';
+import storage from './helper/storage';
 
 const i18n = createI18n({
-    locale: 'zh',
+    locale: storage.get('locale', 'local') || 'zh',
     fallbackLocale: 'en',
     legacy: false,
     messages,
diff --git a/linkis-web-next/src/pages/globalHistoryManagement/filter.vue b/linkis-web-next/src/pages/globalHistoryManagement/filter.vue
index e772461a6e..35dfb56af7 100644
--- a/linkis-web-next/src/pages/globalHistoryManagement/filter.vue
+++ b/linkis-web-next/src/pages/globalHistoryManagement/filter.vue
@@ -25,7 +25,7 @@
             >
                 <FInput
                     v-model="formData.taskID"
-                    placeholder="请输入"
+                    :placeholder="t('message.linkis.datasource.pleaseInput')"
                     type="number"
                 />
             </FFormItem>
@@ -36,7 +36,7 @@
                 <FSelect
                     v-model="formData.status"
                     clearable
-                    placeholder="请选择"
+                    :placeholder="t('message.linkis.unselect')"
                 >
                     <FOption
                         v-for="(item, index) in statusList"
@@ -52,7 +52,7 @@
             >
                 <FInput
                     v-model="formData.creator"
-                    placeholder="请输入"
+                    :placeholder="t('message.linkis.datasource.pleaseInput')"
                 />
             </FFormItem>
             <FFormItem
@@ -62,7 +62,7 @@
                 <FSelect
                     v-model="formData.executeApplicationName"
                     clearable
-                    placeholder="请选择"
+                    :placeholder="t('message.linkis.unselect')"
                 >
                     <FOption
                         v-for="(item, index) in engineList"
@@ -92,7 +92,7 @@
             >
                 <FInput
                     v-model="formData.proxyUser"
-                    placeholder="请输入"
+                    :placeholder="t('message.linkis.datasource.pleaseInput')"
                 />
             </FFormItem>
         </FForm>
@@ -313,7 +313,6 @@ defineExpose({
 <style scoped lang="less">
 .buttons {
     float: right;
-    width: 360px;
     display: flex;
     margin: -8px 0 16px 0;
     gap: 16px;
diff --git a/linkis-web-next/src/pages/globalHistoryManagement/index.vue b/linkis-web-next/src/pages/globalHistoryManagement/index.vue
index eb26b1041e..cfdf22faf2 100644
--- a/linkis-web-next/src/pages/globalHistoryManagement/index.vue
+++ b/linkis-web-next/src/pages/globalHistoryManagement/index.vue
@@ -39,6 +39,7 @@
             :data="dataList"
             :height="500"
             :rowKey="(row: Record<string, number | string>) => row"
+            :emptyText="t('message.linkis.noDataText')"
         >
             <f-table-column
                 v-if="filterRef?.isCheckingTaskToStop"
@@ -335,7 +336,7 @@ const find = async (
         }
         return res;
     } catch (err) {
-        FMessage.error('Something Wrong!');
+        window.console.error(err);
     }
 };
 
diff --git a/linkis-web-next/src/pages/parameterConfig/drawer.vue b/linkis-web-next/src/pages/parameterConfig/drawer.vue
index aeb31d9a04..ee0f391a85 100644
--- a/linkis-web-next/src/pages/parameterConfig/drawer.vue
+++ b/linkis-web-next/src/pages/parameterConfig/drawer.vue
@@ -121,7 +121,12 @@
                 </FForm>
             </template>
             <template v-else>
-                <f-table :data="dataList" class="table" :rowKey="(row: Record<string, number | string>) => row.categoryId">
+                <f-table
+                    :data="dataList"
+                    class="table"
+                    :rowKey="(row: Record<string, number | string>) => row.categoryId"
+                    :emptyText="t('message.linkis.noDataText')"
+                >
                     <template v-for="col in tableColumns" :key="col.label">
                         <f-table-column
                             v-if="col.formatter"