refactor(license tip): refactor license warning tips

package.json

@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "@emqx/emqx-ui": "^1.1.4",
+    "@types/js-cookie": "^3.0.3",
     "@vueuse/core": "^4.8.1",
     "axios": "^0.21.4",
     "base64-js": "^1.5.1",
@@ -23,6 +24,7 @@
     "dayjs": "^1.10.4",
     "echarts": "^5.2.2",
     "element-plus": "1.0.2-beta.48",
+    "js-cookie": "^3.0.5",
     "lodash": "^4.17.21",
     "qiankun": "^2.7.0",
     "vue": "3.2.19",

src/components/LicenseTipDialog.vue

@@ -8,8 +8,8 @@
     :z-index="2000"
   >
     <span class="tip-text">
-      <!-- No License | Trial -->
-      <span v-if="!isHasLicense || isTrialLicense" v-html="$t('admin.licenseEvaluationTip')" />
+      <!-- No License -->
+      <span v-if="!isHasLicense" v-html="$t('admin.licenseEvaluationTip')" />
 
       <!-- License-->
       <span v-else-if="isHasLicense">
@@ -42,14 +42,14 @@
 <script lang="ts" setup>
 import { computed, defineEmits, defineProps, ref } from 'vue'
 import { ElDialog, ElCheckbox } from 'element-plus'
+import Cookies from 'js-cookie'
 
 const props = defineProps({
   modelValue: {
     type: Boolean,
     required: true,
   },
   isHasLicense: { type: Boolean, default: false },
-  isTrialLicense: { type: Boolean, default: false },
   isLicenseInvalid: { type: Boolean, default: false },
   isLicenseExpiry: { type: Boolean, default: false },
   isLicenseReadyExpiry: { type: Boolean, default: false },
@@ -69,13 +69,12 @@ const showDialog = computed({
   },
 })
 
-const noPromptTips = (val: boolean) => {
-  const licenseTipVisible = !val
-  localStorage.setItem('licenseTipVisible', JSON.stringify(licenseTipVisible))
-}
-
 const submit = async () => {
-  noPromptTips(noPrompt.value)
+  if (noPrompt.value) {
+    Cookies.set('licenseTipVisible', 'false', { expires: 3 })
+  } else {
+    Cookies.set('licenseTipVisible', 'false')
+  }
   showDialog.value = false
   emit('submitted')
 }

src/composables/useCheckLicense.ts

@@ -2,6 +2,7 @@ import type { Ref } from 'vue'
 import { ref } from 'vue'
 import { queryLicense } from '@/api/admin'
 import type { License } from '@/types/admin'
+import Cookies from 'js-cookie'
 
 export default () => {
   // currently unused
@@ -22,7 +23,8 @@ export default () => {
       const { data } = await queryLicense()
       licenseData.value = data
 
-      const isShowTip = localStorage.getItem('licenseTipVisible')
+      const isShowTip = Cookies.get('licenseTipVisible')
+
       if (isShowTip !== 'false') {
         const { error, valid_until, license_type } = data
 
@@ -38,7 +40,6 @@ export default () => {
 
         if (
           !isHasLicense.value ||
-          isTrialLicense.value ||
           isLicenseInvalid.value ||
           isLicenseExpiry.value ||
           isHardwareMismatch.value ||

src/views/config/southDriver/Index.vue

@@ -175,7 +175,6 @@
   <LicenseTipDialog
     v-model="licenseTipVisible"
     :isHasLicense="isHasLicense"
-    :isTrialLicense="isTrialLicense"
     :isLicenseInvalid="isLicenseInvalid"
     :isLicenseExpiry="isLicenseExpiry"
     :isLicenseReadyExpiry="isLicenseReadyExpiry"
@@ -212,6 +211,7 @@ import DataStatisticsDrawer from '../components/dataStatisticsDrawer.vue'
 import { isTheSameParentRoute } from '@/utils/utils'
 import useCheckLicense from '@/composables/useCheckLicense'
 import LicenseTipDialog from '@/components/LicenseTipDialog.vue'
+import Cookies from 'js-cookie'
 
 export default defineComponent({
   beforeRouteEnter(to, from, next) {
@@ -308,7 +308,7 @@ const {
   isOverMaximumTags,
 } = useCheckLicense()
 
-const isShowLicenseTip = localStorage.getItem('licenseTipVisible')
+const isShowLicenseTip = Cookies.get('licenseTipVisible')
 if (isShowLicenseTip !== 'false') {
   checkLicense()
 }

yarn.lock

@@ -1146,6 +1146,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/js-cookie@^3.0.3":
+  version "3.0.3"
+  resolved "https://registry.npmmirror.com/@types/js-cookie/-/js-cookie-3.0.3.tgz#d6bfbbdd0c187354ca555213d1962f6d0691ff4e"
+  integrity sha512-Xe7IImK09HP1sv2M/aI+48a20VX+TdRJucfq4vfRVy6nWN8PYPOEnlMRSgxJAgYQIXJVL8dZ4/ilAM7dWNaOww==
+
 "@types/json-schema@^7.0.4", "@types/json-schema@^7.0.5", "@types/json-schema@^7.0.7":
   version "7.0.9"
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.9.tgz#97edc9037ea0c38585320b28964dde3b39e4660d"
@@ -6087,6 +6092,11 @@ javascript-stringify@^2.0.1:
   resolved "https://registry.yarnpkg.com/javascript-stringify/-/javascript-stringify-2.1.0.tgz#27c76539be14d8bd128219a2d731b09337904e79"
   integrity sha512-JVAfqNPTvNq3sB/VHQJAFxN/sPgKnsKrCwyRt15zwNCdrMMJDdcEOdubuy+DuJYYdm0ox1J4uzEuYKkN+9yhVg==
 
+js-cookie@^3.0.5:
+  version "3.0.5"
+  resolved "https://registry.npmmirror.com/js-cookie/-/js-cookie-3.0.5.tgz#0b7e2fd0c01552c58ba86e0841f94dc2557dcdbc"
+  integrity sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==
+
 [email protected]:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/js-message/-/js-message-1.0.7.tgz#fbddd053c7a47021871bb8b2c95397cc17c20e47"