fix: 新增组件

This commit is contained in:
mtruning 2022-01-15 14:56:48 +08:00
parent b7a372e50f
commit d2fabeae5f
25 changed files with 112 additions and 47 deletions

View File

@ -1,7 +1,9 @@
<template> <template>
<n-modal v-model:show="modelShow" @afterLeave="closeHandle"> <n-modal v-model:show="modelShow" @afterLeave="closeHandle">
<n-list bordered class="go-system-setting"> <n-list bordered class="go-system-setting">
<template #header> 系统设置 </template> <template #header>
<n-h3 class="go-mb-0">系统设置</n-h3>
</template>
<n-list-item v-for="item in list" :key="item.name"> <n-list-item v-for="item in list" :key="item.name">
<n-space :size="40"> <n-space :size="40">
@ -23,9 +25,7 @@
<HelpOutlineIcon /> <HelpOutlineIcon />
</n-icon> </n-icon>
</template> </template>
<span> <span>{{ item.tip }}</span>
{{ item.tip }}
</span>
</n-tooltip> </n-tooltip>
</n-space> </n-space>
</n-space> </n-space>
@ -40,6 +40,8 @@ import { reactive } from 'vue'
import { ListType } from './index.d' import { ListType } from './index.d'
import { useLangStore } from '@/store/modules/langStore/langStore' import { useLangStore } from '@/store/modules/langStore/langStore'
import { useDesignStore } from '@/store/modules/designStore/designStore' import { useDesignStore } from '@/store/modules/designStore/designStore'
import { useSettingStore } from '@/store/modules/settingStore/settingStore'
import { SettingStoreEnums } from '@/store/modules/settingStore/settingStore.d'
import { icon } from '@/plugins' import { icon } from '@/plugins'
const { HelpOutlineIcon } = icon.ionicons5 const { HelpOutlineIcon } = icon.ionicons5
@ -52,23 +54,31 @@ defineProps({
const langStore = useLangStore() const langStore = useLangStore()
const designStore = useDesignStore() const designStore = useDesignStore()
const settingStore = useSettingStore()
const list = reactive<ListType[]>([ const list = reactive<ListType[]>([
{
key: 'lang',
value: langStore.getReload,
type: 'switch',
name: '切换语言',
desc: '切换语言是否重新加载页面',
tip: '不重载有较低可能性导致部分区域语言切换失败'
},
{ {
key: 'aollapsed', key: 'aollapsed',
value: designStore.asideAllCollapsed, value: designStore.asideAllCollapsed,
type: 'switch', type: 'switch',
name: '菜单折叠', name: '菜单折叠',
desc: '左侧菜单是否全部折叠', desc: '左侧菜单全部折叠',
} },
{
key: SettingStoreEnums.HIDE_PACKAGE_ONE_CATEGORY,
value: settingStore.getHidePackageOneCategory,
type: 'switch',
name: '隐藏分类',
desc: '工作空间表单分类只有单项时隐藏',
},
{
key: 'lang',
value: langStore.getReload,
type: 'switch',
name: '切换语言',
desc: '切换语言重新加载页面',
tip: '若遇到部分区域语言切换失败,则开启'
},
]) ])
const closeHandle = () => { const closeHandle = () => {
@ -83,12 +93,15 @@ const handleChange = (e: Event, item: ListType) => {
case 'aollapsed': case 'aollapsed':
designStore.changeAsideAllCollapsed() designStore.changeAsideAllCollapsed()
break break
case SettingStoreEnums.HIDE_PACKAGE_ONE_CATEGORY:
settingStore.setItem(SettingStoreEnums.HIDE_PACKAGE_ONE_CATEGORY, item.value)
break
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@include go('system-setting') { @include go("system-setting") {
@extend .go-background-filter; @extend .go-background-filter;
min-width: 100px; min-width: 100px;
max-width: 60vw; max-width: 60vw;

View File

@ -1,4 +1,6 @@
export enum StorageEnum { export enum StorageEnum {
// 全局设置
GO_SYSTEM_SETTING = 'GO-SYSTEM-SETTING',
// 登录信息 // 登录信息
GO_LOGIN_STORE = 'GO-ACCESS-TOKEN', GO_LOGIN_STORE = 'GO-ACCESS-TOKEN',
// 语言 // 语言

View File

@ -1,4 +1,4 @@
import Bar from './Bar' import Bar from './Bars'
import Pie from './Pie' import Pie from './Pies'
export const ChartList = [...Bar, ...Pie] export const ChartList = [...Bar, ...Pie]

View File

@ -1,3 +1,3 @@
import Border from './borders' import Borders from './Borders'
export const DecorateList = [...Border] export const DecorateList = [...Borders]

View File

@ -1,7 +1,7 @@
import TextCommon from './index.vue' import TextCommon from './index.vue'
import image from '@/assets/images/chart/informations/text_static.png' import image from '@/assets/images/chart/informations/text_static.png'
import { ConfigType } from '@/packages/index.d' import { ConfigType } from '@/packages/index.d'
import { ChatCategoryEnum } from '../index.d' import { ChatCategoryEnum } from '../../index.d'
export const textCommonConfig: ConfigType = { export const textCommonConfig: ConfigType = {
key: 'Text', key: 'Text',

View File

@ -0,0 +1,3 @@
import { textCommonConfig } from './TextCommon/index'
export default [textCommonConfig]

View File

@ -1,3 +1,3 @@
import { textCommonConfig } from './textCommon/index' import Texts from './Texts'
export const InformationList = [textCommonConfig] export const InformationList = [...Texts]

View File

@ -37,18 +37,12 @@ export const theme = {
// dialog 图标的大小 // dialog 图标的大小
export const dialogIconSize = '20' export const dialogIconSize = '20'
// 弹窗是否可以通过点击遮罩关闭
export const maskClosable = false
// 侧边栏宽度 // 侧边栏宽度
export const asideWidth = '270' export const asideWidth = '270'
// 侧边栏折叠后的宽度,支持全部折叠会覆盖为 0 // 侧边栏折叠后的宽度,支持全部折叠会覆盖为 0
export const asideCollapsedWidth = '60' export const asideCollapsedWidth = '60'
// 侧边栏是否支持全持全部折叠
export const asideAllCollapsed = true
// 修改边框圆角 // 修改边框圆角
export const borderRadius = '6px' export const borderRadius = '6px'

View File

@ -0,0 +1,10 @@
// * 系统全局设置
// 侧边栏是否支持全持全部折叠
export const asideAllCollapsed = true
// 弹窗是否可以通过点击遮罩关闭
export const maskClosable = false
// 拖拽页面左侧表单分类只有一项的时候是否隐藏
export const hidePackageOneCategory = true

View File

@ -33,8 +33,8 @@ export const useChartLayoutStore = defineStore({
// 对比度 // 对比度
contrast: 100, contrast: 100,
// 不透明度 // 不透明度
unOpacity: 100 unOpacity: 100,
} },
}, },
getters: { getters: {
getLayers(): boolean { getLayers(): boolean {
@ -51,7 +51,7 @@ export const useChartLayoutStore = defineStore({
}, },
getFilter(): ChartLayoutFilterType { getFilter(): ChartLayoutFilterType {
return this.filter return this.filter
} },
}, },
actions: { actions: {
setItem(key: string, value: boolean): void { setItem(key: string, value: boolean): void {
@ -61,8 +61,8 @@ export const useChartLayoutStore = defineStore({
setFilter<T extends keyof ChartLayoutType>(key: T, value: boolean): void { setFilter<T extends keyof ChartLayoutType>(key: T, value: boolean): void {
;(this.filter as any)[key] = value ;(this.filter as any)[key] = value
setLocalStorage(GO_CHART_LAYOUT_STORE, this.$state) setLocalStorage(GO_CHART_LAYOUT_STORE, this.$state)
} },
} },
}) })
export function useChartLayoutSettingWithOut() { export function useChartLayoutSettingWithOut() {

View File

@ -1,6 +1,7 @@
import { defineStore } from 'pinia' import { defineStore } from 'pinia'
import { store } from '@/store' import { store } from '@/store'
import { theme, asideAllCollapsed, asideCollapsedWidth } from '@/settings/designSetting' import { theme, asideCollapsedWidth } from '@/settings/designSetting'
import { asideAllCollapsed } from '@/settings/systemSetting'
import { DesignStateType } from './designStore.d' import { DesignStateType } from './designStore.d'
import { setLocalStorage, getLocalStorage } from '@/utils' import { setLocalStorage, getLocalStorage } from '@/utils'
import { StorageEnum } from '@/enums/storageEnum' import { StorageEnum } from '@/enums/storageEnum'

View File

@ -10,6 +10,7 @@ const { GO_LANG_STORE } = StorageEnum
const storageLang: LangStateType = getLocalStorage(GO_LANG_STORE) const storageLang: LangStateType = getLocalStorage(GO_LANG_STORE)
// 语言
export const useLangStore = defineStore({ export const useLangStore = defineStore({
id: 'useLangStore', id: 'useLangStore',
state: (): LangStateType => state: (): LangStateType =>

View File

@ -2,6 +2,7 @@ import { defineStore } from 'pinia'
import { PackagesStoreType, PackagesType } from './packagesStore.d' import { PackagesStoreType, PackagesType } from './packagesStore.d'
import { packagesList } from '@/packages/index' import { packagesList } from '@/packages/index'
// 组件 pakages
export const usePackagesStore = defineStore({ export const usePackagesStore = defineStore({
id: 'usePackagesStore', id: 'usePackagesStore',
state: (): PackagesStoreType => ({ state: (): PackagesStoreType => ({

View File

@ -0,0 +1,7 @@
export enum SettingStoreEnums {
HIDE_PACKAGE_ONE_CATEGORY = 'hidePackageOneCategory',
}
export interface SettingStoreType {
[SettingStoreEnums.HIDE_PACKAGE_ONE_CATEGORY]: boolean
}

View File

@ -0,0 +1,28 @@
import { defineStore } from 'pinia'
import { hidePackageOneCategory } from '@/settings/systemSetting'
import { SettingStoreType } from './settingStore.d'
import { setLocalStorage, getLocalStorage } from '@/utils'
import { StorageEnum } from '@/enums/storageEnum'
const { GO_SYSTEM_SETTING } = StorageEnum
const storageSetting: SettingStoreType = getLocalStorage(GO_SYSTEM_SETTING)
// 全局设置
export const useSettingStore = defineStore({
id: 'useSettingStore',
state: (): SettingStoreType =>
storageSetting || {
hidePackageOneCategory,
},
getters: {
getHidePackageOneCategory(): boolean {
return this.hidePackageOneCategory
},
},
actions: {
setItem(key: string, value: boolean): void {
;(this as any)[key] = value
setLocalStorage(GO_SYSTEM_SETTING, this.$state)
},
},
})

View File

@ -1,6 +1,7 @@
import { icon } from '@/plugins' import { icon } from '@/plugins'
import { DialogEnum } from '@/enums/pluginEnum' import { DialogEnum } from '@/enums/pluginEnum'
import { dialogIconSize, maskClosable } from '@/settings/designSetting' import { dialogIconSize } from '@/settings/designSetting'
import { maskClosable } from '@/settings/systemSetting'
import { DialogReactive } from 'naive-ui' import { DialogReactive } from 'naive-ui'
const { InformationCircleIcon } = icon.ionicons5 const { InformationCircleIcon } = icon.ionicons5
import { renderIcon } from '@/utils' import { renderIcon } from '@/utils'

View File

@ -1,7 +1,7 @@
<template> <template>
<div class="go-chart-common"> <div class="go-chart-common">
<!-- v-show="packages.categorysNum > 1" -->
<n-menu <n-menu
v-show="hidePackageOneCategory"
class="chart-menu-width" class="chart-menu-width"
v-model:value="selectValue" v-model:value="selectValue"
:options="packages.menuOptions" :options="packages.menuOptions"
@ -16,9 +16,10 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, watch, markRaw,reactive } from 'vue' import { ref, watch, markRaw, reactive, computed } from 'vue'
import { ItemBox } from '../ItemBox/index' import { ItemBox } from '../ItemBox/index'
import { ConfigType } from '@/packages/index.d' import { ConfigType } from '@/packages/index.d'
import { useSettingStore } from '@/store/modules/settingStore/settingStore'
const props = defineProps({ const props = defineProps({
selectOptions: { selectOptions: {
@ -27,6 +28,14 @@ const props = defineProps({
} }
}) })
//
const settingStore = useSettingStore()
const hidePackageOneCategory = computed(() => {
if (packages.categorysNum > 1) return true
return !settingStore.getHidePackageOneCategory
})
// TODO markeRaw // TODO markeRaw
let packages = reactive<{ let packages = reactive<{
[T: string]: any [T: string]: any
@ -91,13 +100,13 @@ const clickItemHandle = (key: string) => {
/* 此高度与 ContentBox 组件关联*/ /* 此高度与 ContentBox 组件关联*/
$topHeight: 60px; $topHeight: 60px;
$menuWidth: 65px; $menuWidth: 65px;
@include go('chart-common') { @include go("chart-common") {
display: flex; display: flex;
height: calc(100vh - #{$--header-height} - #{$topHeight}); height: calc(100vh - #{$--header-height} - #{$topHeight});
.chart-menu-width { .chart-menu-width {
width: $menuWidth; width: $menuWidth;
flex-shrink: 0; flex-shrink: 0;
@include filter-bg-color('background-color2-shallow'); @include filter-bg-color("background-color2-shallow");
} }
.chart-content-list { .chart-content-list {
flex: 1; flex: 1;

View File

@ -1,5 +1,4 @@
<template> <template>
<div class="go-bg-point"></div>
<div class="go-chart"> <div class="go-chart">
<n-layout> <n-layout>
<HeaderPro> <HeaderPro>
@ -35,13 +34,9 @@ import { ContentDetails } from './components/ContentDetails/index'
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
$height: 100vh; @include go("chart") {
@include go('bg-point') { height: 100vh;
@include background-image('background-point'); width: 100vw;
@extend .go-point-bg;
}
@include go('chart') {
height: $height;
overflow: hidden; overflow: hidden;
@include background-image('background-image'); @include background-image('background-image');
} }