From 4e8e7d79349c2e94a6c4e140410dcf47aed2f2cb Mon Sep 17 00:00:00 2001
From: fit2cloud-chenyw <yawen.chen@fit2cloud.com>
Date: Thu, 20 Jul 2023 12:06:24 +0800
Subject: [PATCH] =?UTF-8?q?perf(=E8=AE=B8=E5=8F=AF):=20=E8=AE=B8=E5=8F=AF?=
 =?UTF-8?q?=E8=BF=87=E6=9C=9F=E6=8F=90=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/lang/en.js                   |  3 +-
 frontend/src/lang/tw.js                   |  3 +-
 frontend/src/lang/zh.js                   |  3 +-
 frontend/src/layout/components/Licbar.vue | 65 +++++++++++++----------
 4 files changed, 42 insertions(+), 32 deletions(-)

diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js
index bf2ffbffa2..1d11528945 100644
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@@ -626,7 +626,8 @@ export default {
     status: 'Authorization status',
     valid: 'Valid',
     invalid: 'Invalid',
-    expired: 'Expired'
+    expired: 'Expired',
+    expired_msg: 'license has expired since {0}.  It is recommended to update the license, which does not affect the use of enterprise version functions'
   },
   member: {
     create: 'Add members',
diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js
index 05355e1942..2bf2e5c31e 100644
--- a/frontend/src/lang/tw.js
+++ b/frontend/src/lang/tw.js
@@ -626,7 +626,8 @@ export default {
     status: '授權狀態',
     valid: '有效',
     invalid: '無效',
-    expired: '已過期'
+    expired: '已過期',
+    expired_msg: 'License已過期，過期時間：{0}，為了不影響企業版功能的使用，建議您更新License'
   },
   member: {
     create: '添加成員',
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index 0cd800d9a7..b5b49c6a93 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -625,7 +625,8 @@ export default {
     status: '授权状态',
     valid: '有效',
     invalid: '无效',
-    expired: '已过期'
+    expired: '已过期',
+    expired_msg: 'License已过期，过期时间：{0}，为了不影响企业版功能的使用，建议您更新License'
   },
   member: {
     create: '添加成员',
diff --git a/frontend/src/layout/components/Licbar.vue b/frontend/src/layout/components/Licbar.vue
index dfcc15f1b6..b4caa79e60 100644
--- a/frontend/src/layout/components/Licbar.vue
+++ b/frontend/src/layout/components/Licbar.vue
@@ -1,9 +1,18 @@
 <template>
+
   <div
-    v-if="!licValidate && licStatus !== 'no_record'"
-    class="lic"
+    v-if="!licValidate && licStatus !== 'no_record' && !tipClosed"
+    class="lic_tips"
   >
-    <strong>{{ $t(licMsg) }}</strong>
+    <el-alert
+      class="lic_alert"
+      :title="$t(licMsg)"
+      type="warning"
+      show-icon
+      center
+      @close="closeTip"
+    />
+
   </div>
 </template>
 
@@ -20,9 +29,7 @@ export default {
     }
   },
   computed: {
-    /* theme() {
-      return this.$store.state.settings.theme
-    }, */
+
     licValidate() {
       return this.$store.state.lic.validate
     },
@@ -30,40 +37,40 @@ export default {
       return this.$store.state.lic.licStatus || ''
     },
     licMsg() {
+      if (this.$store.state.lic?.licMsg?.includes('expired')) {
+        const message = this.$store.state.lic.licMsg
+        const exp = message.substring(message.indexOf('since ') + 6, message.indexOf(','))
+        return this.$t('license.expired_msg').replace('{0}', exp)
+      }
       return this.$store.state.lic.licMsg ? ('license.' + this.$store.state.lic.licMsg) : null
+    },
+    tipClosed() {
+      return localStorage.getItem('lic_closed')
     }
 
   },
 
   mounted() {
-    // this.validate()
   },
   methods: {
-    // validate() {
-    //   validateLic().then(res => {
-    //     this.lic = true
-    //     this.$store.dispatch('lic/setValidate', true)
-    //   }).catch((e) => {
-    //     this.msg = e.response.data.message
-    //     this.lic = false
-    //     this.$store.dispatch('lic/setValidate', false)
-    //   })
-    // }
+    closeTip() {
+      localStorage.setItem('lic_closed', true)
+    }
+
   }
 }
 </script>
 <style lang="scss" scoped>
-
-    .lic {
-        height: 24px;
-        background-color: #c92100;
-        color: #fff;
-        text-align: center;
-        /* padding: 6px 11px; */
-        position: fixed;
-        z-index: 1002;
-        top: 0;
-        width: 100%;
-    }
+  .lic_tips {
+    position: absolute;
+    z-index: 2000;
+    position:absolute;
+    top: 0;left:0;right:0;
+    margin: auto;
+  }
+  .lic_alert ::v-deep .el-icon-close{
+    top: 16px !important;
+    right: 10px !important;
+  }
 
 </style>