github/go-view
github/go-view
3
0
Fork 0
mirror of https://gitee.com/dromara/go-view.git synced 2025-02-23 15:52:49 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
MTrun 2022-02-28 10:30:51 +08:00
parent 4e9e492c29
commit 9ed848e21f
8 changed files with 136 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/enums/storageEnum.ts
View File

@ -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',
// 当前选择的主题

37
src/packages/components/Charts/Lines/LineCommon/config.ts
View File

@ -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)
}
}

7
src/packages/components/Charts/Lines/LineGradientSingle/config.ts
View File

@ -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,

42
src/packages/components/Charts/Lines/LineGradients/config.ts
View File

@ -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

6
src/store/modules/settingStore/settingStore.ts
View File

@ -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)
},
},
})

53
src/utils/crypto.ts
View File

@ -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)
}

1
src/utils/index.ts
View File

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

45
src/views/login/index.vue
View File

@ -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;
}