diff --git a/.eslintrc.js b/.eslintrc.js index d01f44ae..25f7f0d1 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -22,6 +22,7 @@ module.exports = { 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 'no-unused-vars': 'off', + 'vue/no-unused-vars': 'off', 'vue/multi-word-component-names': 'off', 'vue/valid-template-root': 'off', 'vue/no-mutating-props': 'off' diff --git a/src/plugins/icon.ts b/src/plugins/icon.ts index 90bf057c..bcc2496a 100644 --- a/src/plugins/icon.ts +++ b/src/plugins/icon.ts @@ -57,7 +57,10 @@ import { ChevronDownOutline as ChevronDownOutlineIcon, Pulse as PulseIcon, Folder as FolderIcon, - FolderOpen as FolderOpenIcon + FolderOpen as FolderOpenIcon, + Image as ImageIcon, + Images as ImagesIcon, + List as ListIcon } from '@vicons/ionicons5' import { @@ -211,7 +214,13 @@ const ionicons5 = { // 文件夹 FolderIcon, // 文件夹打开 - FolderOpenIcon + FolderOpenIcon, + // 图片 + ImageIcon, + // 多个图片 + ImagesIcon, + // 列表 + ListIcon } const carbon = { diff --git a/src/styles/common/style.scss b/src/styles/common/style.scss index 9fde7bf4..13dee27b 100644 --- a/src/styles/common/style.scss +++ b/src/styles/common/style.scss @@ -1,7 +1,7 @@ -@import './var.scss'; -@import './format.scss'; -@import './animation.scss'; -@import './mixins/mixins.scss'; +@import "./var.scss"; +@import "./format.scss"; +@import "./animation.scss"; +@import "./mixins/mixins.scss"; // 过度 .go-transition { @@ -49,14 +49,14 @@ // 毛玻璃 .go-background-filter { backdrop-filter: $--filter-blur-base; - @include fetch-bg-color('filter-color'); + @include fetch-bg-color("filter-color"); box-shadow: $--border-shadow; } // 毛玻璃 .go-background-filter-shallow { backdrop-filter: $--filter-blur-base; - @include fetch-bg-color('filter-color-shallow'); + @include fetch-bg-color("filter-color-shallow"); box-shadow: $--border-shadow; } @@ -68,7 +68,7 @@ // 背景斑点需配合 @mixin background-image 使用 .go-point-bg { - @include fetch-theme-custom('background-color', 'background-color1'); + @include fetch-theme-custom("background-color", "background-color1"); background-size: 15px 15px, 15px 15px; } @@ -117,4 +117,11 @@ .go-#{$typekey} { #{$type}: 0 !important; } -} \ No newline at end of file +} + +.go-d-inline-block { + display: inline-block; +} +.go-d-block { + display: block; +} diff --git a/src/views/chart/ContentBox/index.vue b/src/views/chart/ContentBox/index.vue index 8c10edcf..826bbb85 100644 --- a/src/views/chart/ContentBox/index.vue +++ b/src/views/chart/ContentBox/index.vue @@ -10,14 +10,9 @@ <slot name="icon"></slot> </div> </n-space> - <n-space> + <n-space align="center" style="gap: 4px"> <slot name="top-right"></slot> - <n-icon - v-show="backIcon" - size="20" - class="go-cursor-pointer" - @click="backHandle" - > + <n-icon v-show="backIcon" size="20" class="go-cursor-pointer go-d-block" @click="backHandle"> <chevron-back-outline-icon></chevron-back-outline-icon> </n-icon> </n-space> @@ -151,7 +146,7 @@ $topOrBottomHeight: 40px; border-bottom: 1px solid; @include fetch-border-color('background-color1'); } - + .content { height: calc(100vh - #{$--header-height}); overflow: hidden; @@ -165,9 +160,7 @@ $topOrBottomHeight: 40px; height: calc(100vh - #{$--header-height} - #{$topOrBottomHeight}); } .content-height-show-both { - height: calc( - 100vh - #{$--header-height} - #{$topOrBottomHeight} - #{$topOrBottomHeight} - ); + height: calc(100vh - #{$--header-height} - #{$topOrBottomHeight} - #{$topOrBottomHeight}); } } </style> diff --git a/src/views/chart/ContentLayers/index.vue b/src/views/chart/ContentLayers/index.vue index 1c34c7b3..1211316f 100644 --- a/src/views/chart/ContentLayers/index.vue +++ b/src/views/chart/ContentLayers/index.vue @@ -8,14 +8,41 @@ @mousedown="boxMousedownHandle($event)" > <template #icon> - <n-icon size="16" :depth="2"> - <component :is="LayersIcon"></component> - </n-icon> + <n-icon size="16" :depth="2" :component="LayersIcon" /> </template> + + <template #top-right> + <n-radio-group v-model:value="layerMode" name="radiobuttongroup1" size="small" class="go-flex-center"> + <n-radio-button value="thumbnail"> + <n-icon size="16" class="go-d-block" title="缩略图" :depth="2" :component="ImageIcon" /> + </n-radio-button> + <n-radio-button value="text"> + <n-icon size="16" class="go-d-block" title="文字列表" :depth="2" :component="ListIcon" /> + </n-radio-button> + </n-radio-group> + <!-- <n-icon + size="16" + class="go-cursor-pointer go-d-block" + title="缩略图" + :depth="2" + :component="ImageIcon" + :class="{ 'go-layer-mode-active': layerMode === 'thumbnail' }" + /> + <n-icon + size="16" + class="go-cursor-pointer go-d-block" + title="文字列表" + :depth="2" + :component="ListIcon" + :class="{ 'go-layer-mode-active': layerMode === 'text' }" + /> --> + </template> + <!-- 图层内容 --> <n-space v-if="reverseList.length === 0" justify="center"> <n-text class="not-layer-text">暂无图层~</n-text> </n-space> + <!-- https://github.com/SortableJS/vue.draggable.next --> <draggable item-key="id" v-model="layerList" ghostClass="ghost" @change="onMoveCallback"> <template #item="{ element }"> @@ -55,12 +82,13 @@ import { LayersGroupListItem } from './components/LayersGroupListItem/index' import { icon } from '@/plugins' -const { LayersIcon } = icon.ionicons5 +const { LayersIcon, ImageIcon, ListIcon } = icon.ionicons5 const chartLayoutStore = useChartLayoutStore() const chartEditStore = useChartEditStore() const { handleContextMenu, onClickOutSide } = useContextMenu() const layerList = ref<any>([]) +const layerMode = ref<'thumbnail' | 'text'>('thumbnail') // 逆序展示 const reverseList = computed(() => { @@ -159,7 +187,7 @@ const mouseleaveHandle = (item: CreateComponentType) => { </script> <style lang="scss" scoped> -$wight: 170px; +$wight: 180px; @include go(content-layers) { width: $wight; flex-shrink: 0; @@ -177,5 +205,8 @@ $wight: 170px; .ghost { opacity: 0; } + .go-layer-mode-active { + color: #51d6a9; + } } </style>