test/go-view
1
0
Fork 0
mirror of https://gitee.com/dromara/go-view.git synced 2024-11-30 02:38:30 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix: 处理界面展示相关联的问题

Browse Source
This commit is contained in:
MTrun 2022-01-07 22:02:13 +08:00
parent b349f3440b
commit dcb2214c04
21 changed files with 348 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -8,6 +8,7 @@
},
"dependencies": {
"axios": "^0.23.0",
"crypto-ts": "^1.0.2",
"mockjs": "^1.1.0",
"naive-ui": "^2.23.2",
"pinia": "^2.0.6",

53
pnpm-lock.yaml
View File

@ -10,6 +10,7 @@ specifiers:
'@vue/compiler-sfc': ^3.2.20
'@vueuse/core': ^7.3.0
axios: ^0.23.0
crypto-ts: ^1.0.2
default-passive-events: ^2.0.0
eslint: ^8.4.1
eslint-config-prettier: ^8.3.0
@ -36,6 +37,7 @@ specifiers:
dependencies:
axios: rg.cnpmjs.org/axios/0.23.0
crypto-ts: r2.cnpmjs.org/crypto-ts/1.0.2
mockjs: rg.cnpmjs.org/mockjs/1.1.0
naive-ui: r2.cnpmjs.org/naive-ui/2.23.2_vue@3.2.24
pinia: rg.cnpmjs.org/pinia/2.0.6_typescript@4.5.2+vue@3.2.24
@ -214,6 +216,17 @@ packages:
version: 1.1.4
dev: false
r2.cnpmjs.org/crypto-ts/1.0.2:
resolution: {integrity: sha512-TcBWwF8ghYhVd/qPSwvY4nsbDZRN/PVxQ1Uc8ryRLiX4M4C5XSPyIhVgR4M5mIhrQEnWIktLcrv+FIqhKk2t3g==, registry: http://r.cnpmjs.org/, tarball: https://r2.cnpmjs.org/crypto-ts/-/crypto-ts-1.0.2.tgz}
name: crypto-ts
version: 1.0.2
peerDependencies:
'@angular/common': '>= 5.0.0'
'@angular/core': '>= 5.0.0'
dependencies:
tslib: r2.cnpmjs.org/tslib/1.14.1
dev: false
r2.cnpmjs.org/css-render/0.15.8:
resolution: {integrity: sha512-k1gp1MgYDPrFZhzheQkSwm6dmP6nPe2XE6WYpJBPwEc3GbMANPJZfxl7ofZlTl8/+tpMRiGTTgUkTlXaVbLxog==, registry: http://r.cnpmjs.org/, tarball: https://r2.cnpmjs.org/css-render/-/css-render-0.15.8.tgz}
name: css-render
@ -348,6 +361,18 @@ packages:
has-flag: r2.cnpmjs.org/has-flag/4.0.0
dev: false
r2.cnpmjs.org/tslib/1.14.1:
resolution: {integrity: sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==, registry: http://r.cnpmjs.org/, tarball: https://r2.cnpmjs.org/tslib/-/tslib-1.14.1.tgz}
name: tslib
version: 1.14.1
dev: false
r2.cnpmjs.org/tslib/2.3.1:
resolution: {integrity: sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==, registry: http://r.cnpmjs.org/, tarball: https://r2.cnpmjs.org/tslib/-/tslib-2.3.1.tgz}
name: tslib
version: 2.3.1
dev: true
r2.cnpmjs.org/vdirs/0.1.7_vue@3.2.24:
resolution: {integrity: sha512-MEUaLhV1jJyUqA2Ar4DfvlQx8jWs+PpCZ2dbM0ILelpMWGOybzt8ddL456VxeIbY/tkuDGT/Wzb8GG4LCuLuHw==, registry: http://r.cnpmjs.org/, tarball: https://r2.cnpmjs.org/vdirs/-/vdirs-0.1.7.tgz}
id: r2.cnpmjs.org/vdirs/0.1.7
@ -1597,7 +1622,7 @@ packages:
version: 4.1.2
dependencies:
pascal-case: rg.cnpmjs.org/pascal-case/3.1.2
tslib: rg.cnpmjs.org/tslib/2.3.1
tslib: r2.cnpmjs.org/tslib/2.3.1
dev: true
rg.cnpmjs.org/camelcase/6.2.1:
@ -1619,7 +1644,7 @@ packages:
version: 1.0.4
dependencies:
no-case: rg.cnpmjs.org/no-case/3.0.4
tslib: rg.cnpmjs.org/tslib/2.3.1
tslib: r2.cnpmjs.org/tslib/2.3.1
upper-case-first: rg.cnpmjs.org/upper-case-first/2.0.2
dev: true
@ -1723,7 +1748,7 @@ packages:
version: 3.0.4
dependencies:
no-case: rg.cnpmjs.org/no-case/3.0.4
tslib: rg.cnpmjs.org/tslib/2.3.1
tslib: r2.cnpmjs.org/tslib/2.3.1
upper-case: rg.cnpmjs.org/upper-case/2.0.2
dev: true
@ -1911,7 +1936,7 @@ packages:
version: 3.0.4
dependencies:
no-case: rg.cnpmjs.org/no-case/3.0.4
tslib: rg.cnpmjs.org/tslib/2.3.1
tslib: r2.cnpmjs.org/tslib/2.3.1
dev: true
rg.cnpmjs.org/ee-first/1.1.1:
@ -2796,7 +2821,7 @@ packages:
version: 2.0.4
dependencies:
capital-case: rg.cnpmjs.org/capital-case/1.0.4
tslib: rg.cnpmjs.org/tslib/2.3.1
tslib: r2.cnpmjs.org/tslib/2.3.1
dev: true
rg.cnpmjs.org/highlight.js/11.3.1:
@ -3186,7 +3211,7 @@ packages:
name: lower-case
version: 2.0.2
dependencies:
tslib: rg.cnpmjs.org/tslib/2.3.1
tslib: r2.cnpmjs.org/tslib/2.3.1
dev: true
rg.cnpmjs.org/lru-cache/6.0.0:
@ -3282,7 +3307,7 @@ packages:
version: 3.0.4
dependencies:
lower-case: rg.cnpmjs.org/lower-case/2.0.2
tslib: rg.cnpmjs.org/tslib/2.3.1
tslib: r2.cnpmjs.org/tslib/2.3.1
dev: true
rg.cnpmjs.org/node-releases/2.0.1:
@ -3403,7 +3428,7 @@ packages:
version: 3.0.4
dependencies:
dot-case: rg.cnpmjs.org/dot-case/3.0.4
tslib: rg.cnpmjs.org/tslib/2.3.1
tslib: r2.cnpmjs.org/tslib/2.3.1
dev: true
rg.cnpmjs.org/parent-module/1.0.1:
@ -3428,7 +3453,7 @@ packages:
version: 3.1.2
dependencies:
no-case: rg.cnpmjs.org/no-case/3.0.4
tslib: rg.cnpmjs.org/tslib/2.3.1
tslib: r2.cnpmjs.org/tslib/2.3.1
dev: true
rg.cnpmjs.org/path-case/3.0.4:
@ -3437,7 +3462,7 @@ packages:
version: 3.0.4
dependencies:
dot-case: rg.cnpmjs.org/dot-case/3.0.4
tslib: rg.cnpmjs.org/tslib/2.3.1
tslib: r2.cnpmjs.org/tslib/2.3.1
dev: true
rg.cnpmjs.org/path-exists/3.0.0:
@ -3856,7 +3881,7 @@ packages:
version: 3.0.4
dependencies:
no-case: rg.cnpmjs.org/no-case/3.0.4
tslib: rg.cnpmjs.org/tslib/2.3.1
tslib: r2.cnpmjs.org/tslib/2.3.1
upper-case-first: rg.cnpmjs.org/upper-case-first/2.0.2
dev: true
@ -3899,7 +3924,7 @@ packages:
version: 3.0.4
dependencies:
dot-case: rg.cnpmjs.org/dot-case/3.0.4
tslib: rg.cnpmjs.org/tslib/2.3.1
tslib: r2.cnpmjs.org/tslib/2.3.1
dev: true
rg.cnpmjs.org/source-map-js/1.0.1:
@ -4120,7 +4145,7 @@ packages:
name: upper-case-first
version: 2.0.2
dependencies:
tslib: rg.cnpmjs.org/tslib/2.3.1
tslib: r2.cnpmjs.org/tslib/2.3.1
dev: true
rg.cnpmjs.org/upper-case/2.0.2:
@ -4128,7 +4153,7 @@ packages:
name: upper-case
version: 2.0.2
dependencies:
tslib: rg.cnpmjs.org/tslib/2.3.1
tslib: r2.cnpmjs.org/tslib/2.3.1
dev: true
rg.cnpmjs.org/uri-js/4.4.1:

8
src/components/UserInfo/components/SystemSet/index.d.ts vendored Normal file
View File

@ -0,0 +1,8 @@
export type ListType = {
key: string
type: string
name: string
desc: string
value: boolean
tip: string
}

3
src/components/UserInfo/components/SystemSet/index.ts Normal file
View File

@ -0,0 +1,3 @@
import SystemSet from './index.vue';
export { SystemSet };

90
src/components/UserInfo/components/SystemSet/index.vue Normal file
View File

@ -0,0 +1,90 @@
<template>
<n-modal v-model:show="modelShow" @afterLeave="closeModal">
<n-list bordered class="go-system-setting">
<template #header> 系统设置 </template>
<n-list-item v-for="item in list" :key="item.name">
<n-space :size="40">
<n-space>
<n-text class="item-left">{{ item.name }}</n-text>
<template v-if="item.type === 'switch'">
<n-switch
v-model:value="item.value"
size="small"
@update:value="handleChange($event, item)"
/>
</template>
</n-space>
<n-space>
<n-text class="item-right">{{ item.desc }}</n-text>
<n-tooltip trigger="hover">
<template #trigger>
<n-icon size="21">
<HelpOutlineIcon />
</n-icon>
</template>
<span>
{{ item.tip }}
</span>
</n-tooltip>
</n-space>
</n-space>
</n-list-item>
<n-list-item></n-list-item>
</n-list>
</n-modal>
</template>
<script script lang="ts" setup>
import { reactive, h } from 'vue'
import { ListType } from './index.d'
import { useLangStore } from '@/store/modules/langStore/langStore'
import { icon } from '@/plugins'
const { HelpOutlineIcon } = icon.ionicons5
const emit = defineEmits(['update:modelShow'])
defineProps({
modelShow: Boolean
})
const langStore = useLangStore()
const list = reactive<ListType[]>([
{
key: 'lang',
value: false,
type: 'switch',
name: '切换语言',
desc: '切换语言是否重新加载页面',
tip: '不重载可能会导致部分区域语言切换失败'
}
])
const closeModal = () => {
emit('update:modelShow', false)
}
const handleChange = (e: Event, item: ListType) => {
switch (item.key) {
case 'lang':
langStore.changeReload(item.value)
break
default:
break
}
}
</script>
<style lang="scss" scoped>
@include go('system-setting') {
@extend .go-background-filter;
min-width: 100px;
max-width: 60vw;
.item-left {
width: 200px;
}
}
</style>

33
src/components/UserInfo/index.vue
View File

@ -17,19 +17,31 @@
/>
</div>
</n-dropdown>
<!-- 系统设置 model -->
<SystemSet v-model:modelShow="modelShow"/>
</template>
<script lang="ts" setup>
import { h, ref, reactive } from 'vue';
import { h, ref, reactive } from 'vue'
import { NAvatar, NText } from 'naive-ui'
import { renderIcon } from '@/utils'
import { openDoc, logout } from '@/utils'
import { SystemSet } from './components/SystemSet/index'
import { icon } from '@/plugins'
const { DocumentTextIcon, ChatboxEllipsesIcon, PersonIcon, LogOutOutlineIcon } = icon.ionicons5
const {
DocumentTextIcon,
ChatboxEllipsesIcon,
PersonIcon,
LogOutOutlineIcon,
SettingsSharpIcon
} = icon.ionicons5
const t = window['$t']
const modelShow = ref(false)
const imageUrl = 'https://www.naiveui.com/assets/naivelogo.93278402.svg'
// 是否失败
@ -78,9 +90,14 @@ const options = reactive([
key: 'contact',
icon: renderIcon(ChatboxEllipsesIcon)
},
{
label: t('global.sys_set'),
key: 'sysSet',
icon: renderIcon(SettingsSharpIcon)
},
{
type: 'divider',
key: 'd2'
key: 'd3'
},
{
label: t('global.logout'),
@ -94,6 +111,11 @@ const errorHandle = (e: Event) => {
fallback.value = true
}
// 系统设置
const sysSetHandle = () => {
modelShow.value = true
}
const handleSelect = (key: string) => {
switch (key) {
case 'doc':
@ -102,6 +124,9 @@ const handleSelect = (key: string) => {
case 'contact':
openDoc()
break
case 'sysSet':
sysSetHandle()
break
case 'logout':
logout()
break
@ -112,6 +137,6 @@ const handleSelect = (key: string) => {
<style lang="scss" scoped>
.user-info-box {
cursor: pointer;
transform: scale(.7);
transform: scale(0.7);
}
</style>

5
src/i18n/en/index.ts
View File

@ -9,8 +9,11 @@ const global = {
// header
doc: 'Document',
help: 'Help',
contact: 'Contact us',
contact: 'Contact Us',
logout: 'Logout',
// system setting
sys_set: 'System Setting',
lang_set: 'Language Setting',
// right key
r_edit: 'Edit',
r_preview: 'Preview',

7
src/i18n/index.ts
View File

@ -2,14 +2,15 @@
import { lang } from '@/settings/designSetting'
import { createI18n } from 'vue-i18n' //引入vue-i18n组件
import { getLocalStorage } from '@/utils'
import { GO_LANG_SELECT } from '@/settings/storageConst'
import { GO_LANG } from '@/settings/storageConst'
import { LangStateType } from '@/store/modules/langStore/langStore.d'
import zh from './zh/index'
import en from './en/index'
const lang_storage = getLocalStorage(GO_LANG_SELECT)
const langStorage: LangStateType = getLocalStorage(GO_LANG)
const i18n = createI18n({
locale: lang_storage || lang,
locale: lang,
globalInjection: true,
messages: {
zh: zh,

3
src/i18n/zh/index.ts
View File

@ -11,6 +11,9 @@ const global = {
help: '帮助中心',
contact: '联系我们',
logout: '退出登录',
// 系统设置
sys_set: '系统设置',
lang_set: '语言设置',
// 功能键
r_edit: '编辑',
r_preview: '预览',

7
src/plugins/icon.ts
View File

@ -35,7 +35,8 @@ import {
Prism as PrismIcon,
Cube as CubeIcon,
ChevronBackOutline as ChevronBackOutlineIcon,
Flash as FlashIcon
Flash as FlashIcon,
SettingsSharp as SettingsSharpIcon
} from '@vicons/ionicons5'
// ionicons5 在这里
@ -113,7 +114,9 @@ const ionicons5 = {
// 折叠/回退
ChevronBackOutlineIcon,
// 后端数据（闪电）
FlashIcon
FlashIcon,
// 设置（齿轮）
SettingsSharpIcon
}
// https://www.xicons.org/#/ 还有很多

8
src/settings/storageConst.ts
View File

@ -1,4 +1,4 @@
export const GO_ACCESS_TOKEN = 'GO-ACCESS-TOKEN' // 用户token
export const GO_CURRENT_USER = 'GO-CURRENT-USER' // 当前用户信息
export const GO_LANG_SELECT = 'GO-LANG-SELECT' // 当前选择的语言类型
export const GO_Theme_SELECT = 'GO-Theme-SELECT' // 当前选择的主题
export const GO_LOGIN = 'GO-ACCESS-TOKEN' // 登录信息
export const GO_LANG = 'GO-LANG' // 语言
export const GO_Theme_SELECT = 'GO-Theme-SELECT' // 当前选择的主题
export const GO_Chart_Layout_Store = 'GO-Chart-Layout-Store' // 拖拽页面

34
src/store/modules/chartLayoutStore/chartLayoutStore.d.ts vendored
View File

@ -1,25 +1,27 @@
import { ThemeEnum } from '@/enums/styleEnum'
export interface ChartLayoutFilterType {
// 色相
hueRotate: number
// 饱和度
saturate: number
// 亮度
brightness: number
// 对比度
contrast: number
// 不透明度
unOpacity: number
}
export interface ChartLayoutType {
// 图层控制
layers: boolean,
layers: boolean
// 图表组件
charts: boolean,
charts: boolean
// 详情设置
details: boolean,
details: boolean
// 对齐线
alignLine: boolean,
alignLine: boolean
// 滤镜
filter: {
// 色相
hueRotate: number,
// 饱和度
saturate: number,
// 亮度
brightness: number,
// 对比度
contrast: number,
// 不透明度
unOpacity: number
}
filter: ChartLayoutFilterType
}

72
src/store/modules/chartLayoutStore/chartLayoutStore.ts
View File

@ -1,34 +1,41 @@
import { defineStore } from 'pinia'
import { store } from '@/store'
import { ChartLayoutType } from './chartLayoutStore.d'
import { ChartLayoutType, ChartLayoutFilterType } from './chartLayoutStore.d'
import { setLocalStorage, getLocalStorage } from '@/utils'
import { GO_Chart_Layout_Store } from '@/settings/storageConst'
const storageChartLayout: ChartLayoutType = getLocalStorage(
GO_Chart_Layout_Store
)
export const useChartLayoutStore = defineStore({
id: 'useChartLayoutStore',
state: (): ChartLayoutType => ({
// 图层控制
layers: true,
// 图表组件
charts: true,
// 详情设置
details: true,
// 对齐线
alignLine: true,
// 滤镜
filter: {
// 色相
hueRotate: 0,
// 饱和度
saturate: 0,
// 亮度
brightness: 100,
// 对比度
contrast: 100,
// 不透明度
unOpacity: 100
}
}),
state: (): ChartLayoutType =>
storageChartLayout || {
// 图层控制
layers: true,
// 图表组件
charts: true,
// 详情设置
details: true,
// 对齐线
alignLine: true,
// 滤镜
filter: {
// 色相
hueRotate: 0,
// 饱和度
saturate: 0,
// 亮度
brightness: 100,
// 对比度
contrast: 100,
// 不透明度
unOpacity: 100
}
},
getters: {
getLayers(e): boolean {
getLayers(): boolean {
return this.layers
},
getCharts(): boolean {
@ -40,13 +47,22 @@ export const useChartLayoutStore = defineStore({
getAlignLine(): boolean {
return this.alignLine
},
getFilter(): object {
getFilter(): ChartLayoutFilterType {
return this.filter
}
},
actions: {
setItem(key: string, value: boolean): void {
;(this as any)[key] = value
setLocalStorage(GO_Chart_Layout_Store, this.$state)
},
setFilter<T extends keyof ChartLayoutType>(key: T, value: boolean): void {
;(this.filter as any)[key] = value
setLocalStorage(GO_Chart_Layout_Store, this.$state)
}
}
})
export function useChartLayoutSettingWithOut() {
return useChartLayoutStore(store)
}
}

4
src/store/modules/langStore/langStore.d.ts vendored
View File

@ -1,5 +1,7 @@
import { LangEnum } from '@/enums/styleEnum'
export interface LangStateType {
// 当前语言
lang: LangEnum
lang: LangEnum,
// 是否刷新
isReload: boolean
}

31
src/store/modules/langStore/langStore.ts
View File

@ -3,25 +3,42 @@ import { lang } from '@/settings/designSetting'
import { LangStateType } from './langStore.d'
import { LangEnum } from '@/enums/styleEnum'
import i18n from '@/i18n/index'
import { setLocalStorage, reloadRoutePage } from '@/utils'
import { GO_LANG_SELECT } from '@/settings/storageConst'
import { setLocalStorage, getLocalStorage, reloadRoutePage } from '@/utils'
import { GO_LANG } from '@/settings/storageConst'
const storageLang: LangStateType = getLocalStorage(GO_LANG)
export const useLangStore = defineStore({
id: 'useLangStore',
state: (): LangStateType => ({
lang
}),
state: (): LangStateType =>
storageLang || {
lang,
// 默认刷新页面
isReload: true
},
getters: {
getLang(): LangEnum {
return this.lang
},
getReload(): boolean {
return this.isReload
}
},
actions: {
changeReload(value: boolean): void {
this.isReload = value
setLocalStorage(GO_LANG, this.$state)
},
changeLang(lang: LangEnum): void {
if (this.lang === lang) return
this.lang = lang
i18n.global.locale = lang
setLocalStorage(GO_LANG_SELECT, lang)
reloadRoutePage()
setLocalStorage(GO_LANG, this.$state)
if (this.getReload) {
reloadRoutePage()
}
}
}
})

4
src/styles/common/_dark.scss
View File

@ -10,6 +10,8 @@ $dark: (
background-color3: $--color-dark-bg-3,
background-color4: $--color-dark-bg-4,
background-color5: $--color-dark-bg-5,
// 毛玻璃背景
filter-color: $--filter-color-login-dark,
//渐变背景
background-image:
linear-gradient(120deg, $--color-dark-bg-1 0%, $--color-dark-bg-1 100%),
@ -19,8 +21,6 @@ $dark: (
linear-gradient($--color-dark-bg-1 14px, transparent 0),
linear-gradient(90deg, transparent 14px, $--color-text-2 0)
),
//毛玻璃
filter-color: $--filter-color-login-dark,
// 物料市场背景
items-top-bg:
linear-gradient(180deg, $--color-dark-bg-1, rgba(23, 23, 26, 0)),

4
src/styles/common/_light.scss
View File

@ -12,6 +12,8 @@ $light: (
background-color3: $--color-light-bg-3,
background-color4: $--color-light-bg-4,
background-color5: $--color-light-bg-5,
// 毛玻璃背景
filter-color: $--filter-color-login-light,
//渐变背景
background-image:
linear-gradient(120deg, $--color-light-bg 0%, $--color-light-bg 100%),
@ -21,8 +23,6 @@ $light: (
linear-gradient($--color-light-bg-1 14px, transparent 0),
linear-gradient(90deg, transparent 14px, $--color-dark-bg-5 0)
),
//毛玻璃
filter-color: $--filter-color-login-light,
// hover 边框颜色
hover-border-color: $--color-light-bg-1
);

2
src/styles/common/style.scss
View File

@ -35,7 +35,7 @@
// 毛玻璃
.go-background-filter {
backdrop-filter: $--filter-blur-base;
background-color: $--filter-color-base-1;
@include filter-bg-color('filter-color');
box-shadow: $--border-shadow;
}

7
src/styles/common/var.scss
View File

@ -37,11 +37,8 @@ $--footer-height: 50px;
// 模糊
$--filter-blur-base: blur(20px);
// 毛玻璃
$--filter-color-base-1: rgba(0, 0, 0, 0.1);
$--filter-color-base-2: rgba(0, 0, 0, 0.2);
$--filter-color-base-3: rgba(23, 23, 26, 0.3);
$--filter-color-login-dark: rgba(89, 95, 103, 0.45);
$--filter-color-login-light: rgba(187, 202, 217, 0.7);
$--filter-color-login-dark: rgba(35,35,36, 0.8);
$--filter-color-login-light: rgba(240, 240, 240, 0.8);
// 边框
$--border-radius-base: 8px;

30
src/utils/crypto.ts Normal file
View File

@ -0,0 +1,30 @@
import * as CryptoJS from 'crypto-ts'
export default {
AES_KEY: 'mt',
encode(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()
},
// 解密
decode(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)
}
}

54
src/views/chart/components/HeaderLeftBtn/index.vue
View File

@ -2,12 +2,17 @@
<n-space class="header-left-btn">
<n-tooltip
v-for="item in btnList"
:key="item.title"
:key="item.key"
placement="bottom"
trigger="hover"
>
<template #trigger>
<n-button type="info" size="small" ghost @click="item.fn">
<n-button
:type="item.select ? 'info' : ''"
size="small"
ghost
@click="clickHandle(item)"
>
<component :is="item.icon"></component>
</n-button>
</template>
@ -19,43 +24,48 @@
</template>
<script setup lang="ts">
import { reactive } from 'vue'
import { reactive, watchEffect, ref } from 'vue'
import { renderIcon } from '@/utils'
import { icon } from '@/plugins'
const { LayersIcon, BarChartIcon, PrismIcon } = icon.ionicons5
import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
const layers = () => {
console.log('选择了图层控制')
}
const chartLayoutStore = useChartLayoutStore()
const charts = () => {
console.log('选择了图表组件')
}
const details = () => {
console.log('选择了详情')
}
const btnList = reactive([
const init = (layers: boolean, charts: boolean, details: boolean) => [
{
fn: layers,
select: true,
key: 'layers',
select: chartLayoutStore.getLayers,
title: '图层控制',
icon: renderIcon(LayersIcon)
},
{
fn: charts,
select: true,
key: 'charts',
select: chartLayoutStore.getCharts,
title: '图表组件',
icon: renderIcon(BarChartIcon)
},
{
fn: details,
select: true,
key: 'details',
select: chartLayoutStore.getDetails,
title: '详情设置',
icon: renderIcon(PrismIcon)
}
])
]
const btnList = ref()
watchEffect(() => {
btnList.value = init(
chartLayoutStore.getLayers,
chartLayoutStore.getCharts,
chartLayoutStore.getDetails
)
})
const clickHandle = (item: { [T: string]: string }) => {
chartLayoutStore.setItem(item.key, !item.select)
}
</script>
<style lang="scss" scoped>
.header-left-btn {