feat: 添加图层模式控制选项

.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'

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 = {

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;
   }
-}
+}
+
+.go-d-inline-block {
+  display: inline-block;
+}
+.go-d-block {
+  display: block;
+}

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>

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>