feat: 加密登录数据，修改折线图表UI

src/enums/storageEnum.ts

@@ -1,8 +1,10 @@
 export enum StorageEnum {
   // 全局设置
-  GO_SYSTEM_SETTING = 'GO-SYSTEM-SETTING',
+  GO_SYSTEM_SETTING_STORE = 'GO-SYSTEM-SETTING',
+  // token 等信息
+  GO_ACCESS_TOKEN_STORE = 'GO-ACCESS-TOKEN',
   // 登录信息
-  GO_LOGIN_STORE = 'GO-ACCESS-TOKEN',
+  GO_LOGIN_INFO_STORE = 'GO_LOGIN_INFO',
   // 语言
   GO_LANG_STORE = 'GO-LANG',
   // 当前选择的主题

src/packages/components/Charts/Lines/LineCommon/config.ts

@@ -7,7 +7,7 @@ export const includes = ['legend', 'xAxis', 'yAxis']
 
 const option = {
   legend: {
-    show: true,
+    show: true
   },
   xAxis: {
     show: true,
@@ -22,14 +22,45 @@ const option = {
     {
       name: 'data1',
       type: 'line',
+      lineStyle: {
+        normal: {
+          width: 3,
+          color: {
+            type: 'linear',
+
+            colorStops: [
+              {
+                offset: 0,
+                color: '#42a5f5' // 0% 处的颜色
+              },
+              {
+                offset: 1,
+                color: '#48D8BF' // 100% 处的颜色
+              }
+            ],
+            globalCoord: false // 缺省为 false
+          },
+          shadowColor: 'rgba(68, 181, 226, 0.3)',
+          shadowBlur: 5,
+          shadowOffsetY: 20
+        }
+      },
+      itemStyle: {
+        normal: {
+          color: '#fff',
+          borderWidth: 10,
+          borderColor: '#42a5f5'
+        }
+      },
       data: [120, 200, 150, 80, 70, 110, 130]
     }
   ]
 }
 
-export default class Config extends publicConfig implements CreateComponentType {
+export default class Config extends publicConfig
+  implements CreateComponentType {
   public key: string = LineCommonConfig.key
   public chartConfig = omit(LineCommonConfig, ['node'])
   // 图表配置项
   public option = echartOptionProfixHandle(option, includes)
-}
+}

src/packages/components/Charts/Lines/LineGradientSingle/config.ts

@@ -25,12 +25,17 @@ const options = echartOptionProfixHandle(
         name: 'data1',
         type: 'line',
         smooth: false,
+        lineStyle: {
+          normal: {
+            width: 3
+          }
+        },
         areaStyle: {
           opacity: 0.8,
           color: new graphic.LinearGradient(0, 0, 0, 1, [
             {
               offset: 0,
-              color: 'rgba(25,163,223,.3)'
+              color: 'rgba(25,163,223,.5)'
             },
             {
               offset: 1,

src/packages/components/Charts/Lines/LineGradients/config.ts

@@ -8,61 +8,71 @@ export const includes = ['legend', 'xAxis', 'yAxis']
 
 const option = {
   legend: {
-    show: true,
+    show: true
   },
   xAxis: {
     show: true,
     type: 'category',
-    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
   },
   yAxis: {
     show: true,
-    type: 'value',
+    type: 'value'
   },
   series: [
     {
       name: 'data1',
       type: 'line',
       smooth: false,
-      data: [120, 200, 150, 80, 70, 110, 130],
+      lineStyle: {
+        normal: {
+          width: 3
+        }
+      },
       areaStyle: {
         opacity: 0.8,
         color: new graphic.LinearGradient(0, 0, 0, 1, [
           {
             offset: 0,
-            color: 'rgba(25,163,223,.3)',
+            color: 'rgba(25,163,223,.3)'
           },
           {
             offset: 1,
-            color: 'rgba(25,163,223, 0)',
-          },
-        ]),
+            color: 'rgba(25,163,223, 0)'
+          }
+        ])
       },
+      data: [120, 200, 150, 80, 70, 110, 130],
     },
     {
       name: 'data2',
       type: 'line',
       smooth: false,
+      lineStyle: {
+        normal: {
+          width: 3
+        }
+      },
       areaStyle: {
         normal: {
           opacity: 0.8,
           color: new graphic.LinearGradient(0, 0, 0, 1, [
             {
               offset: 0,
-              color: 'rgba(0,202,149,0.3)',
+              color: 'rgba(0,202,149,0.3)'
             },
             {
               offset: 1,
-              color: 'rgba(0,202,149,0)',
-            },
+              color: 'rgba(0,202,149,0)'
+            }
           ]),
           shadowColor: 'rgba(0,202,149, 0.9)',
-          shadowBlur: 20,
-        },
+          shadowBlur: 20
+        }
       },
-      data: [130, 130, 312, 268, 155, 117, 160],
-    },
-  ],
+      data: [130, 130, 312, 268, 155, 117, 160]
+    }
+  ]
 }
 
 export default class Config extends publicConfig

