diff --git a/src/components/GoSystemSet/index.d.ts b/src/components/GoSystemSet/index.d.ts index 97ac0b64..ba8370b0 100644 --- a/src/components/GoSystemSet/index.d.ts +++ b/src/components/GoSystemSet/index.d.ts @@ -8,4 +8,5 @@ export type ListType = { step?: number min?: number tip?: string + options?: { label: string; value: any }[] } diff --git a/src/components/GoSystemSet/index.vue b/src/components/GoSystemSet/index.vue index 695eb479..75df1a17 100644 --- a/src/components/GoSystemSet/index.vue +++ b/src/components/GoSystemSet/index.vue @@ -10,10 +10,15 @@ - - + + + + + {{ item.name }} + + + + + + + {{ item.desc }} @@ -46,7 +58,6 @@ - @@ -55,7 +66,7 @@ import { reactive } from 'vue' import { ListType } from './index.d' import { useSettingStore } from '@/store/modules/settingStore/settingStore' -import { SettingStoreEnums } from '@/store/modules/settingStore/settingStore.d' +import { SettingStoreEnums, ToolsStatusEnum } from '@/store/modules/settingStore/settingStore.d' import { icon } from '@/plugins' const { HelpOutlineIcon, CloseIcon } = icon.ionicons5 @@ -91,6 +102,37 @@ const list = reactive([ desc: '切换语言重新加载页面', tip: '若遇到部分区域语言切换失败,则建议开启' }, + { + key: 'divider1', + type: 'divider', + name: '', + desc: '', + value: '' + }, + { + key: SettingStoreEnums.CHART_TOOLS_STATUS, + value: settingStore.getChartToolsStatus, + type: 'select', + name: '工具栏展示', + desc: '工作空间工具栏展示方式', + options: [ + { + label: '侧边栏', + value: ToolsStatusEnum.ASIDE + }, + { + label: '底部', + value: ToolsStatusEnum.DOCK + } + ] + }, + { + key: 'divider0', + type: 'divider', + name: '', + desc: '', + value: '' + }, { key: SettingStoreEnums.CHART_MOVE_DISTANCE, value: settingStore.getChartMoveDistance, @@ -99,7 +141,7 @@ const list = reactive([ min: 1, step: 1, suffix: 'px', - desc: '方向键控制图标移动的距离' + desc: '工作空间方向键控制移动距离' }, { key: SettingStoreEnums.CHART_ALIGN_RANGE, @@ -109,8 +151,8 @@ const list = reactive([ min: 10, step: 2, suffix: 'px', - desc: '移动图表时的吸附距离' - }, + desc: '工作空间移动图表时的吸附距离' + } ]) const closeHandle = () => { @@ -127,11 +169,17 @@ const handleChange = (e: MouseEvent, item: ListType) => { @extend .go-background-filter; min-width: 100px; max-width: 60vw; + padding-bottom: 20px; .item-left { width: 200px; } .input-num-width { width: 100px; } + @include deep() { + .n-list-item:not(:last-child) { + border-bottom: 0; + } + } } diff --git a/src/settings/systemSetting.ts b/src/settings/systemSetting.ts index ef9f2dd6..ac362868 100644 --- a/src/settings/systemSetting.ts +++ b/src/settings/systemSetting.ts @@ -1,16 +1,17 @@ +import { SettingStoreEnums, ToolsStatusEnum } from '@/store/modules/settingStore/settingStore.d' + // * 系统全局设置 - -// 侧边栏折叠是否隐藏全部 -export const asideAllCollapsed = true - -// 拖拽页面左侧表单分类只有一项的时候是否隐藏 -export const hidePackageOneCategory = true - -// 切换语言是否进行路由刷新 -export const changeLangReload = false - -// 图表移动时按方向键移动的距离 -export const chartMoveDistance = 5 - -// 图表拖拽时的吸附距离(px) -export const chartAlignRange = 10 \ No newline at end of file +export const systemSetting = { + // 侧边栏折叠是否隐藏全部 + [SettingStoreEnums.ASIDE_ALL_COLLAPSED]: true, + // 拖拽页面左侧表单分类只有一项的时候是否隐藏 + [SettingStoreEnums.HIDE_PACKAGE_ONE_CATEGORY]: true, + // 切换语言是否进行路由刷新 + [SettingStoreEnums.CHANGE_LANG_RELOAD]: false, + // 图表移动时按方向键移动的距离 + [SettingStoreEnums.CHART_MOVE_DISTANCE]: 5, + // 图表拖拽时的吸附距离(px) + [SettingStoreEnums.CHART_ALIGN_RANGE]: 10, + // 图表工具栏状态(侧边工具状态) + [SettingStoreEnums.CHART_TOOLS_STATUS]: ToolsStatusEnum.ASIDE +} \ No newline at end of file diff --git a/src/store/modules/chartLayoutStore/chartLayoutStore.d.ts b/src/store/modules/chartLayoutStore/chartLayoutStore.d.ts index b405a63f..4df6e122 100644 --- a/src/store/modules/chartLayoutStore/chartLayoutStore.d.ts +++ b/src/store/modules/chartLayoutStore/chartLayoutStore.d.ts @@ -4,7 +4,7 @@ export enum ChartLayoutStoreEnum { LAYERS = 'layers', CHARTS = 'charts', DETAILS = 'details', - ALIGNLINE = 'alignLine', + TOOLS = 'tools' } export interface ChartLayoutType { @@ -14,6 +14,4 @@ export interface ChartLayoutType { [ChartLayoutStoreEnum.CHARTS]: boolean // 详情设置 [ChartLayoutStoreEnum.DETAILS]: boolean - // 对齐线 - [ChartLayoutStoreEnum.ALIGNLINE]: boolean } diff --git a/src/store/modules/chartLayoutStore/chartLayoutStore.ts b/src/store/modules/chartLayoutStore/chartLayoutStore.ts index f8057698..d37dd428 100644 --- a/src/store/modules/chartLayoutStore/chartLayoutStore.ts +++ b/src/store/modules/chartLayoutStore/chartLayoutStore.ts @@ -8,7 +8,7 @@ const chartEditStore = useChartEditStore() const { GO_CHART_LAYOUT_STORE } = StorageEnum -const storageChartLayout: ChartLayoutType = getLocalStorage( GO_CHART_LAYOUT_STORE) +const storageChartLayout: ChartLayoutType = getLocalStorage(GO_CHART_LAYOUT_STORE) // 编辑区域布局和静态设置 export const useChartLayoutStore = defineStore({ @@ -20,9 +20,7 @@ export const useChartLayoutStore = defineStore({ // 图表组件 charts: true, // 详情设置 - details: true, - // 对齐线 - alignLine: true, + details: true }, getters: { getLayers(): boolean { @@ -33,9 +31,6 @@ export const useChartLayoutStore = defineStore({ }, getDetails(): boolean { return this.details - }, - getAlignLine(): boolean { - return this.alignLine } }, actions: { diff --git a/src/store/modules/settingStore/settingStore.d.ts b/src/store/modules/settingStore/settingStore.d.ts index 7c9c9c2f..5da4dfe6 100644 --- a/src/store/modules/settingStore/settingStore.d.ts +++ b/src/store/modules/settingStore/settingStore.d.ts @@ -1,9 +1,15 @@ +export enum ToolsStatusEnum { + DOCK = 'dock', + ASIDE = 'aside', +} + export enum SettingStoreEnums { HIDE_PACKAGE_ONE_CATEGORY = 'hidePackageOneCategory', CHANGE_LANG_RELOAD = 'changeLangReload', ASIDE_ALL_COLLAPSED = 'asideAllCollapsed', CHART_MOVE_DISTANCE = 'chartMoveDistance', CHART_ALIGN_RANGE = 'chartAlignRange', + CHART_TOOLS_STATUS = 'chartToolsStatus', } export interface SettingStoreType { @@ -12,4 +18,5 @@ export interface SettingStoreType { [SettingStoreEnums.ASIDE_ALL_COLLAPSED]: boolean [SettingStoreEnums.CHART_MOVE_DISTANCE]: number [SettingStoreEnums.CHART_ALIGN_RANGE]: number + [SettingStoreEnums.CHART_TOOLS_STATUS]: ToolsStatusEnum } diff --git a/src/store/modules/settingStore/settingStore.ts b/src/store/modules/settingStore/settingStore.ts index f3e81bc8..775cd132 100644 --- a/src/store/modules/settingStore/settingStore.ts +++ b/src/store/modules/settingStore/settingStore.ts @@ -1,30 +1,19 @@ import { defineStore } from 'pinia' -import { - hidePackageOneCategory, - changeLangReload, - asideAllCollapsed, - chartAlignRange, - chartMoveDistance -} from '@/settings/systemSetting' +import { systemSetting } from '@/settings/systemSetting' import { asideCollapsedWidth } from '@/settings/designSetting' -import { SettingStoreType } from './settingStore.d' +import { SettingStoreType, ToolsStatusEnum } from './settingStore.d' import { setLocalStorage, getLocalStorage } from '@/utils' import { StorageEnum } from '@/enums/storageEnum' const { GO_SYSTEM_SETTING_STORE } = StorageEnum -const storageSetting: SettingStoreType = getLocalStorage(GO_SYSTEM_SETTING_STORE) +const storageSetting: SettingStoreType = getLocalStorage( + GO_SYSTEM_SETTING_STORE +) // 全局设置 export const useSettingStore = defineStore({ id: 'useSettingStore', - state: (): SettingStoreType => - storageSetting || { - hidePackageOneCategory, - changeLangReload, - asideAllCollapsed, - chartMoveDistance, - chartAlignRange, - }, + state: (): SettingStoreType => storageSetting || systemSetting, getters: { getHidePackageOneCategory(): boolean { return this.hidePackageOneCategory @@ -43,14 +32,20 @@ export const useSettingStore = defineStore({ }, getChartAlignRange(): number { return this.chartAlignRange + }, + getChartToolsStatus(): ToolsStatusEnum { + return this.chartToolsStatus } }, actions: { - setItem(key: T, value: K): void { + setItem( + key: T, + value: K + ): void { this.$patch(state => { - state[key]= value - }); + state[key] = value + }) setLocalStorage(GO_SYSTEM_SETTING_STORE, this.$state) - }, - }, + } + } }) diff --git a/src/views/chart/ContentBox/index.vue b/src/views/chart/ContentBox/index.vue index 3c6ffe98..7b83d931 100644 --- a/src/views/chart/ContentBox/index.vue +++ b/src/views/chart/ContentBox/index.vue @@ -12,13 +12,18 @@ - + -