src/store/modules/settingStore/settingStore.ts

@@ -8,9 +8,9 @@ import { asideCollapsedWidth } from '@/settings/designSetting'
 import { SettingStoreType } from './settingStore.d'
 import { setLocalStorage, getLocalStorage } from '@/utils'
 import { StorageEnum } from '@/enums/storageEnum'
-const { GO_SYSTEM_SETTING } = StorageEnum
+const { GO_SYSTEM_SETTING_STORE } = StorageEnum
 
-const storageSetting: SettingStoreType = getLocalStorage(GO_SYSTEM_SETTING)
+const storageSetting: SettingStoreType = getLocalStorage(GO_SYSTEM_SETTING_STORE)
 
 // 全局设置
 export const useSettingStore = defineStore({
@@ -38,7 +38,7 @@ export const useSettingStore = defineStore({
   actions: {
     setItem(key: string, value: boolean): void {
       ; (this as any)[key] = value
-      setLocalStorage(GO_SYSTEM_SETTING, this.$state)
+      setLocalStorage(GO_SYSTEM_SETTING_STORE, this.$state)
     },
   },
 })

src/utils/crypto.ts

@@ -1,30 +1,29 @@
 import * as CryptoJS from 'crypto-ts'
 
-export default {
-  AES_KEY: 'mt',
-  cryptoEncode(data: string): string {
-    if (typeof data !== 'string') return ''
-    // 加密
-    const key = CryptoJS.enc.Utf8.parse(this.AES_KEY)
-    const str = JSON.stringify(data)
-    const encryptedData = CryptoJS.AES.encrypt(str, key, {
-      mode: CryptoJS.mode.ECB,
-      padding: CryptoJS.pad.PKCS7,
-      iv: CryptoJS.enc.Utf8.parse(this.AES_KEY)
-    })
-    return encryptedData.toString()
-  },
-  // 解密
-  cryptoDecode(data: string): string {
-    if (typeof data !== 'string') return ''
-    const encryptedHexStr = CryptoJS.enc.Utf8.parse(data)
-    const encryptedBase64Str = CryptoJS.enc.Utf8.stringify(encryptedHexStr)
-    const key = CryptoJS.enc.Utf8.parse(this.AES_KEY)
-    const decryptedData = CryptoJS.AES.decrypt(encryptedBase64Str, key, {
-      mode: CryptoJS.mode.ECB,
-      padding: CryptoJS.pad.PKCS7,
-      iv: CryptoJS.enc.Utf8.parse(this.AES_KEY)
-    })
-    return decryptedData.toString(CryptoJS.enc.Utf8)
-  }
+const AES_KEY = 'mt'
+
+export const cryptoEncode = (data: string): string => {
+  if (typeof data !== 'string') return ''
+  // 加密
+  const key = CryptoJS.enc.Utf8.parse(AES_KEY)
+  const str = JSON.stringify(data)
+  const encryptedData = CryptoJS.AES.encrypt(str, key, {
+    mode: CryptoJS.mode.ECB,
+    padding: CryptoJS.pad.PKCS7,
+    iv: CryptoJS.enc.Utf8.parse(AES_KEY)
+  })
+  return encryptedData.toString()
+}
+// 解密
+export const cryptoDecode = (data: string): string => {
+  if (typeof data !== 'string') return ''
+  const encryptedHexStr = CryptoJS.enc.Utf8.parse(data)
+  const encryptedBase64Str = CryptoJS.enc.Utf8.stringify(encryptedHexStr)
+  const key = CryptoJS.enc.Utf8.parse(AES_KEY)
+  const decryptedData = CryptoJS.AES.decrypt(encryptedBase64Str, key, {
+    mode: CryptoJS.mode.ECB,
+    padding: CryptoJS.pad.PKCS7,
+    iv: CryptoJS.enc.Utf8.parse(AES_KEY)
+  })
+  return decryptedData.toString(CryptoJS.enc.Utf8)
 }

src/utils/index.ts

@@ -1,4 +1,5 @@
 export * from '@/utils/utils'
+export * from '@/utils/crypto'
 export * from '@/utils/router'
 export * from '@/utils/storage'
 export * from '@/utils/style'

src/views/login/index.vue

@@ -24,7 +24,11 @@
     </Header>
     <div class="go-login">
       <div class="go-login-carousel">
-        <n-carousel autoplay dot-type="line" :interval="Number(carouselInterval)">
+        <n-carousel
+          autoplay
+          dot-type="line"
+          :interval="Number(carouselInterval)"
+        >
           <img
             v-for="(item, i) in carouselImgList"
             :key="i"
@@ -39,7 +43,11 @@
           <n-collapse-transition :appear="true" :show="show">
             <n-card class="login-account-card" :title="$t('login.desc')">
               <div class="login-account-top">
-                <img class="login-account-top-logo" src="~@/assets/images/login/input.png" alt="展示图片" />
+                <img
+                  class="login-account-top-logo"
+                  src="~@/assets/images/login/input.png"
+                  alt="展示图片"
+                />
               </div>
               <n-form
                 ref="formRef"
@@ -77,7 +85,9 @@
                 <n-form-item>
                   <div class="flex justify-between">
                     <div class="flex-initial">
-                      <n-checkbox v-model:checked="autoLogin">{{ $t('login.form_auto') }}</n-checkbox>
+                      <n-checkbox v-model:checked="autoLogin">{{
+                        $t('login.form_auto')
+                      }}</n-checkbox>
                     </div>
                   </div>
                 </n-form-item>
@@ -88,7 +98,8 @@
                     size="large"
                     :loading="loading"
                     block
-                  >{{ $t('login.form_button') }}</n-button>
+                    >{{ $t('login.form_button') }}</n-button
+                  >
                 </n-form-item>
               </n-form>
             </n-card>
@@ -105,8 +116,12 @@
 
 <script lang="ts" setup>
 import { reactive, ref, onMounted } from 'vue'
-import { requireUrl } from '@/utils'
-import { routerTurnByName } from '@/utils'
+import {
+  routerTurnByName,
+  requireUrl,
+  cryptoEncode,
+  setLocalStorage
+} from '@/utils'
 import shuffle from 'lodash/shuffle'
 import { carouselInterval } from '@/settings/designSetting'
 import { useDesignStore } from '@/store/modules/designStore/designStore'
@@ -116,6 +131,9 @@ import { Header } from '@/layout/components/Header'
 import { Footer } from '@/layout/components/Footer'
 import { PageEnum } from '@/enums/pageEnum'
 import { icon } from '@/plugins'
+import { StorageEnum } from '@/enums/storageEnum'
+
+const { GO_LOGIN_INFO_STORE } = StorageEnum
 
 const { PersonOutlineIcon, LockClosedOutlineIcon } = icon.ionicons5
 
@@ -198,6 +216,15 @@ const handleSubmit = (e: Event) => {
     if (!errors) {
       const { username, password } = formInline
       loading.value = true
+      setLocalStorage(
+        GO_LOGIN_INFO_STORE,
+        cryptoEncode(
+          JSON.stringify({
+            username,
+            password
+          })
+        )
+      )
       window['$message'].success(`${t('login.login_success')}!`)
       routerTurnByName(PageEnum.BASE_HOME_NAME, true)
     } else {
@@ -225,7 +252,7 @@ $carousel-image-height: 60vh;
 @include go(login-box) {
   height: $go-login-height;
   overflow: hidden;
-  @include background-image("background-image");
+  @include background-image('background-image');
   &-header {
     display: flex;
     justify-content: space-between;
@@ -266,7 +293,7 @@ $carousel-image-height: 60vh;
 
       &-card {
         @extend .go-background-filter;
-        @include filter-bg-color("filter-color");
+        @include filter-bg-color('filter-color');
         box-shadow: 0 0 20px 5px rgba(40, 40, 40, 0.5);
       }
 
@@ -294,7 +321,7 @@ $carousel-image-height: 60vh;
     align-items: center;
     width: $--max-width;
     height: 100vh;
-    background: url("@/assets/images/login/login-bg.png") no-repeat 0 -120px;
+    background: url('@/assets/images/login/login-bg.png') no-repeat 0 -120px;
     .bg-slot {
       width: $carousel-width;
     }